// template-pack-5-primaire.jsx // PACK 5 · PRIMAIRE CP / CE1 / CE2 — Allo Education Books v1.2 // 12 templates imprimables, lisibles, doux mais pas bébé. // Toutes les pages passent par . Aucun header/footer recréé. // Pas d'emoji. Toutes icônes via ou iconKey. Pilotables par data. /* ════════════════════════════════════════════════════════════════════════ Helpers locaux primaire — gros caractères, lignes Seyès, cases larges. ════════════════════════════════════════════════════════════════════════ */ function P5BigConsigne({ children }) { return (
{children}
); } function P5WriteBox({ height = "0.6in", width = "100%", style }) { return
; } // Seyès lined writing area (3-line writing rows) function SeyesLines({ rows = 3, height = "0.45in", marginTop = "0.06in" }) { return (
{Array.from({ length: rows }).map((_, i) => ( {/* main baseline */} {/* x-height */} {/* ascender */} {/* descender */} ))}
); } function P5Star() { return ; } function P5LetterTile({ children, big = false, tone = "primary" }) { const c = tone === "orange" ? "var(--ae-orange)" : tone === "yellow" ? "var(--ae-yellow-dark)" : "var(--ae-primary)"; return ( {children} ); } /* ════════════════════════════════════════════════════════════════════════ 1 · FICHE SON / SYLLABES (template: "phonics-syllables-sheet") ════════════════════════════════════════════════════════════════════════ */ function P1Phonics({ density, qrVisible, scoreVisible, scale = 1 }) { const son = "ou"; const syllabes = ["chou", "fou", "mou", "tou", "bou", "dou", "lou", "rou"]; const motsExemples = [ { mot: "loup", img: "loup" }, { mot: "poule", img: "poule" }, { mot: "roue", img: "roue" }, { mot: "douche",img: "douche" }, ]; const phrases = [ "Le loup a une grosse bouche.", "La poule cache ses poussins.", "J'aime jouer avec ma toupie.", ]; const items = ["bateau", "boule", "souris", "papa", "rouge", "table", "chouette", "lit"]; return ( {/* Hero son */}
{son}
S'écrit
o u = {son}
{/* Syllabes */}
{syllabes.map(s => { const head = s.slice(0, s.length - 2); return ( {head} {son} ); })}
{/* Mots exemples + entoure */}
{motsExemples.map(m => (
image · {m.img}
{m.mot}
))}
{items.map(w => {w})}
{/* Lecture à voix haute */}
{phrases.map((p, i) => (
0 ? "1px dashed var(--ae-border)" : "none", }}> {p}
))}
Si je bloque sur un mot, je le découpe en syllabes : ch-ou, p-ou-le.
); } /* ════════════════════════════════════════════════════════════════════════ 2 · LECTURE DE MOTS (template: "word-reading-sheet") ════════════════════════════════════════════════════════════════════════ */ function ColoredSyllableWord({ parts }) { // parts = [["ch", "p"], ["a", "o"]…] — alternating colored syllables const colors = ["var(--ae-primary)", "var(--ae-orange)"]; return ( {parts.map((p, i) => ( {p} ))} ); } function P2WordReading({ density, qrVisible, scoreVisible, scale = 1 }) { const niveaux = [ { lab: "Niveau 1 — mots de 2 syllabes", tone: "primary", mots: [ ["ma", "ma"], ["pa", "pi"], ["pi", "pa"], ["ba", "teau"], ["ca", "deau"], ["pou", "le"], ], }, { lab: "Niveau 2 — mots de 3 syllabes", tone: "orange", mots: [ ["pa", "pil", "lon"], ["cho", "co", "lat"], ["te", "lé", "phone"], ["a", "ni", "mal"], ["mu", "si", "que"], ["bi", "ci", "clette"], ], }, { lab: "Niveau 3 — mots plus longs", tone: "yellow", mots: [ ["or", "di", "na", "teur"], ["pa", "ra", "pluie"], ["di", "no", "saure"], ["é", "lec", "tri", "que"], ], }, ]; const phrase = ["Le", "petit", "papillon", "vole", "vers", "le", "soleil."]; return (
{niveaux.map((n, i) => (
{n.mots.map((parts, j) => (
))}
))}
Mot
Lu seul
Avec aide
À retravailler
{["papillon", "ordinateur", "bicyclette", "dinosaure"].map(w => (
{w} {[0, 1, 2].map(i => (
))}
))}
{phrase.map((w, i) => ( {w} ))}
); } /* ════════════════════════════════════════════════════════════════════════ 3 · LECTURE COMPRÉHENSION COURTE (template: "primary-reading-comprehension") ════════════════════════════════════════════════════════════════════════ */ function P3PrimaryReading({ density, qrVisible, scoreVisible, scale = 1 }) { const text = [ "Lila a un petit chat qui s'appelle Mistou.", "Il est gris et blanc, avec une tache noire sur le museau.", "Chaque matin, Mistou suit Lila jusqu'à la porte de l'école.", "Il l'attend ensuite sur le mur du jardin, près du grand cerisier.", "Quand Lila revient à 17 heures, Mistou saute pour lui dire bonjour.", "Le soir, ils regardent ensemble la lune par la fenêtre du salon.", ]; const questions = [ ["Comment s'appelle le chat de Lila ?", true], ["De quelle couleur est Mistou ?", true], ["Où Mistou attend-il Lila pendant l'école ?", true], ["À quelle heure Lila rentre-t-elle ?", true], ]; const colorChoices = [ "Mistou est un chien.", "Mistou est un chat.", "Mistou est un oiseau.", ]; return (
{text.map((l, i) =>
{l}
)}
{questions.map(([q], i) => (
0 ? "0.06in" : 0, borderTop: i > 0 ? "1px dashed var(--ae-border)" : "none", }}>
{i + 1}. {q}
))}
{colorChoices.map((c, i) => (
{c}
))}
« Mistou attend Lila sur le mur du jardin. »
); } /* ════════════════════════════════════════════════════════════════════════ 4 · ÉCRITURE / GRAPHISME (template: "handwriting-practice") ════════════════════════════════════════════════════════════════════════ */ function P4Handwriting({ density, qrVisible, scoreVisible, scale = 1 }) { const lettre = "a"; return (
{lettre}
{lettre}
{lettre.toUpperCase()}
{`${lettre} ${lettre} ${lettre}`}
amipapamamanarbre
« Anna et Adam jouent dans le jardin. »
{[ "Je tiens bien mon crayon.", "Mes lettres touchent la ligne.", "Je laisse une espace entre chaque mot.", "Mon cahier est propre.", ].map((c, i) => ( {c} ))}
Je m'arrête, je souffle, je regarde le modèle, puis je trace.
); } /* ════════════════════════════════════════════════════════════════════════ 5 · DICTÉE PRÉPARÉE (template: "primary-spelling-dictation") ════════════════════════════════════════════════════════════════════════ */ function P5Dictation({ density, qrVisible, scoreVisible, scale = 1 }) { const mots = [ { mot: "écureuil", piege: "il finit par -euil" }, { mot: "feuille", piege: "le e après f, et le 2 l" }, { mot: "automne", piege: "le m muet" }, { mot: "branche", piege: "le n avant le ch" }, { mot: "grimper", piege: "i avant m" }, { mot: "champignon", piege: "ch + gn" }, ]; return (
{mots.map((m, i) => (
{m.mot} piège : {m.piege}
))}
{mots.slice(0, 4).map((m, i) => (
0 ? "1px dashed var(--ae-border)" : "none", }}> {m.mot}
))}
Je relis avec une couleur :
  • les majuscules · les points
  • les pluriels (s, x)
  • les mots de la liste
  • les accords sujet-verbe
