Autor Tema: Trivial en JavaScript juego de preguntas y respuestas en página web  (Leído 13026 veces)

ElHombreDelMañana

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 4
    • Ver Perfil
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:
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
« Última modificación: 10 de Julio 2017, 19:11 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Trivial en JavaScript juego de preguntas y respuestas en página web
« Respuesta #1 en: 10 de Julio 2017, 19:16 »
Hola ElHombreDelMañana. La consulta es muy general y por tanto difícil de plantear y de responder. Recomendamos leer este hilo con algunas indicaciones: https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

Para la construcción de un juego como el trivial que fuera atractivo visualmente y funcionalmente, serían necesarios conocimientos amplios. Si quisiera hacerse en entorno web, serían necesarios conocimientos de HTML, CSS, JavaScript y algún lenguaje como PHP.

En este artículo se describen los conocimientos generales en torno a los desarrollos web: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=702:ique-es-y-que-estudiar-para-ser-programador-web-itinerario-de-formacion-plan-de-estudios-o-de-carrera&catid=39&Itemid=189

Y en este link pueden encontrarse diferentes cursos, siendo el orden que recomendamos para seguirlos primero HTML, luego CSS, luego JavaScript y luego PHP: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86

Saludos.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".