# Briefing · Wal-Modul „Die große Wanderung" **Für:** Claude Fable 5 (externe Sim-Instanz) **Auftrag-Datum:** 2026-06-14 **Auftraggeber:** Thomas (Plattform-Owner) + Atlas (Plattform-Instanz) --- ## 0. Worum es geht Du baust ein neues GeoGraSim-Simulationsmodul für die Lernplattform **geograsim.at**. Sim-ID: **`wal`**. Titel: **„Die große Wanderung"**. Du folgst dem Buckelwal *Megaptera novaeangliae* auf seiner ~6.000 km Migration von Alaska nach Hawaii — als Mutter-Kuh, die in den hawaiianischen Brutgebieten ihr Kalb zur Welt bringen wird. Zielgruppe: Sek I (11–16 Jahre, AT/CH/DE/LI). Dauer ein Durchgang: ca. 35 min. Lehrpersonen setzen es ein in Fächern **Geografie und wirtschaftliche Bildung**, **Biologie / Naturwissenschaft**, **Politische Bildung** und im **Querschnitt BNE** (Bildung für Nachhaltige Entwicklung). Die Plattform stellt: Wrapper (existiert: `App/pages/wal.php`), DB-Eintrag (existiert: `module_info`), Plattform-Header, Glossar-Tooltip-Library, Quick-Intro-Library, Live-Cockpit-Anbindung, Submit-Endpoint, Persistenz-Pattern, Lehrplan-Anbindung, Design-System. **Pflicht-Lektüre vor Start:** 1. [`App/docs/sim-spec-2026-06-12.md`](../App/docs/sim-spec-2026-06-12.md) — aktuelle Plattform-Conventions (Window-Globals, Submit, Header-Standard) 2. [`App/docs/module-interface.md`](../App/docs/module-interface.md) — Sprach-Konventionen (Lernarbeit statt Spiel — **kritisch**), iPad-Pattern, Leichte Sprache, Persistenz-Pflicht 3. Diese Datei — Wal-Spezifika und Konzept --- ## 1. Ausgangsmaterial — Thomas' Skizzen Zwei HTML-Files liegen in `c:\xampp\htdocs\geograsim\.humanInput\wal\` als **Konzept-Skizze**: - **`wal-simulator-v2(3).html`** — die narrative Rahmensimulation mit Leaflet-Karte und Choice-Mechanik (4 Etappen, 11 Begegnungen, Energy/Health/Stress, Endet mit Geburt in Maui). **Das ist die Basis.** - **`wal-frachtroute(4).html`** — ein 3D-Action-Minispiel, das die Containerschiff-Begegnung detailliert ausspielt. **Wir bauen das in 2D nach.** Du darfst und sollst diese Files **als Inhaltsquelle plündern** — Texte, Fakten, Fact-Boxes, Stage-Definitionen sind didaktisch gut und fachlich verifiziert. Plattform-Integration und Welt-Varianten kommen NEU hinzu. --- ## 2. Konzept-Erweiterung — Welt-Varianten (Pflicht) Statt einer einzigen Reise gibt es **drei Welt-Varianten** entlang derselben Pazifik-Route. Lehrperson kann eine vorgeben (`window.WAL_FORCED_ERA = 1850|1990|2026`), sonst wählt Schüler:in im Sim-Intro. ### Variante 1850 — Vor dem Schutz - Walfänger-Stationen auf den Aleuten und in Lahaina (Hawaii). Harpunenboote als Antagonisten. - Krillschwärme dicht, Heringe massenhaft. Wassertemperatur stabil. - Kein Plastik, kein Sonar, kaum Containerschiffe (Dampfschiff-Frühphase). - Population global: ~125.000 Buckelwale. - Begegnungen statt Frachter/Plastik/Sonar: **Harpunenboot · Walfang-Station · Verlorene Walgruppen · Eismeer-Sturm**. ### Variante 1990 — Erholung beginnt - Walfangmoratorium 4 Jahre alt (seit 1986). Population ~10.000–15.000. - Begegnungen mit anderen Buckelwalen seltener — „Einsamkeit" als didaktisches Element. - Erste Containerschifffahrt, aber dünn. - Marine-Sonar gibt's, Geisternetze ja, Plastik wenig. - Erholungsstory erlebbar — andere Wale gehören zum „seltenen Glück". ### Variante 2026 — Heute - Population ~80.000, fast erholt. - Dichter Schiffsverkehr, Mikroplastik, Klimaerwärmung verschiebt Krill polwärts. - Schutzgebiete + IMO-Routen helfen. - = das `wal-simulator-v2(3).html` wie es jetzt ist (mit Plattform-Integration und 2D-Minispiel). **Didaktischer Mehrwert:** Lehrperson lässt Klasse aufteilen — Gruppe A 1850, B 1990, C 2026. Vergleichen in der Reflexion. Sehen: **wir kommen aus einer schlimmen Zeit, wir hatten Erfolg mit Schutz**. BNE-Erfolgsstory ohne 2050-Spekulation. ### Sprache 1850 Darf dramatisch sein, aber Sek-I-tauglich. **Kein Splatter, keine Tier-Quälszenen.** Pattern: > „Am Horizont, Schwarz auf Grau, ein Walfänger-Mast. Du hörst das Geräusch ihrer Ruder — schwächer als heutige Frachter, aber gezielt. Sie suchen dich." Konsequenzen wie heute: Stats-Effekte + Fact-Box mit historischem Kontext. Kein Tod auf Bildschirm; Game-Over heißt „Verlorene Reise" wie in 2026 auch. --- ## 3. Technik-Vorgaben ### 3.1 Stack - **Vanilla HTML/JS/CSS.** Kein Build-Step, kein React, kein TypeScript. - **2D, nicht 3D.** Begründung: Tiefenachse ist die spannende Dimension (Tauchen unter Schiffen, Krill in der Tiefe) — die zeigt 2D klarer. iPad-Touch ist 2D natürlicher. Three.js-Bundle/WebGL-Abhängigkeiten entfallen. Flat-Scandinavian-Plattform-Ästhetik passt 2D besser. - **Leaflet** ist OK für die Welt-Karte (siehe wal-simulator-v2 — verwendet das bereits). - **Canvas 2D** für die Action-Minispiele (Schiffsquerung, Sonar-Ausweichen, evtl. Bubble-Net-Timing). - **localStorage** für Autosave (Pflicht — siehe module-interface.md §7b). ### 3.2 Plattform-Header (Pflicht — Standard) ```html
Die große Wanderung 2026
📚 🏠
``` Stylesheet einbinden: ``. ### 3.3 Plattform-Globals (was vom Wrapper kommt) ```js window.WAL_BASE // '/sims/wal/' — Basispfad für deine Assets window.WAL_SESSION_MODE // 'free' | 'teacher_started' window.WAL_FORCED_LEVEL // 1|2|3 wenn teacher_started, sonst null window.WAL_FORCED_ERA // 1850 | 1990 | 2026 | null window.WAL_SESSION_ID // string oder null window.WAL_API_BASE // '/php/api' window.STUDENT_EASY // true wenn Leichte Sprache aktiv ``` **Verhalten:** - Wenn `WAL_FORCED_ERA` gesetzt → Sim startet direkt in dieser Welt, kein Era-Picker. - Wenn `null` → Era-Picker als erstes Screen-Element (3 Karten: 1850 / 1990 / 2026). - Wenn `STUDENT_EASY === true` → vereinfachte Sprache überall (siehe module-interface.md §4b). ### 3.4 Plattform-Globals (was du setzen musst) ```js // 1) Live-Snapshot fürs Lehrer-Cockpit (alle 4s wird das gepollt) window.GGS_LIVE_STATE = function () { if (!gameReady) return null; return { simId: 'wal', era: 1850|1990|2026, stage: 1|2|3|4, // aktuelle Etappe stageName: 'Frederick Sound', // Anzeigename day: 42, // Tage seit Aufbruch energy: 75, health: 90, stress: 30, hasCalf: false, progressPct: 45, // 0-100 (Etappe + Index) health_status: 'good'|'ok'|'struggle', // Cockpit-Status-Punkt }; }; // 2) Tutorial-Replay-Hook (für ℹ-Header-Button) window.GGS_TUTORIAL = { simId: 'wal', title: '🐋 Die große Wanderung', replay: function () { /* deine startTutorial() */ }, }; ``` ### 3.5 Submit am Reise-Ende (Pflicht) ```js fetch(window.WAL_API_BASE + '/progress.php', { method: 'POST', headers: {'Content-Type': 'application/json'}, credentials: 'same-origin', body: JSON.stringify({ sim_id: 'wal', action: 'submit_assessment', data: { level: eraToLevel(era), // 1850=1, 1990=2, 2026=3 stars: calcStars(), // 1-5 score: calcScore(), // 0-100 duration_ms: (window.__GGS_LIVE__ && window.__GGS_LIVE__.activeMs) || 0, completed: true, results: { era: 1850|1990|2026, days_total: state.day, outcome: 'arrival_with_calf'|'arrival_no_calf'|'starvation'|'injury'|'whaling', energy_end: state.energy, health_end: state.health, stress_peak: state.stressPeak, stages_completed: state.stage, encounters_total: state.encountersDone, choices_log: state.choicesLog, // pro Begegnung: {stage, event_id, choice_label} facts_seen: state.factsRead, // wieviele Fakt-Boxen angezeigt }, }, }), }); ``` **Wichtig:** `duration_ms` aus `window.__GGS_LIVE__.activeMs` lesen (NICHT eigene Wall-Clock). Sonst zählt Idle mit. ### 3.6 Glossar-Tooltip (in den Begegnungs-Texten verlinken) Lib einbinden: ```html ``` In den Begegnungs-Texten verwendest du: ```html Bubble-Net ``` Atlas liefert die Begriffe nach an die Glossar-Instanz. Vorschlag-Liste in §6. ### 3.7 Quick-Intro NICHT verwenden Wir wollen ein **vollwertiges Tutorial** mit 4-5 Schritten + Bildern (Welt-Variante erklären, Choice-Mechanik, Stats erklären, Minispiele ankündigen). Quick-Intro wäre zu dünn für diese Sim. ### 3.8 Persistenz (Pflicht) `localStorage`-Key: `ggs-save-wal-{era}` (z.B. `ggs-save-wal-1850`). - Speichern nach jeder Begegnung + bei Era-Switch. - Beim Reload: lädt den aktuellen Stand. Reset-Button (🔄) löscht und startet neu (mit Bestätigung). - Pro Era ein separater Save (Schüler:in kann zwischen Welten wechseln, ohne Stand zu verlieren — relevant für Vergleichs-Reflexion). Siehe module-interface.md §7b für Vollbeispiel. ### 3.9 iPad-Pattern (Pflicht) - Touch-Ziele 36-40 px (Header-Buttons sind das schon). - Choice-Buttons mind. 48 px hoch. - `font-size: 16px` für Texteingaben (sonst zoomt Safari). - Canvas-Minispiele mit `touch-action: none`. - Kein Hover-only — alles per Tap erreichbar. --- ## 4. Inhaltsstruktur (basierend auf Thomas' Vorlage) ### 4.1 Etappen (alle drei Welt-Varianten) | Etappe | Name | Saison | |---|---|---| | 1 | Frederick Sound · Alaska | September | | 2 | Offener Nordpazifik | Oktober | | 3 | Subtropischer Übergang | November | | 4 | Hawaiianische Gewässer | Dezember | Pro Etappe 2-4 Begegnungen. Endet immer mit Maui + (in 1850 vielleicht abweichend wegen Walfangstation Lahaina) Geburt des Kalbs. ### 4.2 Begegnungs-Matrix nach Welt-Variante Aus dem Originalkonzept übernehmen + ergänzen: #### Etappe 1 (Frederick Sound) - **1850:** Bubble-Net (mit großer Gruppe — Population groß) · Letzte Begegnung Sommer-Gruppe - **1990:** Bubble-Net (mit *kleiner* Gruppe — Population dünn) · Aufbruch *allein* (Reflexion: „Wo sind die anderen?") - **2026:** Bubble-Net wie heute · Letzte Begegnung wie heute (das aktuelle Skript) #### Etappe 2 (Offener Nordpazifik) - **1850:** **Walfänger-Brigg** (sich annähernde Walfänger statt Frachter) · **Eisberg-Treibhindernis** statt Geisternetz · Sturm · Orcas - **1990:** **Frachtroute dünn** (1-2 Schiffe pro Tag, ausweichbar) · Geisternetze JA (Hochzeit der Treibnetz-Fischerei) · Sturm · Orcas - **2026:** Frachtroute dicht (heute) · Geisternetz · Sturm · Orcas #### Etappe 3 (Subtropischer Übergang) - **1850:** **Wal-Pod-Begegnung** (große Gruppe — bewahrtes Phänomen) · Sturm-Nachläufer · Kuroshio-Ausläufer - **1990:** Marine-Sonar (Kalter Krieg!) · Treibmüll-Anfänge (statt voller Müllstrudel) · Kuroshio - **2026:** Marine-Sonar · Pazifischer Müllstrudel · Kuroshio (das aktuelle Skript) #### Etappe 4 (Hawaiianische Gewässer) - **1850:** **Walfang-Station Lahaina am Horizont** · Geburt im versteckten Kanal - **1990:** Erste Brutgebiete vor Maui (mit Walbeobachtungsbooten als neues Phänomen) · Geburt - **2026:** Erste Brutgebiete (mit etablierter Walbeobachtung + Schiffsverkehr) · Geburt ### 4.3 Action-Minispiel Frachtroute (2D) Inspiration: `wal-frachtroute(4).html` — **aber in 2D**. **Mechanik:** - Seitenansicht: Wasseroberfläche oben, Tiefe unten bis ~150 m. - Wal-Mutter (große Silhouette) + Wal-Kalb (kleiner, folgt nach). - Schiffe ziehen von rechts nach links durch den oberen Bereich. Tiefgang 12-15 m sichtbar. - Player steuert vertikal (↑↓) und horizontal (←→ — leichte Strömung). - 2 Atem-Bars (Mutter, Kalb) — Auftauchen füllt, Tauchen leert. Kalb leert schneller. - Progress-Bar oben: Querung der Route (0→100 %). - Sonnenstrahlen-Effekte zur Tiefe (Vol-Light-Style, einfache lineare Gradienten). **Verlier-Bedingungen** (wie im Original): Kollision Mutter, Kollision Kalb, Mutter ertrinkt (Atem 0), Kalb ertrinkt. **Win-Bedingung:** Querung 100 % erreichen. Die Variante: - **1850:** Ersetzt durch **Walfänger-Brigg-Begegnung** — kein Tauchspiel, Choice-basiert (sicher umgehen vs. nahe ran), KEIN Minispiel. - **1990:** Mini-Action wie 2026, aber nur 1-2 Schiffe statt Dauer-Strom. - **2026:** Voll-Action wie wal-frachtroute, aber 2D. --- ## 5. Cockpit-Sichtbarkeit & Benchmark — was Atlas brauchen wird Du baust die Sim. Atlas verkabelt teacher.html + Benchmark.php sobald deine results-Felder definiert sind. **Liefere uns:** ### 5.1 LIVE_PRIMARY_FIELDS-Vorschlag ```js 'wal': [ {k:'health_status', label:'Status', align:'center', fmt: v => LIVE_VALUE_LABELS.health[v]}, {k:'era', label:'Welt', align:'center'}, {k:'stage', label:'Etappe'}, {k:'stageName', label:'Ort', align:'left'}, {k:'day', label:'Tag'}, {k:'progressPct', label:'Reise', fmt: v => _liveBar(v, 0, 100, 'mid')}, {k:'energy', label:'⚡ Energie', fmt: v => _liveBar(v, 0, 100, 'high')}, {k:'health', label:'❤️ Gesund.', fmt: v => _liveBar(v, 0, 100, 'high')}, {k:'stress', label:'😖 Stress', fmt: v => _liveBar(v, 0, 100, 'low')}, {k:'hasCalf', label:'🐳 Kalb', align:'center', fmt: v => v ? '✓' : '—'}, ], ``` ### 5.2 Benchmark-Formel-Vorschlag ```php private static function scoreWal(array $r): ?int { $era = (int)($r['era'] ?? 0); $days = (int)($r['days_total'] ?? 0); $outcome = $r['outcome'] ?? null; $energy = (int)($r['energy_end'] ?? 0); $health = (int)($r['health_end'] ?? 0); $stressP = (int)($r['stress_peak'] ?? 0); if (!$outcome) return null; // Outcome-Basis $base = match($outcome) { 'arrival_with_calf' => 70, 'arrival_no_calf' => 50, 'whaling' => 0, 'starvation' => 0, 'injury' => 0, default => 0, }; // Health- und Energy-Bonus (saubere Wahl) $bonus = round($health * 0.12) + round($energy * 0.08); // Stress-Malus (lange Belastung) $malus = round($stressP * 0.05); // Zeit-Malus (Zielreise ~90 Tage) $timePenalty = max(0, ($days - 90)) * 0.3; return max(0, min(100, (int)round($base + $bonus - $malus - $timePenalty))); } ``` Begründung: Outcome dominiert (Kalb-Geburt = Hauptlernziel), Health/Energy als Wahlqualität, Stress-Malus für „durch-die-Hölle"-Routen. --- ## 6. Glossar-Begriffe — Atlas reicht das nach an die Glossar-Instanz Bitte verwende in den Begegnungs-Texten Tooltips für diese Begriffe: | Slug | Begriff | Wo verwendet | |---|---|---| | `bubble-net` | Bubble-Net-Feeding | Etappe 1 Begegnung 1 | | `migration-orientierung` | Magnetfeld-Sinn / Orientierung | Etappe 2 Intro | | `frachtroute` | Frachtroute (Pazifik-Hauptrouten) | Etappe 2 Frachter | | `verkehrstrennungsgebiet` | IMO-Schifffahrtsroute | Etappe 2 Wins-Faktbox | | `geisternetz` | Verloren gegangenes Fischereinetz | Etappe 2 Müll | | `bycatch` | Beifang | Etappe 2 Geisternetz | | `kuroshio-strom` | Kuroshio (warme Pazifikströmung) | Etappe 3 Kuroshio | | `marine-sonar` | Militärisches Sonar | Etappe 3 Sonar | | `mikroplastik` | Plastik-Anreicherung im Ozean | Etappe 3 Müll | | `pazifischer-gyre` | Pazifischer Subtropen-Wirbel | Etappe 3 Müll | | `walfang-moratorium` | IWC-Moratorium 1986 | Etappe 4 Faktbox + 1990-Intro | | `iwc` | International Whaling Commission | wo Moratorium erwähnt | | `walfaengerei-1850` | Walfangindustrie 19. Jh. | 1850-Etappen | | `brutgebiet` | Hawaii Humpback Marine Sanctuary | Etappe 4 | | `klimazone-subtropisch` | Subtropische Zone | Etappe 3 Intro | | `wal-gesang` | Buckelwal-Gesang | Etappe 4 | | `speck-blubber` | Speck als Energiereserve | Etappe 1 Intro | | `echolot-tier` | Echo-Orientierung bei Walen | Etappe 2 Frachter Hintergrund | | `bne` | Bildung für Nachhaltige Entwicklung | Endscreen | | `lahaina` | Walfang-Station Maui 19. Jh. | 1850 Etappe 4 | 20 Begriffe. Atlas reicht das an die Glossar-Instanz weiter — du kannst die Slugs schon verwenden, Tooltip greift dann auf Fallback zurück bis die DB-Einträge da sind. --- ## 7. Lehrplan-Anker — Atlas reicht das nach an die Lehrplan-Instanz Wir empfehlen pro Land 8-12 Anker. Vorerst nutzt du `module_kompetenz_map` mit folgenden bekannten Kompetenzen aus dem System: - **AT GW Sek I:** Kompetenz 1.x (Klimazonen/Wassersysteme), 2.x (globale Stoffströme), 4.x (Belastungsgrenzen), 5.x (Mensch-Natur-Konflikte) - **CH RZG Sek I:** RZG.3.x (Mensch-Natur-Systeme), RZG.4.x (globale Handelsketten) - **DE Sek I:** Klimawandel, Welthandel, Globale Tier-Mensch-Konflikte - **LI:** analog zu DE Berlin/Brandenburg-Pattern Atlas liefert nach — du musst dazu nichts tun, außer im Modul-Header das 📚-Lehrplan-Link platzieren (das ist im Header-Standard bereits drin). --- ## 8. Dateien, die du anlegen sollst ``` App/sims/wal/ ├── game.html ← Hauptdatei (du baust) ├── engine.js ← optional, Sim-Logik separat (empfohlen ab ~500 LoC) ├── assets/ │ ├── img/ │ │ ├── card-wal.png ← schon angefragt, kommt von Atlas │ │ ├── era-1850.webp ← Onboarding/Era-Picker │ │ ├── era-1990.webp │ │ ├── era-2026.webp │ │ ├── stage1-alaska.webp ← Etappen-Intro-Bilder │ │ ├── stage2-nordpazifik.webp │ │ ├── stage3-subtropisch.webp │ │ └── stage4-hawaii.webp │ └── audio/ ← optional, Walgesang (NOAA Public Domain) │ └── humpback-song.mp3 ← falls du Audio-Element nutzt ``` **Bildstil:** Flat Scandinavian (siehe sim-spec-2026-06-12.md §6). DALL-E-Prompt-Block: ``` Flat scandinavian illustration, geometric shapes, soft warm color palette (#1f4b37 forest, #4a7c4e moss, #e8c547 honey, #e8e4d8 sand background, #b04a3e coral accent sparingly). No people, no text, no photo-realism. Clean educational style for children 10-14, Sek I. [hier deine Szene-Beschreibung]. Square 1024x1024. ``` WebP, max 200 KB pro Bild. Atlas hilft bei Bildgenerierung wenn du DALL-E-Briefings schickst. --- ## 9. Was Atlas am Ende übernimmt (du musst nicht) 1. `LIVE_PRIMARY_FIELDS['wal']` in [`App/teacher.html`](../App/teacher.html) einbauen (deine Vorlage aus §5.1) 2. `Benchmark::scoreWal()` in [`App/php/lib/Benchmark.php`](../App/php/lib/Benchmark.php) integrieren (deine Formel aus §5.2) 3. Glossar-Begriffe an Glossar-Instanz weiterreichen (deine Liste aus §6) 4. Lehrplan-Anker an Lehrplan-Instanz weiterreichen (Atlas-Vorschlag aus §7) 5. Playwright-Test in `.dontDeploy/playwright/tests/stufe1-smoke/` 6. Deploy 7. Status auf `aktiv` schalten nach Test-Welle --- ## 10. Done-Definition Du gibst zurück: - [ ] `App/sims/wal/game.html` (+ optional `engine.js`) - [ ] Sim-eigene Assets in `App/sims/wal/assets/` - [ ] Eine kurze README im Sim-Ordner: was du implementiert hast, was offen ist - [ ] Aktualisierte LIVE_PRIMARY_FIELDS-Liste (falls deine results-Felder anders heißen) - [ ] Aktualisierte Benchmark-Formel (falls deine results-Felder anders heißen) - [ ] Aktualisierte Glossar-Begriff-Liste (falls du Begriffe ergänzt oder umbenennst) Die Sim muss: - [ ] Alle 3 Welt-Varianten spielbar liefern - [ ] Bei `WAL_FORCED_ERA` direkt in dieser Welt starten - [ ] Bei `WAL_FORCED_ERA=null` Era-Picker zeigen - [ ] `GGS_LIVE_STATE` mit allen Feldern aus §3.4 liefern - [ ] `GGS_TUTORIAL.replay()` registrieren - [ ] Submit am Reise-Ende abgeben - [ ] localStorage-Autosave pro Era - [ ] iPad-funktional sein - [ ] Sprache: NIEMALS „spielen/Spiel/Spieler". Immer „bearbeiten/Simulation/Lernende". Sek-I-Du-Form. - [ ] Leichte-Sprache-Variante respektieren wenn `STUDENT_EASY=true` --- ## 11. Wenn du Fragen hast Bei Plattform-Fragen: Atlas (Plattform-Instanz). Bei inhaltlich-didaktischen Fragen: Thomas. Bei Glossar oder Lehrplan: jeweilige Instanzen (siehe sim-spec-2026-06-12.md §14). Die Plattform-Standards in sim-spec-2026-06-12.md sind Pflicht — Abweichungen bitte vorher abklären, nicht eigenmächtig „abkürzen". Wenn dir Conventions fehlen oder unklar sind, frag — wir ergänzen die Spec. **Erfolg: ein didaktisch starkes, fachlich korrektes, iPad-funktionales, persistentes Wal-Migrations-Modul mit drei vergleichbaren Welt-Varianten, das in eine 35-Minuten-Schulstunde passt.** Viel Erfolg! — Atlas