LU07: Übungsaufgaben – Accordion debuggen [BZZ

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== 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.

<WRAP center round tip 80%>
**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.).
</WRAP>

**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

{{:de:modul:m291:learningunits:lu07:aufgaben:debugging_solution.gif?nolink| Wie es nach dem Debuggen aussehen sollte.}}


===== Variante A =====

<WRAP center round download 60%>
{{ :de:modul:m291:learningunits:lu07:aufgaben:lu07_aufgabe_a.zip | Variante A downloaden }}
</WRAP>

Das Projekt enthält **5 absichtliche Bugs**. Finden und beheben Sie alle.

<WRAP round box 80% center>
^ 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 |
</WRAP>

===== Variante B =====

<WRAP center round download 60%>
{{ :de:modul:m291:learningunits:lu07:aufgaben:lu07_aufgabe_b.zip | Variante B downloaden }}
</WRAP>

Das Projekt enthält **5 absichtliche Bugs**. Finden und beheben Sie alle.

<WRAP round box 80% center>
^ 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 nicht auf Klicks – TypeError | Console (''console.log'') |
| Bug 4 | Nach dem Klick erscheint sofort ein ''ReferenceError'' in der Console | Console – Fehlermeldung lesen |
| Bug 5 | Die Panels öffnen sich (der Button-Pfeil dreht sich), aber der Inhalt bleibt unsichtbar | Editor – Elements-Tab |
</WRAP>


===== Variante C =====

<WRAP center round download 60%>
{{ :de:modul:m291:learningunits:lu07:aufgaben:lu07_aufgabe_c.zip | Variante C downloaden }}
</WRAP>

Das Projekt enthält **5 absichtliche Bugs**. Finden und beheben Sie alle.


<WRAP round box 80% center>
^ 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 |
</WRAP>


===== 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.

<WRAP round box 80% center>
^ 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? | |
</WRAP>

Eine Vorlage dieser Tabelle finden Sie in der Moodle Abgabe.

===== 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