Prueba de opción múltiple en código HTML con JavaScript

En lecciones anteriores, las respuestas a las preguntas de la prueba tenían que ser ingresadas en inputs. Sin embargo, en la vida real, a menudo también hay pruebas en las que se puede elegir una opción de respuesta entre las proporcionadas. Aprendamos a crear tales pruebas.

Comencemos nuevamente con una versión simple, donde las preguntas y respuestas se almacenan en el código HTML, y luego gradualmente la haremos más compleja.

Entonces, aquí hay una prueba de opción múltiple:

<div id="test">
	<div>
		<p>¿pregunta 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			opción 1
		</label>
		<label>
			<input type="radio" name="1">
			opción 2
		</label>
		<label>
			<input type="radio" name="1">
			opción 3
		</label>
	</div>
	<div>
		<p>¿pregunta 2?</p>
		
		<label>
			<input type="radio" name="2">
			opción 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			opción 2
		</label>
		<label>
			<input type="radio" name="2">
			opción 3
		</label>
	</div>
	<div>
		<p>¿pregunta 3?</p>
		
		<label>
			<input type="radio" name="3">
			opción 1
		</label>
		<label>
			<input type="radio" name="3">
			opción 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			opción 3
		</label>
	</div>
</div>

Como puedes ver, podemos seleccionar las opciones de respuesta usando botones de radio. Al mismo tiempo, en cada pregunta, el botón de radio con la opción correcta está marcado con el atributo data-right.

Haz que cuando se elija una de las respuestas de una pregunta, esa respuesta se verifique inmediatamente para determinar su corrección.

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