Fil rouge — Créer un mini-jeu pédagogique

Les trois microressources précédentes vous ont appris à lire une page, à ranger son style et à formuler une demande. Le moment est venu de produire quelque chose de réel : un contenu pédagogique interactif, à partir de vos documents, sans écrire une ligne de HTML à la main — mais en écrivant tout le reste.

1. Ce que vous allez produire

Un mini-jeu jouable en 5 à 10 minutes, qui permet à vos étudiants de tester leurs connaissances sur la synthèse de l'ammoniac — le procédé Haber-Bosch, N₂ + 3 H₂ ⇌ 2 NH₃ — sujet des trois documents de référence qui vous ont été fournis.

Pourquoi un jeu et pas un QCM ? Parce qu'un questionnaire vérifie ce qu'on a retenu, là où un jeu oblige à transférer la notion à une situation nouvelle : régler un réacteur, arbitrer entre deux effets contraires, subir les conséquences d'un mauvais choix. C'est un cran plus haut dans la taxonomie de Bloom, et c'est là que se voit la compréhension réelle.

Voici ce qui doit exister à la fin :

minijeu/
├── references/          les documents fournis, tels quels
│   ├── HABER.pdf
│   ├── ertl_lecture.pdf
│   └── main.pdf
├── programme.md         vos consignes de production
├── index.html           la page du jeu
├── styles.css           tout le style
└── game.js              la logique du jeu

Les trois derniers fichiers seront produits par Claude Code. Les deux premiers, non : c'est votre travail, et c'est lui qui détermine la qualité du résultat.

2. Étape 1 — Préparer le dossier de travail

1. Créer le dossier minijeu

   À un endroit que vous retrouverez, créez un dossier nommé minijeu. Sans espace, sans accent, sans majuscule — la règle de nommage du module 1.1.

2. Y déposer le dossier des références

   Créez à l'intérieur un dossier references, et copiez-y les trois fichiers PDF qui vous ont été remis. Ne les renommez pas : vous devrez les citer par leur nom exact dans votre demande.

3. Ouvrir minijeu dans VS Code

   Clic droit sur le dossier → Ouvrir avec Code. Le dossier, pas un fichier. C'est ce geste qui donne à Claude Code accès aux PDF.

3. Étape 2 — Écrire votre programme.md

C'est le fichier de consignes vu à la microressource 3 : ce que vous ne voulez plus jamais avoir à répéter. Créez programme.md à la racine de minijeu/ et partez du squelette ci-dessous.

# programme.md — mes consignes pour les mini-jeux

## Public et durée
- Étudiants de [niveau]. Une partie dure 5 à 10 minutes.
- Un seul concept par jeu, pas un empilement de notions.

## Contenu
- Le contenu scientifique vient uniquement du dossier references/.
- Si une information manque, signale-le au lieu de l'inventer.

## Technique
- Trois fichiers séparés : index.html, styles.css, game.js.
- Aucune dépendance externe : le jeu doit fonctionner hors ligne.

## Ton
- Français, [tutoiement ou vouvoiement], messages courts.

Quinze lignes : c'est un point de départ, pas un livrable. Tel quel, il vous évitera le pire et rien de plus. À vous de le développer — voici les manques les plus coûteux si vous les laissez.

• Ce qu'est une partie, concrètement

  Combien de tours ? Quels leviers l'apprenant manipule-t-il — des curseurs, des choix, des questions ? Y a-t-il un score, et sur quoi ? Sans cette section, vous obtiendrez un questionnaire à choix multiples, jamais un jeu.

• Le niveau visé

  Écrivez-le noir sur blanc : « les activités visent au minimum le niveau appliquer de la taxonomie de Bloom ; aucune question portant sur une définition ». Sans consigne, un assistant produit spontanément de la restitution.

• Le retour à l'apprenant

  Le plus important, et le plus souvent oublié. Exigez qu'après chaque réponse l'explication dise pourquoi, et qu'un débrief final explique la logique d'ensemble — pas seulement le score.

• Votre identité visuelle

  Vos couleurs en hexadécimal, déclarées comme variables CSS dans :root, vos polices, un thème clair et sombre, un rendu lisible sur téléphone. Écrit une fois ici, cela cesse de varier d'un jeu à l'autre.

• La qualité avant livraison

  « Teste dans un navigateur avant de me livrer : aucune erreur console, les interactions fonctionnent. » Une exigence d'une ligne qui vous épargnera des allers-retours.

4. Étape 3 — Écrire le prompt

Le dossier est prêt, les consignes sont écrites. Reste la demande elle-même — et c'est elle qui décide de ce que vous obtiendrez. C'est à vous de la rédiger : personne d'autre ne sait quel concept vous voulez faire travailler.

Une demande de jeu doit répondre à six questions. Vérifiez-les une à une avant d'envoyer :

Voici la charpente. Les zones en pointillé sont les vôtres — c'est précisément le travail de cette étape.

Charpente — à développer avant de l'envoyer

Crée un mini-jeu pédagogique en HTML, jouable en 5 à 10 minutes.

SOURCES
- Applique les consignes de programme.md.
- Appuie-toi sur les documents du dossier references/ :
  HABER.pdf, ertl_lecture.pdf, main.pdf.

CONCEPT À FAIRE COMPRENDRE
[un seul concept, en une phrase — que doit avoir compris
l'étudiant en sortant du jeu ?]

RÔLE DU JOUEUR ET MÉCANIQUE
- [qui est-il, que manipule-t-il, que cherche-t-il à obtenir ?]
- [les leviers : curseurs, choix, questions… — 2 à 4 maximum]
- [ce qu'il voit réagir en direct : jauges, indicateurs, animation]

SCORE ET FEEDBACK
- [comment le score se calcule, ce qui est récompensé, ce qui est pénalisé]
- Débrief final : explique la logique, pas seulement le score.

TECHNIQUE
- index.html + styles.css + game.js, aucune dépendance externe.
- Jouable au clavier, lisible sur téléphone.
- Teste dans un navigateur avant de me livrer : aucune erreur console.

5. Étape 4 — Jouer, corriger, capitaliser

Envoyez, puis jouez-y vous-même une partie entière avant de lire la moindre ligne de code. Les défauts d'un jeu se voient en jouant, pas en relisant.

1. Repérer les trois défauts habituels

   Des situations qui se répètent ; des explications qui paraphrasent la question au lieu de justifier ; un optimum qui tombe au mauvais endroit — le jeu récompense alors une stratégie fausse, ce qui est pire que pas de jeu du tout.

2. Corriger par petites touches

   Une correction à la fois, chacune délimitée. La règle du petit périmètre s'applique ici comme ailleurs.

3. Vérifier la chimie

   C'est votre responsabilité, pas la sienne. Contrôlez les valeurs affichées contre vos documents : un chiffre faux dans un jeu sera retenu comme vrai par vos étudiants.

Une fois le jeu au point, un dernier réflexe : les précisions que vous avez dû donner en cours de route valent pour toutes vos productions à venir. Faites-les remonter dans le fichier de consignes plutôt que de les redonner la prochaine fois.

Relis les demandes que je t'ai faites depuis le début de cette session. Repère les consignes que j'ai dû te donner et qui ne figurent pas encore dans programme.md. Propose-moi les règles à ajouter, formulées comme les existantes et rangées dans les sections correspondantes. Ne modifie rien avant que j'aie validé.

Lisez ce qu'il propose, gardez ce qui est juste, écartez le reste — c'est votre fichier. Au deuxième ou troisième jeu produit, il contiendra l'essentiel de ce que vous auriez répété cent fois.

6. Vérifier avant de passer à la suite