- backend/uploads/avatars/preset_01..27.png — иллюстрированные персонажи
- POST /api/avatar/preset — мгновенная установка без модерации
- GET /api/avatar/presets — список доступных пресетов
- profile.html: галерея пресетов в модалке аватара, доступна студенту/учителю/админу
- кастомная загрузка с модерацией остаётся только для студентов
Кнопка «Рисовать» в тулбаре учебника — переиспользует существующий
annotate-режим доски (так же, как для симуляций). Переключатель учителя
транслируется студентам через тот же SSE-канал /sim/annotate. При
закрытии учебника annotate-режим автоматически выключается.
Реализована вся глава 2 (был stub, теперь полноценный SPA):
violet тема (#7c3aed → #c4b5fd), 5 § + Финал.
§13 Корень n-й степени из числа a:
- SVG графиков y = x^n для n=2,3,4,5 на отрезке [-2.5; 2.5]
с линией y=4 показывающей различие чётных/нечётных n
- Таблица существования (чётное/нечётное n vs знак a)
- Уравнение x^n = a и число корней
- Интерактив 1: 'существует ли?' (6 да/нет)
- Интерактив 2: 'найди значение корня' (8 вычислений)
- Интерактив 3: 'сколько корней x^n = a' (6 заданий)
- Босс §13: 5 этапов
§14 Свойства корней n-й степени:
- HTML+KaTeX плакат '5 основных свойств' (произв., частное,
степень, сокращение, корень из корня)
- Подсветка важности: ⁿ√(a^n) = |a| для чётных, = a для нечётных
- Интерактив 1: вычисли через свойства (8 заданий)
- Интерактив 2: ⁿ√(a^n) с модулем (6 заданий)
- Босс §14: 5 этапов
§15 Применение свойств для преобразований:
- 4 алгоритма: вынесение, внесение, рационализация, сравнение
- Спойлер с сопряжёнными выражениями (a+b)(a-b)
- Интерактив 1: вынеси множитель (6 заданий)
- Интерактив 2: внеси множитель (5 заданий)
- Интерактив 3: рационализация (5 заданий)
- Босс §15: 5 этапов
§16 Функция y = ⁿ√x:
- 2 SVG графика (300x260 каждый): чётные n (²√x, ⁴√x, ⁶√x)
только для x≥0 + нечётные n (³√x, ⁵√x, ⁷√x) на всей оси
- Полная сравнительная таблица свойств D, E, монотонность,
чётность, нули для двух случаев
- Закономерности (точка (1,1), (-1,-1) для нечётных)
- Интерактив 1: сравни корни (6 заданий < / = / >)
- Интерактив 2: свойства функции (5 заданий)
- Босс §16: 5 этапов
§17 Иррациональные уравнения:
- Метод возведения в степень + объяснение посторонних корней
- Пример с подвохом: 2 корня после возведения, 1 истинный
- Эквивалентная система √f = g ⇔ {f = g², g ≥ 0}
- Метод замены переменной (4-степени корни в квадратные)
- Интерактив 1: простейшие (6 заданий с корнями или числом)
- Интерактив 2: 'сколько истинных корней?' (5 с проверкой)
- Босс §17: 6 этапов
Финал главы 2 — 4 интегрированных босса:
- Hero card с градиентом violet, 3 плашки-метки
- Общий прогресс-бар 'X / 4 побеждено'
- Босс 1 §13-§14: определение + свойства
- Босс 2 §15: преобразования
- Босс 3 §16: функция и график
- Босс 4 §17 + синтез: уравнения + смешанные
- Celebration 'МАГИСТР КОРНЕЙ' (скрытая) + ачивка
- Своё состояние в localStorage
XP до 200 за финал + ачивка root_master (+100 XP).
Файл вырос с 6 KB (stub) до 107 KB (1490 строк).
Глава 2 готова на 100%.
Учитель может выбрать любой активный учебник из каталога /api/textbooks
и открыть его в общем iframe для всех участников. По аналогии с симуляциями:
- Backend: контроллер classroom/textbook.js + 4 роута
(POST/DELETE /:id/textbook, /:id/textbook/nav, /:id/textbook/mode)
с SSE-событиями classroom_textbook_open|close|nav|mode
- Embed-режим /textbook/:slug?embed=1: сервер injectит CSS+JS-bridge
перед </head>, скрывая хедер/сайдбар и пересылая клики/скролл наверх
через postMessage (без правки 40+ HTML-учебников)
- Frontend (classroom.html): кнопка «Учебник» в header, пикер с
фильтрами по предмету, iframe-панель с режимами демо/свободно,
relay nav-событий учителя → всем студентам в demo-режиме
Проблемы старого рисунка:
- Метки 'P_α' и 'P_{2α}' рисовались как SVG <text>, а KaTeX
не обрабатывает SVG — фигурные скобки '{2α}' показывались как
литерал, выглядело как «P_{2α}»
- Угол 2α = 70° был слишком близко к оси y, метка P_{2α}
наезжала на цифру '1' оси y
- Подзаголовок 'α = 35°, 2α = 70°' тоже перекрывался
Что переделано:
- Углы изменены на textbook-стандарт: α = 30°, 2α = 60°.
Это даёт хорошо видимое разделение и удобные значения для
вспоминания формул
- Размер канваса увеличен до 380x360, радиус R=130 — больше
пространства для подписей
- Точки и подписи рисуются вручную (без c.point auto-label),
потому что нужно тонкое позиционирование чтобы не пересечь
'1' на оси y
- Подписи изменены на 'P(α)' и 'P(2α)' — скобки решают проблему
визуально (math-нотация) и не используют braces которые SVG
рисует литералом
- Подписи углов 'α' и '2α' расположены на биссектрисах секторов
(через формулу 48*cos(ang/2), 48*sin(ang/2)) — посередине
внутри своего сектора
- Усилены: размер шрифта 13, font-family Unbounded для контраста
с Inter в остальном тексте
- Жирность fill-цвета увеличена (rgba .22 → .30 для α сектора)
Заменены 3 SVG-плакаты (формул сложения, двойного аргумента,
сумма→произведение) на HTML-карточки с настоящим KaTeX-рендерингом.
Добавлен CSS-компонент .formula-plate с подкомпонентами:
- .formula-plate-head + цветовые варианты (teal/cyan/violet/green/amber)
→ плашка-заголовок с градиентом
- .formula-plate-title + .formula-plate-sub
→ крупный заголовок + курсивный подзаголовок
- .formula-plate-body + .formula-row + альтернативные цвета
→ строки формул с подсветкой
- .formula-section (янтарная вставка для tg)
- .formula-mnem (фиолетовая плашка с мнемоникой)
§10: 8 формул в HTML-плакате с teal-плашкой + янтарный блок 'Тангенсы'
§11: 3 формулы двойного аргумента отдельным плакатом ПЕРЕД SVG
с окружностью (которая теперь короче — без встроенного
формульного блока)
§12: 4 формулы в violet-плакате + фиолетовая плашка 'Мнемоника' со
списком правил
Все формулы теперь рендерятся настоящим KaTeX с дробями \dfrac,
правильными операторами \tg \sin \cos, греческими буквами
\alpha \beta, и индексами/степенями.
Реализованы 4 формуло-ёмких параграфа главы 1:
§9 Формулы приведения:
- SVG единичной окружности с 4 цветными четвертями и знаками
всех 4 функций в каждой (380x360, заголовочная плашка)
- Правило двух шагов с разбором примера cos(3π/2 − α) = −sin α
- Полная таблица 28 формул (4 функции × 7 видов аргумента)
- Интерактив 1: 8 заданий «приведи к острому»
- Интерактив 2: 8 заданий «вычисли значение»
- Босс §9: 5 этапов
§10 Сумма и разность углов:
- SVG-плакат с 8 формулами 580x280 (sin/cos зелёным+фиолетовым,
tg в отдельной янтарной плашке)
- Мнемоника: знаки совпадают в sin, чередуются в cos
- Спойлер с классическим доказательством для cos(α−β) через
теорему косинусов
- Применение к «нестандартным» углам (75°, 15°, 105°)
- Интерактив 1: 6 вычислений нестандартных углов
- Интерактив 2: 5 упрощений выражений
- Босс §10: 5 этапов
§11 Двойной аргумент:
- SVG окружности с углами α=35° и 2α=70° (одна над другой
с разными цветными секторами)
- Формулы sin 2α, cos 2α (три формы!), tg 2α
- Когда какую форму cos 2α использовать
- Формулы понижения степени sin²α, cos²α
- Интерактив 1: 6 заданий на вычисление через данную sin/cos α
- Интерактив 2: 5 упрощений с двойным углом
- Босс §11: 5 этапов
§12 Преобразование суммы в произведение:
- SVG-плакат с 4 формулами + мнемоника
- Применение к решению уравнения sin 3x + sin x = 0
- Применение для упрощения дробей
- Интерактив 1: 5 преобразований
- Интерактив 2: 4 задачи «сколько корней у sin x ± sin nx = 0»
- Босс §12: 4 этапа (этот § покороче)
Обновлены ACH_LABELS (+p9-p12_done), bumpProgress, BUILDERS,
SIDEBARS (4 шпаргалки), TIPS (4 подсказки).
Глава 1 теперь готова на 12 из 13 параграфов — остался
только финал главы (6 боссов).
Файл вырос со 160 KB до 221 KB (2189 → 2998 строк).
Переделаны 3 SVG в §8 — теперь это полноценные плакатные
визуализации с заголовками, формулами и цветовым кодированием:
sin x = a (400×430):
- Заголовочная плашка teal: 'УРАВНЕНИЕ: sin x = a' + пример a=1/2
- Окружность с осями, горизонтальная линия y=a в красной рамке
- 2 сектора углов π/6 и 5π/6 разных цветов (бирюзовый + фиолетовый)
- Вертикальные пунктиры от обеих точек к оси x (показывают sin α = a)
- Подписи P_{π/6} и P_{5π/6} крупно, цветом совпадающим с сектором
- Формульный блок снизу в рамке: x = (-1)^n · arcsin a + πn
cos x = a (400×430):
- Заголовочная плашка cyan
- Вертикальная линия x=a с красной плашкой-меткой
- Сектор +π/3 (верхний, cyan) и -π/3 (нижний, фиолетовый)
- Горизонтальные пунктиры от точек к оси y
- Формульный блок: x = ±arccos a + 2πn
tg x = a (440×430, шире из-за оси тангенсов):
- Заголовочная плашка green
- Ось тангенсов справа (вертикальная пунктирная)
- Точка A_a = (1; a) в красной рамке-метке
- Прямая через O и A_a пунктиром в обе стороны
- Пример a = √3/3 → корни π/6 и 7π/6
- Сектор угла π/6 + 2 точки
- Формульный блок: x = arctg a + πn
Все три SVG используют consistency:
- Заголовок с подзаголовком сверху
- Чёткое цветовое кодирование (a/sin/cos = красный)
- Сектора заполненные пастельными цветами
- Формула в нижней рамке с заголовком 'ОБЩАЯ ФОРМУЛА'
Самый большой параграф главы 1:
§8 Тригонометрические уравнения:
Карточки теории (8 шт):
- 8.1 Зачем геометрия — мотивация
- 8.2 sin x = a (геометрия + объединённая формула (-1)^n)
- 8.3 cos x = a (геометрия + ±arccos)
- 8.4 tg x = a (через ось тангенсов)
- 8.5 Особые случаи (a = 0, ±1) — полная таблица
- 8.6 Метод замены переменной
- 8.7 Метод разложения на множители
- 8.8 Однородные уравнения 1-й и 2-й степени
SVG (через ALG10.tri.canvas):
- sin x = a: окружность + горизонтальная линия y=a + 2 точки
- cos x = a: окружность + вертикальная линия x=a + 2 точки
- tg x = a: окружность + ось тангенсов + точка A_a + прямая через O
Интерактивы:
- ИВ1: 10 простейших уравнений (sin/cos/tg = a)
- ИВ2: 6 заданий 'сколько корней в промежутке'
- ИВ3: 5 заданий на замену переменной (квадратные относительно sin/cos)
Босс §8 — 6 этапов:
- 1: проверка |a|>1 → нет корней
- 2: подсчёт корней в [0;2π]
- 3: простейшее cos x = -1
- 4: квадратное относительно cos
- 5: проверка подстановкой
- 6: tg x = 1 → серия π/4 + πn
Обновлены ACH_LABELS (+p8_done), bumpProgress, SIDEBAR §8
(10 строк с формулами и особыми случаями), TIP §8.
Файл вырос со 141 KB до 160 KB (1888 → 2189 строк).
Все 4 IV1 в Главе 4 показывали R в пикселях (130/120/70/100),
из-за чего S_круга получалось $\pi · 10000 ≈ 31415$ — для
школьника это не геометрия, а абстракция.
§13 IV1: R = 130 px → переинтерпретировано как R = 10 ед.
(K = 13). r тоже в единицах.
§14 IV1: slider R = 50..150 px → R = 2..8 ед. (K = 18 px/ед.).
SVG рисуется через Rpx = R · K, формулы a, r, P, S в единицах.
§15 IV1: slider R = 40..100 px → R = 2..5 ед. (K = 20).
Таблица a₃=R√3, a₄=R√2, a₆=R даёт нормальные числа.
§16 IV1: slider R = 40..150 px → R = 2..6 ед. (K = 25).
C, S, дуга, сектор — все осмысленные значения.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
§10 IV1 «Теорема синусов»: убрал ремарку «(в пикселях SVG)»,
ввёл коэффициент K = 26 px/ед., теперь R ≈ 5, 2R ≈ 10 и стороны
a, b, c показываются как 4..7 ед. (а не 100..130 px).
§11 IV1 «Теорема косинусов»: было b=100, c=150 px — отображалось
$a^2 = 10000 + 22500 - 30000·cos A$ — невменяемые числа.
Стало b=4, c=6 ед., K=25 px/ед.: $a^2 = 16 + 36 - 48 cos A$.
Подписи и формула в единицах, SVG-геометрия — та же.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Реализованы 3 параграфа главы 1:
§5 y = sin x и y = cos x. Свойства и графики:
- Большой график sin x на [-2π;2π] с отметками экстремумов
(640x240, ALG10.func.canvas + plot)
- График cos x с тем же оформлением
- Совмещённый график sin/cos с легендой и точкой пересечения π/4
- Полные таблицы свойств (D, E, период, чётность, нули, монотонность)
- Алгоритм преобразований y = A·sin(ωx+φ) + b
- Интерактив 1: 4 ползунка (A/ω/φ/b) → real-time перерисовка графика
с базовым sin пунктиром для сравнения
- Интерактив 2: 7 заданий на свойства
- Босс §5: 5 этапов
§6 y = tg x и y = ctg x. Свойства и графики:
- График tg x с авто-обрывами у асимптот (±12 порог) + красные
вертикальные асимптоты
- График ctg x аналогично
- Таблицы свойств с подсветкой ключевых отличий (период π!)
- Интерактив 1: 6 заданий на свойства
- Интерактив 2: сравнение значений по графику (< / = / >)
с использованием монотонности (tg возр., ctg убыв.)
- Босс §6: 5 этапов
§7 Арксинус, арккосинус, арктангенс, арккотангенс:
- 4 маленьких графика 280x240 (arcsin/arccos/arctg/arcctg)
с правильными областями значений [-π/2;π/2] / [0;π]
- Таблицы главных значений для sin/cos
- Подсветка: arccos и arcctg НЕ нечётные
- Связки: arcsin a + arccos a = π/2
- Интерактив 1: 8 заданий на главные значения
- Интерактив 2: arcsin(sin α) — тонкая разница, 5 заданий
- Босс §7: 5 этапов (включая тонкий вопрос про arcsin(sin(5π/6)))
Обновлены ACH_LABELS (+p5/p6/p7_done), bumpProgress,
SIDEBARS (шпаргалки), TIPS (подсказки для каждого §).
Файл вырос с 96 KB до 141 KB (1321 → 1888 строк).
§4 IV1: бейдж тупого угла использовал эмодзи ⚠ — заменён
на inline SVG треугольника-предупреждения (правило проекта:
никаких эмодзи в коде, только inline SVG).
§6 IV1: подписи длин рисовались в пикселях
(b₁=120, h=80 и т.д.) и из них проверялись соотношения —
бессмысленные числа. Теперь все подписи в реальных единицах
(гипотенуза c=10), соотношения тоже в единицах.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Кнопка 'Открыть' и progress-bar тоже не рендерились без
правил для нестандартных цветов. Добавлены все 3 ассета:
.tb-progress.teal/cyan/emerald .tb-progress-fill
.tb-btn.primary.teal/cyan/emerald
§1 IV1 «Конструктор прямоугольного треугольника»:
- Стандартное расположение: прямой угол справа-снизу (C),
угол α при A слева-снизу, гипотенуза диагональю
- Цветовая кодировка сторон: гипотенуза c фиолетовая,
противолежащий a красный, прилежащий b синий
- Подписи в реальных единицах (c = 10), а не px/22
- Легенда с обозначением каждой стороны
- Под графиком — формулы $\sin = a/c$, $\cos = b/c$ итд
§3 IV1 «Два эталонных треугольника» (бывшая «Три»):
- Поправлен заголовок: было «Три», нарисовано два
- Оба треугольника в стандартном расположении
- Помощник drawTri() — единая логика для обоих
- Углы 30°/60° (красный/голубой) для 30-60-90,
45°/45° для равнобедренного
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Карточка 'Алгебра — 10 класс' в каталоге не показывала
заголовок и градиентный фон, потому что у учебника
color='teal', а CSS-правила .tb-cover.teal не было.
Добавлены 4 цвета на будущее (для алгебры 10 теal, для
геометрии 10 cyan/emerald, для амбер вариант).
Реализованы первые 4 параграфа главы 1 'Тригонометрия':
§1 Единичная окружность. Градусная и радианная мера:
- SVG главный с 12 делениями (0°, 30°, 60°, ..., 330°)
- Интерактив 1: slider угла -720°..+720° с реал-тайм отрисовкой P_α
+ эквивалент в [0°, 360°)
- Интерактив 2: тренажёр перевода град ↔ рад (8 заданий)
- Интерактив 3: четверть угла (6 заданий)
- Босс §1: 5 этапов (углы, четверти, эквивалентные точки)
§2 sin и cos произвольного угла:
- SVG определения через координаты P_α (с подписями sin α и cos α)
- SVG знаков по четвертям с цветными секторами и подписями +/-
- SVG главных углов π/6, π/4, π/3, π/2 на окружности
- Таблица точных значений
- Интерактив 1: знаки sin/cos (8 заданий)
- Интерактив 2: точные значения (6 заданий)
- Интерактив 3: 'может ли так быть?' (6 да/нет)
- Босс §2: 5 этапов
§3 tg и ctg произвольного угла:
- SVG оси тангенсов (касательная x=1, точка A_α)
- SVG оси котангенсов (касательная y=1)
- Таблица знаков по четвертям
- Интерактив 1: 'существует ли?' (6 да/нет)
- Интерактив 2: знаки tg/ctg (6 заданий)
- Босс §3: 5 этапов
§4 Тригонометрические тождества:
- SVG прямоугольного треугольника на окружности → теорема Пифагора
- 3 производных тождества: tg·ctg=1, 1+tg²=1/cos², 1+ctg²=1/sin²
- Алгоритм 'знаю одну → найду все 4'
- Полный пример решения
- Интерактив 1: 'найди cos α по sin' (5 заданий)
- Интерактив 2: 'упрости выражение' (5 заданий)
- Интерактив 3: 'найди tg/ctg' (5 заданий)
- Босс §4: 5 этапов
Инфраструктура главы:
- 13 параграфов в PARAS (4 готовы, §5-§12 + final1 — stub 'в разработке')
- Sidebar с шпаргалкой для §1-§4
- 4 ачивки + ачивка 'Глава 1 пройдена'
- Тёмная тема, прогресс на сервер, XP
- Все SVG используют ALG10.tri.canvas() и связанные хелперы
Используется библиотека alg10_svg.js из Wave 0.
Карточки Алгебры 9 (indigo) и Геометрии 9 (rose) показывались
белым на белом — отсутствовали CSS-классы .tb-cover.indigo
и .tb-cover.rose. Добавлены градиенты, fill прогресс-бара
и primary-кнопки для обоих цветов + расширен colorMap.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Maxim Dolgolyov