// template-pack-3-hg-sciences.jsx // PACK 3 · HISTOIRE-GEO / SCIENCES — Allo Education Books v1.2 // 10 templates pour les pages visuelles complexes : frises, cartes, // documents, photographies, croquis, protocoles, schémas, tableaux, // équations chimiques, fiches notion. Tous composés strictement à partir // des blocs verrouillés (PageShell, PageTitle, Box, Cols, KettyBubble, // QRBlock, TableBlock, FigureBlock) + helpers visuels locaux. // Aucun emoji, tous les pictos via iconKey / . Format 8.5×11 // préservé, header / footer hérités du PageShell. const { Fragment: P3_F } = React; /* ──────────────────────────────────────────────────────────────────────── Helpers visuels locaux — uniquement du SVG / CSS, jamais d'emoji ──────────────────────────────────────────────────────────────────────── */ function P3Pin({ n, tone = "primary" }) { const bg = tone === "orange" ? "var(--ae-orange)" : tone === "green" ? "var(--ae-success)" : "var(--ae-primary)"; return ( {n} ); } function P3LegendSwatch({ color, hatch, children }) { return (
{children}
); } function P3DocChip({ iconKey, label, value }) { return (
{label} {value}
); } /* ═════════════════════════════════════════════════════════════════ 01 · timeline-lesson — Frise chronologique (Histoire) ═════════════════════════════════════════════════════════════════ */ function P3TimelineLesson({ density, qrVisible, scoreVisible, scale = 1 }) { const events = [ { date: "1789", label: "Prise de la Bastille", tone: "primary" }, { date: "1791", label: "Constitution", tone: "primary" }, { date: "1792", label: "Proclamation de la République", tone: "orange" }, { date: "1793", label: "Exécution de Louis XVI", tone: "orange" }, { date: "1794", label: "Chute de Robespierre", tone: "primary" }, { date: "1799", label: "Coup d'État de Bonaparte", tone: "green" }, ]; return ( {/* Frise — axe horizontal */}
{/* axe */}
{/* graduations */}
{events.map((e, i) => { const above = i % 2 === 0; const dotColor = e.tone === "orange" ? "var(--ae-orange)" : e.tone === "green" ? "var(--ae-success)" : "var(--ae-primary)"; return (
{/* tick */}
{/* connector */}
{/* label */}
{e.date}
{e.label}
); })}
Monarchie constitutionnelle Première République Consulat
Déclaration des droits de l'homme : Fin de la monarchie : Sacre de Napoléon :
Pour bien lire une frise, repère l'unité (année, siècle), puis les périodes de couleur.
); } /* ═════════════════════════════════════════════════════════════════ 02 · map-labeling — Carte à compléter (Géographie) ═════════════════════════════════════════════════════════════════ */ function P3MapLabeling({ density, qrVisible, scoreVisible, scale = 1 }) { // Carte muette stylisée de la France métropolitaine — silhouette simple en SVG const FranceShape = () => ( {/* silhouette France approx */} {/* fleuves stylisés */} {/* points à placer (étiquettes A-E) */} {[ { x: 165, y: 100, n: "A" }, { x: 100, y: 165, n: "B" }, { x: 215, y: 145, n: "C" }, { x: 175, y: 215, n: "D" }, { x: 240, y: 220, n: "E" }, ].map((p, i) => ( {p.n} ))} {/* rose des vents */} N ); return (
Mots à utiliser : Loire · Garonne · Pyrénées · Alpes · Marseille
Quel océan borde la France à l'ouest ? Cite deux pays voisins de la France : Quelle est la plus haute montagne ?
); } /* ═════════════════════════════════════════════════════════════════ 03 · historical-document-study — Étude de document ═════════════════════════════════════════════════════════════════ */ function P3HistoricalDocStudy({ density, qrVisible, scoreVisible, scale = 1 }) { return ( {/* Ligne d'identité du document */}
{/* Document — bien séparé visuellement */}
Verdun, 3 mars 1916 « Ma chère Marie,
Voilà bientôt huit jours que nous tenons cette tranchée. La boue nous arrive aux genoux, le froid mord nos mains malgré les gants. Hier, l'artillerie allemande a tonné toute la nuit ; ce matin, le silence est presque pire que le bruit. Nous mangeons peu, nous dormons par quart d'heure. Mais nous tenons. Pour vous, pour la France.
Embrasse les enfants pour moi. — Henri. »
Source : Archives départementales de la Meuse, série R, lettre n°1342 (extrait abrégé).
Qui écrit, à qui, quand ? Quels mots décrivent les conditions de vie ? Quelle bataille est évoquée ? Cite une émotion exprimée : Pourquoi tient-il malgré tout ?
Que m'apprend ce document sur la vie des soldats en 1916 ?
); } /* ═════════════════════════════════════════════════════════════════ 04 · image-analysis — Analyse d'image / photo ═════════════════════════════════════════════════════════════════ */ function P3ImageAnalysis({ density, qrVisible, scoreVisible, scale = 1 }) { return ( {/* Image placeholder — grande */}
{/* picto de placeholder image */}
[ Image · placeholder production ]
data-prod-replace="image"
Sandro Botticelli, La Primavera, c. 1482, tempera sur bois, 203 × 314 cm — Galerie des Offices, Florence.
Ce que je vois — sans interpréter.
Ce que cela signifie — symboles, contexte, intention.
Combien de personnages au total ? Quel est le personnage central ? Quelle saison est évoquée ? Cite un détail naturaliste :
  • Allégorie — représentation d'une idée par une figure.
  • Tempera — peinture à l'œuf utilisée à la Renaissance.
  • Composition — organisation des personnages.
  • Mécène — celui qui finance l'œuvre.
); } /* ═════════════════════════════════════════════════════════════════ 05 · geo-sketch — Croquis / schéma de géographie ═════════════════════════════════════════════════════════════════ */ function P3GeoSketch({ density, qrVisible, scoreVisible, scale = 1 }) { // Croquis simplifié : une métropole avec ses centres et périphéries const SketchSVG = () => ( {/* couronnes */} {/* axes */} {/* gares */} {/* hachures industrielles */} {/* étiquettes */} CBD ZI Périurbain Banlieue ); return (
I · Centres et fonctions
Centre des affaires (CBD) Couronne dense résidentielle Zone industrielle / logistique
II · Réseaux
Axe majeur (autoroute, RER) Pôle multimodal (gare)
III · Dynamiques
Étalement périurbain
); } /* ═════════════════════════════════════════════════════════════════ 06 · science-protocol — Protocole expérimental (SVT / Physique) ═════════════════════════════════════════════════════════════════ */ function P3ScienceProtocol({ density, qrVisible, scoreVisible, scale = 1 }) { const steps = [ "Verser 50 mL d'eau dans un bécher propre.", "Mesurer la température initiale T₀ avec le thermomètre.", "Allumer le bec Bunsen et placer le bécher sur la grille.", "Toutes les 30 secondes, relever la température et noter.", "Arrêter dès que la température reste constante (palier).", ]; const matos = ["Bécher 100 mL", "Bec Bunsen", "Trépied + grille", "Thermomètre", "Eau distillée 50 mL", "Chronomètre"]; return (
La température de l'eau continue-t-elle d'augmenter pendant qu'elle bout ?
Je propose une réponse à vérifier.
    {matos.map((m, i) =>
  • {m}
  • )}
    {steps.map((s, i) => (
  1. {s}
  2. ))}
Allume le bec Bunsen après avoir attaché tes cheveux et baissé tes lunettes de sécurité. Manipule le bécher avec la pince — il est très chaud.
Ce que j'ai relevé pendant l'expérience.
Réponse à la question, en lien avec mon hypothèse.
); } /* ═════════════════════════════════════════════════════════════════ 07 · science-diagram-labeling — Schéma à légender ═════════════════════════════════════════════════════════════════ */ function P3DiagramLabeling({ density, qrVisible, scoreVisible, scale = 1 }) { // Schéma : cellule animale stylisée const CellSVG = () => ( {/* membrane */} {/* cytoplasme */} {/* noyau */} {/* mitochondries */} {/* vacuoles */} {/* repères numérotés */} {[ { x: 195, y: 115, n: 1, lx: 320, ly: 50 }, { x: 320, y: 50, n: 1, label: true }, { x: 120, y: 90, n: 2, lx: 40, ly: 50 }, { x: 40, y: 50, n: 2, label: true }, { x: 305, y: 120, n: 3, lx: 340, ly: 130 }, { x: 340, y: 130, n: 3, label: true }, { x: 250, y: 160, n: 4, lx: 320, ly: 200 }, { x: 320, y: 200, n: 4, label: true }, ].filter(p => !p.label).map((p, i) => ( ))} {[ { x: 320, y: 50, n: 1 }, { x: 40, y: 50, n: 2 }, { x: 340, y: 130, n: 3 }, { x: 320, y: 200, n: 4 }, ].map((p, i) => ( {p.n} ))} ); return (
Choisis dans la liste : Membrane · Noyau · Mitochondrie · Vacuole
{[1,2,3,4].map(n => (
))}
Noyau : Mitochondrie : Membrane :
Cite une différence entre une cellule animale et une cellule végétale :
); } /* ═════════════════════════════════════════════════════════════════ 08 · classification-table — Tableau de classification ═════════════════════════════════════════════════════════════════ */ function P3ClassificationTable({ density, qrVisible, scoreVisible, scale = 1 }) { const rows = [ ["Truite", "Eau", "Branchies", "Écailles", "✔ exemple"], ["Aigle", "—", "—", "—", ""], ["Grenouille","—", "—", "—", ""], ["Dauphin", "—", "—", "—", ""], ["Lézard", "—", "—", "—", ""], ]; return (
{["Animal", "Milieu", "Respiration", "Revêtement", "État"].map((h, i) => ( ))} {rows.map((r, ri) => ( {r.map((c, ci) => ( ))} ))}
{h}
{c || "\u00A0"}
); } /* ═════════════════════════════════════════════════════════════════ 09 · chemistry-equation — Équation chimique ═════════════════════════════════════════════════════════════════ */ function P3ChemistryEquation({ density, qrVisible, scoreVisible, scale = 1 }) { // Atomes stylisés sous forme de pastilles colorées const Atom = ({ symbol, color }) => ( {symbol} ); const Plus = () => (+); const Arrow = () => (); return (
  1. Compter les atomes de chaque type, à gauche et à droite.
  2. Ajouter des coefficients devant les molécules pour équilibrer.
  3. Ne jamais modifier les indices d'une formule (H₂O reste H₂O).
{/* Réaction principale illustrée */}
CH₄ 2 O₂ CO₂ 2 H₂O
Atomes avant
1 C · 4 H · 4 O
Atomes après
1 C · 4 H · 4 O
  H₂   O₂   H₂O
Fe   O₂   Fe₂O₃
C   O₂ CO₂
); } /* ═════════════════════════════════════════════════════════════════ 10 · science-concept-card — Fiche notion scientifique ═════════════════════════════════════════════════════════════════ */ function P3ScienceConceptCard({ density, qrVisible, scoreVisible, scale = 1 }) { // Schéma simple d'un circuit électrique const CircuitSVG = () => ( {/* fil */} {/* pile */} Pile {/* lampe */} Lampe {/* interrupteur */} Interrupteur {/* flèches courant */} ); return (
Un circuit électrique est un ensemble fermé de composants reliés par des fils conducteurs, qui permet la circulation du courant entre les bornes d'un générateur.
Une lampe de poche contient une pile (générateur), une ampoule (récepteur) et un interrupteur. Quand on appuie sur l'interrupteur, le circuit se ferme et l'ampoule s'allume.
Le courant ne circule que si le circuit est fermé. Un fil coupé ou un interrupteur ouvert = pas de courant, donc lampe éteinte.
1. Le courant circule dans un circuit ouvert.   V / F
2. La pile fournit l'énergie au circuit.   V / F
3. L'interrupteur sert à allumer ou éteindre le circuit.   V / F
); } /* ──────────────────────────────────────────────────────────────────────── Exports ──────────────────────────────────────────────────────────────────────── */ Object.assign(window, { P3TimelineLesson, P3MapLabeling, P3HistoricalDocStudy, P3ImageAnalysis, P3GeoSketch, P3ScienceProtocol, P3DiagramLabeling, P3ClassificationTable, P3ChemistryEquation, P3ScienceConceptCard, });