{series.map((s, i) => (

{s.theme}

{s.items.map(it => {it})}

J'explique pourquoi

))}

Avant d'entourer, demande-toi : quel point commun ont 4 mots de la liste ? L'intrus est celui qui ne le partage pas. ); } /* ════════════════════════════════════════════════════════════════════════ 5 · VRAI / FAUX EXPRESS (template: "true-false-game") ════════════════════════════════════════════════════════════════════════ */ function J5TrueFalse({ density, qrVisible, scoreVisible, scale = 1 }) { const items = [ "La Révolution française commence en 1789.", "Louis XVI était empereur des Français.", "La prise de la Bastille a eu lieu le 14 juillet 1789.", "La Déclaration des droits de l'homme date de 1791.", "Marie-Antoinette était reine d'Angleterre.", "La Première République est proclamée en 1792.", "Robespierre était un général de l'Empire.", "La devise « Liberté, Égalité, Fraternité » date de la Révolution.", ]; return (

{items.map((txt, i) => (

0 ? "1px dashed var(--ae-border)" : "none", }}> {txt}

))}

Confondre « roi » et « empereur ». Sous l'Ancien Régime, le dirigeant est un roi. L'empereur, c'est plus tard, avec Napoléon. ); } /* ════════════════════════════════════════════════════════════════════════ 6 · RELIER / ASSOCIER (template: "matching-game") ════════════════════════════════════════════════════════════════════════ */ function J6Matching({ density, qrVisible, scoreVisible, scale = 1 }) { // Anglais 6e — vocabulaire animaux + maison const left = [ ["1", "Bedroom"], ["2", "Kitchen"], ["3", "Living room"], ["4", "Bathroom"], ["5", "Garden"], ["6", "Garage"], ]; const right = [ ["A", "Le jardin"], ["B", "Le salon"], ["C", "La salle de bain"], ["D", "La chambre"], ["E", "Le garage"], ["F", "La cuisine"], ]; return (

{/* English column */}

English

{left.map(([n, w]) => (

{w}

))}

{/* Connector lane */}

relier

{/* French column */}

Français

{right.map(([ch, t]) => (

{ch} {t}

))}

Reporte tes paires ici

