-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjuego.html
76 lines (61 loc) · 2.33 KB
/
juego.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de Preguntas</title>
</head>
<body>
<div id="pregunta-container"></div>
<button onclick="juego.empezarJuego()">Empezar Juego</button>
<script>
class Juego {
constructor(preguntas) {
this.preguntas = preguntas;
this.puntuacion = 0;
this.preguntaActualIndex = 0;
}
empezarJuego() {
this.mostrarPregunta();
document.getElementById('pregunta-container').style.display = 'block';
document.querySelector('button').style.display = 'none';
}
mostrarPregunta() {
const preguntaContainer = document.getElementById('pregunta-container');
preguntaContainer.innerHTML = '';
const preguntaActual = this.preguntas[this.preguntaActualIndex];
const preguntaElement = document.createElement('div');
preguntaElement.innerHTML = `
<h2>${preguntaActual.pregunta}</h2>
<div>
${preguntaActual.opciones.map((opcion, index) => `<button onclick="juego.responder(${index})">${opcion}</button>`).join('')}
</div>
`;
preguntaContainer.appendChild(preguntaElement);
}
responder(opcionSeleccionada) {
const preguntaActual = this.preguntas[this.preguntaActualIndex];
if (opcionSeleccionada === preguntaActual.respuestaCorrecta) {
this.puntuacion++;
}
this.preguntaActualIndex++;
if (this.preguntaActualIndex < this.preguntas.length) {
this.mostrarPregunta();
} else {
this.mostrarResultado();
}
}
mostrarResultado() {
const preguntaContainer = document.getElementById('pregunta-container');
preguntaContainer.innerHTML = `<h2>Juego completado. Tu puntuación es ${this.puntuacion}/${this.preguntas.length}.</h2>`;
}
}
// Crea una instancia de la clase Juego
const juego = new Juego([
{ pregunta: "¿Cuál es el lema del proyecto?", opciones: ["Innovación para todos", "Haciendo el futuro", "Construyendo juntos", "Transformando vidas", "Cambiando el mundo"], respuestaCorrecta: 1 },
{ pregunta: "¿Cuándo fue lanzado oficialmente el proyecto?", opciones: ["2020", "2018", "2015", "2022", "2019"], respuestaCorrecta: 3 },
// Agrega aquí las demás preguntas
]);
</script>
</body>
</html>