Gateways 2026 Tutorial

Welcome!

Please introduce yourself:

  • Name
  • Organization/Institution
  • Why are you here?

Outline

Time Topic Activity
1:00-1:15 Welcome and Intros Discussion
1:15-1:35 OER and Quarto Slides
1:35-2:05 Quarto Tutorial Hands-on
2:05-2:25 Live Code: Intro to WebAssembly Slides
2:25-2:35 Break Break
2:35-3:00 Quarto Live Tutorial Hands-on
3:00-3:15 Interactives: Shiny + Shinylive Slides
3:15-3:30 Shinylive Tutorial Hands-on
3:30-3:45 Publishing Hands-on
3:45-4:00 Wrap-up and Q&A Discussion

Celebrating 35+ years: 501(c)3 nonprofit organization

Our Mission: A transformative, collaborative community empowering educators to drive innovation in STEM education for all students. We provide unique professional development opportunities for faculty and future faculty, extensive support for a wide range of joint projects, and a community that has the broad aim of student success in STEM. We work together to foster the continued development of each member of the community and to promote their success.

QUBES

https://qubeshub.org

  • OER Resource Library
  • Project Workspaces
  • Education Project Websites

OEE-RCN

The Open Education Ecosystem Research Coordination Network

We will establish, incubate, and sustain an Open Education Ecosystem (OEE) designed to address the complex landscape faculty face when adopting computational and data-centric technologies for teaching and learning biology.

Sam Donovan M. Drew LaMar Deb Rook

https://oee.qubeshub.org

Grant #2418329

The (STEM) Open Education Ecosystem

The OER Lifecycle

Challenges:

  • Finding resources is the “easy” part
  • Many resources are not modifiable
  • Very few modified resources are shared back

The Anatomy of an “Open” Resource

  • Resource Type (Book, Lab, Lecture, Assignment, …)
  • Resource Format (PDF, DOCX, HTML, …)

The majority of formats used for OER are not modifiable, and therefore the majority of modifications are not shared back to the community.

OER Authoring + Publishing

Examples (platforms, authoring tools, publishing, etc.):

OER Authoring + Publishing

Notebooks:

Introduction to Quarto

  • The next evolution of R Markdown
  • A publishing system for R, Python, and more
  • Creates notebooks, dashboards, books, reports, presentations

Quarto examples

Anatomy of a Quarto document

---
title: "ggplot2 demo"
format: 
  html:
    code-fold: true
---

## Meet Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

```{r}
#| label: plot-penguins
#| echo: false
#| message: false
#| warning: false

library(tidyverse)
library(palmerpenguins)

ggplot(penguins, 
       aes(x = flipper_length_mm, y = bill_length_mm)) +
  geom_point(aes(color = species, shape = species)) +
  scale_color_manual(values = c("darkorange","purple","cyan4")) +
  labs(
    title = "Flipper and bill length",
    subtitle = "Dimensions for penguins at Palmer Station LTER",
    x = "Flipper length (mm)", y = "Bill length (mm)",
    color = "Penguin species", shape = "Penguin species"
  ) +
  theme_minimal()
```

Quarto extensions

Scrollytelling extension

Journal of Statistical Software (JSS)

nes-revealjs format by EmilHvitfeldt

Quarto extensions

For example, there’s a fontawesome extension.

Install the extension:

Terminal
quarto add quarto-ext/fontawesome

Add to your Quarto document YAML heading:

example.qmd
---
title: "ggplot2 demo"
format: 
  html:
    code-fold: true
    filters:
      - fontawesome
---

Quarto extensions

Use the extension in the doc:

{{< fa brands github >}}

Results in:

Quarto extensions

Quarto extension gallery by Mickaël Canouil

Hands-on activity

Getting Started with Quarto

Example: Interactive R console

What is WebAssembly?

WebAssemby is a low-level, high-performance binary instruction format that allows code to run in web browsers.

Packages with webR

repo.r-wasm.org

R Universe

How to use webR

How to use webR

Install the package:

Terminal
npm i webr

Import the WebR class:

JavaScript
import { WebR } from 'webr';

const webR = new WebR();
await webR.init();

What if you don’t know JavaScript? 😅

Introduction to Quarto Live

Quarto Live embeds WebAssembly powered code blocks and exercises for R and Python into Quarto documents with HTML-based output formats.

Example: Claus Wilke Introduction to R

