Fortgeschrittene interaktive Techniken - Spickzettel

Hybride Ausführung

Kombinieren Sie vorgerenderte (zum Zeitpunkt der Erstellung) und interaktive (clientseitige) Inhalte in Quarto-Dokumenten.

Beispiel für vorgerenderte Daten:

data(mtcars)
ojs_define(mtcars)

Live-Ausführung auf der Client-Seite:

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

Erfahren Sie mehr über Hybride Ausführung

Reaktivität mit OJS-Variablen

Reaktive Interaktivität mit Observable JavaScript (OJS) einbinden.

Reaktive OJS-Eingabe definieren:

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

Reaktive Eingabe in R oder Python verwenden:

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

Vertiefung in Reaktivität

Quellcode

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

Individuelle Benotung für interaktive Übungen

Erstellen und benoten Sie interaktive Übungen mit klarer und flexibler benutzerdefinierter Logik.

Übungsbeispiel (R):

```{webr}
#| exercise: sum-exercise
# Füllen Sie die Lücke aus, so dass die Summe gleich ist 10.
3 + ______
```

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

::: {.hint exercise="sum-exercise"}
Erinnern Sie sich an: 3 + 7 = 10.
:::

Benotungslogik:

Verwenden Sie einen strukturierten Benotungsblock für automatisiertes 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.")
}
```

Benutzerdefinierte Benotungstechniken erforschen

Quellcode

3 + 7

Erinnern Sie sich an: 3 + 7 = 10.

Bewährte Praktiken und Performance-Optimierung

Best Practices:

• Klare Trennung von Erstellungszeit und Laufzeitlogik.
• Nutzung von reaktivem OJS für nahtlose Benutzerinteraktion.
• Verwenden Sie eine gemeinsame Umgebung für sich wiederholenden Code.

Leistungsoptimierung:

• Minimierung der Datengröße für die clientseitige Ausführung.
• Vermeiden Sie komplexe Berechnungen im clientseitigen Code.
• Schwere Berechnungen vorrendern.

Beispiel für optimiertes YAML:

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

Best Practices für interaktive Programmierung

Weiterführende Literatur

• Hybride Ausführung
• Reaktivität mit OJS
• Benutzerdefinierte Benotungstechniken
• Verwaltung von Ausführungsumgebungen

---

Weitere Artikel erkunden

Hinweis

Hier finden Sie weitere Artikel aus derselben Kategorie, die Ihnen helfen, tiefer in das Thema einzutauchen.