3Add more functionality

We have covered the basics of building text files in markdown. However, we can include figures, videos, interactive materials etc.

Include a figure¶

The quickest way to include a figure is by using ![](url) as done below

![External image](https://polslab.tnw.tudelft.nl/figures/training.JPG)

resulting in

This, however, gives us limited options to customize the figure. We can include more options using the figure directive.

If we want to add a figure to our book, we can embed an URL to an external website (as in the figure above). However, this carries the risk that the figure will no longer be visible if it is moved from its location. It is therefore better to have the figure as a local source file.

So, we first need to upload a figure to GitHub and then refer to that figure in our file.

You can position figures in different places (left / center / right / margin), adjust the size, add a caption, etc. Check the documentation above and try out the different settings.

Embed video (from YouTube) using iframe or video¶

We can embed videos from YouTube using an iframe. For example, the following code embeds a video about Markdown:

```{iframe} https://www.youtube.com/embed/dhzrlXzYOlU?si=n2U0HSJyotjp-r93
:width: 80%

Purves et al. - Jupyter Book 2 0 – A Next Generation tool for sharing for Computational Content
```

resulting in

You can also use the video directive to embed videos.

Include python code using code-block¶

---
kernelspec:
  name: python3
  display_name: 'Python 3'
---

md -> kernel specification at frontmatter

start = 1
next = 2

for i in range(5):
    print(f"{start} + {next} = {start + next}")
    start, next = next, start + next

Directives¶

Various directives are available. These follow the same syntax as figures. For example, we can include a mermaid diagram:

```{mermaid}
flowchart LR
  Start --> Stop
  A1(["Novice"]) --> B1
  A2(["I do know"]) --> B2 & B1
  B1(["Expert"])
  B2(["try"])

  A(["Start"]) --> B{"Decision"}
  B --> C["Option A"] & D["Option B"]
```

Resulting in:

Tabs, cards, grids¶

We already made use of tabs in the exercises above. Tabs can be used to separate content into different sections that can be viewed by clicking on the tab headers.

:::: {tab-set}
::: {tab-item} Tab 1
Content for Tab 1
:::
::: {tab-item} Tab 2
Content for Tab 2
:::
::: 

resulting in: