const fragen = [
  {
    frage: "Was ist Cyanotypie?",
    antworten: [
      "Ein digitales Bildbearbeitungsverfahren",
      "Ein historisches fotografisches Druckverfahren",
      "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
  }
];

let aktuelle = 0;
let punkte = 0;

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) => `
          <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";
        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);
    });
  });
}