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>
2026-05-28 23:25:02 +03:00
parent e1c05da294
commit 790c2e9445
6 changed files with 745 additions and 0 deletions
@@ -0,0 +1,416 @@
+/* alg7-fx.js — универсальные эффекты для всех глав Алгебры 7
+ * Подключается всеми ch1..ch4. Автоматически:
+ *  - наблюдает за элементами .feedback, при появлении .ok → pulse + комбо,
+ *    при .fail → shake + сброс комбо
+ *  - показывает значок комбо при сериях 3/5/10 правильных подряд
+ *  - даёт бонусный XP через global addXp(), если он определён
+ *
+ * Публичный API на window.ALG7:
+ *   ALG7.shake(el), ALG7.pulse(el)
+ *   ALG7.combo, ALG7.maxCombo, ALG7.resetCombo()
+ *   ALG7.buildQuadSumViz(container)    — виз. квадрата суммы (Ch2 §12)
+ *   ALG7.buildDiffSquaresViz(container)— виз. разности квадратов (Ch2 §13)
+ */
+(function(){
+'use strict';
+
+if (window.ALG7 && window.ALG7.__installed) return;
+const ALG7 = window.ALG7 = window.ALG7 || {};
+ALG7.__installed = true;
+
+ALG7.combo = 0;
+ALG7.maxCombo = 0;
+
+/* === ANIMATIONS === */
+ALG7.shake = function(el){
+  if(!el) return;
+  el.classList.remove('alg7-shake');
+  void el.offsetWidth;
+  el.classList.add('alg7-shake');
+  setTimeout(()=>el.classList.remove('alg7-shake'), 600);
+};
+ALG7.pulse = function(el){
+  if(!el) return;
+  el.classList.remove('alg7-pulse');
+  void el.offsetWidth;
+  el.classList.add('alg7-pulse');
+  setTimeout(()=>el.classList.remove('alg7-pulse'), 950);
+};
+
+ALG7.resetCombo = function(silent){
+  if(ALG7.combo > 0 && !silent){
+    /* fade streak indicator */
+    const s = document.querySelector('.alg7-streak');
+    if(s){ s.style.opacity = '0'; setTimeout(()=>{ s.classList.remove('show'); s.style.opacity = ''; }, 300); }
+  }
+  ALG7.combo = 0;
+};
+
+function _ensureStreak(){
+  let s = document.querySelector('.alg7-streak');
+  if(!s){
+    s = document.createElement('div');
+    s.className = 'alg7-streak';
+    s.innerHTML = '<svg class="ic-fire" viewBox="0 0 24 24" fill="#fff7ed"><path d="M12 2c-1 4-5 5-5 10a5 5 0 0 0 10 0c0-3-2-5-2-7 0-1 1-1.5 0-3z M9 16c0-2 1.5-3 3-3 1 2 2 2 2 4a2.5 2.5 0 0 1-5 0z" /></svg><span class="streak-text">3</span>';
+    document.body.appendChild(s);
+  }
+  return s;
+}
+
+function _showStreak(n){
+  const s = _ensureStreak();
+  s.classList.add('show');
+  s.querySelector('.streak-text').textContent = '×' + n;
+}
+
+function _showComboBadge(n, bonusXp){
+  const badge = document.createElement('div');
+  badge.className = 'alg7-combo-badge';
+  badge.innerHTML = '<svg class="ic-fire" viewBox="0 0 24 24" fill="#fff7ed"><path d="M12 2c-1 4-5 5-5 10a5 5 0 0 0 10 0c0-3-2-5-2-7 0-1 1-1.5 0-3z M9 16c0-2 1.5-3 3-3 1 2 2 2 2 4a2.5 2.5 0 0 1-5 0z" /></svg> КОМБО <span class="badge-x">×' + n + '</span> +' + bonusXp + ' XP';
+  /* position center top-ish */
+  const vw = window.innerWidth, vh = window.innerHeight;
+  badge.style.left = (vw / 2 - 130) + 'px';
+  badge.style.top = (vh / 2 - 80) + 'px';
+  document.body.appendChild(badge);
+  setTimeout(()=>badge.remove(), 2300);
+}
+
+function _addSparkles(el){
+  if(!el) return;
+  const r = el.getBoundingClientRect();
+  for(let i = 0; i < 6; i++){
+    const sp = document.createElement('div');
+    sp.className = 'alg7-sparkle';
+    sp.style.left = (r.left + r.width * Math.random()) + 'px';
+    sp.style.top = (r.top + r.height * Math.random()) + 'px';
+    sp.style.position = 'fixed';
+    sp.style.zIndex = '9999';
+    sp.style.animationDelay = (i * 60) + 'ms';
+    document.body.appendChild(sp);
+    setTimeout(()=>sp.remove(), 1000);
+  }
+}
+
+ALG7.onCorrect = function(elm){
+  ALG7.combo++;
+  if(ALG7.combo > ALG7.maxCombo) ALG7.maxCombo = ALG7.combo;
+  if(elm) { ALG7.pulse(elm); _addSparkles(elm); }
+  if(ALG7.combo >= 3) _showStreak(ALG7.combo);
+  /* милестоны: 3, 5, 10 — бонусные XP */
+  const milestones = { 3:5, 5:15, 10:50, 15:75, 20:100 };
+  if(milestones[ALG7.combo]){
+    const bonus = milestones[ALG7.combo];
+    _showComboBadge(ALG7.combo, bonus);
+    if(typeof window.addXp === 'function') window.addXp(bonus, 'combo-' + ALG7.combo);
+  }
+};
+
+ALG7.onWrong = function(elm){
+  if(elm) ALG7.shake(elm);
+  ALG7.resetCombo();
+};
+
+/* === АВТО-ХУК НА FEEDBACK ЧЕРЕЗ MUTATIONOBSERVER === */
+const _seenFeedback = new WeakMap();
+function _processFeedback(el){
+  const display = window.getComputedStyle(el).display;
+  if(display === 'none') return;
+  const isOk = el.classList.contains('ok');
+  const isFail = el.classList.contains('fail');
+  if(!isOk && !isFail) return;
+  /* Дебаунс — каждый элемент обрабатываем не чаще раза в 700мс */
+  const now = Date.now();
+  const last = _seenFeedback.get(el) || 0;
+  if(now - last < 700) return;
+  _seenFeedback.set(el, now);
+
+  /* Найти ближайший .wg или родительскую карточку */
+  const target = el.closest('.wg') || el.closest('.card') || el.parentElement;
+  if(isOk) ALG7.onCorrect(target);
+  else ALG7.onWrong(target);
+}
+
+function _initObserver(){
+  if(!document.body) { setTimeout(_initObserver, 50); return; }
+  const obs = new MutationObserver(muts => {
+    for(const m of muts){
+      if(m.type === 'attributes'){
+        const t = m.target;
+        if(t && t.classList && t.classList.contains('feedback')) _processFeedback(t);
+      } else if(m.type === 'childList'){
+        m.addedNodes && m.addedNodes.forEach(n => {
+          if(n.nodeType === 1 && n.classList && n.classList.contains('feedback')) _processFeedback(n);
+        });
+      }
+    }
+  });
+  obs.observe(document.body, { subtree:true, attributes:true, childList:true, attributeFilter:['class','style'] });
+}
+
+if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', _initObserver);
+else _initObserver();
+
+
+/* ============================================================
+   ВИЗУАЛИЗАТОР КВАДРАТА СУММЫ (Ch2 §12)
+   Геометрическое доказательство (a+b)² = a² + 2ab + b²
+   ============================================================ */
+ALG7.buildQuadSumViz = function(container){
+  if(!container) return;
+  container.innerHTML = ''
+    + '<div class="alg7-qsum-stage">'
+    +   '<div class="alg7-qsum-controls">'
+    +     '<label>$a$ = <b id="alg7-qsum-a">3</b><input type="range" id="alg7-qsum-a-sl" min="1" max="6" step="1" value="3"></label>'
+    +     '<label>$b$ = <b id="alg7-qsum-b">2</b><input type="range" id="alg7-qsum-b-sl" min="1" max="5" step="1" value="2"></label>'
+    +   '</div>'
+    +   '<div class="alg7-qsum-mode">'
+    +     '<button data-mode="sum" class="active">Сумма $(a+b)$</button>'
+    +     '<button data-mode="diff">Разность $(a-b)$</button>'
+    +   '</div>'
+    +   '<svg class="alg7-qsum-svg" id="alg7-qsum-svg" viewBox="0 0 320 320"></svg>'
+    +   '<div class="alg7-qsum-formula" id="alg7-qsum-formula"></div>'
+    +   '<div style="font-size:.85rem;color:var(--muted);text-align:center;max-width:380px">Кликни цветную область — она «подсветится» в формуле</div>'
+    + '</div>';
+
+  const aSl = container.querySelector('#alg7-qsum-a-sl');
+  const bSl = container.querySelector('#alg7-qsum-b-sl');
+  const aV = container.querySelector('#alg7-qsum-a');
+  const bV = container.querySelector('#alg7-qsum-b');
+  const svg = container.querySelector('#alg7-qsum-svg');
+  const formula = container.querySelector('#alg7-qsum-formula');
+  const modeButtons = container.querySelectorAll('.alg7-qsum-mode button');
+  let mode = 'sum';
+
+  function render(){
+    const a = +aSl.value;
+    const b = +bSl.value;
+    aV.textContent = a;
+    bV.textContent = b;
+
+    const isSum = mode === 'sum';
+    /* Масштаб: общая сторона = a + b (для sum) или a (для diff) */
+    const side = isSum ? (a + b) : a;
+    const PX = 300; /* размер квадрата в px */
+    const offX = 10, offY = 10;
+    const unit = PX / side;
+    const aPx = a * unit;
+    const bPx = b * unit;
+
+    let html = '';
+    if(isSum){
+      /* Большой квадрат (a+b) × (a+b) разбит на 4 области:
+         a×a (top-left), a×b (top-right), b×a (bottom-left), b×b (bottom-right) */
+      /* 1. a² (top-left, красный) */
+      html += '<rect class="area-aa" x="'+offX+'" y="'+offY+'" width="'+aPx+'" height="'+aPx+'" data-part="aa" rx="2"/>';
+      /* 2. a*b (top-right, оранжевый) */
+      html += '<rect class="area-ab" x="'+(offX+aPx)+'" y="'+offY+'" width="'+bPx+'" height="'+aPx+'" data-part="ab1" rx="2"/>';
+      /* 3. b*a (bottom-left, оранжевый) */
+      html += '<rect class="area-ab" x="'+offX+'" y="'+(offY+aPx)+'" width="'+aPx+'" height="'+bPx+'" data-part="ab2" rx="2"/>';
+      /* 4. b² (bottom-right, зелёный) */
+      html += '<rect class="area-bb" x="'+(offX+aPx)+'" y="'+(offY+aPx)+'" width="'+bPx+'" height="'+bPx+'" data-part="bb" rx="2"/>';
+      /* Подписи */
+      if(aPx > 32) html += '<text class="area-label" x="'+(offX+aPx/2)+'" y="'+(offY+aPx/2+5)+'">a²='+(a*a)+'</text>';
+      if(bPx > 22 && aPx > 28) html += '<text class="area-label" x="'+(offX+aPx+bPx/2)+'" y="'+(offY+aPx/2+5)+'">ab='+(a*b)+'</text>';
+      if(bPx > 22 && aPx > 28) html += '<text class="area-label" x="'+(offX+aPx/2)+'" y="'+(offY+aPx+bPx/2+5)+'">ab='+(a*b)+'</text>';
+      if(bPx > 32) html += '<text class="area-label" x="'+(offX+aPx+bPx/2)+'" y="'+(offY+aPx+bPx/2+5)+'">b²='+(b*b)+'</text>';
+      /* Стороны (внешняя разметка) */
+      html += '<text x="'+(offX+aPx/2)+'" y="'+(offY+PX+22)+'" text-anchor="middle" font-size="13" fill="#475569" font-family="JetBrains Mono">a='+a+'</text>';
+      html += '<text x="'+(offX+aPx+bPx/2)+'" y="'+(offY+PX+22)+'" text-anchor="middle" font-size="13" fill="#475569" font-family="JetBrains Mono">b='+b+'</text>';
+      html += '<text x="'+(offX+PX/2)+'" y="'+(offY-2)+'" text-anchor="middle" font-size="12" fill="#1e293b" font-weight="700" font-family="Unbounded">сторона = a+b = '+(a+b)+'</text>';
+      /* Скобка снизу */
+      html += '<line x1="'+offX+'" y1="'+(offY+PX+4)+'" x2="'+(offX+PX)+'" y2="'+(offY+PX+4)+'" stroke="#94a3b8" stroke-width="1.2"/>';
+      html += '<line x1="'+offX+'" y1="'+(offY+PX+4)+'" x2="'+offX+'" y2="'+(offY+PX+10)+'" stroke="#94a3b8" stroke-width="1.2"/>';
+      html += '<line x1="'+(offX+PX)+'" y1="'+(offY+PX+4)+'" x2="'+(offX+PX)+'" y2="'+(offY+PX+10)+'" stroke="#94a3b8" stroke-width="1.2"/>';
+      /* Формула */
+      formula.innerHTML =
+        '$(' + a + ' + ' + b + ')^2 = ' +
+        '\\underbrace{' + a + '^2}_{\\color{#dc2626}{' + (a*a) + '}} + ' +
+        '\\underbrace{2 \\cdot ' + a + ' \\cdot ' + b + '}_{\\color{#d97706}{' + (2*a*b) + '}} + ' +
+        '\\underbrace{' + b + '^2}_{\\color{#047857}{' + (b*b) + '}} = ' +
+        ((a+b)*(a+b)) + '$';
+    } else {
+      /* DIFF mode: показываем (a-b)² внутри a×a, выделяя верхний-левый угол */
+      if(b >= a){
+        html += '<text x="160" y="160" text-anchor="middle" font-size="14" fill="#dc2626" font-family="Inter,sans-serif">$b \\ge a$ — выбери $b < a$</text>';
+        formula.innerHTML = '<span style="color:#dc2626">Условие: $b < a$ для $(a-b)^2$</span>';
+      } else {
+        const diff = a - b;
+        const dPx = diff * unit;
+        /* (a-b)² в углу (красный) */
+        html += '<rect class="area-aa" x="'+offX+'" y="'+offY+'" width="'+dPx+'" height="'+dPx+'" rx="2"/>';
+        /* Полосы 2ab внутри */
+        html += '<rect class="area-ab" x="'+(offX+dPx)+'" y="'+offY+'" width="'+bPx+'" height="'+dPx+'" rx="2"/>';
+        html += '<rect class="area-ab" x="'+offX+'" y="'+(offY+dPx)+'" width="'+dPx+'" height="'+bPx+'" rx="2"/>';
+        /* b² в углу */
+        html += '<rect class="area-bb" x="'+(offX+dPx)+'" y="'+(offY+dPx)+'" width="'+bPx+'" height="'+bPx+'" rx="2"/>';
+        /* Подписи */
+        if(dPx > 30) html += '<text class="area-label" x="'+(offX+dPx/2)+'" y="'+(offY+dPx/2+5)+'">(a-b)²='+(diff*diff)+'</text>';
+        if(bPx > 22 && dPx > 25) html += '<text class="area-label" x="'+(offX+dPx+bPx/2)+'" y="'+(offY+dPx/2+5)+'">'+(diff*b)+'</text>';
+        if(bPx > 22 && dPx > 25) html += '<text class="area-label" x="'+(offX+dPx/2)+'" y="'+(offY+dPx+bPx/2+5)+'">'+(diff*b)+'</text>';
+        if(bPx > 30) html += '<text class="area-label" x="'+(offX+dPx+bPx/2)+'" y="'+(offY+dPx+bPx/2+5)+'">b²='+(b*b)+'</text>';
+        html += '<text x="'+(offX+PX/2)+'" y="'+(offY-2)+'" text-anchor="middle" font-size="12" fill="#1e293b" font-weight="700" font-family="Unbounded">сторона a='+a+'; b='+b+'; a−b='+diff+'</text>';
+        /* Формула */
+        formula.innerHTML =
+          '$(' + a + ' - ' + b + ')^2 = a^2 - 2ab + b^2 = ' +
+          a + '^2 - 2 \\cdot ' + a + ' \\cdot ' + b + ' + ' + b + '^2 = ' +
+          (a*a) + ' - ' + (2*a*b) + ' + ' + (b*b) + ' = ' + (diff*diff) + '$';
+      }
+    }
+    svg.innerHTML = html;
+    if(window.renderMathInElement) try{ window.renderMathInElement(formula); }catch(e){}
+
+    /* Hover-эффект: при клике подсветить термин */
+    svg.querySelectorAll('rect[data-part]').forEach(r=>{
+      r.style.cursor = 'pointer';
+      r.addEventListener('click', ()=>{
+        const part = r.dataset.part;
+        svg.querySelectorAll('rect.area-aa, rect.area-ab, rect.area-bb').forEach(x=>x.classList.add('dim'));
+        const sameClass = part==='aa' ? 'area-aa' : (part==='bb' ? 'area-bb' : 'area-ab');
+        svg.querySelectorAll('.' + sameClass).forEach(x=>x.classList.remove('dim'));
+        setTimeout(()=>{ svg.querySelectorAll('rect.area-aa, rect.area-ab, rect.area-bb').forEach(x=>x.classList.remove('dim')); }, 1500);
+      });
+    });
+  }
+
+  aSl.addEventListener('input', render);
+  bSl.addEventListener('input', render);
+  modeButtons.forEach(btn => btn.addEventListener('click', ()=>{
+    modeButtons.forEach(b=>b.classList.remove('active'));
+    btn.classList.add('active');
+    mode = btn.dataset.mode;
+    render();
+  }));
+  render();
+};
+
+
+/* ============================================================
+   ВИЗУАЛИЗАТОР РАЗНОСТИ КВАДРАТОВ (Ch2 §13)
+   a² - b² = (a-b)(a+b) — анимация перестроения
+   ============================================================ */
+ALG7.buildDiffSquaresViz = function(container){
+  if(!container) return;
+  container.innerHTML = ''
+    + '<div class="alg7-dsq-stage">'
+    +   '<div class="alg7-qsum-controls">'
+    +     '<label>$a$ = <b id="alg7-dsq-a">5</b><input type="range" id="alg7-dsq-a-sl" min="3" max="8" step="1" value="5"></label>'
+    +     '<label>$b$ = <b id="alg7-dsq-b">2</b><input type="range" id="alg7-dsq-b-sl" min="1" max="6" step="1" value="2"></label>'
+    +   '</div>'
+    +   '<svg class="alg7-dsq-svg" id="alg7-dsq-svg" viewBox="0 0 460 280"></svg>'
+    +   '<div class="alg7-dsq-formula" id="alg7-dsq-formula"></div>'
+    +   '<button class="alg7-dsq-step-btn" id="alg7-dsq-step">'
+    +     '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:18px;height:18px"><polygon points="6 4 20 12 6 20 6 4"/></svg>'
+    +     '<span id="alg7-dsq-step-text">Шаг 1: вырезать $b^2$</span>'
+    +   '</button>'
+    + '</div>';
+
+  const aSl = container.querySelector('#alg7-dsq-a-sl');
+  const bSl = container.querySelector('#alg7-dsq-b-sl');
+  const aV = container.querySelector('#alg7-dsq-a');
+  const bV = container.querySelector('#alg7-dsq-b');
+  const svg = container.querySelector('#alg7-dsq-svg');
+  const formula = container.querySelector('#alg7-dsq-formula');
+  const stepBtn = container.querySelector('#alg7-dsq-step');
+  const stepText = container.querySelector('#alg7-dsq-step-text');
+
+  let stage = 0; /* 0 = большой a² с вырезанной b²; 1 = две части L-формы; 2 = собранный прямоугольник */
+
+  function render(){
+    const a = +aSl.value;
+    const b = +bSl.value;
+    aV.textContent = a;
+    bV.textContent = b;
+    if(b >= a){
+      svg.innerHTML = '<text x="230" y="140" text-anchor="middle" font-size="14" fill="#dc2626" font-family="Inter,sans-serif">Выбери $b &lt; a$</text>';
+      formula.innerHTML = '<span style="color:#dc2626">Условие: $b < a$</span>';
+      stepBtn.disabled = true;
+      return;
+    }
+    stepBtn.disabled = false;
+    const diff = a - b;
+    const sum = a + b;
+
+    /* Площади 200x200 для исходного, 200x200 для финального — рядом */
+    const PX = 200;
+    const unit = PX / Math.max(a, sum);  /* единичная клетка */
+    const aPx = a * unit;
+    const bPx = b * unit;
+    const dPx = diff * unit;
+    const sumPx = sum * unit;
+    const offX = 20, offY = 30;
+    const off2X = 250, off2Y = 30;
+
+    let html = '';
+
+    /* === ЭТАП 0 — исходное состояние === */
+    /* Левая сторона: большой квадрат a² */
+    html += '<text x="'+(offX+aPx/2)+'" y="'+(offY-8)+'" text-anchor="middle" font-size="12" fill="#1e293b" font-weight="700" font-family="Unbounded">a² (сторона a='+a+')</text>';
+    /* Большой квадрат (рыжий) */
+    html += '<rect class="big-square" x="'+offX+'" y="'+offY+'" width="'+aPx+'" height="'+aPx+'" rx="2"/>';
+    /* Голубой квадрат b² в правом верхнем углу */
+    if(stage >= 0){
+      html += '<rect class="small-square" x="'+(offX+aPx-bPx)+'" y="'+offY+'" width="'+bPx+'" height="'+bPx+'" rx="2"/>';
+      html += '<text class="label" x="'+(offX+aPx-bPx/2)+'" y="'+(offY+bPx/2+5)+'">b²='+(b*b)+'</text>';
+    }
+    /* Подпись большой стороны */
+    html += '<text class="label dark" x="'+(offX+aPx/2)+'" y="'+(offY+aPx/2+5)+'" style="font-size:14px;fill:#fff">a²='+(a*a)+'</text>';
+
+    /* === ЭТАП 1+ — L-форма (большой квадрат минус b²) разделена на 2 прямоугольника === */
+    /* L-форма состоит из двух частей:
+       - Нижний прямоугольник: a × (a-b)   = a × diff
+       - Верхний-левый прямоугольник: (a-b) × b = diff × b
+       Они собираются в прямоугольник (a-b) × (a+b)
+    */
+    /* Этап 1: показываем линию разреза в исходном квадрате */
+    if(stage === 1){
+      const cutY = offY + dPx; /* горизонтальная линия разреза на высоте a-b */
+      html += '<line x1="'+offX+'" y1="'+cutY+'" x2="'+(offX+aPx)+'" y2="'+cutY+'" stroke="#1e293b" stroke-width="2" stroke-dasharray="6 3"/>';
+      html += '<text x="'+(offX+aPx+20)+'" y="'+(cutY+4)+'" font-size="11" fill="#1e293b" font-family="JetBrains Mono">разрез</text>';
+    }
+    /* Этап 2: показываем «улетающие» части и финальный прямоугольник справа */
+    if(stage === 2){
+      /* Призрак исходного квадрата */
+      html += '<rect class="ghost-rect" x="'+offX+'" y="'+offY+'" width="'+aPx+'" height="'+aPx+'"/>';
+      /* Финальный прямоугольник (a-b) × (a+b) справа */
+      html += '<text x="'+(off2X+sumPx/2)+'" y="'+(off2Y-8)+'" text-anchor="middle" font-size="12" fill="#1e293b" font-weight="700" font-family="Unbounded">(a-b)(a+b) = '+(diff*sum)+'</text>';
+      /* Часть 1: нижний прямоугольник a × (a-b) — поворачиваем в финале на правую часть */
+      html += '<rect class="rect-piece" x="'+off2X+'" y="'+off2Y+'" width="'+(a*unit)+'" height="'+dPx+'" rx="2"/>';
+      html += '<text class="label" x="'+(off2X+a*unit/2)+'" y="'+(off2Y+dPx/2+5)+'">a·(a-b)='+(a*diff)+'</text>';
+      /* Часть 2: верхний-левый прямоугольник (a-b) × b — приклеиваем к правому концу */
+      html += '<rect class="rect-piece" x="'+(off2X+a*unit)+'" y="'+off2Y+'" width="'+bPx+'" height="'+dPx+'" rx="2"/>';
+      html += '<text class="label" x="'+(off2X+a*unit+bPx/2)+'" y="'+(off2Y+dPx/2+5)+'">b(a-b)='+(b*diff)+'</text>';
+      /* Подписи сторон финального прямоугольника */
+      html += '<text x="'+(off2X+sumPx/2)+'" y="'+(off2Y+dPx+18)+'" text-anchor="middle" font-size="11" fill="#475569" font-family="JetBrains Mono">a+b='+sum+'</text>';
+      html += '<text x="'+(off2X-8)+'" y="'+(off2Y+dPx/2+3)+'" text-anchor="end" font-size="11" fill="#475569" font-family="JetBrains Mono">a-b='+diff+'</text>';
+      /* Линия разделения */
+      html += '<line x1="'+(off2X+a*unit)+'" y1="'+off2Y+'" x2="'+(off2X+a*unit)+'" y2="'+(off2Y+dPx)+'" stroke="#fff" stroke-width="1.5" stroke-dasharray="4 3"/>';
+    }
+
+    svg.innerHTML = html;
+
+    /* Формула */
+    let formulaText;
+    if(stage === 0){
+      formulaText = '$a^2 - b^2 = ' + a + '^2 - ' + b + '^2 = ' + (a*a) + ' - ' + (b*b) + ' = ' + (a*a - b*b) + '$';
+      stepText.textContent = 'Шаг 1: разрезать L-форму';
+    } else if(stage === 1){
+      formulaText = 'Разрезаем L-форму горизонтально: $a \\cdot (a-b)$ + $(a-b) \\cdot b$';
+      stepText.textContent = 'Шаг 2: собрать в прямоугольник';
+    } else {
+      formulaText = '$a^2 - b^2 = (a-b)(a+b) = ' + diff + ' \\cdot ' + sum + ' = ' + (diff*sum) + '$ ✓';
+      stepText.textContent = 'Сбросить';
+    }
+    formula.innerHTML = formulaText;
+    if(window.renderMathInElement) try{ window.renderMathInElement(formula); }catch(e){}
+  }
+
+  stepBtn.addEventListener('click', ()=>{
+    stage = (stage + 1) % 3;
+    render();
+  });
+  aSl.addEventListener('input', ()=>{ stage = 0; render(); });
+  bSl.addEventListener('input', ()=>{ stage = 0; render(); });
+  render();
+};
+
+})();