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

Encontrar na Tabela

O aprendiz localiza a célula certa numa tabela de dupla entrada, cruzando uma linha com uma coluna. Avalia leitura de matriz e raciocínio em duas dimensões.

Conhecimento e compreensão tabela matriz dupla entrada quadrante

Experimente

Clique na célula da tabela que representa a interseção entre 'Alta Complexidade' e 'Baixo Suporte':

Baixo Suporte Alto Suporte
Alta Complexidade
Baixa Complexidade

Código-fonte

PHP

Dados de exemplo

Define a grade — colunas, linhas e qual célula é a certa.

1 <?php
2 $pergunta = 'Clique na célula que cruza \'Alta Complexidade\' com \'Baixo Suporte\'.';
3
4 $colunas = ['', 'Baixo Suporte', 'Alto Suporte'];
5
6 $linhas = [
7 [
8 'rotulo' => 'Alta Complexidade',
9 'celulas' => [
10 ['texto' => 'Risco de abandono', 'correta' => true],
11 ['texto' => 'Zona de crescimento', 'correta' => false],
12 ],
13 ],
14 [
15 'rotulo' => 'Baixa Complexidade',
16 'celulas' => [
17 ['texto' => 'Tédio', 'correta' => false],
18 ['texto' => 'Conforto', 'correta' => false],
19 ],
20 ],
21 ];
22 ?>

Grade como tabela

Usa <table> de verdade — cabeçalho e rótulo dão sentido à célula para leitor de tela.

1 <div class="questao" data-tipo="tabela-dupla-entrada">
2
3 <p class="questao-pergunta"><?= htmlspecialchars($pergunta) ?></p>
4
5 <table class="questao-tabela">
6 <thead>
7 <tr>
8 <?php foreach ($colunas as $col): ?>
9 <th><?= htmlspecialchars($col) ?></th>
10 <?php endforeach; ?>
11 </tr>
12 </thead>
13 <tbody>
14 <?php foreach ($linhas as $linha): ?>
15 <tr>
16 <td class="questao-rotulo"><?= htmlspecialchars($linha['rotulo']) ?></td>
17 <?php foreach ($linha['celulas'] as $celula): ?>
18 <td>
19 <button type="button"
20 class="questao-celula"
21 data-correta="<?= $celula['correta'] ? 'true' : 'false' ?>"
22 data-selecionada="false">
23 <?= htmlspecialchars($celula['texto']) ?>
24 </button>
25 </td>
26 <?php endforeach; ?>
27 </tr>
28 <?php endforeach; ?>
29 </tbody>
30 </table>

Á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 resposta</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

Tabela

Cabeçalho e rótulos de linha se destacam das células clicáveis.

1 .questao-tabela {
2 width: 100%;
3 border-collapse: collapse;
4 margin-bottom: 20px;
5 }
6
7 .questao-tabela th,
8 .questao-tabela td {
9 border: 1px solid #cbd5e1;
10 padding: 0;
11 }
12
13 .questao-tabela th,
14 .questao-rotulo {
15 padding: 12px;
16 font-size: 12px;
17 font-weight: 600;
18 color: #64748b;
19 background: #f1f5f9;
20 text-align: left;
21 white-space: nowrap;
22 }

Célula clicável

Botão que ocupa a célula inteira, para a área de clique não se limitar ao texto.

1 .questao-celula {
2 width: 100%;
3 height: 100%;
4 padding: 16px;
5 border: none;
6 background: transparent;
7 color: #475569;
8 font: inherit;
9 cursor: pointer;
10 text-align: center;
11 }
12
13 .questao-celula:not(:disabled):hover {
14 background: rgba(99, 102, 241, 0.1);
15 }

Escolha e resultado

Um estado antes de verificar, três estados depois.

