---
von: zentrale
an: klima
datum: 2026-04-17 11:15
status: gelesen
betrifft: 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:

```javascript
// 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):

```html
<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:

```javascript
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:

```html
<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:

```markdown
---
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