<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2, h3 {
text-align: center;
}
.question {
margin: 20px 0;
}
.options button {
display: block;
width: 100%;
padding: 10px;
margin: 5px 0;
border: none;
border-radius: 5px;
background-color: #ddd;
cursor: pointer;
}
.options button:hover {
background-color: #ccc;
}
.progress-bar {
width: 100%;
background-color: #ddd;
height: 20px;
border-radius: 10px;
margin-top: 20px;
}
.progress {
height: 100%;
background-color: #4caf50;
width: 0;
border-radius: 10px;
}
.result {
text-align: center;
}
.reward img {
max-width: 200px;
}
.ranking {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div id="quiz"></div>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
</div>
<script>
const questions = [
{ question: "Wie heißt der weltweit bekannteste Motocross-Weltverband?", options: ["FIM", "DMSB", "AMA", "ADAC"], answer: 0 },
{ question: "Welche Klasse ist in der Motocross-WM die höchste?", options: ["MX1", "MXGP", "MX2", "MXOpen"], answer: 1 },
{ question: "Was bedeutet \"Holeshot\" im Motocross?", options: ["Ein Sprung über das Ziel", "Schnellster Fahrer in der ersten Kurve nach dem Start", "Ein Defekt am Motorrad", "Das letzte Rennen"], answer: 1 },
{ question: "Wie viele Räder hat ein typisches Motocross-Motorrad?", options: ["2", "3", "4", "1"], answer: 0 },
{ question: "Welche dieser Marken stellt Motocross-Motorräder her?", options: ["Ferrari", "KTM", "Lamborghini", "Bugatti"], answer: 1 },
{ question: "Was bedeutet \"Enduro\" im Vergleich zu \"Motocross\"?", options: ["Straßenrennen", "Längeres, geländebasiertes Fahren mit Zeitnahme", "Nur auf Sand gefahren", "Rennen auf Eis"], answer: 1 },
{ question: "Wie nennt man die Bodenwellen vor einem Sprung?", options: ["Whoops", "Cliffs", "Drops", "Ramps"], answer: 0 },
{ question: "Was ist ein Scrub?", options: ["Ein Reinigungsmittel", "Eine Fahrtechnik zum Abflachen des Sprungs", "Ein Fahrschüler", "Eine spezielle Brille"], answer: 1 },
{ question: "Wie oft muss ein Motocrossfahrer bei WM-Rennen tanken?", options: ["Nie – Tank reicht meist für das Rennen", "1x", "2x", "Nach jedem Sprung"], answer: 0 },
{ question: "Wie heißt der berühmte Motocrossfahrer mit dem Spitznamen \"The GOAT\"?", options: ["Travis Pastrana", "Ricky Carmichael", "Ken Roczen", "Tony Cairoli"], answer: 1 },
{ question: "Was ist ein \"Whip\"?", options: ["Eine Bewegung des Hinterrads in der Luft", "Eine Reifenart", "Eine Starttechnik", "Ein Auspuff"], answer: 0 },
{ question: "Wie viele Gänge haben typische Motocross-Motorräder?", options: ["2", "3", "5–6", "8"], answer: 2 },
{ question: "Welche dieser Disziplinen ist KEINE Motocross-Disziplin?", options: ["Freestyle MX", "Supermoto", "Downhill", "Sidecarcross"], answer: 2 },
{ question: "Welche Funktion hat ein Lenkungsdämpfer beim Motocross?", options: ["Beschleunigung erhöhen", "Sturz verhindern", "Vibrationen und Lenkerschläge dämpfen", "Federung steuern"], answer: 2 },
{ question: "Welche deutsche Motocross-Strecke ist besonders bekannt?", options: ["Hockenheimring", "Teutschenthal", "Sachsenring", "Nürburgring"], answer: 1 },
{ question: "Was bedeutet eine gelbe Flagge im Motocross?", options: ["Rennen gestoppt", "Gefahr auf der Strecke – Überholen verboten", "Boxenstopp", "Disqualifikation"], answer: 1 },
{ question: "Was signalisiert eine rote Flagge?", options: ["Sprung kommt", "Rennen sofort abgebrochen", "Überholen erlaubt", "Ein neues Rennen beginnt"], answer: 1 },
{ question: "Wofür steht eine grüne Flagge?", options: ["Unfall", "Startfreigabe oder Strecke frei", "Regen", "Rennen vorbei"], answer: 1 },
{ question: "Was zeigt eine blaue Flagge an?", options: ["Strecke rutschig", "Ein schnellerer Fahrer nähert sich – Platz machen", "Reifenwechsel", "Zuschauer auf der Strecke"], answer: 1 },
{ question: "Was bedeutet eine schwarz-weiße karierte Flagge?", options: ["Start", "Boxenstopp", "Rennende", "Neue Runde beginnt"], answer: 2 },
{ question: "Was ist eine häufige Maßnahme zur Vermeidung von Ölverschmutzung?", options: ["Einsatz von Plastikreifen", "Verwendung von umweltfreundlichen Ölbindematten", "Tanken im Fahrerlager auf Rasen", "Kein Ölwechsel nötig"], answer: 1 },
{ question: "Wie kann Lärmbelästigung durch Motocross reduziert werden?", options: ["Durch laute Musik", "Durch spezielle Auspuffanlagen mit dB-Killer", "Fahren nur bei Regen", "Keine Zuschauer"], answer: 1 },
{ question: "Warum ist das Waschen der Motorräder auf befestigten Plätzen vorgeschrieben?", options: ["Damit es schneller geht", "Aus Spaß", "Um Erd- und Ölreste nicht ins Grundwasser zu leiten", "Weil es besser aussieht"], answer: 2 },
{ question: "Wie kann man Bodenverdichtung durch Zuschauer vermeiden?", options: ["Zuschauer über die Strecke laufen lassen", "Begrenzte Zuschauerbereiche mit Absperrungen", "Zäune entfernen", "Alles offen lassen"], answer: 1 },
{ question: "Welcher Treibstoff wird zunehmend als umweltschonendere Alternative eingesetzt?", options: ["Diesel", "Benzin mit Bleizusatz", "E-Fuels oder Bio-Kraftstoffe", "Flugbenzin"], answer: 2 }
];
let currentQuestion = 0;
let score = 0;
function showQuestion() {
const quizDiv = document.getElementById("quiz");
quizDiv.innerHTML = "";
if (currentQuestion < questions.length) {
const q = questions[currentQuestion];
const questionDiv = document.createElement("div");
questionDiv.classList.add("question");
questionDiv.innerHTML = `<h3>Frage ${currentQuestion + 1} von ${questions.length}</h3><p>${q.question}</p>`;
const optionsDiv = document.createElement("div");
optionsDiv.classList.add("options");
q.options.forEach((opt, i) => {
const btn = document.createElement("button");
btn.textContent = opt;
btn.onclick = () => checkAnswer(i);
optionsDiv.appendChild(btn);
});
quizDiv.appendChild(questionDiv);
quizDiv.appendChild(optionsDiv);
document.getElementById("progress").style.width = ((currentQuestion / questions.length) * 100) + "%";
} else {
showResult();
}
}
function checkAnswer(selected) {
if (selected === questions[currentQuestion].answer) {
score++;
}
currentQuestion++;
showQuestion();
}
function showResult() {
const quizDiv = document.getElementById("quiz");
quizDiv.innerHTML = `
<div class="result">
<h2>Quiz beendet!</h2>
<p>Du hast ${score} von ${questions.length} Punkten erreicht.</p>
<div class="reward">
${score === questions.length ? "<p>🏆 Perfekt! Du bist ein MX-Profi!</p>" :
score >= 20 ? "<p>👏 Super Leistung!</p>" :
score >= 10 ? "<p>👍 Ganz gut, aber es geht besser.</p>" :
"<p>💡 Üben lohnt sich!</p>"}
</div>
<button onclick="restartQuiz()">Erneut versuchen</button>
</div>
`;
document.getElementById("progress").style.width = "100%";
}
function restartQuiz() {
currentQuestion = 0;
score = 0;
showQuestion();
}
window.onload = showQuestion;
</script>
</body>
</html>