# HTML-Kurs erstellen: Scratch-Stil (TurboWarp eingebettet)
Diese Anleitung beschreibt, wie ein KI-Agent eine eigenständige HTML-Datei im Stil von `scratch.html` erstellt — mit eingebettetem TurboWarp-Editor als zentralem Element, Aufgaben-Sidebar und Fortschritts-System.
> **Hinweis:** Diese Variante eignet sich für visuelle Programmierkurse mit Scratch/TurboWarp. Der TurboWarp-Editor läuft lokal unter `/turbowarp/editor.html`.
---
## Konzept & Layout
```
┌─────────────────────────────────────────┐
│ Header (Titel, zurück-Link) │
├──────────────┬──────────────────────────┤
│ Sidebar │ TurboWarp-Editor │
│ (Aufgaben) │ (iframe, nimmt rest. │
│ │ Platz ein) │
│ - Aufgabe 1 │ │
│ - Aufgabe 2 │ │
│ - ... │ │
└──────────────┴──────────────────────────┘
│ Footer (Fortschritt) │
└─────────────────────────────────────────┘
```
---
## Grundgerüst
```html
Scratch – Mein Kurs← Zurück
🐱 Scratch: Mein Kurs
Untertitel hier
Wähle eine Aufgabe
Fortschritt:
```
---
## TurboWarp: Projekt-IDs
- **Leeres Projekt**: `projectId: ''` → leerer Editor
- **Scratch-Projekt**: `projectId: '482162841'` → öffentliche Scratch-Projekt-ID (von scratch.mit.edu)
- **Starter-Datei**: `starterUrl: 'https://example.com/starter.sb3'` → lädt eine .sb3-Datei als Ausgangspunkt
TurboWarp liegt lokal unter `/turbowarp/editor.html` auf dem Server.
---
## Checkliste für den KI-Agenten
- [ ] `COURSE_ID` eindeutig wählen
- [ ] In `index.html` als Kurs-Button verlinken
- [ ] Alle `TASKS` mit eindeutiger `id` und aufsteigendem `bit` (1, 2, 3…)
- [ ] `--primary`-Farbe für den Kurs-Stil setzen (Scratch: `#f59e0b`)
- [ ] `esc()`-Funktion vorhanden und für alle Texte verwendet
- [ ] Fortschritt per `hash/report` gemeldet
- [ ] Auth aus `localStorage['lms_passphrase']` gelesen
- [ ] Alle Texte auf Deutsch