# План реализации: Алгебра 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$ возрастает, при $01$ знак сохраняется, при $0` каждого 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){
// Возвращает
}
// 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)
// Возвращает
}
// 9. Сравнительный график двух функций (для a>1 vs 0 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 -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