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

ejercicio9/estilo.css

@@ -1,2 +1,168 @@
-/* Agregar el código CSS necesario para el ejercicio */
+/* Hoja de estilo realizada con IA */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+body {
+    font-family: system-ui, sans-serif;
+    background: #f5f4f0;
+    color: #1a1a1a;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.card {
+    background: #fff;
+    border: 0.5px solid #ddd;
+    border-radius: 16px;
+    padding: 2rem;
+    width: 100%;
+    max-width: 520px;
+}
+
+/* ── Encabezado ── */
+
+.quiz-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+}
+
+.quiz-title {
+    font-size: 0.7rem;
+    font-weight: 500;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.quiz-progress {
+    font-size: 0.75rem;
+    color: #aaa;
+}
+
+/* ── Barra de progreso ── */
+
+.progress-bar {
+    height: 4px;
+    background: #eee;
+    border-radius: 2px;
+    margin-bottom: 2rem;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: #1a1a1a;
+    border-radius: 2px;
+    transition: width 0.3s ease;
+}
+
+/* ── Pregunta ── */
+
+#pregunta {
+    font-size: 1.05rem;
+    font-weight: 500;
+    line-height: 1.5;
+    margin-bottom: 1.5rem;
+    min-height: 3rem;
+}
+
+/* ── Opciones ── */
+
+#opciones {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 1.5rem;
+}
+
+.opcion {
+    width: 100%;
+    text-align: left;
+    padding: 12px 16px;
+    background: #f5f4f0;
+    border: 0.5px solid #ddd;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    color: #1a1a1a;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+}
+
+.opcion:hover:not(:disabled) {
+    background: #edecea;
+    border-color: #bbb;
+}
+
+.opcion:disabled { cursor: default; }
+
+.opcion.correcta {
+    background: #eaf3de;
+    border-color: #639922;
+    color: #3b6d11;
+}
+
+.opcion.incorrecta {
+    background: #fcebeb;
+    border-color: #e24b4a;
+    color: #a32d2d;
+}
+
+/* ── Feedback ── */
+
+#feedback {
+    font-size: 0.8rem;
+    min-height: 1.2rem;
+    color: #555;
+    margin-bottom: 1.25rem;
+}
+
+/* ── Botones de acción ── */
+
+.btn {
+    padding: 10px 20px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: 8px;
+    border: 0.5px solid #ccc;
+    background: #1a1a1a;
+    color: #fff;
+    cursor: pointer;
+    transition: opacity 0.15s;
+}
+
+.btn:hover { opacity: 0.85; }
+
+.btn-secondary {
+    background: transparent;
+    color: #1a1a1a;
+}
+
+/* ── Pantalla de resultado ── */
+
+#resultado {
+    text-align: center;
+    padding: 1rem 0;
+}
+
+.resultado-score {
+    font-size: 3rem;
+    font-weight: 500;
+    line-height: 1;
+    margin-bottom: 0.5rem;
+}
+
+.resultado-label {
+    font-size: 0.875rem;
+    color: #888;
+    margin-bottom: 0.5rem;
+}
+
+.resultado-msg {
+    font-size: 1rem;
+    font-weight: 500;
+    margin-bottom: 2rem;
+}

ejercicio9/index.html

@@ -7,7 +7,36 @@
         <link rel="stylesheet" href="estilo.css">
     </head>
     <body>
-        <h1>Ejercicio 9</h1>
+
+        <div class="card">
+
+            <div id="pantalla-quiz">
+                <div class="quiz-header">
+                    <span class="quiz-title">Ejercicio 9 - Quiz de JavaScript</span>
+                    <span class="quiz-progress" id="progreso">1 / 5</span>
+                </div>
+
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
+                </div>
+
+                <p id="pregunta"></p>
+
+                <div id="opciones"></div>
+
+                <p id="feedback"></p>
+
+                <button class="btn" id="siguiente" style="display:none">Siguiente →</button>
+            </div>
+
+            <div id="resultado" style="display:none">
+                <p class="resultado-score" id="puntaje-num"></p>
+                <p class="resultado-label">respuestas correctas</p>
+                <p class="resultado-msg" id="resultado-msg"></p>
+                <button class="btn btn-secondary" id="reiniciar">Reiniciar quiz</button>
+            </div>
+
+        </div>
 
         <script src="ejercicio9.js"></script>
     </body>