Quiz: 2. Erste Frage funktioniert mit Feedback

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; }
+.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;
+}

js/quiz.js

@@ -1 +1,45 @@
-console.log("Quiz lädt");
+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);
+    });
+  });
+});