Dreißig Übungen zur kleinen Web-App — drei Schichten, ids, Zustand und der Weg vom Klick zur Anzeige.
Dein Fortschritt:
0 / 0 Aufgaben
1
Übungsaufgaben
Dreißig Übungen in gemischter Reihenfolge — du klickst, ziehst, ordnest, rechnest und knobelst. Jede Übung gibt dir sofort eine Rückmeldung, und zu jeder Aufgabe gibt es zwei gestufte Tipps: Der erste zeigt die Richtung, der zweite den entscheidenden Schritt. Die Chips zeigen das Anforderungsniveau: AFB I heißt wiedergeben und direkt anwenden, AFB II selbst entscheiden und verknüpfen, AFB III begründen, beurteilen oder eine Falle durchschauen. Aufgaben mit dem Chip Mix verbinden Wissen aus früheren Unterkapiteln, bei Trick steckt eine Falle drin. Fährst du über ein unterstrichenes Arbeitswort, siehst du, was es genau von dir verlangt.
A1
Passen die ids zusammen?
AFB II
In einem Projekt gehören index.html, style.css und app.js zusammen. Werte die Dateien aus und markiere alle Zeilen, in denen eine id nicht zum HTML passt.
In diesem Bild stecken genau 2 Gefahren. Klicke jede Stelle an, die du für gefährlich hältst — ein zweiter Klick nimmt die Markierung zurück. Mit der Tastatur: Tab zum Bild, ←/→ wandern, Enter markiert.
0 von 2 markiert
Zwei ids passen nicht zum HTML: anzeigen im CSS und Anzeige mit großem A im JavaScript. Eine id muss überall genau gleich geschrieben sein.
Lies zuerst im HTML nach, wie die ids genau heißen.
Vergleiche Buchstabe für Buchstabe, auch Groß- und Kleinschreibung.
A2
Welches Projekt?
AFB III
Entscheide dich für ein Projekt: Setze die Gewichte (1 bis 3) so, dass die Quiz-App vor der Zähler-App liegt, und begründe so deine Wahl.
Die Punkte (3 ist am besten) sind vorgegeben. Klicke in die Gewichts-Zellen (1 bis 3), bis die Quiz-App als Einzige vorne liegt.
Kriterium
Zähler-App
Quiz-App
Schnell fertig
3
1
Viel Übung mit if und Variablen
1
3
Macht der Klasse Spaß
1
3
Gesamtwert
…
…
Wer nur schnell fertig sein will, wählt den Zähler. Wer viel üben will und etwas für die Klasse bauen möchte, gewichtet das höher und die Quiz-App gewinnt. Das Gewicht ist deine Entscheidung.
Welches Kriterium spricht für den Zähler, welche für das Quiz?
Gib den Kriterien, die für das Quiz sprechen, das höhere Gewicht, und prüfe die Gesamtwerte.
A3
Meldung bei 8
AFB IIIMix
Entwickle den Code, der nach jedem Klick bei n === 8 im Element m „Fertig!“ anzeigt und sonst den Text leert. Setze die Bausteine in die richtige Reihenfolge — zwei Bausteine gehören nicht dazu.
Setze den Bauplan von links nach rechts zusammen. Ein Klick legt den Baustein auf den nächsten freien Platz, ein Klick im Bauplan legt ihn zurück. Enter funktioniert genauso.
Die Bedingung steht vorn: if (n === 8) { … } else { … }. Mit einem einzelnen = würde n überschrieben, und ein Absatz hat keinen value, sondern textContent.
Zuerst kommt die Bedingung, dann der Block für den Fall n gleich 8.
Vergleichen heißt ===, und Text in ein Element schreibt man mit textContent.
