*{
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.