Referencial de Atividades
Todas as atividades
Jogo e Combinação

Caça ao Erro

O aprendiz analisa um texto, código, processo ou imagem e identifica os erros presentes. Desenvolve pensamento crítico e aplicação prática do conhecimento em contexto real.

Análise e avaliação erro análise crítico error

Experimente

Encontre os 3 erros de segurança alimentar neste texto

Encontre os 3 problemas

, é seguro , deve-se , e é possível , .

Clique nos trechos que você acha problemáticos, depois verifique a resposta.

Marcados: 0/3

Código-fonte

PHP

Dados de exemplo

Cada opção tem o trecho, se é um erro de verdade ("correta") e a explicação — as distratoras têm o mesmo formato, só com correta = false.

1 <?php
2 $opcoes = [
3 ['id' => 'o1', 'trecho' => 'sentar na ponta da cadeira, sem encostar as costas', 'correta' => true, 'explicacao' => 'Errado: sem o encosto, a lombar perde o apoio e sobrecarrega ao longo do dia.'],
4 ['id' => 'o2', 'trecho' => 'apoiar os pulsos na mesa o tempo todo enquanto digita', 'correta' => true, 'explicacao' => 'Errado: o pulso deveria flutuar ao digitar; apoiar só faz sentido nas pausas.'],
5 ['id' => 'o3', 'trecho' => 'manter o topo do monitor bem abaixo da linha dos olhos', 'correta' => true, 'explicacao' => 'Errado: o topo da tela deveria ficar na altura dos olhos — bem abaixo força o pescoço pra frente.'],
6 ['id' => 'o4', 'trecho' => 'usar uma cadeira com rodinhas', 'correta' => false, 'explicacao' => 'Não é o erro: rodinhas não têm relação nenhuma com a postura em si.'],
7 ['id' => 'o5', 'trecho' => 'Para manter uma postura confortável', 'correta' => false, 'explicacao' => 'Não é o erro: é só a introdução do texto, sem orientação nenhuma nela.'],
8 ];
9 $conteudo = 'Para manter uma postura confortável ao usar o computador, é recomendado sentar na ponta da cadeira, sem encostar as costas, apoiar os pulsos na mesa o tempo todo enquanto digita, e manter o topo do monitor bem abaixo da linha dos olhos, desde que se use uma cadeira com rodinhas.';
10 $totalErros = count(array_filter($opcoes, fn($o) => $o['correta']));
11 ?>

Estrutura da questão

Cada opção (certa ou distratora) vira um botão clicável com o mesmo visual neutro — a diferença só é revelada na verificação, nunca antes, senão a resposta vaza.

1 <div class="questao" data-tipo="caca-erro" data-total="<?= $totalErros ?>">
2
3 <p class="questao-instrucao">Clique nos trechos que você acha problemáticos, depois verifique a resposta.</p>
4
5 <div class="texto">
6 <?php
7 foreach ($opcoes as $opcao) {
8 $conteudo = str_replace(
9 $opcao['trecho'],
10 '<button type="button" class="trecho" data-correta="' . ($opcao['correta'] ? 'true' : 'false') . '" data-explicacao="' . htmlspecialchars($opcao['explicacao']) . '">' . $opcao['trecho'] . '</button>',
11 $conteudo
12 );
13 }
14 echo $conteudo;
15 ?>
16 </div>

Ações da questão

Verificar, o painel de resultado (recebe um cartão por opção) e o botão de reiniciar — os dois últimos nascem ocultos.

1 <button type="button" class="questao-verificar">Verificar resposta</button>
2
3 <div class="questao-painel" hidden>
4 <p class="questao-painel-mensagem"></p>
5 <div class="questao-painel-cartoes"></div>
6 </div>
7
8 <button type="button" class="questao-reset" hidden>Tentar novamente</button>
9
10 </div>
CSS

Instrução

Frase curta acima do texto, explicando a mecânica antes de qualquer clique.

1 .questao-instrucao {
2 margin: 0 0 12px;
3 font-size: 13px;
4 color: #64748b;
5 }

Texto com trechos clicáveis

O parágrafo em si fica neutro — só os botões dentro dele se destacam.

1 .texto {
2 margin-bottom: 16px;
3 padding: 16px;
4 border: 1px solid #334155;
5 border-radius: 12px;
6 background: rgba(51, 65, 85, 0.3);
7 font-size: 14px;
8 line-height: 1.6;
9 color: #cbd5e1;
10 }

Trecho clicável

Sublinhado tracejado neutro — o mesmo visual pras opções certas e pras distratoras, de propósito. A cor nunca entrega a resposta antes da verificação.

1 .trecho {
2 display: inline;
3 border: none;
4 background: none;
5 padding: 0 2px;
6 font: inherit;
7 color: inherit;
8 text-decoration: underline dashed;
9 text-decoration-color: rgba(245, 158, 11, 0.5);
10 border-radius: 4px;
11 cursor: pointer;
12 }
13 .trecho:hover {
14 background: rgba(245, 158, 11, 0.1);
15 color: #fbbf24;
16 }
17 .trecho[data-marcado="true"] {
18 background: rgba(245, 158, 11, 0.2);
19 color: #fbbf24;
20 }

Estado final de cada trecho

Só aparece depois de verificar — verde pro erro encontrado, âmbar pro que passou despercebido, vermelho pra distratora marcada por engano. Vem depois da regra de marcação no arquivo, então vence o empate de especificidade.

1 .trecho[data-resultado="acerto"] {
2 background: rgba(34, 197, 94, 0.2);
3 color: #86efac;
4 text-decoration: line-through;
5 }
6 .trecho[data-resultado="omissao"] {
7 background: rgba(245, 158, 11, 0.1);
8 color: #fbbf24;
9 }
10 .trecho[data-resultado="indevido"] {
11 background: rgba(239, 68, 68, 0.2);
12 color: #fca5a5;
13 text-decoration: line-through;
14 }

