Möchtest du dein Wissen in einem Quiz über antike Zivilisationen testen oder anderen die Möglichkeit geben, ihres zu überprüfen? Mit diesem einfachen Programm kannst du ein interaktives Quiz erstellen, das sofortige Ergebnisse anzeigt. Es ist perfekt für Lehrer, Geschichtsinteressierte oder einfach nur für den Spaß an der Freude!
Quiz über Antike Zivilisationen
Ergebnis
Du hast von 20 Fragen richtig beantwortet.
Was das Quiz über Antike Zivilisationen macht
Dieses Programm erstellt ein 20-Fragen-Quiz über antike Zivilisationen. Die Fragen decken verschiedene Kulturen und historische Ereignisse ab, von den Pharaonen des alten Ägyptens bis zu den Kaisern des Römischen Reiches. Nachdem der Benutzer alle Fragen beantwortet hat, werden die Ergebnisse sofort angezeigt.
Technische Details
Das Programm besteht aus reinem HTML und JavaScript. Es verwendet grundlegendes CSS für die Gestaltung, um das Layout ansprechend und benutzerfreundlich zu gestalten. Hier sind die wichtigsten Bestandteile des Programms:
- HTML-Struktur: Das HTML-Dokument enthält das Grundgerüst des Quizzes. Jede Frage ist in einem eigenen Abschnitt (
<div class="question">) mit mehreren Antwortmöglichkeiten (<ul class="answers">) organisiert. - CSS-Styling: Das eingebettete CSS sorgt für eine saubere und moderne Benutzeroberfläche. Es definiert das Layout, die Schriftarten und die Stile für Buttons und andere Elemente.
- JavaScript-Logik: Ein JavaScript-Block am Ende des Dokuments berechnet die Punktzahl des Benutzers, indem es die ausgewählten Antworten mit einem Array von korrekten Antworten vergleicht. Sobald der Benutzer auf den Button „Ergebnisse anzeigen“ klickt, wird die Punktzahl berechnet und das Ergebnis angezeigt.
So funktioniert das Quiz über Antike Zivilisationen
Der Benutzer wählt die Antworten auf die Fragen aus und klickt dann auf den Button „Ergebnisse anzeigen“. Das JavaScript-Programm durchsucht das Formular, vergleicht die Antworten mit den korrekten Antworten und berechnet die Gesamtpunktzahl. Diese Punktzahl wird dann auf dem Bildschirm angezeigt.
Beispiel: HTML- und JavaScript-Code
Hier ist der vollständige Code für das Quiz:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz über Antike Zivilisationen</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
}
.question {
margin-bottom: 20px;
}
.answers {
list-style-type: none;
padding: 0;
}
.answers li {
margin-bottom: 10px;
}
button {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
display: none;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Quiz</h1>
<form id="quizForm">
<!-- Fragen -->
<!-- Beispiel für Frage 1 -->
<div class="question">
<p>1. Welche Stadt war die Hauptstadt des antiken Ägyptens?</p>
<ul class="answers">
<li><label><input type="radio" name="q1" value="0"> Theben</label></li>
<li><label><input type="radio" name="q1" value="1"> Memphis</label></li>
<li><label><input type="radio" name="q1" value="0"> Alexandria</label></li>
</ul>
</div>
<!-- Weitere Fragen hier... -->
<button type="button" onclick="calculateScore()">Ergebnisse anzeigen</button>
</form>
<div class="result" id="result">
<h2>Ergebnis</h2>
<p>Du hast <span id="score"></span> von 20 Fragen richtig beantwortet.</p>
</div>
</div>
<script>
function calculateScore() {
const form = document.getElementById('quizForm');
const resultDiv = document.getElementById('result');
const scoreSpan = document.getElementById('score');
let score = 0;
const correctAnswers = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
correctAnswers.forEach((value, index) => {
const questionIndex = index + 1;
const userAnswer = form[`q${questionIndex}`].value;
if (userAnswer == value) {
score++;
}
});
scoreSpan.textContent = score;
resultDiv.style.display = 'block';
}
</script>
</body>
</html>Fazit
Mit diesem einfachen HTML- und JavaScript-Programm kannst du ein unterhaltsames und lehrreiches Quiz erstellen. Es ist eine großartige Möglichkeit, dein Wissen zu testen oder anderen zu helfen, mehr über die faszinierende Geschichte der alten Welt zu lernen. Viel Spaß beim Programmieren und beim Quizzen!