slideshow.qmd

---
title: "Exercise: Creating a slideshow with Quarto"
lang: en
---

## Description

Pick a previous slideshow of yours and try to recreate it using Quarto. The following slideshow incorporates all features from this exercise. You can download it at the end of this page.

```{=html}
<iframe class="slide-deck" width="100%" height="450" src="demo_slideshow.html"></iframe>
```

## Getting started

You can begin by creating a new Quarto Presentation.

1. Create a new Quarto Presentation
   - Click on _File_ > _New File_ > _Quarto Presentation_
   - Fill _Title_ and _Author_
   - Click _Create_
2. Declare the language of the document by setting e.g. `lang: en` in the YAML header  (see the [Quarto documentation on document language](https://quarto.org/docs/authoring/language.html) for more information)
3. Change `format` as follows:\
   ```yaml
   format:
     revealjs:
       embed-resources: true
       hash-one-based-index: true
       slide-number: true
       navigation-mode: "linear"
       width: 1600
       height: 900
   ```
4. Click on the disk symbol to save (maybe call the file `presentation.qmd`)
5. Click on _Render_

## Creating slides

Per default, level-1 and level-2 headings create new slides, but horizontal rules (`---`) work as well:

```md
# Slide 1

Content on first slide

# Slide 2

Content on second slide

---

Content on third slide
```

## Usage

- Navigate forward with {{< kbd Space >}} or {{< kbd N >}} (for **n**ext)^[The arrow keys {{< kbd → >}} and {{< kbd ↓ >}} are specifically for navigating through [vertical slides](https://quarto.org/docs/presentations/revealjs/advanced.html#vertical-slides).]
- Navigate backward with {{< kbd Shift+Space >}} or {{< kbd P >}} (for **p**revious)^[The arrow keys {{< kbd ← >}} and {{< kbd ↑ >}} are specifically for navigating through [vertical slides](https://quarto.org/docs/presentations/revealjs/advanced.html#vertical-slides).]
- Press {{< kbd F >}} to switch to **f**ullscreen
- Press {{< kbd O >}} or {{< kbd Esc >}} to show the slide **o**verview
- Press {{< kbd B >}} or {{< kbd . >}} to pause (**b**lacken) the screen
- Press {{< kbd G >}} to **g**o to any slide by number
- Press {{< kbd S >}} to open the **s**peaker notes
- Press {{< kbd M >}} to toggle a **m**enu that allows you to jump to any slide
- Press {{< kbd Ctrl >}} + click on the slide to zoom in
- Press {{< kbd Ctrl+Shift+F >}} to activate search
- Press {{< kbd ? >}} to show the keyboard help

## Slide layout

Elements (e.g., text, images) on a slide are typically arranged in the order they appear in the markdown source. There are multiple ways, however, to add more structure to a slide.

### Columns

One can create multiple columns next to each other by structuring them using Pandoc's fenced [divs](https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans) with the classes `columns` and `column`:

```md
::: {.columns}
:::: {.column width="33%"}
Left
::::

:::: {.column width="33%"}
Middle
::::

:::: {.column width="33%"}
Right
::::
:::
```

### Tabsets

Tabsets allow to put more content on a slide than the available space normally allows. Use a [div](https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans) with the class `panel-tabset`:

```md
::: {.panel-tabset}

### Tab A

Content for `Tab A`

### Tab B

Content for `Tab B`

:::
```

### Layouts

If the content on a slide is to be presented within two columns or two rows, one can set `layout-ncol` or `layout-nrow`:

```md
::: {layout-ncol=2}
Content in first column

Content in second column
:::

::: {layout-nrow=2}
Content in first row

Content in second row
:::
```

If the content of one column/row spans multiple paragraphs, one can nest it inside a div:

```md
::: {layout-ncol=2}
:::: {}
__Left__

![](image.png)
::::

:::: {}
__Right__

![](image.png)
::::
:::
```

The [Quarto documentation on figure panels](https://quarto.org/docs/authoring/figures.html#figure-panels) provides additional examples.

More complex layouts can be achieved by specifying `layout`:

```md
::: {layout="[[1,1], [1]]"}
Top left

Top right

Bottom
:::
```

You can read more about [panel layouts in the Quarto documentation](https://quarto.org/docs/interactive/layout.html#panel-layout).

### Callouts

Quarto provides pre-styled blocks in five different flavours that draw the reader's attention:

```md
::: {.callout-note}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::
```

More information about callouts is provided in the [Quarto documentation on callouts](https://quarto.org/docs/authoring/callouts.html).

### Asides and footer

Asides contain less important content and are displayed at the bottom of a slide:

```md
::: {.aside}
Some additional commentary of more peripheral interest.
:::
```

A footer can be added on any slide by creating a [div](https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans) with the class `footer`:

```md
::: {.footer}
Custom footer
:::
```

## Positioning of elements

### Center content vertically

```md
## Centered slide {.center}

This will appear in the middle, rather than the top, of the slide.
```

### Absolute position

One can also specify the exact position of elements by using the class `absolute`:

```md
![](image.png){.absolute top="200" left="50" width="300"}

[Text at custom position]{.absolute top="400" left="600" width="300"}
```

### Fit words

You can fit words to the slide by adding the class `r-fit-text`:

```md
[Two Words]{.r-fit-text}

[Longer Explanation]{.r-fit-text}
```

### Border

One can add a border around any element by adding the class `r-frame`:

```md
[Other content]{.r-frame}
```

## Incremental points

For bullet points to appear step by step, use the following syntax:

```md
::: {.incremental}
- first point
- second point
- last point
:::
```

Other elements, such as columns, can be made incremental by adding the class `fragment`:

```md
::: {.columns}
:::: {.column width="40%"}
- foo
- bar
- baz
::::
:::: {.column width="60%" .fragment}
- foo
- bar
::::
:::
```

The same can be applied to images:

```md
::: {.fragment}
![](image.png){width=300px}
:::
```

## Interactivity

### Lightbox images

One can allow to open an enlarged version of images by adding the class `lightbox`:

```md
![](image.png){.lightbox}
```

### Videos

Interactive elements can be incorporated by embedding videos:

```md
{{{< video https://vimeo.com/1084537 width="640px" height="360px" >}}}
```

### R Code

R code may compute to interactive widgets:

``````qmd
```{{r}}
swiss |>
  tibble::rownames_to_column(var = "Province") |>
  gt::gt() |>
  gt::opt_interactive(
      use_search = TRUE,
      use_filters = TRUE,
      use_resizers = TRUE,
      use_highlight = TRUE,
      use_compact_mode = TRUE,
      use_page_size_select = FALSE,
      page_size_default = 5
  )
```
``````

### Websites

As the slideshow is a website, other websites can be embedded, too:

``````md
::: {.columns}
:::: {.column}
Discover the elements that make up a neuron.
::::

:::: {.column}
```{{=html}}
<iframe class="r-frame" data-src="https://humanbiology.pressbooks.tru.ca/wp-admin/admin-ajax.php?action=h5p_embed&id=118" width="882" height="533" frameborder="0" allowfullscreen="allowfullscreen" data-external="1"></iframe><script src="https://humanbiology.pressbooks.tru.ca/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
```
::::
:::
``````

## Background

One can put colors, images, videos and whole websites in the background of a slide. E.g. for a aquamarine slide, one can do the following:

```md
# Aquamarine Slide {data-background-color="aquamarine"}

Some content
```

An image can be used as background like this:

```md
# {background-image="https://picsum.photos/1600/900"}

Content with background image
```

Note that one can also choose to use a GIF as image background and thus achieve a moving background. Alternatively one can show a video in the background of a slide like this:

```md
# {background-video="https://test-videos.co.uk/vids/sintel/mp4/av1/1080/Sintel_1080_10s_1MB.mp4"}

Content with video background
```

Finally, whole websites can be embedded into slideshows, such as this Google Streetview sight of the Buckingham Palace:

```md
# {background-iframe="https://www.google.com/maps/embed?pb=!4v1567634732542!6m8!1m7!1sCAoSK0FGMVFpcFBwdDA1a3pFdm9mWVk0Y3Z4dS1zX3JEUGVMT25ib0I3QnRqem8.!2m2!1d51.50178371216957!2d-0.1407569859987906!3f232.50377602784036!4f-2.7819907211537895!5f0.7820865974627469" background-interactive="true"}
```

## Speaker notes

Speaker notes can be added using a div with the class name `notes`:

```md
::: {.notes}
These are speaker notes that belong to the current slide.
:::
```

They appear while presenting the slideshow next to the slide's content.

## References

Put your bibliography in a BibTeX file (extension `.bib`) and reference it in your YAML metadata:

```yaml
bibliography: literature.bib
```

Add a level one heading and a div with the id `refs` at the end of the document:

```md
# References

::: {#refs}
:::
```

You can now cite from your bibliography using the syntax `[@id]`.

For more information on how to cite literature, head over to the [Quarto documentation on citations](https://quarto.org/docs/authoring/footnotes-and-citations.html).

## Final notes

For even more features like remote control, chalkboards, transitions, automatic progress, and link previews, head over to the [Quarto documentation on Reveal.js slides](https://quarto.org/docs/presentations/revealjs/).

You can download the source of a presentation that uses all the features presented on this page via the following button:

{{< downloadthis demo_slideshow.zip dname="demo_slideshow" label="Download source files as ZIP">}}