Кликни цветную область — она «подсветится» в формуле
'
+ + '
';
+
+ 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 += '';
+ /* 2. a*b (top-right, оранжевый) */
+ html += '';
+ /* 3. b*a (bottom-left, оранжевый) */
+ html += '';
+ /* 4. b² (bottom-right, зелёный) */
+ html += '';
+ /* Подписи */
+ if(aPx > 32) html += 'a²='+(a*a)+'';
+ if(bPx > 22 && aPx > 28) html += 'ab='+(a*b)+'';
+ if(bPx > 22 && aPx > 28) html += 'ab='+(a*b)+'';
+ if(bPx > 32) html += 'b²='+(b*b)+'';
+ /* Стороны (внешняя разметка) */
+ html += 'a='+a+'';
+ html += 'b='+b+'';
+ html += 'сторона = a+b = '+(a+b)+'';
+ /* Скобка снизу */
+ html += '';
+ html += '';
+ html += '';
+ /* Формула */
+ 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 += '$b \\ge a$ — выбери $b < a$';
+ formula.innerHTML = 'Условие: $b < a$ для $(a-b)^2$';
+ } else {
+ const diff = a - b;
+ const dPx = diff * unit;
+ /* (a-b)² в углу (красный) */
+ html += '';
+ /* Полосы 2ab внутри */
+ html += '';
+ html += '';
+ /* b² в углу */
+ html += '';
+ /* Подписи */
+ if(dPx > 30) html += '(a-b)²='+(diff*diff)+'';
+ if(bPx > 22 && dPx > 25) html += ''+(diff*b)+'';
+ if(bPx > 22 && dPx > 25) html += ''+(diff*b)+'';
+ if(bPx > 30) html += 'b²='+(b*b)+'';
+ html += 'сторона a='+a+'; b='+b+'; a−b='+diff+'';
+ /* Формула */
+ 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 = ''
+ + '
'
+ + '
'
+ + ''
+ + ''
+ + '
'
+ + ''
+ + ''
+ + ''
+ + '
';
+
+ 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 = 'Выбери $b < a$';
+ formula.innerHTML = 'Условие: $b < a$';
+ 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 += 'a² (сторона a='+a+')';
+ /* Большой квадрат (рыжий) */
+ html += '';
+ /* Голубой квадрат b² в правом верхнем углу */
+ if(stage >= 0){
+ html += '';
+ html += 'b²='+(b*b)+'';
+ }
+ /* Подпись большой стороны */
+ html += 'a²='+(a*a)+'';
+
+ /* === ЭТАП 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 += '';
+ html += 'разрез';
+ }
+ /* Этап 2: показываем «улетающие» части и финальный прямоугольник справа */
+ if(stage === 2){
+ /* Призрак исходного квадрата */
+ html += '';
+ /* Финальный прямоугольник (a-b) × (a+b) справа */
+ html += '(a-b)(a+b) = '+(diff*sum)+'';
+ /* Часть 1: нижний прямоугольник a × (a-b) — поворачиваем в финале на правую часть */
+ html += '';
+ html += 'a·(a-b)='+(a*diff)+'';
+ /* Часть 2: верхний-левый прямоугольник (a-b) × b — приклеиваем к правому концу */
+ html += '';
+ html += 'b(a-b)='+(b*diff)+'';
+ /* Подписи сторон финального прямоугольника */
+ html += 'a+b='+sum+'';
+ html += 'a-b='+diff+'';
+ /* Линия разделения */
+ html += '';
+ }
+
+ 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();
+};
+
+})();
diff --git a/frontend/textbooks/algebra_7_ch1.html b/frontend/textbooks/algebra_7_ch1.html
index 83304b3..40bfd76 100644
--- a/frontend/textbooks/algebra_7_ch1.html
+++ b/frontend/textbooks/algebra_7_ch1.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})">
+
+
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$ — увидишь живое доказательство формулы! Кликни цвет → подсветка в формуле.
Из квадрата $a^2$ вырезали малый квадрат $b^2$. Жми кнопку «Шаг» — L-форма «расклеится» и соберётся в прямоугольник со сторонами $(a-b)$ и $(a+b)$. Это геометрическое доказательство формулы!