Quiz e Avaliação

Ditado

O aprendiz ouve um áudio e transcreve o conteúdo. Avalia escuta ativa, ortografia, vocabulário e precisão na compreensão oral.

Conhecimento e compreensão áudio escuta transcrição ditado

Experimente

No H5P, o aprendiz ouve o áudio e digita o que escutou. Neste exemplo, leia o texto abaixo, cubra-o e tente reproduzi-lo de memória:

0 caracteres

PHP

Estrutura do ditado

Reúne áudio, transcrição, avaliação e reinício no mesmo card.

1	`<?php`
2	`// Exemplo didático: interação, feedback e reinício ficam no mesmo card.`
3	`$lang = $_SESSION['lang'] ?? 'pt';`
4	`?>`
5	`<div class="questao" data-id="dictation" data-tipo="redacao-livre">`
6	`<button class="ditado-ouvir" data-texto="<?= sanitizar(t($q->texto_original)) ?>">`
7	`<?= $lang === 'pt' ? 'Ouvir' : 'Listen' ?>`
8	`</button>`
9
10	`<textarea class="questao-textarea"></textarea>`
11
12	`<?php $botao_verificar_classe = 'questao-submit';`
13	`include VIEWS_PATH . 'components/ui/botao-verificar.php'; ?>`
14
15	`<?php include VIEWS_PATH . 'components/ui/area-feedback.php'; ?>`
16	`<?php include VIEWS_PATH . 'components/ui/botao-reiniciar.php'; ?>`
17	`</div>`

CSS

Estados do feedback

Diferencia visualmente acerto e erro depois da avaliação.

1	`/* O estado é declarado por data-estado; a apresentação permanece no CSS. */`
2	`.questao-feedback {`
3	`overflow-wrap: anywhere;`
4	`}`
5
6	`.questao-feedback[data-estado="correta"] {`
7	`background: #14532d;`
8	`color: #f0fdf4;`
9	`}`
10
11	`.questao-feedback[data-estado="errada"] {`
12	`background: #7f1d1d;`
13	`color: #fef2f2;`
14	`}`

JavaScript

Avaliar e reiniciar

Compara a transcrição, mostra o gabarito e permite uma nova tentativa.

1	`document.addEventListener('DOMContentLoaded', function () {`
2	`var questao = document.querySelector('[data-id="dictation"]');`
3	`var campo = questao.querySelector('.questao-textarea');`
4	`var verificar = questao.querySelector('.questao-submit');`
5	`var feedback = questao.querySelector('.questao-feedback');`
6	`var reiniciar = questao.querySelector('.questao-reset');`
7	`var resposta = questao.querySelector('.ditado-ouvir').dataset.texto;`
8
9	`verificar.addEventListener('click', function () {`
10	`var acertou = campo.value.trim() === resposta.trim();`
11	`Feedback[acertou ? 'correto' : 'errado'](`
12	`feedback,`
13	`acertou ? 'Transcrição correta!' : 'Compare as respostas abaixo.'`
14	`);`
15	`Feedback.definirTentativa(feedback, campo.value \|\| '(em branco)');`
16	`Feedback.definirResposta(feedback, resposta);`
17	`campo.disabled = true;`
18	`verificar.hidden = true;`
19	`reiniciar.hidden = false;`
20	`});`
21
22	`reiniciar.addEventListener('click', function () {`
23	`campo.value = '';`
24	`campo.disabled = false;`
25	`Feedback.oculto(feedback);`
26	`verificar.hidden = false;`
27	`reiniciar.hidden = true;`
28	`});`
29	`});`