diff --git a/js/quiz.js b/js/quiz.js index 6ef5326..acd1ff3 100644 --- a/js/quiz.js +++ b/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 = `
+

Frage ${aktuelle + 1} von ${fragen.length} | Punkte: ${punkte}

${f.frage}

${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 = ` +
+

Du hast ${punkte} von ${fragen.length} richtig!

+

Punkte: ${punkte}

+
+ `; + } + }, 800); }); }); -}); \ No newline at end of file +} \ No newline at end of file