Técnicas interactivas avanzadas - Hoja de trucos

Ejecución híbrida

Combinar contenido interactivo pre-renderizado (en tiempo de compilación) y en vivo (del lado del cliente) en documentos Quarto.

Ejemplo de datos pre-renderizados:

data(mtcars)
ojs_define(mtcars)

Ejecución en vivo del lado del cliente:

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

Más información sobre la ejecución híbrida

Reactividad con variables OJS

Integrar la interactividad reactiva mediante JavaScript observable (OJS).

Definir entrada reactiva OJS:

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

Utilizar entradas reactivas en R o Python:

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

Profundice en la reactividad

Código fuente

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

Calificación personalizada para ejercicios interactivos

Cree y califique ejercicios interactivos con una lógica personalizada clara y flexible.

Ejemplo de ejercicio (R):

```{webr}
#| exercise: sum-exercise
# Rellene los espacios en blanco para que la suma sea igual a 10.
3 + ______
```

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

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

Lógica de calificación:

Utilizar un bloque de calificación estructurado para la retroalimentación automatizada:

```{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 técnicas de calificación personalizadas

Código fuente

3 + 7

Recuerde: 3 + 7 = 10.

Mejores prácticas y optimización del rendimiento

Buenas Prácticas:

• Separar claramente la lógica en tiempo de compilación y en tiempo de ejecución.
• Aprovechar OJS reactivo para una interacción fluida con el usuario.
• Utilice una configuración de entorno compartido para el código repetitivo.

Optimización del rendimiento:

• Minimizar el tamaño de los datos para la ejecución del lado del cliente.
• Evitar cálculos complejos en el código del lado del cliente.
• Pre-renderizar cálculos pesados.

Ejemplo de YAML optimizado:

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

Mejores prácticas para la codificación interactiva

Lecturas adicionales

• Ejecución híbrida
• Reactividad con OJS
• Técnicas de calificación personalizadas
• Gestión de entornos de ejecución

---

Explorar más artículos

Nota

Aquí hay más artículos de la misma categoría para ayudarte a profundizar en el tema.