45 lines
No EOL
1.2 KiB
JavaScript
45 lines
No EOL
1.2 KiB
JavaScript
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);
|
|
});
|
|
});
|
|
}); |