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

Quiz Aritmético

Apresenta um problema matemático ou numérico com opções de resposta. Avalia raciocínio quantitativo e habilidade de cálculo em contextos aplicados.

Aplicação matemática cálculo numérico arithmetic

Experimente

Uma turma tem 40 alunos. Se 75% completaram o módulo 1, quantos alunos ainda precisam concluí-lo?

Código-fonte

PHP

Dados de exemplo

Define a pergunta e as alternativas de exemplo.

1 <?php
2 $pergunta = 'Uma turma tem 40 alunos. Se 75% concluíram o módulo, quantos ainda faltam?';
3 // Uma unica correta: e o que justifica a escolha unica. Com duas certas, a
4 // interacao teria de voltar a ser de selecao multipla.
5 $opcoes = [
6 ['texto' => '5 alunos', 'correta' => false],
7 ['texto' => '10 alunos', 'correta' => true],
8 ['texto' => '15 alunos', 'correta' => false],
9 ['texto' => '30 alunos', 'correta' => false],
10 ];
11 ?>
12

Estrutura da pergunta e das opções

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

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-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="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;

Marcar uma opção

Só uma alternativa fica marcada por vez — clicar numa desmarca as outras. Repare que o laço percorre TODAS a cada clique, em vez de alternar só a clicada: é o que garante que nunca sobre mais de uma marcada.

1 opcoes.forEach(function (opcao) {
2 opcao.addEventListener('click', function () {
3 if (respondida) return;
4
5 opcoes.forEach(function (outra) {
6 var marcada = outra === opcao;
7 outra.dataset.selecionada = marcada ? 'true' : 'false';
8 outra.classList.toggle('selecionada', marcada);
9 outra.setAttribute('aria-pressed', marcada ? 'true' : 'false');
10 });
11 });
12 });

Verificar a resposta

Com uma escolha só, basta olhar a alternativa marcada — não há combinação de acertos e erros para somar.

1 verificar.addEventListener('click', function () {
2 if (respondida) return;
3
4 var escolhida = questao.querySelector('.questao-opcao[data-selecionada="true"]');
5 if (!escolhida) return;
6
7 respondida = true;
8 var acertou = escolhida.dataset.correta === 'true';
9
10 opcoes.forEach(function (opcao) {
11 opcao.disabled = true;
12 if (opcao.dataset.correta === 'true') opcao.classList.add('acerto');
13 else if (opcao === escolhida) opcao.classList.add('erro');
14 });
15
16 feedback.textContent = acertou
17 ? 'Correto! Essa é a alternativa certa.'
18 : 'Não foi dessa vez. A resposta certa está destacada.';
19 feedback.hidden = false;
20
21 verificar.hidden = true;
22 reset.hidden = false;
23 });

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.setAttribute('aria-pressed', 'false');
8 opcao.classList.remove('selecionada', 'acerto', 'erro');
9 });
10
11 feedback.hidden = true;
12 reset.hidden = true;
13 verificar.hidden = false;
14 });