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:

<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-:

<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:

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

Faça com que a inserção da resposta no input seja finalizada pressionando a tecla Enter. Que neste caso o input verifique imediatamente se a resposta está correta.

Modifique seu código para que a verificação das respostas seja executada ao clicar em um botão.