2

estoy haciendo un juego de preguntas y respuestas para la facultad, ya definí las preguntas y las respuestas en dos arrays y hice una función para que me formulen distintas preguntas, lo único que me falta es seleccionar el elemento del input radio que esta seleccionado y ver si esa respuesta se encuentra en la posición 0 del array, que es donde estaría la respuesta correcta.Adjunto el código

<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
	<meta charset="utf-8">
	<title>Juego de Preguntas</title>
	<link rel="stylesheet" type="text/css" href="estilos.css">

</head>
<body> <!-- div preguntas y respuestas -->
	<div class="contenedor">
		<div id="preg"></div>
		<div id="Rtas"></div>
		<input type="button" value="Verificar respuesta" onclick="verificar()"> 
	</div>	
	<script type="text/javascript">
	//array preguntas
	var preguntas = [
	"¿Qué sabe hacer un desarrollador fullstack?",
	"¿Qué lenguaje sirve para hacer backend?",
	"¿Qué lenguaje es interpretado por el navegador?",
	];
    //array respuestas
    var respuestas = [
    ["Ambos", "Solo Front-end", "Solo Back-end", "Ninguno"],
    ["PHP", "CSS3", "Bootstrap", "HTML5"],
    ["Javascript", "Java", "Cobol", "MS-DOS"]
    
    ];
  	
  	//Numero aleatorio de preguntas
  	var indice_aleatorio = Math.floor(Math.random()*preguntas.length);

  	var respuestas_posibles = respuestas[indice_aleatorio];

  	var posiciones = [0,1,2,3];
  	var respuestas_reordenadas = [];

  	var respuesta_correcta;

  	for(i in respuestas_posibles){
  		var posicion_aleatoria = Math.floor(Math.random()*posiciones.length);
  		if(posicion_aleatoria == 0){
  			respuesta_correcta = i;
  		}
  		respuestas_reordenadas[i] =respuestas_posibles[posiciones[posicion_aleatoria]];
  		posiciones.splice(posicion_aleatoria,1);
  	}

  	var texto_respuestas = "";
  	for(i in respuestas_reordenadas){
  		texto_respuestas += '<input type="radio" name="hola" value="'+i+'"<label>'+ 
  		respuestas_reordenadas[i] + '</label> <br>';
  	}
  	//genera contenido en los elementos en el body
  	document.getElementById('preg').innerHTML = preguntas[indice_aleatorio]
  	document.getElementById('Rtas').innerHTML = texto_respuestas;

  	function verificar(){
 		respuesta_verdadera = document.querySelector("<input:checked>");
  	}

</script>
</body>
</html>

1 respuesta 1

1

RESPUESTA:

El codigo para evaluar la generacion de respuesta aleatorias por medio del radio boton es el siguiente:

function verificar(){
     var checkedList = document.querySelector('input[name=hola]:checked').value;
     valor = respuestas_reordenadas[checkedList];
     resp = respuestas_posibles[0];
     if (resp == valor) {
        alert('Respuesta correcta : ' + resp + ' = ' + valor );
     } else {
        alert('Respuesta INCORRECTA : ' + resp + ' <> ' + valor );
     }
     console.log(respuestas_posibles[0]);
     console.log(valor);
}

Aqui coloco todo el codigo completo para probarlo en el interprete:

<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
	<meta charset="utf-8">
	<title>Juego de Preguntas</title>
	<link rel="stylesheet" type="text/css" href="estilos.css">

</head>
<body> <!-- div preguntas y respuestas -->
	<div class="contenedor">
		<div id="preg"></div>
		<div id="Rtas"></div>
		<input type="button" value="Verificar respuesta" onclick="verificar()"> 
    </div>	
    

<script type="text/javascript">
	//array preguntas
	var preguntas = [
	"¿Qué sabe hacer un desarrollador fullstack?",
	"¿Qué lenguaje sirve para hacer backend?",
	"¿Qué lenguaje es interpretado por el navegador?",
	];
    //array respuestas
    var respuestas = [
    ["Ambos", "Solo Front-end", "Solo Back-end", "Ninguno"],
    ["PHP", "CSS3", "Bootstrap", "HTML5"],
    ["Javascript", "Java", "Cobol", "MS-DOS"]
    
    ];
  	
  	//Numero aleatorio de preguntas
  	var indice_aleatorio = Math.floor(Math.random()*preguntas.length);

  	var respuestas_posibles = respuestas[indice_aleatorio];

  	var posiciones = [0,1,2,3];
  	var respuestas_reordenadas = [];

  	var respuesta_correcta;

  	for(i in respuestas_posibles){
  		var posicion_aleatoria = Math.floor(Math.random()*posiciones.length);
  		if(posicion_aleatoria == 0){
  			respuesta_correcta = i;
  		}
  		respuestas_reordenadas[i] =respuestas_posibles[posiciones[posicion_aleatoria]];
  		posiciones.splice(posicion_aleatoria,1);
  	}

  	var texto_respuestas = "";
  	for(i in respuestas_reordenadas){
  		texto_respuestas += '<input type="radio" name="hola" value="'+i+'"<label>'+ 
  		respuestas_reordenadas[i] + '</label> <br>';
  	}
  	//genera contenido en los elementos en el body
  	document.getElementById('preg').innerHTML = preguntas[indice_aleatorio]
  	document.getElementById('Rtas').innerHTML = texto_respuestas;

  	function verificar(){
         var checkedList = document.querySelector('input[name=hola]:checked').value;
         valor = respuestas_reordenadas[checkedList];
         resp = respuestas_posibles[0];
         if (resp == valor) {
            alert('Respuesta correcta : ' + resp + ' = ' + valor );
         } else {
            alert('Respuesta INCORRECTA : ' + resp + ' <> ' + valor );
         }
         console.log(respuestas_posibles[0]);
         console.log(valor);
  	}

</script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.