Solución ejercicio 9

ejercicio9/ejercicio9.js

@@ -1 +1,133 @@
-// Agregar aquí el código javascript
+const preguntas = [
+  {
+    pregunta: "¿Cuál es la diferencia entre let y const?",
+    opciones: [
+      "No hay diferencia, son equivalentes",
+      "let permite reasignar el valor, const no",
+      "Depende del tipo de datos",
+      "let solo funciona dentro de funciones"
+    ],
+    correcta: 1
+  },
+  {
+    pregunta: "¿Qué retorna querySelector si no encuentra ningún elemento?",
+    opciones: ["undefined", "false", "null", "0"],
+    correcta: 2
+  },
+  {
+    pregunta: "¿Qué hace el método filter?",
+    opciones: [
+      "Modifica los elementos del array original",
+      "Retorna el primer elemento que cumple la condición",
+      "Retorna un nuevo array con los elementos que cumplen la condición",
+      "Elimina elementos duplicados del array"
+    ],
+    correcta: 2
+  },
+  {
+    pregunta: "¿Cuál es el operador de igualdad estricta en JavaScript?",
+    opciones: ["=", "==", "===", "!="],
+    correcta: 2
+  },
+  {
+    pregunta: "¿Para qué sirve event.preventDefault()?",
+    opciones: [
+      "Detiene la propagación del evento hacia elementos padre",
+      "Evita el comportamiento por defecto del navegador",
+      "Elimina el event listener del elemento",
+      "Pausa la ejecución del código hasta que el evento termine"
+    ],
+    correcta: 1
+  }
+];
+
+let indiceActual = 0;
+let puntaje = 0;
+
+const pantalla      = document.querySelector("#pantalla-quiz");
+const resultadoEl   = document.querySelector("#resultado");
+const preguntaEl    = document.querySelector("#pregunta");
+const opcionesEl    = document.querySelector("#opciones");
+const feedbackEl    = document.querySelector("#feedback");
+const btnSiguiente  = document.querySelector("#siguiente");
+const progresoEl    = document.querySelector("#progreso");
+const progressFill  = document.querySelector("#progress-fill");
+const puntajeNumEl  = document.querySelector("#puntaje-num");
+const resultadoMsg  = document.querySelector("#resultado-msg");
+const btnReiniciar  = document.querySelector("#reiniciar");
+
+function mensajeFinal(p, total) {
+  if (p === total) return "¡Perfecto! Todo bien.";
+  if (p >= total * 0.8) return "¡Muy bien!";
+  if (p >= total * 0.6) return "Bien, pero hay margen para mejorar.";
+  return "Vale la pena repasar los temas.";
+}
+
+function mostrarPregunta() {
+  const actual = preguntas[indiceActual];
+
+  // Actualizamos el encabezado y la barra de progreso.
+  progresoEl.textContent = `${indiceActual + 1} / ${preguntas.length}`;
+  progressFill.style.width = `${(indiceActual / preguntas.length) * 100}%`;
+
+  preguntaEl.textContent = actual.pregunta;
+  opcionesEl.innerHTML = "";
+  feedbackEl.textContent = "";
+  btnSiguiente.style.display = "none";
+
+  for (let i = 0; i < actual.opciones.length; i++) {
+    const boton = document.createElement("button");
+    boton.className = "opcion";
+    boton.textContent = actual.opciones[i];
+    boton.addEventListener("click", () => responder(i));
+    opcionesEl.appendChild(boton);
+  }
+}
+
+function responder(indiceRespuesta) {
+  const actual  = preguntas[indiceActual];
+  const botones = opcionesEl.querySelectorAll(".opcion");
+
+  // Deshabilitamos todos los botones para que no se pueda responder dos veces.
+  for (const boton of botones) {
+    boton.disabled = true;
+  }
+
+  if (indiceRespuesta === actual.correcta) {
+    botones[indiceRespuesta].classList.add("correcta");
+    feedbackEl.textContent = "¡Correcto!";
+    puntaje++;
+  } else {
+    botones[indiceRespuesta].classList.add("incorrecta");
+    botones[actual.correcta].classList.add("correcta");
+    feedbackEl.textContent = `Incorrecto. La correcta era: "${actual.opciones[actual.correcta]}"`;
+  }
+
+  btnSiguiente.style.display = "inline-block";
+}
+
+btnSiguiente.addEventListener("click", () => {
+  indiceActual++;
+
+  if (indiceActual < preguntas.length) {
+    mostrarPregunta();
+  } else {
+    // Actualizamos la barra al 100% antes de mostrar el resultado.
+    progressFill.style.width = "100%";
+
+    pantalla.style.display    = "none";
+    resultadoEl.style.display = "block";
+    puntajeNumEl.textContent  = `${puntaje} / ${preguntas.length}`;
+    resultadoMsg.textContent  = mensajeFinal(puntaje, preguntas.length);
+  }
+});
+
+btnReiniciar.addEventListener("click", () => {
+  indiceActual = 0;
+  puntaje      = 0;
+  resultadoEl.style.display = "none";
+  pantalla.style.display    = "block";
+  mostrarPregunta();
+});
+
+mostrarPregunta();