Teste com perguntas e respostas em código HTML usando JavaScript

Nesta e em algumas lições seguintes, nós vamos nos dedicar a criar testes com perguntas e respostas. Começaremos com as variantes mais simples e vamos complicar gradualmente.

Suponha que, para começar, queremos fazer um conjunto de perguntas, para cada uma das quais é possível apenas uma resposta. Suponha que as respostas sejam inseridas pelo usuário nos inputs sob as próprias perguntas.

Vou ilustrar o que foi escrito com código HTML:

html<div id="test">
  <div>
    <p>pergunta 1?</p>
    <input>
  </div>
  <div>
    <p>pergunta 2?</p>
    <input>
  </div>
  <div>
    <p>pergunta 3?</p>
    <input>
  </div>
</div>

Como você pode ver, temos perguntas e inputs para respostas. Resta decidir onde vamos armazenar as respostas corretas.

A coisa mais simples que se pode imaginar é armazenar as respostas diretamente no código HTML dos inputs, em algum atributo data-:

html<div id="test">
  <div>
    <p>pergunta 1?</p>
    <input data-right="resposta 1">
  </div>
  <div>
    <p>pergunta 2?</p>
    <input data-right="resposta 2">
  </div>
  <div>
    <p>pergunta 3?</p>
    <input data-right="resposta 3">
  </div>
</div>

O próximo nuance que deve ser pensado: em que momento vamos executar a verificação das respostas quanto à correção? Aqui podemos propor duas variantes: ou cada input verifica imediatamente a resposta inserida nele, ou que haja um botão, ao ser clicado, as respostas de todas as perguntas serão verificadas de uma vez.

Seja qual for a variante que escolhermos, vamos, se a resposta estiver correta, pintar a borda do input de verde, e se estiver incorreta - de vermelho. Vamos criar classes CSS correspondentes para isso:

css.right {
  border: 1px solid green;
}
.wrong {
  border: 1px solid red;
}