From 790c2e94453cb46001b2b91c9a952643bebee9a1 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Thu, 28 May 2026 23:25:02 +0300 Subject: [PATCH] =?UTF-8?q?feat(alg7=20ux):=20Wave=205=20=E2=80=94=20UX-?= =?UTF-8?q?=D0=B1=D1=83=D1=81=D1=82=20=D0=B4=D0=BB=D1=8F=20=D0=B2=D1=81?= =?UTF-8?q?=D0=B5=D1=85=204=20=D0=B3=D0=BB=D0=B0=D0=B2=20(=D0=BA=D0=BE?= =?UTF-8?q?=D0=BC=D0=B1=D0=BE=20+=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86?= =?UTF-8?q?=D0=B8=D0=B8=20+=202=20viz)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Сделано: 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 главах одной строкой / + + diff --git a/frontend/textbooks/algebra_7_ch2.html b/frontend/textbooks/algebra_7_ch2.html index a3ce418..d7caa7c 100644 --- a/frontend/textbooks/algebra_7_ch2.html +++ b/frontend/textbooks/algebra_7_ch2.html @@ -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})"> + + @@ -1470,6 +1472,13 @@ function buildP12(){ +trainerHTML('p12-iv3', 4, 'результат') +''; + /* INTERACTIVE 4: Геометрическая визуализация квадрата суммы */ + html += '
' + +'
ИНТЕРАКТИВ 4
Геометрическая визуализация $(a \\pm b)^2$
' + +'
Большой квадрат со стороной $(a+b)$ разделён на 4 цветные области. Подвигай $a, b$ — увидишь живое доказательство формулы! Кликни цвет → подсветка в формуле.
' + +'
' + +'
'; + html += secNav('p11', 'p13') + readButton('p12'); box.innerHTML = html; renderMath(box); @@ -1510,6 +1519,15 @@ function buildP12(){ onComplete:(s,n)=>{ if(s===n){ addXp(12,'p12-iv3'); bumpProgress('p12',20); } else if(s>=2){ addXp(5,'p12-iv3'); bumpProgress('p12',10); } } }); + /* Init quadrat suммы viz from alg7-fx.js */ + if(window.ALG7 && window.ALG7.buildQuadSumViz){ + window.ALG7.buildQuadSumViz(document.getElementById('p12-iv4-viz-host')); + } else { + /* defer if not loaded yet */ + const _try = ()=>{ if(window.ALG7 && window.ALG7.buildQuadSumViz){ window.ALG7.buildQuadSumViz(document.getElementById('p12-iv4-viz-host')); } else setTimeout(_try, 100); }; + _try(); + } + wireReadBtn('p12'); } function buildP13(){ @@ -1548,6 +1566,13 @@ function buildP13(){ +trainerHTML('p13-iv2', 5, 'результат') +''; + /* INTERACTIVE 3: Анимированная визуализация $a^2 - b^2 = (a-b)(a+b)$ */ + html += '
' + +'
ИНТЕРАКТИВ 3
Анимация: $a^2 - b^2 = (a-b)(a+b)$
' + +'
Из квадрата $a^2$ вырезали малый квадрат $b^2$. Жми кнопку «Шаг» — L-форма «расклеится» и соберётся в прямоугольник со сторонами $(a-b)$ и $(a+b)$. Это геометрическое доказательство формулы!
' + +'
' + +'
'; + html += secNav('p12', 'p14') + readButton('p13'); box.innerHTML = html; renderMath(box); @@ -1576,6 +1601,14 @@ function buildP13(){ onComplete:(s,n)=>{ if(s===n){ addXp(12,'p13-iv2'); bumpProgress('p13',22); } else if(s>=3){ addXp(6,'p13-iv2'); bumpProgress('p13',12); } } }); + /* Init diff-squares viz from alg7-fx.js */ + if(window.ALG7 && window.ALG7.buildDiffSquaresViz){ + window.ALG7.buildDiffSquaresViz(document.getElementById('p13-iv3-viz-host')); + } else { + const _try = ()=>{ if(window.ALG7 && window.ALG7.buildDiffSquaresViz){ window.ALG7.buildDiffSquaresViz(document.getElementById('p13-iv3-viz-host')); } else setTimeout(_try, 100); }; + _try(); + } + wireReadBtn('p13'); } function buildP14(){ diff --git a/frontend/textbooks/algebra_7_ch3.html b/frontend/textbooks/algebra_7_ch3.html index 874867f..e43a62e 100644 --- a/frontend/textbooks/algebra_7_ch3.html +++ b/frontend/textbooks/algebra_7_ch3.html @@ -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})"> + +