JavaScript und die Website 2

Challenge-Paket für Aivopod: aus Seiten, die auf einen Klick reagieren, werden kleine Web-Anwendungen. Baut auf javascript-und-die-website auf (getElementById, textContent, addEventListener) und auf javascript-grundlagen-2 (Listen, Objekte und mit der Challenge logik auch &&, ||, !).

Challenge	Inhalt
Klassen schalten (klassen-schalten)	classList.add/remove/toggle/contains, CSS sagt wie, JavaScript sagt wann; aria-expanded; ein Akkordeon
Eingaben lesen (eingaben-lesen)	value ist Text, Number(), NaN, das Ereignis input; Zeichenzähler, Taschengeld, Warnung ab 280 Zeichen
Elemente erzeugen (elemente-erzeugen)	createElement, textContent, append, remove – ohne innerHTML; Einträge hinzufügen und entfernen
Daten und Anzeige (daten-und-anzeige)	ein Array von Objekten als einzige Wahrheit, zeichne() baut die Liste neu; erledigt-Haken
Zufall (zufall)	Math.random(), Math.floor, Würfel und Zufallselement; in der Prüfung fester Zufall (pruefe.zufall)
Tastatur (tastatur)	keydown, event.key, eine Position mit den Pfeiltasten; im Feld bleiben mit &&; Sammelspiel
Ein Quiz (quiz)	Abschluss: Daten, Anzeige, Ereignisse und Zustand; auf „Experte“ ein eigenes Quiz, beurteilt nach quiz/BEWERTUNG.md

Alle mit drei Stufen (normal, erweitert, experte), in dieser Reihenfolge (aivopod.ablauf). Jede Challenge hat auf „Normal“ einen aendern- und einen schreiben-Schritt. Braucht Aivopod 0.8 (Fehlermuster für Web-Anwendungen, fester Zufall).

Wer danach mit Robo weitermachen will (Unterstufe): roboterwelt und roboterwelt-2 aus derselben Organisation.

Für den VHS-Kurs mit Menü per Klassenwechsel lässt sich klassen-schalten allein zuweisen.

Arbeiten am Paket

npm install          # das SDK aus der Registry der Organisation (.npmrc)
aivopod pack test    # Tests, ohne vitest
aivopod pack preview # alle Schritte im Browser durchspielen
aivopod pack build   # bündeln, prüfen, Release-Archiv in dist/

Veröffentlichen: Die Version in package.json erhöhen (Patch: nur Texte; Nebenversion: Änderungen in bestehenden Challenges oder im Ablauf; Hauptversion: andere Challenges) und nach main bringen. Die CI prüft die Version gegen das letzte Release und legt ein neues Release v<version> mit dem Archiv an. Plattformen, die dieses Repo (oder seine Organisation) als Quelle eingetragen haben, finden es, wenn das Repo das Thema aivopod-pack hat. Entwicklungsversionen (1.2.0-dev.1) lassen sich mit aivopod pack publish direkt für die eigene Schule veröffentlichen, wenn die Plattform das erlaubt.

aivopod.titel und aivopod.ablauf in package.json legen fest, wie das Paket als Ganzes einem Kurs zugewiesen wird: sein Titel und die Challenges in dieser Reihenfolge.

Eine Challenge ist ein Ordner mit index.ts (die Challenge) und index.test.ts (Tests mit expectPass und expectFail). Bilder liegen im Ordner assets/ der Challenge.