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

Verdadeiro ou Falso

Apresenta uma afirmação que o aprendiz deve classificar como verdadeira ou falsa, com feedback imediato e justificativa opcional.

Conhecimento e compreensão avaliação formativo quiz assessment

Experimente

A atividade de Verdadeiro ou Falso é mais eficaz quando as afirmações são elaboradas a partir de equívocos comuns dos aprendizes, não apenas de fatos corretos do conteúdo.

Código-fonte

PHP

Dados de exemplo

Define a afirmação, se ela é verdadeira, e uma explicação opcional.

1 <?php
2 $afirmacao = 'O Sol é um planeta do Sistema Solar.';
3 $correta = false;
4 $explicacao = 'O Sol é uma estrela — o centro do Sistema Solar em torno do qual os planetas orbitam.';
5 ?>

Estrutura da afirmação e dos dois botões

Monta o HTML com os botões Verdadeiro e Falso lado a lado.

1 <div class="questao" data-tipo="verdadeiro-falso">
2
3 <p class="questao-afirmacao"><?= htmlspecialchars($afirmacao) ?></p>
4
5 <div class="questao-opcoes">
6 <button type="button" class="questao-opcao" data-correta="<?= $correta ? 'true' : 'false' ?>" data-selecionada="false">
7 Verdadeiro
8 </button>
9 <button type="button" class="questao-opcao" data-correta="<?= !$correta ? 'true' : 'false' ?>" data-selecionada="false">
10 Falso
11 </button>
12 </div>
13
14 <button type="button" class="questao-verificar">Verificar resposta</button>
15
16 <div class="questao-feedback" hidden></div>
17
18 <?php if ($explicacao): ?>
19 <div class="questao-explicacao" hidden><?= htmlspecialchars($explicacao) ?></div>
20 <?php endif; ?>
21
22 <button type="button" class="questao-reset" hidden>Tentar novamente</button>
23
24 </div>
CSS

Botões Verdadeiro/Falso

Estilo base dos dois botões lado a lado.

1 .questao-opcoes {
2 display: flex;
3 gap: 12px;
4 margin-bottom: 16px;
5 }
6
7 .questao-opcao {
8 flex: 1;
9 padding: 14px;
10 border: 2px solid #d1d5db;
11 border-radius: 8px;
12 background: #fff;
13 font-weight: 600;
14 cursor: pointer;
15 transition: border-color 0.2s, background-color 0.2s;
16 }
17
18 .questao-opcao:hover {
19 border-color: #6366f1;
20 }

Opção selecionada

Destaca a alternativa escolhida com cor neutra — verde/vermelho aqui entregaria a resposta antes da hora.

1 .questao-opcao.selecionada {
2 border-color: #6366f1;
3 background: #eef2ff;
4 }

Resultado da verificação

Colore a alternativa correta de verde e a errada escolhida de vermelho.

1 .questao-opcao.acerto {
2 border-color: #22c55e;
3 background: #f0fdf4;
4 }
5
6 .questao-opcao.erro {
7 border-color: #ef4444;
8 background: #fef2f2;
9 }

Mensagem de feedback e explicação

Estiliza a caixa de resultado e o bloco de explicação exibido após verificar.

1 .questao-feedback {
2 padding: 12px 16px;
3 border-radius: 8px;
4 font-size: 14px;
5 margin-bottom: 8px;
6 }
7
8 .questao-feedback.correto {
9 background: #f0fdf4;
10 color: #15803d;
11 }
12
13 .questao-feedback.errado {
14 background: #fef2f2;
15 color: #b91c1c;
16 }
17
18 .questao-feedback.aviso {
19 background: #fffbeb;
20 color: #b45309;
21 }
22
23 .questao-explicacao {
24 padding: 12px 16px;
25 border-radius: 8px;
26 background: #f3f4f6;
27 color: #4b5563;
28 font-size: 14px;
29 margin-bottom: 8px;
30 }
JavaScript

Encontrar os elementos da questão

Localiza os elementos da questão no DOM.

1 document.addEventListener('DOMContentLoaded', function () {
2 document.querySelectorAll('.questao[data-tipo="verdadeiro-falso"]').forEach(function (questao) {
3 var opcoes = questao.querySelectorAll('.questao-opcao');
4 var verificar = questao.querySelector('.questao-verificar');
5 var feedback = questao.querySelector('.questao-feedback');
6 var explicacao = questao.querySelector('.questao-explicacao');
7 var reset = questao.querySelector('.questao-reset');
8 var respondida = false;

Selecionar Verdadeiro ou Falso

Marca a opção clicada e desmarca a outra (seleção exclusiva).

1 function selecionar(alvo) {
2 opcoes.forEach(function (opcao) {
3 var marcada = opcao === alvo;
4 opcao.dataset.selecionada = marcada ? 'true' : 'false';
5 opcao.classList.toggle('selecionada', marcada);
6 });
7 feedback.hidden = true;
8 }
9
10 opcoes.forEach(function (opcao) {
11 opcao.addEventListener('click', function () {
12 if (respondida) return;
13 selecionar(opcao);
14 });
15 });

Verificar a resposta

Trava a escolha selecionada, mostra o resultado e revela a explicação.

1 verificar.addEventListener('click', function () {
2 if (respondida) return;
3
4 var escolhida = Array.prototype.filter.call(opcoes, function (opcao) {
5 return opcao.dataset.selecionada === 'true';
6 })[0];
7
8 if (!escolhida) {
9 feedback.textContent = 'Escolha Verdadeiro ou Falso antes de verificar.';
10 feedback.className = 'questao-feedback aviso';
11 feedback.hidden = false;
12 return;
13 }
14
15 respondida = true;
16 var correta = escolhida.dataset.correta === 'true';
17
18 opcoes.forEach(function (opcao) {
19 opcao.disabled = true;
20 opcao.classList.remove('selecionada');
21 if (opcao.dataset.correta === 'true') {
22 opcao.classList.add('acerto');
23 }
24 });
25 if (!correta) escolhida.classList.add('erro');
26
27 feedback.textContent = correta ? 'Correto! Muito bem.' : 'Não foi dessa vez. Veja a resposta correta destacada acima.';
28 feedback.className = 'questao-feedback ' + (correta ? 'correto' : 'errado');
29 feedback.hidden = false;
30
31 if (explicacao) explicacao.hidden = false;
32
33 verificar.hidden = true;
34 reset.hidden = false;
35 });

Reiniciar

Restaura o estado inicial da questão para uma nova tentativa.

1 reset.addEventListener('click', function () {
2 respondida = false;
3
4 opcoes.forEach(function (opcao) {
5 opcao.disabled = false;
6 opcao.dataset.selecionada = 'false';
7 opcao.classList.remove('selecionada', 'acerto', 'erro');
8 });
9
10 feedback.hidden = true;
11 if (explicacao) explicacao.hidden = true;
12 reset.hidden = true;
13 verificar.hidden = false;
14 });