<!DOCTYPE html>
<html lang=“de“>
<head>
<meta charset=“UTF-8″>
<title>Quiz: Römische Republik</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.question { margin-bottom: 20px; }
.answers button { display: block; margin: 5px 0; }
.correct { color: green; }
.incorrect { color: red; }
</style>
</head>
<body>
<h1>Quiz: Römische Republik</h1>
<div id=“quiz-container“>
<div class=“question“ id=“question“>Frage wird geladen…</div>
<div class=“answers“ id=“answers“></div>
<div id=“feedback“></div>
<button id=“next-button“ style=“display:none;“>Nächste Frage</button>
</div>
<script>
const quiz = [
{
frage: „Wann begann die Krise der Römischen Republik?“,
antworten: [
{ text: „509 v. Chr.“, korrekt: false },
{ text: „44 v. Chr.“, korrekt: false },
{ text: „146 v. Chr.“, korrekt: true },
{ text: „27 v. Chr.“, korrekt: false }
]
},
// Weitere Fragen hier hinzufügen…
];
let aktuelleFrage = 0;
function zeigeFrage() {
const frageElement = document.getElementById(‚question‘);
const antwortenElement = document.getElementById(‚answers‘);
const feedbackElement = document.getElementById(‚feedback‘);
const nextButton = document.getElementById(’next-button‘);
frageElement.textContent = quiz[aktuelleFrage].frage;
antwortenElement.innerHTML = “;
feedbackElement.textContent = “;
nextButton.style.display = ’none‘;
quiz[aktuelleFrage].antworten.forEach((antwort, index) => {
const button = document.createElement(‚button‘);
button.textContent = antwort.text;
button.addEventListener(‚click‘, () => {
if (antwort.korrekt) {
feedbackElement.textContent = ‚Richtig!‘;
feedbackElement.className = ‚correct‘;
} else {
feedbackElement.textContent = ‚Falsch!‘;
feedbackElement.className = ‚incorrect‘;
}
nextButton.style.display = ‚block‘;
});
antwortenElement.appendChild(button);
});
}
document.getElementById(’next-button‘).addEventListener(‚click‘, () => {
aktuelleFrage++;
if (aktuelleFrage < quiz.length) {
zeigeFrage();
} else {
document.getElementById(‚quiz-container‘).innerHTML = ‚<h2>Quiz beendet!</h2>‘;
}
});
zeigeFrage();
</script>
</body>
</html>