Lis chaque paire à voix haute en anglais puis en français. Le son de la traduction t'aide à mémoriser bien plus vite que la lecture silencieuse. ); } /* ════════════════════════════════════════════════════════════════════════ 7 · REMETTRE DANS L'ORDRE (template: "ordering-game") ════════════════════════════════════════════════════════════════════════ */ function OrderCard({ letter, text }) { return (

{letter} {text}

); } function J7Ordering({ density, qrVisible, scoreVisible, scale = 1 }) { const cards = [ ["A", "L'eau s'évapore au-dessus des océans, des lacs et des rivières."], ["B", "Les nuages se déplacent avec le vent et se refroidissent."], ["C", "Les gouttes d'eau retombent sous forme de pluie ou de neige."], ["D", "L'eau ruisselle, s'infiltre dans les sols et rejoint les nappes."], ["E", "Les fleuves transportent l'eau jusqu'aux mers et aux océans."], ["F", "La vapeur d'eau monte et se condense en nuages."], ]; return (

Pour la cuisson d'un œuf : casser → battre → cuire → servir. La logique : tu commences par l'action qui rend possible la suivante.

{cards.map(([l, t]) => (

))}

Frise · ordre des étapes

{[1, 2, 3, 4, 5, 6].map((n, i) => (

{n} ?

{i < 5 && } ))}

Cherche d'abord l'étape de départ : celle qui ne dépend d'aucune autre. C'est ton point d'ancrage pour tout reconstituer. ); } /* ════════════════════════════════════════════════════════════════════════ 8 · LABYRINTHE ÉDUCATIF (template: "maze-game") ════════════════════════════════════════════════════════════════════════ */ function MazeSVG() { // Schematic 11×7 maze. Walls drawn as line segments. Path from (0,3)→(10,3) return ( ); } function J8Maze({ density, qrVisible, scoreVisible, scale = 1 }) { const questions = [ ["Combien de continents sur Terre ?", "5", "6", "7"], ["7 × 8 = ?", "54", "56", "64"], ["Capitale du Portugal ?", "Madrid", "Lisbonne", "Porto"], ["Synonyme de « rapide » ?", "Lent", "Vif", "Long"], ["Périmètre d'un carré de 4 cm ?", "8 cm", "12 cm", "16 cm"], ]; return (

{questions.map(([q, ...opts], i) => (

{q}

{opts.map((o, j) => ( {o} ))}

))}

); } /* ════════════════════════════════════════════════════════════════════════ 9 · COLORIAGE MAGIQUE (template: "magic-coloring-game") ════════════════════════════════════════════════════════════════════════ */ const COLORING_PALETTE = [ { n: 1, name: "Bleu", hex: "var(--ae-primary)", soft: "var(--ae-primary-soft)" }, { n: 2, name: "Orange", hex: "var(--ae-orange)", soft: "var(--ae-orange-soft)" }, { n: 3, name: "Jaune", hex: "var(--ae-yellow-dark)", soft: "var(--ae-yellow-soft)" }, { n: 4, name: "Vert", hex: "var(--ae-success)", soft: "var(--ae-success-soft)" }, { n: 5, name: "Rouge", hex: "var(--ae-error)", soft: "var(--ae-error-soft)" }, ]; function ButterflyZones({ outlined = true }) { // Simple butterfly with 12 numbered zones // Layout: cols 1-12 mapped to wing zones (we keep schematic shapes) const zones = [ // Body { d: "M 215 60 Q 225 90 215 200 Q 205 90 215 60 Z", n: 1 }, // Left top wing { d: "M 210 90 Q 130 60 90 110 Q 130 140 210 130 Z", n: 2 }, { d: "M 205 110 Q 150 100 130 130 Q 165 135 205 130 Z", n: 3 }, // Left bottom wing { d: "M 210 140 Q 150 150 110 200 Q 165 200 210 180 Z", n: 4 }, { d: "M 205 165 Q 165 175 150 195 Q 180 195 205 185 Z", n: 5 }, // Right top wing { d: "M 220 90 Q 300 60 340 110 Q 300 140 220 130 Z", n: 1 }, { d: "M 225 110 Q 280 100 300 130 Q 265 135 225 130 Z", n: 2 }, // Right bottom wing { d: "M 220 140 Q 280 150 320 200 Q 265 200 220 180 Z", n: 3 }, { d: "M 225 165 Q 265 175 280 195 Q 250 195 225 185 Z", n: 4 }, // Antennae { d: "M 215 60 Q 200 40 195 30", n: 5, stroke: true }, { d: "M 215 60 Q 230 40 235 30", n: 5, stroke: true }, ]; return ( ); } function J9MagicColoring({ density, qrVisible, scoreVisible, scale = 1 }) { const calcs = [ ["6 + 2", "= ___", "→ Bleu (1)"], ["12 − 6", "= ___", "→ Orange (2)"], ["3 × 3", "= ___", "→ Jaune (3)"], ["20 ÷ 5", "= ___", "→ Vert (4)"], ["7 + 8", "= ___", "→ Rouge (5)"], ]; return (

1Calcule le résultat de chaque opération.
2Reporte le numéro indiqué (1 à 5) dans le code couleur.
3Colorie chaque zone du dessin avec la couleur correspondante.

{COLORING_PALETTE.map(c => (

{c.n} {c.name}

))}

{calcs.map(([op, eq, hint], i) => (

{op} {eq} {hint}

))}

); } /* ════════════════════════════════════════════════════════════════════════ 10 · PIXEL ART PAR COORDONNÉES (template: "coordinate-pixel-art") ════════════════════════════════════════════════════════════════════════ */ function CoordinateGrid({ cols = 12, rows = 10, marked = [] }) { const CELL = 18; const ORIGIN_X = 22, ORIGIN_Y = 22; const W = ORIGIN_X + cols * CELL + 4; const H = ORIGIN_Y + rows * CELL + 4; return ( ); } function J10PixelArt({ density, qrVisible, scoreVisible, scale = 1 }) { // Preview hints — student fills in the rest. Star shape coords (1-indexed) const hints = [ [6, 9, "var(--ae-yellow-soft)"], [7, 9, "var(--ae-yellow-soft)"], [6, 8, "var(--ae-yellow-soft)"], [7, 8, "var(--ae-yellow-soft)"], ]; const coords = [ "(6 ; 10) · (7 ; 10)", "(5 ; 9) · (6 ; 9) · (7 ; 9) · (8 ; 9)", "(4 ; 8) · (5 ; 8) · (6 ; 8) · (7 ; 8) · (8 ; 8) · (9 ; 8)", "(3 ; 7) · (4 ; 7) · (10 ; 7) · (11 ; 7)", "(5 ; 6) · (6 ; 6) · (7 ; 6) · (8 ; 6)", "(6 ; 5) · (7 ; 5)", "(5 ; 4) · (8 ; 4)", "(4 ; 3) · (9 ; 3)", ]; return (

On lit les coordonnées (x ; y) dans cet ordre : x = abscisse, axe horizontal (de gauche à droite). y = ordonnée, axe vertical (de bas en haut). On part toujours de l'origine, en bas à gauche.

Couleur conseillée : jaune.

Une fois l'étoile terminée, dessine ta propre image (5 cases minimum) et écris la liste de coordonnées en dessous. Ton voisin la testera. Marque toujours l'abscisse en premier. Une coordonnée inversée fait basculer le pixel de l'autre côté du plan. ); } /* ════════════════════════════════════════════════════════════════════════ 11 · MEMORY · PAIRES À RETROUVER (template: "memory-pairs-game") ════════════════════════════════════════════════════════════════════════ */ function MemoryCard({ children, accent = "primary", small = false }) { const color = accent === "orange" ? "var(--ae-orange)" : accent === "green" ? "var(--ae-success)" : "var(--ae-primary)"; return (

{children}

); } function J11Memory({ density, qrVisible, scoreVisible, scale = 1 }) { // 6 paires anglais ↔ français — verbes irréguliers const pairs = [ { en: "to go", fr: "aller" }, { en: "to be", fr: "être" }, { en: "to have", fr: "avoir" }, { en: "to do", fr: "faire" }, { en: "to see", fr: "voir" }, { en: "to take", fr: "prendre" }, ]; // Shuffle deterministic for visual interest const order = [0, 5, 2, 1, 3, 4, 5, 0, 4, 3, 1, 2]; const cards = order.map((i, idx) => idx % 2 === 0 ? { txt: pairs[i].en, t: "en" } : { txt: pairs[i].fr, t: "fr" }); return (

1Découpe les 12 cartes le long des pointillés.
2Pose-les face cachée sur la table, en désordre.
3Retourne 2 cartes par tour. Si elles forment une paire (anglais / français), garde-les.
4Le joueur avec le plus de paires gagne. Solo : essaye en moins de 12 tours.

{cards.map((c, i) => ( {c.txt} ))}

Tours utilisés : Paires trouvées : Temps :

Joueur 1paires Joueur 2paires Vainqueur

Avant de commencer le memory, lis la liste des 6 paires à voix haute une fois. Cela double tes chances de retrouver les paires rapidement. ); } /* ════════════════════════════════════════════════════════════════════════ 12 · ÉNIGMES / DEVINETTES (template: "riddle-game") ════════════════════════════════════════════════════════════════════════ */ function J12Riddles({ density, qrVisible, scoreVisible, scale = 1 }) { const riddles = [ { n: 1, diff: 1, q: "Plus on m'enlève de matière, plus je grossis. Qui suis-je ?", hint: "Pense à un objet qu'on creuse dans la terre.", }, { n: 2, diff: 2, q: "Je commence la nuit et je termine le matin. On me retrouve aussi au début et à la fin de l'année. Quelle lettre suis-je ?", hint: "Regarde la première et la dernière lettre des mots cités.", }, { n: 3, diff: 2, q: "J'ai des villes, mais pas de maisons ; des forêts, mais pas d'arbres ; des rivières, mais pas d'eau. Qui suis-je ?", hint: "On me déplie sur une table.", }, { n: 4, diff: 3, q: "Si tu me dis, je n'existe plus. Qui suis-je ?", hint: "Garde-le pour toi.", }, { n: 5, diff: 3, q: "Mon père a 5 fils. Quatre s'appellent Lou, La, Li, Le. Comment s'appelle le cinquième ?", hint: "Lis bien la première phrase…", }, ]; return (

{riddles.map(r => (

{r.n} Énigme {r.n}

« {r.q} »

Ma réponse

Indice : {r.hint}

))} {/* Last cell — Ketty bubble fills the grid */}

Une bonne énigme se résout rarement avec la première idée qui vient. Lis 2 fois, repère le mot piège, et essaye plusieurs interprétations avant de répondre. Le QR du footer dévoile les réponses détaillées.

); } /* ──────────────────────────────────────────────────────────────────────── Export ──────────────────────────────────────────────────────────────────────── */ Object.assign(window, { J1Crossword, J2WordSearch, J3SecretCode, J4OddOneOut, J5TrueFalse, J6Matching, J7Ordering, J8Maze, J9MagicColoring, J10PixelArt, J11Memory, J12Riddles, });