Когда я добавил 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>
В 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>
Найдено 6 геометрических SVG-фиксов (LaTeX везде чист):
§13 Card 13.1 (две хорды): точки A,B,C,D были смещены от окружности,
точка P не лежала на обеих хордах. Пересчитаны через
(cx+R·cos θ, cy+R·sin θ) с r=65; P=(126,74) — настоящее пересечение
хорд AB и CD.
§13 Proof: углы 210°/290°/350°/70° давали хорды AC и BD которые
НЕ пересекались внутри окружности. Изменены на 220°/10°/130°/300° —
P=(119,71) внутри.
§14 Card 14.1: точки секущих не лежали на окружности и линии от P
не проходили через обе точки пересечения. Пересчитаны как реальные
пересечения секущих с окружностью при углах ±20°/-10°.
§14 Proof: A,B,C,D построены как окружностные точки без проверки
коллинеарности с P. Заменены на построение через хелпер _sec()
с углами ±15° от P.
§15 Card 15.1: P=(116,87) но хорды пересекались в (114.7,88.1) —
2px разница. P сдвинут на (114,88); концы хорд пересчитаны
точно на окружность r=65.
§16 Card 16.1: T не была настоящей точкой касания (OT⊥PT нарушено).
T пересчитана как настоящая касательная из P через asin(R/|OP|);
добавлен маркер прямого угла; A,B заменены на реальные пересечения
секущей.
KaTeX-эскейпы в §12-§16 проверены — все \angle, \dfrac и т.п.
корректно удвоены. Математика в задачах проверена выборочно — без
ошибок.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§12 Угол между касательной и хордой: slider дуги, live угол=½дуги;
4-шаговое доказательство через диаметр и вписанный угол; калькулятор
двунаправленный; тренажёр; DnD; босс.
§13 Угол между двумя хордами: 2 слайдера дуг, пересечение через
уравнения прямых, live угол=½(дуга₁+дуга₂); 4-шаговое доказательство
через вспомогательный треугольник; калькулятор; тренажёр; DnD; босс.
§14 Угол между секущими из внешней точки: 2 слайдера дуг,
live угол=½|дуга₁−дуга₂|; 4-шаговое доказательство через внешний
угол △PAD; калькулятор; тренажёр; DnD; босс.
§15 Произведение отрезков пересекающихся хорд: SVG-слайдеры
положения и угла, live PA·PB vs PC·PD через квадратное уравнение
пересечения хорд с окружностью; 4-шаговое доказательство через
подобие △APC∼△DPB; калькулятор (3 отрезка → 4-й); тренажёр; DnD; босс.
§16 Квадрат касательной = произведение секущих: slider угла секущей,
касательная с маркером ⊥; live PT²=PA·PB; 4-шаговое доказательство
через подобие △PTA∼△PBT; калькулятор 3-в-1; тренажёр; DnD; босс.
GLOSSARY: +угол между касательной и хордой, +пересекающиеся хорды,
+полусумма дуг, +полуразность дуг, +квадрат касательной.
File: 4642 → 6712 LOC. ВСЕ 16 §§ Главы 4 готовы.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Маркер центрального угла α был нарисован дугой M 142,81 A 22,22 0 0,1 142,119
— стартовая точка (142,81) находилась в направлении -40° от O (между
OA и горизонталью), что НЕ совпадало с направлением радиуса OA (-60°).
Дуга выглядела не между радиусами а сбоку.
Исправлено: dуга теперь от (131,81) до (131,119) — точки лежат на
радиусах OA и OC на расстоянии 22 от центра (угол -60° и +60°
соответственно). Подпись α тоже подвинута чуть левее.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Card 8.1 (центральный угол): viewBox 260×160 → 280×200. Добавлена
заливка сектора (pie slice) пастельно-жёлтого, дуга AC выделена
КРАСНОЙ толстой линией (stroke 3.5), угол α у центра — большая
оранжевая дуга радиуса 22. Точки на окружности с подписями A,C
крупными Unbounded. Подпись '⌣AC = α°' справа от дуги, не
накладывается. Подзаголовок 'центральный угол ∠AOC' в углу.
Card 8.3 (длина дуги): viewBox 260×150 → 280×190. Радиусы теперь
СПЛОШНЫЕ синие (раньше были пунктирные серые — невидимые). Подпись
R на радиусе OA крупная JetBrains Mono. Дуга ℓ выделена красной
толстой линией (4px). Угол α у центра — большая дуга радиуса 28.
Формула 'ℓ = (α/360°)·2πR' внизу как референс.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§8 Интерактив 1 slider label: \alpha (был \alpha → 'alpha' в DOM)
§8 Интерактив 4 wg-help: формула длины дуги \ell = \dfrac{\alpha}{360}\cdot 2\pi R
§9 Интерактив 1 slider label: \alpha
§11 Card 11.1 $$...$$ блок: \text, \implies, \angle
Всего 9 команд KaTeX исправлены — теперь рендерятся как формулы,
а не текст 'alpha', 'dfrac' и т.п.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§7 Card 7.1 (общая внешняя касательная теория): добавлены 4 правильных
маркера прямого угла (L-формы) во всех 4 точках касания + радиусы
от O₁/O₂ к каждой точке касания.
§7 Card 7.2 (доказательство формулы): переделан рисунок — добавлена
точка K (основание перпендикуляра из O₂ на O₁T₁) с подписью,
правильные L-маркеры в T₁, T₂, K; подписи R₁, R₂, R₁−R₂, d.
§7 Интерактив 1 (live внешняя касательная): добавлены 4 маркера
прямого угла во всех точках касания, вычисляемых через единичные
векторы радиуса и касательной + красные точки на T₃,T₄ + 4 пунктирных
радиуса от центров.
§8 LaTeX: \alpha, \smile, \ell, \dfrac, \cdot, \pi
в card 8.1 (центральный угол) и 8.3 (длина дуги).
§8 Интерактив 1 help: \angle ABC.
§11 Интерактив 1 help: \angle ACB.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LaTeX-баги (в template literals \angle/\dfrac/\smile/\sqrt/\neq
должны быть удвоены):
- §9.1: формула $$\angle ABC = \dfrac{1}{2}\,\angle AOC = ...$$
- §9.2: пункт 1 'центр на стороне угла' с \angle AOC = 2\angle ABC
- §9.3: задача 'центральный = 110°, найти вписанный' — все формулы
- §10.1: формула $$\angle AB_1C = \angle AB_2C = \angle AB_3C = ...$$
- §11.2: доказательство '\smile AB = 180°', '\angle ACB = ½·180° = 90°',
'\neq A,B'
- §11.3: задача 'диаметр AB=10, AC=6, найти BC' — формула Пифагора
с \sqrt
§6.2 Признаки касания — внутреннее касание:
Точка T была нарисована в (145,60) — это самый ЛЕВЫЙ край большой
окружности O₁=(185,60) R₁=40, то есть на ПРОТИВОПОЛОЖНОЙ стороне
от меньшей окружности. Правильно: T должна быть в (225,60) — на
правом краю обеих окружностей (185+40 = 200+25 = 225), там где
они действительно касаются. Подпись T тоже сдвинута.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§10 Card 10.2 'Доказательство следствия': в KaTeX-формулах
\angle и \dfrac были записаны с одинарным \, поэтому JS
template literal заменял \a на a, и KaTeX рендерил 'angleAB_1C'
и 'dfrac12' как текст. Исправлено на \\angle и \\dfrac.
SVG-фиксы:
- §8.1: дуга начиналась не с вершины A — исправлено.
- §9.1: все три точки A,B,C были вне окружности на 4-7px —
пересчитаны на окружность r=65.
- §9.2 'случай O на стороне AB': переделана компоновка —
B наверху, A в нижней антиподе, O на отрезке BA (диаметр),
C на окружности справа.
- §9 Интерактив 1 (slider): подпись угла AOC вылетала вправо
из viewBox — выровнена по центру.
- §10.1 и §10.3: точки на окружности 4-7px смещены — пересчитаны.
- §11.1 и §11.3: маркер прямого угла в C был горизонтальной
скобкой, не связанной с CA/CB. Пересчитан через единичные
векторы — теперь корректно показывает 90° между катетами.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Было: верхняя сторона угла нарисована до точки (258,56) — это угол
26.66° к горизонтали (half=13.33°). Круги вписаны по формуле
r=d·sin(15°), т.е. ожидался угол 30° (half=15°). Поэтому верхняя
сторона визуально не касалась окружностей — проходила выше.
Стало: верхняя сторона до точки (257,38) — угол ровно 30°
((cos30°,-sin30°)·280 = (242.5,-140)). Биссектриса под 15°.
Оба круга теперь геометрически точно вписаны и касаются обеих
сторон угла.
Добавлены 4 точки касания T₁/T₂/T₃/T₄ с подписями, метки O₁/O₂
сдвинуты чуть-чуть.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Тот же системный фикс что и в §3: маркер прямого угла в точке
касания T должен быть ВНУТРИ треугольника OTA (между T→O и T→A).
Раньше использовалось +u_radius (наружу от центра) — теперь
-u_radius (к центру O).
Затронуты:
- §4 Card 4.1 (задача построения): 2 маркера в T₁, T₂
- §4 Card 4.3 (длина касательной): 1 маркер в T
- §4 Интерактив 1 (пошаговое построение, шаги 4-5): 2 маркера
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Маркер прямого угла в точке касания T должен быть на той стороне,
где геометрически находится угол 90° — внутри треугольника OTA,
т.е. между направлениями T→O и T→A.
Раньше использовалось +u_radius (от центра наружу) → маркер
оказывался ВНЕ круга на дальней от A стороне. Изменено на
-u_radius (внутрь, к центру). Теперь маркер показывает угол
90° между OT и tangent правильно.
Затронуты:
- §3 Card 3.1 (статичная)
- §3 Интерактив 1 (slider OA)
- §3 Интерактив 2 (пошаговое доказательство)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Проверено 11 SVG в §3, §4, §5 — 11 исправлено.
§3 Касательные из одной точки:
- Card 3.1: пересчитаны точки касания T₁,T₂ по корректной формуле
T_x=O_x+R²/OA, T_y=O_y±R·AT/OA (раньше координаты были произвольные);
маркеры прямого угла направлены правильно (CCW perp для верхней,
CW perp для нижней); все подписи вне линий касательных.
- Интерактив 1 (slider): найден баг — sinA/cosA были перепутаны
в T_x/T_y. Теперь T₁x=cx+R*sinA, T₁y=cy−R*cosA. Маркер прямого
угла T₂ исправлен с CCW на CW. ViewBox расширен под широкий OA.
- Интерактив 2 (proof): тот же фикс формулы + маркер прямого угла.
§4 Построение касательной:
- Card 4.1 (построение): пересчитаны точки касания T₁,T₂ как
пересечение исходной окружности O(90,100,r=50) и вспомогательной
M(165,100,r=75) — раньше точки были вне окружности.
- Card 4.3 (формула): точка касания T была на (107,56) — вне
окружности. Пересчитана на T=(89,59) с правильным маркером.
- Интерактив 1 (шаги): то же исправление формулы и направлений
маркеров прямого угла.
- Интерактив 2 (live): сlider tangent positions через радиальные
unit-векторы для подписей вне линий.
§5 Окружности в углу:
- Card 5.1: центр окружности был на O(135,145) — не на биссектрисе
и не равноудалён от сторон. Пересчитан на O(157,148) с r=35
по формуле от вершины угла. T₁,T₂ — проекции центра на стороны.
Добавлены маркеры прямого угла в обеих точках касания.
- Card 5.3: две окружности на биссектрисе с r=d·sin(α/2).
- Интерактив 1 (slider): добавлен маркер прямого угла в T₂
(отсутствовал); направление T₁-маркера исправлено.
- Интерактив 2 (proof): то же.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§8 Центральный/вписанный углы. Дуга: slider центрального угла α от
0 до 360° с подсветкой дуги; SVG с вписанным углом и его позицией;
DnD центральный/вписанный/ни тот ни другой; калькулятор длины дуги
ℓ=α/360·2πR; тренажёр; босс.
§9 Свойство вписанного угла: dual slider центральный α + вписанный
β=α/2 на одной дуге; 5-шаговое доказательство для случая O на стороне
вписанного угла через равнобедренный △ и внешний угол; двунаправленный
калькулятор; DnD верно/неверно; тренажёр; босс.
§10 Вписанные углы на одну дугу: SVG с дугой AC и 3 вершинами
B₁,B₂,B₃ на другой части — все углы AB_iC равны; 3-шаговое
доказательство через половину центрального; калькулятор; DnD; тренажёр;
босс.
§11 Вписанный угол на диаметр: slider позиции C — угол ACB всегда
90°, прямоугольный треугольник вписан с гипотенузой = диаметр;
4-шаговое доказательство; калькулятор через Пифагор (диаметр+катет
→ другой катет); тренажёр; DnD; босс.
File: 3060 → 4549 LOC. 11 of 16 §§ Главы 4.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§3 Интерактив 1 'Две касательные из внешней точки': подписи T₁ и T₂
теперь располагаются по радиальному направлению (наружу от центра)
с большим отступом, не лежат на касательной линии. Подписи длин
AT₁ и AT₂ вынесены ПЕРПЕНДИКУЛЯРНО касательным наружу (через
вычисление нормали к каждой касательной). Все подписи теперь
крупнее (font 13, Unbounded для вершин, JetBrains Mono для длин)
и читаются без наложения на линии.
§3 Интерактив 2 'Доказательство касательных по шагам': те же фиксы
плюс расширен viewBox 260×200 → 280×220 для размещения подписей.
§2 Card 2.1: убран лишний атрибут cx='100' cy='95' на <line> элементе
радиуса (line не имеет атрибутов cx/cy — игнорировалось браузером,
но загромождало код).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§4 Построение касательной: пошаговое SVG-построение (6 шагов через
вспомогательную окружность с диаметром OA), live-слайдеры R и |OA|,
калькулятор AT=√(OA²−R²), DnD шагов построения, тренажёр, босс.
§5 Окружности вписанные в угол: слайдеры d и угол 2α — окружность
всегда касается обеих сторон, биссектриса проходит через центр;
5-шаговое доказательство; калькулятор r=d·sin(α/2); DnD утверждений;
тренажёр; босс.
§6 Взаимное расположение двух окружностей: 3 слайдера R1, R2, d с
живым определением одного из 5 случаев (внешние/касание внешнее/
пересекаются/касание внутреннее/внутренние); DnD-сортер 8 карточек
по 4 категориям; калькулятор; тренажёр; босс.
§7 Длина общей касательной: SVG внешней касательной с формулой
ℓ=√(d²−(R₁−R₂)²) + SVG внутренней касательной с ℓ=√(d²−(R₁+R₂)²);
4-шаговое доказательство через прямоугольник KT₁T₂O₂; калькулятор
обеих формул; тренажёр; босс.
File: 1638 → 3042 LOC. 7 of 16 §§ Главы 4 готовы.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§1 Касательная. Признак: слайдер d от 0 до 2R — секущая/касательная/не
пересекает с цветовым индикатором; 5-шаговое доказательство через
прямоугольный △OTM; калькулятор вида прямой; DnD по 3 корзинам;
тренажёр; босс.
§2 Свойство касательной: слайдер угла T — касательная ⊥ радиус OT всегда,
маркер 90° следует за T; 5-шаговое доказательство от противного;
калькулятор AT=√(|OA|²−R²); тренажёр; DnD утверждения; босс.
§3 Касательные из одной точки: слайдер |OA| — две касательные из A,
AT₁=AT₂ с тиками равенства; 5-шаговое доказательство через равенство
прямоугольных △OAT₁ и △OAT₂; калькулятор |AT|; тренажёр; DnD; босс.
GLOSSARY: +точка касания, +радиус.
File: 470 → 1549 LOC.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Maxim Dolgolyov