# GAB-048 · StoryProblemSituation — « Situation-problème narrative »

**Archétype / renderer_key :** `text_cta` (cartographie) · **module :** EdTechStoryLearning
**Critère validé :** changer le JSON change la carte sans modifier le HTML. ✅ check.py 12/12.

## Pack (structure officielle par-GAB)
```
GAB-048/
  renderer.html            ← moteur situation-problème (ne pas modifier par instance)
  instance.example.json    ← SOURCE DE VÉRITÉ (contenu réel, à plat)
  schema.contract.json     ← contrat de validation
  README-contract.md       ← ce fichier
```

## Champs requis (instance, à plat)
`gab_id` · `situation_id` · `scene_text` · `question_text` · `cta_label` · `hint_text`
Optionnels : `visual_emoji`, `question_label`, `cta_label_done`.

## Ce qui vient du JSON vs HTML
- **JSON** : emoji visuel, texte de la scène narrative, libellé de question, question centrale, libellé CTA (avant + après clic), texte de l'indice révélé.
- **HTML** : mise en page carte, bouton structurel, zone hint masquée/révélée, layout, fallback BLOCKED.

## Archétype pédagogique
GAB-048 crée un **besoin cognitif** avant d'enseigner une règle ou notion. La séquence est :
1. **Scène** (`scene_text`) — ancrage narratif concret du problème.
2. **Question** (`question_text`) — formule le besoin cognitif en creux.
3. **CTA** (`cta_label`) — invite l'élève à identifier le besoin.
4. **Indice** (`hint_text`) — révèle pourquoi on veut apprendre la notion (pas la réponse).

## Garde-fous (child_safety)
- `hint_text` révèle le **sens du besoin**, jamais la réponse à la notion enseignée.
- `question_text` doit créer un manque cognitif — pas une question de restitution directe.
- **BLOCKED** si `scene_text`, `question_text`, `cta_label` ou `hint_text` absents.
- Bouton désactivé après clic (opacity + pointerEvents) : empêche double-déclenchement.

## use_when / do_not_use_when
- ✅ use_when : créer un besoin de comprendre · avant d'enseigner une règle/notion · ancrer la notion dans un problème concret
- ⛔ do_not_use_when : exercice d'application (→ Exercise) · quiz de validation · la règle est déjà acquise

## QA à vérifier
1. Modifier `scene_text`/`question_text` → rendu change sans toucher au HTML (critère d'or).
2. `scene_text` absent → BLOCKED propre affiché.
3. Clic CTA → hint révélé, bouton désactivé, libellé passe à `cta_label_done`.
4. Instance externe injectée via `ENGINE.init(ext)` → rendu change.
5. Responsive 375/768/1024.

## Source
`INDEX-300-storylearning-GAB-045-049-PLAYABLE.html` (stage `data-tpl="48"`, handler `probReveal()`).