Advanced Interactive Techniques Cheatsheet

Hybrid Execution

Combine pre-rendered (build-time) and live (client-side) interactive content in Quarto documents.

Pre-rendered data example:

data(mtcars)
ojs_define(mtcars)

Live client-side execution:

```{pyodide}
#| input:
#|   - mtcars
import pandas as pd
pd.DataFrame(mtcars).head()
```

Learn more about Hybrid Execution

Reactivity with OJS Variables

Integrate reactive interactivity using Observable JavaScript (OJS).

Define reactive OJS input:

```{ojs}
//| echo: false
viewof n = Inputs.range([10, 100], {value: 50, step: 5, label: "Select n"})
```

Use reactive input in R or Python:

```{webr}
#| input:
#|   - n
hist(rnorm(n), col = 'steelblue')
```

Deep dive into Reactivity

Output

viewof n = Inputs.range([10, 100], {value: 50, step: 5, label: "Select n"})

Custom Grading for Interactive Exercises

Create and grade interactive exercises with clear and flexible custom logic.

Exercise example (R):

```{webr}
#| exercise: sum-exercise
# Fill in the blank so that the sum equals 10.
3 + ______
```

::: {.solution exercise="sum-exercise"}
```r
3 + 7
```
:::

::: {.hint exercise="sum-exercise"}
Remember: 3 + 7 = 10.
:::

Grading logic:

Use a structured grading block for automated feedback:

```{webr}
#| exercise: sum-exercise
#| check: true
expected <- 10
if (identical(.result, expected)) {
  list(correct = TRUE, message = "Correct! Well done.")
} else {
  list(correct = FALSE, message = "Incorrect. Hint: 3 + 7 = 10.")
}
```

Explore Custom Grading Techniques

Output

3 + 7

Remember: 3 + 7 = 10.

Best Practices and Performance Optimization

Best Practices:

• Clearly separate build-time and runtime logic.
• Leverage reactive OJS for seamless user interaction.
• Use shared environment setup for repetitive code.

Performance Optimization:

• Minimize data size for client-side execution.
• Avoid complex computations in client-side code.
• Pre-render heavy computations.

Example optimized YAML:

---
format: live-html
webr:
  packages:
    - dplyr
execute:
  freeze: auto
---

Best Practices for Interactive Coding

Further Reading

• Hybrid Execution
• Reactivity with OJS
• Custom Grading Techniques
• Managing Execution Environments

---

Explore More Articles

Note

Here are more articles from the same category to help you dive deeper into the topic.