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

Escolha Única

Apresenta uma pergunta com múltiplas opções, mas apenas uma é correta. Ideal para medir conhecimento factual e conceitual com precisão.

Conhecimento e compreensão avaliação quiz rádio assessment

Experimente

Qual modelo instrucional descreve as etapas de Análise, Design, Desenvolvimento, Implementação e Avaliação?

Código-fonte

PHP

Dados de exemplo

Define a pergunta e as alternativas de exemplo, com feedback individual opcional.

1 <?php
2 $pergunta = 'Qual modelo instrucional descreve as etapas de Análise, Design, Desenvolvimento, Implementação e Avaliação?';
3 $opcoes = [
4 ['texto' => "Bloom's Taxonomy", 'correta' => false, 'feedback' => ''],
5 ['texto' => 'Modelo ADDIE', 'correta' => true, 'feedback' => 'Correto! ADDIE é o acrônimo de Analysis, Design, Development, Implementation e Evaluation.'],
6 ['texto' => 'Modelo SAM', 'correta' => false, 'feedback' => 'Não. O SAM usa ciclos iterativos, não essas cinco etapas sequenciais.'],
7 ['texto' => 'Cone de Dale', 'correta' => false, 'feedback' => ''],
8 ];
9 ?>

Estrutura da pergunta e das opções

Monta o HTML da pergunta, cada opção com um indicador tipo rádio.

1 <div class="questao" data-tipo="escolha-unica">
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-feedback="<?= htmlspecialchars($opcao['feedback']) ?>"
11 data-selecionada="false">
12 <span class="opcao-radio"></span>
13 <span><?= htmlspecialchars($opcao['texto']) ?></span>
14 </button>
15 <?php endforeach; ?>
16 </div>
17
18 <button type="button" class="questao-verificar">Verificar resposta</button>
19
20 <div class="questao-feedback" hidden></div>
21 <button type="button" class="questao-reset" hidden>Tentar novamente</button>
22
23 </div>
CSS

Opção da questão

Estilo base do botão de alternativa com indicador tipo rádio.

1 .questao-opcao {
2 display: flex;
3 align-items: center;
4 gap: 12px;
5 width: 100%;
6 padding: 12px 16px;
7 margin-bottom: 8px;
8 border: 2px solid #d1d5db;
9 border-radius: 8px;
10 background: #fff;
11 cursor: pointer;
12 text-align: left;
13 transition: border-color 0.2s, background-color 0.2s;
14 }
15
16 .questao-opcao:hover {
17 border-color: #6366f1;
18 }
19
20 .opcao-radio {
21 width: 12px;
22 height: 12px;
23 border-radius: 50%;
24 border: 2px solid #9ca3af;
25 flex-shrink: 0;
26 }

Opção selecionada

Destaca a alternativa marcada e preenche o indicador rádio.

1 .questao-opcao.selecionada {
2 border-color: #6366f1;
3 background: #eef2ff;
4 }
5
6 .questao-opcao.selecionada .opcao-radio {
7 background: #6366f1;
8 border-color: #6366f1;
9 }

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

Estiliza a caixa de feedback conforme o resultado.

1 .questao-feedback {
2 margin-top: 8px;
3 padding: 12px 16px;
4 border-radius: 8px;
5 font-size: 14px;
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 }
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="escolha-unica"]').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;

Selecionar uma alternativa

Marca a opção clicada e desmarca as demais (seleção exclusiva, tipo rádio).

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 e mostra o resultado contra o gabarito.

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 uma alternativa 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 = escolhida.dataset.feedback || (correta
28 ? 'Correto! Muito bem.'
29 : 'Não foi dessa vez. Veja a resposta correta destacada acima.');
30 feedback.className = 'questao-feedback ' + (correta ? 'correto' : 'errado');
31 feedback.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 reset.hidden = true;
12 verificar.hidden = false;
13 });