Avant la dictée, je ferme les yeux, je vois le mot dans ma tête, puis je l'écris en l'air avec mon doigt.
); } /* ════════════════════════════════════════════════════════════════════════ 6 · CALCUL MENTAL PRIMAIRE (template: "primary-mental-math") ════════════════════════════════════════════════════════════════════════ */ function P6MentalMath({ density, qrVisible, scoreVisible, scale = 1 }) { const blocks = [ { lab: "Additions", tone: "primary", ops: ["7 + 5", "8 + 6", "9 + 4", "6 + 7", "8 + 8", "9 + 7", "7 + 6", "9 + 5"], }, { lab: "Doubles & moitiés", tone: "orange", ops: ["double de 7", "double de 9", "moitié de 12", "moitié de 18", "double de 12", "double de 15", "moitié de 20", "moitié de 24"], }, { lab: "Tables × 2 et × 5", tone: "yellow", ops: ["3 × 2", "5 × 2", "8 × 2", "9 × 2", "4 × 5", "6 × 5", "7 × 5", "9 × 5"], }, ]; return (
Temps conseillé : 4 min par série Score visé : 6/8 minimum
{blocks.map((b, i) => (
{b.ops.map((op, j) => (
{op} =
))}
))}
Je commence par les calculs faciles pour mettre des points dans mon panier, puis je reviens sur ceux qui me bloquent.
); } /* ════════════════════════════════════════════════════════════════════════ 7 · CALCUL POSÉ (template: "written-calculation") ════════════════════════════════════════════════════════════════════════ */ function P7WrittenCalc({ density, qrVisible, scoreVisible, scale = 1 }) { // Each calculation as digit array, padded so columns line up const adds = [ { a: "247", b: "138" }, { a: "356", b: "419" }, { a: " 89", b: "127" }, ]; const subs = [ { a: "532", b: "146" }, { a: "401", b: "238" }, ]; const muls = [ { a: "47", b: " 6" }, { a: "83", b: " 4" }, ]; function ColumnCalc({ a, b, op, retenue = true }) { const w = Math.max(a.length, b.length); const pad = (s) => s.padStart(w, " ").split(""); return (
{retenue && (
{pad("").map((_, i) => ( · ))}
)}
{pad(a).map((c, i) => {c})}
{op} {pad(b).map((c, i) => {c})}
{pad("").map((_, i) => ( ))}
); } return (
1. J'aligne les unités à droite.
2. 6 + 8 = 14 → j'écris 4, je retiens 1.
3. 1 + 5 + 7 = 13 → j'écris 3, je retiens 1.
4. 1 + 3 + 1 = 5 → j'écris 5. Total : 534.
{adds.map((c, i) => )}
{subs.map((c, i) => )}
{muls.map((c, i) => )}
Si je n'ai pas de retenue, je laisse l'espace vide en haut — mais je garde toujours mes colonnes bien alignées, sinon je me trompe.
); } /* ════════════════════════════════════════════════════════════════════════ 8 · PETITS PROBLÈMES (template: "primary-word-problems") ════════════════════════════════════════════════════════════════════════ */ function P8WordProblems({ density, qrVisible, scoreVisible, scale = 1 }) { const problemes = [ { n: 1, enonce: "Léa a 24 billes. Sa grande sœur lui en donne 18. Combien de billes Léa a-t-elle maintenant ?", donnees: ["24 billes au départ", "18 billes données"], ops: ["+", "−", "×"], }, { n: 2, enonce: "Dans la classe, il y a 27 élèves. 9 sont absents aujourd'hui. Combien d'élèves sont en classe ?", donnees: ["27 élèves au total", "9 élèves absents"], ops: ["+", "−", "×"], }, { n: 3, enonce: "Maman achète 6 paquets de 5 cookies. Combien de cookies a-t-elle en tout ?", donnees: ["6 paquets", "5 cookies par paquet"], ops: ["+", "−", "×"], }, ]; return (
  1. 1Je lis 2 fois l'énoncé en entier.
  2. 2J'entoure les nombres et la question.
  3. 3Je choisis l'opération.
  4. 4Je calcule, puis je rédige une phrase de réponse.
{problemes.map(p => (
    {p.donnees.map((d, i) =>
  • {d}
  • )}
Opération choisie
{p.ops.map(o => ( {o} ))}
Mon calcul
Phrase de réponse
))}
Une phrase de réponse reprend les mots de la question. C'est elle qui me fait gagner les points, pas seulement le calcul.
); } /* ════════════════════════════════════════════════════════════════════════ 9 · NUMÉRATION (template: "number-sense-sheet") ════════════════════════════════════════════════════════════════════════ */ function NumberLine({ from = 0, to = 100, step = 10, mark }) { const ticks = []; for (let v = from; v <= to; v += step) ticks.push(v); return ( {/* arrow */} {ticks.map((v, i) => { const x = 20 + (760 * i) / (ticks.length - 1); const isMark = v === mark; return ( {v} {isMark && } ); })} ); } function P9NumberSense({ density, qrVisible, scoreVisible, scale = 1 }) { const nombre = 348; const compares = [ ["348", "?", "843"], ["348", "?", "248"], ["348", "?", "350"], ]; return (
En chiffres En lettres
C D U
348 = … × 100 + … × 10 + … × 1
{compares.map(([a, , b], i) => (
{a} {b}
))}
); } /* ════════════════════════════════════════════════════════════════════════ 10 · GÉOMÉTRIE PRIMAIRE (template: "primary-geometry-sheet") ════════════════════════════════════════════════════════════════════════ */ function P10Geometry({ density, qrVisible, scoreVisible, scale = 1 }) { return (
{[ { svg: , n: "Carré" }, { svg: , n: "Rectangle" }, { svg: , n: "Cercle" }, { svg: , n: "Triangle" }, ].map((f, i) => (
{f.svg}
{f.n}
))}
12 cm 7 cm
Côtés du triangle Sommets du triangle
); } /* ════════════════════════════════════════════════════════════════════════ 11 · FICHE "JE RÉVISE" (template: "primary-revision-sheet") ════════════════════════════════════════════════════════════════════════ */ function P11RevisionSheet({ density, qrVisible, scoreVisible, scale = 1 }) { return (
{/* Lecture */}
« En automne, les feuilles changent de couleur. Le vent les fait tomber. Les écureuils ramassent des noisettes. »
Q. Que ramassent les écureuils ?
{/* Écriture */}
« L'automne arrive. »
{/* Calcul */}
{["12 + 8", "20 − 7", "5 × 4", "30 − 12", "9 + 9", "7 × 2"].map(op => (
{op} =
))}
{/* Problème */}
Énoncé. Tom a 35 € dans sa tirelire. Il achète un livre à 14 €. Combien lui reste-t-il ?
Mon calcul
Phrase réponse
{["Lecture", "Écriture", "Calcul", "Problème"].map(l => (
{l}
))}
Tu as fait ta fiche du jour ! Demain, on continue avec un nouveau bloc. La régularité, c'est ton meilleur allié.
); } /* ════════════════════════════════════════════════════════════════════════ 12 · FICHE GÉNÉRATEUR PROF/PARENT (template: "teacher-printable-worksheet") ════════════════════════════════════════════════════════════════════════ */ function P12TeacherPrintable({ density, qrVisible, scoreVisible, scale = 1 }) { return ( {/* Bandeau identité */}
{[ { lab: "Prénom", val: "" }, { lab: "Niveau", val: "CE1" }, { lab: "Date", val: "" }, ].map((f, i) => (
{f.lab}
{f.val || "_____________"}
))}
Réviser les additions à retenue jusqu'à 100.
{/* Exercices courts */}
{["35 + 18", "47 + 26", "58 + 19", "29 + 35", "44 + 27", "63 + 28"].map(op => (
{op} =
))}
{[["28 + …", "= 50"], ["45 + …", "= 60"], ["… + 17", "= 30"], ["… + 35", "= 70"]].map(([a, b], i) => (
{a}{b}
))}
Camille a 47 autocollants. Sa tante lui en offre 25. Combien d'autocollants Camille possède-t-elle maintenant ?
Mon calcul
Phrase réponse
{/* Bandeau fin */}
Fiche d'entraînement gratuite · Allo Education · Plus de fiches sur alloeducation.fr/fiches.
); } /* ──────────────────────────────────────────────────────────────────────── Export ──────────────────────────────────────────────────────────────────────── */ Object.assign(window, { P1Phonics, P2WordReading, P3PrimaryReading, P4Handwriting, P5Dictation, P6MentalMath, P7WrittenCalc, P8WordProblems, P9NumberSense, P10Geometry, P11RevisionSheet, P12TeacherPrintable, });