Referencial de Atividades
Todas as atividades
Quiz e Avaliação

Redação Livre

Campo aberto para o aprendiz redigir uma resposta dissertativa. Estimula síntese, argumentação e expressão escrita sem restrição de formato.

Síntese e avaliação redação dissertativo síntese essay

Experimente

Descreva uma situação de aprendizagem online em que a Redação Livre seria mais adequada do que uma questão de múltipla escolha. Justifique sua escolha com base nos objetivos de aprendizagem.

0 caracteres

Código-fonte

PHP

Dados de exemplo

Define a pergunta aberta e a resposta modelo usada na comparação.

1 <?php
2 $pergunta = 'Descreva uma situação em que uma pergunta aberta ensina mais que uma de múltipla escolha.';
3 $placeholder = 'Pense em um objetivo que exija síntese, argumentação ou análise crítica...';
4 $respostaModelo = 'Uma pergunta aberta é mais adequada quando o objetivo pede que a pessoa '
5 . 'construa a resposta, e não que a reconheça entre alternativas. O que interessa avaliar '
6 . 'é o encadeamento do raciocínio e a justificativa das escolhas — algo que uma alternativa '
7 . 'marcada não revela.';
8 ?>

Estrutura da redação

Junta o campo de texto, o painel de resposta e as duas ações no mesmo card.

1 <div class="questao" data-tipo="redacao-livre"
2 data-resposta-modelo="<?= htmlspecialchars($respostaModelo) ?>">
3
4 <p class="questao-pergunta"><?= htmlspecialchars($pergunta) ?></p>
5
6 <textarea class="questao-textarea"
7 placeholder="<?= htmlspecialchars($placeholder) ?>"></textarea>
8
9 <p class="questao-contador">0 caracteres</p>
10
11 <button type="button" class="questao-enviar">Enviar e comparar</button>
12
13 <?php
14 // O painel nasce oculto e é preenchido pelo JavaScript. "Sua resposta"
15 // guarda o que foi escrito; "Resposta modelo" é referência, não gabarito.
16 ?>
17 <div class="questao-painel" hidden>
18 <p class="questao-painel-mensagem"></p>
19
20 <p class="questao-painel-rotulo">Sua resposta</p>
21 <p class="questao-painel-tentativa"></p>
22
23 <p class="questao-painel-rotulo">Resposta modelo</p>
24 <p class="questao-painel-modelo"></p>
25 </div>
26
27 <button type="button" class="questao-reset" hidden>Tentar novamente</button>
28
29 </div>
CSS

Campo de escrita

Área de texto que cresce com a resposta.

1 .questao-textarea {
2 display: block;
3 width: 100%;
4 min-height: 140px;
5 padding: 12px 16px;
6 border: 1px solid #d1d5db;
7 border-radius: 12px;
8 font: inherit;
9 line-height: 1.6;
10 resize: vertical;
11 }
12
13 .questao-textarea:focus {
14 outline: none;
15 border-color: #6366f1;
16 }

Campo bloqueado

Mantém a resposta enviada legível, sem parecer apagada.

1 .questao-textarea:disabled {
2 background: #f9fafb;
3 color: #1f2937;
4 opacity: 1;
5 -webkit-text-fill-color: #1f2937;
6 }

Contador de caracteres

Informação discreta acima das ações.

1 .questao-contador {
2 margin: 8px 0 16px;
3 font-size: 12px;
4 color: #4b5563;
5 }

Ações

Botões de largura total, um de cada vez na tela.

1 .questao-enviar,
2 .questao-reset {
3 display: block;
4 width: 100%;
5 padding: 12px 16px;
6 border: none;
7 border-radius: 10px;
8 font: inherit;
9 font-weight: 600;
10 cursor: pointer;
11 }
12
13 .questao-enviar {
14 background: #4f46e5;
15 color: #fff;
16 }
17
18 .questao-reset {
19 background: #e5e7eb;
20 color: #1f2937;
21 }

Estado oculto

O atributo hidden nativo tem a mesma especificidade da regra de exibição acima — sem isto, "Tentar novamente" apareceria antes do envio.

1 .questao-enviar[hidden],
2 .questao-reset[hidden] {
3 display: none;
4 }

Painel de resposta

Caixa verde com a tentativa e a resposta modelo lado a lado.

1 .questao-painel {
2 margin: 16px 0;
3 padding: 16px;
4 border-radius: 12px;
5 background: #14532d;
6 color: #dcfce7;
7 }
8
9 .questao-painel-mensagem {
10 margin: 0 0 12px;
11 padding-bottom: 12px;
12 border-bottom: 1px solid #166534;
13 font-weight: 600;
14 }

Rótulos das regiões

Separa "Sua resposta" da referência sem competir com o conteúdo.

1 .questao-painel-rotulo {
2 margin: 12px 0 4px;
3 font-size: 11px;
4 font-weight: 700;
5 letter-spacing: 0.05em;
6 text-transform: uppercase;
7 color: #86efac;
8 }
9
10 .questao-painel-tentativa,
11 .questao-painel-modelo {
12 margin: 0;
13 line-height: 1.6;
14 white-space: pre-wrap;
15 }
JavaScript

Encontrar os elementos da questão

Localiza campo, botões e painel de resposta no DOM.

1 document.addEventListener('DOMContentLoaded', function () {
2 document.querySelectorAll('.questao[data-tipo="redacao-livre"]').forEach(function (questao) {
3 var textarea = questao.querySelector('.questao-textarea');
4 var enviar = questao.querySelector('.questao-enviar');
5 var contador = questao.querySelector('.questao-contador');
6 var painel = questao.querySelector('.questao-painel');
7 var reset = questao.querySelector('.questao-reset');
8 var modelo = questao.dataset.respostaModelo || '';

Contar os caracteres

Atualiza o contador a cada tecla, sem exigir um mínimo.

1 textarea.addEventListener('input', function () {
2 contador.textContent = textarea.value.length + ' caracteres';
3 });

Enviar e comparar

Trava a resposta e mostra o que foi escrito ao lado da referência.

1 enviar.addEventListener('click', function () {
2 // Numa pergunta aberta não há o que corrigir: o painel devolve a
3 // tentativa junto de um modelo, e quem compara é quem escreveu.
4 textarea.disabled = true;
5
6 painel.querySelector('.questao-painel-mensagem').textContent =
7 'Resposta enviada! Compare o que você escreveu com a resposta modelo.';
8 painel.querySelector('.questao-painel-tentativa').textContent =
9 textarea.value || '(em branco)';
10 painel.querySelector('.questao-painel-modelo').textContent = modelo;
11 painel.hidden = false;
12
13 enviar.hidden = true;
14 reset.hidden = false;
15 });

Reiniciar

Devolve o campo em branco para escrever outra resposta.

1 reset.addEventListener('click', function () {
2 textarea.value = '';
3 textarea.disabled = false;
4 contador.textContent = '0 caracteres';
5
6 painel.hidden = true;
7 reset.hidden = true;
8 enviar.hidden = false;
9
10 textarea.focus();
11 });