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,424 @@
|
||||
# План реализации: Физика 10 (Беларусь, Громыко, 2019)
|
||||
|
||||
**Источник:** `fizika_10kl_gromika_rus_2019.pdf` (267 стр., 2 части, 6 глав, 37 §)
|
||||
**Издательство:** «Адукацыя і выхаванне», 2019
|
||||
**Уровень:** базовый + повышенный (с электронным приложением).
|
||||
|
||||
> **Самый большой учебник во всём проекте** — 37 параграфов против 19 в Алгебре 9 и 16 в Геометрии 9. Учитывает весь опыт 10 предыдущих учебников: единый KaTeX-эскейп, ноль пикселей в подписях, ноль эмодзи, 3D-движок `g3d.js`, snap-точки в slider'ах, цветовая кодировка, drag-to-rotate. **Главная фишка** — настоящие физические **симуляции**: броуновское движение, изопроцессы (PV-диаграммы), линии поля, электрические цепи, движение заряженных частиц в магнитном поле, явление индукции.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Содержание учебника
|
||||
|
||||
### Часть 1. МОЛЕКУЛЯРНАЯ ФИЗИКА
|
||||
|
||||
**Глава 1. Основы молекулярно-кинетической теории (§§1–10)**
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §1 | Основные положения МКТ | 3 положения: вещество — частицы, частицы движутся, частицы взаимодействуют |
|
||||
| §2 | Масса и размеры молекул. Количество вещества | $N_A = 6.022 \cdot 10^{23}$, $M = m \cdot N_A$, $\nu = N/N_A = m/M$ |
|
||||
| §3 | Макро- и микропараметры. Идеальный газ. Основное уравнение МКТ | $p = \dfrac{1}{3} n m_0 \overline{v^2} = \dfrac{2}{3} n \overline{E_k}$ |
|
||||
| §4 | Тепловое равновесие. Температура | $\overline{E_k} = \dfrac{3}{2} kT$, шкала Кельвина: $T = t + 273$ |
|
||||
| §5 | Уравнение состояния идеального газа | $pV = \nu RT$, $pV = \dfrac{m}{M} RT$ (Клапейрон–Менделеев) |
|
||||
| §6 | Изопроцессы | Изотерма $pV = \text{const}$, изобара $V/T = \text{const}$, изохора $p/T = \text{const}$ |
|
||||
| §7 | Строение и свойства твёрдых тел | Кристаллы (моно-, поликристаллы), аморфные тела, анизотропия |
|
||||
| §8 | Строение и свойства жидкостей | Поверхностное натяжение, смачивание |
|
||||
| §9 | Испарение и конденсация. Насыщенный пар | Динамическое равновесие, давление насыщенного пара |
|
||||
| §10 | Влажность воздуха | $\varphi = \dfrac{p}{p_н} \cdot 100\%$, точка росы, психрометр |
|
||||
|
||||
**Глава 2. Основы термодинамики (§§11–15)**
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §11 | Внутренняя энергия | $U = \dfrac{3}{2} \nu R T$ (одноатомный газ) |
|
||||
| §12 | Работа в термодинамике | $A = p \Delta V$ (изобарный), графически площадь под кривой |
|
||||
| §13 | Количество теплоты | $Q = cm \Delta T$, $Q = \lambda m$ (плавление), $Q = rm$ (испарение), $Q = qm$ (сгорание) |
|
||||
| §14 | Первый закон термодинамики | $\Delta U = Q + A_{внеш}$ или $Q = \Delta U + A_{газ}$ |
|
||||
| §15 | Тепловые двигатели. КПД | $\eta = \dfrac{A}{Q_1} = \dfrac{Q_1 - Q_2}{Q_1}$, $\eta_{Карно} = \dfrac{T_1 - T_2}{T_1}$ |
|
||||
|
||||
### Часть 2. ЭЛЕКТРОДИНАМИКА
|
||||
|
||||
**Глава 3. Электростатика (§§16–24)**
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §16 | Электрический заряд. Закон сохранения | $q = ne$, $e = 1.6 \cdot 10^{-19}$ Кл, $\sum q = \text{const}$ |
|
||||
| §17 | Закон Кулона | $F = k \dfrac{|q_1 q_2|}{r^2}$, $k = 9 \cdot 10^9$ Н·м²/Кл² |
|
||||
| §18 | Электростатическое поле | Силовая характеристика, источник |
|
||||
| §19 | Напряжённость поля. Принцип суперпозиции | $\vec{E} = \dfrac{\vec{F}}{q_{пр}}$, $\vec{E} = \sum \vec{E_i}$ |
|
||||
| §20 | Линии напряжённости | Силовые линии, поле точечного заряда, диполя |
|
||||
| §21 | Работа поля. Потенциал | $A = qU$, $\varphi = \dfrac{W_p}{q}$ |
|
||||
| §22 | Разность потенциалов. Напряжение | $U = \varphi_1 - \varphi_2$, $E = U/d$ (однородное) |
|
||||
| §23 | Конденсаторы. Электроёмкость | $C = q/U$, $C = \dfrac{\varepsilon \varepsilon_0 S}{d}$ |
|
||||
| §24 | Энергия поля конденсатора | $W = \dfrac{CU^2}{2} = \dfrac{q^2}{2C} = \dfrac{qU}{2}$ |
|
||||
|
||||
**Глава 4. Постоянный электрический ток (§§25–26)**
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §25 | ЭДС источника тока | $\mathcal{E} = A_{ст}/q$, ЭДС, сторонние силы |
|
||||
| §26 | Закон Ома для полной цепи | $I = \dfrac{\mathcal{E}}{R + r}$, КПД $\eta = U/\mathcal{E}$ |
|
||||
|
||||
**Глава 5. Магнитное поле. Электромагнитная индукция (§§27–33)**
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §27 | Магнитное поле тока | Опыт Эрстеда, взаимодействие проводников |
|
||||
| §28 | Индукция магнитного поля | $\vec{B}$, правило буравчика, линии индукции |
|
||||
| §29 | Сила Ампера | $F_A = BIL\sin\alpha$, правило левой руки |
|
||||
| §30 | Сила Лоренца | $F_L = qvB\sin\alpha$, движение по окружности: $R = \dfrac{mv}{qB}$ |
|
||||
| §31 | Магнитный поток. Электромагнитная индукция | $\Phi = BS\cos\alpha$, опыты Фарадея |
|
||||
| §32 | Правило Ленца. Закон ЭМИ | $\mathcal{E}_i = -\dfrac{d\Phi}{dt}$ |
|
||||
| §33 | Самоиндукция. Индуктивность | $\mathcal{E}_{si} = -L \dfrac{dI}{dt}$, $W_L = \dfrac{LI^2}{2}$ |
|
||||
|
||||
**Глава 6. Электрический ток в различных средах (§§34–37)**
|
||||
| § | Тема | Ключевые формулы |
|
||||
|---|------|------------------|
|
||||
| §34 | Ток в металлах. Сверхпроводимость | Свободные электроны, $\rho(T) = \rho_0(1+\alpha t)$ |
|
||||
| §35 | Ток в электролитах | Электролиз, законы Фарадея: $m = kIt$, $k = \dfrac{M}{F n}$ |
|
||||
| §36 | Ток в газах. Плазма | Самостоятельный/несамостоятельный разряд, виды разрядов |
|
||||
| §37 | Ток в полупроводниках | Собственная и примесная проводимость, n-тип, p-тип, p-n-переход |
|
||||
|
||||
**ИТОГО:** 6 глав, 37 параграфов, **2 части**.
|
||||
|
||||
---
|
||||
|
||||
## 🎨 SVG-СТАНДАРТ КАЧЕСТВА ДЛЯ ФИЗИКИ
|
||||
|
||||
Это первая физика в проекте — нужны новые хелперы. Унаследует всё от математических учебников + добавляет physics-specific.
|
||||
|
||||
### Унаследованные хелперы (из Алгебры 11 / Геометрии 11)
|
||||
- `axes2D(W, H, pad, xmin, xmax, ymin, ymax)` — координатная плоскость
|
||||
- `plotFunc(f, xmin, xmax, toX, toY, color, N)` — график функции
|
||||
- `pointWithDrop(x, fx, toX, toY, color, label)` — точка с проекциями
|
||||
- `asymptote(orientation, value, ...)` — асимптота
|
||||
- `snapToValue(value, snaps, tolerance)` — snap-точки
|
||||
- `rightAngleMark`, `angleArcAuto`, `unitVec`, `deg2rad`
|
||||
- **`g3d.js`** — мини-3D движок (для линий магнитной индукции, движения частиц)
|
||||
|
||||
### Новые physics-specific хелперы (в `frontend/js/phys.js`)
|
||||
|
||||
```javascript
|
||||
// === Стрелка вектора (2D) ===
|
||||
function drawArrow(x1, y1, x2, y2, color, width, headSize) {
|
||||
// Возвращает SVG: линия + треугольная стрелка на конце
|
||||
const dx = x2 - x1, dy = y2 - y1;
|
||||
const len = Math.sqrt(dx*dx + dy*dy);
|
||||
const ux = dx / len, uy = dy / len;
|
||||
const px = -uy, py = ux; // перпендикуляр
|
||||
const h = headSize || 10;
|
||||
const w = (headSize || 10) * 0.6;
|
||||
const tipX = x2, tipY = y2;
|
||||
const baseX = x2 - ux * h, baseY = y2 - uy * h;
|
||||
const leftX = baseX + px * w, leftY = baseY + py * w;
|
||||
const rightX = baseX - px * w, rightY = baseY - py * w;
|
||||
return `<line x1="${x1}" y1="${y1}" x2="${baseX.toFixed(1)}" y2="${baseY.toFixed(1)}" stroke="${color}" stroke-width="${width || 2}"/>`
|
||||
+ `<polygon points="${tipX},${tipY} ${leftX.toFixed(1)},${leftY.toFixed(1)} ${rightX.toFixed(1)},${rightY.toFixed(1)}" fill="${color}"/>`;
|
||||
}
|
||||
|
||||
// === Линии электрического поля от точечного заряда ===
|
||||
function fieldLinesPointCharge(cx, cy, sign, scale, numLines) {
|
||||
// sign: +1 или -1 (от знака заряда)
|
||||
// numLines: число линий (12-24)
|
||||
// Возвращает массив SVG-линий — стрелки наружу для +q, внутрь для -q
|
||||
let s = '';
|
||||
const N = numLines || 16;
|
||||
for (let i = 0; i < N; i++) {
|
||||
const a = 2 * Math.PI * i / N;
|
||||
const r1 = 15, r2 = scale;
|
||||
const x1 = cx + r1 * Math.cos(a), y1 = cy + r1 * Math.sin(a);
|
||||
const x2 = cx + r2 * Math.cos(a), y2 = cy + r2 * Math.sin(a);
|
||||
if (sign > 0) s += drawArrow(x1, y1, x2, y2, '#dc2626', 1.5);
|
||||
else s += drawArrow(x2, y2, x1, y1, '#2563eb', 1.5);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
// === Линии поля диполя (две точечных зарядов противоположных) ===
|
||||
function fieldLinesDipole(c1, c2, scale, numLines) {
|
||||
// Параметрически — линия от +q к -q вдоль кривых, перпендикулярных эквипотенциалям
|
||||
// Упрощённо: использовать numerical integration по полю
|
||||
// ...
|
||||
}
|
||||
|
||||
// === Электрическая схема: компоненты ===
|
||||
function batteryEMF(x, y, EMF, orientation) {
|
||||
// Возвращает SVG условного обозначения батареи (две полоски + подпись ε)
|
||||
}
|
||||
function resistor(x, y, w, h, R, orientation) {
|
||||
// Возвращает SVG зигзага резистора + подпись R
|
||||
}
|
||||
function capacitor(x, y, C, orientation) {
|
||||
// Две параллельные линии + подпись C
|
||||
}
|
||||
function ammeter(x, y) {
|
||||
// Круг с буквой A
|
||||
}
|
||||
function voltmeter(x, y) {
|
||||
// Круг с буквой V
|
||||
}
|
||||
function inductor(x, y, L, orientation) {
|
||||
// Серия маленьких полукругов
|
||||
}
|
||||
function lightbulb(x, y) {
|
||||
// Круг с крестиком (или волной)
|
||||
}
|
||||
|
||||
// === Магнитное поле: стрелки В через плоскость экрана ===
|
||||
function magneticField(x, y, direction, dx, dy) {
|
||||
// direction: 'in' (крест) или 'out' (точка)
|
||||
// Рисует сетку 5x5 крестиков (вошло в плоскость) или точек (вышло из плоскости)
|
||||
let s = '';
|
||||
for (let i = 0; i < 5; i++) {
|
||||
for (let j = 0; j < 5; j++) {
|
||||
const cx = x + i * dx, cy = y + j * dy;
|
||||
if (direction === 'in') {
|
||||
s += `<circle cx="${cx}" cy="${cy}" r="6" fill="none" stroke="#0891b2" stroke-width="1.5"/>`;
|
||||
s += `<line x1="${cx-4}" y1="${cy-4}" x2="${cx+4}" y2="${cy+4}" stroke="#0891b2" stroke-width="1.5"/>`;
|
||||
s += `<line x1="${cx-4}" y1="${cy+4}" x2="${cx+4}" y2="${cy-4}" stroke="#0891b2" stroke-width="1.5"/>`;
|
||||
} else {
|
||||
s += `<circle cx="${cx}" cy="${cy}" r="6" fill="none" stroke="#0891b2" stroke-width="1.5"/>`;
|
||||
s += `<circle cx="${cx}" cy="${cy}" r="2" fill="#0891b2"/>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
// === PV-диаграмма с изопроцессами ===
|
||||
function pvDiagram(W, H, pad, pMax, vMax) {
|
||||
// Возвращает axes2D-объект с диапазоном (0..vMax, 0..pMax)
|
||||
// Подписи осей: P (атм или Па), V (л или м³)
|
||||
}
|
||||
|
||||
// === Молекула газа (частица) ===
|
||||
function molecule(x, y, r, color) {
|
||||
return `<circle cx="${x}" cy="${y}" r="${r}" fill="${color}" stroke="#0f172a" stroke-width="0.8"/>`;
|
||||
}
|
||||
|
||||
// === Симуляция броуновского движения / движения молекул газа ===
|
||||
class GasSimulation {
|
||||
constructor(opts) {
|
||||
this.W = opts.W; this.H = opts.H;
|
||||
this.N = opts.N || 30;
|
||||
this.particles = [];
|
||||
for (let i = 0; i < this.N; i++) {
|
||||
this.particles.push({
|
||||
x: Math.random() * this.W,
|
||||
y: Math.random() * this.H,
|
||||
vx: (Math.random() - 0.5) * opts.speed,
|
||||
vy: (Math.random() - 0.5) * opts.speed
|
||||
});
|
||||
}
|
||||
}
|
||||
step(dt) {
|
||||
this.particles.forEach(p => {
|
||||
p.x += p.vx * dt; p.y += p.vy * dt;
|
||||
// отражение от стенок
|
||||
if (p.x < 0 || p.x > this.W) p.vx = -p.vx;
|
||||
if (p.y < 0 || p.y > this.H) p.vy = -p.vy;
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return this.particles.map(p => molecule(p.x, p.y, 4, '#2563eb')).join('');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Цветовая кодировка для физики
|
||||
|
||||
- **Положительный заряд** — красный (`#dc2626`)
|
||||
- **Отрицательный заряд** — синий (`#2563eb`)
|
||||
- **Электрическое поле $\vec{E}$** — оранжевый (`#ea580c`)
|
||||
- **Магнитное поле $\vec{B}$** — фиолетовый (`#7c3aed`)
|
||||
- **Сила** — зелёный (`#10b981`)
|
||||
- **Скорость** — голубой (`#0891b2`)
|
||||
- **Молекулы газа** — синие точки
|
||||
- **Температура** — градиент от синего (холод) к красному (горячо)
|
||||
- **Ток** — янтарный (`#d97706`)
|
||||
- **Резистор / провод** — тёмно-серый (`#374151`)
|
||||
- **Изотерма** (P-V) — оранжевый
|
||||
- **Изобара** (V-T) — синий
|
||||
- **Изохора** (P-T) — зелёный
|
||||
|
||||
### Правила (обязательны с §1)
|
||||
|
||||
1. **Все единицы измерения через KaTeX** — `\\text{Н}`, `\\text{м}^2$, `\\text{Дж/(моль·К)}` — никогда сырой текст.
|
||||
2. **Slider'ы — в реальных физических величинах** с разумными диапазонами:
|
||||
- Температура: 100..500 К (или $-100..200$ °C)
|
||||
- Давление: 0.5..5 атм или $10^4..10^6$ Па
|
||||
- Объём: 1..10 л или $0.001..0.01$ м³
|
||||
- Заряд: $\pm 10^{-9}..10^{-6}$ Кл (нКл, мкКл)
|
||||
- Расстояние между зарядами: 0.01..1 м
|
||||
- Напряжение: 1..220 В
|
||||
- Ток: 0.01..10 А
|
||||
- Магнитная индукция: $10^{-3}..1$ Тл
|
||||
3. **Snap-точки** на эталонных значениях: $T = 273$ К ($0$ °C), $T = 0$ K, $p = 1$ атм.
|
||||
4. **Все формулы с КаTeX**, двойные backslash.
|
||||
5. **Векторы — со стрелками** через `drawArrow`. Никогда `→` в тексте — через KaTeX `\\vec{E}`.
|
||||
6. **Подписи единиц измерения** — обязательны на всех осях графиков, во всех результатах калькуляторов.
|
||||
7. **Симуляции — через `requestAnimationFrame`** с возможностью паузы и сброса.
|
||||
8. **Эмодзи запрещены.**
|
||||
9. **Никаких пикселей в подписях** — всё в СИ или производных единицах.
|
||||
|
||||
### Типы интерактивов по темам
|
||||
|
||||
| Тип | Применение |
|
||||
|-----|-----------|
|
||||
| **Симуляция движения молекул** | §1 (МКТ), §3 (давление как удары о стенку), §9 (испарение) |
|
||||
| **PV/VT/PT диаграммы** | §6 (изопроцессы — главное!), §15 (цикл Карно) |
|
||||
| **Калькулятор Клапейрона–Менделеева** | §5 |
|
||||
| **Психрометрический анализ** | §10 |
|
||||
| **Поток теплоты симуляция** | §13 |
|
||||
| **Цикл Карно — анимированная PV-диаграмма** | §15 |
|
||||
| **Закон Кулона: 3D-визуализатор сил** | §17 |
|
||||
| **Линии напряжённости электрического поля** | §20 (главный визуал электростатики) |
|
||||
| **Эквипотенциальные поверхности** | §22 |
|
||||
| **Конденсатор-конструктор** | §23 |
|
||||
| **Электрическая цепь — конструктор** | §25, §26 |
|
||||
| **Правило буравчика / левой руки — 3D** | §28, §29, §30 |
|
||||
| **Движение заряженной частицы в B-поле — 3D-траектория** | §30 (главный визуал магнетизма) |
|
||||
| **Опыты Фарадея — анимация катушки и магнита** | §31 |
|
||||
| **Самоиндукция — LR-цепь, ток как функция времени** | §33 |
|
||||
| **p-n переход — визуализация дырок и электронов** | §37 |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 ПОРЯДОК РЕАЛИЗАЦИИ
|
||||
|
||||
Учитывая 37 параграфов — самый большой проект, разбиваем на **8 фаз**.
|
||||
|
||||
### Phase 0: Архитектура (фундамент)
|
||||
- `physics_10_hub.html` — палитра **yellow/amber** (классический физический цвет) или **orange**
|
||||
- 6 ch-файлов: `physics_10_ch1.html` (МКТ), `_ch2.html` (термодинамика), `_ch3.html` (электростатика), `_ch4.html` (пост. ток), `_ch5.html` (магнитное поле), `_ch6.html` (ток в средах)
|
||||
- Миграция `0XX_physics_10_hub.sql` (следующий доступный номер)
|
||||
- **`frontend/js/phys.js`** — новый модуль physics-хелперов (drawArrow, fieldLines, magneticField, схемы, GasSimulation, pvDiagram)
|
||||
- 2D-хелперы (axes2D, plotFunc, etc.) и G3D подключены в каждый ch
|
||||
- KaTeX CDN + auto-render
|
||||
- POLISH CSS + bump-score JS
|
||||
|
||||
### Phase 1: Молекулярная физика — Глава 1 (10 §) — 5 волн
|
||||
Самая большая глава учебника. По 2 §§ на волну.
|
||||
- **Wave 1**: §1 (МКТ основные положения, БРОУНОВСКОЕ ДВИЖЕНИЕ симуляция) + §2 (масса/количество вещества, калькулятор $N$, $\nu$, $m$).
|
||||
- **Wave 2**: §3 (давление через удары молекул, симуляция $p = \frac{1}{3} n m \overline{v^2}$) + §4 (температура, шкалы, $\overline{E_k} = \frac{3}{2}kT$).
|
||||
- **Wave 3**: §5 (уравнение Клапейрона–Менделеева, калькулятор) + §6 (**изопроцессы — главный визуал главы**: PV/VT/PT диаграммы с slider'ом T, V, p).
|
||||
- **Wave 4**: §7 (твёрдые тела, виды кристаллов SVG) + §8 (жидкости, поверхностное натяжение симуляция).
|
||||
- **Wave 5**: §9 (испарение, насыщенный пар, динамическое равновесие симуляция) + §10 (влажность, психрометрический калькулятор) + **Финал главы 1** (7 боссов + ачивка «Мастер МКТ»).
|
||||
|
||||
### Phase 2: Молекулярная физика — Глава 2 «Термодинамика» (5 §) — 3 волны
|
||||
- **Wave 1**: §11 (внутренняя энергия, $U = \frac{3}{2} \nu R T$) + §12 (работа в термодинамике, площадь под P-V кривой).
|
||||
- **Wave 2**: §13 (количество теплоты — все 4 формулы) + §14 (первый закон термодинамики, применение к изопроцессам).
|
||||
- **Wave 3**: §15 (тепловые двигатели, **цикл Карно — анимация PV-цикла**, КПД) + **Финал главы 2** (5 боссов + ачивка «Мастер термодинамики»).
|
||||
|
||||
### Phase 3: Электростатика (9 §) — 5 волн
|
||||
- **Wave 1**: §16 (заряд, закон сохранения) + §17 (**закон Кулона — визуализатор сил**, slider $q_1, q_2, r$).
|
||||
- **Wave 2**: §18 (электрическое поле) + §19 (напряжённость, суперпозиция).
|
||||
- **Wave 3**: §20 (**линии напряжённости — главный визуал** — поле точечного заряда, диполя, двух одноимённых) + §21 (работа поля, потенциал).
|
||||
- **Wave 4**: §22 (разность потенциалов, напряжение, $E = U/d$) + §23 (конденсаторы, $C = \varepsilon \varepsilon_0 S/d$).
|
||||
- **Wave 5**: §24 (энергия поля конденсатора) + **Финал главы 3** (7 боссов + ачивка «Мастер электростатики»).
|
||||
|
||||
### Phase 4: Постоянный ток (2 §) — 1 волна
|
||||
- **Wave 1**: §25 (ЭДС, сторонние силы) + §26 (закон Ома для полной цепи, **конструктор электрической цепи**) + **Финал главы 4** (5 боссов).
|
||||
|
||||
### Phase 5: Магнитное поле и индукция (7 §) — 4 волны
|
||||
- **Wave 1**: §27 (опыт Эрстеда, симуляция) + §28 (индукция, правило буравчика, **3D-линии магнитной индукции вокруг проводника**).
|
||||
- **Wave 2**: §29 (сила Ампера, правило левой руки, симуляция) + §30 (**сила Лоренца — 3D-движение частицы по спирали в B-поле**).
|
||||
- **Wave 3**: §31 (магнитный поток, **опыты Фарадея — анимация катушки и магнита**) + §32 (правило Ленца, закон ЭМИ).
|
||||
- **Wave 4**: §33 (самоиндукция, индуктивность, LR-цепь) + **Финал главы 5** (7 боссов + ачивка «Мастер магнетизма»).
|
||||
|
||||
### Phase 6: Ток в различных средах (4 §) — 2 волны
|
||||
- **Wave 1**: §34 (металлы, сверхпроводимость) + §35 (электролиты, законы Фарадея).
|
||||
- **Wave 2**: §36 (газы, плазма, виды разрядов) + §37 (полупроводники, **p-n переход — визуализация дырок и электронов**, n-/p-тип) + **Финал главы 6** (5 боссов + ачивка «Мастер токов»).
|
||||
|
||||
### Phase 7: Финал курса Физика 10
|
||||
- Итоговая шпаргалка (6 mini-карточек: МКТ, термодинамика, электростатика, ток, магнетизм, ток в средах)
|
||||
- **10 интегрированных боссов**, комбинирующих темы из разных глав:
|
||||
1. **МКТ + термодинамика**: $U$ и $T$ моноатомного газа
|
||||
2. **Изопроцесс + работа**: $A$ за изобарное расширение
|
||||
3. **Цикл Карно**: КПД при $T_1 = 600$ К, $T_2 = 300$ К
|
||||
4. **Закон Кулона + суперпозиция**: сила на 3-й заряд от двух источников
|
||||
5. **Конденсатор + энергия**: $W$ от $C$, $U$
|
||||
6. **Закон Ома для полной цепи + КПД**
|
||||
7. **Сила Лоренца + радиус**: $R = mv/(qB)$
|
||||
8. **Закон ЭМИ Фарадея**: $\mathcal{E}_i$ от $d\Phi/dt$
|
||||
9. **Самоиндукция + энергия**: $W_L = LI^2/2$
|
||||
10. **Магистр электродинамики**: синтез
|
||||
- Ачивка **«Магистр физики 10»** (+150 XP — крупнейший курс)
|
||||
- Кнопка «К каталогу учебников» → `/textbooks`
|
||||
|
||||
---
|
||||
|
||||
## 📦 Структура каждого § (стандарт)
|
||||
|
||||
### Wave 0 главы — skeleton (включено в Phase 0)
|
||||
- CSS + цветовая палитра 3 акцентов на §
|
||||
- Sections + stub-builders
|
||||
- Hub-карточка обновляется
|
||||
- Миграция в БД
|
||||
|
||||
### Wave N — наполнение § (по 2 § на волну)
|
||||
|
||||
**Каждый § содержит:**
|
||||
- **3 теоретические карточки** (`theory`, `rule`, `example`) с SVG-схемами/графиками
|
||||
- **4 интерактива** (`.wg` виджеты):
|
||||
1. **Симуляция** или **3D/SVG-визуализатор** (главный)
|
||||
2. **Калькулятор закона** (ввод параметров → формула с подстановкой → результат с единицами)
|
||||
3. **DnD/Квикфайр** (понятийный)
|
||||
4. **Тренажёр расчётных задач** (5-6 задач с числовым ответом, допуск 1-5%)
|
||||
- **Кнопка «Я прочитал § (+10 XP)»**
|
||||
- **Прогресс/XP**: IV1 15%/10XP, IV2 15%/10XP, IV3 25%/15XP, IV4 25%/15XP, чтение 30%/10XP
|
||||
|
||||
### Wave финал главы
|
||||
- **Итоговая шпаргалка** с формулами
|
||||
- **5-7 интегрированных боссов** (синтез тем главы)
|
||||
- **Ачивка «Мастер главы N»** + 50 XP + confetti
|
||||
- **Кнопка** перехода к следующей главе
|
||||
|
||||
---
|
||||
|
||||
## 📊 Оценка объёма
|
||||
|
||||
| Глава | § | LOC |
|
||||
|-------|---|-----|
|
||||
| Phase 0: skeleton + phys.js | — | 2500 |
|
||||
| Глава 1 МКТ (§§1-10) | 10 | 13 000 |
|
||||
| Глава 2 Термодинамика (§§11-15) | 5 | 6 500 |
|
||||
| Глава 3 Электростатика (§§16-24) | 9 | 12 000 |
|
||||
| Глава 4 Пост. ток (§§25-26) | 2 | 3 000 |
|
||||
| Глава 5 Магнетизм (§§27-33) | 7 | 10 500 |
|
||||
| Глава 6 Ток в средах (§§34-37) | 4 | 5 500 |
|
||||
| Phase 7 финал курса | — | 1 500 |
|
||||
| **Итого** | **37** | **~54 500 LOC** |
|
||||
|
||||
Это **больше**, чем Геометрия 11 (~30K) или Алгебра 9 (~30K). Самый объёмный курс.
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Критические правила (опыт всех 10 предыдущих учебников)
|
||||
|
||||
### ❌ НЕ делать
|
||||
- **Slider'ы в пиксельных диапазонах** (40..150). Только в реальных физических единицах с правильным масштабом отрисовки.
|
||||
- **Подписи без единиц измерения** ($p = 100$ — это что? Па? атм?). Всегда: $p = 1$ атм $= 10^5$ Па.
|
||||
- **Эмодзи** (`⚠`, `🌡️`, `🔋`). Только inline SVG.
|
||||
- **Одиночный `\` перед буквой** в JS template literals: `\dfrac`, `\sin`, `\vec`. ВСЕГДА `\\dfrac`.
|
||||
- **Сырой KaTeX в `<option>`** — KaTeX там не рендерится. Только unicode-текст в `<option>`.
|
||||
- **Эталонные значения вместо реальных** — в задачах используй $\pi = 3.14$, $g = 10$ м/с², $k_B = 1.38 \cdot 10^{-23}$ Дж/К ровно.
|
||||
- **Symbol `\degree`** не существует в KaTeX. Используй `^\\circ` для °.
|
||||
- **Бесконечные симуляции без паузы** — всегда кнопка «Пауза / Сброс» и `cancelAnimationFrame` при unmount.
|
||||
|
||||
### ✅ Обязательно
|
||||
- **Все единицы СИ в формулах** — никаких ватт в задаче без обозначения «Вт».
|
||||
- **Snap-точки в slider'ах** для эталонных значений: $T = 273$ К, $p = 1$ атм, $g = 10$ м/с².
|
||||
- **Цветовая кодировка** едина по всем § (заряд+/−, поле $E$/$B$, сила, скорость, ток).
|
||||
- **KaTeX-аудит** через `node` после каждого Wave (паттерн `[^\\]\\[a-z]{2,}` в JS-блоках).
|
||||
- **JS parse-check** через `new Function(scriptBody)` после каждого Wave.
|
||||
- **Авторов нет** — в hub footer'е только «Интерактивный учебник «Физика — 10 класс» · LearnSpace» (как сделали для остальных).
|
||||
- **Симуляции** должны иметь паузу, перезапуск, и быть **физически корректными**: реальная скорость, реальная масса, реальные коэффициенты.
|
||||
|
||||
---
|
||||
|
||||
## 🎬 Запуск
|
||||
|
||||
**Phase 0**: skeleton 6 ch-файлов + hub + миграция + новый модуль `phys.js` со всеми physics-хелперами.
|
||||
|
||||
Палитра hub: **yellow/amber** (классическая для физики) — `--pri:#ca8a04` (yellow-600), `--pri-d:#a16207` (yellow-700), `--pri-soft:#fef3c7`. Header gradient: `linear-gradient(110deg,#713f12 0%,#ca8a04 55%,#fde047 100%)`. Эта палитра отличается от Алгебры 11 (teal) и Геометрии 11 (cyan).
|
||||
|
||||
После Phase 0 → Phase 1 Wave 1 (§1 МКТ + §2 масса молекул).
|
||||
|
||||
После завершения всех 8 Phase Физика 10 — план одного 10-класса завершён (можно потом план Алгебры 10 + Геометрии 10).
|
||||
@@ -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-классов завершён.
|
||||
@@ -0,0 +1,363 @@
|
||||
# План реализации: Химия 9 (Беларусь) — интерактивный наглядный учебник
|
||||
|
||||
> Цель: превратить существующий «текстовый» каркас `chemistry_9.html` в **максимально
|
||||
> полный, интерактивный и наглядный** учебник по всей программе 9 класса —
|
||||
> на уровне качества уже сделанных Физики 9 / Алгебры 9 / Геометрии 9, но с
|
||||
> химической спецификой (молекулы, уравнения реакций, ионы, осадки, газы, симуляторы).
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Источник
|
||||
|
||||
| Параметр | Значение |
|
||||
|----------|----------|
|
||||
| Книга | `Himiya_Shimanovich_9kl_rus_2025.pdf` |
|
||||
| Авторы | Шиманович И. Е., Василевская Е. И., Зураев А. В., Красицкий В. А., Сечко О. И. |
|
||||
| Под ред. | И. Е. Шимановича |
|
||||
| Изд. | Минск, «Адукацыя і выхаванне», 2025 (2-е изд., переработанное), 288 с. |
|
||||
| ISBN | 978-985-34-0189-9 |
|
||||
| Структура | **4 главы, 53 §, 6 лабораторных опытов, 4 практические работы** |
|
||||
| Справочные таблицы | ПСХЭ Менделеева, таблица растворимости, ряд активности металлов (форзацы) |
|
||||
|
||||
PDF лежит в `G:\Dev\Тесты\Методички\тест_6 класс\Книги\` (есть и издание 2019 г.).
|
||||
|
||||
---
|
||||
|
||||
## 📗 ПОЛНАЯ КАРТА СОДЕРЖАНИЯ (53 §)
|
||||
|
||||
Колонка **«Интерактив»** — главный наглядный элемент, который страница ДОЛЖНА давать
|
||||
сверх текста (минимум 1 «звёздный» виджет на §; полный набор виджетов — ниже в стандарте).
|
||||
|
||||
### ГЛАВА 1. Повторение курса 8 класса (§§1–3) — *amber*
|
||||
| § | Тема | Ключ | Интерактив (звёздный виджет) |
|
||||
|---|------|------|------------------------------|
|
||||
| §1 | Основные классы неорганических веществ | оксиды/кислоты/основания/соли, генетическая связь | **Классификатор**: drag формулы → класс; граф генетических переходов |
|
||||
| §2 | Строение атома и периодический закон | $Z$, $p/n/e$, $1s^22s^2…$, периодичность | **Интерактивная ПСХЭ** (`periodic`) + конструктор электронной конфигурации |
|
||||
| §3 | Химическая связь | ионная / ковалентная (полярн./неполярн.) / металлическая, ЭО | **Визуализатор связи**: slider ЭО → тип связи; диполь, электронные пары |
|
||||
|
||||
### ГЛАВА 2. Растворы. Теория электролитической диссоциации (§§4–11) — *blue*
|
||||
| § | Тема | Ключ | Интерактив |
|
||||
|---|------|------|------------|
|
||||
| §4 | Растворы как смеси веществ | раствор = растворитель + растворённое в-во | Анимация растворения (частицы) |
|
||||
| §5 | Качественные характеристики состава растворов | насыщ./ненасыщ./пересыщ., растворимость, кривые растворимости | **График растворимости** $s=f(t)$ с подвижной точкой |
|
||||
| §6 | Количественные характеристики. Массовая доля | $w=\dfrac{m_{в-ва}}{m_{р-ра}}$, $c=\dfrac{n}{V}$ | **Калькулятор раствора** (w, c, разбавление, смешение) |
|
||||
| §7 | Электролитическая диссоциация в растворах | электролиты/неэлектролиты, гидратация ионов | **Анимация диссоциации** NaCl/HCl в воде |
|
||||
| §8 | Диссоциация кислот, оснований и солей | $HCl\to H^++Cl^-$, ступенчатая дисс. | Конструктор уравнений диссоциации |
|
||||
| §9 | Реакции ионного обмена | условия необратимости: ↓ ↑ H₂O | **Предсказатель РИО** + конвертер молек.↔полн.ион.↔сокр.ион. |
|
||||
| §10 | Свойства кислот/оснований/солей с точки зрения ТЭД | ионные сущности реакций | Матрица реакций «реагент × реагент» |
|
||||
| §11 | Вода и растворы в жизни человека | значение воды, растворы в быту | Инфографика-исследование |
|
||||
|
||||
**Практическая работа 1** (после §6): приготовление раствора с заданной $w$.
|
||||
**Практическая работа 2** (после §9): реакции ионного обмена.
|
||||
|
||||
### ГЛАВА 3. Неметаллы (§§12–39) — *cyan / teal*
|
||||
| § | Тема | Ключ | Интерактив |
|
||||
|---|------|------|------------|
|
||||
| §12 | Общая характеристика неметаллов | положение в ПСХЭ, ЭО, окислители | Подсветка неметаллов в ПСХЭ |
|
||||
| §13 | Простые вещества неметаллы | аллотропия (O₂/O₃, алмаз/графит/фуллерен) | **3D-модели аллотропов** (biochem 3D) |
|
||||
| §14 | Водород | получение, св-ва, $H_2+O_2$ | Сборка прибора получения H₂ |
|
||||
| §15 | Галогены | $F,Cl,Br,I$, окислит. способность ↓ | **Ряд активности галогенов** + вытеснение |
|
||||
| §16 | Хлороводород. Соляная кислота | $HCl$, свойства | Диссоциация + реакции HCl |
|
||||
| §17 | Хлориды. Применение HCl и хлоридов | качеств. реакция на $Cl^-$ | **Качественная реакция** AgCl↓ (анимация осадка) |
|
||||
| §18 | Кислород — элемент и простое вещество | $O_2$, окисление, горение | Симулятор горения |
|
||||
| §19 | Кислород в природе. Получение и применение | круговорот, способы получения | Инфографика круговорота |
|
||||
| §20 | Сера — элемент и простое вещество | аллотропия серы, $S+Me$ | 3D-модель S₈ |
|
||||
| §21 | Сероводород | $H_2S$, св-ва, сульфиды | Реакции H₂S |
|
||||
| §22 | Оксид серы(IV) и оксид серы(VI) | $SO_2, SO_3$, кислотные оксиды | Кислотные дожди (инфографика) |
|
||||
| §23 | Серная кислота | $H_2SO_4$ конц./разб., безопасность | **Анимация разбавления** (кислоту в воду!) |
|
||||
| §24 | Реакции получения серной кислоты. Практический выход | контактный способ, $\eta$ | Калькулятор практического выхода |
|
||||
| §25 | Сульфаты. Применение | качеств. реакция на $SO_4^{2-}$ | **Качественная реакция** BaSO₄↓ |
|
||||
| §26 | Азот — элемент и простое вещество | $N_2$, тройная связь | 3D-модель N₂ |
|
||||
| §27 | Аммиак | $NH_3$, донорно-акц. связь | **Фонтан аммиака** (анимация) |
|
||||
| §28 | Соли аммония | $NH_4^+$, разложение | Качеств. реакция на $NH_4^+$ |
|
||||
| §29 | Азотная кислота | $HNO_3$, особые окислит. св-ва | Реакции с металлами (без H₂) |
|
||||
| §30 | Нитраты. Применение HNO₃ и нитратов | разложение нитратов, селитры | Карта разложения нитратов |
|
||||
| §31 | Фосфор — элемент и простое вещество | аллотропия (бел./красн.) | 3D-модель P₄ |
|
||||
| §32 | Кислородсодержащие соединения фосфора | $P_2O_5, H_3PO_4$, фосфаты | Ступенчатая диссоциация H₃PO₄ |
|
||||
| §33 | Минеральные удобрения | N/P/K, аммофос, суперфосфат | **NPK-калькулятор** удобрений |
|
||||
| §34 | Углерод — элемент и простое вещество | аллотропия (алмаз/графит/фуллерен), адсорбция | **3D-модели** + адсорбция |
|
||||
| §35 | Оксиды углерода | $CO$ (яд), $CO_2$ | Свойства CO/CO₂ |
|
||||
| §36 | Угольная кислота и её соли | $H_2CO_3$, карбонаты/гидрокарбонаты, жёсткость | **Качеств. реакция** на $CO_3^{2-}$ (вскипание) + сталактиты |
|
||||
| §37 | Кремний — элемент и простое вещество | $Si$, полупроводник | 3D-решётка (как алмаз) |
|
||||
| §38 | Оксид кремния(IV). Кремниевая кислота | $SiO_2$, силикаты | Структура SiO₂ |
|
||||
| §39 | Строительные материалы | стекло, керамика, цемент, бетон | Конструктор «варки стекла» |
|
||||
|
||||
**Лаб. опыты**: 1 — на $Cl^-$ (после §17), 2 — на $SO_4^{2-}$ (после §25), 3 — на $NH_4^+$ (после §28), 4 — на $CO_3^{2-}$ (после §36).
|
||||
**Практическая работа 3** (после §39): решение экспериментальных задач «Неметаллы».
|
||||
|
||||
### ГЛАВА 4. Металлы (§§40–53) — *deep-orange / rose*
|
||||
| § | Тема | Ключ | Интерактив |
|
||||
|---|------|------|------------|
|
||||
| §40 | Металлы. Общая характеристика элементов | положение в ПСХЭ, $Me^0-ne^-\to Me^{n+}$ | Подсветка металлов в ПСХЭ |
|
||||
| §41 | Простые вещества металлы. Физические свойства. Сплавы | металлич. связь, «электронный газ», сплавы | **Модель металлич. связи** + конструктор сплавов |
|
||||
| §42 | Общие химические свойства металлов | ряд активности, $Me$+кислота/соль/вода | **Интерактивный ряд активности** (предсказание реакции) |
|
||||
| §43 | Щелочные металлы | $Li,Na,K…$, реакция с водой | Анимация $Na+H_2O$ |
|
||||
| §44 | Важнейшие соединения натрия и калия | $NaOH, Na_2CO_3$, применение | Применение (инфографика) |
|
||||
| §45 | Электролиз расплавов солей | катод/анод, $2NaCl\to2Na+Cl_2$ | **Симулятор электролиза** (`electrolysis`) |
|
||||
| §46 | Магний и щёлочноземельные металлы | $Mg,Ca,Sr,Ba$, цвета пламени | **Цвета пламени** (интерактив) |
|
||||
| §47 | Важнейшие соединения магния и кальция | $CaO, Ca(OH)_2, CaCO_3$, гипс | Превращения Ca-соединений |
|
||||
| §48 | Качественное обнаружение ионов Ca²⁺/Ba²⁺. Жёсткость воды | $Ba^{2+}+SO_4^{2-}$, жёсткость, умягчение | **Симулятор жёсткости воды** + устранение |
|
||||
| §49 | Алюминий | $Al$, амфотерность, алюмотермия | Реакции Al (амфотерность) |
|
||||
| §50 | Оксид и гидроксид алюминия. Соли алюминия | $Al_2O_3, Al(OH)_3$ амфотерны | **Амфотерность** (реакция и с кислотой, и со щёлочью) |
|
||||
| §51 | Железо. Физические и химические свойства. Коррозия | $Fe$, $Fe^{2+}/Fe^{3+}$, ржавление | **Симулятор коррозии** |
|
||||
| §52 | Важнейшие соединения железа. Качественные реакции на ионы железа | $FeO/Fe_2O_3$, $Fe^{2+}/Fe^{3+}$ обнаружение | **Качеств. реакции** на $Fe^{2+}, Fe^{3+}$ |
|
||||
| §53 | Получение железа. Применение | доменная печь, чугун/сталь | **Анимация доменной печи** |
|
||||
|
||||
**Лаб. опыт 5** (после §48): качеств. реакции на $Ca^{2+}/Ba^{2+}$.
|
||||
**Лаб. опыт 6** (после §52): получение и окисление $Fe(OH)_2$.
|
||||
**Практическая работа 4** (после §52): решение экспериментальных задач «Металлы».
|
||||
|
||||
**Итого**: 53 §, 4 главы, 6 лаб. опытов, 4 практические работы.
|
||||
|
||||
---
|
||||
|
||||
## 🔍 ТЕКУЩЕЕ СОСТОЯНИЕ `chemistry_9.html` (gap-анализ)
|
||||
|
||||
Файл уже существует: `frontend/textbooks/chemistry_9.html` (~860 КБ, 10 659 строк).
|
||||
|
||||
**Что есть ✅**
|
||||
- Скелет страницы по образцу физики: header, para-selector (карточки секций), табы, sidebar
|
||||
- Все 53 § как `data-para="p1"..."p53"` (структура совпадает с реальной книгой)
|
||||
- Amber-палитра + dark mode, адаптив
|
||||
- ~58 маркеров `boss/quiz/тренаж` — есть зачатки тренажёров
|
||||
- Автоначисление XP через `/js/textbook-xp-widget.js` (+5 XP за первый клик по §)
|
||||
- Прогресс/закладки через `/js/textbook-tracker.js` + БД (`textbooks`, `textbook_progress`, `textbook_bookmarks`)
|
||||
|
||||
**Чего НЕТ ❌ (главный объём работы)**
|
||||
- **Наглядность**: всего **12 `<svg>` на весь файл**, **0 `<canvas>`**, **0 симуляторов** (`openSim` не вызывается ни разу)
|
||||
- **0 молекулярных моделей** (хотя `biochem-core.js` умеет 2D/3D шаростержневые)
|
||||
- **0 рендера уравнений реакций** (нет стрелок реакций `→ ⇌ ↑ ↓ →[t]`, коэффициентов, состояний)
|
||||
- **0 глоссария** (в других учебниках есть)
|
||||
- Таблица растворимости и ряд активности — **только картинки на форзаце, не интерактивны**
|
||||
- Заголовок/водяной знак содержат артефакты от копирования шаблона «МЕТАЛЛЫ»; title `«§1–60»` — **устарел** (реально 53 §)
|
||||
- Секционная группировка карточек (`psel-c1..c6`) не выровнена на 4 главы книги
|
||||
|
||||
**Вывод**: каркас переиспользуем, но содержательно страница «текстовая». План = наполнить
|
||||
её химическим интерактивом и наглядностью + исправить метаданные.
|
||||
|
||||
---
|
||||
|
||||
## ⚗️ ХИМИЧЕСКИЙ СТАНДАРТ КАЧЕСТВА
|
||||
|
||||
### A. Движки и переиспользуемые активы
|
||||
|
||||
| Что нужно | Берём из | Файл |
|
||||
|-----------|----------|------|
|
||||
| Парсинг формул, молярная масса, формула Хилла | biochem-core | `frontend/js/biochem-core.js` |
|
||||
| 2D/3D шаростержневые модели, VSEPR-геометрия | biochem-core | `frontend/js/biochem-core.js` |
|
||||
| Интерактивная ПСХЭ | sim `periodic` | реестр `frontend/js/labs/` |
|
||||
| Электролиз | sim `electrolysis` | реестр |
|
||||
| Титрование | sim `titration` | реестр |
|
||||
| Качественный анализ | sim `qualanalysis` | реестр |
|
||||
| Растворы/концентрации | sim `solutions` | реестр |
|
||||
| Стехиометрия | sim `stoichiometry` | реестр |
|
||||
| Песочница реакций | sim `chemsandbox` | реестр |
|
||||
|
||||
Симуляторы монтируются как в других страницах: контейнер `<div id="sim-<id>"></div>` +
|
||||
вызов `openSim('<id>')` (или прямой mount через `window.LabRegistry`).
|
||||
|
||||
### B. Новый общий хелпер `/js/chem9_svg.js` (по образцу `geom7_svg.js`, `alg10_svg.js`)
|
||||
|
||||
Чисто химические примитивы, которых нет в biochem-core:
|
||||
|
||||
```js
|
||||
// 1. Рендер уравнения реакции: коэффициенты, состояния, стрелки, условия над стрелкой
|
||||
// chemEq('2Na + 2H2O -> 2NaOH + H2^', {cond:'', arrow:'->'}) → HTML с верхн./нижн. индексами, ↑↓, ⇌, →[t°]
|
||||
const chemEq = (src, opts={}) => { /* токенизация формул, KaTeX-подобный рендер */ };
|
||||
|
||||
// 2. Ион с зарядом: ionLabel('SO4', -2) → 'SO₄²⁻'
|
||||
const ionLabel = (formula, charge) => { /* нижние индексы + надстрочный заряд */ };
|
||||
|
||||
// 3. Пробирка с осадком / газом / окраской (SVG-анимация)
|
||||
const testTube = ({fill, precipitate, gas, color, label}) => { /* svg */ };
|
||||
|
||||
// 4. Орбитальная диаграмма (стрелки в клетках): orbitalDiagram('1s2 2s2 2p6 3s2 3p2')
|
||||
const orbitalDiagram = (config) => { /* svg клетки + ↑↓ */ };
|
||||
|
||||
// 5. Интерактивная таблица растворимости (виджет с подсветкой пары катион×анион)
|
||||
const solubilityTable = (mount, {highlight}) => { /* P/Н/М/— из форзаца */ };
|
||||
|
||||
// 6. Интерактивный ряд активности металлов (drag/клик → предсказание реакции)
|
||||
const activitySeries = (mount, opts) => { /* K Ca Na Mg Al Zn Fe ... Au */ };
|
||||
|
||||
// 7. Мини-ПСХЭ с подсветкой (элемент/группа/период/семейство)
|
||||
const miniPeriodic = (mount, {highlight, onClick}) => { /* 118 элементов */ };
|
||||
|
||||
// 8. Индикатор + шкала pH (лакмус/фенолфталеин/метилоранж)
|
||||
const indicatorScale = (mount, {ph, indicator}) => { /* цвет полоски */ };
|
||||
|
||||
// 9. Анимация диссоциации/растворения (частицы ионов разлетаются)
|
||||
const dissociationAnim = (mount, {salt}) => { /* canvas/SVG-частицы */ };
|
||||
```
|
||||
|
||||
Молекулы (структурные/шаростержневые/3D) — **через `biochem-core.js`**, не дублировать.
|
||||
|
||||
### C. Правила рендера химии (обязательны с §1)
|
||||
|
||||
1. **Формулы веществ** — нижние индексы для атомов ($H_2O$, $CaCO_3$), верхние для зарядов ионов ($SO_4^{2-}$); единый рендер через `chemEq`/`ionLabel`, не «сырой» текст.
|
||||
2. **Уравнения реакций** — всегда сбалансированы; стрелки: `=`/`→` (необратимая), `⇌` (обратимая), `↑` (газ), `↓` (осадок), условия над стрелкой ($t$, $\text{кат.}$, $\text{эл.ток}$).
|
||||
3. **Состояние** — для качественных реакций обязательно показывать признак: цвет осадка, пузырьки газа, изменение окраски индикатора (через `testTube`/`indicatorScale`).
|
||||
4. **Ионные уравнения** — для §9–10 и всех качественных реакций давать тройку: молекулярное → полное ионное → сокращённое ионное (виджет-конвертер).
|
||||
5. **Молекулярные модели** — структурная формула + 3D (biochem-core); для каждого изучаемого простого вещества/важного соединения хотя бы 1 модель.
|
||||
6. **Цвета — химически достоверные**: осадки ($AgCl$ белый, $Cu(OH)_2$ голубой, $Fe(OH)_3$ бурый, $Fe(OH)_2$ зеленоватый), пламя ($Ca$ кирпично-красный, $Sr$ карминовый, $Ba$ жёлто-зелёный, $Na$ жёлтый, $K$ фиолетовый).
|
||||
7. **Безопасность** — где уместно (разбавление $H_2SO_4$, ядовитость $CO$, $H_2S$) — заметка-«скрепка» с предупреждением.
|
||||
8. **KaTeX-эскейпы** — в JS-шаблонах двойной backslash (`\\to`, `\\downarrow`, `\\rightleftharpoons`).
|
||||
9. **Drag/слайдеры** — `window`-listeners + `{passive:false}` + state ВЫШЕ `redraw()` (как в стандарте геометрии), `touch-action:none` на draggable SVG/canvas.
|
||||
10. **Без эмоджи** — только inline SVG `.ic`/`.ico` (правило проекта).
|
||||
|
||||
### D. Типы интерактивов по химическим темам
|
||||
|
||||
| Тип темы | Интерактив |
|
||||
|----------|------------|
|
||||
| Строение атома / ПСХЭ (§2, 12, 40) | `miniPeriodic`, `orbitalDiagram`, sim `periodic` |
|
||||
| Химическая связь (§3) | slider ЭО → тип связи, диполь, e-пары |
|
||||
| Растворы (§4–6) | калькулятор $w$/$c$/разбавления, график растворимости, sim `solutions` |
|
||||
| Диссоциация / РИО (§7–10) | `dissociationAnim`, конвертер ионных уравнений, `solubilityTable` |
|
||||
| Аллотропия (§13, 20, 31, 34, 37) | 3D-модели biochem-core |
|
||||
| Качественные реакции (§17, 25, 28, 36, 48, 52) | `testTube` + ионное уравнение + признак |
|
||||
| Кислоты/основания (§16, 23, 29, 32) | `indicatorScale`, ступенчатая диссоциация |
|
||||
| Ряд активности / свойства металлов (§42, 43, 49) | `activitySeries`, предсказатель реакции |
|
||||
| Электролиз (§45) | sim `electrolysis` |
|
||||
| Окисл.-восст. / горение (§14, 18) | анимация горения, баланс ОВР |
|
||||
| Производство (§24, 39, 45, 53) | пошаговые схемы (контактный способ, варка стекла, доменная печь) |
|
||||
| Удобрения / прикладное (§33, 44, 47, 11) | калькуляторы, инфографика |
|
||||
|
||||
---
|
||||
|
||||
## 📦 СТРУКТУРА КАЖДОГО § (стандарт наполнения)
|
||||
|
||||
Каждый § после доработки содержит:
|
||||
|
||||
**Теория (3–4 карточки):**
|
||||
- `theory` — основное определение/понятие + наглядная SVG/модель
|
||||
- `rule` — ключевая закономерность/формула (рамка)
|
||||
- `example` — разобранный пример (реакция/расчёт) с пошаговым рендером
|
||||
- (для прикладных §) `apply` — применение/значение (инфографика)
|
||||
|
||||
**Интерактивы (4–6 на §):**
|
||||
1. **Звёздный виджет** темы (из карты содержания выше)
|
||||
2. **Конструктор/симулятор** (slider / drag / sim из реестра)
|
||||
3. **Калькулятор** (молярная масса, $w$, выход, по уравнению) — где применимо
|
||||
4. **DnD-сортер / классификатор** (классы веществ, тип связи, признак реакции)
|
||||
5. **Тренажёр** — 5 задач с inline-наглядностью (формула/уравнение/модель в условии)
|
||||
6. **Босс §** — 4 интеграционные задачи (+5 XP каждая)
|
||||
|
||||
**Дополнительно:**
|
||||
- Пополнение **глоссария** (термины §)
|
||||
- **Вопросы и задания** из учебника (адаптированные, с проверкой)
|
||||
- jsdom-тест страницы проходит
|
||||
|
||||
**Финал главы:**
|
||||
- **Итоговая шпаргалка** — mini-cards (формула/реакция/иконка) по каждому §
|
||||
- **Карта связей** — SVG-граф понятий главы (генетические связи веществ)
|
||||
- **7 интегрированных боссов** (каждый ≥2 темы, +10 XP)
|
||||
- **Achievement** «Мастер главы N» (+50 XP, confetti)
|
||||
- Кнопка перехода к следующей главе
|
||||
|
||||
---
|
||||
|
||||
## 🚀 ПОРЯДОК РЕАЛИЗАЦИИ (по фазам)
|
||||
|
||||
### Phase 0 — Фундамент
|
||||
- Исправить метаданные `chemistry_9.html`: `<title>Химия 9 — §1–53`, убрать артефакт «МЕТАЛЛЫ» в water-mark/CSS, починить кодировку заголовков (UTF-8).
|
||||
- Перегруппировать карточки para-selector на **4 главы** книги (цвета: I amber, II blue, III teal/cyan, IV deep-orange).
|
||||
- Создать `/js/chem9_svg.js` с хелперами A–B (заглушки → реализация по мере фаз).
|
||||
- Подключить `biochem-core.js` и нужные симуляторы на страницу.
|
||||
- **Миграция БД** (следующий номер после `040_content_access.sql` → `041_chemistry9_fix.sql`): обновить запись `chemistry-9` — `para_count = 53`, корректные `title`/`author`/`description`, `color='amber'`. (Слаг и html_path уже есть из migration 004.)
|
||||
- jsdom-тест-каркас для страницы.
|
||||
|
||||
### Phase 1 — Глава 1 «Повторение» (§§1–3) — разогрев
|
||||
Простые темы, но закладываем 3 базовых движка: `miniPeriodic`, `orbitalDiagram`, визуализатор связи. Эти виджеты переиспользуются во всех 4 главах.
|
||||
|
||||
### Phase 2 — Глава 2 «Растворы. ТЭД» (§§4–11) + ПР1, ПР2
|
||||
Самая «расчётно-логическая». Закладываем `solubilityTable`, конвертер ионных уравнений, `dissociationAnim`, калькулятор раствора, sim `solutions`. Эти движки критичны для всей химии 9.
|
||||
|
||||
### Phase 3 — Глава 3 «Неметаллы» (§§12–25): галогены, кислород, сера + лаб.1, лаб.2
|
||||
SVG/модели-тяжёлая. 3D-аллотропы (biochem-core), первые качественные реакции (`testTube`: $AgCl↓$, $BaSO_4↓$), горение, безопасность $H_2SO_4$.
|
||||
|
||||
### Phase 4 — Глава 3 «Неметаллы» (§§26–39): азот, фосфор, углерод, кремний + лаб.3, лаб.4, ПР3
|
||||
Фонтан аммиака, NPK-калькулятор, качеств. реакция на $CO_3^{2-}$, сталактиты, варка стекла/цемент.
|
||||
|
||||
### Phase 5 — Глава 4 «Металлы» (§§40–48): общие свойства, щелочные, ЩЗМ + лаб.5
|
||||
`activitySeries`, sim `electrolysis`, цвета пламени, симулятор жёсткости воды, качеств. на $Ca^{2+}/Ba^{2+}$.
|
||||
|
||||
### Phase 6 — Глава 4 «Металлы» (§§49–53): алюминий, железо + лаб.6, ПР4
|
||||
Амфотерность $Al(OH)_3$, качеств. на $Fe^{2+}/Fe^{3+}$, симулятор коррозии, анимация доменной печи.
|
||||
|
||||
### Phase 7 — Финалы глав + общий финал учебника
|
||||
- Шпаргалки и карты связей по каждой главе
|
||||
- Интегрированные боссы + achievements
|
||||
- **Большой финал**: генетическая карта «неметаллы ↔ металлы ↔ соли», итоговый босс-квест, ачивка «Химик 9 класса»
|
||||
- Глоссарий собран целиком, связан `[[ссылками]]`
|
||||
|
||||
### Phase 8 — Качество и админка
|
||||
- Полный прогон jsdom-тестов (каждый § — builder не stub)
|
||||
- Аудит KaTeX/`chemEq`-эскейпов, баланса всех уравнений
|
||||
- Синхронизация с админкой (если симуляторы добавлялись в `lab.html` → обновить `ADMIN_SIMS` в `admin.html` — правило проекта)
|
||||
- Проверка доступа по классам/ученикам (`contentAccess`, `/api/access`)
|
||||
|
||||
> Рекомендуемый темп: внутри фазы — по 2–3 § за «волну», каждая волна = commit + проходящий jsdom-тест.
|
||||
|
||||
---
|
||||
|
||||
## 🗄️ ИНТЕГРАЦИЯ С ПРОЕКТОМ
|
||||
|
||||
| Точка | Действие |
|
||||
|-------|----------|
|
||||
| **БД каталог** | `textbooks` уже содержит `chemistry-9` (migration 004). Миграция `041` — поправить `para_count=53`, title/description. |
|
||||
| **Прогресс/XP** | Автоматически: `textbook-xp-widget.js` (+5 XP/§), `textbook-tracker.js`, `LS.xp`. Доп. XP за боссов — по образцу `phys7_ch1_widgets.js`. |
|
||||
| **Симуляторы** | Реестр `frontend/js/labs/_register-all.js` + `lab-glue.js`. Химические sim уже зарегистрированы (`periodic`, `electrolysis`, `titration`, `qualanalysis`, `solutions`, `stoichiometry`, `chemsandbox`). |
|
||||
| **Молекулы** | `biochem-core.js` (парсинг, молярная масса, 2D/3D, VSEPR). |
|
||||
| **Бэкенд** | Роуты готовы: `backend/src/routes/textbooks.js` (catalog/progress/bookmarks). Доступ: `backend/src/services/contentAccess.js`. |
|
||||
| **Глоссарий** | Реализовать виджет на странице (общего нет) — всплывающие определения по терминам. |
|
||||
| **Тесты** | `cd backend && npm test` (jsdom). На каждый § — тест: страница строится, builder не stub, уравнения сбалансированы. |
|
||||
| **Админка** | Если добавляются новые sim в `lab.html` → синхронно обновить `ADMIN_SIMS` в `admin.html`. |
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ КРИТИЧЕСКИЕ ПРАВИЛА
|
||||
|
||||
### ❌ НЕ делать
|
||||
- Не оставлять «сырые» формулы текстом — только через `chemEq`/`ionLabel`/KaTeX.
|
||||
- Не публиковать несбалансированные уравнения (аудит баланса перед commit).
|
||||
- Не дублировать молекулярный движок — использовать `biochem-core.js`.
|
||||
- Не использовать `setPointerCapture` (теряется после `innerHTML`-replace) → `window`-listeners + state-flag.
|
||||
- `\to`, `\downarrow`, `\rightleftharpoons` без удвоения backslash в JS-шаблонах.
|
||||
- Slider-диапазоны за пределы химически возможного (концентрации, температуры).
|
||||
- Эмоджи — запрещены; только inline SVG `.ic`.
|
||||
- Grep tool — запрещён; поиск только `ast-index`.
|
||||
|
||||
### ✅ Обязательно
|
||||
- Каждый commit → jsdom-тест 100% pass.
|
||||
- Аудит баланса уравнений + KaTeX-эскейпов после каждой волны.
|
||||
- Качественная реакция = уравнение (молек.+ионное) **+ видимый признак** (`testTube`/индикатор).
|
||||
- Цвета осадков/пламени — химически достоверные.
|
||||
- Все builder-функции в конце финальной волны главы — НЕ stub'ы.
|
||||
- Коммитить только изменённые файлы (не `git add -A`), сразу push (правило CLAUDE.md).
|
||||
|
||||
---
|
||||
|
||||
## 📊 Оценка объёма
|
||||
|
||||
| Глава | § | Лаб/ПР | Ожидаемый LOC |
|
||||
|-------|---|--------|---------------|
|
||||
| Гл.1 Повторение | 3 | — | ~3 500 (+движки ПСХЭ/орбитали/связь) |
|
||||
| Гл.2 Растворы. ТЭД | 8 | ПР1, ПР2 | ~9 000 (+`solubilityTable`, ионные ур-я, `solutions`) |
|
||||
| Гл.3 Неметаллы | 28 | 4 лаб, ПР3 | ~28 000 (модели, качеств. реакции, безопасность) |
|
||||
| Гл.4 Металлы | 14 | 2 лаб, ПР4 | ~16 000 (ряд активности, электролиз, коррозия, доменная печь) |
|
||||
| Финалы глав + общий | — | — | ~5 000 |
|
||||
| `/js/chem9_svg.js` хелперы | — | — | ~2 500 |
|
||||
| **Итого** | **53** | **6 лаб + 4 ПР** | **~64 000 LOC** |
|
||||
|
||||
Существующий каркас (~10 700 строк) переиспользуется; основной прирост — интерактив,
|
||||
наглядность и движки.
|
||||
|
||||
---
|
||||
|
||||
## 🎬 Запуск
|
||||
|
||||
**Phase 0**: чистка метаданных `chemistry_9.html` + перегруппировка на 4 главы +
|
||||
`/js/chem9_svg.js` (скелет) + подключение `biochem-core.js`/симуляторов + миграция `041`.
|
||||
**Phase 1**: Глава 1 (§§1–3) — закладываем `miniPeriodic`, `orbitalDiagram`, визуализатор связи.
|
||||
|
||||
Дальше — последовательно по главам (Phase 2 → 6), затем финалы (Phase 7) и качество (Phase 8).
|
||||
Reference in New Issue
Block a user