From 36aa124e0676cf426f683f83025636c4739a0e78 Mon Sep 17 00:00:00 2001
From: Carina_Hirschle <carina.hirschle@stud.ph-weingarten.de>
Date: Wed, 3 Jun 2026 15:46:35 +0200
Subject: [PATCH] Quiz: 2. Erste Frage funktioniert mit Feedback

---
 css/style.css | 49 ++++++++++++++++++++++++++++++++++++++++++++++++-
 js/quiz.js    | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 93 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index 0ad4d51..39a3830 100644
--- a/css/style.css
+++ b/css/style.css
@@ -363,4 +363,51 @@ body.dark .ergebnis-box p {
 /* Begrüßung nach Tageszeit */
 .morgen { color: #d97706; }
 .tag    { color: #16a34a; }
-.abend  { color: #4338ca; }
\ No newline at end of file
+.abend  { color: #4338ca; }
+
+
+
+/* Quiz */
+.quiz-frage {
+  margin-top: 2rem;
+  max-width: 600px;
+}
+
+.frage-text {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #003366;
+  margin-bottom: 1rem;
+}
+
+.antworten {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.quiz-btn {
+  padding: 10px 20px;
+  background: #f0f4ff;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  font-size: 1rem;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.2s ease;
+}
+
+.quiz-btn:hover:not(:disabled) {
+  background: #dbeafe;
+}
+
+.quiz-btn:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.feedback {
+  margin-top: 1rem;
+  font-weight: 600;
+  font-size: 1.1rem;
+}
\ No newline at end of file
diff --git a/js/quiz.js b/js/quiz.js
index 5af33ac..6ef5326 100644
--- a/js/quiz.js
+++ b/js/quiz.js
@@ -1 +1,45 @@
-console.log("Quiz lädt");
\ No newline at end of file
+const fragen = [
+  {
+    frage: "Was ist Cyanotypie?",
+    antworten: [
+      "Ein digitales Bildbearbeitungsverfahren",
+      "Ein historisches fotografisches Druckverfahren",
+      "Eine Mal-Technik mit Wasserfarben"
+    ],
+    richtig: 1
+  }
+];
+
+document.addEventListener("DOMContentLoaded", () => {
+  const quiz = document.getElementById("quiz");
+
+  const f = fragen[0];
+  quiz.innerHTML = `
+    <div class="quiz-frage">
+      <p class="frage-text">${f.frage}</p>
+      <div class="antworten">
+        ${f.antworten.map((a, i) => `
+          <button class="quiz-btn" data-index="${i}">${a}</button>
+        `).join("")}
+      </div>
+      <p id="feedback" class="feedback"></p>
+    </div>
+  `;
+
+  document.querySelectorAll(".quiz-btn").forEach(btn => {
+    btn.addEventListener("click", (e) => {
+      const gewählt = Number(e.target.dataset.index);
+      const feedback = document.getElementById("feedback");
+
+      if (gewählt === f.richtig) {
+        feedback.textContent = "✅ Richtig!";
+        feedback.style.color = "#16a34a";
+      } else {
+        feedback.textContent = "❌ Falsch!";
+        feedback.style.color = "#ef4444";
+      }
+
+      document.querySelectorAll(".quiz-btn").forEach(b => b.disabled = true);
+    });
+  });
+});
\ No newline at end of file