const quizData = [
  {
    question: "Wie viele Tage hat der Februar in einem Schaltjahr?",
    answers: ["28", "29", "30"],
    correct: 1,
  },
  {
    question: "Was bedeutet EIS in der Kursbezeichnung?",
    answers: ["Einführung in Informationstechnologien", "Entwicklung interaktiver Systeme", "Elektronische Informationssysteme"],
    correct: 2,
  },
  {
    question: "Welches HTML-Element wird für einen Link verwendet?",
    answers: ["<span>", "<a>", "<button>"],
    correct: 1,
  },
];

let currentQuestion = 0;
let score = 0;

const questionEl = document.getElementById("quiz-question");
const answersEl = document.getElementById("quiz-answers");
const feedbackEl = document.getElementById("quiz-feedback");
const nextButton = document.getElementById("next-button");
const scoreEl = document.getElementById("quiz-score");
const progressEl = document.getElementById("quiz-progress");

function loadQuestion() {
  const current = quizData[currentQuestion];
  progressEl.textContent = `Frage ${currentQuestion + 1} von ${quizData.length}`;
  questionEl.textContent = current.question;
  feedbackEl.textContent = "";
  feedbackEl.className = "feedback";
  nextButton.disabled = true;
  nextButton.textContent = currentQuestion < quizData.length - 1 ? "Nächste Frage" : "Auswertung anzeigen";

  answersEl.innerHTML = "";
  current.answers.forEach((answerText, index) => {
    const button = document.createElement("button");
    button.type = "button";
    button.className = "answer-button";
    button.textContent = answerText;
    button.addEventListener("click", () => handleAnswer(index));
    answersEl.appendChild(button);
  });
}

function handleAnswer(selectedIndex) {
  const current = quizData[currentQuestion];
  const buttons = [...answersEl.querySelectorAll("button")];
  buttons.forEach((button, index) => {
    button.disabled = true;
    if (index === current.correct) {
      button.classList.add("correct-answer");
    }
    if (index === selectedIndex && index !== current.correct) {
      button.classList.add("wrong-answer");
    }
  });

  if (selectedIndex === current.correct) {
    score += 1;
    feedbackEl.textContent = "Richtig! Gut gemacht.";
    feedbackEl.classList.add("correct");
  } else {
    feedbackEl.textContent = `Falsch. Die richtige Antwort ist: ${current.answers[current.correct]}.`;
    feedbackEl.classList.add("wrong");
  }

  scoreEl.textContent = `Punkte: ${score}/${quizData.length}`;
  nextButton.disabled = false;
}

function showResult() {
  progressEl.textContent = "Quiz beendet";
  questionEl.textContent = `Du hast ${score} von ${quizData.length} Fragen richtig beantwortet.`;
  answersEl.innerHTML = "";
  nextButton.style.display = "none";

  const finalText = document.createElement("p");
  finalText.className = "quiz-final";
  if (score === quizData.length) {
    finalText.textContent = "Perfekt! Du hast alle Fragen richtig beantwortet.";
  } else if (score >= quizData.length - 1) {
    finalText.textContent = "Sehr gut! Nur eine Frage wurde nicht ganz korrekt beantwortet.";
  } else {
    finalText.textContent = "Gut gemacht! Du kannst das Quiz später wiederholen, um noch mehr zu lernen.";
  }
  feedbackEl.textContent = "";
  feedbackEl.className = "feedback";
  answersEl.appendChild(finalText);
}

nextButton.addEventListener("click", () => {
  currentQuestion += 1;
  if (currentQuestion < quizData.length) {
    loadQuestion();
  } else {
    showResult();
  }
});

loadQuestion();