Ações

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

1 .questao-verificar,
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 .questao-verificar {
13 background: #4f46e5;
14 color: #fff;
15 }
16 .questao-reset {
17 background: #e5e7eb;
18 color: #1f2937;
19 }

Estado oculto

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

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

Painel de resultado

Caixa de destaque com a mensagem geral, hospedando os cartões de cada opção logo abaixo.

1 .questao-painel {
2 margin: 16px 0;
3 padding: 16px;
4 border-radius: 12px;
5 background: #1e3a8a;
6 color: #dbeafe;
7 }
8 .questao-painel-mensagem {
9 margin: 0 0 12px;
10 font-weight: 600;
11 }

Cartão por opção

Cada opção avaliada ganha sua própria caixa dentro do painel, com uma listra colorida na lateral indicando o resultado — não uma lista de texto corrido.

1 .questao-painel-cartoes {
2 display: flex;
3 flex-direction: column;
4 gap: 8px;
5 }
6 .cartao-opcao {
7 padding: 12px;
8 border-radius: 8px;
9 background: rgba(0, 0, 0, 0.15);
10 border-left: 4px solid;
11 }
12 .cartao-opcao[data-resultado="acerto"] { border-left-color: #4ade80; }
13 .cartao-opcao[data-resultado="omissao"] { border-left-color: #fbbf24; }
14 .cartao-opcao[data-resultado="indevido"] { border-left-color: #f87171; }
15 .cartao-opcao-titulo {
16 margin: 0;
17 font-weight: 600;
18 }
19 .cartao-opcao-explicacao {
20 margin: 4px 0 0;
21 font-size: 12px;
22 opacity: 0.9;
23 }
JavaScript

Encontrar os elementos da questão

Localiza os trechos clicáveis, o painel de resultado e as ações.

1 document.addEventListener('DOMContentLoaded', function () {
2 document.querySelectorAll('.questao[data-tipo="caca-erro"]').forEach(function (questao) {
3 var total = parseInt(questao.dataset.total, 10) || 0;
4 var trechos = questao.querySelectorAll('.trecho');
5 var verificar = questao.querySelector('.questao-verificar');
6 var painel = questao.querySelector('.questao-painel');
7 var mensagem = painel.querySelector('.questao-painel-mensagem');
8 var cartoes = painel.querySelector('.questao-painel-cartoes');
9 var reset = questao.querySelector('.questao-reset');

Marcar e desmarcar

Clique só alterna a seleção — a correção real só acontece ao verificar, então marcar não revela nada ainda.

1 trechos.forEach(function (btn) {
2 btn.addEventListener('click', function () {
3 if (btn.disabled) return;
4 btn.dataset.marcado = btn.dataset.marcado === 'true' ? 'false' : 'true';
5 });
6 });

Criar o cartão de uma opção

Uma caixa própria por opção avaliada, com a listra lateral indicando o resultado.

1 function criarCartao(btn, rotulo, resultado) {
2 var cartao = document.createElement('div');
3 cartao.className = 'cartao-opcao';
4 cartao.dataset.resultado = resultado;
5
6 var titulo = document.createElement('p');
7 titulo.className = 'cartao-opcao-titulo';
8 titulo.textContent = rotulo + ': ' + btn.textContent.trim();
9
10 var explicacao = document.createElement('p');
11 explicacao.className = 'cartao-opcao-explicacao';
12 explicacao.textContent = btn.dataset.explicacao;
13
14 cartao.appendChild(titulo);
15 cartao.appendChild(explicacao);
16 return cartao;
17 }

Verificar

Cada opção vira um cartão dentro do painel — erro encontrado, erro não identificado ou distratora marcada por engano. Distratora ignorada corretamente não gera cartão.

1 verificar.addEventListener('click', function () {
2 var acertos = 0, indevidos = 0;
3 cartoes.innerHTML = '';
4
5 trechos.forEach(function (btn) {
6 btn.disabled = true;
7 var correta = btn.dataset.correta === 'true';
8 var marcado = btn.dataset.marcado === 'true';
9
10 if (correta && marcado) {
11 acertos++;
12 btn.dataset.resultado = 'acerto';
13 cartoes.appendChild(criarCartao(btn, 'Encontrado', 'acerto'));
14 } else if (correta && !marcado) {
15 btn.dataset.resultado = 'omissao';
16 cartoes.appendChild(criarCartao(btn, 'Não identificado', 'omissao'));
17 } else if (!correta && marcado) {
18 indevidos++;
19 btn.dataset.resultado = 'indevido';
20 cartoes.appendChild(criarCartao(btn, 'Marcado por engano', 'indevido'));
21 }
22 // !correta && !marcado: distratora corretamente ignorada, sem cartão.
23 });
24
25 var certo = acertos === total && indevidos === 0;
26 mensagem.textContent = certo
27 ? 'Todos os problemas identificados!'
28 : acertos + '/' + total + ' encontrados' + (indevidos ? ', ' + indevidos + ' marcação(ões) indevida(s).' : '.');
29 painel.hidden = false;
30
31 verificar.hidden = true;
32 reset.hidden = false;
33 });

Reiniciar

Limpa marcações, resultados e o painel; destrava os trechos.

1 reset.addEventListener('click', function () {
2 trechos.forEach(function (btn) {
3 btn.disabled = false;
4 delete btn.dataset.marcado;
5 delete btn.dataset.resultado;
6 });
7 cartoes.innerHTML = '';
8 painel.hidden = true;
9 verificar.hidden = false;
10 reset.hidden = true;
11 });