From cd11b2aec6f96fbde14a0a48271e35881c583cdc Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Fri, 29 May 2026 10:00:27 +0300 Subject: [PATCH] =?UTF-8?q?docs(plans):=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BF=D0=BB=D0=B0=D0=BD=D1=8B=20?= =?UTF-8?q?=D0=90=D0=BB=D0=B3=D0=B5=D0=B1=D1=80=D1=8B=2010=20=D0=B8=20?= =?UTF-8?q?=D0=93=D0=B5=D0=BE=D0=BC=D0=B5=D1=82=D1=80=D0=B8=D0=B8=2010?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PLAN_ALGEBRA_10.md (45 KB): - 3 главы, 22 параграфа (тригонометрия + корень n-й степени + производная) - Новая библиотека alg10_svg.js с модулями tri / func / nthRoot - Темы: teal / violet / green - ~140 интерактивов, 25 боссов, 11 волн реализации - Заранее спроектированы все SVG-рисунки (координаты, цвета, подписи) PLAN_GEOMETRY_10.md (39 KB): - 4 раздела, 14 параграфов (стереометрия + векторы) - КРИТИЧЕСКАЯ библиотека stereo3d.js (~700 строк): * Класс Scene с проекциями (CABINET / ISOMETRIC) * Предопределённые тела (cube / box / tetrahedron / pyramid / prism) * Плоскости, прямые, углы в 3D * Слайдеры поворота X/Y для интерактивных рисунков * Авто видимые/невидимые рёбра - Темы: blue / emerald / rose / amber - ~140 интерактивов, 24 босса, 11 волн реализации - Анимации сечений многогранников в §3 раздела 1 --- docs/PLAN_ALGEBRA_10.md | 896 +++++++++++++++++++++++++++++++++++++++ docs/PLAN_GEOMETRY_10.md | 734 ++++++++++++++++++++++++++++++++ 2 files changed, 1630 insertions(+) create mode 100644 docs/PLAN_ALGEBRA_10.md create mode 100644 docs/PLAN_GEOMETRY_10.md diff --git a/docs/PLAN_ALGEBRA_10.md b/docs/PLAN_ALGEBRA_10.md new file mode 100644 index 0000000..98bb2f6 --- /dev/null +++ b/docs/PLAN_ALGEBRA_10.md @@ -0,0 +1,896 @@ +# План реализации — Алгебра 10 класс + +**Учебник:** И. Г. Арефьева, О. Н. Пирютко. Алгебра 10. Минск, Народная асвета, 2019. 285 страниц. + +**Объём курса:** 3 главы, 22 параграфа, ~140 интерактивов, ~22 босса (по 1 на §) + 3 главных босса. + +**Структура повторяет паттерн «Геометрия 7 / Алгебра 7»**: SPA-главы с PARAS/BUILDERS, KaTeX, инлайн SVG, локальный прогресс + серверная синхронизация через `/api/textbooks//progress`. + +--- + +## 0. Общая архитектура + +### 0.1 Файлы + +``` +backend/src/db/migrations/ + 020_algebra_10_hub.sql -- hub + 3 ребёнка (algebra-10, algebra-10-ch1..ch3) + +frontend/textbooks/ + algebra_10_hub.html -- HUB-страница: 3 карточки глав + общий прогресс + algebra_10_ch1.html -- Глава 1 «Тригонометрия» (12 § + Финал) + algebra_10_ch2.html -- Глава 2 «Корень n-й степени» (5 § + Финал) + algebra_10_ch3.html -- Глава 3 «Производная» (5 § + Финал) + +frontend/js/ + alg10_svg.js -- НОВАЯ библиотека. Включает в себя geom7_svg.js + (через расширение window.GEOM7 → window.ALG10) + плюс тригонометрические и графические хелперы. + alg10-fx.js -- Эффекты: комбо, анимации, спец-визуализаторы + (по аналогии с alg7-fx.js). + +frontend/css/ + alg10-fx.css -- @keyframes shake/pulse/glow/combo-pop + +backend/scripts/ + seed_algebra_10.js -- (опц.) сидер для CT-задач уровня 10 +``` + +### 0.2 Темы глав (унаследовано из дизайн-системы) + +| Глава | Тема | Основные цвета | Watermark | +|---|---|---|---| +| 1 — Тригонометрия | **teal** | `#0d9488` → `#5eead4` | `sin α` | +| 2 — Корень n-й степени | **violet** | `#7c3aed` → `#c4b5fd` | `ⁿ√` | +| 3 — Производная | **green** | `#059669` → `#86efac` | `f'(x)` | + +Все три темы поддерживают `:root` + `.dark` варианты, ту же сетку 12-колонок (`.main` grid 1fr 280px), sidebar/sec-nav/psel. + +### 0.3 Унифицированная разметка секции + +Каждый § = `
`. Внутри: +- `
§ N

Название

