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

Múltipla Escolha

Apresenta uma pergunta com múltiplas opções de resposta, sendo uma ou mais corretas. O aprendiz recebe feedback imediato após a tentativa.

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

Experimente

Qual das alternativas descreve corretamente o papel dos distratores em uma questão de múltipla escolha?

Código-fonte

PHP

Dados de exemplo

Define a pergunta e as alternativas de exemplo.

1 <?php
2 $pergunta = 'Quais destas opções são frutas?';
3 $opcoes = [
4 ['texto' => 'Maçã', 'correta' => true],
5 ['texto' => 'Cenoura', 'correta' => false],
6 ['texto' => 'Banana', 'correta' => true],
7 ['texto' => 'Batata', 'correta' => false],
8 ];
9 ?>

Estrutura da pergunta e das opções

Monta o HTML da pergunta e dos botões de resposta.

1 <div class="questao" data-tipo="multipla-escolha">
2
3 <p class="questao-pergunta"><?= htmlspecialchars($pergunta) ?></p>
4
5 <div class="questao-opcoes">
6 <?php foreach ($opcoes as $opcao): ?>
7 <button type="button"
8 class="questao-opcao"
9 data-correta="<?= $opcao['correta'] ? 'true' : 'false' ?>"
10 data-selecionada="false">
11 <?= htmlspecialchars($opcao['texto']) ?>
12 </button>
13 <?php endforeach; ?>
14 </div>
15
16 <button type="button" class="questao-verificar">Verificar resposta</button>
17
18 <div class="questao-feedback" hidden></div>
19 <button type="button" class="questao-reset" hidden>Tentar novamente</button>
20
21 </div>
CSS

Opção da questão

Estilo base do botão de alternativa.

1 .questao-opcao {
2 display: block;
3 width: 100%;
4 padding: 12px 16px;
5 margin-bottom: 8px;
6 border: 2px solid #d1d5db;
7 border-radius: 8px;
8 background: #fff;
9 cursor: pointer;
10 transition: border-color 0.2s, background-color 0.2s;
11 }
12
13 .questao-opcao:hover {
14 border-color: #6366f1;
15 }

Opção selecionada

Destaca a alternativa marcada antes de verificar.

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

Resultado da verificação

Colore a alternativa como certa ou errada.

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 }
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="multipla-escolha"]').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 reset = questao.querySelector('.questao-reset');
7 var respondida = false;

Marcar uma opção

Alterna a seleção da opção clicada.

1 opcoes.forEach(function (opcao) {
2 opcao.addEventListener('click', function () {
3 if (respondida) return;
4 var jaMarcada = opcao.dataset.selecionada === 'true';
5 opcao.dataset.selecionada = jaMarcada ? 'false' : 'true';
6 opcao.classList.toggle('selecionada', !jaMarcada);
7 });
8 });

Verificar a resposta

Compara a seleção com o gabarito e mostra o resultado.

1 verificar.addEventListener('click', function () {
2 if (respondida) return;
3 respondida = true;
4
5 var tudoCerto = true;
6
7 opcoes.forEach(function (opcao) {
8 opcao.disabled = true;
9
10 var correta = opcao.dataset.correta === 'true';
11 var marcada = opcao.dataset.selecionada === 'true';
12
13 if (marcada && correta) {
14 opcao.classList.add('acerto');
15 } else if (marcada && !correta) {
16 opcao.classList.add('erro');
17 tudoCerto = false;
18 }
19 if (correta && !marcada) {
20 tudoCerto = false;
21 }
22 });
23
24 feedback.textContent = tudoCerto
25 ? 'Correto! Você marcou todas as alternativas certas.'
26 : 'Não foi dessa vez. As respostas corretas estão destacadas.';
27 feedback.hidden = false;
28
29 verificar.hidden = true;
30 reset.hidden = false;
31 });

Reiniciar

Restaura o estado inicial da questão.

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 reset.hidden = true;
12 verificar.hidden = false;
13 });