Dies ist eine alte Version des Dokuments!
LU07: Übungsaufgaben – Accordion debuggen
In diesen Aufgaben erhalten Sie ein absichtlich fehlerhaftes Accordion-Projekt. Ihre Aufgabe ist es, alle Fehler zu finden und zu beheben.
Vorgehen: Öffnen Sie die Dateien im Editor und im Browser. Schauen Sie nicht einfach den Code an – untersuchen Sie mit den Entwickler-Tools und mit den richtigen Werkzeugen (WebStorm / VS Code + HTMLHint etc.).
Erwartetes Verhalten (wenn alles korrekt ist):
- Die Seite sieht gestylt aus (Hintergrundfarbe, Abstände, Rahmen)
- Ein Klick auf eine Frage öffnet die Antwort mit Transition
- Ein zweiter Klick schliesst sie wieder
- Immer nur eine Antwort ist gleichzeitig offen
Variante A
Das Projekt enthält 5 absichtliche Bugs. Finden und beheben Sie alle.
| Bug | Symptom | Werkzeug |
|---|---|---|
| Bug 1 | Die Seite hat kein Styling – sie sieht aus wie reines HTML ohne CSS | Editor |
| Bug 2 | Script wird ausgeführt bevor der Browser das HTML gelesen hat | Editor + Console |
| Bug 3 | Die Buttons reagieren auf keinen Klick – keine Fehlermeldung in der Console | Editor + Console (console.log) |
| Bug 4 | Die Panels öffnen sich, aber mit keiner Transition / bleiben hängen | Editor (WebStorm / Stylelint) – Elements-Tab |
| Bug 5 | Die Panels lassen sich zwar öffnen, aber nicht mehr schliessen | Console – Logikfehler im Code |
Variante B
Das Projekt enthält 5 absichtliche Bugs. Finden und beheben Sie alle.
| Bug | Symptom | Werkzeug |
|---|---|---|
| Bug 1 | Die Seite hat kein Styling – sie sieht aus wie reines HTML ohne CSS | Editor |
| Bug 2 | Script wird ausgeführt bevor der Browser das HTML gelesen hat | Editor + Console |
| Bug 3 | Die Panels öffnen sich (der Button-Pfeil dreht sich), aber der Inhalt bleibt unsichtbar | Editor – Elements-Tab |
| Bug 4 | Nur der erste Button reagiert auf Klicks – die anderen drei tun nichts | Console (console.log) |
| Bug 5 | Nach dem Klick erscheint sofort ein ReferenceError in der Console | Console – Fehlermeldung lesen |
Variante C
Das Projekt enthält 5 absichtliche Bugs. Finden und beheben Sie alle.
| Bug | Symptom | Werkzeug |
|---|---|---|
| Bug 1 | Die Seite hat kein Styling – sie sieht aus wie reines HTML ohne CSS | Editor |
| Bug 2 | Script wird ausgeführt bevor der Browser das HTML gelesen hat | Editor + Console |
| Bug 3 | Gar nichts passiert beim Klick – die Console zeigt sofort beim Laden einen SyntaxError | Console – Fehlermeldung lesen und Zeilennummer anklicken |
| Bug 4 | Nach dem Beheben von Bug 3: Alle Panels sind von Anfang an sichtbar | Editor – Elements-Tab |
| Bug 5 | Nach dem Beheben von Bug 4: Klick auf einen Button → sofortiger TypeError in der Console | Console + Elements-Tab |
Debugging-Protokoll
Füllen Sie für jeden gefundenen Bug das folgende Protokoll in der Moodle-Abgabe Seite aus. Geben Sie es 10 Minuten vor Ende der Unterrichtseinheit ab.
| Schritt | Ihre Antwort |
|---|---|
| Bug Nr. | |
| 1. Beobachten – Was passiert genau? | |
| 2. Hypothese – Was könnte die Ursache sein? | |
| 3. Testen – Wie haben Sie es geprüft? (welches Tool, was haben Sie gemacht) | |
| 4. Fix – Was haben Sie geändert? |
Kopieren Sie diese Tabelle für jeden der 5 Bugs.
Hilfestellungen
Falls Sie nicht weiterkommen, gehen Sie diese Reihenfolge durch:
- Öffnen Sie den Editor und schauen Sie nach farbigen Unterwellungen
- Öffnen Sie die Console (F12) – gibt es Fehlermeldungen?
- Fügen Sie
console.log()an strategischen Stellen ein - Schauen Sie im Elements-Tab nach, ob CSS-Regeln durchgestrichen sind
- Prüfen Sie die Zeilennummer in der Fehlermeldung – klicken Sie darauf