Mostrar Mensajes
1
Aprender a programar desde cero / Trivial en JavaScript juego de preguntas y respuestas en página web
« en: 13 de Junio 2017, 19:59 »
Hola,
Quiero hacer un trivial, o juego de preguntas con código JavaScript utilizando objetos, llevo toda una semana y estoy muy estancado, espero que me puedan ayudar. El juego consta de tres preguntas con sus cuatro respuestas, el usuario a de seleccionar una respuesta y te dice si esta bien o mal, luego pasa a la siguiente pregunta, así hasta las tres preguntas y luego al acabar te dice cuantas has acertado.
Tengo dos códigos distintos:
Parto desde éste otro código, pero no me convence del todo.
Gracias a todos
Quiero hacer un trivial, o juego de preguntas con código JavaScript utilizando objetos, llevo toda una semana y estoy muy estancado, espero que me puedan ayudar. El juego consta de tres preguntas con sus cuatro respuestas, el usuario a de seleccionar una respuesta y te dice si esta bien o mal, luego pasa a la siguiente pregunta, así hasta las tres preguntas y luego al acabar te dice cuantas has acertado.
Tengo dos códigos distintos:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Trivial</title>
</head>
<body>
<script type="text/javascript">
var Pregunta1 = {
Preguntas: '¿Quién ganó la UCL la temporada 2014/15?'};
var respuesta1 = {
respuestas: 'FC Barcelona', ' Bayern de Münich'};
var Pregunta2 = {
Preguntas: '¿Cómo se llaman las crías de la mula?'};
//var respuestas2 = [
//['És estéril', 'Mula', 'Yegua', 'Potro'],
var Pregunta3 = {
Preguntas: '¿Cuál de los cinco sentidos se desarrolla primero? '};
//var respuestas3 = [
//['El olfato', 'La vista', 'El oído', 'El tacto'],
Pregunta2.Preguntas='¿Qué rasgo facial no tiene la Mona Lisa? ';
Pregunta1.cl='Cejas, Nariz, Pestañas, Ojo';
delete Pregunta3.Respostes;
document.write(Pregunta1.Preguntas + ' val ' + respuesta1.respuestas+'<br>');
document.write(Pregunta2.Preguntas + ' val ' + Pregunta2.Respostes+'<br>');
document.write(Pregunta3.Preguntas + ' val ' + Pregunta3.Respostes+'<br>');
</script>
</body>
</script>Parto desde éste otro código, pero no me convence del todo.
Código: [Seleccionar]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery.js"></script>
<title>Crear un objecte</title>
</head>
<body>
<div id='pregunta'></div>
<div id='respuestas'></div>
<input type='button' value="solución" onclick='comprobar()'>
<script>
var preguntas = [
'Quién descubrió América?',
'Qué equipo ganó la UCL en la temporada 2014/15?',
'En que año se estrenó El Rey León?'
];
var respuestas = [
['Colón', 'Leonardo Da Vinci', 'Federico García Lorca', 'Emilio Butragueño'],
['FC Barcelona', 'R Madrid', 'At Madrid', 'Bayern De Múnich'],
['1994', '1988', '1996', '1991']
];
var indice_aleatorio = Math.floor(Math.random()*preguntas.length);
var respuestas_elegir = respuestas[indice_aleatorio];
var posiciones = [0,1,2,3];
var respuestas_ordenadas = [];
var indicie_respuesta_correcta;
for(i in respuestas_elegir){
var posicion_aleatoria = Math.floor(Math.random()*posiciones.length);
if (posicion_aleatoria==0){
var indicie_respuesta_correcta =i;
}
respuestas_ordenadas[i] = respuestas_elegir[posiciones[posicion_aleatoria]];
posiciones.splice(posicion_aleatoria, 1);
}
var txt_respuestas='';
for(i in respuestas_ordenadas){
txt_respuestas += '<input type="radio" name="pp" value="'+i+'"><label>'+respuestas_ordenadas[i]+'</label><br>'
}
document.getElementById('respuestas').innerHTML = txt_respuestas;
document.getElementById('pregunta').innerHTML = preguntas[indice_aleatorio];
function comprobar(){
var respuesta = $("input[type=radio]:checked").val();
if(respuesta ==indicie_respuesta_correcta){
alert("que bien");
}else{
alert("MUY MAL");
}
}
</script>
</body>Gracias a todos
RSS