` +- `
` — заполняется через `buildPN()` + +PARAS-объект, SIDEBARS, TIPS, BUILDERS — как в `geometry_7_ch4.html`. + +--- + +## 1. Новая библиотека `alg10_svg.js` + +Расширение `geom7_svg.js`. Сохраняет совместимость, добавляет новые модули. + +### 1.1 Модуль `ALG10.tri` — тригонометрическая окружность + +```js +// Создать единичную окружность с центром в (cx, cy) и радиусом R px. +// Возвращает объект с методами для рисования элементов. +ALG10.tri.canvas(W, H, opts) → { + cx, cy, R, // координаты центра и радиус (в px) + open, close, // строки SVG-обёртки + axes(opts), // оси координат + метки 1 + circle(), // сама окружность (тонкая, чёрная) + point(angle, opts), // точка P_α (label, color) + radius(angle, opts), // отрезок OP_α + arc(angle, opts), // сектор от P_0 до P_α (зелёный, fill) + sinSegment(angle), // вертикальный отрезок sin α (красный) + cosSegment(angle), // горизонтальный отрезок cos α (синий) + tgAxis(), // ось тангенсов справа (x = 1) + ctgAxis(), // ось котангенсов сверху (y = 1) + tgValue(angle), // отрезок и метка на оси тангенсов + ctgValue(angle), // отрезок и метка на оси котангенсов + degreeMark(deg, opts),// метка градуса (30°, 45°, 60°, 90°, ...) + radianMark(rad, opts),// метка радиана (π/6, π/4, π/3, π/2, ...) + quadrantLabel(n) // I, II, III, IV +} +``` + +**Пример использования:** +```js +const c = ALG10.tri.canvas(300, 300, {id:'p1-base'}); +const angle = Math.PI / 3; // 60° +let s = c.open + + c.axes() + + c.circle() + + c.degreeMark(30) + c.degreeMark(60) + c.degreeMark(90) + + c.radius(angle, {color:'#dc2626'}) + + c.point(angle, {label:'P_{60°}', color:'#dc2626'}) + + c.arc(angle, {color:'#86efac', fill:'rgba(134,239,172,.2)'}) + + c.close; +``` + +Размеры по умолчанию: W=300, H=300, R = (W-60)/2 = 120. + +### 1.2 Модуль `ALG10.func` — графики функций + +```js +ALG10.func.canvas(W, H, opts) → { + // opts: xRange:[xMin,xMax], yRange:[yMin,yMax], gridStep:1 + open, close, + pxX(x), pxY(y), // конверторы математических координат → пиксели + grid(), // сетка (тонкие штрихи) + axes(opts), // оси с метками + plot(fn, opts), // график функции y=fn(x) на xRange + parametric(fn, t, opts),// параметрическая кривая (x(t), y(t)) + pointXY(x, y, opts), // точка с подписью + tangentLine(fn, x0, opts), // касательная к fn в точке x0 + areaUnder(fn, [a,b], opts),// закрашенная область + asymptoteV(x, opts), // вертикальная асимптота + asymptoteH(y, opts), // горизонтальная асимптота + labeledTick(axis, val, label) // именованная отметка на оси +} +``` + +**Пример:** график y = sin x на [-2π; 2π]. +```js +const f = ALG10.func.canvas(560, 220, {xRange:[-2*Math.PI, 2*Math.PI], yRange:[-1.5, 1.5]}); +let s = f.open + + f.grid() + + f.axes({xTicks:[{val:-Math.PI, label:'-π'}, {val:Math.PI, label:'π'}]}) + + f.plot(x => Math.sin(x), {color:'#0d9488', width:2.5}) + + f.close; +``` + +### 1.3 Модуль `ALG10.func.derivative` — для главы 3 + +```js +ALG10.func.canvas(...).derivative(fn, x0, dx) → + { dfdx, deltaF, deltaX, midpoint, secant SVG-fragment } +``` + +Помогает визуализировать определение производной через секущую → касательную (при `dx → 0`). + +### 1.4 Модуль `ALG10.nthRoot` + +Графики `y = ⁿ√x` для чётных и нечётных n, наложение друг на друга. + +--- + +## 2. Глава 1 «Тригонометрия» (12 §) + +**Тема:** teal/cyan. **Финал:** 6 боссов (объединение тем). **Объём файла:** ~3000 строк. + +### § 1. Единичная окружность. Градусная и радианная мера + +**Цель:** Понять единичную окружность, повороты на углы любой величины, преобразование град ↔ рад. + +**Рисунки (готовы заранее):** + +1. **Главный SVG: единичная окружность с делениями** (320×320, R=130). + - 4 оси-метки: `(1;0)`, `(0;1)`, `(-1;0)`, `(0;-1)` + - 12 главных делений: 0°, 30°, 60°, 90°, 120°, ..., 330° (двойная подпись град/рад) + - Цветные точки: красная при 60°, оранжевая при 135°, зелёная при 240°, синяя при -45° + - Стрелки направления вращения: `+` (CCW) сверху, `−` (CW) снизу + +2. **Анимированная стрелка поворота (интерактив):** + - Slider для угла α ∈ [-720°; 720°] + - Точка P_α перемещается по окружности + - Метка показывает текущее значение α и эквивалентное в [0°; 360°) + +3. **Конвертер град ↔ рад** (отдельный SVG, 320×120): + - Две горизонтальные шкалы: верх — градусы [0, 360], низ — радианы [0, 2π] + - Двунаправленная стрелка между метками 90° ↔ π/2 (с подсветкой) + +**Карточки теории (5 шт):** +- 1.1 Определение единичной окружности. Координатная плоскость, центр O, R=1. +- 1.2 Точка P_α и угол поворота. Положительное/отрицательное направление. +- 1.3 Углы больше 360°. Полные обороты. P_α совпадает с P_{α+360°·n}. +- 1.4 Радианная мера. 1 рад ≈ 57°. Формулы: `град · π/180`, `рад · 180/π`. +- 1.5 Четверти координатной плоскости. Сводная таблица: в какой четверти угол. + +**Интерактивы:** +1. **Слайдер угла** — крути угол α от -720° до 720°, точка P_α на окружности обновляется в реальном времени. Подпись эквивалентного α в [0, 360°). +2. **Тренажёр «град ↔ рад»** — 8 заданий, попеременно перевод в обе стороны. С градусами как 150°, 225°, 540°, и радианами как π/3, 5π/4, 7π/6. +3. **Четверть угла** — 6 заданий: «В какой четверти лежит угол α?» (с углами 220°, -100°, 7π/6, и т.д.). + +**Босс §1:** 5 этапов +- E1: Преобразуй 240° в радианы. +- E2: Преобразуй π/4 в градусы. +- E3: В какой четверти лежит угол 1300°? (приводи к [0°, 360°)) +- E4: Сколько различных точек P_α получится из углов π/3, -π/3, 7π/3, -5π/3? (Ответ: 2) +- E5: Радианная мера двух углов треугольника равна 2π/5 и 3π/10. Определи тип треугольника. + +--- + +### § 2. Синус и косинус произвольного угла + +**Цель:** Определения sin α и cos α через координаты точки P_α; знаки по четвертям; значения для главных углов. + +**Рисунки:** + +1. **Сравнение с прямоугольным треугольником** (260×180): + - Слева: прямоугольный △ABC с углом α при A, метки `sin α = a/c`, `cos α = b/c` + - Справа: единичная окружность, точка P_α, проекции на оси — это координаты P_α = (cos α; sin α) + - Стрелка между ними «Обобщение!» + +2. **Знаки sin/cos по четвертям** (320×280): + - Единичная окружность разбита на 4 четверти цветными секторами + - Внутри каждой: символы `sin α [+/-]` и `cos α [+/-]` + - I: оба +, II: sin+ cos−, III: оба −, IV: sin− cos+ + +3. **Таблица главных углов** — отдельный SVG-объект с таблицей 30°/45°/60° + их радианы + sin/cos значения. Цветовая кодировка ячеек. + +4. **Симметрия и связи** (340×280): + - Окружность с 4 симметричными точками: P_{60°}, P_{-60°}, P_{120°}, P_{240°} + - Связи через оси симметрии (ось x для +/-, начало для α/α+π, ось y для π-α) + +**Карточки теории (4 шт):** +- 2.1 Определение sin α = y_α, cos α = x_α. Распространение на любые углы. +- 2.2 Область значений: `-1 ≤ sin α ≤ 1`, `-1 ≤ cos α ≤ 1`. +- 2.3 Знаки по четвертям. Мнемоника: «**В**се **С**тудентам **Т**рудно **К**атаются» (по часовой: sin+, sin/cos+, cos+, всё+ в I → перепроверить). +- 2.4 Значения для углов 0, π/6, π/4, π/3, π/2 (таблица). + +**Интерактивы:** +1. **Угадай знак** — 10 заданий: дан угол (например 130°, 258°, -150°), выбери знак sin/cos из 4 кнопок (+/+, +/-, -/+, -/-). +2. **Найди значение** — 8 заданий: вычисли sin/cos с использованием таблицы и формул отражения. Углы как 120°, 240°, 420°, -60°. +3. **Точка по координате** — slider для sin α: задаёшь y_0 ∈ [-1; 1], точка(и) на окружности подсвечиваются (их может быть две — P_α и P_{π-α}). Подсчитай число углов в [0°, 360°). + +**Босс §2:** 5 этапов +- Вычисли sin(-120°). +- Вычисли cos(11π/6). +- Точка P_α имеет координаты (3/5; -4/5). Найди sin α и cos α. +- Может ли sin α = √3? «да/нет» +- В каких четвертях sin α · cos α > 0? + +--- + +### § 3. Тангенс и котангенс произвольного угла + +**Цель:** Определения tg α = sin α / cos α, ctg α = cos α / sin α; оси тангенсов и котангенсов; ОДЗ. + +**Рисунки:** + +1. **Ось тангенсов** (320×320): + - Единичная окружность + вертикальная касательная x=1 (зелёная) + - Точка P_α при α=30°, продолжение OP_α до пересечения с касательной — это точка A_α, её y-координата = tg α + - Подпись `tg α ≈ 0.577` + +2. **Ось котангенсов** (320×320): + - Единичная окружность + горизонтальная касательная y=1 (фиолетовая) + - Точка P_α при α=60°, продолжение OP_α до пересечения — точка A_α, её x-координата = ctg α + +3. **Запретные углы** (340×220): + - tg: углы π/2 + πn (где cos α = 0) — вертикальные ярко-красные линии-«барьеры» + - ctg: углы πn (где sin α = 0) — горизонтальные ярко-красные «барьеры» + +**Карточки теории (4 шт):** +- 3.1 Определения через sin/cos. ОДЗ. +- 3.2 Геометрический смысл — ось тангенсов / котангенсов. +- 3.3 Знаки по четвертям. Кратко: tg = sin/cos, поэтому знак — произведение знаков. +- 3.4 Сравнение значений по позиции точки на оси. + +**Интерактивы:** +1. **Существует ли?** — 8 заданий: «Существует ли tg 270°?» / «ctg 0?» — да/нет. +2. **Знак тангенса/котангенса** — 8 заданий: определи знак tg α, если α лежит в указанной четверти или диапазоне. +3. **Сравни** — 6 заданий вида «tg 110° vs tg 140°» — с использованием оси тангенсов как наглядного инструмента. + +**Босс §3:** 5 этапов +- tg π = ? +- ctg(-149°) — какой знак? +- Найди tg α, если P_α = (5/13; -12/13). +- Расположи в порядке возрастания: tg 110°, tg 140°, tg 230°. +- ctg α определён для всех α, кроме каких? (Ответ: πn, n∈Z) + +--- + +### § 4. Тригонометрические тождества + +**Цель:** Основное тождество `sin² + cos² = 1`; связи между всеми 4 функциями. + +**Рисунки:** + +1. **Окружность и теорема Пифагора** (300×300): + - Точка P_α(x_0; y_0) на окружности + - Прямоугольный треугольник с катетами |x_0|, |y_0| и гипотенузой R=1 + - Подпись: `x_0² + y_0² = 1` → `sin² α + cos² α = 1` + - Цветовая кодировка: красный sin (вертикаль), синий cos (горизонталь) + +2. **Граф 4 тождеств** (схема, 360×200): + - 4 кружка с надписями: «sin² + cos² = 1», «tg = sin/cos», «ctg = cos/sin», «tg · ctg = 1» + - Стрелки между ними показывают вывод одного из другого + +3. **Дерево решения «найти всё по одной»** (360×260): + - Если дано `sin α = a`, в какой четверти, то по тождеству находим `cos = ±√(1-a²)`, потом `tg`, `ctg` + +**Карточки теории (4 шт):** +- 4.1 Основное тригонометрическое тождество. +- 4.2 Производные тождества: `tg·ctg = 1`, `1 + tg² = 1/cos²`, `1 + ctg² = 1/sin²`. +- 4.3 Алгоритм «найти все 4 функции по одной». 4 шага. +- 4.4 Упрощение тригонометрических выражений (примеры). + +**Интерактивы:** +1. **Найди всё по sin α** — 5 заданий: дано sin α, в какой четверти угол → найди cos, tg, ctg. +2. **Найди всё по tg α** — 5 заданий. +3. **Упрости** — 5 заданий: упрости выражения вроде `3 - sin² - cos²`, `sin α · ctg α + cos α`, и т.д. + +**Босс §4:** 5 этапов +- Может ли sin α = 5/13 и cos α = 12/13 одновременно? Проверь. +- Если sin α = -3/5 и α ∈ (π; 3π/2), найди cos α. +- Если tg α = 0.75 и α ∈ (π; 3π/2), найди ctg α. +- Упрости: `(1+tg² α) · cos² α`. +- Может ли tg α = 4 и ctg α = 0.25 одновременно? (Ответ: да) + +--- + +### § 5. Функции y = sin x и y = cos x + +**Цель:** Свойства, графики, симметрии, преобразования. + +**Рисунки:** + +1. **График y = sin x** на отрезке [-3π; 3π] (640×220): + - Сетка с шагом π/2 + - Жирная линия синуса (teal) + - Метки нулей: 0, π, 2π, -π, ... + - Метки экстремумов: π/2 → +1, 3π/2 → -1 + - Полупрозрачные полоски области значений [-1; 1] + +2. **График y = cos x** на отрезке [-3π; 3π] (640×220): + - То же самое, но синяя линия + - Косинус = синус, сдвинутый на π/2 (видно сразу) + +3. **Совмещённый график** sin и cos (640×220): + - Обе кривые на одной системе координат + - Точка пересечения подсвечена: при x = π/4 + πk + +4. **Свойства в таблице** (420×320): + - Карточки 3×3: ООО, ОЗ, период, чётность, нули, монотонность + +5. **Преобразования** (640×220, интерактив): + - Slider для параметров A, ω, φ, b в `y = A sin(ωx + φ) + b` + - Базовая линия y = sin x штрихом, преобразованная — жирная + +**Карточки теории (5 шт):** +- 5.1 Периодичность T = 2π. +- 5.2 Чётность: cos — чётная, sin — нечётная. +- 5.3 Нули и экстремумы. +- 5.4 Монотонность по промежуткам. +- 5.5 Преобразования графиков (сдвиги, растяжения). + +**Интерактивы:** +1. **Сопоставь график со свойством** — 6 заданий: показан фрагмент графика, выбери название. +2. **Slider-эксперимент** — самостоятельно вариировать A, ω, φ → отметь как меняется. +3. **Найди по графику** — задачи на нахождение нулей, max, монотонности. + +**Босс §5:** 5 этапов +- Период функции y = sin 2x = ? +- y = cos x — чётная или нечётная? +- На каком промежутке [0; 2π] функция sin x возрастает? +- Чему равно sin(π/2 + π·n) для n∈Z? (Ответ: ±1, зависит от чётности n) +- График какой функции получится из y = sin x сдвигом вверх на 1? + +--- + +### § 6. Функции y = tg x и y = ctg x + +**Цель:** Графики, период π, асимптоты, нули. + +**Рисунки:** + +1. **График y = tg x** (640×260): + - Сетка + - Жирная фиолетовая линия с разрывами в π/2 + πk + - Вертикальные пунктирные асимптоты (красные) + - Нули: 0, π, -π, 2π, ... + +2. **График y = ctg x** (640×260): + - То же, но оранжевая линия + - Асимптоты в πk + - Нули: π/2, 3π/2, -π/2, ... + +3. **Сравнительная таблица** свойств tg и ctg. + +**Интерактивы:** +1. Найди нули tg или ctg в указанном промежутке. +2. Сравни значения tg α₁ и tg α₂ по графику. +3. Определи знак выражения по графику. + +**Босс §6:** 5 этапов. + +--- + +### § 7. Арксинус, арккосинус, арктангенс, арккотангенс + +**Цель:** Обратные тригонометрические функции, их области значений, графики. + +**Рисунки:** + +1. **Главный SVG: 4 окружности** (640×640): + - В каждой выделен «допустимый диапазон» обратной функции: + - arcsin: [-π/2; π/2] — правая половина окружности + - arccos: [0; π] — верхняя половина + - arctg: (-π/2; π/2) — без π/2 и -π/2 + - arcctg: (0; π) + - Указано: «один угол, остальные эквивалентные за оборотами» + +2. **Графики обратных функций** — 4 маленьких SVG. + +**Карточки (4):** определения + области значений + таблица «арк-X для часто встречающихся X». + +**Интерактивы:** +1. **Найди значение arcsin / arccos / arctg / arcctg**. +2. **Связь с прямыми функциями**: sin(arcsin a) = a (всегда), cos(arccos a) = a (всегда), но arcsin(sin α) ≠ α в общем случае! + +**Босс §7:** 5 этапов. + +--- + +### § 8. Тригонометрические уравнения + +**Цель:** Решение sin x = a, cos x = a, tg x = a; одновременные/однородные уравнения. + +**Рисунки:** + +1. **Геометрическое решение** sin x = a (340×300): + - Окружность, горизонтальная линия y = a + - Две точки пересечения P_{x₁} и P_{x₂} = P_{π - x₁} + - Подписи: `x₁ = arcsin a + 2πn`, `x₂ = π - arcsin a + 2πn` + - Обобщённая формула: `x = (-1)ⁿ arcsin a + πn` + +2. **Геометрическое решение** cos x = a (340×300): + - Аналогично, вертикальная линия x = a, две точки симметрично относительно оси x + - `x = ±arccos a + 2πn` + +3. **tg x = a** — точка A_a на оси тангенсов → одна точка на окружности → формула `x = arctg a + πn`. + +4. **Карта особых случаев** (380×260): + - sin x = 0, 1, -1; cos x = 0, 1, -1 + - С геометрической иллюстрацией для каждого + +**Карточки (6):** +- 8.1 Общие формулы. +- 8.2 Особые случаи (a = 0, ±1). +- 8.3 Замена переменной. +- 8.4 Однородные уравнения 1-й и 2-й степени. +- 8.5 Метод разложения на множители. +- 8.6 Уравнения с приведением. + +**Интерактивы:** +1. **Сопоставь корень с уравнением** — drag-and-drop. +2. **Реши простейшее** — 10 заданий. +3. **Найди корни в промежутке** — 5 заданий. + +**Босс §8:** 6 этапов (это большой §). + +--- + +### § 9. Формулы приведения + +**Цель:** Привести любое sin/cos/tg/ctg к функции острого угла. + +**Рисунки:** + +1. **Правило для запоминания** (340×200): + - Дерево решения «название меняется / не меняется»: + - Если аргумент `π/2 ± α` или `3π/2 ± α` — название МЕНЯЕТСЯ (sin↔cos, tg↔ctg) + - Если аргумент `π ± α` или `2π ± α` — название НЕ МЕНЯЕТСЯ + - Знак определяется по знаку исходной функции в соответствующей четверти + +2. **Таблица формул** (380×320, 6×4): + - Колонки: sin, cos, tg, ctg + - Строки: π/2-α, π/2+α, π-α, π+α, 3π/2-α, 3π/2+α, 2π-α + - Каждая ячейка — формула с цветом, отражающим знак + +3. **Пошаговый пример с подсветкой** (340×200): + - cos(3π/2 - α): «3π/2 — половина → название меняется → cos→sin», «3π/2 - α в III четверти при остром α → cos<0 → знак "-"» + +**Карточки (3):** +- 9.1 Правило двух шагов. +- 9.2 Полная таблица. +- 9.3 Примеры применения. + +**Интерактивы:** +1. **Приведи к острому углу** — 8 заданий. +2. **Вычисли значение** — sin(3π/4), tg(7π/6), ctg(300°), cos(-7π/4) и т.д. (10 заданий) +3. **Упрости выражение** — 6 заданий, где приведение комбинируется с тождествами. + +**Босс §9:** 5 этапов. + +--- + +### § 10. Синус, косинус, тангенс суммы и разности + +**Цель:** Формулы сложения. Геометрическое обоснование. + +**Рисунки:** + +1. **Геометрическое доказательство** sin(α + β) (360×280): + - Прямоугольный треугольник с углом α+β + - Разбиение на 2 прямоугольника (для β и для α) + - Метки: sin α cos β + cos α sin β + +2. **Таблица 8 формул** (420×260): sin(α±β), cos(α±β), tg(α±β). + +3. **Применение для вычисления** sin 75° = sin(45°+30°) и т.д. + +**Карточки (4):** +- 10.1 Формулы для синуса и косинуса. +- 10.2 Формулы для тангенса. +- 10.3 Применение для вычисления «нестандартных» углов. +- 10.4 Доказательство для cos(α-β) (классическое). + +**Интерактивы:** +1. **Вычисли значение** — sin 75°, cos 15°, tg 105°. +2. **Упрости** — sin(α+π/3) cos α + cos(α+π/3) sin α = sin(2α+π/3). +3. **Найди значение** — если sin α = 3/5 в I четверти, найди sin(α + π/6). + +**Босс §10:** 5 этапов. + +--- + +### § 11. Формулы двойного аргумента + +**Цель:** sin 2α, cos 2α, tg 2α. Понижение степени. + +**Рисунки:** + +1. **Вывод как частный случай** (360×260): + - Из формулы sin(α+β) → sin 2α = 2 sin α cos α + - Из cos(α+β) → cos 2α = cos² α - sin² α + - 3 варианта для cos 2α: через cos², через sin², через 1 + +2. **Формулы понижения степени** (300×180): + - sin² α = (1 - cos 2α)/2 + - cos² α = (1 + cos 2α)/2 + +3. **Графическая иллюстрация**: график y = sin² x в сравнении с y = (1 - cos 2x)/2 — совпадают. + +**Интерактивы:** +1. **Вычисли по cos α**: дано cos α, найди sin 2α, cos 2α. +2. **Упрости** — 6 заданий. +3. **Реши уравнение** sin 2x = sin x. + +**Босс §11:** 5 этапов. + +--- + +### § 12. Преобразование суммы (разности) в произведение + +**Цель:** Формулы sin α ± sin β = ..., cos α ± cos β = ... + +**Рисунки:** + +1. **Таблица 4 формул** (380×220). + +2. **Применение для решения уравнения** sin 3x + sin x = 0 → 2 sin 2x cos x = 0 → 2 простых уравнения. + +**Интерактивы:** +1. Преобразуй сумму/разность в произведение. +2. Реши уравнение методом преобразования. + +**Босс §12:** 4 этапа. + +--- + +### ФИНАЛ ГЛАВЫ 1 — 6 боссов + +- **Босс 1 — Окружность и значения**: задачи на §1-§4. +- **Босс 2 — Графики**: задачи на §5-§7. +- **Босс 3 — Уравнения**: задачи на §8. +- **Босс 4 — Приведение**: задачи на §9. +- **Босс 5 — Формулы сложения и двойного**: §10-§11. +- **Босс 6 — Финальный**: смешанная задача, сумма/разность + уравнение из §8. + +Награда: ачивка «Глава 1 — Тригонометрия пройдена!» + 200 XP. + +--- + +## 3. Глава 2 «Корень n-й степени» (5 §) + +**Тема:** violet. **Финал:** 4 босса. **Объём:** ~1800 строк. + +### § 13. Корень n-й степени из числа a (n > 2, n ∈ N) + +**Рисунки:** + +1. **График y = xⁿ** для n = 2, 3, 4, 5, 6 (640×300): + - 5 кривых разных цветов + - Чёрная горизонтальная линия y = a, пересекающая каждую кривую → даёт ⁿ√a + - Видно: для чётных n возможны 2 корня (±), для нечётных — 1 корень + +2. **Дерево «когда определён?»** (300×200): + - Чётный n → подкоренное ≥ 0 + - Нечётный n → любое действительное число + +**Карточки (3):** +- 13.1 Определение арифметического и алгебраического корня. +- 13.2 Существование при чётных и нечётных n. +- 13.3 Связь с уравнением xⁿ = a. + +**Интерактивы:** «Существует ли?», «Найди значение», «Реши xⁿ = a». + +**Босс §13:** 5 этапов. + +--- + +### § 14. Свойства корней n-й степени + +**Рисунки:** + +1. **Карта 5 свойств** в виде таблицы 5×2 (формула + пример). + +**Карточки (5):** +- 14.1 Корень из произведения. +- 14.2 Корень из частного. +- 14.3 Умножение показателя. +- 14.4 Корень из корня. +- 14.5 ⁿ√aⁿ (= |a| если n чётное, иначе = a). + +**Интерактивы:** 3 тренажёра по применению свойств. + +**Босс §14:** 5 этапов. + +--- + +### § 15. Применение свойств для преобразований + +**Цель:** Вынесение/внесение множителя, избавление от иррациональности в знаменателе. + +**Рисунки:** Шаговые карточки с подсветкой действий. + +**Интерактивы:** 3 интенсивных тренажёра. + +**Босс §15:** 5 этапов. + +--- + +### § 16. Функция y = ⁿ√x. Свойства и график + +**Рисунки:** + +1. **Графики ⁿ√x для разных n** (640×300): + - Чётные n: только x ≥ 0, выпуклые вверх + - Нечётные n: вся ось, прохождение через 0 + +2. **Сравнительная таблица свойств**: + - ООО, ОЗ, монотонность, чётность/нечётность. + +**Интерактивы:** «По графику определи n», «Сравни ⁿ√a и ᵐ√a». + +**Босс §16:** 5 этапов. + +--- + +### § 17. Иррациональные уравнения + +**Цель:** Решение уравнений с корнями. Возведение в степень. Посторонние корни. + +**Рисунки:** + +1. **Алгоритм решения с проверкой** (380×280): + - Шаги в карточках + - Подсветка «обязательно проверять корни!» + +**Карточки (4):** виды уравнений, метод возведения, метод замены, проверка. + +**Интерактивы:** 3 тренажёра с разной сложностью. + +**Босс §17:** 6 этапов. + +--- + +### ФИНАЛ ГЛАВЫ 2 — 4 босса. + +Награда: ачивка «Глава 2 пройдена!» + 100 XP. + +--- + +## 4. Глава 3 «Производная» (5 §) + +**Тема:** green. **Финал:** 5 боссов. **Объём:** ~2200 строк. + +### § 18. Определение производной функции + +**Цель:** От средней скорости к мгновенной через предел отношения приращений. + +**Рисунки:** + +1. **Главный SVG: секущая → касательная** (560×320): + - График y = x² + - Точка M(x₀, f(x₀)) фиксирована + - Точка N(x₀+Δx, f(x₀+Δx)) с slider для Δx + - Секущая MN + - Когда Δx → 0, секущая → касательная (анимация) + - Метки Δf и Δx + +2. **Алгоритм 6 шагов** (карточки шагов). + +3. **Геометрический смысл скорости** (380×240): + - График s(t) + - На малом промежутке Δt, отношение Δs/Δt — наклон секущей + +**Карточки (5):** +- 18.1 Средняя и мгновенная скорость. +- 18.2 Приращение аргумента и функции. +- 18.3 Определение производной. +- 18.4 Алгоритм нахождения производной. +- 18.5 Примеры: (x²)' = 2x, (kx+b)' = k, (1/x)' = -1/x², C' = 0. + +**Интерактивы:** +1. **Slider-эксперимент** — двигаешь точку N к M, видишь как отношение Δf/Δx сходится к числу. +2. **Найди производную «вручную»** через алгоритм — 5 заданий. +3. **Вычисли f'(x₀)** — 6 заданий. + +**Босс §18:** 5 этапов. + +--- + +### § 19. Правила вычисления производных + +**Цель:** Формулы для производной суммы, произведения, частного, степени. + +**Рисунки:** + +1. **Таблица 4 правил** (420×320): + - (U+V)' = U' + V' + - (UV)' = U'V + V'U + - (U/V)' = (U'V - V'U)/V² + - (xⁿ)' = n·xⁿ⁻¹ + +2. **Таблица «производные элементарных функций»** (380×280): + - x², kx+b, 1/x, C — это всё, что можно использовать в 10 классе + +**Интерактивы:** +1. **Найди производную многочлена** — 8 заданий. +2. **Производная произведения / частного** — 6 заданий. +3. **Вычисли f'(x₀)** в конкретной точке. + +**Босс §19:** 5 этапов. + +--- + +### § 20. Геометрический смысл производной. Возрастание/убывание + +**Цель:** f'(x₀) = tg α — угловой коэффициент касательной. Знак f' и монотонность. + +**Рисунки:** + +1. **Касательная и её наклон** (560×320): + - График y = x² - 4x + 5 + - Точка M(3; 2), касательная (наклон 2) + - Метка `tg α = f'(3) = 2` + - Угол α между касательной и осью x + +2. **Уравнение касательной** (480×280): + - y - y₀ = f'(x₀)(x - x₀) + - Подсветка элементов + +3. **Связь знака f' и монотонности** (560×240): + - График f(x) сверху + - Совмещённый график f'(x) снизу + - Цветные полосы: где f' > 0 — фон зелёный (f возрастает), f' < 0 — фон красный + +**Карточки (4):** +- 20.1 Геометрический смысл f'. +- 20.2 Уравнение касательной. +- 20.3 Теорема: f' > 0 ⇒ f возрастает, f' < 0 ⇒ убывает. +- 20.4 Промежутки монотонности — алгоритм. + +**Интерактивы:** +1. **Уравнение касательной** — 5 заданий. +2. **Найди промежутки монотонности** — 5 заданий. +3. **По графику f определи знак f'** — 4 задания. + +**Босс §20:** 6 этапов. + +--- + +### § 21. Применение производной к исследованию функций + +**Цель:** Критические точки, максимумы и минимумы, схема исследования. + +**Рисунки:** + +1. **Схема исследования** (карточка с 6 шагами): + - ООО, чётность, нули, асимптоты, f', знаки f', экстремумы + +2. **Пример исследования** (560×320): + - y = x³ - 3x — полное исследование с графиком + +**Интерактивы:** +1. Найди критические точки. +2. Определи характер критической точки (max/min/перегиб). +3. Постройте схематически график. + +**Босс §21:** 5 этапов. + +--- + +### § 22. Наибольшее и наименьшее значения + +**Цель:** Алгоритм нахождения max/min на отрезке. + +**Рисунки:** + +1. **График с отмеченными max/min** (560×280). + +2. **Алгоритм 3 шага**: + - Найти f'(x) + - Найти критические точки в отрезке + - Сравнить значения f в критических точках и на концах + +**Интерактивы:** +1. Реальные задачи на оптимизацию (площадь, объём). +2. На данной функции найди max/min на отрезке. + +**Босс §22:** 5 этапов. + +--- + +### ФИНАЛ ГЛАВЫ 3 — 5 боссов. + +Награда: ачивка «Глава 3 пройдена!» + ачивка «Алгебра 10 пройдена полностью!» + 150 XP. + +--- + +## 5. Hub-страница `algebra_10_hub.html` + +- 3 большие карточки глав с прогрессом +- Общий прогресс курса +- Кнопка «Продолжить с того места, где остановился» (читает `last_para`) +- Список ачивок +- Ссылка обратно в `/textbook` (на хаб всех учебников) + +--- + +## 6. Волны реализации + +| Волна | Содержание | Длительность | +|---|---|---| +| **W0** | Миграция БД + 4 stub-файла (hub + 3 главы). Базовая `alg10_svg.js` (модули `tri`, `func`). | 1 сессия | +| **W1** | Глава 1, §1-§4 (тригонометрический минимум). | 2 сессии | +| **W2** | Глава 1, §5-§7 (графики и обратные функции). | 2 сессии | +| **W3** | Глава 1, §8 (тригонометрические уравнения). | 1 сессия | +| **W4** | Глава 1, §9-§12 (формулы преобразования). | 2 сессии | +| **W5** | Финал Главы 1 (6 боссов). | 1 сессия | +| **W6** | Глава 2 полностью (5 § + финал). | 2 сессии | +| **W7** | Глава 3, §18-§19. | 1 сессия | +| **W8** | Глава 3, §20-§22 + финал. | 2 сессии | +| **W9** | Hub-страница + общий прогресс. | 1 сессия | +| **W10** | Polish: мобильная адаптация, дарк-мода, кросс-тестирование. | 1 сессия | + +**Итого:** ~16 сессий = курс «Алгебра 10» полностью реализован. + +--- + +## 7. Ключевые принципы качества + +1. **Все SVG рисунки заранее спроектированы** — координаты вершин, цветовая кодировка, подписи. +2. **Все формулы валидируются** через KaTeX, никаких `$...$` в нерендеренных контейнерах. +3. **Boss-stages** возвращают чистые числа или односложные слова, проверка через `verify` функцию. +4. **Прогресс синхронизируется** на сервер через `_queueProgress` с debounce 600ms. +5. **Темы**: light + dark, плавный переход. +6. **Mobile**: sidebar превращается в drawer на ≤980px. +7. **Cache-bust**: `alg10_svg.js?v=N` при каждом изменении библиотеки. +8. **Каждый интерактив** имеет: + - Начальный экран с заданием + - 1 кнопку «Ответить» + 1 «Подсказка» + 1 «Заново» + - Итоговый экран с очками и наградой XP + +## 8. Конкретные эскизы готовых SVG (тщательная подготовка) + +Для каждого §, перед реализацией, в коде должен быть **комментарий с эскизом**: + +```js +/* === SVG: единичная окружность для §1 === + Размер: 320x320 + Центр: (160, 160), R = 130 + Элементы: + - Сетка lightgrey + - Окружность чёрная 2px + - Оси x, y с метками 1 + - Точка P_0(1,0), P_{π/2}, P_π, P_{3π/2} с подписями + - Точка P_α при α = 60° — красная, размер 4 + - Радиус OP_α — красный 2px + - Дуга от P_0 до P_α — зелёный fill rgba(...) + - Стрелка направления вращения "+" в верхней правой части +*/ +``` + +Это обеспечивает консистентность и пересматриваемость. + +--- + +**Готово.** План охватывает все 22 параграфа, 3 главы, ~140 интерактивов и ~25 боссов. Объём итогового курса — около 7000 строк HTML/JS на 3 главы + ~600 строк библиотеки `alg10_svg.js` + hub-страница. + +Реализация начинается с Волны 0 (миграция + базовая библиотека) и движется последовательно по главам. Каждая волна заканчивается коммитом и пушем в репозиторий. diff --git a/docs/PLAN_GEOMETRY_10.md b/docs/PLAN_GEOMETRY_10.md new file mode 100644 index 0000000..02cf0ce --- /dev/null +++ b/docs/PLAN_GEOMETRY_10.md @@ -0,0 +1,734 @@ +# План реализации — Геометрия 10 класс (стереометрия) + +**Учебник:** Л. А. Латотин, Б. Д. Чеботаревский, И. В. Горбунова. Геометрия 10 (базовый и повышенный уровни). Минск, Адукацыя і выхаванне, 2020. 203 страницы. + +**Объём курса:** 4 раздела, 14 параграфов, ~140 интерактивов, ~20 боссов + 4 финальных. + +**КЛЮЧЕВАЯ ОСОБЕННОСТЬ:** это **стереометрия** — геометрия пространства. Для качества интерактивности **критически важно реализовать 3D-визуализацию через SVG-проекции**. Это самая большая техническая инвестиция курса. + +--- + +## 0. Общая архитектура + +### 0.1 Файлы + +``` +backend/src/db/migrations/ + 021_geometry_10_hub.sql -- hub + 4 ребёнка (раздела) + +frontend/textbooks/ + geometry_10_hub.html -- HUB-страница (4 карточки разделов) + geometry_10_r1.html -- Раздел 1 «Введение в стереометрию» (3 § + Финал) + geometry_10_r2.html -- Раздел 2 «Параллельность» (3 § + Финал) + geometry_10_r3.html -- Раздел 3 «Перпендикулярность» (4 § + Финал) + geometry_10_r4.html -- Раздел 4 «Координаты и векторы» (4 § + Финал) + +frontend/js/ + stereo3d.js -- НОВАЯ библиотека 3D-проекций (см. §1 ниже) + geom10_svg.js -- Адаптер: расширение GEOM7 для стереометрии + (планарные хелперы — сечения, проекции на плоскость) + stereo10-fx.js -- Эффекты комбо/анимации (как alg7-fx) + +frontend/css/ + stereo10-fx.css -- анимации +``` + +### 0.2 Темы разделов + +| Раздел | Тема | Основные цвета | Watermark | +|---|---|---|---| +| 1 — Введение в стереометрию | **blue** | `#2563eb` → `#93c5fd` | `△` | +| 2 — Параллельность | **emerald** | `#059669` → `#86efac` | `∥` | +| 3 — Перпендикулярность | **rose** | `#e11d48` → `#fda4af` | `⊥` | +| 4 — Координаты и векторы | **amber** | `#d97706` → `#fcd34d` | `→` | + +--- + +## 1. **КРИТИЧЕСКАЯ БИБЛИОТЕКА:** `stereo3d.js` (~700 строк) + +Без этой библиотеки сделать качественную стереометрию невозможно. План — **реализовать первой, до всех глав**. + +### 1.1 Архитектура + +Не использует Three.js или Canvas. **Чистый SVG с ручной проекцией 3D → 2D.** + +```js +window.STEREO3D = { + // Создать сцену с заданным размером SVG и проекцией + Scene: function(W, H, opts) { ... }, + + // Заранее заданные виды (как в учебнике) + views: { + CABINET: { /* угол 30°, сжатие y по z в 0.5 */ }, + ISOMETRIC: { /* классическая изометрия */ }, + PERSPECTIVE:{ /* небольшая перспектива для красоты */ } + } +}; + +// Использование: +const scene = new STEREO3D.Scene(380, 320, {view:'CABINET'}); +scene.addPolyhedron('cube', {center:[0,0,0], size:[2,2,2], color:'#2563eb'}); +scene.addLabel('A', [-1,-1,-1]); +const svg = scene.render(); +``` + +### 1.2 Класс `Scene` + +```js +class Scene { + constructor(W, H, opts) { + this.W = W; this.H = H; + this.center = [W/2, H/2]; // px-центр SVG + this.scale = opts.scale || 40; // 1 единица 3D = N px + this.view = opts.view || 'CABINET'; + this.rotX = opts.rotX || 0; // дополнительный поворот вокруг X + this.rotY = opts.rotY || 0; // поворот вокруг Y + this.objects = []; // массив объектов сцены + } + + // Проекция точки (x, y, z) → (xPx, yPx) + project([x, y, z]) { + // 1. Применяем поворот вокруг X, Y + const [x1, y1, z1] = rotate3D([x, y, z], this.rotX, this.rotY); + // 2. Применяем выбранную проекцию (CABINET / ISOMETRIC / PERSPECTIVE) + let px, py; + if (this.view === 'CABINET') { + // Кабинетная: горизонтально x, вертикально z вверх, y уходит вглубь под 30° с сжатием 0.5 + const a = Math.PI / 6; // 30° + px = x1 + 0.5 * y1 * Math.cos(a); + py = -z1 + 0.5 * y1 * Math.sin(a); // SVG y вниз → инвертируем + } else if (this.view === 'ISOMETRIC') { + // Изометрическая: оси по 120° + px = x1 * Math.cos(Math.PI/6) - y1 * Math.cos(Math.PI/6); + py = -z1 + x1 * Math.sin(Math.PI/6) + y1 * Math.sin(Math.PI/6); + } + return [ + this.center[0] + this.scale * px, + this.center[1] + this.scale * py + ]; + } + + // Хелперы рисования + drawPoint(p3d, opts) { ... } + drawEdge(p1, p2, opts) { ... } // отрезок с visible/dashed + drawFace(points, opts) { ... } // грань с fill, stroke, opacity + drawArc3D(p1, p2, p3, opts) { ... } // дуга в плоскости трёх точек + + // Готовые тела + addPolyhedron(type, params) { ... } + // type: 'cube' | 'box' | 'tetrahedron' | 'pyramid' | 'prism' | 'octahedron' + // params: {center, size, vertices?, color, label, edgeColor?, hiddenStyle?} + + addPlane(point, normal, opts) { ... } // плоскость по точке и нормали (рисуется ромбом-сектором) + + addLine3D(p1, p2, opts) { ... } // прямая (бесконечная), отрезок (segment) или луч + addAngleMark3D(vertex, p1, p2, opts) { ... } + addParallelMark3D(p1, p2, opts) { ... } + addPerpMark3D(vertex, p1, p2, opts) { ... } // маркер прямого угла + + // Главное: вычислить «видимые» и «невидимые» рёбра автоматически + // На основании углов нормалей граней к направлению камеры + computeVisibility() { ... } + + // Возвращает финальный SVG-фрагмент + render() { ... } +} +``` + +### 1.3 Готовые предопределённые тела + +**Куб:** `addPolyhedron('cube', {center:[0,0,0], size:2, label:'ABCDA₁B₁C₁D₁'})` — автоматически разместит вершины A, B, C, D снизу и A₁, B₁, C₁, D₁ сверху. Видимые рёбра — сплошные, невидимые (за телом) — пунктирные. + +**Параллелепипед:** `addPolyhedron('box', {center, size:[a,b,c]})`. + +**Тетраэдр:** `addPolyhedron('tetrahedron', {vertices:[A,B,C,D]})`. + +**Призма n-угольная:** `addPolyhedron('prism', {n:6, baseRadius, height})`. + +**Пирамида n-угольная:** `addPolyhedron('pyramid', {n:4, baseRadius, height, apex:[0,0,h]})`. + +### 1.4 Опциональные слайдеры + +Для интерактивных рисунков можно добавить под SVG два слайдера: «Поворот X» и «Поворот Y». Они вызывают `scene.rotX = …; scene.rotY = …; scene.update()` — пересчитывают и перерисовывают объекты. + +### 1.5 Отрисовка плоскости + +Плоскость в стереометрии изображают параллелограммом (ромбом). Хелпер: +```js +scene.addPlane(point, normal, {size:3, color:'#2563eb', opacity:0.18}) +``` +Рисует ромб с центром в `point`, лежащий в плоскости с нормалью `normal`, размером 3×3 единицы. + +### 1.6 Анимации (пост-MVP) + +Для «построения сечений» — пошаговое появление линий с CSS-анимациями. + +--- + +## 2. Раздел 1 «Введение в стереометрию» (3 §) + +**Тема:** blue. **Финал:** 4 босса. **Объём файла:** ~2400 строк. + +### § 1. Пространственные фигуры + +**Цель:** Знакомство с призмой, пирамидой, цилиндром, конусом, шаром. Терминология: грани, рёбра, вершины, диагональ. + +**Рисунки (всё через `STEREO3D.Scene`):** + +1. **Главный SVG: 5 основных тел в ряд** (640×220): + - Шестиугольная призма / Пятиугольная пирамида / Цилиндр / Конус / Шар + - Каждое тело — отдельная мини-сцена в одной строке + - Подписи под каждым + +2. **Многогранник с подписями элементов** (380×320): + - Произвольный 7-гранник (например, шестиугольная призма) + - Подписи: «Вершина», «Ребро», «Грань», «Диагональ» + - Цветовая подсветка одного ребра, одной грани, одной вершины + +3. **Изображение пространственной фигуры на плоскости** (380×260): + - Пример с рис. 6 учебника: параллелограмм ABCD и треугольник PQR + - Демонстрирует штриховую линию для невидимых отрезков + - Подсветка видимых vs невидимых рёбер + +4. **Призма прямая/наклонная** (560×280): два сравнительных рисунка. + +5. **Правильная призма / правильная пирамида** (560×280): различие. + +**Карточки теории (6):** +- 1.1 Плоские vs пространственные фигуры. Стереометрия. +- 1.2 Многогранники: грани, рёбра, вершины, диагональ. +- 1.3 Выпуклые и невыпуклые многогранники. +- 1.4 Призма: основание, боковые рёбра, грани. Виды. +- 1.5 Пирамида: основание, боковые рёбра, апекс. +- 1.6 Цилиндр, конус, шар — тела вращения. + +**Интерактивы:** +1. **Узнай тело по описанию** — 8 заданий: «Тело с двумя равными n-угольными гранями и n прямоугольными боковыми гранями» → призма. +2. **Сосчитай элементы** — 6 заданий: для куба, тетраэдра, n-угольной призмы и пирамиды — сколько граней, рёбер, вершин. (Используем формулу Эйлера в качестве проверки.) +3. **3D-крутилка** — slider «поворот X», «поворот Y» для куба. Учащийся видит, как куб выглядит с разных сторон. Под рисунком — задание: «Сосчитай число видимых граней при текущем повороте». Динамическая проверка. +4. **Развёртка ↔ тело** — даны 4 развёртки, выбери, какая складывается в куб. + +**Босс §1:** 5 этапов +- Сколько рёбер у шестиугольной призмы? (Ответ: 18) +- Сколько граней у тетраэдра? (4) +- Чем призма отличается от пирамиды? (выбор из вариантов) +- Сколько диагоналей у параллелепипеда? (4) +- Тело имеет 6 граней, 12 рёбер, 8 вершин. Что это? («куб» или «параллелепипед») + +--- + +### § 2. Прямые и плоскости + +**Цель:** Аксиомы стереометрии и их следствия. + +**Рисунки:** + +1. **Аксиомы 1-3** (3 отдельных SVG по 320×260): + - A1: «Через любые 3 точки, не лежащие на одной прямой, проходит единственная плоскость» — 3 точки A, B, C и плоскость через них. + - A2: «Если две точки прямой лежат в плоскости, то и вся прямая лежит в плоскости» — прямая внутри плоскости. + - A3: «Если две плоскости имеют общую точку, то они имеют общую прямую» — две пересекающиеся плоскости и линия пересечения. + +2. **Следствия** (3 SVG по 320×260): + - Через прямую и точку вне её проходит единственная плоскость. + - Через две пересекающиеся прямые проходит единственная плоскость. + - Через две параллельные прямые проходит единственная плоскость. + +3. **Способы задания плоскости** — итоговая карточка-схема: 4 способа. + +**Карточки (5):** +- 2.1 Аксиомы стереометрии. +- 2.2 Следствия из аксиом. +- 2.3 Способы задания плоскости. +- 2.4 Принадлежность точки прямой/плоскости — обозначения. +- 2.5 Иллюстрированные примеры применения аксиом. + +**Интерактивы:** +1. **Какая аксиома?** — 8 заданий: рисунок + утверждение, выбор из A1/A2/A3. +2. **Можно ли провести плоскость?** — 6 заданий: даны элементы (2 точки, прямая, и т.д.), достаточно ли для определения плоскости? +3. **Сколько плоскостей?** — 5 заданий: через 4 точки, через 2 прямые и т.д. + +**Босс §2:** 5 этапов +- Сколько плоскостей можно провести через 3 точки на одной прямой? (бесконечно) +- Через какие элементы можно провести единственную плоскость? (3 нек-н точки, прямая + точка вне, 2 пересек. прямые, 2 парал. прямые) +- Две плоскости пересекаются по чему? (по прямой) +- Сколько общих точек у 2 пересекающихся плоскостей? (бесконечно) +- Если 3 точки лежат на одной прямой, через них проходит ровно $?$ плоскостей. (бесконечно) + +--- + +### § 3. Построения сечений многогранников + +**Цель:** Метод сечений — найти многоугольник, получаемый при пересечении многогранника плоскостью. + +**Рисунки:** + +1. **Сечение куба плоскостью через 3 точки** (380×340): + - Куб ABCDA₁B₁C₁D₁ + - 3 заданные точки M, N, P на разных гранях + - Анимация: сначала появляются M, N, P; затем плоскость; затем пересечение проявляется как многоугольник (постепенно, ребро за ребром) + +2. **3 классических случая сечений** (3 SVG по 280×280): + - Треугольное сечение + - Параллелограмм-сечение + - Шестиугольное сечение (max для куба) + +3. **Метод следов** (380×340): + - Базовая плоскость (нижняя грань куба) + - Плоскость сечения пересекает базовую — это след + - Подсветка построения + +**Карточки (4):** +- 3.1 Что такое сечение многогранника. Когда оно возможно. +- 3.2 Метод следов. +- 3.3 Метод параллельного переноса. +- 3.4 Сечения куба, призмы, пирамиды — основные виды. + +**Интерактивы:** +1. **Какой многоугольник?** — 6 заданий: дан куб и 3 точки, выбери тип сечения (△ / □ / 5-угол / 6-угол). +2. **Построй сечение** (упрощённый: drag-and-drop вершин на рёбрах куба → правильная фигура). +3. **Найди след** — 5 заданий. + +**Босс §3:** 5 этапов +- Может ли сечением куба быть шестиугольник? (да) +- Какое максимальное число сторон сечения куба? (6) +- Какое максимальное число сторон сечения треугольной пирамиды? (4) +- Если плоскость параллельна основанию пирамиды, сечение подобно $?$ (основанию) +- Сечение тетраэдра — это всегда $?$-угольник, где ? ≤ ? (3 или 4) + +--- + +### ФИНАЛ РАЗДЕЛА 1 — 4 босса + +- Босс 1: Элементы многогранников. +- Босс 2: Аксиомы и следствия. +- Босс 3: Сечения. +- Босс 4: Сборная задача. + +Награда: ачивка «Введение в стереометрию пройдено!» + 100 XP. + +--- + +## 3. Раздел 2 «Параллельность прямых и плоскостей» (3 §) + +**Тема:** emerald. **Объём:** ~2200 строк. + +### § 4. Взаимное расположение прямых в пространстве + +**Цель:** 3 случая — пересекающиеся, параллельные, скрещивающиеся. + +**Рисунки:** + +1. **Три случая, side-by-side** (640×260): + - Пересекающиеся прямые + - Параллельные прямые + - Скрещивающиеся прямые + - В каждом — 3D-рисунок: пара прямых + плоскости (или одна общая) для иллюстрации + +2. **Куб с примерами всех 3 типов** (380×340): + - Подсветка пары рёбер AA₁ и BB₁ — параллельные + - Подсветка пары AB и AD — пересекающиеся + - Подсветка пары AB и CC₁ — скрещивающиеся + - Цветовая кодировка + +3. **Угол между скрещивающимися прямыми** (380×340): + - Скрещивающиеся прямые a и b + - Через точку B (точка на a₁) проводим a₁ ∥ a + - Угол между a₁ и b — это угол между скрещивающимися + +**Карточки (5):** +- 4.1 Три случая расположения прямых. +- 4.2 Определение скрещивающихся прямых. +- 4.3 Признак скрещивающихся. +- 4.4 Угол между скрещивающимися прямыми. +- 4.5 Расстояние между скрещивающимися прямыми (длина общего перпендикуляра). + +**Интерактивы:** +1. **Определи тип** — 8 заданий с куба: пара рёбер → тип. +2. **Найди угол** — 5 заданий: куб + 2 указанных ребра, найди угол. +3. **3D-крутилка куба** с подсветкой пары — учащийся вращает фигуру, видит, что пара рёбер действительно скрещивается (не пересекается и не параллельна). + +**Босс §4:** 5 этапов. + +--- + +### § 5. Взаимное расположение прямой и плоскости + +**Цель:** 3 случая — прямая лежит, пересекает, параллельна. Признак параллельности. + +**Рисунки:** + +1. **Три случая** (640×220). +2. **Признак параллельности** (380×320): прямая a параллельна прямой b ⊂ α (плоскость), и a ⊄ α ⇒ a ∥ α. +3. **Следствие** (380×280): если плоскость через прямую a ∥ α пересекает α, то линия пересечения параллельна a. + +**Карточки (4):** +- 5.1 Три случая. +- 5.2 Признак параллельности. +- 5.3 Следствия. +- 5.4 Применение для построений в пространстве. + +**Интерактивы:** +1. Сопоставь утверждение с случаем. +2. Применение признака. +3. Реальные конструкции: задачи на параллельность в кубе. + +**Босс §5:** 5 этапов. + +--- + +### § 6. Взаимное расположение плоскостей в пространстве + +**Цель:** 2 случая — пересекаются, параллельны. Признак параллельности плоскостей. + +**Рисунки:** + +1. **Пересекающиеся плоскости** (380×280): угол между ними. +2. **Параллельные плоскости** (380×280). +3. **Признак параллельности** (380×320): если плоскость α содержит 2 пересекающиеся прямые, каждая из которых параллельна плоскости β, то α ∥ β. + +**Карточки (4):** +- 6.1 Два случая. +- 6.2 Признак параллельности плоскостей. +- 6.3 Свойства параллельных плоскостей. +- 6.4 Линии пересечения двух параллельных плоскостей третьей плоскостью. + +**Интерактивы:** 3 тренажёра. + +**Босс §6:** 5 этапов. + +--- + +### ФИНАЛ РАЗДЕЛА 2 — 4 босса. Награда + 100 XP. + +--- + +## 4. Раздел 3 «Перпендикулярность» (4 §) + +**Тема:** rose. **Объём:** ~3000 строк. + +### § 7. Перпендикулярность прямой и плоскости + +**Цель:** Определение, признак перпендикулярности прямой и плоскости. + +**Рисунки:** + +1. **Перпендикулярная прямая к плоскости** (380×340): + - Плоскость α + - Прямая l ⊥ α + - Точка пересечения O + - Все прямые α, проходящие через O, перпендикулярны l (помечены) — наглядно показано 4-6 таких прямых + +2. **Признак перпендикулярности** (380×340): + - Прямая l перпендикулярна двум пересекающимся прямым m и n в плоскости α + - Вывод: l ⊥ α + +**Карточки (5):** +- 7.1 Определение прямой, перпендикулярной плоскости. +- 7.2 Признак перпендикулярности (теорема). +- 7.3 Свойства: если l ⊥ α, то l ⊥ любой прямой в α. +- 7.4 Связь с параллельностью. +- 7.5 Алгоритм доказательства перпендикулярности. + +**Интерактивы:** 3 тренажёра + 3D-куб с подсветкой перпендикуляра. + +**Босс §7:** 5 этапов. + +--- + +### § 8. Расстояния + +**Цель:** Расстояние от точки до прямой / до плоскости; между параллельными плоскостями; между скрещивающимися прямыми. + +**Рисунки:** + +1. **Расстояние от точки до плоскости** (380×320): + - Точка A над плоскостью α + - Перпендикуляр AO к α + - Длина AO — искомое расстояние + +2. **Расстояние от прямой до плоскости** (когда прямая параллельна) (380×320). + +3. **Расстояние между параллельными плоскостями** (380×320). + +4. **Расстояние между скрещивающимися** (380×340): + - Скрещивающиеся l и m + - Общий перпендикуляр PQ + - Длина PQ — расстояние + +**Карточки (5):** +- 8.1 Расстояние от точки до прямой. +- 8.2 Расстояние от точки до плоскости. +- 8.3 Расстояние от прямой до параллельной плоскости. +- 8.4 Расстояние между параллельными плоскостями. +- 8.5 Расстояние между скрещивающимися прямыми. + +**Интерактивы:** 5 тренажёров — задачи на куб с реальными вычислениями. + +**Босс §8:** 6 этапов. + +--- + +### § 9. Угол между прямой и плоскостью + +**Цель:** Определение угла наклонной с плоскостью — угол между наклонной и её проекцией. + +**Рисунки:** + +1. **Угол наклонной** (380×340): + - Точка A над плоскостью α + - Перпендикуляр AH (H в α) + - Наклонная AB (B в α) + - Проекция HB + - Угол ABH = угол между AB и α + +2. **Теорема о 3 перпендикулярах** (380×340): + - Если из основания H перпендикуляра AH в плоскости α провести прямую BC ⊥ HB, то AB ⊥ BC + +**Карточки (4):** Определения, теорема о 3 перпендикулярах, алгоритм. + +**Интерактивы:** 4 тренажёра с углами в кубе/пирамиде. + +**Босс §9:** 5 этапов. + +--- + +### § 10. Перпендикулярность плоскостей + +**Цель:** Двугранный угол. Признак перпендикулярности плоскостей. + +**Рисунки:** + +1. **Двугранный угол** (380×320): + - Две полуплоскости с общим ребром + - Линейный угол (перпендикуляры из точки на ребре к каждой полуплоскости) + +2. **Признак перпендикулярности** (380×320): + - Если плоскость α содержит прямую l ⊥ β, то α ⊥ β. + +**Карточки (5):** Двугранный угол, линейный угол, перпендикулярные плоскости, признак, свойства. + +**Интерактивы:** 4 тренажёра. + +**Босс §10:** 6 этапов. + +--- + +### ФИНАЛ РАЗДЕЛА 3 — 5 боссов. Награда + 130 XP. + +--- + +## 5. Раздел 4 «Координаты и векторы в пространстве» (4 §) + +**Тема:** amber. **Объём:** ~2400 строк. + +### § 11. Координаты в пространстве + +**Цель:** Прямоугольная система координат в R³; точка (x, y, z); расстояние между точками. + +**Рисунки:** + +1. **3D-система координат** (380×340): + - Три оси: Ox (вправо), Oy (вглубь), Oz (вверх) + - Метки 1 на каждой оси + - Точка M(2; 3; 4) с пунктирами к проекциям на оси + +2. **Расстояние между точками** (380×320): + - Две точки A и B в пространстве + - Параллелепипед, построенный на разности координат + - Формула AB = √(Δx² + Δy² + Δz²) + +**Карточки (3):** ПДСК, координаты точки, формула расстояния. + +**Интерактивы:** 3 тренажёра. + +**Босс §11:** 5 этапов. + +--- + +### § 12. Вектор. Действия над векторами + +**Цель:** Вектор в пространстве, сложение, умножение на число, разложение по базису. + +**Рисунки:** + +1. **Сложение векторов** (380×280): правило треугольника + правило параллелограмма. +2. **Умножение на число** (380×220). +3. **Базисные векторы i, j, k** (380×340): три единичных вектора по осям. +4. **Разложение вектора** в базисе. + +**Карточки (5):** Определения, операции, базис, координаты вектора, коллинеарность/компланарность. + +**Интерактивы:** 4 тренажёра + 3D-визуализация. + +**Босс §12:** 5 этапов. + +--- + +### § 13. Скалярное произведение векторов + +**Цель:** a · b = |a| · |b| · cos α; формула в координатах. + +**Рисунки:** + +1. **Геометрический смысл** (380×280): два вектора и угол между ними. +2. **Алгебраическое выражение** (380×220): a · b = x₁x₂ + y₁y₂ + z₁z₂. +3. **Свойства**: связь с перпендикулярностью (a · b = 0 ⇔ a ⊥ b). + +**Карточки (4):** Определение, координатная формула, свойства, угол между векторами. + +**Интерактивы:** 4 тренажёра. + +**Босс §13:** 5 этапов. + +--- + +### § 14. Применение векторов и координат + +**Цель:** Решение геометрических задач векторно-координатным методом. + +**Рисунки:** + +1. **Уравнения плоскости и прямой в пространстве** (380×320). +2. **Угол между прямыми / плоскостями через векторы** (380×320). +3. **Расстояния через координаты** (380×320). + +**Карточки (5):** Уравнения, углы, расстояния, примеры доказательств. + +**Интерактивы:** 5 тренажёров — комплексные задачи с координатами. + +**Босс §14:** 6 этапов. + +--- + +### ФИНАЛ РАЗДЕЛА 4 — 4 босса. Награда + 120 XP + финальная ачивка «Геометрия 10 пройдена!» + +--- + +## 6. HUB-страница `geometry_10_hub.html` + +- 4 большие карточки разделов с прогрессом +- Общий прогресс курса +- «Продолжить с того места» +- Список ачивок +- Ссылка на справочный материал в виде раскрывающихся карточек: + - Тела и их элементы (как на форзаце) + - Прямые в пространстве + - Прямая и плоскость + - Две плоскости + - Векторы + +--- + +## 7. Готовые SVG-эскизы для библиотеки `stereo3d.js` + +Перед реализацией каждого 3D-рисунка в коде должен быть **комментарий с эскизом**: + +```js +/* === SVG: куб ABCDA₁B₁C₁D₁ для §4 === + Сцена: 380×340, view='CABINET', scale=40 + Вершины (в единицах): + A = (-1, -1, -1) A₁ = (-1, -1, +1) + B = (+1, -1, -1) B₁ = (+1, -1, +1) + C = (+1, +1, -1) C₁ = (+1, +1, +1) + D = (-1, +1, -1) D₁ = (-1, +1, +1) + Видимые рёбра: AB, BC, CC₁, C₁D₁, D₁A₁, A₁A, BB₁, B₁C₁, A₁B₁, AD + Невидимые: CD, DD₁ — пунктир + Подсветка: ребро AA₁ красное (3px), ребро BB₁ красное — иллюстрация параллельности +*/ +``` + +--- + +## 8. Волны реализации + +| Волна | Содержание | Длительность | +|---|---|---| +| **W0** | Миграция БД + 5 stub-файлов (hub + 4 раздела). **Полная реализация `stereo3d.js`** (~700 строк) с тестами на cube/box/pyramid. | 2 сессии | +| **W1** | Раздел 1, §1 + §2 + Финал раздела 1. | 2 сессии | +| **W2** | Раздел 1, §3 (сечения) — сложная анимированная визуализация. | 1 сессия | +| **W3** | Раздел 2 полностью (3 §). | 2 сессии | +| **W4** | Раздел 2, Финал. | 1 сессия | +| **W5** | Раздел 3, §7 + §8. | 1 сессия | +| **W6** | Раздел 3, §9 + §10. | 1 сессия | +| **W7** | Раздел 3, Финал. | 1 сессия | +| **W8** | Раздел 4 полностью (4 §). | 2 сессии | +| **W9** | Раздел 4, Финал + Hub-страница. | 1 сессия | +| **W10** | Polish: мобильная адаптация, тёмная мода, регрессионное тестирование 3D. | 1 сессия | + +**Итого:** ~15 сессий = курс «Геометрия 10» полностью реализован. + +--- + +## 9. Ключевые принципы качества + +1. **Все 3D-фигуры рендерятся через `stereo3d.js`** — единый стиль, видимые/невидимые рёбра, подписи. +2. **Каждый § имеет минимум 1 интерактивную 3D-крутилку** для интуитивного понимания. +3. **Анимации сечений** в §3 — постепенное появление линий пересечения для понимания построения. +4. **Все формулы валидируются** через KaTeX. +5. **Прогресс синхронизируется** с сервером. +6. **Темы**: light + dark, плавный переход. +7. **Mobile**: при ≤ 768px размер 3D-сцен уменьшается, slider'ы перепаковываются. +8. **Cache-bust**: `stereo3d.js?v=N`. + +--- + +## 10. Особенности 3D-визуализации (важно) + +### 10.1 Глубина и порядок отрисовки + +В простом cabinet-проекции порядок отрисовки граней важен: +- Сначала задние грани (нормаль смотрит «от камеры») +- Затем рёбра задних граней (пунктир) +- Затем рёбра передних граней (сплошные) +- Затем вершины с подписями + +Это даёт «иллюзию объёма» без полноценного z-buffer. + +### 10.2 Цветовая кодировка + +- **Тёмно-синий (#1e3a8a)** — основная заливка тела +- **Светло-синий (#3b82f6, opacity 0.3)** — заливка плоскостей +- **Красный (#dc2626)** — подсветка выделенного элемента (ребро, диагональ, угол) +- **Зелёный (#10b981)** — параллельные элементы +- **Фиолетовый (#7c3aed)** — перпендикуляры +- **Серый пунктир** — невидимые рёбра + +### 10.3 Подписи вершин + +Подписи располагаются автоматически: +- Если вершина внизу — подпись чуть ниже-влево +- Если вершина вверху — подпись чуть выше-вправо +- Если ближняя — крупный шрифт (font-size 14) +- Если дальняя — мельче (font-size 12), с прозрачностью 0.8 + +### 10.4 Слайдеры поворота (опционально) + +```html +
+ + +
+``` + +Когда пользователь двигает слайдер, JS пересоздаёт SVG-сцену с новыми `rotX`/`rotY` и заменяет innerHTML контейнера. + +--- + +## 11. Главное отличие от учебника Геометрии 7 + +| | Геометрия 7 (планиметрия) | Геометрия 10 (стереометрия) | +|---|---|---| +| Размерность | 2D | 3D через 2D-проекции | +| Библиотека | `geom7_svg.js` (~280 строк) | `stereo3d.js` (~700 строк) + `geom10_svg.js` | +| Рисунки | Простые, статичные | 3D с возможностью поворота, анимации сечений | +| Сложность концепций | Базовая | Требует пространственного воображения | +| Время на § | ~400-600 строк | ~600-900 строк | +| Боссы | Простые арифметические | Часто буквенно-словесные (тип фигуры, признак) | + +--- + +**Готово.** План охватывает все 14 параграфов, 4 раздела, ~140 интерактивов и ~24 босса. Объём итогового курса — около 10 000 строк HTML/JS на 4 раздела + ~700 строк библиотеки `stereo3d.js` + hub-страница. + +**КРИТИЧНО:** библиотека `stereo3d.js` должна быть полностью реализована и протестирована в Волне 0 до начала Волны 1. Без неё качество визуализаций будет плохим, и придётся переделывать всё. + +Реализация начинается с Волны 0 и движется последовательно по разделам.