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

Resumo

O aprendiz lê um texto e escreve um resumo com suas próprias palavras. Avalia compreensão, síntese e capacidade de identificar ideias principais.

Síntese e avaliação síntese escrita resumo summary

Experimente

Leia o trecho abaixo e escreva um resumo de até 80 palavras com suas próprias palavras:

O feedback formativo é uma das práticas mais eficazes do design instrucional. Ao contrário do feedback somativo — dado ao final de uma etapa — o formativo ocorre durante o processo de aprendizagem, permitindo ajustes em tempo real. Estudos mostram que aprendizes que recebem feedback formativo frequente progridem significativamente mais rápido do que os que só recebem nota final.

Critérios

  • Inclua a diferença entre feedback formativo e somativo
  • Mencione o benefício principal do formativo
  • Use suas próprias palavras
0 caracteres máx. 500

Código-fonte

PHP

Dados de exemplo

Texto de referência, critérios e o tamanho máximo do resumo.

1 <?php
2 $instrucao = 'Leia o trecho abaixo e escreva um resumo de até 80 palavras com suas próprias palavras:';
3 $textoReferencia = 'O feedback formativo ocorre durante o processo de aprendizagem, permitindo '
4 . 'ajustes em tempo real — diferente do somativo, dado só ao final da etapa.';
5 $criterios = [
6 'Inclua a diferença entre feedback formativo e somativo',
7 'Use suas próprias palavras',
8 ];
9 $max = 500;
10 ?>

Estrutura do resumo

Texto de referência, critérios, campo de escrita e as duas ações no mesmo card.

1 <div class="questao" data-tipo="redacao-livre"
2 data-texto-referencia="<?= htmlspecialchars($textoReferencia) ?>">
3
4 <p class="questao-instrucao"><?= htmlspecialchars($instrucao) ?></p>
5
6 <blockquote class="questao-referencia"><?= htmlspecialchars($textoReferencia) ?></blockquote>
7
8 <ul class="questao-criterios">
9 <?php foreach ($criterios as $c): ?>
10 <li><?= htmlspecialchars($c) ?></li>
11 <?php endforeach; ?>
12 </ul>
13
14 <textarea class="questao-textarea"
15 placeholder="Escreva seu resumo aqui..."
16 maxlength="<?= $max ?>"></textarea>
17
18 <p class="questao-contador">0 caracteres</p>
19
20 <button type="button" class="questao-enviar">Enviar resumo</button>
21
22 <?php
23 // O painel nasce oculto e é preenchido pelo JavaScript. "Sua resposta"
24 // guarda o que foi escrito; "Texto de referência" repete a fonte, pra
25 // comparar sem rolar a página de volta pro topo.
26 ?>
27 <div class="questao-painel" hidden>
28 <p class="questao-painel-mensagem"></p>
29
30 <p class="questao-painel-rotulo">Sua resposta</p>
31 <p class="questao-painel-tentativa"></p>
32
33 <p class="questao-painel-rotulo">Texto de referência</p>
34 <p class="questao-painel-referencia"></p>
35 </div>
36
37 <button type="button" class="questao-reset" hidden>Tentar novamente</button>
38
39 </div>
CSS

Texto de referência

Trecho a ser resumido, em destaque acima dos critérios.

1 .questao-referencia {
2 margin: 0 0 16px;
3 padding: 14px 16px;
4 border-radius: 10px;
5 background: #f8fafc;
6 color: #475569;
7 font-size: 14px;
8 font-style: italic;
9 line-height: 1.6;
10 }

Critérios

Lista do que o resumo deveria conter, antes do campo de escrita.

1 .questao-criterios {
2 margin: 0 0 16px;
3 padding-left: 20px;
4 font-size: 13px;
5 color: #64748b;
6 }
7
8 .questao-criterios li {
9 margin-bottom: 4px;
10 }

Campo de escrita

Área de texto limitada pelo tamanho máximo do resumo.

1 .questao-textarea {
2 display: block;
3 width: 100%;
4 min-height: 120px;
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 o resumo enviado legível, sem parecer apagado.

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 — sem mínimo, só o máximo importa.

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 o texto de referência 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" do texto de 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-referencia {
12 margin: 0;
13 line-height: 1.6;
14 white-space: pre-wrap;
15 }
JavaScript

Encontrar os elementos do resumo

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 referencia = questao.dataset.textoReferencia || '';

Contar os caracteres

Atualiza o contador a cada tecla — o maxlength do campo já limita o tamanho.

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

Enviar resumo

Trava o campo e mostra o que foi escrito ao lado do texto de referência.

1 enviar.addEventListener('click', function () {
2 // Um resumo não tem gabarito: o painel devolve a tentativa junto do
3 // texto original, e quem compara é quem escreveu.
4 textarea.disabled = true;
5
6 painel.querySelector('.questao-painel-mensagem').textContent =
7 'Resumo enviado! Compare o que você escreveu com o texto de referência.';
8 painel.querySelector('.questao-painel-tentativa').textContent =
9 textarea.value || '(em branco)';
10 painel.querySelector('.questao-painel-referencia').textContent = referencia;
11 painel.hidden = false;
12
13 enviar.hidden = true;
14 reset.hidden = false;
15 });

Reiniciar

Devolve o campo em branco para escrever outro resumo.

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 });