Überschrift

Ein Text! Sie kö

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frille Jahresrückblick 2025</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.bg-frille { background-color: #f3f4f6; }
.card { background: white; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
</style>
</head>
<body class="bg-frille min-h-screen p-4 pb-20">
<div id="app" class="max-w-2xl mx-auto">

<header class="text-center py-8">
<h1 class="text-3xl font-bold text-blue-800">Frille Jahresquiz 2025 ?</h1>
<p class="text-gray-600 mt-2">Testet euer Wissen über unser Dorfjahr!</p>
<div id="solution-box" class="mt-4 p-3 bg-blue-100 rounded-lg hidden">
<p class="text-sm font-semibold text-blue-800 italic">Lösungssatz-Fortschritt:</p>
<div id="solution-display" class="text-xl tracking-widest font-mono font-bold text-blue-900 mt-1"></div>
</div>
</header>

<div id="quiz-container" class="card p-6 mb-6">
<div id="question-header" class="flex justify-between items-center mb-4">
<span id="progress" class="text-sm font-semibold text-gray-500">Frage 1 von 24</span>
<span id="score" class="text-sm font-semibold text-green-600">Punkte: 0</span>
</div>

<h2 id="question-text" class="text-xl font-bold text-gray-800 mb-6">Lade Quiz...</h2>

<div id="options" class="space-y-3">

</div>

<div id="feedback" class="mt-6 p-4 rounded-lg hidden"></div>

<button id="next-btn" class="w-full mt-6 bg-blue-600 text-white font-bold py-3 rounded-xl hidden hover:bg-blue-700 transition">
Nächste Frage
</button>
</div>

<div id="result-screen" class="card p-8 text-center hidden">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Geschafft! ?</h2>
<p id="final-score" class="text-xl mb-6"></p>
<div class="bg-yellow-50 p-6 rounded-xl border-2 border-yellow-200 mb-6">
<p class="font-bold text-yellow-800 mb-2">Dein gesammelter Lösungscode:</p>
<p id="final-solution" class="text-2xl font-mono tracking-widest font-black text-yellow-900"></p>
<p class="text-sm text-yellow-700 mt-4 italic">Tipp: Lies den Satz mal rückwärts!</p>
</div>
<button onclick="location.reload()" class="text-blue-600 font-semibold underline">Quiz neu starten</button>
</div>
</div>

let currentQuestion = 0;
let score = 0;
let solution = [];

function selectOption(index) {
const q = quizData[currentQuestion];
const options = document.getElementById('options').children;
const feedback = document.getElementById('feedback');

// Disable all buttons
for (let btn of options) btn.disabled = true;

if (index === q.c) {
options[index].classList.add('bg-green-100', 'border-green-500');
feedback.innerHTML = `<p class='text-green-700 font-bold'>Richtig! Buchstabe gesammelt.</p>`;
score++;
document.getElementById('score').innerText = `Punkte: ${score}`;
// Extract first letter for solution
solution.push(q.a[index].charAt(0));
} else {
options[index].classList.add('bg-red-100', 'border-red-500');
options[q.c].classList.add('bg-green-100', 'border-green-500');
feedback.innerHTML = `<p class='text-red-700 font-bold'>Leider falsch!</p><p class='text-sm text-gray-600'>Hinweis: ${q.h}</p>`;
solution.push("_");
}

feedback.classList.remove('hidden');
document.getElementById('next-btn').classList.remove('hidden');
updateSolutionDisplay();
}

function updateSolutionDisplay() {
const box = document.getElementById('solution-box');
const display = document.getElementById('solution-display');
box.classList.remove('hidden');
display.innerText = solution.join("");
}

document.getElementById('next-btn').onclick = () => {
currentQuestion++;
if (currentQuestion < quizData.length) {
loadQuestion();
} else {
showResults();
}
};

window.onload = loadQuestion;
</script>
</body>
</html>

nnen ihn mit Inhalt füllen, verschieben, kopieren oder löschen.

Ein Text! Sie können ihn mit Inhalt füllen, verschieben, kopieren oder löschen.

Unterhalten Sie Ihren Besucher! Machen Sie es einfach interessant und originell. Bringen Sie die Dinge auf den Punkt und seien Sie spannend.