0

*{
	margin:0px;
	padding: 0px;
	font-family: Verdana;
}

.contenedor{
	width: 400px;
	height: 400px;
	border: 2px solid;
	margin: auto;
	background-color: #00ff00;
}
<!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">
	<script></script>
</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 norepeat = false	
		var respuesta_correcta;

	for(i in respuestas_posibles){
		var posicion_aleatoria = Math.floor(Math.random()*posiciones.length);
			if(posicion_aleatoria == 0 && norepeat == false){
				respuesta_correcta = i;
	  			norepeat = true
	}
	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="answers" 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;
	

	  //función para verificar si la respuesta es correcta o no
  	function verificar(){
		var lista = document.querySelector('input[name=answers]:checked').value;
     	valor = respuestas_reordenadas[lista];
     	respuesta_acertada = respuestas_posibles[0];
     	if (respuesta_acertada == valor) {
        	alert("La respuesta es correcta");
				 } 
		else {
        alert("La respuesta es incorrecta" );
     		}
	}

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

tengo un juego de preguntas casi terminado , lo único que me falta es que al momento de evaluar la respuesta si esta es correcta me formule una nueva pregunta, ya intente declarar las variables fuera de la función comprobar pero no me dice que las variables no están definidas. tengo un juego de preguntas casi terminado , lo único que me falta es que al momento de evaluar la respuesta si esta es correcta me formule una nueva pregunta, ya intente declarar las variables fuera de la función comprobar pero no me dice que las variables no están definidas. tengo un juego de preguntas casi terminado , lo único que me falta es que al momento de evaluar la respuesta si esta es correcta me formule una nueva pregunta, ya intente declarar las variables fuera de la función comprobar pero no me dice que las variables no están definidas.

1 respuesta 1

0

Una posible solución es que uses un arreglo de objetos y que los vayas recorriendo cada vez que respondes una pregunta, algo más o menos así como en el siguiente ejemplo.

const preguntas = [
    {
        pregunta: 'pregunta 1',
        respuesta: 'respuesta 1',
        opciones: ['opcion 1', 'opcion 2']
    },
    {
        pregunta: 'pregunta 2',
        respuesta: 'respuesta 2',
        opciones: ['opcion 1', 'opcion 2']
    },
    {
        pregunta: 'pregunta 3',
        respuesta: 'respuesta 3',
        opciones: ['opcion 1', 'opcion 2']
    },
];

let indice_pregunta_actual = 0;

window.addEventListener('load', () => {
    asignarTextoPregunta();

    document.getElementById('btn_siguiente_pregunta').addEventListener('click', (event) => {
        event.preventDefault();

        siguientePregunta();
    })
});

function asignarTextoPregunta() {
    const texto_pregunta = document.getElementById('pregunta');
    texto_pregunta.textContent = preguntas[indice_pregunta_actual].pregunta;
}

function siguientePregunta() {
    if ((indice_pregunta_actual + 1) < preguntas.length) {
        indice_pregunta_actual++;
        asignarTextoPregunta();
    } else {
        alert('No hay mas preguntas :)');
    }
}
<p>Pregunta: <span id="pregunta"></span></p>
<button id="btn_siguiente_pregunta">Siguiente pregunta</button>

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.