Example: Six not-so-basic base R functions

How to install Quarto Live

Install the extension:

Terminal
quarto add r-wasm/quarto-live

Add to your Quarto document YAML header:

example.qmd
---
format: html
---

How to install Quarto Live

Install the extension:

Terminal
quarto add r-wasm/quarto-live

Add to your Quarto document YAML header:

example.qmd
---
format: live-html
engine: knitr
---

{{< include ./_extensions/r-wasm/live/_knitr.qmd >}}

Installing packages

As the document loads

example.qmd
---
format: live-html
webr:
  packages:
    - dplyr
    - palmerpenguins
    - ggplot2
---

Installing packages

Interactively

example.qmd
```{webr}
install.packages("dplyr", quiet = TRUE)
```

How to use Quarto Live

  • Place code in a webr code chunk for R
  • Place code in a pyodide code chunk for Python
example.qmd
```{webr}
for (x in 1:5) {
  print(x ** 2)
}
```

How to use Quarto Live

Can be used in presentations too:

  • Edit your YAML header to live-revealjs:
example.qmd
---
format: live-revealjs
---
  • Use the quarto-drop extension to drop an R or Python console into your slides

How to use Quarto Live

Options include:

  • Creating read-only cells
  • Autorun
  • Autocomplete
  • and more!

Creating exercises

Designating a webr chunk as an exercise (with optional setup code, hints, solutions, and grading).

Hint 1

Consider subtracting 1, 2, and 3 from 10.

Tip

The answer is 4 ☺️

webR love 💜

Quarto Live Reference

Quarto Live Reference

Web apps for statistics

Introduction to Shiny

Shiny allows you to create web apps, no web development skills required.

Traditional Shiny architecture

Hosting Shiny apps

On-Prem

Cloud

Hosting Shiny apps

Some web services offer scalability, features, and cost:

But they can’t run traditional Shiny apps!

Example: Claus Wilke’s Color Picker App

Introduction to Shinylive

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| viewerHeight: 500

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Simple Shiny App",
  theme = bs_theme(bootswatch = "flatly"),
  
  sidebar = sidebar(
    numericInput("number", "Enter a number:", value = 5, min = 1, max = 100),
    selectInput("color", "Choose color:", 
                choices = c("red", "blue", "green", "purple"))
  ),
  
  card(
    card_header("Result"),
    card_body(
      plotOutput("plot")
    )
  )
)

server <- function(input, output) {
  output$plot <- renderPlot({
    plot(1:input$number, 
         col = input$color,
         pch = 19,
         cex = 2,
         main = "Simple Plot",
         xlab = "Index",
         ylab = "Value")
  })
}

shinyApp(ui, server)

Shinylive architecture

How to use Shinylive

  1. Shinylive online editor
  2. Convert a Shiny app
  3. Embed a Shiny app with Quarto

How to use Shinylive

Shinylive online editor

How to use Shinylive

Convert a Shiny app

Install the package:

install.packages("shinylive")


pip install shinylive

How to use Shinylive

Convert a Shiny app

Export the app:

shinylive::export("myapp", "site")


shinylive export myapp site

How to use Shinylive

Convert a Shiny app

Start a web server for the directory:

httpuv::runStaticServer("site")


cd site
python -m http.server 8000

How to use Shinylive

Embed a Shiny app with Quarto

Install the Quarto extension:

Terminal
quarto add quarto-ext/shinylive

Add to your Quarto document YAML heading:

example.qmd
filters:
  - shinylive

How to use Shinylive

Embed a Shiny app with Quarto

Insert a code block with {shinylive-python} or {shinylive-r}

example.qmd
```{shinylive-r}
#| standalone: true

/* App code here */

```

Example: Shiny Assistant

Publishing: Option #1

Posit Connect Cloud: https://connect.posit.cloud/

  • Pro: Free
  • Pro: Easiest publishing solution
  • Pro: Great for students sharing work
  • Con: Does not share files (non-adaptable)

Publishing: Option #2

GitHub/GitHub Pages: https://github.com

  • Pro: Free
  • Pro: Files are accessible (adaptable)
  • Con: More complicated setup (some git knowledge)

Detailed instructions

Thank you

Slides borrowed heavily from Isabella Velásquez.

Reference Website: https://mdlama.github.io/oerquarto/

Slides: https://mdlama.github.io/oerquarto/slides/gateways-2026-tutorial

Questions?