99 lines
2.0 KiB
JavaScript
99 lines
2.0 KiB
JavaScript
const preguntas = [
|
|
{
|
|
pregunta: "¿Capital de Francia?",
|
|
opciones: ["Madrid", "París", "Roma", "Berlín"],
|
|
correcta: 1
|
|
},
|
|
{
|
|
pregunta: "¿Capital de Argentina?",
|
|
opciones: ["Rosario", "Córdoba", "Buenos Aires", "Mendoza"],
|
|
correcta: 2
|
|
},
|
|
{
|
|
pregunta: "¿Capital de Brasil?",
|
|
opciones: ["Brasilia", "Río", "San Pablo", "Lima"],
|
|
correcta: 0
|
|
},
|
|
{
|
|
pregunta: "¿Capital de Italia?",
|
|
opciones: ["Roma", "Milán", "Nápoles", "Venecia"],
|
|
correcta: 0
|
|
},
|
|
{
|
|
pregunta: "¿Capital de Alemania?",
|
|
opciones: ["Hamburgo", "Berlín", "Múnich", "Frankfurt"],
|
|
correcta: 1
|
|
}
|
|
];
|
|
|
|
const quiz = document.querySelector("#quiz");
|
|
const botonSiguiente = document.querySelector("#siguiente");
|
|
|
|
let indice = 0;
|
|
let puntaje = 0;
|
|
|
|
function mostrarPregunta() {
|
|
quiz.innerHTML = "";
|
|
|
|
const pregunta = preguntas[indice];
|
|
|
|
const h2 = document.createElement("h2");
|
|
h2.textContent = pregunta.pregunta;
|
|
|
|
quiz.appendChild(h2);
|
|
|
|
pregunta.opciones.forEach((opcion, i) => {
|
|
const boton = document.createElement("button");
|
|
|
|
boton.textContent = opcion;
|
|
|
|
boton.addEventListener("click", () => {
|
|
verificarRespuesta(i);
|
|
});
|
|
|
|
quiz.appendChild(boton);
|
|
});
|
|
}
|
|
|
|
function verificarRespuesta(opcionElegida) {
|
|
const correcta = preguntas[indice].correcta;
|
|
|
|
if (opcionElegida === correcta) {
|
|
puntaje++;
|
|
alert("Correcto");
|
|
} else {
|
|
alert("Incorrecto");
|
|
}
|
|
|
|
botonSiguiente.style.display = "block";
|
|
}
|
|
|
|
botonSiguiente.addEventListener("click", () => {
|
|
indice++;
|
|
|
|
if (indice < preguntas.length) {
|
|
mostrarPregunta();
|
|
botonSiguiente.style.display = "none";
|
|
} else {
|
|
mostrarResultado();
|
|
}
|
|
});
|
|
|
|
function mostrarResultado() {
|
|
quiz.innerHTML = `
|
|
<h2>Puntaje: ${puntaje} de ${preguntas.length}</h2>
|
|
<button id="reiniciar">Reiniciar</button>
|
|
`;
|
|
|
|
botonSiguiente.style.display = "none";
|
|
|
|
document
|
|
.querySelector("#reiniciar")
|
|
.addEventListener("click", () => {
|
|
indice = 0;
|
|
puntaje = 0;
|
|
mostrarPregunta();
|
|
});
|
|
}
|
|
|
|
mostrarPregunta(); |