# GAB-282 · WritingLearningSentenceBuilder — « Construire une phrase avec slots »

**Archétype / renderer_key :** `text_cta` (cartographie) · **module :** EdTechWritingLearning
**Critère validé :** changer le JSON change les slots, le word_bank et les CTAs sans modifier le HTML. ✅ check.py 12/12.

## Pack (structure officielle par-GAB)
```
GAB-282/
  renderer.html            ← moteur SentenceBuilder (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
```

## Archétype
SentenceBuilder — affichage de slots grammaticaux colorés (sujet/verbe/complément/adverbe optionnel), word_bank cliquable, forbidden_patterns anti-phrase vide, reason_why pédagogique + 2 CTAs (écriture libre + reveal exemples).

## Champs requis (instance, à plat)
`gab_id` · `sentence_builder_id` · `sentence_goal` · `sentence_slots[]{role,label,example,color_class,required}` · `success_criteria` · `validation_policy`

Optionnels : `title`, `instruction`, `explanation`, `word_bank[]{word,role}`, `forbidden_patterns{rule,min_slots_required}`, `reason_why`, `primary_cta{label,action,placeholder}`, `secondary_cta{label,action,reveal_text}`, `accessibility`, `child_safety`.

## Ce qui vient du JSON vs HTML
- **JSON** : chaque slot (rôle, label, couleur, exemple), le word_bank, le forbidden_patterns, la reason_why, le libellé + placeholder des boutons, les exemples du reveal.
- **HTML** : la légende colorée, la phrase exemple, la bank, le bloc forbidden, les CTAs, le textarea, le layout.

## Garde-fous (child_safety)
- **Anti-invention** : aucun mot de vocabulaire ou contenu pédagogique n'est écrit en dur dans le HTML.
- **BLOCKED** si `sentence_slots` vide, `sentence_goal` absent ou `sentence_builder_id` absent.
- **word_bank absent** → section word_bank masquée (`hidden`), rendu partiel toléré.
- **Color_class enum** : valeurs autorisées `subj` (sky), `verb` (coral), `compl` (mint), `adv` (gold) — extensions possibles via CSS dans le HTML uniquement.

## QA à vérifier
1. Modifier `sentence_slots[].example` → phrase exemple change sans toucher au HTML (critère d'or).
2. `sentence_slots:[]` → BLOCKED propre.
3. `sentence_goal` absent → BLOCKED propre.
4. `word_bank:null` → section bank masquée, aucun crash.
5. Clic mot word_bank → opacité toggle (indicateur de sélection visuelle).
6. CTA primaire → textarea visible + placeholder de l'instance.
7. CTA secondaire → reveal des exemples de l'instance.
8. Responsive 375/768/1024 — slots et bank wrappent sans débordement.

## Source
`INDEX-300-writinglearning-GAB-281-285-PLAYABLE.html` (stage `data-tpl="282"`, classe `ic282`, CSS `.sb-*`).