1 .questao-celula[data-selecionada="true"] {
2 background: rgba(99, 102, 241, 0.15);
3 color: #4338ca;
4 font-weight: 600;
5 box-shadow: inset 0 0 0 2px #6366f1;
6 }
7
8 .questao-celula[data-estado="correta"] {
9 background: rgba(34, 197, 94, 0.18);
10 color: #15803d;
11 font-weight: 600;
12 box-shadow: inset 0 0 0 2px #16a34a;
13 }
14
15 .questao-celula[data-estado="errada"] {
16 background: rgba(239, 68, 68, 0.18);
17 color: #b91c1c;
18 font-weight: 600;
19 box-shadow: inset 0 0 0 2px #dc2626;
20 }

Célula certa revelada

Verde mais discreto que o acerto, para não competir com o erro na tela.

1 .questao-celula[data-estado="revelada"] {
2 background: rgba(34, 197, 94, 0.1);
3 color: #15803d;
4 font-weight: 600;
5 box-shadow: inset 0 0 0 1px #16a34a;
6 }
7
8 .questao-celula:disabled {
9 cursor: default;
10 }

Área de ação

Separa os controles da tabela.

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; }
32 .questao-feedback.erro { background: #fee2e2; color: #7f1d1d; }
JavaScript

Encontrar os elementos da questão

Localiza as células, os botões e a caixa de resultado.

1 document.addEventListener('DOMContentLoaded', function () {
2 document.querySelectorAll('.questao[data-tipo="tabela-dupla-entrada"]').forEach(function (questao) {
3 var celulas = questao.querySelectorAll('.questao-celula');
4 var verificar = questao.querySelector('.questao-verificar');
5 var feedback = questao.querySelector('.questao-feedback');
6 var reset = questao.querySelector('.questao-reset');
7
8 function selecionada() {
9 return Array.prototype.filter.call(celulas, function (c) {
10 return c.dataset.selecionada === 'true';
11 })[0] || null;
12 }

Escolher uma célula

Seleção exclusiva tipo rádio — marcar uma desmarca a anterior.

1 celulas.forEach(function (celula) {
2 celula.addEventListener('click', function () {
3 celulas.forEach(function (c) { c.dataset.selecionada = 'false'; });
4 celula.dataset.selecionada = 'true';
5 // Escolher de novo depois do aviso de "escolha antes de verificar"
6 // limpa o aviso: ele deixou de valer no momento da escolha.
7 if (feedback.classList.contains('parcial')) {
8 feedback.hidden = true;
9 }
10 });
11 });

Verificar a resposta

Trava a grade, marca acerto ou erro e revela a célula certa.

1 verificar.addEventListener('click', function () {
2 var escolha = selecionada();
3
4 if (!escolha) {
5 feedback.className = 'questao-feedback parcial';
6 feedback.textContent = 'Escolha uma célula antes de verificar.';
7 feedback.hidden = false;
8 return;
9 }
10
11 var correta = escolha.dataset.correta === 'true';
12 var certa = Array.prototype.filter.call(celulas, function (c) {
13 return c.dataset.correta === 'true';
14 })[0];
15
16 celulas.forEach(function (c) { c.disabled = true; });
17 escolha.dataset.estado = correta ? 'correta' : 'errada';
18 // A célula certa só é revelada quando a escolha foi outra; no acerto
19 // ela já é a própria escolha.
20 if (!correta && certa) certa.dataset.estado = 'revelada';
21
22 feedback.className = 'questao-feedback ' + (correta ? 'acerto' : 'erro');
23 feedback.textContent = correta
24 ? 'Correto! Você encontrou o cruzamento certo.'
25 : 'Não foi desta vez. A célula correta está destacada em verde.';
26 feedback.hidden = false;
27
28 verificar.hidden = true;
29 reset.hidden = false;
30 });

Reiniciar

Destrava a grade e apaga escolha e correção.

1 reset.addEventListener('click', function () {
2 celulas.forEach(function (c) {
3 c.disabled = false;
4 c.dataset.selecionada = 'false';
5 delete c.dataset.estado;
6 });
7
8 feedback.hidden = true;
9 reset.hidden = true;
10 verificar.hidden = false;
11 });