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