Maxim Dolgolyov
c020a2c948
План (PLAN_MATH_5 + VISUAL: карта 22 визуал-компонентов), миграция 050_math5_hub (хаб math-5 + 3 главы: Натуральные числа §1–17, Выражения. Уравнения §1–9, Обыкновенные дроби §1–18), страница-хаб (3 карточки + курсовой финал из 3 боссов + звание «Математик 5 класса») и 3 каркаса глав на ОБЩЕМ движке math6 (window.M6 с slug math-5-chN, ключи math5_*). Baseline-тест math5-page: 6/6. § без билдера → заглушка движка. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
8.8 KiB
PLAN — Визуализации «Математика 5»
Карта «§ → визуальный компонент». Опора — существующая библиотека window.Math6 (статичные SVG)
и window.Math6Anim (canvas/SVG-демо, headless-safe). Переиспользуем максимум, новое дописываем
в те же два файла.
Легенда: ✅ уже есть · 🆕 новый компонент · ♻️ есть, нужна лёгкая доработка.
Уже готово (наследуем без изменений)
Math6: fmt, box, numberLine(line/ray, ticks, points, segments), plane(+polyline,plot), pie, venn.
Math6Anim: rollingCircle, sweepArea, areaModel, numberLineWalk, carGraph, plotLive, thermometer, numberLineJumps, coordGame, reflectFold, barModel, setFilter, pieGrow, balanceScale, constAreaRect, triangleDrag + stepPlayer/stepifyExamples (авто-конвертация «Разбор по шагам» в плеер).
Глава 1 — Натуральные числа
| § | Тема | Визуал | Статус |
|---|---|---|---|
| 1 | Как решать задачу | stepPlayer (схема: условие→план→решение→проверка) |
✅ |
| 2 | Чтение и запись, разряды | 🆕 placeValue — разрядная таблица (классы/разряды), число рассыпается на разряды |
🆕 |
| 3 | Сравнение | numberLine + подсветка >/< ; тренажёр |
✅ |
| 4 | Точка, прямая, луч, отрезок, плоскость | 🆕 linePrimitives — SVG-галерея + интерактив «проведи через 2 точки» |
🆕 |
| 5 | Измерение отрезков, длина | 🆕 rulerMeasure — линейка над отрезком, тащишь — читаешь длину |
🆕 |
| 6 | Координатный луч | numberLine (ray) + coordGame («поставь число») |
✅ |
| 7 | Округление | numberLine со «снэпом» к разряду (стрелка к ближайшему) |
♻️ |
| 8 | Сложение и вычитание | numberLineWalk + столбик (inline, как 6 кл.) |
✅ |
| 9 | Умножение и деление | areaModel (a·b) + numberLineJumps (прыжки) |
✅ |
| 10 | Степень | 🆕 powerBlocks — 2² как квадрат, 2³ как кубик (изометрия), рост основания/показателя |
🆕 |
| 11 | Деление с остатком | 🆕 remainderGroups — раскладка точек по группам, остаток подсвечен (a=b·q+r) |
🆕 |
| 12 | Делители, НОД, НОК | 🆕 divisorsLadder — лесенки кратных (НОК) + venn делителей (НОД) |
🆕 (venn ✅) |
| 13 | Признаки делимости | 🆕 divisibilityChecker — вводишь число, флажки 2/3/4/5/9/10 загораются с объяснением |
🆕 |
| 14 | Простые/составные, разложение | 🆕 sieve (решето Эратосфена — анимация вычёркивания) + 🆕 factorTree (дерево множителей) |
🆕 |
| 15 | Математика вокруг нас | прикладные карточки + любой подходящий демо | ✅ |
| 16 | Движение/взвешивание/переливание | carGraph (движение) + интерактив-головоломка «переливание» (state-машина) |
✅/🆕 |
| 17 | Исторические сведения | карточки «А знаешь ли ты?» (системы счисления: майя/Египет/Рим) | ✅ |
Глава 2 — Выражения. Уравнения
| § | Тема | Визуал | Статус |
|---|---|---|---|
| 1 | Числовые выражения | 🆕 exprTree — дерево порядка действий, подсветка шага |
🆕 |
| 2 | Выражения с переменными | exprTree + подстановка значения (слайдер x → значение) |
♻️ |
| 3 | Уравнение | 🆕 equationScale — весы: x+a = b, снимаем гири поровну (наследует balanceScale) |
🆕 |
| 4 | Формулы | constAreaRect / прямоугольник P=(a+b)·2, S=a·b со слайдерами |
✅ |
| 5 | Решение задач уравнениями | stepPlayer |
✅ |
| 6 | Угол. Измерение и построение | 🆕 protractor — транспортир: тащишь луч, читаешь градусы, классификация (остр/прям/туп/развёрн) |
🆕 ★ключевой |
| 7 | Математика вокруг нас | прикладные карточки | ✅ |
| 8 | Занимательные задачи | головоломки/квизы | ✅ |
| 9 | Исторические сведения | карточки-факты | ✅ |
Глава 3 — Обыкновенные дроби
| § | Тема | Визуал | Статус |
|---|---|---|---|
| 1 | Дробные числа, обыкн. дроби | 🆕 fractionBar (полоса m из n) + pie (доля круга) |
🆕 (pie ✅) |
| 2 | Деление и дроби, осн. свойство | 🆕 equivFractions — дроблю каждую долю → площадь та же (2/3 = 4/6) |
🆕 |
| 3 | Правильные/неправильные, смешанные | 🆕 improperMixed — полосы складываются в целые + остаток (7/3 = 2⅓) |
🆕 |
| 4 | Сравнение дробных | fractionBar ×2 на общей шкале / numberLine дробей |
♻️ |
| 5 | Сложение/вычитание обыкн. дробей | 🆕 fractionAdd — приведение к общему знаменателю на полосах |
🆕 |
| 6 | Сложение/вычитание смешанных | fractionAdd + целые части |
♻️ |
| 7 | Умножение дробных | 🆕 fractionMulArea — площадная модель a/b · c/d (наложение сеток) |
🆕 |
| 8 | Деление дробных | 🆕 fractionDiv — «сколько раз c/d помещается» (мерная модель) |
🆕 |
| 9 | Задачи на все действия | stepPlayer |
✅ |
| 10 | Задачи на применение дробей | fractionBar + сюжетные тренажёры |
♻️ |
| 11 | Параллельные/перпендикулярные | 🆕 linesRelation — две прямые, угол между ними, ∥ и ⟂ |
🆕 |
| 12 | Ломаная, многоугольник, периметр | 🆕 polygonPerimeter — строишь вершины, стороны суммируются |
🆕 |
| 13 | Площадь, единицы | 🆕 areaGrid — заполнение единичными квадратами, конвертер единиц |
🆕 |
| 14 | Площадь прям. треугольника | 🆕 triangleArea — треугольник = половина прямоугольника (анимация отражения) |
🆕 |
| 15 | Среднее арифметическое | 🆕 averageBars — столбики выравниваются к среднему уровню |
🆕 |
| 16 | Линейные/столбчатые диаграммы | 🆕 barChart + lineChart (plane уже умеет polyline) |
🆕 (line ♻️) |
| 17 | Параллелепипед, куб | 🆕 box3d — изометрический чертёж с подписанными a,b,c (НЕ интерактивный 3D) |
🆕 |
| 18 | Объём | 🆕 volumeCubes — заполнение коробки единичными кубиками (изометрия, анимация) |
🆕 |
Сводка новых компонентов (≈22)
SVG-статичные / интерактивные (в math6_svg.js или как SVG-демо): linePrimitives, rulerMeasure,
placeValue, fractionBar, equivFractions, improperMixed, linesRelation, polygonPerimeter,
areaGrid, triangleArea, box3d, factorTree, exprTree.
Canvas/анимированные (в math6_anim.js): powerBlocks, remainderGroups, divisorsLadder,
divisibilityChecker, sieve, protractor, equationScale, fractionAdd, fractionMulArea,
fractionDiv, averageBars, barChart, volumeCubes.
Приоритет (даёт максимум «вау» при минимуме кода): protractor, fractionBar+fractionMulArea,
sieve, box3d+volumeCubes, equationScale. Все — headless-safe (canvas-guard / чистый SVG).