clase-10-ejercicios-de-repaso/ejercicio9/ejercicio9.js

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();