U14 — Workflow-Training II: Mini-Quiz (eigenständig)
Ziel dieser Übung
Sie bauen eigenständig ein Mini-Quiz mit drei Fragen auf Ihrer Website. Anders als in u13 gibt es keine fertigen Code-Blöcke zum Abtippen — Sie planen und programmieren selbst. Dafür gibt es vier Pflicht-Zwischenstände: Nach jedem Zwischenstand durchlaufen Sie den kompletten Workflow (Commit → Sync → GUI-Check → Server-Pull). So üben Sie den Ablauf, bis er automatisch wird — und haben am Ende ein echtes Feature auf Ihrer Live-Website.
Voraussetzungen: u12 und u13 abgeschlossen. JavaScript-Wissen aus u6 und u7.
Anforderungen an das Quiz
- Eigene Seite
quiz.html + eigenes Skript js/quiz.js
- 3 Fragen (Thema frei — z. B. zu eurem Website-Thema oder zu EIS-Inhalten)
- Je Frage 3 Antwortmöglichkeiten als anklickbare Buttons
- Direktes Feedback: richtig / falsch (im DOM, kein
alert())
- Punktezähler, am Ende eine Auswertung (z. B. „2 von 3 richtig“)
- Verlinkung in der Navigation Ihrer
index.html
- README dokumentiert das neue Feature
Zwischenstände im Überblick
1Grundgerüst: quiz.html angelegt & verlinkt
2Erste Frage funktioniert mit Feedback
3Alle 3 Fragen + Punktezähler
4Auswertung + README aktualisiert
Nach jedem Zwischenstand — der volle Workflow:
lokal Stage → Commit (sprechende Nachricht!) → Sync
→ git GUI: Commit da? Struktur stimmt?
→ server git pull → Browser mit Hard Reload (Strg/Cmd + Shift + R)
Zwischenstand 1 — Grundgerüst Commit: "Quiz: Grundgeruest und Verlinkung"
lokal Bauen Sie in VS Code:
quiz.html mit dem Grundaufbau Ihrer anderen Seiten (gleicher Header, gleiche CSS-Einbindung)- Eine Überschrift und einen leeren Bereich für das Quiz, z. B.
<div id="quiz"></div>
js/quiz.js anlegen und in quiz.html einbinden — erst mal nur mit einem console.log("Quiz lädt")- Link zur Quiz-Seite in die Navigation der
index.html
Lokal testen: Seite öffnen, F12 → Konsole → erscheint „Quiz lädt“?
↻ Workflow: Commit → Sync → git Check → server Pull → https://isa##.edumake.de/quiz.html erreichbar?
Zwischenstand 2 — Erste Frage Commit: "Quiz: erste Frage mit Feedback"
lokal Eigenständig lösen:
- Erste Frage als Text + 3 Antwort-Buttons in
quiz.html
- In
quiz.js: Klick auf einen Button → Feedback im DOM anzeigen (richtig/falsch)
Denkhilfen (nur falls Sie hängen):
- Buttons finden:
document.querySelectorAll("button") oder einzelne IDs
- Klick behandeln:
addEventListener("click", ...) (u7!)
- Feedback-Element: ein
<p id="feedback"></p>, das Sie per textContent befüllen
↻ Workflow: Commit → Sync → git Check (im Commit-Diff: welche Zeilen sind neu?) → server Pull → Hard Reload → Frage 1 live testen
Zwischenstand 3 — Alle Fragen + Punkte Commit: "Quiz: drei Fragen und Punktezaehler"
lokal Eigenständig lösen:
- Fragen 2 und 3 ergänzen
- Eine Variable
punkte, die bei jeder richtigen Antwort um 1 steigt
- Verhindern Sie, dass man bei derselben Frage mehrfach punkten kann (Denkaufgabe!)
Tipp: Entweder die Buttons nach der Antwort deaktivieren (button.disabled = true) oder immer nur eine Frage gleichzeitig anzeigen.
↻ Workflow: Commit → Sync → git Check → server Pull → alle drei Fragen live durchspielen
Zwischenstand 4 — Auswertung + Doku Commit: "Quiz: Auswertung; README aktualisiert"
lokal Abschließen:
- Nach der letzten Frage eine Auswertung anzeigen: „Du hast X von 3 richtig!“
- Optional: je nach Ergebnis ein anderer Satz (alle richtig / teilweise / keine)
README.md ergänzen: neues Feature, neue Dateien (quiz.html, js/quiz.js), Verlinkung
git Abschluss-Abgleich im GUI
- Stimmt die Verzeichnis- und Dateistruktur im Repo mit Ihrer README überein?
- Lesen Sie Ihre letzten 6 Commit-Nachrichten: Würde ein Außenstehender verstehen, was passiert ist?
server Finaler Check
cd ~/public_html
git pull
git log --oneline -6
ls -R
Quiz live durchspielen — fertig! 🎉
Bonus für Schnelle
- Speichern Sie die Fragen in einem Array von Objekten und bauen Sie das Quiz dynamisch mit JavaScript auf (
createElement) — statt jede Frage einzeln ins HTML zu schreiben
- Speichern Sie den Highscore im
localStorage
- Und danach: Selbstlernpfad Python & Flask
