Referencial de Atividades
Todas as atividades
Jogo e Combinação

Escolha com Multimídia

Variação da múltipla escolha onde as opções são imagens, áudios ou vídeos em vez de texto. O aprendiz escolhe a opção multimídia que responde corretamente à pergunta.

Compreensão e análise multimídia escolha imagem multimedia

Experimente

Qual postura é ergonomicamente correta?

Selecione a imagem que mostra a postura correta ao usar o computador:

Código-fonte

PHP

Dados de exemplo

Pergunta e opções, cada uma com imagem, legenda e comentário de retorno.

1 <?php
2 $pergunta = 'Qual imagem responde corretamente à pergunta?';
3 $opcoes = [
4 ['imagem' => 'opcao-a.jpg', 'legenda' => 'Alternativa A', 'correta' => false, 'feedback' => 'Não é essa. Veja a alternativa destacada em verde.'],
5 ['imagem' => 'opcao-b.jpg', 'legenda' => 'Alternativa B', 'correta' => true, 'feedback' => 'Isso mesmo!'],
6 ['imagem' => 'opcao-c.jpg', 'legenda' => 'Alternativa C', 'correta' => false, 'feedback' => 'Não é essa. Veja a alternativa destacada em verde.'],
7 ];
8 ?>

Estrutura da pergunta e das opções

Cada opção é um botão com imagem e legenda colada logo abaixo.

1 <div class="questao" data-tipo="escolha-multimidia">
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 <img src="<?= htmlspecialchars($opcao['imagem']) ?>" alt="<?= htmlspecialchars($opcao['legenda']) ?>">
13 <span class="questao-opcao-legenda"><?= htmlspecialchars($opcao['legenda']) ?></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

Grade das opções

As duas primeiras opções ficam lado a lado; da terceira em diante, a opção ocupa a linha toda e fica centralizada.

1 .questao-opcoes {
2 display: grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 12px;
5 margin: 16px 0;
6 }
7
8 .questao-opcao:nth-child(n+3) {
9 grid-column: 1 / -1;
10 justify-self: center;
11 width: 50%;
12 }

Opção com imagem e legenda

A legenda fica colada na base da imagem, sem respiro entre as duas.

1 .questao-opcao {
2 display: block;
3 width: 100%;
4 padding: 0;
5 border: 2px solid #d1d5db;
6 border-radius: 12px;
7 background: #fff;
8 overflow: hidden;
9 cursor: pointer;
10 text-align: left;
11 transition: border-color 0.2s, box-shadow 0.2s;
12 }
13
14 .questao-opcao:hover {
15 border-color: #6366f1;
16 }
17
18 .questao-opcao img {
19 display: block;
20 width: 100%;
21 aspect-ratio: 1 / 1;
22 object-fit: cover;
23 }
24
25 .questao-opcao-legenda {
26 display: block;
27 padding: 10px 12px;
28 font-size: 14px;
29 text-align: center;
30 color: #374151;
31 background: #f9fafb;
32 }

Opção selecionada

Contraste forte antes de verificar — borda sólida mais anel de destaque, não só uma cor fraca de fundo.

1 .questao-opcao.selecionada {
2 border-color: #6366f1;
3 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
4 }

Resultado da verificação

Mesmo contraste forte para acerto e erro, já com as opções travadas.

1 .questao-opcao.acerto {
2 border-color: #22c55e;
3 box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
4 }
5
6 .questao-opcao.erro {
7 border-color: #ef4444;
8 box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
9 }
10
11 .questao-opcao:disabled {
12 cursor: not-allowed;
13 }
JavaScript

Encontrar os elementos da questão

Localiza a questão, as opções e os elementos de ação.

1 document.addEventListener('DOMContentLoaded', function () {
2 document.querySelectorAll('.questao[data-tipo="escolha-multimidia"]').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 opção

Só uma opção fica marcada por vez; selecionar ainda não julga a resposta.

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

Verificar a resposta

Corrige a opção marcada e mostra o comentário próprio dela.

1 verificar.addEventListener('click', function () {
2 if (respondida) return;
3 var escolhida = Array.prototype.filter.call(opcoes, function (opcao) {
4 return opcao.dataset.selecionada === 'true';
5 })[0];
6 if (!escolhida) {
7 feedback.textContent = 'Escolha uma opção antes de verificar.';
8 feedback.hidden = false;
9 return;
10 }
11
12 respondida = true;
13
14 opcoes.forEach(function (opcao) {
15 opcao.disabled = true;
16 if (opcao.dataset.correta === 'true') opcao.classList.add('acerto');
17 else if (opcao === escolhida) opcao.classList.add('erro');
18 });
19
20 feedback.textContent = escolhida.dataset.feedback;
21 feedback.hidden = false;
22
23 verificar.hidden = true;
24 reset.hidden = false;
25 });

Reiniciar

Restaura o estado inicial da questão.

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