Web-Grundlagen

Challenge-Paket für Aivopod: die Grundlagen von HTML und CSS, ohne JavaScript. Sechs Challenges mit je drei Stufen (normal, erweitert, experte), in dieser Reihenfolge (aivopod.ablauf):

Challenge	Technik	Inhalt
Was ist ein Tag? (tags-erkennen)	HTML	Start- und End-Tags, Verschachtelung, eine Liste, Zeilenumbrüche mit <br> als erstes Element ohne Inhalt
Links und Bilder (links-und-bilder)	HTML	Attribute, Links mit href, <img> ohne End-Tag, alt, ein Bild als Link
Seiten gliedern (seiten-gliedern)	HTML	Überschriften h1 bis h6, header, main, footer, eindeutige ids, Sprungmarken
Farben und Selektoren (farben-und-selektoren)	HTML + CSS	Aufbau einer Regel, Tag-, Klassen- und id-Selektoren, Hex-Farben, style.css selbst einbinden
Schriften (schriften)	HTML + CSS	Schriftfamilien und Ersatzschrift, Größe (px, em), fett, kursiv, Ausrichtung, Zeilenabstand
Abstände und Rahmen (abstaende-und-rahmen)	HTML + CSS	border, padding, margin, Einheiten, das Kastenmodell

Schrittarten: lesen, markieren, vorhersagen (mit Auswahl), zuordnen, aendern, schreiben, alle mit Vorschau.

Die Tests decken die Fehlermuster für HTML und CSS ab (tag-nicht-geschlossen, tags-falsch-verschachtelt, end-tag-leeres-element, id-doppelt, id-klasse-verwechselt, css-semikolon-fehlt, css-einheit-fehlt, style-nicht-eingebunden), jeweils mit Fehlern, wie sie im Unterricht vorkommen.

Weiter geht es mit web-grundlagen-2 (Listen, Tabellen) und css-und-layouting; JavaScript im Browser kommt in javascript-und-die-website, nach javascript-grundlagen und javascript-grundlagen-2. Bis Version 1.1.0 enthielt dieses Paket auch „Ein Knopf, der etwas tut“ mit JavaScript.

Braucht Aivopod 0.5 (Vorschau im Standardmodus, end-tag-leeres-element).

Arbeiten am Paket

Das SDK kommt aus der npm-Registry der Organisation (.npmrc), in der Version der Plattform; dazu das CLI aivopod.

npm install            # das SDK aus der Registry
aivopod pack build
aivopod pack test      # ohne vitest
npm run typecheck
aivopod pack preview   # im Browser durchspielen, mit Prüfung und Feedback

Veröffentlichen

Die Version in package.json erhöhen und nach main bringen. Die CI prüft die neue Version gegen das letzte Release (Patch: nur Texte; Nebenversion: Änderungen in bestehenden Challenges oder im Ablauf; Hauptversion: andere Challenges) und legt das Release v<version> mit web-grundlagen-<version>.zip und Prüfsumme an (scripts/pack-release.sh). Plattformen, die die Organisation aivopod-challenges als Quelle eingetragen haben, bieten es dann an; das Repo trägt dafür das Thema aivopod-pack.

aivopod.ablauf in package.json legt die Reihenfolge fest, in der ein Kurs die Challenges bekommt, wenn das Paket als Ganzes zugewiesen wird (aivopod assign --pack web-grundlagen); aivopod.titel ist die Überschrift des Moduls.

Die CI (.forgejo/workflows/pack.yml) baut und testet jedes Push mit dem CLI derselben Version.

Tests mit Vorschau

Prüfungen gegen die gerenderte Seite (dom, interaktion, konsole) laufen in den Tests ohne Browser: Ein Testfall beschreibt mit seite (nach dem Laden) und interaktionen (nach jeder Interaktion), was die Vorschau zeigen würde – Elemente nach Selektor mit Text, Anzahl oder Stil, Konsolenzeilen und Fehler.

await expectPass(ch, {
  stufe: "normal",
  schritt: "onclick-reparieren",
  dateien: { "index.html": '<button id="knopf" onclick="begruessen()">Sag Hallo</button>\n<p id="ausgabe"></p>' },
  seite: { elemente: { "#knopf": {}, "#ausgabe": { text: "" } } },
  interaktionen: [{ elemente: { "#knopf": {}, "#ausgabe": { text: "Hallo!" } } }],
});