Techniques interactives avancées - Fiche de contrôle

Exécution hybride

Combiner des contenus interactifs pré-rendus (au moment de la construction) et en direct (côté client) dans les documents Quarto.

Exemple de données pré-rendues:

data(mtcars)
ojs_define(mtcars)

Exécution en direct côté client:

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

En savoir plus sur l’exécution hybride

Réactivité avec les variables OJS

Intégrer l’interactivité réactive en utilisant Observable JavaScript (OJS).

Définir l’entrée OJS réactive:

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

Utiliser une entrée réactive dans R ou Python:

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

Plongée dans la réactivité

Source Code

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

Notation personnalisée pour les exercices interactifs

Créez et notez des exercices interactifs avec une logique personnalisée claire et flexible.

Exemple d’exercice (R):

```{webr}
#| exercise: sum-exercise
# Remplir les espaces vides de manière à ce que la somme soit égale à 10.
3 + ______
```

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

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

Logique de notation:

Utiliser un bloc de notation structuré pour un retour d’information automatisé:

```{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.")
}
```

Découvrez les techniques de notation personnalisées

Source Code

3 + 7

Se souvenir: 3 + 7 = 10.

Meilleures pratiques et optimisation des performances

Bonnes pratiques:

• Séparer clairement la logique de construction et la logique d’exécution.
• Tirer parti de la réactivité OJS pour une interaction transparente avec l’utilisateur.
• Utiliser un environnement partagé pour le code répétitif.

Optimisation des performances:

• Minimiser la taille des données pour l’exécution côté client.
• Éviter les calculs complexes dans le code côté client.
• Pré-rendu des calculs lourds.

Exemple de YAML optimisé:

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

Meilleures pratiques pour le codage interactif

Plus d’informations

• Exécution hybride
• Réactivité avec OJS
• Custom Grading Techniques
• Gestion des environnements d’exécution

---

Explorer d’autres articles

Note

Voici d’autres articles de la même catégorie pour vous aider à approfondir le sujet.