Prueba con preguntas y respuestas en código HTML usando JavaScript

En esta y en varias lecciones siguientes nos dedicaremos a crear pruebas con preguntas y respuestas. Comenzaremos con las variantes más simples y gradualmente las complicaremos.

Para empezar, supongamos que queremos hacer un conjunto de preguntas, para cada una de las cuales solo es posible una respuesta. Supongamos que las respuestas son ingresadas por el usuario en inputs debajo de las mismas preguntas.

Ilustraré lo escrito con código HTML:

<div id="test">
	<div>
		<p>¿pregunta 1?</p>
		<input>
	</div>
	<div>
		<p>¿pregunta 2?</p>
		<input>
	</div>
	<div>
		<p>¿pregunta 3?</p>
		<input>
	</div>
</div>

Como puedes ver, tenemos preguntas e inputs para las respuestas. Queda por decidir dónde almacenaremos las respuestas correctas.

Lo más simple que se puede ocurrir es almacenar las respuestas directamente en el código HTML de los inputs, en algún atributo data-:

<div id="test">
	<div>
		<p>¿pregunta 1?</p>
		<input data-right="respuesta 1">
	</div>
	<div>
		<p>¿pregunta 2?</p>
		<input data-right="respuesta 2">
	</div>
	<div>
		<p>¿pregunta 3?</p>
		<input data-right="respuesta 3">
	</div>
</div>

El siguiente matiz que debemos considerar: ¿en qué momento realizaremos la verificación de la corrección de las respuestas? Aquí se pueden proponer dos variantes: o que cada input inmediatamente al ingresar la respuesta verifique si es correcta, o que haya un botón, al presionar el cual se verifiquen las respuestas de todas las preguntas a la vez.

Independientemente de la variante que elijamos, hagamos que, si la respuesta es correcta, el borde del input se pinte de color verde, y si es incorrecta - de rojo. Creemos para esto las correspondientes clases CSS:

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

Haz que ingresar una respuesta en el input se complete presionando la tecla Enter. Que en este caso el input verifique inmediatamente la corrección de la respuesta.

Modifica tu código para que la verificación de las respuestas se realice al presionar un botón.