svg correction
This commit is contained in:
@@ -67,6 +67,48 @@ Le validateur doit refuser ou signaler :
|
||||
|
||||
Le premier filet de sécurité est disponible dans `backend/tools/validate_svg_quality.py`.
|
||||
|
||||
## Règles anti-chevauchement globales
|
||||
|
||||
Les retours sur les 8 supports fractions montrent que valider une fraction isolée ne suffit pas.
|
||||
Chaque expression mathématique doit réserver une boîte complète avant d'être placée dans la card.
|
||||
|
||||
Règles obligatoires :
|
||||
|
||||
- toute `fraction-g` doit porter un `data-box="x y width height"` couvrant le numérateur, la barre, le dénominateur et la marge pédagogique ;
|
||||
- aucun texte, opérateur, figure, point, disque, bande ou autre fraction ne peut intersecter cette boîte ;
|
||||
- dans une expression, le curseur horizontal avance de la largeur réservée de la fraction plus un espacement minimal de 28 px pour du texte courant et 34 px pour les signes visibles ;
|
||||
- les signes `+`, `-`, `=`, `<`, `>` sont centrés sur l'axe de la barre de fraction, pas sur la ligne de base des chiffres ;
|
||||
- les signes de comparaison sont placés au milieu de l'espace entre les deux boîtes de fractions ;
|
||||
- une fraction posée près d'une figure utilise une zone mathématique dédiée au-dessus, en dessous ou à côté de la figure ; elle ne flotte jamais dans la zone de dessin ;
|
||||
- les lignes d'équations sont espacées d'au moins la hauteur réservée de la plus grande fraction de la ligne plus 18 px ;
|
||||
- une fraction inline dans une phrase garde un espace réservé avant et après, même si le texte semble court ;
|
||||
- les titres de card, légendes et encadrés `À retenir` sont des zones séparées : une fraction ne doit pas empiéter dessus.
|
||||
|
||||
En pratique, chaque card doit être pensée en zones :
|
||||
|
||||
1. zone titre ;
|
||||
2. zone mathématique ;
|
||||
3. zone figure ;
|
||||
4. zone légende ou explication.
|
||||
|
||||
Une génération est rejetée si une boîte mathématique traverse une autre zone. C'est la règle qui évite les cas vus dans les captures : fractions collées aux mots, fractions sur les figures, signes décentrés, et lignes de fractions qui passent sous les schémas.
|
||||
|
||||
## Règles de composition des expressions
|
||||
|
||||
Les expressions doivent être générées par un layout horizontal, jamais par coordonnées libres.
|
||||
|
||||
Le layout prend une liste de tokens :
|
||||
|
||||
- `fraction(n, d, size)` ;
|
||||
- `operator("+")`, `operator("=")`, `operator("<")` ;
|
||||
- `text("est juste après 1")`.
|
||||
|
||||
Chaque token expose sa boîte. L'expression calcule ensuite les positions.
|
||||
Les opérateurs ne sont pas des textes décoratifs : ils ont une boîte propre et une position centrée entre deux tokens mathématiques.
|
||||
|
||||
Pour les équations sur plusieurs lignes, on compose chaque ligne séparément, puis on empile les lignes avec une hauteur constante.
|
||||
On ne réduit jamais l'interligne après coup pour "faire rentrer" une card ; si ça ne rentre pas, on change la disposition.
|
||||
|
||||
## Architecture cible courte
|
||||
|
||||
À court terme :
|
||||
@@ -95,4 +137,3 @@ L'architecture actuelle est acceptable pour afficher et relire des supports déj
|
||||
Elle n'est pas suffisante pour produire régulièrement des contenus mathématiques propres.
|
||||
|
||||
La bonne direction n'est pas de remplacer SVG, mais de déplacer l'intelligence avant le SVG final : composants mathématiques, contraintes géométriques, validation automatique, puis rendu.
|
||||
|
||||
|
||||
@@ -1,55 +1,32 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
|
||||
<defs>
|
||||
<style>
|
||||
.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.frac{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:96px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}
|
||||
.fraction-g .num{font-size:38px}.fraction-g .h2{font-size:28px}.fraction-g .body{font-size:22px}.fraction-g line{stroke-width:3}</style>
|
||||
</defs>
|
||||
<defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.frac-big{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:96px;font-weight:800;fill:#074f4b}.op{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}.frac-line{stroke:#074f4b;stroke-width:4;stroke-linecap:round}.blank{stroke:#7fa79d;stroke-width:3;stroke-dasharray:10 10}</style></defs>
|
||||
<rect class="bg" width="1600" height="900"/>
|
||||
<rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
|
||||
<text x="800" y="116" text-anchor="middle" class="title">Lire et écrire une fraction</text>
|
||||
<text x="800" y="160" text-anchor="middle" class="subtitle">Maths CM1 - Numérateur, dénominateur, unité</text>
|
||||
<line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
|
||||
<g transform="translate(110 245)">
|
||||
<rect width="455" height="300" rx="24" class="soft" />
|
||||
<text x="34" y="58" class="h2">La fraction</text>
|
||||
<text x="228" y="150" text-anchor="middle" class="frac">3</text>
|
||||
<line x1="182" y1="178" x2="274" y2="178" class="line" />
|
||||
<text x="228" y="270" text-anchor="middle" class="frac">4</text>
|
||||
</g>
|
||||
<g transform="translate(625 245)">
|
||||
<rect width="360" height="300" rx="24" class="panel" />
|
||||
<text x="30" y="58" class="h2">Ce que ça dit</text>
|
||||
<circle cx="55" cy="112" r="15" class="orange" />
|
||||
<text x="84" y="120" class="body">3 parts prises</text>
|
||||
<circle cx="55" cy="168" r="15" class="blue" />
|
||||
<text x="84" y="176" class="body">4 parts égales</text>
|
||||
<g class="math-expression">
|
||||
<g transform="translate(30 235)" class="fraction-g">
|
||||
<g transform="translate(110 245)"><rect width="455" height="300" rx="24" class="soft"/><text x="34" y="58" class="h2">La fraction</text><g transform="translate(168 112)" class="fraction-g" data-box="0 -40 110 162">
|
||||
<text x="55" y="-28" text-anchor="middle" class="frac-big">3</text>
|
||||
<line x1="0" y1="22" x2="110" y2="22" class="frac-line"/>
|
||||
<text x="55" y="110" text-anchor="middle" class="frac-big">4</text>
|
||||
</g></g>
|
||||
<g transform="translate(625 245)"><rect width="390" height="300" rx="24" class="panel"/><text x="30" y="58" class="h2">Ce que ça dit</text>
|
||||
<circle cx="55" cy="112" r="15" class="orange"/><text x="84" y="120" class="body">3 parts prises</text>
|
||||
<circle cx="55" cy="168" r="15" class="blue"/><text x="84" y="176" class="body">4 parts égales</text><g class="math-expression" transform="translate(30 218)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -30 38 76">
|
||||
<text x="19" y="-18" text-anchor="middle" class="body">3</text>
|
||||
<line x1="0" y1="3" x2="38" y2="3" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="3" x2="38" y2="3" class="frac-line"/>
|
||||
<text x="19" y="34" text-anchor="middle" class="body">4</text>
|
||||
</g>
|
||||
<text x="64" y="248" class="body"> se lit :</text>
|
||||
</g>
|
||||
<text x="30" y="272" class="body">trois quarts</text>
|
||||
</g>
|
||||
<g transform="translate(1040 245)">
|
||||
<rect width="430" height="300" rx="24" class="panel" />
|
||||
<text x="30" y="58" class="h2">L'unité partagée</text>
|
||||
<g transform="translate(45 110)">
|
||||
<rect x="0" y="0" width="320" height="90" rx="14" fill="#f7fbf9" stroke="#26383d" stroke-width="3" />
|
||||
<rect x="0" y="0" width="80" height="90" rx="14" class="orange" />
|
||||
<rect x="80" y="0" width="80" height="90" class="orange" />
|
||||
<rect x="160" y="0" width="80" height="90" class="orange" />
|
||||
<text x="72" y="13" class="body"> se lit : trois quarts</text>
|
||||
</g></g>
|
||||
<g transform="translate(1070 245)"><rect width="400" height="300" rx="24" class="panel"/><text x="30" y="58" class="h2">L'unité partagée</text><g transform="translate(45 110)"><rect width="320" height="90" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/>
|
||||
<rect x="0" width="80" height="90" rx="12" class="orange"/>
|
||||
<rect x="80" width="80" height="90" class="orange"/>
|
||||
<rect x="160" width="80" height="90" class="orange"/>
|
||||
<line x1="80" y1="0" x2="80" y2="90" class="line"/>
|
||||
<line x1="160" y1="0" x2="160" y2="90" class="line"/>
|
||||
<line x1="240" y1="0" x2="240" y2="90" class="line"/>
|
||||
</g>
|
||||
<text x="45" y="248" class="small">L'unité est coupée en 4 parts égales.</text>
|
||||
</g>
|
||||
<g transform="translate(170 615)">
|
||||
<rect width="1260" height="150" rx="24" class="panel" />
|
||||
<text x="36" y="55" class="h2">À retenir</text>
|
||||
<text x="36" y="100" class="body">Le dénominateur indique le partage. Le numérateur indique les parts prises.</text>
|
||||
</g>
|
||||
</g><text x="45" y="248" class="small">L'unité est coupée en 4 parts égales.</text></g>
|
||||
<g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">À retenir</text><text x="36" y="84" class="body">Le dénominateur indique le partage. Le numérateur indique les parts prises.</text></g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.8 KiB |
@@ -1,77 +1,48 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
|
||||
<defs>
|
||||
<style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.fraction-g .num{font-size:38px}.fraction-g .h2{font-size:28px}.fraction-g .body{font-size:22px}.fraction-g line{stroke-width:3}</style>
|
||||
</defs>
|
||||
<defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.frac-big{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:96px;font-weight:800;fill:#074f4b}.op{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}.frac-line{stroke:#074f4b;stroke-width:4;stroke-linecap:round}.blank{stroke:#7fa79d;stroke-width:3;stroke-dasharray:10 10}</style></defs>
|
||||
<rect class="bg" width="1600" height="900"/>
|
||||
<rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
|
||||
<text x="800" y="116" text-anchor="middle" class="title">Représenter une fraction</text>
|
||||
<text x="800" y="160" text-anchor="middle" class="subtitle">Je partage l'unité en parts égales, puis je colorie</text>
|
||||
<text x="800" y="160" text-anchor="middle" class="subtitle">Je partage l'unité en parts égales, puis je colorie</text>
|
||||
<line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
|
||||
<g transform="translate(110 245)">
|
||||
<rect width="420" height="330" rx="24" class="panel" />
|
||||
<g class="math-expression">
|
||||
<text x="34" y="58" class="h2">Bande : </text>
|
||||
<g transform="translate(159.44 58)" class="fraction-g">
|
||||
<g transform="translate(110 245)"><rect width="420" height="330" rx="24" class="panel"/><g class="math-expression" transform="translate(34 78)">
|
||||
<text x="0" y="17" class="h2">Bande :</text>
|
||||
<g transform="translate(190 0)" class="fraction-g" data-box="0 -33 42 84">
|
||||
<text x="21" y="-21" text-anchor="middle" class="h2">3</text>
|
||||
<line x1="0" y1="4" x2="42" y2="4" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="4" x2="42" y2="4" class="frac-line"/>
|
||||
<text x="21" y="39" text-anchor="middle" class="h2">5</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(45 132)">
|
||||
<rect width="320" height="92" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3" />
|
||||
<rect width="64" height="92" rx="12" class="orange" />
|
||||
</g><g transform="translate(45 165)"><rect width="320" height="92" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/>
|
||||
<rect x="0" width="64" height="92" rx="12" class="orange"/>
|
||||
<rect x="64" width="64" height="92" class="orange"/>
|
||||
<rect x="128" width="64" height="92" class="orange"/>
|
||||
<line x1="64" y1="0" x2="64" y2="92" class="line"/>
|
||||
<line x1="128" y1="0" x2="128" y2="92" class="line"/>
|
||||
<line x1="192" y1="0" x2="192" y2="92" class="line"/>
|
||||
<line x1="256" y1="0" x2="256" y2="92" class="line"/>
|
||||
</g>
|
||||
<text x="45" y="285" class="small">5 parts égales, 3 parts coloriées</text>
|
||||
</g>
|
||||
<g transform="translate(590 245)">
|
||||
<rect width="420" height="330" rx="24" class="soft" />
|
||||
<g class="math-expression">
|
||||
<text x="34" y="58" class="h2">Disque : </text>
|
||||
<g transform="translate(175.12 58)" class="fraction-g">
|
||||
</g><text x="45" y="285" class="small">5 parts égales, 3 parts coloriées</text></g>
|
||||
<g transform="translate(590 245)"><rect width="420" height="330" rx="24" class="soft"/><g class="math-expression" transform="translate(34 78)">
|
||||
<text x="0" y="17" class="h2">Disque :</text>
|
||||
<g transform="translate(330 0)" class="fraction-g" data-box="0 -33 42 84">
|
||||
<text x="21" y="-21" text-anchor="middle" class="h2">1</text>
|
||||
<line x1="0" y1="4" x2="42" y2="4" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="4" x2="42" y2="4" class="frac-line"/>
|
||||
<text x="21" y="39" text-anchor="middle" class="h2">4</text>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="210" cy="178" r="90" fill="#f7fbf9" stroke="#26383d" stroke-width="4" />
|
||||
<path d="M210 178 L210 88 A90 90 0 0 1 300 178 Z" class="blue" />
|
||||
<line x1="210" y1="88" x2="210" y2="268" class="line" />
|
||||
<line x1="120" y1="178" x2="300" y2="178" class="line" />
|
||||
<text x="70" y="285" class="small">4 parts égales, 1 part coloriée</text>
|
||||
</g>
|
||||
<g transform="translate(1070 245)">
|
||||
<rect width="420" height="330" rx="24" class="panel" />
|
||||
<g class="math-expression">
|
||||
<text x="34" y="58" class="h2">Collection : </text>
|
||||
<g transform="translate(237.84 58)" class="fraction-g">
|
||||
<circle cx="210" cy="190" r="90" fill="#f7fbf9" stroke="#26383d" stroke-width="4"/>
|
||||
<path d="M210 190 L210 100 A90 90 0 0 1 300 190 Z" class="blue"/>
|
||||
<line x1="210" y1="100" x2="210" y2="280" class="line"/><line x1="120" y1="190" x2="300" y2="190" class="line"/><text x="70" y="305" class="small">4 parts égales, 1 part coloriée</text></g>
|
||||
<g transform="translate(1070 245)"><rect width="420" height="330" rx="24" class="panel"/><g class="math-expression" transform="translate(34 78)">
|
||||
<text x="0" y="17" class="h2">Collection :</text>
|
||||
<g transform="translate(310 0)" class="fraction-g" data-box="0 -33 60 84">
|
||||
<text x="30" y="-21" text-anchor="middle" class="h2">6</text>
|
||||
<line x1="0" y1="4" x2="60" y2="4" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="4" x2="60" y2="4" class="frac-line"/>
|
||||
<text x="30" y="39" text-anchor="middle" class="h2">10</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(70 112)">
|
||||
<circle cx="0" cy="0" r="20" class="green" />
|
||||
<circle cx="55" cy="0" r="20" class="green" />
|
||||
<circle cx="110" cy="0" r="20" class="green" />
|
||||
<circle cx="165" cy="0" r="20" class="green" />
|
||||
<circle cx="220" cy="0" r="20" class="green" />
|
||||
<circle cx="275" cy="0" r="20" class="green" />
|
||||
<circle cx="0" cy="70" r="20" fill="#e8f3ee" stroke="#26383d" />
|
||||
<circle cx="55" cy="70" r="20" fill="#e8f3ee" stroke="#26383d" />
|
||||
<circle cx="110" cy="70" r="20" fill="#e8f3ee" stroke="#26383d" />
|
||||
<circle cx="165" cy="70" r="20" fill="#e8f3ee" stroke="#26383d" />
|
||||
</g>
|
||||
<text x="58" y="285" class="small">10 objets, 6 sont choisis</text>
|
||||
</g>
|
||||
<g transform="translate(170 645)">
|
||||
<rect width="1260" height="110" rx="24" class="panel" />
|
||||
<text x="36" y="48" class="h2">À retenir</text>
|
||||
<text x="36" y="86" class="body">Une fraction n'a de sens que si l'unité et les parts égales sont claires.</text>
|
||||
</g>
|
||||
<g transform="translate(70 190)">
|
||||
<circle cx="0" cy="0" r="20" class="green"/><circle cx="55" cy="0" r="20" class="green"/><circle cx="110" cy="0" r="20" class="green"/><circle cx="165" cy="0" r="20" class="green"/><circle cx="220" cy="0" r="20" class="green"/><circle cx="275" cy="0" r="20" class="green"/>
|
||||
<circle cx="0" cy="70" r="20" fill="#e8f3ee" stroke="#26383d"/><circle cx="55" cy="70" r="20" fill="#e8f3ee" stroke="#26383d"/><circle cx="110" cy="70" r="20" fill="#e8f3ee" stroke="#26383d"/><circle cx="165" cy="70" r="20" fill="#e8f3ee" stroke="#26383d"/>
|
||||
</g><text x="58" y="305" class="small">10 objets, 6 sont choisis</text></g>
|
||||
<g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">À retenir</text><text x="36" y="84" class="body">Une fraction n'a de sens que si l'unité et les parts égales sont claires.</text></g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
@@ -1,60 +1,38 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
|
||||
<defs>
|
||||
<style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}.fraction-g .num{font-size:38px}.fraction-g .h2{font-size:28px}.fraction-g .body{font-size:22px}.fraction-g line{stroke-width:3}</style>
|
||||
</defs>
|
||||
<defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.frac-big{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:96px;font-weight:800;fill:#074f4b}.op{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}.frac-line{stroke:#074f4b;stroke-width:4;stroke-linecap:round}.blank{stroke:#7fa79d;stroke-width:3;stroke-dasharray:10 10}</style></defs>
|
||||
<rect class="bg" width="1600" height="900"/>
|
||||
<rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
|
||||
<text x="800" y="116" text-anchor="middle" class="title">Placer une fraction sur une demi-droite</text>
|
||||
<text x="800" y="160" text-anchor="middle" class="subtitle">Je partage chaque unité selon le dénominateur</text>
|
||||
<line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
|
||||
<g transform="translate(125 255)">
|
||||
<rect width="1350" height="340" rx="24" class="soft" />
|
||||
<g class="math-expression">
|
||||
<text x="36" y="60" class="h2">Exemple : placer </text>
|
||||
<g transform="translate(302.56 60)" class="fraction-g">
|
||||
<g transform="translate(120 245)"><rect width="1360" height="360" rx="24" class="soft"/><g class="math-expression" transform="translate(34 74)">
|
||||
<text x="0" y="17" class="h2">Exemple : placer</text>
|
||||
<g transform="translate(330 0)" class="fraction-g" data-box="0 -33 42 84">
|
||||
<text x="21" y="-21" text-anchor="middle" class="h2">5</text>
|
||||
<line x1="0" y1="4" x2="42" y2="4" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="4" x2="42" y2="4" class="frac-line"/>
|
||||
<text x="21" y="39" text-anchor="middle" class="h2">4</text>
|
||||
</g>
|
||||
</g>
|
||||
<line x1="100" y1="205" x2="1180" y2="205" class="line" />
|
||||
<path d="M1180 205 L1158 194 L1158 216 Z" fill="#26383d" />
|
||||
<line x1="100" y1="220" x2="1120" y2="220" class="line"/><path d="M1120 220 L1098 209 L1098 231 Z" fill="#26383d"/>
|
||||
<g transform="translate(130 0)">
|
||||
<line x1="0" y1="170" x2="0" y2="240" class="tick" />
|
||||
<text x="0" y="275" text-anchor="middle" class="body">0</text>
|
||||
<line x1="250" y1="170" x2="250" y2="240" class="tick" />
|
||||
<text x="250" y="275" text-anchor="middle" class="body">1</text>
|
||||
<line x1="500" y1="170" x2="500" y2="240" class="tick" />
|
||||
<text x="500" y="275" text-anchor="middle" class="body">2</text>
|
||||
<line x1="62.5" y1="184" x2="62.5" y2="226" class="tick" />
|
||||
<line x1="125" y1="184" x2="125" y2="226" class="tick" />
|
||||
<line x1="187.5" y1="184" x2="187.5" y2="226" class="tick" />
|
||||
<line x1="312.5" y1="184" x2="312.5" y2="226" class="tick" />
|
||||
<line x1="375" y1="184" x2="375" y2="226" class="tick" />
|
||||
<line x1="437.5" y1="184" x2="437.5" y2="226" class="tick" />
|
||||
<circle cx="312.5" cy="205" r="16" class="orange" />
|
||||
<g class="math-expression">
|
||||
<g transform="translate(295.5 150)" class="fraction-g">
|
||||
<line x1="0" y1="185" x2="0" y2="255" class="tick"/><text x="0" y="295" text-anchor="middle" class="body">0</text>
|
||||
<line x1="240" y1="185" x2="240" y2="255" class="tick"/><text x="240" y="295" text-anchor="middle" class="body">1</text>
|
||||
<line x1="480" y1="185" x2="480" y2="255" class="tick"/><text x="480" y="295" text-anchor="middle" class="body">2</text>
|
||||
<line x1="60" y1="202" x2="60" y2="238" class="tick"/><line x1="120" y1="202" x2="120" y2="238" class="tick"/><line x1="180" y1="202" x2="180" y2="238" class="tick"/>
|
||||
<line x1="300" y1="202" x2="300" y2="238" class="tick"/><circle cx="300" cy="220" r="16" class="orange"/><line x1="360" y1="202" x2="360" y2="238" class="tick"/><line x1="420" y1="202" x2="420" y2="238" class="tick"/>
|
||||
</g><g class="math-expression" transform="translate(411 125)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -30 38 76">
|
||||
<text x="19" y="-18" text-anchor="middle" class="body">5</text>
|
||||
<line x1="0" y1="3" x2="38" y2="3" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="3" x2="38" y2="3" class="frac-line"/>
|
||||
<text x="19" y="34" text-anchor="middle" class="body">4</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text x="820" y="150" class="body">Dénominateur 4 :</text>
|
||||
<text x="820" y="190" class="body">chaque unité a 4 parts.</text>
|
||||
<g class="math-expression">
|
||||
<g transform="translate(820 245)" class="fraction-g">
|
||||
</g><text x="820" y="150" class="body">Dénominateur 4 :</text><text x="820" y="195" class="body">chaque unité a 4 parts.</text><g class="math-expression" transform="translate(820 238)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -30 38 76">
|
||||
<text x="19" y="-18" text-anchor="middle" class="body">5</text>
|
||||
<line x1="0" y1="3" x2="38" y2="3" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="3" x2="38" y2="3" class="frac-line"/>
|
||||
<text x="19" y="34" text-anchor="middle" class="body">4</text>
|
||||
</g>
|
||||
<text x="854" y="245" class="body"> est juste après 1.</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(170 650)">
|
||||
<rect width="1260" height="110" rx="24" class="panel" />
|
||||
<text x="36" y="48" class="h2">À retenir</text>
|
||||
<text x="36" y="86" class="body">L'intervalle de 0 à 1 est l'unité. Je le partage en parts égales.</text>
|
||||
</g>
|
||||
<text x="74" y="13" class="body"> est juste après 1.</text>
|
||||
</g></g>
|
||||
<g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">À retenir</text><text x="36" y="84" class="body">L'intervalle de 0 à 1 est l'unité. Je le partage en parts égales.</text></g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
@@ -1,95 +1,63 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
|
||||
<defs>
|
||||
<style>
|
||||
.bg{fill:#f6f5ef}
|
||||
.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}
|
||||
.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}
|
||||
.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}
|
||||
.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}
|
||||
.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}
|
||||
.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}
|
||||
.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:40px;font-weight:800;fill:#074f4b}
|
||||
.op{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:44px;font-weight:800;fill:#074f4b}
|
||||
.orange{fill:#e78232}
|
||||
.green{fill:#2f9246}
|
||||
.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}
|
||||
.frac-line{stroke:#074f4b;stroke-width:4;stroke-linecap:round}
|
||||
.fraction-g .num{font-size:38px}.fraction-g .h2{font-size:28px}.fraction-g .body{font-size:22px}.fraction-g line{stroke-width:3}</style>
|
||||
</defs>
|
||||
<defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.frac-big{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:96px;font-weight:800;fill:#074f4b}.op{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}.frac-line{stroke:#074f4b;stroke-width:4;stroke-linecap:round}.blank{stroke:#7fa79d;stroke-width:3;stroke-dasharray:10 10}</style></defs>
|
||||
<rect class="bg" width="1600" height="900"/>
|
||||
<rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
|
||||
<text x="800" y="116" text-anchor="middle" class="title">Fraction supérieure à 1</text>
|
||||
<text x="800" y="160" text-anchor="middle" class="subtitle">Quand le numérateur dépasse le dénominateur</text>
|
||||
<line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
|
||||
<g transform="translate(120 245)">
|
||||
<rect width="630" height="360" rx="24" class="soft" />
|
||||
<text x="34" y="66" class="h2">Exemple :</text>
|
||||
<g transform="translate(225 62)" class="fraction-g">
|
||||
<g transform="translate(120 245)"><rect width="640" height="360" rx="24" class="soft"/><g class="math-expression" transform="translate(34 76)">
|
||||
<text x="0" y="17" class="h2">Exemple :</text>
|
||||
<g transform="translate(238 0)" class="fraction-g" data-box="0 -33 42 84">
|
||||
<text x="21" y="-21" text-anchor="middle" class="h2">7</text>
|
||||
<line x1="0" y1="4" x2="42" y2="4" class="frac-line" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="4" x2="42" y2="4" class="frac-line"/>
|
||||
<text x="21" y="39" text-anchor="middle" class="h2">4</text>
|
||||
</g>
|
||||
<g transform="translate(70 130)">
|
||||
<rect width="400" height="80" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3" />
|
||||
<rect width="100" height="80" rx="12" class="green" />
|
||||
<rect x="100" width="100" height="80" class="green" />
|
||||
<rect x="200" width="100" height="80" class="green" />
|
||||
<rect x="300" width="100" height="80" class="green" />
|
||||
<line x1="100" y1="0" x2="100" y2="80" class="line" />
|
||||
<line x1="200" y1="0" x2="200" y2="80" class="line" />
|
||||
<line x1="300" y1="0" x2="300" y2="80" class="line" />
|
||||
</g>
|
||||
<g transform="translate(70 245)">
|
||||
<rect width="400" height="80" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3" />
|
||||
<rect width="100" height="80" rx="12" class="orange" />
|
||||
<rect x="100" width="100" height="80" class="orange" />
|
||||
<rect x="200" width="100" height="80" class="orange" />
|
||||
<line x1="100" y1="0" x2="100" y2="80" class="line" />
|
||||
<line x1="200" y1="0" x2="200" y2="80" class="line" />
|
||||
<line x1="300" y1="0" x2="300" y2="80" class="line" />
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(815 245)">
|
||||
<rect width="635" height="360" rx="24" class="panel" />
|
||||
<text x="36" y="60" class="h2">Je décompose</text>
|
||||
<g transform="translate(70 125)">
|
||||
<g class="fraction-g">
|
||||
</g><g transform="translate(80 135)"><rect width="440" height="80" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/>
|
||||
<rect x="0" width="110" height="80" rx="12" class="green"/>
|
||||
<rect x="110" width="110" height="80" class="green"/>
|
||||
<rect x="220" width="110" height="80" class="green"/>
|
||||
<rect x="330" width="110" height="80" class="green"/>
|
||||
<line x1="110" y1="0" x2="110" y2="80" class="line"/>
|
||||
<line x1="220" y1="0" x2="220" y2="80" class="line"/>
|
||||
<line x1="330" y1="0" x2="330" y2="80" class="line"/>
|
||||
</g><g transform="translate(80 250)"><rect width="440" height="80" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/>
|
||||
<rect x="0" width="110" height="80" rx="12" class="orange"/>
|
||||
<rect x="110" width="110" height="80" class="orange"/>
|
||||
<rect x="220" width="110" height="80" class="orange"/>
|
||||
<line x1="110" y1="0" x2="110" y2="80" class="line"/>
|
||||
<line x1="220" y1="0" x2="220" y2="80" class="line"/>
|
||||
<line x1="330" y1="0" x2="330" y2="80" class="line"/>
|
||||
</g></g>
|
||||
<g transform="translate(825 245)"><rect width="625" height="360" rx="24" class="panel"/><text x="36" y="50" class="h2">Je décompose</text><g class="math-expression" transform="translate(70 100)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">7</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">4</text>
|
||||
</g>
|
||||
<text x="70" y="18" class="op">=</text>
|
||||
<g transform="translate(125 0)" class="fraction-g">
|
||||
<text x="82" y="26" class="op">=</text>
|
||||
<g transform="translate(146 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">4</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">4</text>
|
||||
</g>
|
||||
<text x="195" y="18" class="op">+</text>
|
||||
<g transform="translate(250 0)" class="fraction-g">
|
||||
<text x="228" y="26" class="op">+</text>
|
||||
<g transform="translate(292 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">3</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">4</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(70 205)">
|
||||
<g class="fraction-g">
|
||||
</g><g class="math-expression" transform="translate(70 225)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">7</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">4</text>
|
||||
</g>
|
||||
<text x="70" y="18" class="op">= 1 +</text>
|
||||
<g transform="translate(205 0)" class="fraction-g">
|
||||
<text x="82" y="26" class="op">= 1 +</text>
|
||||
<g transform="translate(232 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">3</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">4</text>
|
||||
</g>
|
||||
</g>
|
||||
<text x="70" y="292" class="body">La première unité est complète.</text>
|
||||
<text x="70" y="328" class="body">Il reste encore trois quarts.</text>
|
||||
</g>
|
||||
<g transform="translate(170 660)">
|
||||
<rect width="1260" height="105" rx="24" class="panel" />
|
||||
<text x="36" y="47" class="h2">À retenir</text>
|
||||
<text x="36" y="84" class="body">Une fraction peut être plus grande que 1 : il faut alors utiliser plusieurs unités.</text>
|
||||
</g>
|
||||
</g><text x="70" y="322" class="body">La première unité est complète.</text><text x="70" y="352" class="body">Il reste encore trois quarts.</text></g>
|
||||
<g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">À retenir</text><text x="36" y="84" class="body">Une fraction peut être plus grande que 1 : il faut alors utiliser plusieurs unités.</text></g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.2 KiB |
@@ -1,41 +1,32 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
|
||||
<defs>
|
||||
<style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:64px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.fraction-g .num{font-size:38px}.fraction-g .h2{font-size:28px}.fraction-g .body{font-size:22px}.fraction-g line{stroke-width:3}</style>
|
||||
</defs>
|
||||
<defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.frac-big{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:96px;font-weight:800;fill:#074f4b}.op{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}.frac-line{stroke:#074f4b;stroke-width:4;stroke-linecap:round}.blank{stroke:#7fa79d;stroke-width:3;stroke-dasharray:10 10}</style></defs>
|
||||
<rect class="bg" width="1600" height="900"/>
|
||||
<rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
|
||||
<text x="800" y="116" text-anchor="middle" class="title">Comparer des fractions simples</text>
|
||||
<text x="800" y="160" text-anchor="middle" class="subtitle">Même unité, parts égales, puis je compare</text>
|
||||
<line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
|
||||
<g transform="translate(120 245)">
|
||||
<rect width="620" height="360" rx="24" class="soft" />
|
||||
<text x="34" y="60" class="h2">Même dénominateur</text>
|
||||
<g class="math-expression">
|
||||
<g transform="translate(70 130)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">3</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<g transform="translate(120 245)"><rect width="620" height="360" rx="24" class="soft"/><text x="34" y="60" class="h2">Même dénominateur</text><g class="math-expression" transform="translate(70 122)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">3</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">5</text>
|
||||
</g>
|
||||
<text x="122.44" y="156" class="num"> < </text>
|
||||
<g transform="translate(199.72 130)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">4</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<text x="90" y="26" class="op"><</text>
|
||||
<g transform="translate(162 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">4</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">5</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(75 175)">
|
||||
<rect width="430" height="58" rx="10" fill="#f7fbf9" stroke="#26383d" stroke-width="3" />
|
||||
<rect width="86" height="58" rx="10" class="orange" />
|
||||
</g><g transform="translate(75 220)"><rect width="430" height="58" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/>
|
||||
<rect x="0" width="86" height="58" rx="12" class="orange"/>
|
||||
<rect x="86" width="86" height="58" class="orange"/>
|
||||
<rect x="172" width="86" height="58" class="orange"/>
|
||||
<line x1="86" y1="0" x2="86" y2="58" class="line"/>
|
||||
<line x1="172" y1="0" x2="172" y2="58" class="line"/>
|
||||
<line x1="258" y1="0" x2="258" y2="58" class="line"/>
|
||||
<line x1="344" y1="0" x2="344" y2="58" class="line"/>
|
||||
</g>
|
||||
<g transform="translate(75 265)">
|
||||
<rect width="430" height="58" rx="10" fill="#f7fbf9" stroke="#26383d" stroke-width="3" />
|
||||
<rect width="86" height="58" rx="10" class="blue" />
|
||||
</g><g transform="translate(75 300)"><rect width="430" height="58" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/>
|
||||
<rect x="0" width="86" height="58" rx="12" class="blue"/>
|
||||
<rect x="86" width="86" height="58" class="blue"/>
|
||||
<rect x="172" width="86" height="58" class="blue"/>
|
||||
<rect x="258" width="86" height="58" class="blue"/>
|
||||
@@ -43,31 +34,19 @@
|
||||
<line x1="172" y1="0" x2="172" y2="58" class="line"/>
|
||||
<line x1="258" y1="0" x2="258" y2="58" class="line"/>
|
||||
<line x1="344" y1="0" x2="344" y2="58" class="line"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(815 245)">
|
||||
<rect width="635" height="360" rx="24" class="panel" />
|
||||
<text x="36" y="60" class="h2">Même numérateur</text>
|
||||
<g class="math-expression">
|
||||
<g transform="translate(70 130)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">1</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
</g></g>
|
||||
<g transform="translate(815 245)"><rect width="635" height="360" rx="24" class="panel"/><text x="36" y="60" class="h2">Même numérateur</text><g class="math-expression" transform="translate(70 122)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">1</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">2</text>
|
||||
</g>
|
||||
<text x="122.44" y="156" class="num"> > </text>
|
||||
<g transform="translate(199.72 130)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">1</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<text x="90" y="26" class="op">></text>
|
||||
<g transform="translate(162 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">1</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">4</text>
|
||||
</g>
|
||||
</g>
|
||||
<text x="70" y="195" class="body">Quand on partage en plus de parts,</text>
|
||||
<text x="70" y="232" class="body">chaque part est plus petite.</text>
|
||||
<text x="70" y="300" class="body">Toujours comparer la même unité.</text>
|
||||
</g>
|
||||
<g transform="translate(170 660)">
|
||||
<rect width="1260" height="105" rx="24" class="panel" />
|
||||
<text x="36" y="47" class="h2">À retenir</text>
|
||||
<text x="36" y="84" class="body">À dénominateur égal, le plus grand numérateur donne la plus grande fraction.</text>
|
||||
</g>
|
||||
</g><text x="70" y="210" class="body">Quand on partage en plus de parts,</text><text x="70" y="250" class="body">chaque part est plus petite.</text><text x="70" y="315" class="body">Toujours comparer la même unité.</text></g>
|
||||
<g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">À retenir</text><text x="36" y="84" class="body">À dénominateur égal, le plus grand numérateur donne la plus grande fraction.</text></g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.7 KiB |
@@ -1,72 +1,47 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
|
||||
<defs>
|
||||
<style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:54px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}.fraction-g .num{font-size:38px}.fraction-g .h2{font-size:28px}.fraction-g .body{font-size:22px}.fraction-g line{stroke-width:3}</style>
|
||||
</defs>
|
||||
<defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.frac-big{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:96px;font-weight:800;fill:#074f4b}.op{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}.frac-line{stroke:#074f4b;stroke-width:4;stroke-linecap:round}.blank{stroke:#7fa79d;stroke-width:3;stroke-dasharray:10 10}</style></defs>
|
||||
<rect class="bg" width="1600" height="900"/>
|
||||
<rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
|
||||
<text x="800" y="116" text-anchor="middle" class="title">Encadrer une fraction</text>
|
||||
<text x="800" y="160" text-anchor="middle" class="subtitle">Je cherche entre quels entiers elle se trouve</text>
|
||||
<line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
|
||||
<g transform="translate(125 245)">
|
||||
<rect width="1350" height="360" rx="24" class="soft" />
|
||||
<g class="math-expression">
|
||||
<text x="36" y="60" class="h2">Exemple : </text>
|
||||
<g transform="translate(192.8 60)" class="fraction-g">
|
||||
<g transform="translate(125 245)"><rect width="1350" height="360" rx="24" class="soft"/><g class="math-expression" transform="translate(36 70)">
|
||||
<text x="0" y="17" class="h2">Exemple :</text>
|
||||
<g transform="translate(238 0)" class="fraction-g" data-box="0 -33 42 84">
|
||||
<text x="21" y="-21" text-anchor="middle" class="h2">7</text>
|
||||
<line x1="0" y1="4" x2="42" y2="4" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="4" x2="42" y2="4" class="frac-line"/>
|
||||
<text x="21" y="39" text-anchor="middle" class="h2">3</text>
|
||||
</g>
|
||||
</g>
|
||||
<g class="math-expression">
|
||||
<g transform="translate(790 125)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">6</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<text x="26" y="54" text-anchor="middle" class="num">3</text>
|
||||
</g>
|
||||
<text x="842.44" y="151" class="num"> = 2</text>
|
||||
</g>
|
||||
<g class="math-expression">
|
||||
<g transform="translate(790 195)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">9</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<text x="26" y="54" text-anchor="middle" class="num">3</text>
|
||||
</g>
|
||||
<text x="842.44" y="221" class="num"> = 3</text>
|
||||
</g>
|
||||
<g class="math-expression">
|
||||
<text x="790" y="296" class="num">2 < </text>
|
||||
<g transform="translate(893.04 270)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">7</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<text x="26" y="54" text-anchor="middle" class="num">3</text>
|
||||
</g>
|
||||
<text x="945.48" y="296" class="num"> < 3</text>
|
||||
</g>
|
||||
<line x1="100" y1="230" x2="670" y2="230" class="line" />
|
||||
<path d="M670 230 L648 219 L648 241 Z" fill="#26383d" />
|
||||
<g transform="translate(120 0)">
|
||||
<line x1="0" y1="195" x2="0" y2="265" class="tick" />
|
||||
<text x="0" y="300" text-anchor="middle" class="body">0</text>
|
||||
<line x1="150" y1="195" x2="150" y2="265" class="tick" />
|
||||
<text x="150" y="300" text-anchor="middle" class="body">1</text>
|
||||
<line x1="300" y1="195" x2="300" y2="265" class="tick" />
|
||||
<text x="300" y="300" text-anchor="middle" class="body">2</text>
|
||||
<line x1="450" y1="195" x2="450" y2="265" class="tick" />
|
||||
<text x="450" y="300" text-anchor="middle" class="body">3</text>
|
||||
<line x1="350" y1="210" x2="350" y2="250" class="tick" />
|
||||
<circle cx="350" cy="230" r="15" class="orange" />
|
||||
<g class="math-expression">
|
||||
<g transform="translate(333 175)" class="fraction-g">
|
||||
<line x1="100" y1="230" x2="670" y2="230" class="line"/><path d="M670 230 L648 219 L648 241 Z" fill="#26383d"/>
|
||||
<g transform="translate(120 0)"><line x1="0" y1="195" x2="0" y2="265" class="tick"/><text x="0" y="300" text-anchor="middle" class="body">0</text><line x1="150" y1="195" x2="150" y2="265" class="tick"/><text x="150" y="300" text-anchor="middle" class="body">1</text><line x1="300" y1="195" x2="300" y2="265" class="tick"/><text x="300" y="300" text-anchor="middle" class="body">2</text><line x1="450" y1="195" x2="450" y2="265" class="tick"/><text x="450" y="300" text-anchor="middle" class="body">3</text><line x1="350" y1="210" x2="350" y2="250" class="tick"/><circle cx="350" cy="230" r="15" class="orange"/></g><g class="math-expression" transform="translate(452 125)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -30 38 76">
|
||||
<text x="19" y="-18" text-anchor="middle" class="body">7</text>
|
||||
<line x1="0" y1="3" x2="38" y2="3" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="3" x2="38" y2="3" class="frac-line"/>
|
||||
<text x="19" y="34" text-anchor="middle" class="body">3</text>
|
||||
</g>
|
||||
</g><g class="math-expression" transform="translate(790 95)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">6</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">3</text>
|
||||
</g>
|
||||
<text x="82" y="26" class="op">= 2</text>
|
||||
</g><g class="math-expression" transform="translate(1040 95)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">9</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">3</text>
|
||||
</g>
|
||||
<text x="82" y="26" class="op">= 3</text>
|
||||
</g><g class="math-expression" transform="translate(790 235)">
|
||||
<text x="0" y="26" class="op">2 <</text>
|
||||
<g transform="translate(106 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">7</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">3</text>
|
||||
</g>
|
||||
<g transform="translate(170 660)">
|
||||
<rect width="1260" height="105" rx="24" class="panel" />
|
||||
<text x="36" y="47" class="h2">À retenir</text>
|
||||
<text x="36" y="84" class="body">Je compare la fraction aux fractions qui valent les entiers voisins.</text>
|
||||
</g>
|
||||
<text x="192" y="26" class="op">< 3</text>
|
||||
</g></g>
|
||||
<g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">À retenir</text><text x="36" y="84" class="body">Je compare la fraction aux fractions qui valent les entiers voisins.</text></g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.5 KiB |
@@ -1,37 +1,30 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
|
||||
<defs>
|
||||
<style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.fraction-g .num{font-size:38px}.fraction-g .h2{font-size:28px}.fraction-g .body{font-size:22px}.fraction-g line{stroke-width:3}</style>
|
||||
</defs>
|
||||
<defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.frac-big{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:96px;font-weight:800;fill:#074f4b}.op{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}.frac-line{stroke:#074f4b;stroke-width:4;stroke-linecap:round}.blank{stroke:#7fa79d;stroke-width:3;stroke-dasharray:10 10}</style></defs>
|
||||
<rect class="bg" width="1600" height="900"/>
|
||||
<rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
|
||||
<text x="800" y="116" text-anchor="middle" class="title">Additionner des fractions simples</text>
|
||||
<text x="800" y="160" text-anchor="middle" class="subtitle">Si les dénominateurs sont les mêmes, les parts ont la même taille</text>
|
||||
<line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
|
||||
<g transform="translate(120 245)">
|
||||
<rect width="640" height="360" rx="24" class="soft" />
|
||||
<text x="34" y="60" class="h2">Exemple</text>
|
||||
<g class="math-expression">
|
||||
<g transform="translate(80 130)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">2</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<g transform="translate(120 245)"><rect width="640" height="360" rx="24" class="soft"/><text x="34" y="60" class="h2">Exemple</text><g class="math-expression" transform="translate(80 120)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">2</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">7</text>
|
||||
</g>
|
||||
<text x="132.44" y="156" class="num"> + </text>
|
||||
<g transform="translate(209.72 130)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">3</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<text x="86" y="26" class="op">+</text>
|
||||
<g transform="translate(154 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">3</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">7</text>
|
||||
</g>
|
||||
<text x="262.16" y="156" class="num"> = </text>
|
||||
<g transform="translate(339.44 130)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">5</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<text x="240" y="26" class="op">=</text>
|
||||
<g transform="translate(308 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">5</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">7</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(70 210)">
|
||||
<rect width="490" height="70" rx="10" fill="#f7fbf9" stroke="#26383d" stroke-width="3" />
|
||||
<rect width="70" height="70" rx="10" class="orange" />
|
||||
</g><g transform="translate(70 235)"><rect width="490" height="70" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/>
|
||||
<rect x="0" width="70" height="70" rx="12" class="orange"/>
|
||||
<rect x="70" width="70" height="70" class="orange"/>
|
||||
<rect x="140" width="70" height="70" class="blue"/>
|
||||
<rect x="210" width="70" height="70" class="blue"/>
|
||||
@@ -42,37 +35,25 @@
|
||||
<line x1="280" y1="0" x2="280" y2="70" class="line"/>
|
||||
<line x1="350" y1="0" x2="350" y2="70" class="line"/>
|
||||
<line x1="420" y1="0" x2="420" y2="70" class="line"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(825 245)">
|
||||
<rect width="625" height="360" rx="24" class="panel" />
|
||||
<text x="36" y="60" class="h2">La règle</text>
|
||||
<text x="65" y="135" class="body">Je garde le dénominateur.</text>
|
||||
<text x="65" y="180" class="body">J'ajoute ou je retire</text>
|
||||
<text x="65" y="218" class="body">seulement les numérateurs.</text>
|
||||
<g class="math-expression">
|
||||
<g transform="translate(65 290)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">6</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
</g></g>
|
||||
<g transform="translate(825 245)"><rect width="625" height="360" rx="24" class="panel"/><text x="36" y="60" class="h2">La règle</text><text x="65" y="135" class="body">Je garde le dénominateur.</text><text x="65" y="180" class="body">J'ajoute ou je retire</text><text x="65" y="218" class="body">seulement les numérateurs.</text><g class="math-expression" transform="translate(65 292)">
|
||||
<g transform="translate(0 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">6</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">8</text>
|
||||
</g>
|
||||
<text x="117.44" y="316" class="num"> - </text>
|
||||
<g transform="translate(194.72 290)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">2</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<text x="86" y="26" class="op">-</text>
|
||||
<g transform="translate(154 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">2</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">8</text>
|
||||
</g>
|
||||
<text x="247.16" y="316" class="num"> = </text>
|
||||
<g transform="translate(324.44 290)" class="fraction-g">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num" font-size="42">4</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<text x="240" y="26" class="op">=</text>
|
||||
<g transform="translate(308 0)" class="fraction-g" data-box="0 -40 52 106">
|
||||
<text x="26" y="-28" text-anchor="middle" class="num">4</text>
|
||||
<line x1="0" y1="5" x2="52" y2="5" class="frac-line"/>
|
||||
<text x="26" y="54" text-anchor="middle" class="num">8</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(170 660)">
|
||||
<rect width="1260" height="105" rx="24" class="panel" />
|
||||
<text x="36" y="47" class="h2">À retenir</text>
|
||||
<text x="36" y="84" class="body">Avant de calculer, je vérifie que les dénominateurs sont identiques.</text>
|
||||
</g>
|
||||
</g></g>
|
||||
<g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">À retenir</text><text x="36" y="84" class="body">Avant de calculer, je vérifie que les dénominateurs sont identiques.</text></g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.0 KiB |
@@ -1,54 +1,34 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
|
||||
<defs>
|
||||
<style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.orange{fill:#e78232}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.fraction-g .num{font-size:38px}.fraction-g .h2{font-size:28px}.fraction-g .body{font-size:22px}.fraction-g line{stroke-width:3}</style>
|
||||
</defs>
|
||||
<defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.frac-big{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:96px;font-weight:800;fill:#074f4b}.op{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:46px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}.frac-line{stroke:#074f4b;stroke-width:4;stroke-linecap:round}.blank{stroke:#7fa79d;stroke-width:3;stroke-dasharray:10 10}</style></defs>
|
||||
<rect class="bg" width="1600" height="900"/>
|
||||
<rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
|
||||
<text x="800" y="116" text-anchor="middle" class="title">Trouver une fraction d'une quantité</text>
|
||||
<text x="800" y="116" text-anchor="middle" class="title">Trouver une fraction d'une quantité</text>
|
||||
<text x="800" y="160" text-anchor="middle" class="subtitle">Je partage, puis je prends les parts demandées</text>
|
||||
<line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
|
||||
<g transform="translate(120 245)">
|
||||
<rect width="640" height="360" rx="24" class="soft" />
|
||||
<g class="math-expression">
|
||||
<text x="34" y="60" class="h2">Exemple : </text>
|
||||
<g transform="translate(190.8 60)" class="fraction-g">
|
||||
<g transform="translate(120 245)"><rect width="640" height="360" rx="24" class="soft"/><g class="math-expression" transform="translate(34 72)">
|
||||
<text x="0" y="17" class="h2">Exemple :</text>
|
||||
<g transform="translate(250 0)" class="fraction-g" data-box="0 -33 42 84">
|
||||
<text x="21" y="-21" text-anchor="middle" class="h2">3</text>
|
||||
<line x1="0" y1="4" x2="42" y2="4" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="4" x2="42" y2="4" class="frac-line"/>
|
||||
<text x="21" y="39" text-anchor="middle" class="h2">4</text>
|
||||
</g>
|
||||
<text x="224.8" y="77" class="h2"> de 20</text>
|
||||
</g>
|
||||
<g transform="translate(80 125)">
|
||||
<rect width="440" height="90" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3" />
|
||||
<rect width="110" height="90" rx="12" class="orange" />
|
||||
<text x="326" y="17" class="h2">de 20</text>
|
||||
</g><g transform="translate(80 145)"><rect width="440" height="90" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/>
|
||||
<rect x="0" width="110" height="90" rx="12" class="orange"/>
|
||||
<rect x="110" width="110" height="90" class="orange"/>
|
||||
<rect x="220" width="110" height="90" class="orange"/>
|
||||
<line x1="110" y1="0" x2="110" y2="90" class="line"/>
|
||||
<line x1="220" y1="0" x2="220" y2="90" class="line"/>
|
||||
<line x1="330" y1="0" x2="330" y2="90" class="line"/>
|
||||
</g>
|
||||
<text x="80" y="270" class="body">20 partage en 4 parts : chaque part vaut 5.</text>
|
||||
<text x="80" y="315" class="body">Je prends 3 parts : 15.</text>
|
||||
</g>
|
||||
<g transform="translate(825 245)">
|
||||
<rect width="625" height="360" rx="24" class="panel" />
|
||||
<text x="36" y="60" class="h2">La méthode</text>
|
||||
<text x="70" y="130" class="num">20 ÷ 4 = 5</text>
|
||||
<text x="70" y="205" class="num">5 x 3 = 15</text>
|
||||
<text x="70" y="285" class="body">Le dénominateur partage.</text>
|
||||
<text x="70" y="323" class="body">Le numérateur dit combien prendre.</text>
|
||||
</g>
|
||||
<g transform="translate(170 660)">
|
||||
<rect width="1260" height="105" rx="24" class="panel" />
|
||||
<text x="36" y="47" class="h2">À retenir</text>
|
||||
<g class="math-expression">
|
||||
<text x="36" y="84" class="body">Pour trouver </text>
|
||||
<g transform="translate(210.72 84)" class="fraction-g">
|
||||
</g><text x="80" y="285" class="body">20 partagé en 4 parts : chaque part vaut 5.</text><text x="80" y="330" class="body">Je prends 3 parts : 15.</text></g>
|
||||
<g transform="translate(825 245)"><rect width="625" height="360" rx="24" class="panel"/><text x="36" y="60" class="h2">La méthode</text><text x="70" y="135" class="num">20 à 4 = 5</text><text x="70" y="220" class="num">5 x 3 = 15</text><text x="70" y="300" class="body">Le dénominateur partage.</text><text x="70" y="335" class="body">Le numérateur dit combien prendre.</text></g>
|
||||
<g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">À retenir</text><g class="math-expression" transform="translate(36 84)">
|
||||
<text x="0" y="13" class="body">Pour trouver</text>
|
||||
<g transform="translate(324 0)" class="fraction-g" data-box="0 -30 38 76">
|
||||
<text x="19" y="-18" text-anchor="middle" class="body">3</text>
|
||||
<line x1="0" y1="3" x2="38" y2="3" stroke="#074f4b" stroke-width="4" stroke-linecap="round" />
|
||||
<line x1="0" y1="3" x2="38" y2="3" class="frac-line"/>
|
||||
<text x="19" y="34" text-anchor="middle" class="body">4</text>
|
||||
</g>
|
||||
<text x="244.72" y="97" class="body"> d'une quantité : je divise par 4, puis je multiplie par 3.</text>
|
||||
</g>
|
||||
</g>
|
||||
<text x="398" y="13" class="body">d'une quantité : je divise par 4, puis je multiplie par 3.</text>
|
||||
</g></g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
@@ -10,7 +10,9 @@ from pathlib import Path
|
||||
|
||||
SLASH_FRACTION_RE = re.compile(r"(?<![\w.])\d+\s*/\s*\d+(?![\w.])")
|
||||
MOJIBAKE_RE = re.compile(r"Ã.|Â.|’|“|â€")
|
||||
SUSPICIOUS_REPLACEMENT_RE = re.compile(r"[A-Za-zÀ-ÿ]\?|[?]\s*[A-Za-zÀ-ÿ]")
|
||||
TRANSLATE_RE = re.compile(r"translate\(\s*([-\d.]+)(?:[\s,]+([-\d.]+))?\s*\)")
|
||||
DATA_BOX_RE = re.compile(r"^\s*([-\d.]+)\s+([-\d.]+)\s+([-\d.]+)\s+([-\d.]+)\s*$")
|
||||
FONT_SIZE_RE = re.compile(r"font-size\s*:\s*([-\d.]+)px?")
|
||||
CLASS_STYLE_RE = re.compile(r"\.([A-Za-z0-9_-]+)\s*\{([^}]*)\}")
|
||||
FORBIDDEN_TEXT = {
|
||||
@@ -25,6 +27,19 @@ class Issue:
|
||||
message: str
|
||||
|
||||
|
||||
@dataclass
|
||||
class Box:
|
||||
kind: str
|
||||
label: str
|
||||
x1: float
|
||||
y1: float
|
||||
x2: float
|
||||
y2: float
|
||||
|
||||
def padded(self, amount: float) -> "Box":
|
||||
return Box(self.kind, self.label, self.x1 - amount, self.y1 - amount, self.x2 + amount, self.y2 + amount)
|
||||
|
||||
|
||||
def local_name(tag: str) -> str:
|
||||
return tag.rsplit("}", 1)[-1]
|
||||
|
||||
@@ -105,11 +120,122 @@ def estimated_text_width(text: str, size: float) -> float:
|
||||
return max(1, len(text.strip())) * size * 0.62
|
||||
|
||||
|
||||
def parse_translate(value: str | None) -> tuple[float, float]:
|
||||
if not value:
|
||||
return 0.0, 0.0
|
||||
match = TRANSLATE_RE.search(value)
|
||||
if not match:
|
||||
return 0.0, 0.0
|
||||
return parse_number(match.group(1)), parse_number(match.group(2), 0.0)
|
||||
|
||||
|
||||
def overlaps(a: Box, b: Box) -> bool:
|
||||
return a.x1 < b.x2 and a.x2 > b.x1 and a.y1 < b.y2 and a.y2 > b.y1
|
||||
|
||||
|
||||
def parse_data_box(node: ET.Element, ox: float, oy: float) -> Box | None:
|
||||
match = DATA_BOX_RE.match(node.attrib.get("data-box") or "")
|
||||
if not match:
|
||||
return None
|
||||
x, y, width, height = (parse_number(value) for value in match.groups())
|
||||
return Box("fraction", node_text(node) or "fraction", ox + x, oy + y, ox + x + width, oy + y + height)
|
||||
|
||||
|
||||
def text_box(node: ET.Element, styles: dict[str, dict[str, str]], ox: float, oy: float) -> Box | None:
|
||||
content = node_text(node)
|
||||
if not content:
|
||||
return None
|
||||
size = font_size(node, styles)
|
||||
width = estimated_text_width(content, size)
|
||||
x = ox + text_x(node)
|
||||
y = oy + text_y(node)
|
||||
anchor = node.attrib.get("text-anchor", "start")
|
||||
if anchor == "middle":
|
||||
x1 = x - width / 2
|
||||
x2 = x + width / 2
|
||||
elif anchor == "end":
|
||||
x1 = x - width
|
||||
x2 = x
|
||||
else:
|
||||
x1 = x
|
||||
x2 = x + width
|
||||
return Box("text", content, x1, y - size * 0.85, x2, y + size * 0.25)
|
||||
|
||||
|
||||
def shape_box(node: ET.Element, ox: float, oy: float) -> Box | None:
|
||||
tag = local_name(node.tag)
|
||||
classes = class_names(node)
|
||||
if tag == "rect":
|
||||
if classes.intersection({"bg", "panel", "soft", "card", "white"}):
|
||||
return None
|
||||
x = ox + parse_number(node.attrib.get("x"))
|
||||
y = oy + parse_number(node.attrib.get("y"))
|
||||
return Box("shape", "rect", x, y, x + parse_number(node.attrib.get("width")), y + parse_number(node.attrib.get("height")))
|
||||
if tag == "circle":
|
||||
cx = ox + parse_number(node.attrib.get("cx"))
|
||||
cy = oy + parse_number(node.attrib.get("cy"))
|
||||
radius = parse_number(node.attrib.get("r"))
|
||||
return Box("shape", "circle", cx - radius, cy - radius, cx + radius, cy + radius)
|
||||
return None
|
||||
|
||||
|
||||
def collect_layout_boxes(
|
||||
node: ET.Element,
|
||||
styles: dict[str, dict[str, str]],
|
||||
ox: float = 0.0,
|
||||
oy: float = 0.0,
|
||||
inside_fraction: bool = False,
|
||||
) -> list[Box]:
|
||||
tx, ty = parse_translate(node.attrib.get("transform"))
|
||||
ox += tx
|
||||
oy += ty
|
||||
|
||||
if local_name(node.tag) == "g" and has_class(node, "fraction-g"):
|
||||
box = parse_data_box(node, ox, oy)
|
||||
return [box] if box else []
|
||||
|
||||
boxes: list[Box] = []
|
||||
if not inside_fraction:
|
||||
if local_name(node.tag) == "text":
|
||||
box = text_box(node, styles, ox, oy)
|
||||
if box:
|
||||
boxes.append(box)
|
||||
else:
|
||||
box = shape_box(node, ox, oy)
|
||||
if box:
|
||||
boxes.append(box)
|
||||
|
||||
for child in node:
|
||||
boxes.extend(collect_layout_boxes(child, styles, ox, oy, inside_fraction))
|
||||
return boxes
|
||||
|
||||
|
||||
def validate_layout_collisions(path: Path, root: ET.Element, styles: dict[str, dict[str, str]]) -> list[Issue]:
|
||||
issues: list[Issue] = []
|
||||
boxes = collect_layout_boxes(root, styles)
|
||||
for index, first in enumerate(boxes):
|
||||
for second in boxes[index + 1 :]:
|
||||
if first.kind != "fraction" and second.kind != "fraction":
|
||||
continue
|
||||
if overlaps(first, second):
|
||||
issues.append(
|
||||
Issue(
|
||||
"error",
|
||||
path,
|
||||
f"Chevauchement autour d'une fraction: {first.kind} {first.label!r} avec {second.kind} {second.label!r}.",
|
||||
)
|
||||
)
|
||||
return issues
|
||||
|
||||
|
||||
def validate_fraction_group(path: Path, group: ET.Element, styles: dict[str, dict[str, str]]) -> list[Issue]:
|
||||
issues: list[Issue] = []
|
||||
texts = [node for node in group if local_name(node.tag) == "text"]
|
||||
lines = [node for node in group if local_name(node.tag) == "line"]
|
||||
|
||||
if "data-box" not in group.attrib:
|
||||
issues.append(Issue("warning", path, "Une fraction-g doit declarer data-box pour les controles anti-chevauchement."))
|
||||
|
||||
if len(texts) < 2 or not lines:
|
||||
return [
|
||||
Issue(
|
||||
@@ -187,6 +313,7 @@ def validate_svg(path: Path) -> list[Issue]:
|
||||
issues.append(Issue("warning", path, "SVG sans viewBox : recadrage et responsive moins fiables."))
|
||||
|
||||
styles = parse_styles(root)
|
||||
issues.extend(validate_layout_collisions(path, root, styles))
|
||||
|
||||
for node in root.iter():
|
||||
if local_name(node.tag) == "text":
|
||||
@@ -208,6 +335,14 @@ def validate_svg(path: Path) -> list[Issue]:
|
||||
f"Encodage texte suspect dans le SVG: {content!r}.",
|
||||
)
|
||||
)
|
||||
if SUSPICIOUS_REPLACEMENT_RE.search(content):
|
||||
issues.append(
|
||||
Issue(
|
||||
"error",
|
||||
path,
|
||||
f"Caractère de remplacement suspect dans le texte SVG: {content!r}.",
|
||||
)
|
||||
)
|
||||
if SLASH_FRACTION_RE.search(content):
|
||||
issues.append(
|
||||
Issue(
|
||||
|
||||
Reference in New Issue
Block a user