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

Adivinhar a Resposta

O aprendiz digita uma resposta livre baseada em uma dica ou imagem. O sistema revela a resposta correta progressivamente com mais dicas. Estimula recuperação ativa da memória.

Conhecimento e compreensão adivinhar digitação recuperação guess

Experimente

Dica

Modelo de design instrucional com 5 letras, cada uma representando uma fase.

Código-fonte

PHP

Dados de exemplo

Resposta e dicas extras fixas — a comparação ignora maiúsculas/minúsculas e espaços nas pontas.

1 <?php
2 $dicaInicial = 'Modelo de motivação com 4 letras, cada uma representando um fator.';
3 $dicasExtras = [
4 "A primeira letra representa 'Atenção'.",
5 "A última letra representa 'Satisfação'.",
6 ];
7 $resposta = 'ARCS';
8 $feedback = 'Correto! ARCS = Atenção, Relevância, Confiança, Satisfação.';
9 ?>

Estrutura da questão

Dica inicial, campo de resposta livre, dicas extras reveladas aos poucos e o painel de ações.

1 <div class="questao" data-tipo="adivinhar-resposta"
2 data-resposta="<?= htmlspecialchars($resposta) ?>"
3 data-dicas="<?= htmlspecialchars(json_encode($dicasExtras), ENT_QUOTES, 'UTF-8') ?>"
4 data-feedback="<?= htmlspecialchars($feedback) ?>">
5
6 <div class="questao-dica">
7 <p class="questao-dica-rotulo">Dica</p>
8 <p class="questao-dica-texto"><?= htmlspecialchars($dicaInicial) ?></p>
9 </div>
10
11 <input type="text" class="questao-input" placeholder="Digite sua resposta..." autocomplete="off">
12
13 <div class="questao-dicas-extra"></div>
14
15 <button type="button" class="questao-dica-btn">+ dica</button>

Ações da questão

"Verificar resposta" é de tentativa única: certo, errado ou campo vazio, sempre trava a questão e mostra o painel com o gabarito.

1 <div class="questao-acoes">
2 <button type="button" class="questao-verificar">Verificar resposta</button>
3
4 <div class="questao-painel" hidden>
5 <p class="questao-painel-mensagem"></p>
6 <p class="questao-painel-rotulo">Sua resposta</p>
7 <p class="questao-painel-tentativa"></p>
8 <p class="questao-painel-rotulo">Resposta esperada</p>
9 <p class="questao-painel-resposta"></p>
10 </div>
11
12 <button type="button" class="questao-reset" hidden>Tentar novamente</button>
13 </div>
14
15 </div>
CSS

Caixa da dica inicial

Destaca a pista antes do campo de resposta.

1 .questao-dica {
2 padding: 12px 16px;
3 margin-bottom: 16px;
4 border-radius: 10px;
5 background: #fffbeb;
6 border: 1px solid #fde68a;
7 }
8
9 .questao-dica-rotulo {
10 margin: 0 0 4px;
11 font-size: 11px;
12 font-weight: 700;
13 letter-spacing: 0.05em;
14 text-transform: uppercase;
15 color: #b45309;
16 }
17
18 .questao-dica-texto {
19 margin: 0;
20 font-weight: 600;
21 color: #78350f;
22 }

Campo de resposta

Entrada de texto livre, ocupando a largura toda.

1 .questao-input {
2 display: block;
3 width: 100%;
4 margin-bottom: 16px;
5 padding: 10px 14px;
6 border: 1px solid #d1d5db;
7 border-radius: 10px;
8 font: inherit;
9 text-transform: uppercase;
10 }
11
12 .questao-input:focus {
13 outline: none;
14 border-color: #f59e0b;
15 }
16
17 .questao-input:disabled {
18 background: #f9fafb;
19 color: #1f2937;
20 opacity: 1;
21 -webkit-text-fill-color: #1f2937;
22 }

Dicas extras reveladas

Uma linha por dica pedida, na mesma cor de aviso da dica inicial.

1 .questao-dicas-extra {
2 margin-bottom: 12px;
3 }
4
5 .questao-dica-extra {
6 margin: 0 0 8px;
7 padding: 8px 12px;
8 border-radius: 8px;
9 background: #fffbeb;
10 border: 1px solid #fde68a;
11 color: #92400e;
12 font-size: 13px;
13 }

Botão "+ dica"

Pílula compacta — largura só do necessário, para não competir com "Verificar resposta".

1 .questao-dica-btn {
2 display: inline-block;
3 margin-bottom: 16px;
4 padding: 8px 16px;
5 border: 1px solid #fbbf24;
6 border-radius: 999px;
7 background: #fffbeb;
8 color: #92400e;
9 font-weight: 600;
10 font-size: 13px;
11 cursor: pointer;
12 }
13
14 .questao-dica-btn:disabled {
15 opacity: 0.4;
16 cursor: default;
17 }

Ações

Botões de largura total, um de cada vez na tela.

