Técnicas interativas avançadas - Folha de dicas

Execução híbrida

Combine conteúdo interativo pré-renderizado (tempo de construção) e ao vivo (lado do cliente) em documentos Quarto.

Exemplo de dados pré-renderizados:

data(mtcars)
ojs_define(mtcars)

Execução ao vivo no lado do cliente:

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

[Saiba mais sobre a execução híbrida (Execução híbrida) (/learn/interactive/advanced/hybrid-execution.qmd)

Reatividade com variáveis OJS

Integrar a interatividade reativa usando JavaScript observável (OJS).

Definir entrada OJS reativa:

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

Use entrada reativa em R ou Python:

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

Mergulhe fundo na reatividade

Código-fonte

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

Avaliação personalizada para exercícios interativos

Crie e avalie exercícios interativos com lógica personalizada clara e flexível.

Exemplo de exercício (R):

```{webr}
#| exercise: sum-exercise
# Preencha o espaço em branco para que a soma seja igual a 10.
3 + ______
```

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

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

Lógica de avaliação:

Use um bloco de avaliação estruturado para obter feedback automatizado:

```{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 avaliação personalizadas

Código-fonte

3 + 7

Lembre-se: 3 + 7 = 10.

Práticas recomendadas e otimização de desempenho

Práticas recomendadas:

• Separe claramente a lógica de tempo de construção e de tempo de execução.
• Aproveite o OJS reativo para uma interação perfeita com o usuário.
• Use a configuração de ambiente compartilhado para códigos repetitivos.

Otimização de desempenho:

• Minimize o tamanho dos dados para execução no lado do cliente.
• Evite cálculos complexos no código do lado do cliente.
• Computações pesadas pré-renderizadas.

Exemplo de YAML otimizado:

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

Práticas recomendadas para codificação interativa

Leitura adicional

• Execução híbrida
• Reatividade com OJS
• Técnicas de avaliação personalizadas
• Gerenciando ambientes de execução

---

Explore mais artigos

Nota

Aqui estão mais artigos da mesma categoria para ajudá-lo a se aprofundar no tópico.