Quiz: 3. Alle 3 Fragen + Punktezähler

js/quiz.js

@@ -7,15 +7,41 @@ const fragen = [
       "Eine Mal-Technik mit Wasserfarben"
     ],
     richtig: 1
+  },
+  {
+    frage: "Welche Farbe erzeugt die Cyanotypie typischerweise?",
+    antworten: [
+      "Rot",
+      "Schwarz",
+      "Blau"
+    ],
+    richtig: 2
+  },
+  {
+    frage: "Was wird bei der Cyanotypie zur Belichtung benötigt?",
+    antworten: [
+      "Eine Dunkelkammer",
+      "UV-Licht / Sonnenlicht",
+      "Ein Drucker"
+    ],
+    richtig: 1
   }
 ];
 
-document.addEventListener("DOMContentLoaded", () => {
-  const quiz = document.getElementById("quiz");
+let aktuelle = 0;
+let punkte = 0;
 
-  const f = fragen[0];
-  quiz.innerHTML = `
+document.addEventListener("DOMContentLoaded", () => {
+  zeigeFrage();
+});
+
+function zeigeFrage() {
+  const quiz = document.getElementById("quiz");
+  const f = fragen[aktuelle];
+
+quiz.innerHTML = `
     <div class="quiz-frage">
+      <p class="frage-nummer">Frage ${aktuelle + 1} von ${fragen.length} | Punkte: ${punkte}</p>
       <p class="frage-text">${f.frage}</p>
       <div class="antworten">
         ${f.antworten.map((a, i) => `
@@ -34,12 +60,27 @@ document.addEventListener("DOMContentLoaded", () => {
       if (gewählt === f.richtig) {
         feedback.textContent = "✅ Richtig!";
         feedback.style.color = "#16a34a";
+        punkte++;
       } else {
         feedback.textContent = "❌ Falsch!";
         feedback.style.color = "#ef4444";
       }
 
       document.querySelectorAll(".quiz-btn").forEach(b => b.disabled = true);
+
+      setTimeout(() => {
+        aktuelle++;
+        if (aktuelle < fragen.length) {
+          zeigeFrage();
+        } else {
+        quiz.innerHTML = `
+          <div class="quiz-ende">
+            <p>Du hast ${punkte} von ${fragen.length} richtig!</p>
+            <p>Punkte: ${punkte}</p>
+          </div>
+        `;
+        }
+      }, 800);
     });
   });
-});
+}