1 .questao-verificar,
2 .questao-reset {
3 display: block;
4 width: 100%;
5 padding: 12px 16px;
6 border: none;
7 border-radius: 10px;
8 font: inherit;
9 font-weight: 600;
10 cursor: pointer;
11 }
12
13 .questao-verificar {
14 background: #4f46e5;
15 color: #fff;
16 }
17
18 .questao-reset {
19 background: #e5e7eb;
20 color: #1f2937;
21 }

Estado oculto

O atributo hidden nativo tem a mesma especificidade da regra de exibição acima — sem isto, "Tentar novamente" apareceria antes de verificar.

1 .questao-verificar[hidden],
2 .questao-reset[hidden] {
3 display: none;
4 }

Painel de resultado

Mesma paleta usada no site inteiro para feedback — verde no acerto, vermelho no erro, âmbar quando a solução foi revelada sem resposta.

1 .questao-painel {
2 margin: 16px 0;
3 padding: 16px;
4 border-radius: 12px;
5 }
6
7 .questao-painel.correto {
8 background: #14532d;
9 color: #f0fdf4;
10 }
11
12 .questao-painel.errado {
13 background: #7f1d1d;
14 color: #fef2f2;
15 }
16
17 .questao-painel.revelado {
18 background: #78350f;
19 color: #fef3c7;
20 }
21
22 .questao-painel-mensagem {
23 margin: 0 0 12px;
24 padding-bottom: 12px;
25 border-bottom: 1px solid rgba(255, 255, 255, 0.2);
26 font-weight: 600;
27 }
28
29 .questao-painel-rotulo {
30 margin: 12px 0 4px;
31 font-size: 11px;
32 font-weight: 700;
33 letter-spacing: 0.05em;
34 text-transform: uppercase;
35 opacity: 0.8;
36 }
37
38 .questao-painel-tentativa,
39 .questao-painel-resposta {
40 margin: 0;
41 line-height: 1.6;
42 }
JavaScript

Encontrar os elementos da questão

Localiza o campo de resposta, o botão de dica, o painel e as ações.

1 document.addEventListener('DOMContentLoaded', function () {
2 document.querySelectorAll('.questao[data-tipo="adivinhar-resposta"]').forEach(function (questao) {
3 var resposta = (questao.dataset.resposta || '').toUpperCase();
4 var feedbackTxt = questao.dataset.feedback || '';
5 var dicasExtra = [];
6 try { dicasExtra = JSON.parse(questao.dataset.dicas || '[]'); } catch (e) {}
7
8 var input = questao.querySelector('.questao-input');
9 var dicaBtn = questao.querySelector('.questao-dica-btn');
10 var dicasDiv = questao.querySelector('.questao-dicas-extra');
11 var verificar = questao.querySelector('.questao-verificar');
12 var painel = questao.querySelector('.questao-painel');
13 var reset = questao.querySelector('.questao-reset');
14 var dicaIdx = 0;

Pedir mais uma dica

Revela uma dica por clique; esgotadas as dicas, o botão se desabilita sozinho.

1 dicaBtn.addEventListener('click', function () {
2 if (dicaIdx >= dicasExtra.length) { dicaBtn.disabled = true; return; }
3 var linha = document.createElement('p');
4 linha.className = 'questao-dica-extra';
5 linha.textContent = 'Dica ' + (dicaIdx + 1) + ': ' + dicasExtra[dicaIdx];
6 dicasDiv.appendChild(linha);
7 dicaIdx++;
8 if (dicaIdx >= dicasExtra.length) dicaBtn.disabled = true;
9 });

Mostrar o painel de resultado

Preenche mensagem, tentativa e gabarito; a classe (correto/errado/revelado) decide a cor.

1 function mostrarPainel(classe, mensagem, tentativa) {
2 painel.className = 'questao-painel ' + classe;
3 painel.querySelector('.questao-painel-mensagem').textContent = mensagem;
4 painel.querySelector('.questao-painel-tentativa').textContent = tentativa;
5 painel.querySelector('.questao-painel-resposta').textContent = resposta;
6 painel.hidden = false;
7 }

Finalizar a questão

Trava o campo, esconde "Verificar resposta" e revela "Tentar novamente" — tentativa única, certo ou errado.

1 function finalizar() {
2 input.disabled = true;
3 verificar.hidden = true;
4 reset.hidden = false;
5 }

Verificar a resposta

Campo vazio revela a solução (equivale a desistir); campo preenchido compara com o gabarito. Nos dois casos, uma tentativa só.

1 verificar.addEventListener('click', function () {
2 var val = input.value.trim().toUpperCase();
3
4 if (!val) {
5 mostrarPainel('revelado', 'Solução revelada.', '(sem resposta)');
6 finalizar();
7 return;
8 }
9
10 var correta = val === resposta;
11 mostrarPainel(
12 correta ? 'correto' : 'errado',
13 correta ? feedbackTxt : 'Não é esta.',
14 input.value.trim()
15 );
16 finalizar();
17 });

Reiniciar

Restaura o campo, o painel e as dicas para uma nova tentativa.

1 reset.addEventListener('click', function () {
2 dicaIdx = 0;
3 input.disabled = false;
4 input.value = '';
5 dicasDiv.innerHTML = '';
6 dicaBtn.disabled = false;
7 painel.hidden = true;
8 verificar.hidden = false;
9 reset.hidden = true;
10 });