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

Marcar Palavras

O aprendiz lê um trecho e clica nas palavras que atendem a um critério específico. Desenvolve leitura analítica e identificação de padrões textuais.

Análise análise leitura marcação analysis

Experimente

Clique em todos os verbos da Taxonomia de Bloom presentes no texto abaixo:

Clique nas palavras para marcá-las.

Código-fonte

PHP

Dados de exemplo

Define o texto como uma lista de palavras, cada uma com sua correção.

1 <?php
2 $instrucao = 'Marque os substantivos da frase abaixo.';
3
4 $palavras = [
5 ['texto' => 'O', 'correta' => false],
6 ['texto' => 'gato', 'correta' => true],
7 ['texto' => 'dorme', 'correta' => false],
8 ['texto' => 'no', 'correta' => false],
9 ['texto' => 'sofá', 'correta' => true],
10 ['texto' => 'macio.', 'correta' => false],
11 ];
12 ?>

Texto clicável

Cada palavra é um botão; ficam coladas para não sobrar espaço extra na frase.

1 <div class="questao" data-tipo="marcar-palavras">
2
3 <p class="questao-instrucao"><?= htmlspecialchars($instrucao) ?></p>
4
5 <p class="questao-texto">
6 <?php foreach ($palavras as $i => $palavra): ?><button type="button"
7 class="questao-palavra"
8 data-correta="<?= $palavra['correta'] ? 'true' : 'false' ?>"
9 data-marcada="false"><?= htmlspecialchars($palavra['texto']) ?></button><?php if ($i < count($palavras) - 1): ?> <?php endif; ?>
10 <?php endforeach; ?>
11 </p>

Área de ação

Reúne verificar, resultado e reiniciar numa caixa própria.

1 <div class="questao-acoes">
2 <button type="button" class="questao-verificar">Verificar</button>
3
4 <div class="questao-feedback" hidden></div>
5
6 <button type="button" class="questao-reset" hidden>Tentar novamente</button>
7 </div>
8
9 </div>
CSS

Palavra clicável

Botão discreto que se destaca só ao passar o mouse ou ser marcado.

1 .questao-texto {
2 line-height: 2.2;
3 margin-bottom: 20px;
4 }
5
6 .questao-palavra {
7 display: inline;
8 padding: 2px 4px;
9 border: none;
10 border-radius: 4px;
11 background: transparent;
12 color: #334155;
13 font: inherit;
14 cursor: pointer;
15 }
16
17 .questao-palavra:not(:disabled):hover {
18 background: #e2e8f0;
19 }

Palavra marcada

Indigo neutro antes de verificar — não antecipa se está certa.

1 .questao-palavra.marcada {
2 background: rgba(99, 102, 241, 0.15);
3 box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.4);
4 }

Resultado de cada palavra

Três estados, não dois — quem foi esquecida também precisa aparecer.

1 .questao-palavra.acerto {
2 background: rgba(34, 197, 94, 0.18);
3 color: #15803d;
4 box-shadow: inset 0 0 0 1px #16a34a;
5 }
6
7 .questao-palavra.erro {
8 background: rgba(239, 68, 68, 0.18);
9 color: #b91c1c;
10 box-shadow: inset 0 0 0 1px #dc2626;
11 }
12
13 .questao-palavra.omissao {
14 background: rgba(245, 158, 11, 0.12);
15 color: #b45309;
16 box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.4);
17 }
18
19 .questao-palavra:disabled {
20 cursor: default;
21 }

Área de ação

Separa os controles do texto.

1 .questao-acoes {
2 display: flex;
3 flex-direction: column;
4 gap: 12px;
5 padding: 16px;
6 border: 1px solid #cbd5e1;
7 border-radius: 12px;
8 }
9
10 .questao-verificar,
11 .questao-reset {
12 width: 100%;
13 padding: 12px 16px;
14 border: none;
15 border-radius: 10px;
16 font: inherit;
17 font-weight: 600;
18 cursor: pointer;
19 }
20
21 .questao-verificar { background: #4f46e5; color: #fff; }
22 .questao-reset { background: #e5e7eb; color: #1f2937; }
23
24 .questao-feedback {
25 padding: 12px 16px;
26 border-radius: 10px;
27 line-height: 1.6;
28 }
29
30 .questao-feedback.acerto { background: #dcfce7; color: #14532d; }
31 .questao-feedback.parcial { background: #fef3c7; color: #78350f; }
JavaScript

Encontrar os elementos da questão

Localiza as palavras, os botões e a caixa de resultado.

1 document.addEventListener('DOMContentLoaded', function () {
2 document.querySelectorAll('.questao[data-tipo="marcar-palavras"]').forEach(function (questao) {
3 var palavras = questao.querySelectorAll('.questao-palavra');
4 var verificar = questao.querySelector('.questao-verificar');
5 var feedback = questao.querySelector('.questao-feedback');
6 var reset = questao.querySelector('.questao-reset');

Marcar ou desmarcar

Clique alterna livremente, quantas vezes quiser, antes de verificar.

1 palavras.forEach(function (palavra) {
2 palavra.addEventListener('click', function () {
3 var marcada = palavra.dataset.marcada === 'true';
4 palavra.dataset.marcada = marcada ? 'false' : 'true';
5 palavra.classList.toggle('marcada', !marcada);
6 });
7 });

Verificar as marcações

Separa acerto, erro e omissão — três resultados, não dois.

1 verificar.addEventListener('click', function () {
2 var acertos = 0, erros = 0, omissoes = 0;
3
4 palavras.forEach(function (p) {
5 var correta = p.dataset.correta === 'true';
6 var marcada = p.dataset.marcada === 'true';
7 p.disabled = true;
8 p.classList.remove('marcada');
9
10 if (correta && marcada) { acertos++; p.classList.add('acerto'); }
11 if (!correta && marcada) { erros++; p.classList.add('erro'); }
12 if (correta && !marcada) { omissoes++; p.classList.add('omissao'); }
13 });
14
15 var totalCorretas = Array.prototype.filter.call(palavras, function (p) {
16 return p.dataset.correta === 'true';
17 }).length;
18 var tudoCerto = acertos === totalCorretas && erros === 0;
19
20 feedback.className = 'questao-feedback ' + (tudoCerto ? 'acerto' : 'parcial');
21 feedback.textContent = tudoCerto
22 ? 'Correto! Todas as palavras certas foram marcadas.'
23 : acertos + ' certas, ' + erros + ' erradas, ' + omissoes + ' esquecidas.';
24 feedback.hidden = false;
25
26 verificar.hidden = true;
27 reset.hidden = false;
28 });

Reiniciar

Destrava as palavras e apaga marcação e resultado.

1 reset.addEventListener('click', function () {
2 palavras.forEach(function (p) {
3 p.disabled = false;
4 p.dataset.marcada = 'false';
5 p.classList.remove('marcada', 'acerto', 'erro', 'omissao');
6 });
7
8 feedback.hidden = true;
9 reset.hidden = true;
10 verificar.hidden = false;
11 });