chore: консолидация незакоммиченной работы (биохимия + System Health + lab/textbooks)
Зафиксирована накопленная незакоммиченная работа рабочего дерева, КРОМЕ файлов учебника «Химия 7» (migration 046, chemistry_7_*.html, chem7_svg.js, тест — оставлены незакоммиченными по запросу). Включает: модуль биохимии (ядро BIO, 3D VSEPR, химдвижок, баланс, challenges, пути из БД), System Health Level 1 (вердикт/мониторинг), а также frontend- страницы и lab/textbooks-правки параллельной сессии. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
@@ -0,0 +1,251 @@
|
||||
# План реализации: Алгебра 11 (Беларусь, Арефьева/Пирютко, 2020)
|
||||
|
||||
**Источник:** `Algebra_11kl_Arefieva_rus_2020.pdf` (276 стр., 3 главы, 10 §)
|
||||
**Авторы:** И. Г. Арефьева, О. Н. Пирютко
|
||||
**Издательство:** «Народная асвета», 2020
|
||||
|
||||
> Этот план учитывает **весь опыт Алгебры 9 + Геометрии 9** — никаких пикселей в подписях, никаких эмодзи, KaTeX с двойным экранированием с первого дня, единая SVG-инфраструктура, продуманный UX.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Содержание учебника
|
||||
|
||||
### Глава 1. Обобщение понятия степени (§1–§3)
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §1 | Степень с рациональным/действительным показателем | $a^{m/n} = \sqrt[n]{a^m}$, свойства, $a^{\sqrt{2}}$ через приближения |
|
||||
| §2 | Степенная функция $y = x^\alpha$ и её свойства | 6 типов в зависимости от $\alpha$ |
|
||||
| §3 | Определение логарифма. Основное логарифмическое тождество | $\log_a b = c \Leftrightarrow a^c = b$, $a^{\log_a b} = b$ |
|
||||
|
||||
### Глава 2. Показательная функция (§4–§6)
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §4 | Показательная функция $y = a^x$ | $D=\mathbb{R}$, $E=(0;+\infty)$, при $a>1$ возрастает, при $0<a<1$ убывает |
|
||||
| §5 | Показательные уравнения | $a^{f(x)} = a^{g(x)} \Leftrightarrow f(x)=g(x)$, методы: одинак. основание, замена, графический |
|
||||
| §6 | Показательные неравенства | При $a>1$ знак сохраняется, при $0<a<1$ — меняется |
|
||||
|
||||
### Глава 3. Логарифмическая функция (§7–§10)
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §7 | Свойства логарифмов | $\log_a(bc)$, $\log_a(b/c)$, $\log_a b^n$, переход к новому основанию |
|
||||
| §8 | Логарифмическая функция $y = \log_a x$. Свойства | $D=(0;+\infty)$, $E=\mathbb{R}$, обратная к показательной |
|
||||
| §9 | Логарифмические уравнения | $\log_a f(x) = \log_a g(x)$, замена, ОДЗ, метод приведения к одному основанию |
|
||||
| §10 | Логарифмические неравенства | Двойной учёт монотонности и ОДЗ |
|
||||
|
||||
**Итого: 10 параграфов в 3 главах.**
|
||||
|
||||
---
|
||||
|
||||
## 🎨 SVG-СТАНДАРТ КАЧЕСТВА (унаследовано от Геом 9)
|
||||
|
||||
### Хелперы (обязательны с §1)
|
||||
|
||||
Вынести в начало `<script>` каждого ch-файла. Уже работают в Алгебре 9 — копируем 1-в-1:
|
||||
|
||||
```js
|
||||
// 1. Координатная плоскость
|
||||
function axes2D(W, H, pad, xmin, xmax, ymin, ymax){
|
||||
// Возвращает {content, toX(v), toY(v), ux, uy}
|
||||
}
|
||||
|
||||
// 2. График функции y = f(x)
|
||||
function plotFunc(f, xmin, xmax, toX, toY, color, N){
|
||||
// Возвращает <path d="..."/>
|
||||
}
|
||||
|
||||
// 3. Маркер прямого угла L
|
||||
function rightAngleMark(V, uIn, wIn, s) { /* polyline */ }
|
||||
|
||||
// 4. Дуга угла с автовыбором sweep
|
||||
function angleArcAuto(V, uA, uB, R) { /* path */ }
|
||||
|
||||
// 5. Единичный вектор от p1 до p2
|
||||
function unitVec(p1, p2) { /* {x, y} */ }
|
||||
|
||||
// 6. deg → rad
|
||||
function deg2rad(d) { return d * Math.PI / 180; }
|
||||
```
|
||||
|
||||
### Новые хелперы для Алгебры 11
|
||||
|
||||
```js
|
||||
// 7. Точка на графике с проекциями на оси
|
||||
function pointWithDrop(x, f, toX, toY, color) {
|
||||
// Возвращает SVG: точка + пунктир к оси X + пунктир к оси Y + подписи координат
|
||||
}
|
||||
|
||||
// 8. Асимптота (для y=a^x: y=0; для y=log_a x: x=0)
|
||||
function asymptote(orientation, value, toX, toY, xmin, xmax, ymin, ymax) {
|
||||
// orientation: 'h' (y=value) | 'v' (x=value)
|
||||
// Возвращает <line stroke-dasharray="6 4">
|
||||
}
|
||||
|
||||
// 9. Сравнительный график двух функций (для a>1 vs 0<a<1)
|
||||
function compareGraph(W, H, fLeft, fRight, labels) {
|
||||
// Двухпанельный SVG с одинаковыми осями
|
||||
}
|
||||
|
||||
// 10. Слайдер с эталонными метками (a=1/2, 1, e, 2, 10)
|
||||
function snapSlider(value, snaps, tolerance) {
|
||||
// Snap к ближайшей эталонной точке при касании
|
||||
}
|
||||
|
||||
// 11. Логарифмическая линейка-визуализатор (для §7)
|
||||
function logScale(W, base, vals) {
|
||||
// Шкала log_a, проецирующая b на a^x = b
|
||||
}
|
||||
```
|
||||
|
||||
### Правила (обязательны с §1)
|
||||
|
||||
1. **Координаты — ВСЕГДА через `axes2D` + `toX`/`toY`.** Никаких сырых пикселей в коде графиков.
|
||||
2. **Диапазоны slider'ов — в учебных единицах**, не в пикселях. Пример: `min="0.1" max="10" step="0.1"` для $a$, не `min="40" max="150"`.
|
||||
3. **Snap-точки** для важных значений: $a=2, e (\approx 2.718), 10, 1/2, 1/e, 1/10$.
|
||||
4. **KaTeX в JS template literals — ВСЕГДА `\\dfrac`, `\\log`, `\\sqrt`** (двойной слэш).
|
||||
5. **Подписи на графиках** через KaTeX + `renderMath(box)` после `box.innerHTML`.
|
||||
6. **Цветовая кодировка:**
|
||||
- При $a > 1$ — **синий** (`#2563eb`)
|
||||
- При $0 < a < 1$ — **оранжевый** (`#ea580c`)
|
||||
- Граничный случай $a = 1$ — серый (`#94a3b8`)
|
||||
- Асимптоты — серый пунктир (`#94a3b8`, `stroke-dasharray="6 4"`)
|
||||
7. **ViewBox с запасом ≥ 24px** для подписей вне сетки.
|
||||
8. **`touch-action: none`** на каждом draggable SVG.
|
||||
9. **Drag через `window.addEventListener` + `{passive: false}`**, state ВЫШЕ `redraw()`.
|
||||
10. **Эмодзи ЗАПРЕЩЕНЫ.** Только inline SVG `.ic`.
|
||||
11. **Подписи длин/значений — в учебных единицах**, не в пикселях. Никогда `b₁ = 120` где 120 это пиксели.
|
||||
12. **Заголовок интерактива должен СОВПАДАТЬ** с количеством объектов в SVG. Не «Три эталонных треугольника», когда нарисовано два.
|
||||
|
||||
### Типы SVG по темам
|
||||
|
||||
| § | Тема | Тип SVG |
|
||||
|---|------|---------|
|
||||
| §1 | Степень с рац. показателем | Slider $a$ + табло «$a^{m/n}$ = $\sqrt[n]{a^m}$» с реальной подстановкой. Калькулятор степени без графики. |
|
||||
| §2 | Степенная функция $y=x^\alpha$ | **Координатная плоскость** + slider $\alpha \in [-3; 3]$, точка $\alpha=1$ — прямая, $\alpha=2$ — парабола, $\alpha=-1$ — гипербола. **6 эталонных кривых на одном графике** с включаемой видимостью. |
|
||||
| §3 | Определение логарифма | **Slider $a$ + slider $b$**, точка пересечения $y = a^x$ с горизонталью $y = b$ показывает $\log_a b$. Анимированный поиск. |
|
||||
| §4 | Показательная функция | **Двухпанельный график** $a > 1$ vs $0 < a < 1$, slider $a$ от $0.1$ до $10$ со snap к $2, e, 10$. Асимптота $y=0$ пунктиром. Точка $(0, 1)$, $(1, a)$ — выделена. |
|
||||
| §5 | Показательные уравнения | **Графический решатель**: два графика $y = a^{f(x)}$, $y = a^{g(x)}$, точки пересечения. Также пошаговый разбор алгебраического решения. |
|
||||
| §6 | Показательные неравенства | **Числовая прямая** + закрашенная область решений + сравнение с осью при $a>1$ и $a<1$. |
|
||||
| §7 | Свойства логарифмов | **Логарифмическая линейка** — slider $b$, $c$ показывает, что $\log(bc)$ это сумма длин. |
|
||||
| §8 | Логарифмическая функция | **Двухпанельный график** $a > 1$ vs $0 < a < 1$ + отражение $y = a^x$ через $y = x$ (показать обратность). |
|
||||
| §9 | Логарифмические уравнения | **Графический решатель** + анимация ОДЗ (выколотые точки на оси x). |
|
||||
| §10 | Логарифмические неравенства | **Числовая прямая** с учётом ОДЗ + монотонности. |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 ПОРЯДОК РЕАЛИЗАЦИИ
|
||||
|
||||
### Phase 0: Архитектура (фундамент)
|
||||
- `algebra_11_hub.html` skeleton (палитра **emerald/teal**, чтобы отличить от algebra_7 розовой, algebra_9 индиго)
|
||||
- `algebra_11_ch1.html`, `_ch2.html`, `_ch3.html` skeletons
|
||||
- Миграция `022_algebra_11_hub.sql` (slug `algebra-11`, sort_order 9)
|
||||
- SVG-хелперы (axes2D, plotFunc, pointWithDrop, asymptote, compareGraph) уже встроены в skeleton
|
||||
- KaTeX CDN + auto-render в head
|
||||
- CSS-блок «POLISH» (анимации появления, hover, bump-score) — копия из Геом 9
|
||||
- ICONS объект целиком из algebra_9_ch4
|
||||
|
||||
### Phase 1: Алгебра 11 Глава 1 «Обобщение степени» (3 §) — 3 волны
|
||||
- **Wave 1**: §1 «Степень с рац. показателем». 3 теории + 4 интерактива (slider $a^{m/n}$, калькулятор, DnD «корень↔степень», тренажёр).
|
||||
- **Wave 2**: §2 «Степенная функция $y=x^\alpha$». 6 типов графиков на одном координатном поле, slider $\alpha$, цветовая кодировка чёт./нечёт./дробн./отриц.
|
||||
- **Wave 3**: §3 «Определение логарифма». Slider $a$, slider $b$, визуализация $\log_a b$ через пересечение $y = a^x$ и $y = b$. + Финал главы 1 (4 mini-карточки + 5 боссов + ачивка «Магистр степеней»).
|
||||
|
||||
### Phase 2: Алгебра 11 Глава 2 «Показательная функция» (3 §) — 3 волны
|
||||
- **Wave 1**: §4 «Показательная функция $y = a^x$». **Главный интерактив всей главы** — двухпанельный график $a>1$ vs $0<a<1$, slider $a$ со snap-точками, анимированные асимптоты, отметка точки $(0,1)$. 4 интерактива.
|
||||
- **Wave 2**: §5 «Показательные уравнения». 5 методов решения: одинаковое основание / однородные / замена переменной / графический / тригонометрические подстановки. Визуальный разбор каждого метода + тренажёр.
|
||||
- **Wave 3**: §6 «Показательные неравенства» + Финал главы 2 (5 боссов + ачивка «Магистр показательной функции»).
|
||||
|
||||
### Phase 3: Алгебра 11 Глава 3 «Логарифмическая функция» (4 §) — 4 волны
|
||||
- **Wave 1**: §7 «Свойства логарифмов». **Логарифмическая линейка** (Slide rule visualizer). DnD-сортер свойств. Калькулятор с пошаговым применением свойств.
|
||||
- **Wave 2**: §8 «Логарифмическая функция $y = \log_a x$». Парный двухпанельный график + отражение через $y = x$ для демонстрации обратной функции.
|
||||
- **Wave 3**: §9 «Логарифмические уравнения». 4 метода: к одному основанию / потенциирование / замена / графический. + Проверка ОДЗ.
|
||||
- **Wave 4**: §10 «Логарифмические неравенства» + Финал главы 3 (5 боссов + ачивка «Магистр логарифмов»).
|
||||
|
||||
### Phase 4: Финал курса (Phase 5 в Алгебре 9 формате)
|
||||
- Итоговая шпаргалка (5 mini-карточек: степени / степенная / показательная / логарифмы / лог. функция)
|
||||
- **7 интегрированных боссов**, комбинирующих темы из разных глав:
|
||||
1. **Степень + логарифм**: вычислить $4^{\log_2 5}$
|
||||
2. **Показательное уравнение + замена**: $4^x - 3 \cdot 2^x + 2 = 0$
|
||||
3. **Логарифмическое неравенство + ОДЗ**: $\log_{1/2}(x-1) > -2$
|
||||
4. **Свойства log**: упростить $\log_3 \tfrac{72}{8} - \log_3 \tfrac{9}{2}$
|
||||
5. **Графический синтез**: найти кол-во решений $2^x = \log_2 x$
|
||||
6. **Логарифмирование показательного**: решить $5^{2x} = 7$ через $\log_5$
|
||||
7. **Магистр функций**: при каком $a$ функция $y = (a-2)^x$ убывает?
|
||||
- Ачивка «Магистр алгебры 11» + 50 XP + confetti
|
||||
- Кнопка «К каталогу учебников» → `/textbooks`
|
||||
|
||||
---
|
||||
|
||||
## 📦 Структура каждой главы
|
||||
|
||||
### Wave 0 — skeleton (включено в Phase 0)
|
||||
- CSS (палитра 3 цветовых акцента на §)
|
||||
- Sections со stub-builder'ами
|
||||
- Hub-карточка обновляется
|
||||
- Миграция в БД
|
||||
|
||||
### Wave N — наполнение § (по 1–2 § на волну)
|
||||
|
||||
Каждый § = ровно тот же шаблон, что и Геометрия 9:
|
||||
- **3 теоретических карточки** (`makeCard` типа theory/rule/example) с SVG-графиками
|
||||
- **4 интерактива** (`.wg` виджеты):
|
||||
1. **SVG-конструктор** с slider'ом (главный визуализатор темы)
|
||||
2. **Калькулятор/пошаговый разбор** (ввод параметров → формула с подстановкой)
|
||||
3. **Квикфайр-викторина** (6–8 заданий, 2–4 кнопки)
|
||||
4. **Тренажёр** (5–6 задач с числовым ответом, допуск 0.01)
|
||||
- **Кнопка «Я прочитал §» (+10 XP, +30%)**
|
||||
- **Прогресс**: IV1 15%/10XP, IV2 15%/10XP, IV3 25%/15XP, IV4 25%/15XP, чтение 30%/10XP
|
||||
|
||||
### Wave финал главы
|
||||
- **Итоговая шпаргалка** — mini-cards с формулой на §
|
||||
- **5 интегрированных боссов** (комбинирующих темы) — каждый +10 XP, +18% к `finalN`
|
||||
- **Достижение «Мастер главы N»** при 5/5 + 50 XP + confetti
|
||||
- **Кнопка «Дальше: Глава N+1 →»** (или «К хабу» для последней)
|
||||
|
||||
---
|
||||
|
||||
## 📊 Оценка объёма
|
||||
|
||||
| Глава | § | Ожидаемый LOC |
|
||||
|-------|---|---------------|
|
||||
| Глава 1 (§1-3) | 3 | ~5500 |
|
||||
| Глава 2 (§4-6) | 3 | ~5800 (главные графики функций) |
|
||||
| Глава 3 (§7-10) | 4 | ~7000 |
|
||||
| Hub + финал курса | — | ~900 |
|
||||
| **Итого** | **10** | **~19 000 LOC** |
|
||||
|
||||
Для сравнения: Алгебра 9 = 19 § = ~30 000 LOC. Здесь меньше § (10 вместо 19), но каждый требует визуально насыщенных графиков.
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Критические правила (на основе опыта Алгебры 9 + Геом 9)
|
||||
|
||||
### ❌ НЕ делать
|
||||
- **Slider'ы в пиксельных диапазонах** (40..150). Только в учебных единицах с понятным шагом.
|
||||
- **Подписи длин в пикселях** (`R = 120`, `c = 150`). Только в учебных единицах.
|
||||
- **«Три треугольника» когда нарисовано два** — заголовок и контент должны совпадать.
|
||||
- **Эмодзи `⚠`, `❌`, `✅`, `🔥`** в коде. Только inline SVG.
|
||||
- **Одиночный `\` перед буквой** в template literals: `\dfrac`, `\sin`, `\log`. ВСЕГДА `\\dfrac`.
|
||||
- **Прямой угол в нестандартной позиции** (хотя в 11 классе их меньше — больше графики).
|
||||
- **Sweep=1 без проверки направления** — используем `angleArcAuto`.
|
||||
- **Графики с плохими асимптотами** — например, $y = a^x$ должен явно показывать асимптоту $y=0$, а $y = \log_a x$ — $x=0$.
|
||||
|
||||
### ✅ Обязательно
|
||||
- **KaTeX-аудит на каждом коммите** — `grep -nP "[^\\\\]\\\\[a-z]{2,}"` для JS-секций.
|
||||
- **JS parse-check** через `new Function(scriptBody)` после каждого Wave.
|
||||
- **Координаты — формулами**, не «на глаз».
|
||||
- **Drag — state ВЫШЕ `redraw()`**.
|
||||
- **Цветовая кодировка $a>1$ vs $0<a<1$** во всех § Глав 2 и 3 — пусть будет неизменна.
|
||||
- **Эталонные snap-точки** в slider'ах: $a = 1/2, e, 2, 10$.
|
||||
- **Все builder-функции в registry должны быть НЕ stub'ами** в конце Wave финала.
|
||||
- **Использовать `ast-index` для поиска** (НЕ grep — правило проекта).
|
||||
|
||||
---
|
||||
|
||||
## 🎬 Запуск
|
||||
|
||||
**Phase 0**: skeleton всех 3 ch-файлов Алгебры 11 + hub + миграция + 11 SVG-хелперов.
|
||||
Цвет: **emerald/teal** (свежий, отличается от algebra-9 индиго и algebra-7 розового).
|
||||
Сразу с первого Wave — все правила качества из этого плана.
|
||||
|
||||
После Phase 0 → Phase 1 Wave 1 (§1 Степень с рац. показателем).
|
||||
|
||||
После завершения всех 4 Phase Алгебры 11 — переход к плану Геометрии 11.
|
||||
@@ -0,0 +1,349 @@
|
||||
# План реализации: Геометрия 11 (Беларусь, Латотин/Чеботаревский, 2020)
|
||||
|
||||
**Источник:** `geometriya_11kl_latotin_rus_2020.pdf` (237 стр., 4 раздела, 11 §)
|
||||
**Авторы:** Л. А. Латотин, Б. Д. Чеботаревский, И. В. Горбунова, О. Е. Цыбулько
|
||||
**Издательство:** «Белорусская энциклопедия имени Петруся Бровки», 2020
|
||||
**Уровень:** Базовый + повышенный.
|
||||
|
||||
> Это **стереометрия в выпускном классе**. Главный вызов — настоящие 3D-фигуры в браузере: призма, цилиндр, пирамида, конус, сфера, многогранники. Реализуем собственный мини-3D движок поверх SVG для полного контроля и нулевых зависимостей. Повторение (§8-§11) сделаем компактно — это обзор всей школьной геометрии.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Содержание учебника
|
||||
|
||||
### Раздел 1. Призма и цилиндр (§1–§2)
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §1 | Призма | $S_{бок} = P \cdot l$ (наклонная), $S_{бок} = P_{осн} \cdot h$ (прямая), $V = S_{осн} \cdot h$. Прямая, правильная, наклонная. Параллелепипед, прямоугольный, куб. |
|
||||
| §2 | Цилиндр | $S_{бок} = 2\pi R h$, $S_{полн} = 2\pi R(R+h)$, $V = \pi R^2 h$. Сечения, развёртка. |
|
||||
|
||||
### Раздел 2. Пирамида и конус (§3–§4)
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §3 | Пирамида | $V = \tfrac{1}{3} S_{осн} h$, правильная: $S_{бок} = \tfrac{1}{2} P_{осн} \cdot l$ (l — апофема). Усечённая пирамида. |
|
||||
| §4 | Конус | $S_{бок} = \pi R l$, $V = \tfrac{1}{3} \pi R^2 h$, развёртка — сектор. Усечённый конус. |
|
||||
|
||||
### Раздел 3. Сфера и шар (§5–§7)
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §5 | Сфера | Уравнение $(x-a)^2 + (y-b)^2 + (z-c)^2 = R^2$, касательная плоскость. |
|
||||
| §6 | Шар | $S = 4\pi R^2$, $V = \tfrac{4}{3}\pi R^3$. Шаровой сегмент, сектор, слой. Вписанные и описанные многогранники. |
|
||||
| §7 | Правильные многогранники | 5 платоновых тел: тетраэдр, куб, октаэдр, додекаэдр, икосаэдр. Двойственность. |
|
||||
|
||||
### Раздел 4. Повторение всей геометрии (§8–§11)
|
||||
| § | Тема | Объём |
|
||||
|---|------|-------|
|
||||
| §8 | Геометрические фигуры и их свойства (повторение планиметрии) | 156-188 стр. |
|
||||
| §9 | Геометрические величины (площади, объёмы) | 156-188 стр. |
|
||||
| §10 | Координаты и векторы (включая 3D-векторы) | 189-199 стр. |
|
||||
| §11 | Геометрические построения | 200-219 стр. |
|
||||
|
||||
**Итого: 11 параграфов в 4 разделах.** § 1–7 — новый материал стереометрии. § 8–11 — итоговое повторение.
|
||||
|
||||
---
|
||||
|
||||
## 🎨 SVG-СТАНДАРТ 3D-КАЧЕСТВА
|
||||
|
||||
Это самое большое нововведение всего проекта. Нужен мини-3D движок поверх SVG.
|
||||
|
||||
### Мини-3D движок (хелпер `g3d.js` или встроен в каждый ch)
|
||||
|
||||
```js
|
||||
// === Матрицы 3D-поворота ===
|
||||
function matRotY(angle) {
|
||||
const c = Math.cos(angle), s = Math.sin(angle);
|
||||
return [[c, 0, s], [0, 1, 0], [-s, 0, c]];
|
||||
}
|
||||
function matRotX(angle) {
|
||||
const c = Math.cos(angle), s = Math.sin(angle);
|
||||
return [[1, 0, 0], [0, c, -s], [0, s, c]];
|
||||
}
|
||||
function matMul(A, B) { /* умножение матриц 3x3 */ }
|
||||
function vecApply(M, v) {
|
||||
return {
|
||||
x: M[0][0]*v.x + M[0][1]*v.y + M[0][2]*v.z,
|
||||
y: M[1][0]*v.x + M[1][1]*v.y + M[1][2]*v.z,
|
||||
z: M[2][0]*v.x + M[2][1]*v.y + M[2][2]*v.z
|
||||
};
|
||||
}
|
||||
|
||||
// === Проекция (изометрическая или перспективная) ===
|
||||
function projectIso(v, cx, cy, scale) {
|
||||
// Изометрическая: x' = scale * (v.x - v.z), y' = scale * (v.y - (v.x + v.z)/2)
|
||||
const angle = Math.PI / 6;
|
||||
return {
|
||||
x: cx + scale * (v.x * Math.cos(angle) - v.z * Math.cos(angle)),
|
||||
y: cy - scale * (v.y - v.x * Math.sin(angle) - v.z * Math.sin(angle))
|
||||
};
|
||||
}
|
||||
|
||||
// Перспективная проекция с виртуальной камерой
|
||||
function projectPersp(v, camDist, cx, cy, scale) {
|
||||
const z = v.z + camDist;
|
||||
const k = scale / z;
|
||||
return { x: cx + v.x * k, y: cy - v.y * k };
|
||||
}
|
||||
|
||||
// === Сцена ===
|
||||
function createScene(W, H, opts) {
|
||||
return {
|
||||
W, H,
|
||||
cx: W / 2, cy: H / 2,
|
||||
scale: opts.scale || 60,
|
||||
rotX: opts.rotX || -0.3, // наклон вниз
|
||||
rotY: opts.rotY || 0.6, // поворот в сторону
|
||||
objects: [],
|
||||
render() { /* возвращает SVG content */ }
|
||||
};
|
||||
}
|
||||
|
||||
// === Фигуры ===
|
||||
function prismVertices(n, R, h) {
|
||||
// Правильная n-угольная призма с основанием R и высотой h
|
||||
const bottom = [], top = [];
|
||||
for (let i = 0; i < n; i++) {
|
||||
const a = 2 * Math.PI * i / n - Math.PI/2;
|
||||
bottom.push({ x: R * Math.cos(a), y: -h/2, z: R * Math.sin(a) });
|
||||
top.push({ x: R * Math.cos(a), y: h/2, z: R * Math.sin(a) });
|
||||
}
|
||||
return { vertices: [...bottom, ...top], faces: prismFaces(n) };
|
||||
}
|
||||
|
||||
function pyramidVertices(n, R, h) {
|
||||
const base = [];
|
||||
for (let i = 0; i < n; i++) {
|
||||
const a = 2 * Math.PI * i / n - Math.PI/2;
|
||||
base.push({ x: R * Math.cos(a), y: -h/2, z: R * Math.sin(a) });
|
||||
}
|
||||
const apex = { x: 0, y: h/2, z: 0 };
|
||||
return { vertices: [...base, apex], faces: pyramidFaces(n) };
|
||||
}
|
||||
|
||||
function cylinderMesh(R, h, segments) {
|
||||
// segments = 32 (число делений окружности)
|
||||
// Возвращает массив отрезков образующих + 2 эллипса
|
||||
}
|
||||
|
||||
function coneMesh(R, h, segments) { /* аналогично */ }
|
||||
|
||||
function sphereMesh(R, latSegs, lonSegs) {
|
||||
// Сетка из параллелей и меридианов
|
||||
}
|
||||
|
||||
// === Скрытие невидимых рёбер (back-face culling + Z-sort) ===
|
||||
function sortFacesByZ(faces, M) {
|
||||
return faces.sort((a, b) => {
|
||||
const za = avgZ(a, M), zb = avgZ(b, M);
|
||||
return zb - za; // дальние сначала
|
||||
});
|
||||
}
|
||||
|
||||
function isVisibleFace(face, M, camDist) {
|
||||
// Нормаль грани через cross product, проверка знака с z-вектором камеры
|
||||
}
|
||||
|
||||
// === Renderer ===
|
||||
function renderObject(obj, M, projector, opts) {
|
||||
const projected = obj.vertices.map(v => projector(vecApply(M, v)));
|
||||
let s = '';
|
||||
// Скрытые рёбра — пунктиром, видимые — сплошной линией
|
||||
obj.faces.forEach(face => {
|
||||
const points = face.indices.map(i => projected[i].x + ',' + projected[i].y).join(' ');
|
||||
const visible = isVisibleFace(face, M);
|
||||
s += `<polygon points="${points}" fill="${opts.fill}" fill-opacity="${visible ? 0.18 : 0}" stroke="${visible ? '#0f172a' : '#94a3b8'}" stroke-width="${visible ? 1.8 : 1}" stroke-dasharray="${visible ? '' : '4 3'}"/>`;
|
||||
});
|
||||
return s;
|
||||
}
|
||||
```
|
||||
|
||||
### Drag для вращения сцены
|
||||
|
||||
```js
|
||||
function attachOrbitControl(svg, scene) {
|
||||
let dragging = false, lastX = 0, lastY = 0;
|
||||
svg.style.touchAction = 'none';
|
||||
svg.style.cursor = 'grab';
|
||||
function onDown(e) {
|
||||
dragging = true; svg.style.cursor = 'grabbing';
|
||||
const p = (e.touches ? e.touches[0] : e);
|
||||
lastX = p.clientX; lastY = p.clientY;
|
||||
e.preventDefault();
|
||||
}
|
||||
function onMove(e) {
|
||||
if (!dragging) return;
|
||||
const p = (e.touches ? e.touches[0] : e);
|
||||
const dx = p.clientX - lastX, dy = p.clientY - lastY;
|
||||
scene.rotY += dx * 0.012;
|
||||
scene.rotX += dy * 0.012;
|
||||
scene.rotX = Math.max(-1.2, Math.min(1.2, scene.rotX)); // clamp
|
||||
lastX = p.clientX; lastY = p.clientY;
|
||||
scene.redraw();
|
||||
e.preventDefault();
|
||||
}
|
||||
function onUp() { dragging = false; svg.style.cursor = 'grab'; }
|
||||
svg.addEventListener('mousedown', onDown, { passive: false });
|
||||
svg.addEventListener('touchstart', onDown, { passive: false });
|
||||
window.addEventListener('mousemove', onMove, { passive: false });
|
||||
window.addEventListener('touchmove', onMove, { passive: false });
|
||||
window.addEventListener('mouseup', onUp);
|
||||
window.addEventListener('touchend', onUp);
|
||||
}
|
||||
```
|
||||
|
||||
### Правила (обязательны с §1)
|
||||
|
||||
1. **Изометрическая проекция по умолчанию** (классическая для школьных стереометрических чертежей).
|
||||
2. **Drag-to-rotate** на каждом 3D-SVG, slider'ы $\alpha$/$\beta$ — для точного контроля.
|
||||
3. **Кнопки «Сверху», «Сбоку», «Спереди»** — мгновенный возврат к стандартным проекциям.
|
||||
4. **Невидимые рёбра — пунктиром** (`stroke-dasharray="4 3"`), видимые — сплошной линией.
|
||||
5. **Полупрозрачная заливка граней** (`fill-opacity="0.18"`) для понимания глубины.
|
||||
6. **Подписи вершин** — снаружи фигуры (после проекции).
|
||||
7. **Подсветка сечения** — другой цвет грани (например, розовый/розовый-полупрозрачный).
|
||||
8. **Slider'ы — в учебных единицах** (рёбра 1..8 ед., высота 1..10 ед.), НЕ в пикселях.
|
||||
9. **Цветовая кодировка:**
|
||||
- Основание призмы/пирамиды — розовое (`#fce7f3`, обводка `#db2777`)
|
||||
- Боковая поверхность — голубое (`#dbeafe`, обводка `#0891b2`)
|
||||
- Высота, апофема — красный (`#dc2626`) пунктиром
|
||||
- Радиус основания — фиолетовый (`#7c3aed`)
|
||||
- Сечения — оранжевое (`#fed7aa`, обводка `#ea580c`)
|
||||
10. **KaTeX везде с двойным экранированием** в JS template literals.
|
||||
11. **Эмодзи запрещены.** Только inline SVG.
|
||||
|
||||
### Типы 3D-SVG по темам
|
||||
|
||||
| § | Тема | Тип SVG |
|
||||
|---|------|---------|
|
||||
| §1 | Призма | Slider $n$ (3..8) + $h$. Правильная призма с возможностью вращения. Опционально: показ диагоналей основания, диагоналей призмы, высот граней. Развёртка (плоская). |
|
||||
| §2 | Цилиндр | Slider $R$, $h$. Прозрачный цилиндр с осью. Сечения: осевое (прямоугольник), параллельное основанию (круг), наклонное (эллипс). Развёртка. Касательная плоскость. |
|
||||
| §3 | Пирамида | Slider $n$ (3..6), $R$ (основание), $h$. Правильная пирамида с апофемой. Усечённая пирамида (slider $r$ верхнего основания). Подсветка апофемы. |
|
||||
| §4 | Конус | Slider $R$, $h$. Конус с образующей и осью. Развёртка — сектор. Усечённый конус. Касательная плоскость по образующей. |
|
||||
| §5 | Сфера | 3D-сфера с сеткой параллелей и меридианов. Slider $R$, центр $(a,b,c)$. Касательная плоскость в точке. |
|
||||
| §6 | Шар | Шаровой сегмент, сектор, слой. Slider высоты сегмента. Шар, вписанный в куб; куб, вписанный в шар. |
|
||||
| §7 | Правильные многогранники | 5 платоновых тел с возможностью переключения. Вращение, развёртки. Двойственность (тетраэдр-тетраэдр, куб-октаэдр, икосаэдр-додекаэдр). |
|
||||
| §8 | Повторение планиметрии | 2D-фигуры из Геом 9 (без 3D). Компактные интерактивы. |
|
||||
| §9 | Геометрические величины | Площади и объёмы — комбинация 2D и 3D в зависимости от темы. |
|
||||
| §10 | Координаты и векторы | 3D-координатная система с осями. Векторы как стрелки в 3D. Сумма, разность, скалярное произведение. |
|
||||
| §11 | Геометрические построения | 2D-построения циркулем и линейкой (как в Геом 9). |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 ПОРЯДОК РЕАЛИЗАЦИИ
|
||||
|
||||
### Phase 0: Архитектура (фундамент)
|
||||
- `geometry_11_hub.html` skeleton (палитра **cyan/sky**, чтобы отличить)
|
||||
- `geometry_11_ch1.html` (§1-2 Призма + Цилиндр)
|
||||
- `geometry_11_ch2.html` (§3-4 Пирамида + Конус)
|
||||
- `geometry_11_ch3.html` (§5-7 Сфера + Шар + Правильные многогранники)
|
||||
- `geometry_11_ch4.html` (§8-11 Повторение)
|
||||
- Миграция `023_geometry_11_hub.sql` (slug `geometry-11`, sort_order 10)
|
||||
- Мини-3D движок (`g3d` встроен в каждый ch как глобальный скрипт)
|
||||
- KaTeX CDN, CSS POLISH, ICONS из geom9_ch4
|
||||
|
||||
### Phase 1: Раздел 1 «Призма и цилиндр» (2 §) — 3 волны
|
||||
- **Wave 1**: §1 «Призма». 3 теории + 4 интерактива:
|
||||
1. **3D-конструктор призмы**: slider $n$ (3..8), $a$ (сторона), $h$ (высота). Drag-to-rotate. Развёртка по кнопке.
|
||||
2. **Калькулятор площадей и объёма**: ввод $n, a, h$ → $S_{осн}, P, S_{бок}, S_{полн}, V$ с пошаговым выводом.
|
||||
3. **DnD-сортер**: фигуры → типы (правильная / прямая / наклонная / параллелепипед / куб).
|
||||
4. **Тренажёр**: 6 задач на $V, S$ призмы.
|
||||
- **Wave 2**: §2 «Цилиндр». 3 теории + 4 интерактива:
|
||||
1. **3D-конструктор цилиндра**: slider $R$, $h$. Drag-to-rotate. Сечения: осевое, параллельное, наклонное (slider угла наклона плоскости).
|
||||
2. **Калькулятор**: $S_{бок}, S_{полн}, V$.
|
||||
3. **Квикфайр «Какое сечение?»**: какая фигура получится — круг / эллипс / прямоугольник.
|
||||
4. **Тренажёр**.
|
||||
- **Wave 3**: Финал раздела 1 (4 mini-шпаргалки + 5 боссов + ачивка «Мастер призмы и цилиндра»).
|
||||
|
||||
### Phase 2: Раздел 2 «Пирамида и конус» (2 §) — 3 волны
|
||||
- **Wave 1**: §3 «Пирамида». 3D-конструктор с slider'ом $n$, $R$, $h$. Подсветка апофемы. Усечённая пирамида.
|
||||
- **Wave 2**: §4 «Конус». 3D-конус с осью, образующей. Развёртка-сектор с slider'ом угла раскрытия. Касательная плоскость.
|
||||
- **Wave 3**: Финал раздела 2 (5 боссов + ачивка «Мастер пирамиды и конуса»).
|
||||
|
||||
### Phase 3: Раздел 3 «Сфера, шар, многогранники» (3 §) — 4 волны
|
||||
- **Wave 1**: §5 «Сфера». 3D-сфера с сеткой параллелей/меридианов. Касательная плоскость в точке. Уравнение сферы в координатах. Slider центра $(a,b,c)$ и $R$.
|
||||
- **Wave 2**: §6 «Шар». Площадь поверхности, объём. Шаровой сегмент/сектор/слой. Вписанные и описанные многогранники.
|
||||
- **Wave 3**: §7 «Правильные многогранники». 5 платоновых тел с переключателем. Свойства каждого. Двойственность.
|
||||
- **Wave 4**: Финал раздела 3 (5 боссов + ачивка «Мастер сфер»).
|
||||
|
||||
### Phase 4: Раздел 4 «Повторение» (4 §) — компактно, 3 волны
|
||||
- **Wave 1**: §8 «Планиметрия» + §9 «Площади и объёмы». Каждый — 2 теории + 3 интерактива (без 3D). Это обзор, не углубление.
|
||||
- **Wave 2**: §10 «Координаты и векторы 3D». 3D-визуализатор векторов (стрелки в координатной системе). Slider'ы координат вектора. Скалярное произведение, угол.
|
||||
- **Wave 3**: §11 «Построения» + Финал раздела 4 (3 боссов на каждое §).
|
||||
|
||||
### Phase 5: Финал всего курса
|
||||
- Итоговая шпаргалка по 4 разделам.
|
||||
- **9 интегрированных боссов** (геометрия 11 объёмная — больше боссов):
|
||||
1. **Призма + Цилиндр**: цилиндр вписан в правильную 6-угольную призму...
|
||||
2. **Пирамида + Сечение**: найти угол наклона апофемы.
|
||||
3. **Конус + Развёртка**: найти угол сектора по $R$ и $l$.
|
||||
4. **Шар + Многогранник**: вписать шар в куб.
|
||||
5. **Сфера + Координаты**: уравнение касательной плоскости.
|
||||
6. **Многогранники + Объёмы**: найти объём октаэдра через куб.
|
||||
7. **3D-векторы**: скалярное произведение, угол.
|
||||
8. **Параллелепипед + Диагональ**: $d^2 = a^2 + b^2 + c^2$.
|
||||
9. **Магистр стереометрии**: синтез всех формул.
|
||||
- Ачивка «Магистр геометрии 11» + 100 XP бонус + confetti.
|
||||
- Кнопка «К каталогу учебников».
|
||||
|
||||
---
|
||||
|
||||
## 📦 Структура каждого § (стандарт)
|
||||
|
||||
То же, что в Геом 9 / Алгебра 9 / Алгебра 11:
|
||||
- 3 теоретических карточки (`makeCard`)
|
||||
- 4 интерактива (один из них — 3D-конструктор, остальные могут быть 2D-калькуляторы, DnD, квикфайр, тренажёр)
|
||||
- Кнопка «Я прочитал § (+10 XP)»
|
||||
- Прогресс/XP: IV1 15%/10XP, IV2 15%/10XP, IV3 25%/15XP, IV4 25%/15XP, чтение 30%/10XP
|
||||
|
||||
### Финал раздела
|
||||
- 4 mini-шпаргалки (по §) с ключевыми формулами
|
||||
- 5 боссов (каждый +10 XP, +18% к `finalN`)
|
||||
- Ачивка `rN_done` при 5/5 (+50 XP бонус)
|
||||
- Кнопка к следующему разделу
|
||||
|
||||
---
|
||||
|
||||
## 📊 Оценка объёма
|
||||
|
||||
| Раздел | § | Особенности | LOC |
|
||||
|--------|---|-------------|-----|
|
||||
| Phase 0: skeleton | — | 4 ch + hub + 3D-движок | 1500 |
|
||||
| Раздел 1 (§1-2) | 2 | Призма, цилиндр — главный 3D | 6000 |
|
||||
| Раздел 2 (§3-4) | 2 | Пирамида, конус | 5500 |
|
||||
| Раздел 3 (§5-7) | 3 | Сфера, шар, многогранники | 8000 |
|
||||
| Раздел 4 (§8-11) | 4 | Повторение — компактно | 6000 |
|
||||
| Финал курса | — | 9 боссов | 1200 |
|
||||
| **Итого** | **11** | | **~28 000 LOC** |
|
||||
|
||||
Это больше, чем Геом 9 (~26K LOC), из-за 3D-движка и стереометрии.
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Критические правила
|
||||
|
||||
### ❌ НЕ делать
|
||||
- **3D в пиксельных координатах**. Вершины фигур — всегда в учебных единицах, проекция масштабирует к пикселям.
|
||||
- **«Магические числа» в матрицах поворота**. Всё через `matRotX`, `matRotY`, `matMul`.
|
||||
- **Слайдеры рёбер $a$ от 40 до 150**. Только в единицах: $a \in [1; 8]$.
|
||||
- **Drag без `passive: false`** — будет глючить на тач-устройствах.
|
||||
- **Hidden surface removal на глаз** — используем sort by avg-Z или back-face culling.
|
||||
- **Подписи вершин внутри фигуры** — всегда снаружи, после проекции.
|
||||
- **Сечения с пересечениями граней без проверки** — может быть некрасиво. Проверяем алгоритм.
|
||||
|
||||
### ✅ Обязательно
|
||||
- **Drag-to-rotate** на каждом 3D-SVG (не только slider'ы).
|
||||
- **3 предустановленные кнопки проекции** (сверху/сбоку/спереди).
|
||||
- **Slider'ы в учебных единицах** с разумным масштабом проекции.
|
||||
- **JS parse-check** после каждого Wave.
|
||||
- **KaTeX-аудит** через grep regex после каждого Wave.
|
||||
- **3D-движок — общий файл `js/g3d.js`** или встроен в каждый ch (предпочтительно общий, чтобы не дублировать).
|
||||
- **Все builder-функции в registry — НЕ stub'ы** в конце Wave финала.
|
||||
|
||||
---
|
||||
|
||||
## 🎬 Запуск
|
||||
|
||||
**Phase 0**: skeleton 4 ch-файлов Геом 11 + hub + миграция + мини-3D движок.
|
||||
Палитра: **cyan/sky** (свежая, отличается от geom-9 розовой/rose).
|
||||
|
||||
После Phase 0 → Phase 1 Wave 1 (§1 Призма — самая первая 3D-фигура).
|
||||
|
||||
После завершения всех 5 Phase Геометрии 11 — план двух 11-классов завершён.
|
||||
Reference in New Issue
Block a user