docs(plans): добавлены планы Алгебры 10 и Геометрии 10
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
This commit is contained in:
Maxim Dolgolyov
@@ -0,0 +1,896 @@
|
||||
# План реализации — Алгебра 10 класс
|
||||
|
||||
**Учебник:** И. Г. Арефьева, О. Н. Пирютко. Алгебра 10. Минск, Народная асвета, 2019. 285 страниц.
|
||||
|
||||
**Объём курса:** 3 главы, 22 параграфа, ~140 интерактивов, ~22 босса (по 1 на §) + 3 главных босса.
|
||||
|
||||
**Структура повторяет паттерн «Геометрия 7 / Алгебра 7»**: SPA-главы с PARAS/BUILDERS, KaTeX, инлайн SVG, локальный прогресс + серверная синхронизация через `/api/textbooks/<slug>/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 Унифицированная разметка секции
|
||||
|
||||
Каждый § = `<section class="sec" id="sec-pN" data-watermark="...">`. Внутри:
|
||||
- `<div class="sec-header"><span class="sec-num">§ N</span><h2 class="sec-h">Название</h2></div>`
|
||||
- `<div id="pN-body"></div>` — заполняется через `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 (миграция + базовая библиотека) и движется последовательно по главам. Каждая волна заканчивается коммитом и пушем в репозиторий.
|
||||
@@ -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
|
||||
<div class="rot-controls">
|
||||
<label>Rot X <input type="range" min="-90" max="90" value="0" oninput="..."> </label>
|
||||
<label>Rot Y <input type="range" min="-90" max="90" value="0" oninput="..."> </label>
|
||||
</div>
|
||||
```
|
||||
|
||||
Когда пользователь двигает слайдер, 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 и движется последовательно по разделам.
|
||||
Reference in New Issue
Block a user