Teste de múltipla escolha em código HTML com JavaScript
Nas lições anteriores, as respostas do teste precisavam ser digitadas em inputs. No entanto, na vida real, muitas vezes também existem testes nos quais se pode selecionar uma opção de resposta entre as fornecidas. Vamos aprender a criar esses testes.
Vamos começar novamente com uma versão simples, onde as perguntas e respostas são armazenadas no código HTML, e depois vamos complicando gradualmente.
Então, aqui está um teste de múltipla escolha:
<div id="test">
<div>
<p>pergunta 1?</p>
<label>
<input type="radio" name="1" data-right>
opção 1
</label>
<label>
<input type="radio" name="1">
opção 2
</label>
<label>
<input type="radio" name="1">
opção 3
</label>
</div>
<div>
<p>pergunta 2?</p>
<label>
<input type="radio" name="2">
opção 1
</label>
<label>
<input type="radio" name="2" data-right>
opção 2
</label>
<label>
<input type="radio" name="2">
opção 3
</label>
</div>
<div>
<p>pergunta 3?</p>
<label>
<input type="radio" name="3">
opção 1
</label>
<label>
<input type="radio" name="3">
opção 2
</label>
<label>
<input type="radio" name="3" data-right>
opção 3
</label>
</div>
</div>
Como você pode ver, podemos selecionar as opções de resposta
usando botões de rádio (radio buttons). Ao mesmo tempo,
em cada pergunta, o botão de rádio com a opção correta
está marcado com o atributo data-right.
Faça com que, ao selecionar uma das respostas de uma pergunta, essa resposta seja verificada imediatamente quanto à correção.
Modifique seu código para que a verificação das respostas seja executada ao clicar em um botão.
