Exercise: Creating a slideshow with Quarto

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.

Getting started

You can begin by creating a new Quarto Presentation.

Create a new Quarto Presentation
- Click on File > New File > Quarto Presentation
- Fill Title and Author
- Click Create
Declare the language of the document by setting e.g. lang: en in the YAML header (see the Quarto documentation on document language for more information)

Change format as follows:

format:
  revealjs:
    embed-resources: true
    hash-one-based-index: true
    slide-number: true
    navigation-mode: "linear"
    width: 1600
    height: 900

Click on the disk symbol to save (maybe call the file presentation.qmd)
Click on Render

Creating slides

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

# Slide 1

Content on first slide

# Slide 2

Content on second slide

---

Content on third slide

Usage

Navigate forward with Space or N (for next)¹
Navigate backward with Shift+Space or P (for previous)²
Press F to switch to fullscreen
Press O or Esc to show the slide overview
Press B or . to pause (blacken) the screen
Press G to go to any slide by number
Press S to open the speaker notes
Press M to toggle a menu that allows you to jump to any slide
Press Ctrl + click on the slide to zoom in
Press Ctrl+Shift+F to activate search
Press ? 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 with the classes columns and column:

::: {.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 with the class panel-tabset:

::: {.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:

::: {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:

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

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

:::: {}
__Right__

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

The Quarto documentation on figure panels provides additional examples.

More complex layouts can be achieved by specifying layout:

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

Top right

Bottom
:::

You can read more about panel layouts in the Quarto documentation.

Callouts

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

::: {.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.

Asides and footer

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

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

A footer can be added on any slide by creating a div with the class footer:

::: {.footer}
Custom footer
:::

Positioning of elements

Center content vertically

## 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:

![](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:

[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:

[Other content]{.r-frame}

Incremental points

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

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

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

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

The same can be applied to images:

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

Interactivity

Videos

Interactive elements can be incorporated by embedding videos:

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

R Code

R code may compute to interactive widgets:

```{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:

::: {.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:

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

Some content

An image can be used as background like this:

# {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:

# {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:

# {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:

::: {.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:

bibliography: literature.bib

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

# 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.

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.

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

Footnotes

The arrow keys → and ↓ are specifically for navigating through vertical slides.↩︎
The arrow keys ← and ↑ are specifically for navigating through vertical slides.↩︎