feat(alg7 ux): Wave 5 — UX-буст для всех 4 глав (комбо + анимации + 2 viz)

Сделано:
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>
This commit is contained in:
Maxim Dolgolyov
2026-05-28 23:25:02 +03:00
parent e1c05da294
commit 790c2e9445
6 changed files with 745 additions and 0 deletions
+2
View File
@@ -13,6 +13,8 @@
onload="renderMathInElement(document.body,{delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false},{left:'\\[',right:'\\]',display:true},{left:'\\(',right:'\\)',display:false}],throwOnError:false})"></script>
<script src="/js/api.js" defer></script>
<script src="/js/xp.js" defer></script>
<link rel="stylesheet" href="/css/alg7-fx.css">
<script src="/js/alg7-fx.js" defer></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800;900&family=Unbounded:wght@700;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<style>
:root{