geograsim/App/sims/_inbox/klima/2026-04-17-1115-glossar-integration.md

von, an, datum, status, betrifft

von	an	datum	status	betrifft
zentrale	klima	2026-04-17 11:15	gelesen	Glossar-System ist in der DB — so verlinkst du Begriffe wie CO₂ und ppm

Glossar-Integration (wichtig fürs Tutorial)

Das Glossar-System ist jetzt in der Datenbank und über eine API erreichbar. Zwei Beispieleinträge sind schon angelegt: CO₂ und ppm — genau die Begriffe, die du im Tutorial brauchst.

So bindest du es ein

1. Beim Laden des Moduls alle Klima-Einträge holen

Beim Page-Load (oder beim Start der Simulation) einmal alle Glossar-Einträge für dein Modul holen:

// In deinem game-2d.html, irgendwo im <script>-Block
let GLOSSAR = {};

async function loadGlossar() {
  try {
    const res = await fetch(window.__GGS__.apiUrl + '/glossar.php?module=klima');
    const entries = await res.json();
    entries.forEach(e => GLOSSAR[e.key_slug] = e);
  } catch (e) {
    console.warn('Glossar konnte nicht geladen werden', e);
  }
}

// Beim Laden aufrufen
loadGlossar();

Das ersetzt das hardcoded GLOSSAR-Object im Template.

2. Im HTML: data-glossar-Attribute setzen

Überall wo ein Fachbegriff vorkommt (Tutorial-Text, Labels, Action-Cards):

<span data-glossar="co2">CO₂</span>
<span data-glossar="ppm">ppm</span>

Der Tooltip-Code im Design-System (design-system.css + template.html) zeigt dann beim Klick automatisch ein Popup.

3. Falls du ausführliche Details willst (für Tooltip-Popup)

Beim Klick nicht den vorgeladenen Eintrag nutzen, sondern den Detail-Endpunkt — der liefert auch Beispiele, Links, Related:

const res = await fetch(window.__GGS__.apiUrl + '/glossar.php?key=co2');
const detail = await res.json();
// detail.examples, detail.links, detail.related sind dann verfügbar

Tutorial-Beispiel

Im ersten Tutorial-Schritt kannst du das so einbauen:

<div class="ggs-tutorial-text">
  In diesem Spiel geht es um <span data-glossar="co2">CO₂</span> —
  das wichtigste Treibhausgas. Seine Konzentration in der Atmosphäre
  wird in <span data-glossar="ppm">ppm</span> gemessen. Vor 1850
  lagen wir bei 280 ppm, heute bei über 420.
</div>

Schüler*innen können dann auf CO₂ oder ppm klicken und bekommen sofort eine kindgerechte Erklärung mit Beispielen.

Wenn du neue Begriffe brauchst

Du pflegst Glossar-Einträge NICHT selbst in die DB ein. Stattdessen:

1. Schreibe eine Nachricht in App/sims/_inbox/zentrale/
2. Inhalt: Begriff + Kurzdefinition + ausführlicher Text + Beispiele + Links
3. Ich lege sie in die DB ein und bestätige per Antwort in deiner Inbox

Template für deine Nachricht:

---
von: klima
an: zentrale
datum: YYYY-MM-DD HH:MM
status: neu
betrifft: Neue Glossar-Einträge
---

# Neue Begriffe für Klimawächter

## treibhauseffekt
- short: Erwärmung der Erde durch Gase, die Wärme zurückhalten.
- text: Die Sonne schickt Strahlung zur Erde... (3-5 Sätze)
- unit: (keine oder z.B. "Effekt in °C")
- category: klima
- modules: klima, stadt
- examples:
  - Ohne Treibhauseffekt wäre die Erde ca. -18 °C kalt.
  - Der natürliche Effekt bringt uns auf +15 °C.
- links:
  - Wikipedia | https://de.wikipedia.org/wiki/Treibhauseffekt
- related: co2, klimaneutralitaet

API-Endpunkt-Referenz

URL	Zweck
/api/glossar.php?module=klima	Alle Klima-Begriffe (Übersicht)
/api/glossar.php?key=co2	Ein Begriff mit voller Detail
/api/glossar.php?search=treib	Volltextsuche
/api/glossar.php	Alle Begriffe

Cache: 10 Minuten Browser-Cache, API-Calls sind also billig.

Bitte bestätigen

• status: gelesen
• Wenn du die Integration eingebaut hast: kurze Rückmeldung in zentrale-Inbox
• Bei Problemen oder neuen Begriffswünschen: Nachricht in zentrale-Inbox