diff --git a/js/quiz.js b/js/quiz.js new file mode 100644 index 0000000..c95366d --- /dev/null +++ b/js/quiz.js @@ -0,0 +1,336 @@ +/** + * quiz.js – U14 Mini-Quiz + * ───────────────────────────────────────────────────────────────────────── + * • 50 Fragen als Objekt-Array + * • Jedes Mal 3 zufällige Fragen aus dem Pool + * • Dynamischer Aufbau per createElement (kein statisches HTML) + * • Direktes DOM-Feedback (richtig ✅ / falsch ❌, ohne alert()) + * • Buttons nach Antwort deaktiviert (kein doppeltes Punkten) + * • Punktezähler sichtbar während dem Quiz + * • Auswertungsscreen mit unterschiedlichen Nachrichten je Ergebnis + * • Highscore (Anzahl perfekter Runden) in localStorage + * • "Neu starten"-Button zieht neue 3 Fragen + * ───────────────────────────────────────────────────────────────────────── + */ + +(function () { + 'use strict'; + + /* ═══════════════════════════════════════════════════════════════════════ + Fragen-Pool (50 Fragen) + ═══════════════════════════════════════════════════════════════════════ */ + const ALLE_FRAGEN = [ + { frage: 'Welcher Planet ist der Sonne am nächsten?', antworten: ['Venus', 'Merkur', 'Mars'], richtig: 'Merkur' }, + { frage: 'Wie viele Kontinente gibt es auf der Erde?', antworten: ['5', '6', '7'], richtig: '7' }, + { frage: 'Welches Organ pumpt Blut durch den Körper?', antworten: ['Lunge', 'Herz', 'Leber'], richtig: 'Herz' }, + { frage: 'In welchem Land steht der Eiffelturm?', antworten: ['Frankreich', 'Italien', 'Spanien'], richtig: 'Frankreich' }, + { frage: 'Wie heißt die Hauptstadt von Deutschland?', antworten: ['München', 'Hamburg', 'Berlin'], richtig: 'Berlin' }, + { frage: 'Welches Tier ist das größte lebende Säugetier?', antworten: ['Elefant', 'Blauwal', 'Giraffe'], richtig: 'Blauwal' }, + { frage: 'Wie viele Beine hat eine Spinne?', antworten: ['6', '8', '10'], richtig: '8' }, + { frage: 'Welcher Stoff ist für die Atmung des Menschen wichtig?', antworten: ['Sauerstoff', 'Stickstoff', 'Helium'], richtig: 'Sauerstoff' }, + { frage: 'Wie heißt der größte Ozean der Erde?', antworten: ['Atlantischer Ozean', 'Indischer Ozean', 'Pazifischer Ozean'], richtig: 'Pazifischer Ozean' }, + { frage: 'Welche Farbe entsteht, wenn man Blau und Gelb mischt?', antworten: ['Grün', 'Orange', 'Lila'], richtig: 'Grün' }, + { frage: 'Wie viele Minuten hat eine Stunde?', antworten: ['50', '60', '100'], richtig: '60' }, + { frage: 'Welcher Wochentag kommt nach Freitag?', antworten: ['Donnerstag', 'Samstag', 'Sonntag'], richtig: 'Samstag' }, + { frage: 'Wie heißt der natürliche Satellit der Erde?', antworten: ['Sonne', 'Mond', 'Mars'], richtig: 'Mond' }, + { frage: 'Welche Sprache spricht man hauptsächlich in Brasilien?', antworten: ['Spanisch', 'Portugiesisch', 'Französisch'], richtig: 'Portugiesisch' }, + { frage: 'Wie viele Bundesländer hat Deutschland?', antworten: ['14', '16', '18'], richtig: '16' }, + { frage: 'Welcher Fluss fließt durch Köln?', antworten: ['Donau', 'Rhein', 'Elbe'], richtig: 'Rhein' }, + { frage: 'Wer schrieb das Drama „Romeo und Julia"?', antworten: ['William Shakespeare', 'Johann Wolfgang von Goethe', 'Friedrich Schiller'], richtig: 'William Shakespeare' }, + { frage: 'Welche Zahl ist eine Primzahl?', antworten: ['9', '11', '15'], richtig: '11' }, + { frage: 'Was ist H₂O?', antworten: ['Salz', 'Wasser', 'Kohlendioxid'], richtig: 'Wasser' }, + { frage: 'Wie nennt man Tiere, die nur Pflanzen fressen?', antworten: ['Pflanzenfresser', 'Fleischfresser', 'Allesfresser'], richtig: 'Pflanzenfresser' }, + { frage: 'Welches Land hat die Form eines Stiefels?', antworten: ['Italien', 'Griechenland', 'Portugal'], richtig: 'Italien' }, + { frage: 'Welches Metall ist bei Raumtemperatur flüssig?', antworten: ['Eisen', 'Quecksilber', 'Gold'], richtig: 'Quecksilber' }, + { frage: 'Wie heißt die Hauptstadt von Spanien?', antworten: ['Barcelona', 'Madrid', 'Valencia'], richtig: 'Madrid' }, + { frage: 'Welcher Planet wird auch der rote Planet genannt?', antworten: ['Mars', 'Jupiter', 'Saturn'], richtig: 'Mars' }, + { frage: 'Was misst ein Thermometer?', antworten: ['Temperatur', 'Geschwindigkeit', 'Gewicht'], richtig: 'Temperatur' }, + { frage: 'Welche Jahreszeit folgt auf den Winter?', antworten: ['Herbst', 'Sommer', 'Frühling'], richtig: 'Frühling' }, + { frage: 'Welches Tier legt Eier?', antworten: ['Hund', 'Huhn', 'Kuh'], richtig: 'Huhn' }, + { frage: 'Wie viele Seiten hat ein Dreieck?', antworten: ['3', '4', '5'], richtig: '3' }, + { frage: 'Welcher Kontinent ist der flächenmäßig größte?', antworten: ['Afrika', 'Asien', 'Europa'], richtig: 'Asien' }, + { frage: 'Wie heißt das kleinste Bundesland Deutschlands?', antworten: ['Bremen', 'Saarland', 'Hamburg'], richtig: 'Bremen' }, + { frage: 'Welches Instrument hat Tasten, Saiten und Hämmer?', antworten: ['Gitarre', 'Klavier', 'Trompete'], richtig: 'Klavier' }, + { frage: 'Welche Sportart spielt man mit Schläger und Federball?', antworten: ['Tennis', 'Badminton', 'Basketball'], richtig: 'Badminton' }, + { frage: 'Wie viele Spieler stehen pro Fußballmannschaft auf dem Feld?', antworten: ['9', '10', '11'], richtig: '11' }, + { frage: 'Welche Einheit verwendet man für elektrische Spannung?', antworten: ['Volt', 'Meter', 'Liter'], richtig: 'Volt' }, + { frage: 'Was ist die Hauptstadt von Österreich?', antworten: ['Wien', 'Graz', 'Salzburg'], richtig: 'Wien' }, + { frage: 'Welches Gas nehmen Pflanzen bei der Fotosynthese auf?', antworten: ['Sauerstoff', 'Kohlendioxid', 'Wasserstoff'], richtig: 'Kohlendioxid' }, + { frage: 'Wie heißt der höchste Berg der Erde?', antworten: ['Mount Everest', 'Kilimandscharo', 'Zugspitze'], richtig: 'Mount Everest' }, + { frage: 'Welche Farbe hat Chlorophyll überwiegend?', antworten: ['Rot', 'Grün', 'Blau'], richtig: 'Grün' }, + { frage: 'Welches Land liegt nicht in Europa?', antworten: ['Norwegen', 'Kanada', 'Polen'], richtig: 'Kanada' }, + { frage: 'Was ist ein Synonym für „schnell"?', antworten: ['rasch', 'langsam', 'leise'], richtig: 'rasch' }, + { frage: 'Welcher Komponist schrieb die 9. Sinfonie?', antworten: ['Ludwig van Beethoven', 'Wolfgang Amadeus Mozart', 'Johann Sebastian Bach'], richtig: 'Ludwig van Beethoven' }, + { frage: 'Welches Tier wird oft als König der Tiere bezeichnet?', antworten: ['Tiger', 'Löwe', 'Bär'], richtig: 'Löwe' }, + { frage: 'Wie viele Planeten hat unser Sonnensystem?', antworten: ['7', '8', '9'], richtig: '8' }, + { frage: 'Welche Stadt ist bekannt für das Kolosseum?', antworten: ['Rom', 'Athen', 'Paris'], richtig: 'Rom' }, + { frage: 'Was ist die Hauptstadt der Schweiz?', antworten: ['Zürich', 'Genf', 'Bern'], richtig: 'Bern' }, + { frage: 'Welche Form hat ein Rad normalerweise?', antworten: ['quadratisch', 'rund', 'dreieckig'], richtig: 'rund' }, + { frage: 'Welcher Sinn ist mit der Nase verbunden?', antworten: ['Riechen', 'Hören', 'Sehen'], richtig: 'Riechen' }, + { frage: 'Wie nennt man gefrorenes Wasser?', antworten: ['Dampf', 'Eis', 'Nebel'], richtig: 'Eis' }, + { frage: 'Welcher Kontinent liegt südlich von Europa?', antworten: ['Afrika', 'Asien', 'Nordamerika'], richtig: 'Afrika' }, + { frage: 'Was ist das Gegenteil von „hell"?', antworten: ['dunkel', 'warm', 'laut'], richtig: 'dunkel' }, + ]; + + const FRAGEN_PRO_RUNDE = 3; + const HIGHSCORE_KEY = 'quiz_highscore_v1'; + + /* ═══════════════════════════════════════════════════════════════════════ + State + ═══════════════════════════════════════════════════════════════════════ */ + let rundenFragen = []; // die 3 gezogenen Fragen dieser Runde + let aktuelleIdx = 0; // welche Frage gerade angezeigt wird + let punkte = 0; + + /* ═══════════════════════════════════════════════════════════════════════ + Utility + ═══════════════════════════════════════════════════════════════════════ */ + + /** Fisher-Yates Shuffle – mischt Array in-place */ + function shuffle (arr) { + for (let i = arr.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [arr[i], arr[j]] = [arr[j], arr[i]]; + } + return arr; + } + + /** Zieht n zufällige Fragen aus dem Pool */ + function zieheZufallsFragen (pool, n) { + return shuffle([...pool]).slice(0, n); + } + + function ladeHighscore () { + return parseInt(localStorage.getItem(HIGHSCORE_KEY) || '0', 10); + } + + function speichereHighscore (wert) { + const aktuell = ladeHighscore(); + if (wert > aktuell) localStorage.setItem(HIGHSCORE_KEY, String(wert)); + } + + /* ═══════════════════════════════════════════════════════════════════════ + DOM-Aufbau + ═══════════════════════════════════════════════════════════════════════ */ + const container = document.getElementById('quiz'); + + function baueQuizAuf () { + rundenFragen = zieheZufallsFragen(ALLE_FRAGEN, FRAGEN_PRO_RUNDE); + aktuelleIdx = 0; + punkte = 0; + container.innerHTML = ''; + zeigeAktuelleFrageOderAuswertung(); + } + + /* ── Fortschrittsleiste + Punkteanzeige ─────────────────────────────── */ + function baueKopfzeile () { + const kopf = document.createElement('div'); + kopf.className = 'quiz-kopf'; + + const fortschritt = document.createElement('div'); + fortschritt.className = 'quiz-fortschritt'; + + const balkenWrapper = document.createElement('div'); + balkenWrapper.className = 'quiz-balken-wrapper'; + const balken = document.createElement('div'); + balken.className = 'quiz-balken'; + const prozent = Math.round((aktuelleIdx / FRAGEN_PRO_RUNDE) * 100); + balken.style.width = prozent + '%'; + balkenWrapper.appendChild(balken); + + const schrittText = document.createElement('span'); + schrittText.className = 'quiz-schritt'; + schrittText.textContent = 'Frage ' + (aktuelleIdx + 1) + ' von ' + FRAGEN_PRO_RUNDE; + + fortschritt.appendChild(schrittText); + fortschritt.appendChild(balkenWrapper); + + const punkteEl = document.createElement('div'); + punkteEl.className = 'quiz-punkte-live'; + punkteEl.textContent = '⭐ ' + punkte + ' Punkt' + (punkte !== 1 ? 'e' : ''); + + kopf.appendChild(fortschritt); + kopf.appendChild(punkteEl); + return kopf; + } + + /* ── Einzelne Frage ─────────────────────────────────────────────────── */ + function zeigeAktuelleFrageOderAuswertung () { + container.innerHTML = ''; + + if (aktuelleIdx >= FRAGEN_PRO_RUNDE) { + zeigeAuswertung(); + return; + } + + const frageDaten = rundenFragen[aktuelleIdx]; + + // Kopfzeile + container.appendChild(baueKopfzeile()); + + // Frage-Card + const card = document.createElement('div'); + card.className = 'quiz-card'; + + const frageEl = document.createElement('p'); + frageEl.className = 'quiz-frage'; + frageEl.textContent = frageDaten.frage; + card.appendChild(frageEl); + + // Antwort-Buttons + const btnGruppe = document.createElement('div'); + btnGruppe.className = 'quiz-btn-gruppe'; + + // Antworten mischen (damit die richtige nicht immer an erster Stelle ist) + const gemischteAntworten = shuffle([...frageDaten.antworten]); + + gemischteAntworten.forEach(function (antwort) { + const btn = document.createElement('button'); + btn.type = 'button'; + btn.className = 'quiz-antwort-btn'; + btn.textContent = antwort; + + btn.addEventListener('click', function () { + verarbeiteAntwort(antwort, frageDaten.richtig, btnGruppe, feedbackEl, weiterBtn); + }); + + btnGruppe.appendChild(btn); + }); + + card.appendChild(btnGruppe); + + // Feedback-Bereich + const feedbackEl = document.createElement('div'); + feedbackEl.className = 'quiz-feedback'; + feedbackEl.setAttribute('aria-live', 'polite'); + card.appendChild(feedbackEl); + + // Weiter-Button (anfangs unsichtbar) + const weiterBtn = document.createElement('button'); + weiterBtn.type = 'button'; + weiterBtn.className = 'btn quiz-weiter-btn'; + weiterBtn.textContent = aktuelleIdx + 1 < FRAGEN_PRO_RUNDE ? 'Nächste Frage →' : 'Auswertung anzeigen 🏁'; + weiterBtn.hidden = true; + weiterBtn.addEventListener('click', function () { + aktuelleIdx++; + zeigeAktuelleFrageOderAuswertung(); + }); + card.appendChild(weiterBtn); + + container.appendChild(card); + } + + /* ── Antwort verarbeiten ────────────────────────────────────────────── */ + function verarbeiteAntwort (gewaehlt, richtig, btnGruppe, feedbackEl, weiterBtn) { + const richtigGeantwortet = gewaehlt === richtig; + + if (richtigGeantwortet) punkte++; + + // Alle Buttons deaktivieren + einfärben + btnGruppe.querySelectorAll('.quiz-antwort-btn').forEach(function (btn) { + btn.disabled = true; + if (btn.textContent === richtig) { + btn.classList.add('richtig'); + } else if (btn.textContent === gewaehlt && !richtigGeantwortet) { + btn.classList.add('falsch'); + } + }); + + // Feedback im DOM anzeigen + feedbackEl.className = 'quiz-feedback ' + (richtigGeantwortet ? 'quiz-feedback-richtig' : 'quiz-feedback-falsch'); + feedbackEl.textContent = richtigGeantwortet + ? '✅ Richtig! Super gemacht!' + : '❌ Leider falsch. Die richtige Antwort ist: ' + richtig; + + // Weiter-Button einblenden + weiterBtn.hidden = false; + } + + /* ── Auswertungsscreen ──────────────────────────────────────────────── */ + function zeigeAuswertung () { + // Highscore aktualisieren (perfekte Runden zählen) + const warPerfekt = punkte === FRAGEN_PRO_RUNDE; + if (warPerfekt) { + const neuHS = ladeHighscore() + 1; + speichereHighscore(neuHS); + } + + const screen = document.createElement('div'); + screen.className = 'quiz-auswertung'; + + // Emoji je Ergebnis + const emoji = punkte === FRAGEN_PRO_RUNDE ? '🏆' : punkte >= 2 ? '👏' : '💪'; + + const headline = document.createElement('h2'); + headline.className = 'quiz-auswertung-titel'; + headline.textContent = emoji + ' Ergebnis'; + screen.appendChild(headline); + + const ergebnis = document.createElement('p'); + ergebnis.className = 'quiz-ergebnis-zahl'; + ergebnis.textContent = 'Du hast ' + punkte + ' von ' + FRAGEN_PRO_RUNDE + ' richtig!'; + screen.appendChild(ergebnis); + + // Nachricht je Ergebnis + const nachrichten = { + 0: 'Nicht aufgeben – beim nächsten Mal klappt es! 💪', + 1: 'Schon mal gut! Versuch es nochmal. 🌱', + 2: 'Fast perfekt! Noch eine Runde? 🌟', + 3: 'Perfekt! Du bist ein Wissens-Genie! 🏆✨', + }; + + const nachricht = document.createElement('p'); + nachricht.className = 'quiz-nachricht'; + nachricht.textContent = nachrichten[punkte] || ''; + screen.appendChild(nachricht); + + // Highscore + const hs = ladeHighscore(); + const highscoreEl = document.createElement('p'); + highscoreEl.className = 'quiz-highscore'; + highscoreEl.textContent = '🥇 Perfekte Runden bisher: ' + hs; + screen.appendChild(highscoreEl); + + // Fragen-Rückblick + const rueckblick = document.createElement('div'); + rueckblick.className = 'quiz-rueckblick'; + const rueckblickTitel = document.createElement('h3'); + rueckblickTitel.textContent = '📋 Deine Antworten'; + rueckblick.appendChild(rueckblickTitel); + + // Gespeicherte Antworten auslesen und anzeigen + rundenFragen.forEach(function (f, i) { + const item = document.createElement('div'); + item.className = 'quiz-rueckblick-item'; + item.innerHTML = + '' + (i + 1) + '.' + + '' + f.frage + '' + + '✅ ' + f.richtig + ''; + rueckblick.appendChild(item); + }); + screen.appendChild(rueckblick); + + // Neu-starten-Button + const neuBtn = document.createElement('button'); + neuBtn.type = 'button'; + neuBtn.className = 'btn quiz-neu-btn'; + neuBtn.textContent = '🔄 Neues Quiz starten'; + neuBtn.addEventListener('click', baueQuizAuf); + screen.appendChild(neuBtn); + + container.appendChild(screen); + + // Sanft nach oben scrollen + container.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + + /* ═══════════════════════════════════════════════════════════════════════ + Init + ═══════════════════════════════════════════════════════════════════════ */ + document.addEventListener('DOMContentLoaded', function () { + if (!container) return; + console.log('🧠 Quiz lädt – ' + ALLE_FRAGEN.length + ' Fragen im Pool'); + baueQuizAuf(); + }); + +})(); diff --git a/quiz.html b/quiz.html new file mode 100644 index 0000000..68ae0aa --- /dev/null +++ b/quiz.html @@ -0,0 +1,72 @@ + + + + + + + Quiz – David & Karo + + + + +
+
+ + + + + + + + +
+
+ +
+
+

🧠 Mini-Quiz

+

Teste dein Allgemeinwissen! Jedes Mal 3 zufällige Fragen aus über 50. ✨

+
+ + +
+
+
+
+ + + + + + +