ejercicio 9: quiz de opcion multiple

2026-05-28 14:00:44 -03:00
parent 909acdf862
commit 9233c5da7c
2 changed files with 105 additions and 1 deletions
--- a/ejercicio9/ejercicio9.js
+++ b/ejercicio9/ejercicio9.js
@@ -1 +1,99 @@
-// Agregar aquí el código 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();
--- a/ejercicio9/index.html
+++ b/ejercicio9/index.html
@@ -8,7 +8,13 @@
    </head>
    <body>
        <h1>Ejercicio 9</h1>
+<h1>Quiz</h1>

+<div id="quiz"></div>
+
+<button id="siguiente" style="display:none">
+  Siguiente
+</button>
        <script src="ejercicio9.js"></script>
    </body>
 </html>