Exercise: Slides

Overview

In this exercise, we’ll focus on creating interactive slides using Quarto. You can use either the quarto-webr or quarto-pyodide extension for this.

Step-by-step

Step into a Quarto Project

Ensure you’re working within a Quarto Project in RStudio or VS Code. If you need help setting up a Quarto project or re-entering the existing Quarto project, please refer back to our first exercise or raise your hand.

Install the Quarto Extension

For new Quarto projects, please make sure to install the Quarto extension into the project by typing into the Terminal tab:

quarto add coatless/quarto-webr
quarto add coatless-quarto/pyodide

If you wish to also use the stanford RevealJS theme, please also install the quarto-stanford theme extension:

quarto add coatless-quarto/stanford

Create a new Quarto Document

Next, please create a new Quarto document.

Modify the document YAML

To have interactive slides, we must use the Quarto Revealjs format. Other presentation formats will not work as they are not constructed with HTML.

Here’s the default document header YAML that you need to use:

---
title: "Example RevealJS Slides"
subtitle: "Let's Rock and Roll!"
date: now
author:
  - name: FirstName LastName
    email: person@stanford.edu
format:
  revealjs: default
---

If you wish to use the Stanford theme, please change the line under format to:

format:
  stanford-revealjs: default

Modify the document header

Next, please modify the document header include the necessary filters

---
engine: knitr
filters:
  - webr
---
---
filters:
  - pyodide
---

Removing the startup message

Sometimes it may not be ideal to display a message on the title slide covering the status of webR or Pyodide. This can be disabled with show-startup-message: false under the relevant document key.

---
webr:
  show-startup-message: false
---
---
pyodide:
  show-startup-message: false
---

Create a new slide

By default, Revealjs uses header markdown syntax to denote sections of the slide deck and slides themselves.

A single # will create a new slide section while two ## will generate a new slide. If you add three ### or more, then the slide will start to have subheaders.

# Section

## My Slide Title

Some slide contents

### Subsection

Some more details...

Place an interactive code area

Next, create a slide that has an interactive code area present.

## My slide 

Let's take a look at ... 

```{webr-r}
# R code here
```
## My slide 

Let's take a look at ... 

```{pyodide-python}
# Python code here
```

Render the document

Finally, please render the slide deck.