104 lines
3.4 KiB
JavaScript
104 lines
3.4 KiB
JavaScript
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();
|