Quiz: Grundgeruest und Verlinkung
This commit is contained in:
parent
b193c5daa0
commit
e1445cc8dc
2 changed files with 408 additions and 0 deletions
336
js/quiz.js
Normal file
336
js/quiz.js
Normal file
|
|
@ -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 =
|
||||
'<span class="rb-nr">' + (i + 1) + '.</span>' +
|
||||
'<span class="rb-frage">' + f.frage + '</span>' +
|
||||
'<span class="rb-richtig">✅ ' + f.richtig + '</span>';
|
||||
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();
|
||||
});
|
||||
|
||||
})();
|
||||
72
quiz.html
Normal file
72
quiz.html
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Mini-Quiz – Allgemeinwissen – David & Karo EIS Projekt">
|
||||
<title>Quiz – David & Karo</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="icon" href="img/logo.png" type="image/png">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<div class="logo">
|
||||
<img src="img/logo.png" alt="Logo">
|
||||
<div class="logo-text">
|
||||
<span class="institution">David & Karo</span>
|
||||
<span class="project">EIS Projekt</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Begrüssung nach Tageszeit -->
|
||||
<span id="begruessung" class="begruessung"></span>
|
||||
<!-- Dark Mode Toggle Button -->
|
||||
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
|
||||
<span class="dark-mode-icon">🌙</span>
|
||||
</button>
|
||||
<!-- Hamburger Menu Button (nur Mobile) -->
|
||||
<button id="nav-toggle" type="button" class="nav-toggle" aria-label="Menü öffnen" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
<nav id="main-nav">
|
||||
<a href="index.html">Start</a>
|
||||
<a href="ueber_uns.html">Über uns</a>
|
||||
<a href="eis_projekt.html">Projekt</a>
|
||||
<a href="team.html">Team</a>
|
||||
<a href="galerie.html">Galerie</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<a href="textanalyse.html">Textanalyse</a>
|
||||
<a href="api.html">API Demo</a>
|
||||
<a href="kanban.html">Kanban</a>
|
||||
<a href="quiz.html" class="active">Quiz</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<h1>🧠 Mini-Quiz</h1>
|
||||
<p>Teste dein Allgemeinwissen! Jedes Mal 3 zufällige Fragen aus über 50. ✨</p>
|
||||
</section>
|
||||
|
||||
<!-- Quiz Container – wird komplett per JS befüllt -->
|
||||
<section>
|
||||
<div id="quiz"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 – Made with 💕 & ✨ – David & Karo</p>
|
||||
<div class="footer-links">
|
||||
<a href="impressum.html">Impressum</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="#">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
<script src="js/quiz.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue