- KaTeX:
• PARAS p29/p30: убрана математика из psel-карточек
($M$ → M, $\perp$ → ⊥), т.к. psel не рендерил KaTeX.
• Boss "\§29-30" title: $\perp$ → ⊥ (boss-title не рендерился).
• Защитно добавлен renderMath(g) после buildParaSelector
и renderMath(cont) после вставки boss-карточек.
- §27 SVG: чистая 2-панельная схема с разделителем.
Слева: ЛИНЕЙКА (корпус с штрихами без цифр) → ↓ →
пример (точки A, B + прямая).
Справа: ЦИРКУЛЬ (шарнир + игла + грифель) → ↓ →
пример (окружность с центром O и радиусом r).
- §31 SVG: пересчитанные координаты, чёткие плашки-подписи
ГМТ 1 (биссектриса, красная) и ГМТ 2 (окружность, синяя).
Точки K₁, K₂ — крупные зелёные с белой обводкой.
Дуги показывают, что биссектриса делит угол ровно пополам.
- §21: треугольник перестроен — цветовая кодировка
(красная сторона = длиннейшая, зелёная = короткая) +
углы напротив окрашены в тон стороне. Исправлена легенда
(теперь корректно: c>a>b ⇒ ∠C>∠A>∠B).
- §22: 'возможный' треугольник 4-5-6 с точными
координатами вершины (решена система уравнений);
'невозможный' 3-4-8 показан как 2 дуги от A и B радиусов
3 и 4 (в масштабе 25px/ед.) с явным красным 'зазором'.
- §24: добавлены 4 SVG-панели — по одной на каждый признак
с цветовой подсветкой выделенных элементов
(катеты / катет+угол / гипот+угол / гипот+катет).
- §25: рисунок биссектрисы пересчитан по углу — стороны
угла идут под углом ±25° от биссектрисы, K, F₁, F₂
вычисляются проекцией. Добавлены подписи d=d и
одинаковые штрихи KF₁ = KF₂.
- §9, §13: добавлены 'запоминалки' с расшифровкой СУС/УСУ/ССС
(сторона-угол-сторона и т.д.) + латинский эквивалент
- Кнопки тренажёра, шпаргалка, водяные знаки, босс §13 — на ССС/СУС/УСУ
- §14: пересчитана описанная окружность. Вершины A,B,C теперь
лежат точно на окружности с центром O и радиусом R=70.
Серединные перпендикуляры выходят из середин сторон в O.
Когда я добавил max-width:Wpx, SVG в одиночных карточках перестали
заполнять контейнер: в карточке шириной 800px SVG ограничивался
своим intrinsic размером (например 320px для §6), и казался мелким.
Правильная responsive-стратегия — width:100% БЕЗ верхней границы.
viewBox + preserveAspectRatio сами правильно отмасштабируют содержимое.
Теперь в одиночных карточках SVG занимает всю ширину, в flex-сетке —
свою долю.
Cache-bust ?v=6.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Откатил неверный фикс: добавление width="W" height="H" атрибутов
заставило SVG рендериться в intrinsic-размере 180×160 px вместо
заполнения родительского контейнера. Из-за этого рисунки выглядели
маленькими.
Теперь svgBox использует правильную responsive-стратегию:
- viewBox="0 0 W H" — определяет систему координат
- preserveAspectRatio="xMidYMid meet" — сохраняет пропорции
- style="width:100%; max-width:Wpx; height:auto" — растягивает
до ширины контейнера, но не больше intrinsic W; height auto
держит правильное соотношение сторон через viewBox
Cache-bust ?v=5.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Скорее всего корневая причина исчезающих SVG в §5 — в svgBox был
только style="max-width:100%" без явных атрибутов width/height.
В flex-контейнере с inline-block детьми SVG без явных размеров
может сжаться до 0×0 в некоторых браузерах (особенно при не-100%
ширине контейнера).
Фикс:
1. svgBox: добавлены width="W" и height="H" атрибуты на <svg>,
плюс height:auto в стиле — теперь SVG имеет гарантированно
ненулевой размер и сохраняет пропорции при сжатии.
2. svgNotation в §5: если G не загружен, теперь показывается
красный fallback-блок "⚠ Библиотека SVG не загружена.
Обновите страницу с Ctrl+Shift+R" — пользователь сразу видит,
что проблема в кэше.
3. Bump cache-bust до ?v=4 для geom7_svg.js — форсит
обязательное обновление файла в браузерах, которые
проигнорировали ?v=3.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Скорее всего у пользователя был закэширован старый geom7_svg.js, из-за
чего часть API изменилась и SVG-блоки в §5 рендерились пустыми
(angleViz и notationVariant возвращали '' если G не было).
Что сделано:
1. Везде src="/js/geom7_svg.js?v=3" — форсит браузер скачать заново
- geometry_7_ch1.html
- geometry_7_ch2.html
2. notationVariant: function declaration внутри if(G) заменён на
const arrow expression — для надёжности в strict mode + блоке
3. Добавлен 3-й SVG в §5 — карточка 5.2 «Измерение углов»:
- полукруглый транспортир радиусом 90px с делениями каждые 10°
- три цветных луча, отложенные на 40°, 90°, 140° от одной стороны
- цветные подписи градусных мер в правильных местах
Теперь в §5 ТРИ SVG-рисунка:
- 5.1 «Что такое угол» — три обозначения одного угла
- 5.2 «Измерение углов» — транспортир с 3 примерами (НОВОЕ)
- 5.3 «Виды углов» — 4 типа углов с заливкой
- 5.4 «Биссектриса» — деление угла пополам
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Корневая причина проблемы с наложенными метками углов в §6:
В G.angle формула центра метки была:
midA = (a1 + a2) / 2 + (|delta| > π ? π : 0)
При a1≈-153° и a2≈+153° (как у ∠2 в §6) среднее даёт 0° —
ровно туда же, куда ставится метка ∠1 (a1≈+25°, a2≈-25°,
тоже среднее = 0°). Результат: обе метки в одной точке.
Правильная формула — идти от a1 на половину delta в направлении
sweep:
midA = a1 + delta / 2
Это автоматически разносит метки противоположных секторов
в противоположные стороны. ∠1 уходит вправо, ∠2 — влево.
Также добавил 2 новых SVG в §5:
1. Карточка 5.1 «Что такое угол» — теперь содержит три варианта
обозначения одного и того же угла: ∠BAC (полное), ∠A (короткое),
α (греческая буква). Каждый — отдельный SVG с подсветкой угла
жёлтым сектором, общая подпись внизу.
2. Карточка 5.4 «Биссектриса» — наглядный SVG: ∠BAC = 70°,
биссектриса AD (пунктирная красная) делит его на две равные
половинки по 35°. Полупрозрачная заливка зелёным/фиолетовым
для каждой половины, дуги с одинаковыми штрихами как маркер
равных углов.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§6 (вертикальные углы):
- SVG расширен 260×180 → 320×230
- Добавлены 4 полупрозрачных сектора как фон (красный для ∠1/∠2,
оранжевый для ∠3/∠4) — сразу видно, какие углы вертикальны
- Метки ∠1, ∠2, ∠3, ∠4 теперь явные (со знаком "∠")
- Подпись O вынесена в (-26,-22) от вершины + пунктирная линия-указатель
к самой точке — чтобы метка не перекрывала ∠1
- Чётко разнесены: ∠1, ∠2 (red, r=20) — на горизонтали;
∠3, ∠4 (orange, r=32) — на вертикали
§5 (виды углов):
- SVG расширен 140×120 → 180×150 (больше деталей)
- Каждый угол теперь имеет полупрозрачную заливку-сектор
(цветом, соответствующим типу угла)
- Подпись типа угла увеличена до 12px, чётко читается
- Развёрнутый угол: полукруг закрашен, подпись 180° явная
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Полный план по учебникам Беларуси 2019:
- Algebra_Arefieva_9kl_rus_2019.pdf (4 главы, 19 §)
- Geometriya_Kazakov_9kl_rus_2019.pdf (4 главы, 16 §)
Порядок реализации: сначала вся Алгебра 9 (Phases 0-5),
затем вся Геометрия 9 (Phases 6-11).
Включает:
- Полное содержание каждой главы с ключевыми формулами
- SVG-стандарт качества (хелперы regularPoly, rightAngle,
angleArcAuto, tickMarks, arrow, axes2D, plotFunc)
- Типы SVG по темам для каждого учебника
- Правила drag-интерактивов из опыта Геом 8
- Phase-by-phase порядок реализации (11 phase)
- Структура каждой главы (Wave 0 skeleton, Wave 1-N §, Wave финал)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
В alg7-fx.js renderMathInElement() вызывался без опций — KaTeX
auto-render по умолчанию узнаёт только \(...\) и \[...\], а
не $...$. Поэтому формулы в виз. квадрата суммы и разности
квадратов отображались как обычный текст (см. скриншот пользователя).
Фикс: общий хелпер ALG7.renderMath(root), который вызывает
renderMathInElement с теми же делимитерами, что прописаны в
страницах глав ($$, $, \[\], \(\)).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Сделано:
1. /css/alg7-fx.css — универсальные эффекты:
- shake (тряска) при неправильном ответе
- pulse (зелёное свечение) при правильном
- combo-badge (огненный шильдик ×3, ×5, ×10) при сериях
- streak-индикатор в углу с пульсацией
- sparkles (искры) при успехе
- стили для двух новых визуализаторов
2. /js/alg7-fx.js — система комбо + визуализаторы:
- MutationObserver автоматически отслеживает .feedback по всем
четырём главам без правки feedback() в каждой
- комбо-милестоны: 3 → +5 XP, 5 → +15, 10 → +50, 15 → +75, 20 → +100
- бонус автоматически уходит через window.addXp(), который
уже есть на window благодаря top-level function declarations
- ALG7.buildQuadSumViz() — большой квадрат (a+b)² с 4 цветными
областями (a², ab, ab, b²); слайдеры a, b; режим (a+b)/(a-b);
клик по области → подсветка в формуле; живые числа
- ALG7.buildDiffSquaresViz() — 3-этапная анимация a²-b²=(a-b)(a+b):
1) большой квадрат с вырезанной угловой b²
2) пунктирная линия разреза в L-форме
3) перестроенный прямоугольник со сторонами (a-b)×(a+b)
3. Подключено во всех 4 главах одной строкой <link>/<script>.
4. Ch2 §12: добавлен 4-й интерактив — геометрическая визуализация
квадрата суммы/разности. Школьник видит ПОЧЕМУ (a+b)²=a²+2ab+b².
5. Ch2 §13: добавлен 3-й интерактив — анимированное геометрическое
доказательство разности квадратов. Жмёшь «Шаг» → L-форма
расклеивается и собирается в прямоугольник.
Эффекты работают везде где есть .feedback — все боссы, все
тренажёры, все викторины. Не требует правки логики каждой главы.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
В SIDEBARS p1 (line 516, шпаргалка боковой панели) у формулы числа
диагоналей \$\dfrac{n(n-3)}{2} не было закрывающего \$.
KaTeX видел незакрытый блок $...$ — отображал как сырой текст:
'Число диагоналей — $\dfrac{n(n-3)}{2}'.
Исправлено: добавлен закрывающий $.
Полный аудит KaTeX по всем 4 главам Геометрии 8 — это была
единственная найденная ошибка. Остальные $...$ блоки чисты.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ФИНАЛЬНАЯ глава Алгебры 7! Последние 5 параграфов:
- §21. Линейное уравнение с двумя переменными ax+by=c
- §22. График — прямая (особые случаи a=0, b=0)
- §23. Система: одно решение / нет / бесконечно
- §24. Два способа: подстановка и сложение
- §25. Текстовые задачи через систему (растворы, монеты, движение)
Интерактивы:
- §21: пара-решение (викторина); выразить y через x; найти переменную
- §22: 3-слайдер a/b/c с живым SVG-графиком (включая особые случаи
параллельных осям прямых); принадлежность точки; пересечения с осями
- §23: пара-решение системы; число решений (3 категории) — SVG-иллюстрация
пересекающихся/параллельных/совпадающих прямых
- §24: тренажёр подстановки (5 задач); тренажёр сложения (5 задач);
выбор удобного способа (5 пар) с объяснением «почему»
- §25: тренажёр текстовых задач (6 задач: груши/яблоки, копилка,
монеты, кролики/цыплята); выбор корректной системы по условию
Финал: 5 боссов × 5 этапов = 25 этапов. Финальный босс — текстовые
задачи на системы (растворы, кофе/чай, кролики/цыплята).
При завершении ВСЕГО финала засчитывается достижение
«Алгебра 7 — пройдена полностью!».
coordSVG расширен поддержкой формы ax+by=c (включая вертикальные
x=c/a). cyan-тема (#0891b2), KaTeX, 7 терминов глоссария.
Алгебра 7: 4 главы × 100% контента = курс полностью реализован.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§4.1 'Параллелограмм + диагональ':
- Tick-марки для пары AB/CD рисовались на (116,103)-(130,97)
и (216,103)-(230,97). Но midpoint AB = (77,100), а не (123,100)
как указано в комментарии — агент ошибся в арифметике.
- Пересчитаны точно через перпендикуляр к каждому сегменту:
AB tick at midpoint (77,100); CD tick at midpoint (223,100).
Двойные tick'и для пары AB=CD=b, одиночные для BC=AD=a.
- Метки сторон 'a' и 'b' перепутаны: AB была помечена 'a' вместо 'b',
AD помечена 'b' вместо 'a'. Исправлено по правилу:
a = горизонтальная пара (BC, AD), b = наклонная пара (AB, CD).
§4.2 'Основные свойства':
- Дуги углов B и D использовали sweep=1 (большая 245° внешняя дуга
через ВНЕШНЮЮ область параллелограмма). Должно быть sweep=0
(короткая 115° внутренняя дуга через ВНУТРЕННОСТЬ).
- Подписи β сдвинуты ближе к дугам внутри полигона.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Fixes applied (§1-§7 buildP1-buildP7 only):
§1.1 (Fix 11): Pentagon viewBox 170→185; C/D vertex labels at y=176 and
side label 'c' at y=174 were clipped — now visible.
§1.3 (Fix 1): Hexagon — added 3 missing diagonals (only 6 of 9 drawn);
expanded viewBox 160→175; caption moved from y=170 (clipped) to y=171.
§1.5 (Fix 2): Octagon — stray vertex circle and diagonal endpoints at
(140,16) replaced with actual 8th vertex (74,26); corrected two diagonal
endpoints accordingly.
§2.1 (Fix 12): Pentagon triangulation viewBox 165→178; A₃/A₄ vertex
labels at y=166 clipped → moved to y=172; caption moved y=156→y=174.
§2.2 (Fix 9): Equilateral triangle was isosceles (sides ~70,66,70);
replaced points to make all sides ≈62.4.
§2.3 (Fix 3): Nonagon viewBox 160→185; bottom vertices at y=170 were
clipped; caption moved to y=180.
§3.1 (Fix 10): Fixed misleading comment ("beyond A" → "beyond B").
§3.2 (Fix 4): Hexagon external angle extension line and arc were outside
viewBox width=280; redesigned to extend upward within bounds; viewBox
height expanded to 172.
§4.2 (Fix 5): Parallelogram angle arcs — C and D arcs were completely
swapped (drawn at each other's vertices); recalculated all arc endpoints
from unit vectors along polygon sides.
§4.3 (Fix 6): Side labels 8 and 5 swapped on example parallelogram
(AB=CD=8, BC=DA=5); corrected positions.
§4.3 (Fix 7): Angle arcs at A and C misplaced; recalculated endpoints
to correctly span each corner angle.
§6.1 (Fix 8): Признак 2 SVG used undefined marker #arr causing invisible
arrows; replaced with inline tick + polyline chevron marks.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Корневая причина: каждый redraw() заменял SVG через innerHTML,
уничтожая элемент svgEl который onMove захватил в замыкании через
const svgEl = wrap.querySelector('svg'). На следующем pointermove
svgEl.getBoundingClientRect() возвращал {left:0,top:0,w:0,h:0} —
вершина прыгала в начало координат SVG, drag разваливался.
Применено к 5 интерактивам:
1. §4 Конструктор параллелограмма
2. §5 Живой параллелограмм — все свойства
3. §7 Живой прямоугольник — равенство диагоналей
4. §8 Признак прямоугольника — живая демонстрация
5. §9 Живой ромб
Что изменилось:
- Состояние (p4Active, p4Vname, p4OffX/Y и т.д.) вынесено на уровень
модуля, ВНЕ redraw().
- Один pointerdown-listener на wrapper-div через делегирование событий
(ev.target.closest('[data-v]')).
- clientToSvg() делает свежий document.getElementById(SVG_ID) на
каждый вызов — не закрепляется на устаревшем DOM-узле.
- SVG получают стабильный id.
- viewBox.baseVal для точного coordinate scaling.
- Offset capture на pointerdown (нет snap-to-pointer).
- touch-action:none на SVG root.
- Hit area r=16 (visible r=8) — легче попасть на touch.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Drag-фикс (12 интерактивов):
Корневая причина — el.setPointerCapture(ev.pointerId) вызывался при
pointerdown, потом redraw() заменял innerHTML, удаляя элемент
с захваченным pointer. На touch-устройствах поток событий терялся.
Применено ко всем drag-обработчикам §1, §4, §5, §8, §9, §10, §11,
§12, §13, §14, §15, §16:
- Удалён setPointerCapture (бесполезен после innerHTML replace)
- Добавлен ev.preventDefault() после проверки кнопки
- Добавлен e.preventDefault() в начале onMove
- window.addEventListener('pointermove', onMove, {passive: false})
- Флаг active для защиты от stale events
§7 «Живой прямоугольник — равенство диагоналей» — полностью переписан:
- A фикс, C draggable (13px hit area, cursor:grab)
- Прямоугольник всегда axis-aligned
- Обе диагонали dashed разного цвета (зелёная AC, янтарная BD)
- Двойные риски равенства на каждой диагонали
- Подписи длин у каждой диагонали в реал-тайме
- Хелпер sqMark() рисует правильные L-маркеры прямого угла во всех
4 углах прямоугольника, направленные внутрь
- Info-панель: AB, BC, периметр, площадь + постоянно зелёная карточка
'Диагонали AC = BD' с обоими значениями
§16 Интерактив 3 'Доказательство признака 1 пошагово' — переписан:
5 шагов с чёткими SVG-состояниями: Дано → опустить высоты DH₁,CH₂ →
равные углы при основании + равные высоты → конгруэнтность по
'угол-катет' → вывод AD=BC. Подсветки треугольников, штрихи равных
сторон, маркеры прямого угла у оснований высот.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§12 Card 12.1, 12.3 (угол между касательной и хордой):
- Дуга AB рисовалась с sweep=1 — это ДЛИННАЯ дуга через левую сторону
(250°). Но теорема говорит про малую дугу 'внутри угла' между
касательной и хордой, которая на ПРАВОЙ стороне (~110°).
- Изменено на sweep=0 — теперь рисуется правильная малая дуга
справа, та самая что 'inside the angle'.
§16 Интерактив 1 'PT² = PA·PB':
- Слайдер угла секущей имел range 5..60° но математически возможен
только до asin(R/PO)=asin(62/147)≈25°. При угле > 25° секущая
пролетает мимо окружности (disc<0), SVG не рендерится — пользователь
видел пустой блок.
- Range изменён на 2..22° (с запасом). Default value 12°. Теперь
всегда рендерится корректный SVG с касательной + секущей.
§16 Интерактив 3 'Калькулятор':
- В результате 'PT = \u221a(PA\u00b7PB)' писались литеральные
unicode-escape строки (двойные backslash в template literal
становятся одиночными в строке, но \u221a не trigger escape
→ литеральная строка '\u221a'). Заменено на настоящие
символы √ и · в коде.
- Добавлен SVG слева от калькулятора с диаграммой PT²=PA·PB
(касательная PT, секущая PAB из внешней точки P).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§12 (Угол между касательной и хордой):
- Card 12.1, 12.3: полностью переписаны. Касательная — настоящая
горизонтальная прямая в точке A на нижнем краю окружности;
хорда AB к точке B на верхней дуге; маркер угла α радиуса 18
между направлением касательной и хордой. Подсветка дуги AB
только обводкой (stroke), без заливки fan-сектора.
- Интерактив 1: добавлен корректный маркер угла, дуга stroke-only.
§13 (Угол между двумя хордами):
- Card 13.1: переписан. 4 точки A,B,C,D через тригонометрию
(тестовые углы 200°/20°/80°/280°). Хорды AB и CD пересекаются
в P=(141,96) — настоящее аналитическое пересечение.
Дуги AC и BD — тонкими толстыми обводками БЕЗ заливок.
- Интерактив 1: подсветки дуг переделаны на stroke-only.
§14 (Угол между секущими из внешней точки):
- Card 14.1: переписан с корректной геометрией секущих. P=(272,92)
снаружи; обе секущие — настоящие прямые через P; все 4 точки
пересечения вычислены аналитически (через квадратное уравнение).
- Интерактив 1: добавлен хелпер secantPoints(P, O, R, θ) который
гарантирует, что точки пересечения лежат на одной прямой с P.
Заменены произвольные углы на окружности на правильное построение.
Все §12-§14 теперь геометрически точны: касательные действительно
касательны, хорды действительно пересекаются в указанной P, секущие
действительно прямые через внешнюю точку.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Maxim Dolgolyov