feat(math6): обогащение всех глав — хук, разбор по шагам, факты в каждом §

Каждый содержательный параграф 6 глав дополнен (Sonnet, по главе):
- карточка «Где это в жизни» (реальный контекст темы);
- «Разбор по шагам» (нумерованный алгоритм решения);
- «А знаешь ли ты?» (интересный факт/история);
- доведено до ≥2 рабочих интерактивов (где было меньше — добавлены).
Движок/общие файлы не трогались; структура M6/порядок init сохранены.
Проверено: тесты math6 18/18, честный рендер 4 глав — контент появляется,
рантайм-ошибок нет (только jsdom scrollTo-заглушка).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/textbooks/math_6_ch1.html

@@ -110,6 +110,8 @@ function _round(n,d){ var p=Math.pow(10,d); return Math.round(n*p)/p; }
 /* ===================== § 1. ЗАПИСЬ И РАЗРЯДЫ ===================== */
 function buildP1(){
   var box=document.getElementById('p1-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','1.0',
+    '<p>Десятичные дроби окружают нас каждый день. Цена в чеке: <b>2,50 руб.</b> Температура тела: <b>36,6 °C</b>. Показание счётчика воды: <b>123,47 м³</b>. Даже спортивный результат на 100 метров объявляют с десятыми секунды: <b>9,58 с</b> — рекорд мира. Без умения читать эти цифры не обойтись нигде.</p>');
   h+=makeCard('theory','Что такое десятичная дробь','1.1',
     '<p><b>Десятичная дробь</b> — это дробь со знаменателем $10$, $100$, $1000$ и&nbsp;т.&nbsp;д. Такие дроби записывают <b>без знаменателя</b>, отделяя целую часть от дробной <b>запятой</b>.</p>'
     +'<p>$\\dfrac{7}{10}=0{,}7$ &nbsp;·&nbsp; $\\dfrac{25}{100}=0{,}25$ &nbsp;·&nbsp; $3\\dfrac{4}{100}=3{,}04$</p>'
@@ -122,6 +124,17 @@ function buildP1(){
   h+=makeCard('example','Читаем по разрядам','1.3',
     '<p>$0{,}7$ — семь десятых; &nbsp; $0{,}09$ — девять сотых; &nbsp; $5{,}28$ — пять целых двадцать восемь сотых.</p>'
     +'<p>Приписывание нулей <b>справа</b> не меняет дробь: $0{,}5=0{,}50=0{,}500$.</p>');
+  h+=makeCard('example','Разбор по шагам','1.4',
+    '<p>Запишем дробь $\\dfrac{305}{1000}$ в десятичном виде.</p>'
+    +'<ol style="padding-left:22px;line-height:2">'
+    +'<li>Считаем нули в знаменателе: $1\\underbrace{000}_{3}$ — три нуля.</li>'
+    +'<li>Значит, после запятой будет <b>3 цифры</b>.</li>'
+    +'<li>Числитель $305$ — три цифры: $3,\\,0,\\,5$.</li>'
+    +'<li>Записываем: $0{,}305$ — ноль целых триста пять тысячных.</li>'
+    +'<li>Проверка: десятые — $3$, сотые — $0$, тысячные — $5$. Верно!</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','1.5',
+    '<p>Запятую в записи дробей начали использовать в Европе около 400 лет назад. В большинстве стран разделителем служит <b>запятая</b> (Беларусь, Россия, Германия…), а в США и Великобритании — <b>точка</b>: $3.14$ и $3{,}14$ означают одно и то же число!</p>');
   h+='<div class="wg" id="p1-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Разрядный конструктор</div></div>'
     +'<div class="wg-help">Двигай ползунки разрядов — число собирается из целой части и десятых, сотых, тысячных.</div>'
     +'<div class="sliders">'
@@ -177,6 +190,8 @@ function buildP1(){
 /* ===================== § 2. СРАВНЕНИЕ И ОКРУГЛЕНИЕ ===================== */
 function buildP2(){
   var box=document.getElementById('p2-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','2.0',
+    '<p>Округление используется повсюду. Кассир округляет сдачу до копеек. Синоптик сообщает: «температура <b>минус 12 °C</b>», хотя прибор показал $-12{,}4$ °C. В спорте прыгун в длину прыгнул $7{,}847$ м — результат записывают как $7{,}84$ м (до сотых). Умение сравнивать дроби нужно, чтобы выбрать более выгодную цену или более тёплый день.</p>');
   h+=makeCard('rule','Как сравнивать десятичные дроби','2.1',
     '<p>1) Сначала сравнивают <b>целые</b> части: больше та дробь, у которой целая часть больше.</p>'
     +'<p>2) Если целые части равны — сравнивают <b>поразрядно</b> слева направо: десятые, потом сотые и&nbsp;т.&nbsp;д.</p>'
@@ -189,6 +204,16 @@ function buildP2(){
   h+=makeCard('example','Примеры','2.3',
     '<p>$0{,}9>0{,}89$, ведь $0{,}90>0{,}89$. &nbsp; $2{,}1<2{,}15$. &nbsp; $7{,}0=7$.</p>'
     +'<p>$12{,}96 \\approx 13{,}0$ (до десятых) — при округлении $9$ превратилось в $10$, перенос в целые.</p>');
+  h+=makeCard('example','Разбор по шагам','2.4',
+    '<p>Сравним $3{,}07$ и $3{,}7$.</p>'
+    +'<ol style="padding-left:22px;line-height:2">'
+    +'<li>Целые части: у обоих $3$. Равны — смотрим дальше.</li>'
+    +'<li>Уравняем знаки: $3{,}07$ и $3{,}70$.</li>'
+    +'<li>Десятые: $0 < 7$. Значит $3{,}07 < 3{,}7$.</li>'
+    +'</ol>'
+    +'<p>Округлим $4{,}853$ до <b>десятых</b>: смотрим на сотые — $5$. Так как $5 \\ge 5$, десятые увеличиваем: $4{,}9$.</p>');
+  h+=makeCard('theory','А знаешь ли ты?','2.5',
+    '<p>Правило «от 5 и выше — увеличиваем» знали ещё математики Древней Индии. Именно они первыми стали записывать дробные части чисел с помощью позиционной системы. Само слово «цифра» пришло из арабского языка — оттуда, откуда к нам пришла эта система записи чисел.</p>');
   h+='<div class="wg" id="p2-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Что больше?</div></div>'
     +'<div class="wg-help">Сравни два числа на координатной прямой и выбери верный знак.</div>'
     +'<div class="score-display"><span>Вопрос <b id="p2-ci">1</b> / 6</span><span>Очки: <b id="p2-cs">0</b> / 6</span></div>'
@@ -244,6 +269,8 @@ function buildP2(){
 /* ===================== § 3. КООРДИНАТНЫЙ ЛУЧ ===================== */
 function buildP3(){
   var box=document.getElementById('p3-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','3.0',
+    '<p>Координатный луч — основа любой шкалы вокруг нас: термометр, линейка, шкала весов, ось времени в редакторе видео. Когда ты видишь, что «стрелка показывает $36{,}6$», ты фактически читаешь координату точки на луче. Географические карты тоже построены на системе координат — из двух таких лучей!</p>');
   h+=makeCard('theory','Координатный луч','3.1',
     '<p><b>Координатный луч</b> — это луч с началом в точке $O$, которой соответствует число $0$, выбранным <b>единичным отрезком</b> и направлением.</p>'
     +'<p>Каждой точке луча соответствует <b>координата</b> — число, показывающее, на каком расстоянии (в единичных отрезках) от начала она находится.</p>');
@@ -252,6 +279,16 @@ function buildP3(){
     +'<p>$1{,}3$ лежит между $1$ и $2$, ближе к $1$; $2{,}5$ — ровно посередине между $2$ и $3$.</p>');
   h+=makeCard('example','Пример','3.3',
     '<p>Точка с координатой $0{,}4$ — четвёртое деление после нуля. Точка с координатой $1{,}8$ — восьмое деление после единицы.</p>');
+  h+=makeCard('example','Разбор по шагам','3.4',
+    '<p>Отметим точку с координатой $1{,}3$ на луче с единичным отрезком $1$ см.</p>'
+    +'<ol style="padding-left:22px;line-height:2">'
+    +'<li>Целая часть — $1$: отмечаем точку $1$ на луче.</li>'
+    +'<li>Дробная часть — $0{,}3$: надо пройти $3$ деления из $10$.</li>'
+    +'<li>Делим отрезок от $1$ до $2$ на $10$ равных частей.</li>'
+    +'<li>От точки $1$ идём вправо $3$ деления — вот наша точка $1{,}3$.</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','3.5',
+    '<p>Систему координат придумал французский математик и философ <b>Рене Декарт</b> в XVII веке — по легенде, он лежал в постели и наблюдал за мухой на потолке: «В каком месте потолка находится муха?» Именно этот вопрос навёл его на идею задавать положение точки двумя числами.</p>');
   h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прочитай координату</div></div>'
     +'<div class="wg-help">Определи координату отмеченной точки. Запятую вводи как точку или запятую.</div>'
     +'<div class="score-display"><span>Вопрос <b id="p3-ai">1</b> / 5</span><span>Очки: <b id="p3-as">0</b> / 5</span></div>'
@@ -306,6 +343,7 @@ function buildP3(){
 
 /* ===================== § 4. СЛОЖЕНИЕ И ВЫЧИТАНИЕ ===================== */
 function _dec(x){ var s=String(x), i=s.indexOf('.'); return i<0?0:s.length-i-1; }
+
 function _mant(x,d){ return Math.round(x*Math.pow(10,d)); }
 function _splitNum(x){ var s=String(x).replace(',','.').split('.'); return {i:s[0], f:s[1]||''}; }
 function _rnum(maxd){ var d=_ri(0,maxd==null?2:maxd); var m=_ri(1, d===0?99:(d===1?499:4999)); return m/Math.pow(10,d); }
@@ -317,6 +355,8 @@ function _colText(a,b,op){
 }
 function buildP4(){
   var box=document.getElementById('p4-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','4.0',
+    '<p>Сложение и вычитание десятичных дробей нужно каждый раз, когда ты платишь в магазине или считаешь сдачу. Купил булочку за <b>0,85 руб.</b> и сок за <b>1,4 руб.</b> — сколько всего? Ошибка в «запятой под запятой» стоит денег в прямом смысле. Кассовые программы делают это за тебя, но ошибки случаются — и тут на помощь приходит проверка вручную.</p>');
   h+=makeCard('rule','Сложение и вычитание «в столбик»','4.1',
     '<p>1) Записывают числа так, чтобы <b>запятая стояла под запятой</b>, одинаковые разряды — друг под другом.</p>'
     +'<p>2) Уравнивают число знаков после запятой <b>нулями</b>.</p>'
@@ -325,6 +365,18 @@ function buildP4(){
   h+=makeCard('example','Примеры','4.2',
     '<p>$3{,}4 + 12{,}65 = 3{,}40 + 12{,}65 = 16{,}05$.</p>'
     +'<p>$7 - 2{,}3 = 7{,}0 - 2{,}3 = 4{,}7$.</p>');
+  h+=makeCard('example','Разбор по шагам','4.3',
+    '<p>Вычислим $5{,}6 + 3{,}47$.</p>'
+    +'<ol style="padding-left:22px;line-height:2">'
+    +'<li>Уравниваем знаки: $5{,}60$ и $3{,}47$ (дописали ноль).</li>'
+    +'<li>Записываем столбиком: запятая строго под запятой.</li>'
+    +'<li>Складываем сотые: $0+7=7$.</li>'
+    +'<li>Складываем десятые: $6+4=10$ — пишем $0$, переносим $1$.</li>'
+    +'<li>Складываем единицы: $5+3+1=9$.</li>'
+    +'<li>Итог: $9{,}07$. Запятая — под запятыми.</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','4.4',
+    '<p>Самая частая ошибка школьников при сложении десятичных дробей — выровнять числа по <b>правому краю</b>, как натуральные. Из-за этого $3{,}4 + 12{,}65$ превращается в неверный «$12{,}99$» вместо правильного $16{,}05$. Запятая под запятой — золотое правило!</p>');
   h+='<div class="wg" id="p4-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Столбик: посчитай сам</div></div>'
     +'<div class="wg-help">Запятая под запятой — выполни действие и введи ответ (запятая или точка).</div>'
     +'<div class="score-display"><span>Пример <b id="p4-i">1</b> / 6</span><span>Очки: <b id="p4-s">0</b> / 6</span></div>'
@@ -387,12 +439,24 @@ function buildP4(){
 /* ===================== § 5. УМНОЖЕНИЕ И ДЕЛЕНИЕ НА 10, 100, 1000 ===================== */
 function buildP5(){
   var box=document.getElementById('p5-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','5.0',
+    '<p>Перевод единиц — это всегда умножение или деление на степень десяти. $3{,}5$ км = $3{,}5 \\cdot 1000 = 3500$ м. $750$ г = $750 \\div 1000 = 0{,}75$ кг. В магазине, на кухне, в физике — этот приём работает мгновенно в уме, без калькулятора. Запомни: умножать — запятая вправо, делить — влево.</p>');
   h+=makeCard('rule','Сдвиг запятой','5.1',
     '<p>Чтобы <b>умножить</b> десятичную дробь на $10$, $100$, $1000$, запятую переносят <b>вправо</b> на $1$, $2$, $3$ знака.</p>'
     +'<p>Чтобы <b>разделить</b> на $10$, $100$, $1000$, запятую переносят <b>влево</b> на $1$, $2$, $3$ знака.</p>'
     +'<p>Если цифр не хватает — дописывают <b>нули</b>: $3{,}5\\cdot 100 = 350$, &nbsp; $4\\div 100 = 0{,}04$.</p>');
   h+=makeCard('example','Примеры','5.2',
     '<p>$2{,}71\\cdot 10 = 27{,}1$ &nbsp;·&nbsp; $0{,}6\\cdot 1000 = 600$ &nbsp;·&nbsp; $58{,}3\\div 100 = 0{,}583$.</p>');
+  h+=makeCard('example','Разбор по шагам','5.3',
+    '<p>Вычислим $0{,}047 \\cdot 1000$.</p>'
+    +'<ol style="padding-left:22px;line-height:2">'
+    +'<li>У $1000$ три нуля, значит запятая сдвигается <b>вправо</b> на $3$ знака.</li>'
+    +'<li>Запись: $0{,}047$ → сдвигаем: $0\\mathbf{,}047$ → $00{,}47$ → $004{,}7$ → $047{,}$</li>'
+    +'<li>Убираем ведущие нули: $47$.</li>'
+    +'<li>Ответ: $0{,}047 \\cdot 1000 = 47$.</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','5.4',
+    '<p>Именно потому что в нашей системе счёта <b>10 цифр</b> (0–9), умножение на 10 такое простое — достаточно сдвинуть запятую. Если бы мы считали, как компьютеры, — в двоичной системе (двойками), — тогда так же просто работало бы умножение на $2$, $4$, $8$… Но умножение на $10$ было бы сложным!</p>');
   h+='<div class="wg" id="p5-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Куда сдвинуть запятую?</div></div>'
     +'<div class="wg-help">Выбери число и действие — посмотри, как и куда переносится запятая.</div>'
     +'<div class="sliders"><label>Число = <b id="p5-nv">3,45</b><input type="range" id="p5-n" min="0" max="5" value="2"></label></div>'
@@ -445,12 +509,25 @@ function buildP5(){
 /* ===================== § 6. УМНОЖЕНИЕ ДЕСЯТИЧНЫХ ДРОБЕЙ ===================== */
 function buildP6(){
   var box=document.getElementById('p6-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','6.0',
+    '<p>Умножение десятичных дробей — это цена × количество. Ткань стоит $3{,}5$ руб. за метр, тебе нужно $1{,}2$ м — сколько заплатить? Или: скорость $72{,}5$ км/ч, время $0{,}4$ ч — какое расстояние проедет машина? Все эти задачи решаются одним действием — умножением десятичных дробей.</p>');
   h+=makeCard('rule','Как умножать десятичные дроби','6.1',
     '<p>1) Умножают числа, <b>не обращая внимания на запятые</b> (как натуральные).</p>'
     +'<p>2) В произведении отделяют запятой <b>столько</b> цифр справа, сколько их после запятой у <b>обоих</b> множителей вместе.</p>');
   h+=makeCard('example','Пример','6.2',
     '<p>$1{,}2\\cdot 0{,}3$: умножаем $12\\cdot 3 = 36$; всего знаков после запятой $1+1=2$, значит $1{,}2\\cdot 0{,}3 = 0{,}36$.</p>'
     +'<p>$0{,}25\\cdot 4 = 1$ (знаков $2+0=2$: $100\\to 1{,}00 = 1$).</p>');
+  h+=makeCard('example','Разбор по шагам','6.3',
+    '<p>Вычислим $2{,}4 \\cdot 0{,}15$.</p>'
+    +'<ol style="padding-left:22px;line-height:2">'
+    +'<li>Считаем знаки: у $2{,}4$ — одна цифра после запятой, у $0{,}15$ — две. Итого: $1+2=3$.</li>'
+    +'<li>Множим как натуральные: $24 \\cdot 15 = 360$.</li>'
+    +'<li>В результате $360$ отсчитываем <b>3 цифры</b> справа налево: $360 \\to 0{,}360$.</li>'
+    +'<li>Убираем незначащий ноль: $0{,}36$.</li>'
+    +'<li>Ответ: $2{,}4 \\cdot 0{,}15 = 0{,}36$.</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','6.4',
+    '<p>Число $\\pi \\approx 3{,}14159\\ldots$ — бесконечная непериодическая дробь. Архимед вычислял её, умножая и деля вручную. Современные компьютеры рассчитали более <b>100 триллионов</b> знаков числа $\\pi$ после запятой — и конца им не видно!</p>');
   h+='<div class="wg" id="p6-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Считаем знаки после запятой</div></div>'
     +'<div class="wg-help">Двигай множители — смотри, как число знаков после запятой определяет ответ.</div>'
     +'<div class="sliders"><label>Первый = <b id="p6-av">1,2</b><input type="range" id="p6-asl" min="0" max="5" value="1"></label>'
@@ -496,17 +573,31 @@ function buildP6(){
 
 /* ===================== § 7. ДЕЛЕНИЕ НА НАТУРАЛЬНОЕ ЧИСЛО ===================== */
 function _gcd(a,b){ a=Math.abs(a);b=Math.abs(b); while(b){ var t=b; b=a%b; a=t; } return a||1; }
+
 function _finite(p,q){ var g=_gcd(p,q); q=q/g; while(q%2===0)q/=2; while(q%5===0)q/=5; return q===1; }
 function _fracDec(p,q){ var ip=Math.floor(p/q), rem=p%q; if(rem===0)return String(ip); var dg='',seen={},pos=0,ps=-1;
   while(rem!==0){ if(seen[rem]!==undefined){ ps=seen[rem]; break; } seen[rem]=pos; rem*=10; dg+=Math.floor(rem/q); rem%=q; pos++; }
   if(rem===0) return ip+','+dg; return ip+','+dg.slice(0,ps)+'('+dg.slice(ps)+')'; }
 function buildP7(){
   var box=document.getElementById('p7-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','7.0',
+    '<p>Деление используется, когда нужно разделить поровну: три друга складываются на подарок и платят $7{,}5$ руб. — сколько с каждого? Или: нитку длиной $3{,}6$ м нарезают на $4$ равных куска — какова длина каждого? Эти задачи решаются за секунды, если знать алгоритм деления уголком.</p>');
   h+=makeCard('rule','Деление десятичной дроби на натуральное число','7.1',
     '<p>Делят «уголком», как натуральные числа. Как только заканчивается <b>целая</b> часть делимого, в частном ставят <b>запятую</b> и продолжают деление.</p>'
     +'<p>Если делимое меньше делителя, целая часть частного равна $0$. Если деление «не заканчивается» — дописывают нули к делимому.</p>');
   h+=makeCard('example','Примеры','7.2',
     '<p>$7{,}2 \\div 3 = 2{,}4$ &nbsp;·&nbsp; $1 \\div 4 = 0{,}25$ &nbsp;·&nbsp; $9{,}6 \\div 8 = 1{,}2$</p>');
+  h+=makeCard('example','Разбор по шагам','7.3',
+    '<p>Вычислим $5{,}4 \\div 4$.</p>'
+    +'<ol style="padding-left:22px;line-height:2">'
+    +'<li>Делим целую часть: $5 \\div 4 = 1$, остаток $1$.</li>'
+    +'<li>Перешли к дробной части — ставим в частном <b>запятую</b>.</li>'
+    +'<li>Опускаем десятые: $10+4=14$. $14 \\div 4 = 3$, остаток $2$.</li>'
+    +'<li>Остаток есть, дописываем ноль к делимому: $20 \\div 4 = 5$, остаток $0$.</li>'
+    +'<li>Деление закончилось. Ответ: $5{,}4 \\div 4 = 1{,}35$.</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','7.4',
+    '<p>Алгоритм деления «уголком» (столбиком) использовали ещё в Средние века. Тогда его называли «галера» — схема записи напоминала паруса корабля. Сейчас мы рисуем уголок, но принцип тот же: делим по частям, не пугаясь больших чисел.</p>');
   h+='<div class="wg" id="p7-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Тренажёр деления</div></div>'
     +'<div class="wg-help">Раздели десятичную дробь на натуральное число. Ответ — десятичная дробь.</div>'
     +'<div class="score-display"><span>Пример <b id="p7-i">1</b> / 6</span><span>Очки: <b id="p7-s">0</b> / 6</span></div>'
@@ -556,11 +647,23 @@ function buildP7(){
 /* ===================== § 8. ДЕЛЕНИЕ НА ДЕСЯТИЧНУЮ ДРОБЬ ===================== */
 function buildP8(){
   var box=document.getElementById('p8-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','8.0',
+    '<p>Деление на десятичную дробь встречается при расчёте количества: купили $1{,}5$ м ткани по цене $0{,}75$ руб. за метр — сколько метров можно купить на $3$ руб.? Или: одна таблетка весит $0{,}25$ г, пачка весит $3$ г — сколько таблеток в пачке? Ответ: $3 \\div 0{,}25 = 12$.</p>');
   h+=makeCard('rule','Деление на десятичную дробь','8.1',
     '<p>Чтобы разделить на десятичную дробь, в <b>делимом и делителе</b> переносят запятую вправо на столько знаков, сколько их после запятой у <b>делителя</b>. Получается деление на <b>натуральное</b> число.</p>'
     +'<p>$4{,}5 \\div 0{,}5 = 45 \\div 5 = 9$ &nbsp;·&nbsp; $1{,}2 \\div 0{,}03 = 120 \\div 3 = 40$.</p>');
   h+=makeCard('example','Почему так можно','8.2',
     '<p>Деление — это дробь. Умножив делимое и делитель на одно и то же число ($10$, $100$…), значение дроби не меняется: $\\dfrac{4{,}5}{0{,}5}=\\dfrac{45}{5}=9$.</p>');
+  h+=makeCard('example','Разбор по шагам','8.3',
+    '<p>Вычислим $3{,}6 \\div 0{,}12$.</p>'
+    +'<ol style="padding-left:22px;line-height:2">'
+    +'<li>У делителя $0{,}12$ — два знака после запятой.</li>'
+    +'<li>Умножаем оба числа на $100$: $3{,}6 \\cdot 100 = 360$, &nbsp;$0{,}12 \\cdot 100 = 12$.</li>'
+    +'<li>Теперь делим натуральные числа: $360 \\div 12 = 30$.</li>'
+    +'<li>Ответ: $3{,}6 \\div 0{,}12 = 30$.</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','8.4',
+    '<p>Приём «умножить делимое и делитель на одно число» — это свойство дроби: числитель и знаменатель можно умножить на одно и то же (не ноль), и дробь не изменится. Это позволяет превращать любое деление на десятичную дробь в деление на целое число — удобный математический трюк!</p>');
   h+='<div class="wg" id="p8-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Превращаем в деление на натуральное</div></div>'
     +'<div class="wg-help">Выбери пример — увидишь, как перенос запятой превращает делитель в натуральное число.</div>'
     +'<div id="p8-pick" style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px"></div>'
@@ -605,12 +708,27 @@ function buildP8(){
 /* ===================== § 9. КОНЕЧНЫЕ И БЕСКОНЕЧНЫЕ ДРОБИ ===================== */
 function buildP9(){
   var box=document.getElementById('p9-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','9.0',
+    '<p>Треть пиццы на троих — это $1 \\div 3 = 0{,}3333\\ldots$ — бесконечная дробь! Поэтому на калькуляторе мы видим $0{,}333333$, а не точный ответ. Компьютеры хранят числа с ограниченным числом знаков после запятой, и это порой приводит к маленьким ошибкам. Понимание конечных и бесконечных дробей помогает предсказать, когда возможна погрешность.</p>');
   h+=makeCard('theory','Конечные и бесконечные десятичные дроби','9.1',
     '<p>Обыкновенную дробь обращают в десятичную <b>делением</b> числителя на знаменатель. Иногда деление заканчивается — получается <b>конечная</b> дробь ($\\tfrac{3}{4}=0{,}75$).</p>'
     +'<p>Иногда цифры начинают <b>повторяться</b> без конца — это <b>бесконечная периодическая</b> дробь. Повторяющуюся группу (период) пишут в скобках: $\\tfrac{1}{3}=0{,}(3)$, $\\tfrac{1}{6}=0{,}1(6)$.</p>');
   h+=makeCard('rule','Когда дробь конечная','9.2',
     '<p>Несократимая обыкновенная дробь обращается в <b>конечную</b> десятичную тогда и только тогда, когда в разложении её знаменателя есть только множители <b>2 и 5</b>.</p>'
     +'<p>$\\tfrac{7}{20}$ — конечная ($20=2^2\\cdot5$); $\\tfrac{5}{6}$ — бесконечная ($6=2\\cdot3$).</p>');
+  h+=makeCard('example','Разбор по шагам','9.3',
+    '<p>Определим вид дроби $\\dfrac{7}{12}$.</p>'
+    +'<ol style="padding-left:22px;line-height:2">'
+    +'<li>Сокращаем: $\\gcd(7,12)=1$ — дробь несократима.</li>'
+    +'<li>Разложим знаменатель: $12 = 2^2 \\cdot 3$.</li>'
+    +'<li>Есть множитель $3$ — значит дробь <b>бесконечная</b>.</li>'
+    +'<li>Проверка делением: $7 \\div 12 = 0{,}58333\\ldots = 0{,}58(3)$.</li>'
+    +'<li>Период — цифра $3$, он не заканчивается.</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','9.4',
+    '<details class="spoiler"><summary>Что такое число $0{,}(9)$? Нажми, чтобы узнать.</summary>'
+    +'<p>$0{,}999\\ldots = 0{,}(9) = 1$ — это не ошибка, это математический факт! Докажем: пусть $x = 0{,}(9)$. Тогда $10x = 9{,}(9)$. Вычитаем: $10x - x = 9{,}(9) - 0{,}(9) = 9$, откуда $9x=9$, $x=1$. Бесконечные дроби умеют удивлять!</p>'
+    +'</details>');
   h+='<div class="wg" id="p9-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Конечная или бесконечная?</div></div>'
     +'<div class="wg-help">Реши, обращается ли дробь в конечную десятичную (проверь множители знаменателя).</div>'
     +'<div class="score-display"><span>Вопрос <b id="p9-i">1</b> / 6</span><span>Очки: <b id="p9-s">0</b> / 6</span></div>'
@@ -661,11 +779,23 @@ function buildP9(){
 /* ===================== § 10. ПРЕОБРАЗОВАНИЯ ВЫРАЖЕНИЙ ===================== */
 function buildP10(){
   var box=document.getElementById('p10-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','10.0',
+    '<p>В реальных задачах числа бывают «смешанными»: рецепт требует $\\tfrac{1}{4}$ стакана масла, а у тебя весы, которые показывают $0{,}25$. Или задача по физике: скорость дана в виде $\\tfrac{3}{4}$ м/с, а нужно сложить с $0{,}5$ м/с. Умение свободно переходить между видами дробей — это математическая гибкость, которая пригодится и в химии, и в физике, и на кухне.</p>');
   h+=makeCard('rule','Обыкновенные и десятичные вместе','10.1',
     '<p>Десятичную дробь переводят в обыкновенную «по разрядам» и сокращают: $0{,}4=\\dfrac{4}{10}=\\dfrac{2}{5}$.</p>'
     +'<p>Обыкновенную дробь переводят в десятичную делением (если она конечная). В смешанном выражении удобно привести всё к <b>одному виду</b>.</p>');
   h+=makeCard('example','Пример','10.2',
     '<p>$0{,}2 + \\dfrac{1}{4} = \\dfrac{1}{5} + \\dfrac{1}{4} = \\dfrac{9}{20} = 0{,}45$, или сразу $0{,}2 + 0{,}25 = 0{,}45$.</p>');
+  h+=makeCard('example','Разбор по шагам','10.3',
+    '<p>Вычислим $\\dfrac{3}{4} - 0{,}2$.</p>'
+    +'<ol style="padding-left:22px;line-height:2">'
+    +'<li>Проверяем: $\\tfrac{3}{4}$ — конечная? Знаменатель $4=2^2$, только двойки. <b>Да</b>.</li>'
+    +'<li>Переводим: $\\tfrac{3}{4} = 3 \\div 4 = 0{,}75$.</li>'
+    +'<li>Вычитаем: $0{,}75 - 0{,}20 = 0{,}55$.</li>'
+    +'<li>Ответ: $\\dfrac{3}{4} - 0{,}2 = 0{,}55$.</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','10.4',
+    '<p>Перевод обыкновенных дробей в десятичные использовали картографы ещё в XVI веке при составлении морских карт. Фламандский математик <b>Симон Стевин</b> в 1585 году написал книгу «Десятина», где показал, как упрощает расчёты запись дробей через запятую. С его лёгкой руки эта запись распространилась по всей Европе.</p>');
   h+='<div class="wg" id="p10-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Сопоставь дробь и десятичную</div></div>'
     +'<div class="wg-help">Перетащи каждую десятичную дробь к равной ей обыкновенной (или нажми карточку, потом — ящик).</div>'
     +'<div class="dnd-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11V6a3 3 0 0 1 6 0v5"/><path d="M9 11h6v8a4 4 0 0 1-8 0z"/></svg> 5 десятичных — 5 ящиков</div>'
@@ -719,9 +849,21 @@ function buildP10(){
 /* ===================== § 12. МАТЕМАТИКА ВОКРУГ НАС ===================== */
 function buildApp(){
   var box=document.getElementById('app-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','12.0',
+    '<p>Этот параграф — про то, как математика работает вне учебника. Ты идёшь в магазин, оцениваешь погоду по температуре, проверяешь скорость на спидометре, сравниваешь время в соревнованиях — и везде тебе нужны десятичные дроби. Попробуй решить задачи так, как будто это реальная ситуация.</p>');
   h+=makeCard('theory','Десятичные дроби в жизни','12.1',
     '<p>Цены и сдача в магазине, рост и масса, показания счётчиков, спортивные результаты, средние значения — всё это <b>десятичные дроби</b>. Решим практические задачи.</p>'
     +'<p>В рублях, метрах, килограммах, секундах — десятичная дробь показывает «часть» единицы: $0{,}5$ кг — это полкилограмма, $1{,}25$ ч — это час с четвертью.</p>');
+  h+=makeCard('example','Разбор по шагам','12.2',
+    '<p>Задача: в магазине купили $1{,}5$ кг яблок по $2{,}4$ руб. за кг и $0{,}8$ кг груш по $3{,}5$ руб. за кг. Сколько заплатили всего?</p>'
+    +'<ol style="padding-left:22px;line-height:2">'
+    +'<li>Стоимость яблок: $1{,}5 \\cdot 2{,}4 = 3{,}60$ руб.</li>'
+    +'<li>Стоимость груш: $0{,}8 \\cdot 3{,}5 = 2{,}80$ руб.</li>'
+    +'<li>Итого: $3{,}60 + 2{,}80 = 6{,}40$ руб.</li>'
+    +'<li>Ответ: заплатили $6{,}4$ руб.</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','12.3',
+    '<p>Индекс массы тела (ИМТ) — показатель здоровья — это тоже десятичная дробь. Его считают по формуле: масса (кг) делить на рост (м) в квадрате. Например: масса $45$ кг, рост $1{,}5$ м: $45 \\div (1{,}5 \\cdot 1{,}5) = 45 \\div 2{,}25 = 20$. Это и есть ИМТ — совершенно нормальный показатель для шестиклассника!</p>');
   h+='<div class="wg" id="app-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Задачи из жизни</div></div>'
     +'<div class="wg-help">Реши практическую задачу. Ответ — число (запятая или точка), без единиц.</div>'
     +'<div class="score-display"><span>Задача <b id="app-i">1</b> / 6</span><span>Очки: <b id="app-s">0</b> / 6</span></div>'

frontend/textbooks/math_6_ch2.html

@@ -108,9 +108,19 @@ function grid100(p){ var s=''; for(var r=0;r<10;r++)for(var c=0;c<10;c++){ var i
 /* ===================== § 1. ПРОЦЕНТЫ ===================== */
 function buildP1(){
   var box=document.getElementById('p1-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','1.0',
+    '<p>Проценты окружают нас повсюду: скидка 30% в магазине, 5% годовых на вкладе, 12% жира в сметане, 90% влажности на улице. Даже рейтинг игрока в онлайн-игре — это процент побед. Тот, кто понимает проценты, не даст себя обмануть на распродаже и сможет выбрать выгодный вклад в банке.</p>');
   h+=makeCard('theory','Что такое процент','1.1',
     '<p><b>Процент</b> — это сотая доля числа. $1\\% = \\dfrac{1}{100} = 0{,}01$. Знак процента — $\\%$.</p>'
     +'<p>Всё число — это $100\\%$. Половина — $50\\%$, четверть — $25\\%$, пятая часть — $20\\%$.</p>');
+  h+=makeCard('example','Разбор по шагам','1.01',
+    '<p>Задача: переведи $35\\%$ в десятичную дробь и в обыкновенную дробь.</p>'
+    +'<ol><li>Вспоминаем: процент — сотая доля. Значит $35\\% = \\dfrac{35}{100}$.</li>'
+    +'<li>Чтобы получить десятичную дробь, делим числитель на знаменатель: $35 \\div 100 = 0{,}35$.</li>'
+    +'<li>Сокращаем обыкновенную дробь: $\\dfrac{35}{100} = \\dfrac{7}{20}$.</li>'
+    +'<li>Проверка обратно: $0{,}35 \\times 100 = 35\\%$ — верно!</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','1.02',
+    '<p>Слово «процент» происходит от латинского <i>pro centum</i> — «за сотню». В Древнем Риме торговцы брали плату за каждые 100 монет займа. Сегодня символ % используется во всём мире, хотя в некоторых странах пишут «pct» или «p.c.».</p>');
   h+=makeCard('rule','Перевод процентов','1.2',
     '<p>Проценты $\\to$ десятичная дробь: делим на $100$ (запятая влево на 2 знака): $35\\% = 0{,}35$.</p>'
     +'<p>Десятичная дробь $\\to$ проценты: умножаем на $100$: $0{,}7 = 70\\%$.</p>'
@@ -156,12 +166,27 @@ function buildP1(){
 /* ===================== § 2. ОСНОВНЫЕ ЗАДАЧИ НА ПРОЦЕНТЫ ===================== */
 function buildP2(){
   var box=document.getElementById('p2-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','2.0',
+    '<p>Три задачи на проценты — это три реальных вопроса. В магазине: «Сколько рублей составляет скидка 20% от цены 500 руб.?» — тип 1. В банке: «Если 150 руб. — это 30% моих сбережений, сколько у меня всего?» — тип 2. В спорте: «Команда выиграла 18 игр из 24 — какой это процент побед?» — тип 3. Умея решать все три, ты разберёшься в любой жизненной ситуации с процентами.</p>');
   h+=makeCard('rule','Три типа задач на проценты','2.1',
     '<p><b>1) Процент от числа.</b> Найти $m\\%$ от $a$: $\\;b = \\dfrac{a}{100}\\cdot m$.</p>'
     +'<p><b>2) Число по его проценту.</b> $b$ — это $m\\%$ от $a$, найти $a$: $\\;a = \\dfrac{b}{m}\\cdot 100$.</p>'
     +'<p><b>3) Процентное отношение.</b> Какой процент $b$ от $a$: $\\;m\\% = \\dfrac{b}{a}\\cdot 100\\%$.</p>');
-  h+=makeCard('example','Примеры','2.2',
+  h+=makeCard('example','Разбор по шагам','2.2',
-    '<p>$20\\%$ от $150$: $\\dfrac{150}{100}\\cdot 20 = 30$. &nbsp; $15$ — это $30\\%$ от $\\dfrac{15}{30}\\cdot 100 = 50$. &nbsp; $30$ от $120$: $\\dfrac{30}{120}\\cdot 100 = 25\\%$.</p>');
+    '<p><b>Тип 1.</b> Найти $20\\%$ от $150$.</p>'
+    +'<ol><li>Формула: $b = \\dfrac{a}{100}\\cdot m = \\dfrac{150}{100}\\cdot 20$.</li>'
+    +'<li>Вычисляем: $\\dfrac{150}{100} = 1{,}5$; $\\;1{,}5 \\cdot 20 = 30$.</li>'
+    +'<li>Ответ: $30$.</li></ol>'
+    +'<p><b>Тип 2.</b> $15$ — это $30\\%$ от какого числа?</p>'
+    +'<ol><li>Формула: $a = \\dfrac{b}{m}\\cdot 100 = \\dfrac{15}{30}\\cdot 100$.</li>'
+    +'<li>$\\dfrac{15}{30} = 0{,}5$; $\\;0{,}5 \\cdot 100 = 50$.</li>'
+    +'<li>Ответ: $50$.</li></ol>'
+    +'<p><b>Тип 3.</b> Какой процент $30$ составляет от $120$?</p>'
+    +'<ol><li>Формула: $m\\% = \\dfrac{b}{a}\\cdot 100\\% = \\dfrac{30}{120}\\cdot 100\\%$.</li>'
+    +'<li>$\\dfrac{30}{120} = 0{,}25$; $\\;0{,}25 \\cdot 100 = 25$.</li>'
+    +'<li>Ответ: $25\\%$.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','2.02',
+    '<p>В супермаркетах часто пишут «Скидка 50%», но рядом мелким шрифтом — «на второй товар». Это значит, что скидка не 50% от всей суммы, а лишь на половину покупки. Реальная скидка составляет только $25\\%$. Вот почему важно уметь точно считать проценты — чтобы не быть обманутым рекламой!</p>');
   h+='<div class="wg" id="p2-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Определи тип задачи</div></div>'
     +'<div class="wg-help">К какому из трёх типов относится задача?</div>'
     +'<div class="score-display"><span>Вопрос <b id="p2-i">1</b> / 5</span><span>Очки: <b id="p2-s">0</b> / 5</span></div>'
@@ -214,12 +239,22 @@ function buildP2(){
 /* ===================== § 3. ПРОПОРЦИЯ И ЕЁ СВОЙСТВА ===================== */
 function buildP3(){
   var box=document.getElementById('p3-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','3.0',
+    '<p>Пропорция — это равенство двух отношений. Кулинарный рецепт рассчитан на 4 порции, а нужно 6? Все ингредиенты надо увеличить в одном и том же отношении — это пропорция. Фотограф масштабирует снимок, сохраняя пропорции сторон. Архитектор строит модель здания в масштабе, используя пропорцию. Пропорция — это инструмент «справедливого пересчёта».</p>');
   h+=makeCard('theory','Отношение и пропорция','3.1',
     '<p><b>Отношение</b> двух чисел — их частное: $a:b=\\dfrac{a}{b}$. <b>Пропорция</b> — равенство двух отношений: $a:b = c:d$ (читается «$a$ относится к $b$, как $c$ к $d$»).</p>'
     +'<p>$a$ и $d$ — <b>крайние</b> члены, $b$ и $c$ — <b>средние</b>.</p>');
   h+=makeCard('rule','Основное свойство пропорции','3.2',
     '<p>Произведение крайних членов равно произведению средних: $\\;a\\cdot d = b\\cdot c$ («крест-накрест»).</p>'
     +'<p>Отсюда находят неизвестный член: из $a:b=c:x$ получаем $x = \\dfrac{b\\cdot c}{a}$.</p>');
+  h+=makeCard('example','Разбор по шагам','3.01',
+    '<p>Задача: решить пропорцию $3 : 4 = 15 : x$.</p>'
+    +'<ol><li>Запишем основное свойство пропорции: $3 \\cdot x = 4 \\cdot 15$.</li>'
+    +'<li>Вычисляем правую часть: $4 \\cdot 15 = 60$.</li>'
+    +'<li>Находим $x$: $x = \\dfrac{60}{3} = 20$.</li>'
+    +'<li>Проверка: $3 : 4 = 0{,}75$ и $15 : 20 = 0{,}75$ — отношения равны, пропорция верна!</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','3.02',
+    '<p>Древнегреческий математик Пифагор считал пропорцию основой красоты и гармонии. «Золотое сечение» $1 : 1{,}618$ — особая пропорция, которую можно найти в пропорциях тела человека, раковинах моллюсков и архитектуре Парфенона. Художники и архитекторы тысячи лет используют её для создания красивых произведений.</p>');
   h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Найди неизвестный член</div></div>'
     +'<div class="wg-help">Реши пропорцию «крест-накрест»: $x = \\dfrac{b\\cdot c}{a}$.</div>'
     +'<div class="score-display"><span>Задача <b id="p3-i">1</b> / 6</span><span>Очки: <b id="p3-s">0</b> / 6</span></div>'
@@ -265,12 +300,25 @@ function buildP3(){
 /* ===================== § 4. ПРЯМАЯ И ОБРАТНАЯ ЗАВИСИМОСТИ ===================== */
 function buildP4(){
   var box=document.getElementById('p4-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','4.0',
+    '<p>Представь, что едешь на велосипеде с постоянной скоростью: чем дольше едешь, тем больший путь проедешь — это прямая зависимость. Но если тот же путь надо проехать быстрее, скорость надо увеличить, а время уменьшится — это обратная зависимость. Ещё пример: чем больше друзей делят одну пиццу, тем меньше достаётся каждому. Распознав вид зависимости, можно правильно составить пропорцию и решить задачу.</p>');
   h+=makeCard('theory','Прямая пропорциональность','4.1',
     '<p>Величины <b>прямо пропорциональны</b>, если при увеличении одной в несколько раз другая увеличивается во <b>столько же</b> раз. Их отношение постоянно: $\\dfrac{y}{x}=k$.</p>'
     +'<p>Пример: при постоянной цене стоимость покупки прямо пропорциональна количеству товара.</p>');
   h+=makeCard('theory','Обратная пропорциональность','4.2',
     '<p>Величины <b>обратно пропорциональны</b>, если при увеличении одной в несколько раз другая во <b>столько же</b> раз уменьшается. Их произведение постоянно: $x\\cdot y=k$.</p>'
     +'<p>Пример: при постоянном пути время обратно пропорционально скорости.</p>');
+  h+=makeCard('example','Разбор по шагам','4.01',
+    '<p><b>Прямая:</b> 3 кг помидоров стоят 18 руб. Сколько стоят 5 кг?</p>'
+    +'<ol><li>Определяем вид зависимости: цена постоянна, значит стоимость и масса <b>прямо</b> пропорциональны.</li>'
+    +'<li>Коэффициент: $k = \\dfrac{18}{3} = 6$ руб/кг.</li>'
+    +'<li>Ответ: $5 \\cdot 6 = 30$ руб.</li></ol>'
+    +'<p><b>Обратная:</b> 4 рабочих делают ремонт за 6 дней. За сколько сделают 3 рабочих?</p>'
+    +'<ol><li>Зависимость <b>обратная</b>: чем меньше рабочих, тем дольше.</li>'
+    +'<li>Произведение постоянно: $4 \\cdot 6 = 24$.</li>'
+    +'<li>Ответ: $24 \\div 3 = 8$ дней.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','4.02',
+    '<p>Закон Ома в физике — это тоже пропорциональность. Сила тока прямо пропорциональна напряжению ($I = U/R$, при постоянном $R$) и обратно пропорциональна сопротивлению ($I = U/R$, при постоянном $U$). Изучая математику сегодня, ты уже готовишься к физике!</p>');
   h+='<div class="wg" id="p4-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прямая или обратная?</div></div>'
     +'<div class="wg-help">Определи вид зависимости в ситуации.</div>'
     +'<div class="score-display"><span>Вопрос <b id="p4-i">1</b> / 6</span><span>Очки: <b id="p4-s">0</b> / 6</span></div>'
@@ -326,10 +374,23 @@ function buildP4(){
 /* ===================== § 5. РЕШЕНИЕ ЗАДАЧ С ПОМОЩЬЮ ПРОПОРЦИЙ ===================== */
 function buildP5(){
   var box=document.getElementById('p5-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','5.0',
+    '<p>Пропорция — универсальный инструмент для пересчёта. Рецепт рассчитан на 6 человек, а пришло 10 — сколько муки нужно? Строитель знает, что на 12 м² нужно 3 мешка штукатурки, и считает, сколько нужно на 20 м². Врач пересчитывает дозу лекарства по весу пациента. Пропорция работает везде, где есть «пересчёт в том же соотношении».</p>');
   h+=makeCard('rule','Как решать задачи пропорцией','5.1',
     '<p>1) Обозначают неизвестное буквой $x$. 2) Записывают условие в две строки. 3) Если зависимость <b>прямая</b> — стрелки в одну сторону, составляют пропорцию напрямую; если <b>обратная</b> — одно из отношений переворачивают. 4) Решают «крест-накрест».</p>');
-  h+=makeCard('example','Пример','5.2',
+  h+=makeCard('example','Разбор по шагам','5.2',
-    '<p>За $3$ кг яблок заплатили $12$ руб. Сколько за $5$ кг? (прямая) $\\;3:12 = 5:x$, $x=\\dfrac{12\\cdot5}{3}=20$ руб.</p>');
+    '<p><b>Прямая пропорция:</b> За $3$ кг яблок заплатили $12$ руб. Сколько за $5$ кг?</p>'
+    +'<ol><li>Обозначаем: $x$ — стоимость $5$ кг. Зависимость прямая (больше кг — больше денег).</li>'
+    +'<li>Записываем пропорцию (стрелки в одну сторону): $3 : 5 = 12 : x$.</li>'
+    +'<li>Решаем крест-накрест: $3 \\cdot x = 12 \\cdot 5 = 60$.</li>'
+    +'<li>$x = 60 \\div 3 = 20$ руб. Ответ: $20$ руб.</li></ol>'
+    +'<p><b>Обратная пропорция:</b> $4$ трубы наполнят бак за $9$ мин. За сколько — $6$ труб?</p>'
+    +'<ol><li>Зависимость обратная: больше труб — меньше времени.</li>'
+    +'<li>Переворачиваем одно отношение: $4 : 6 = x : 9$.</li>'
+    +'<li>Крест-накрест: $4 \\cdot 9 = 6 \\cdot x$, значит $x = \\dfrac{36}{6} = 6$ мин.</li>'
+    +'<li>Ответ: $6$ минут.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','5.02',
+    '<p>Пропорциональный пересчёт используется в кулинарии всего мира. Французские шеф-повара называют это «scaling recipe» — масштабирование рецепта. Профессиональные повара делают это автоматически, но в основе — обычная пропорция из учебника математики 6 класса.</p>');
   h+='<div class="wg" id="p5-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Задачи на прямую пропорцию</div></div>'
     +'<div class="wg-help">Реши задачу с помощью прямой пропорции. Ответ — число.</div>'
     +'<div class="score-display"><span>Задача <b id="p5-i">1</b> / 6</span><span>Очки: <b id="p5-s">0</b> / 6</span></div>'
@@ -392,11 +453,23 @@ function buildP5(){
 /* ===================== § 6. МАСШТАБ ===================== */
 function buildP6(){
   var box=document.getElementById('p6-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','6.0',
+    '<p>Масштаб — везде, где большое изображают маленьким (или наоборот). Карта страны, план квартиры, схема метро, чертёж детали — всё это масштабные изображения. Даже Google Maps использует масштаб: приближая карту, ты уменьшаешь знаменатель (1:1000 вместо 1:1 000 000). Космические снимки со спутника имеют масштаб 1:50 000 000 и больше!</p>');
   h+=makeCard('theory','Что такое масштаб','6.1',
     '<p><b>Масштаб</b> — отношение длины отрезка на чертеже (карте) к длине соответствующего отрезка в реальности. Запись $1:N$ означает: $1$ см на карте соответствует $N$ см на местности.</p>'
     +'<p>Карта: реальное расстояние $=$ расстояние на карте $\\times N$. Чертёж детали может быть и крупнее ($N<1$).</p>');
-  h+=makeCard('example','Пример','6.2',
+  h+=makeCard('example','Разбор по шагам','6.2',
-    '<p>Масштаб $1:1000$. На карте $3$ см. Реально $3\\cdot 1000 = 3000$ см $= 30$ м.</p>');
+    '<p>Задача: масштаб $1:1000$. На карте $3$ см. Найди реальное расстояние.</p>'
+    +'<ol><li>Масштаб $1:1000$ означает: $1$ см на карте $= 1000$ см в реальности.</li>'
+    +'<li>На карте $3$ см, значит в реальности: $3 \\times 1000 = 3000$ см.</li>'
+    +'<li>Переводим в метры: $3000$ см $\\div 100 = 30$ м.</li>'
+    +'<li>Ответ: $30$ метров.</li></ol>'
+    +'<p>Обратная задача: масштаб $1:500$, реальное расстояние $25$ м. Найди длину на карте.</p>'
+    +'<ol><li>Переводим метры в сантиметры: $25$ м $= 2500$ см.</li>'
+    +'<li>Делим на знаменатель масштаба: $2500 \\div 500 = 5$ см.</li>'
+    +'<li>Ответ: $5$ см на карте.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','6.02',
+    '<p>Самая точная карта мира — не на бумаге, а в голове у миграционных птиц. Дрозд, летящий из Беларуси в Африку, преодолевает тысячи километров без единой карты. Учёные до сих пор выясняют, как именно птицы ориентируются — но уже ясно, что они инстинктивно «знают масштаб» и расстояния.</p>');
   h+='<div class="wg" id="p6-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Карта → местность</div></div>'
     +'<div class="wg-help">По расстоянию на карте найди реальное расстояние (ответ в метрах).</div>'
     +'<div class="score-display"><span>Задача <b id="p6-i">1</b> / 6</span><span>Очки: <b id="p6-s">0</b> / 6</span></div>'
@@ -444,9 +517,19 @@ function buildP6(){
 /* ===================== § 7. КРУГОВЫЕ ДИАГРАММЫ ===================== */
 function buildP7(){
   var box=document.getElementById('p7-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','7.0',
+    '<p>Круговые диаграммы используют журналисты, учёные, компании и государства. Диаграмма расходов бюджета страны, диаграмма состава воздуха (азот — $78\\%$, кислород — $21\\%$, прочее — $1\\%$), диаграмма времени твоего дня — всё это круговые диаграммы. Они мгновенно показывают, какая доля чего-либо наибольшая. Без понимания диаграмм сегодня не обойтись ни в школе, ни в жизни.</p>');
   h+=makeCard('theory','Круговая диаграмма','7.1',
     '<p><b>Круговая диаграмма</b> наглядно показывает, как целое делится на части. Весь круг — это $100\\%$, или $360°$.</p>'
     +'<p>Сектор в $p\\%$ занимает угол $p\\%\\cdot 360° = 3{,}6\\cdot p$ градусов. Например, $25\\%$ — это $90°$ (четверть круга).</p>');
+  h+=makeCard('example','Разбор по шагам','7.01',
+    '<p>Задача: в классе $30$ учеников. Отличников $6$, хорошистов $15$, остальные — троечники. Построй круговую диаграмму.</p>'
+    +'<ol><li>Находим доли: отличники $\\dfrac{6}{30} = 20\\%$; хорошисты $\\dfrac{15}{30} = 50\\%$; остальные $100\\% - 20\\% - 50\\% = 30\\%$.</li>'
+    +'<li>Переводим в градусы: $20\\% \\cdot 3{,}6 = 72°$; $50\\% \\cdot 3{,}6 = 180°$; $30\\% \\cdot 3{,}6 = 108°$.</li>'
+    +'<li>Проверка: $72° + 180° + 108° = 360°$ — весь круг. Верно!</li>'
+    +'<li>Строим круг, откладываем сектора по очереди транспортиром, подписываем.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','7.02',
+    '<p>Круговую диаграмму придумала британская медсестра Флоренс Найтингейл в $1858$ году — не математик, а медик! Она использовала диаграмму, чтобы доказать военным чиновникам, что большинство солдат гибнет не от ран, а от болезней в грязных госпиталях. Её диаграмма спасла тысячи жизней — пример того, как математика меняет мир.</p>');
   h+='<div class="wg" id="p7-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Диаграмма данных</div></div>'
     +'<div class="wg-help">Выбери набор данных — построится круговая диаграмма с долями.</div>'
     +'<div id="p7-pick" style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px"></div>'
@@ -493,14 +576,30 @@ function buildP7(){
 /* ===================== § 9. МАТЕМАТИКА ВОКРУГ НАС ===================== */
 function buildApp(){
   var box=document.getElementById('app-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','9.0',
+    '<p>Весь раздел «Проценты и пропорции» — это язык реального мира. Читая этикетку на продукте, анализируя результаты выборов, планируя ремонт или путешествие, оценивая выгоду банковского предложения — везде используются проценты и пропорции. Этот параграф — практика: решаем задачи из настоящей жизни.</p>');
   h+=makeCard('theory','Проценты вокруг нас','9.1',
     '<p>Скидки и распродажи, наценки, банковские вклады под проценты, состав продуктов, статистика и опросы — везде встречаются проценты и пропорции.</p>');
+  h+=makeCard('example','Разбор по шагам','9.01',
+    '<p>Задача: в магазине на куртку скидка $25\\%$, цена до скидки $800$ руб. Найди цену со скидкой.</p>'
+    +'<ol><li>Находим размер скидки: $25\\%$ от $800 = \\dfrac{800}{100} \\cdot 25 = 200$ руб.</li>'
+    +'<li>Вычитаем из начальной цены: $800 - 200 = 600$ руб.</li>'
+    +'<li>Ответ: $600$ руб.</li>'
+    +'<li>Быстрый способ: цена со скидкой $= 800 \\cdot (1 - 0{,}25) = 800 \\cdot 0{,}75 = 600$ руб.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','9.02',
+    '<p>Самые большие «скидки» — до $90\\%$ — часто оказываются обманом. Продавец сначала искусственно завышает цену, а потом объявляет «грандиозную распродажу». Закон требует, чтобы скидка считалась от реальной цены, которая действовала раньше. Знание математики помогает не попасться на такие уловки.</p>');
   h+='<div class="wg" id="app-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Задачи из жизни</div></div>'
     +'<div class="wg-help">Реши практическую задачу на проценты. Ответ — число (рубли, штуки, проценты).</div>'
     +'<div class="score-display"><span>Задача <b id="app-i">1</b> / 6</span><span>Очки: <b id="app-s">0</b> / 6</span></div>'
     +'<div id="app-q" class="qbox" style="font-size:1rem;text-align:left"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="app-a" class="tinp" style="width:110px;text-align:center"><button class="btn primary" id="app-go">Проверить</button></div>'
     +'<div class="feedback" id="app-fb"></div></div>';
+  h+='<div class="wg" id="app-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Наценка или скидка?</div></div>'
+    +'<div class="wg-help">Определи: цена выросла (наценка) или упала (скидка)?</div>'
+    +'<div class="score-display"><span>Вопрос <b id="app-vi">1</b> / 5</span><span>Очки: <b id="app-vs">0</b> / 5</span></div>'
+    +'<div id="app-vq" class="qbox" style="font-size:1rem;text-align:left"></div>'
+    +'<div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-av="n">Наценка</button><button class="btn primary" data-av="s">Скидка</button></div>'
+    +'<div class="feedback" id="app-vfb"></div></div>';
   h+=secNav('p7','final')+readBtn('app');
   box.innerHTML=h; renderMath(box);
 
@@ -526,6 +625,25 @@ function buildApp(){
     document.getElementById('app-go').addEventListener('click',go);
     document.getElementById('app-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
   })();
+
+  (function(){
+    var QQ=[
+      {t:'s', q:'Куртка стоила 600 руб., теперь стоит 450 руб. Что произошло с ценой?'},
+      {t:'n', q:'Цена на хлеб выросла с 1 руб. до 1 руб. 20 коп. Что произошло с ценой?'},
+      {t:'s', q:'Магазин объявил распродажу: было 800 руб., стало 560 руб. Что произошло?'},
+      {t:'n', q:'Из-за роста спроса цена на билет выросла с 200 до 300 руб. Что это?'},
+      {t:'s', q:'Акция: было 500 руб., по акции 375 руб. Что произошло с ценой?'},
+      {t:'n', q:'Производитель повысил цену молока с 1 руб. до 1 руб. 15 коп. Что это?'}
+    ];
+    var order2=QQ.map(function(_,k){return k;}); for(var j2=order2.length-1;j2>0;j2--){var kk=_ri(0,j2),tt=order2[j2];order2[j2]=order2[kk];order2[kk]=tt;}
+    var i2=0,score2=0,cur2=null;
+    function show2(){ if(i2>=5){ document.getElementById('app-vq').innerHTML='<b>Готово!</b> '+score2+' / 5'; if(score2>=4){addXp(15,'app-iv2');bumpProgress('app',35);}else if(score2>=2){addXp(8,'app-iv2');bumpProgress('app',18);} return; }
+      cur2=QQ[order2[i2]]; document.getElementById('app-vi').textContent=i2+1; document.getElementById('app-vq').innerHTML=cur2.q; document.getElementById('app-vfb').style.display='none'; }
+    function ans2(v){ if(i2>=5)return; var fb=document.getElementById('app-vfb');
+      if(v===cur2.t){ score2++; feedback(fb,true,'✓ Верно — это '+(cur2.t==='n'?'наценка (цена выросла)':'скидка (цена упала)')+'.'); } else feedback(fb,false,'✗ Нет. Это '+(cur2.t==='n'?'наценка':'скидка')+'.');
+      document.getElementById('app-vs').textContent=score2; i2++; setTimeout(show2,1400); }
+    document.querySelectorAll('#app-iv2 [data-av]').forEach(function(b){ b.addEventListener('click',function(){ ans2(b.getAttribute('data-av')); }); }); show2();
+  })();
 }
 
 /* ===================== ФИНАЛ ГЛАВЫ — БОССЫ ===================== */

frontend/textbooks/math_6_ch3.html

@@ -102,12 +102,22 @@ function _union(A,B){ var u=A.slice(); B.forEach(function(x){ if(u.indexOf(x)<0)
 /* ===================== § 1. МНОЖЕСТВО. ЭЛЕМЕНТЫ. ПУСТОЕ МНОЖЕСТВО ===================== */
 function buildP1(){
   var box=document.getElementById('p1-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','1.0',
+    '<p>Множества — это буквально всё вокруг нас. Список покупок в магазине — множество товаров. Состав футбольной команды — множество игроков. Коллекция марок, набор инструментов, список друзей — везде одна и та же идея: несколько разных объектов, собранных вместе. В программировании массивы и коллекции данных — прямые родственники математических множеств.</p>');
   h+=makeCard('theory','Множество и его элементы','1.1',
     '<p><b>Множество</b> — это набор различных объектов, объединённых общим признаком. Объекты множества — его <b>элементы</b>. Множества обозначают большими буквами, элементы перечисляют в фигурных скобках: $A=\\{2;4;6;8\\}$.</p>'
     +'<p>Запись $3\\in A$ читается «$3$ принадлежит $A$», $5\\notin A$ — «$5$ не принадлежит $A$».</p>');
-  h+=makeCard('rule','Пустое множество','1.2',
+  h+=makeCard('example','Разбор по шагам','1.2',
+    '<p>Дано: $A=\\{1;3;5;7;9\\}$. Принадлежит ли $5$ множеству $A$? А $4$?</p>'
+    +'<ol><li>Смотрим на элементы $A$: $1, 3, 5, 7, 9$.</li>'
+    +'<li>Ищем $5$ в списке: $5$ есть — значит $5\\in A$.</li>'
+    +'<li>Ищем $4$ в списке: $4$ нет — значит $4\\notin A$.</li>'
+    +'<li>Сколько элементов? Считаем: $1, 2, 3, 4, 5$ — итого $|A|=5$.</li></ol>');
+  h+=makeCard('rule','Пустое множество','1.3',
     '<p><b>Пустое множество</b> $\\varnothing$ не содержит ни одного элемента (например, множество натуральных решений уравнения $x+1=0$).</p>'
     +'<p>Множества <b>равны</b>, если состоят из одних и тех же элементов; порядок и повторы не важны: $\\{1;2;3\\}=\\{3;1;2\\}$.</p>');
+  h+=makeCard('theory','А знаешь ли ты?','1.4',
+    '<p>Теорию множеств создал немецкий математик Георг Кантор в конце XIX века. Поначалу его идеи казались настолько странными, что коллеги не принимали их всерьёз. Сегодня теория множеств — фундамент всей современной математики: на ней строятся числа, функции и вся высшая математика.</p>');
   h+='<div class="wg" id="p1-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Принадлежит или нет?</div></div>'
     +'<div class="wg-help">Определи, принадлежит ли элемент данному множеству.</div>'
     +'<div class="score-display"><span>Вопрос <b id="p1-i">1</b> / 6</span><span>Очки: <b id="p1-s">0</b> / 6</span></div>'
@@ -120,6 +130,12 @@ function buildP1(){
     +'<div id="p1-cq" class="qbox"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p1-ca" class="tinp" style="width:80px;text-align:center"><button class="btn primary" id="p1-cgo">Проверить</button></div>'
     +'<div class="feedback" id="p1-cfb"></div></div>';
+  h+='<div class="wg" id="p1-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Составь множество</div></div>'
+    +'<div class="wg-help">Выбери все числа, которые принадлежат описанному множеству. Нажми нужные и проверь.</div>'
+    +'<div id="p1-sv3-q" class="qbox"></div>'
+    +'<div id="p1-sv3-chips" style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0"></div>'
+    +'<div style="display:flex;gap:10px;justify-content:center"><button class="btn primary" id="p1-sv3-go">Проверить</button><button class="btn" id="p1-sv3-next">Следующее</button></div>'
+    +'<div class="feedback" id="p1-sv3-fb"></div></div>';
   h+=secNav(null,'p2')+readBtn('p1');
   box.innerHTML=h; renderMath(box);
 
@@ -148,14 +164,57 @@ function buildP1(){
     document.getElementById('p1-cgo').addEventListener('click',go);
     document.getElementById('p1-ca').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
   })();
+
+  (function(){
+    var TASKS=[
+      {desc:'чётные числа от 1 до 10', nums:[1,2,3,4,5,6,7,8,9,10], correct:[2,4,6,8,10]},
+      {desc:'делители числа 8', nums:[1,2,3,4,5,6,7,8], correct:[1,2,4,8]},
+      {desc:'однозначные нечётные числа', nums:[1,2,3,4,5,6,7,8,9,10], correct:[1,3,5,7,9]},
+      {desc:'числа, кратные 4, до 20', nums:[2,4,6,8,10,12,14,16,18,20], correct:[4,8,12,16,20]}
+    ];
+    var ti=0, sel=[];
+    function render(){
+      var t=TASKS[ti];
+      document.getElementById('p1-sv3-q').innerHTML='Выбери все числа: <b>'+t.desc+'</b>';
+      var chips=''; t.nums.forEach(function(n){ chips+='<button class="btn sv3-chip" data-n="'+n+'">'+n+'</button>'; });
+      document.getElementById('p1-sv3-chips').innerHTML=chips;
+      sel=[]; document.getElementById('p1-sv3-fb').style.display='none';
+      document.querySelectorAll('#p1-iv3 .sv3-chip').forEach(function(b){
+        b.addEventListener('click',function(){
+          var n=+b.getAttribute('data-n'), idx=sel.indexOf(n);
+          if(idx>=0){ sel.splice(idx,1); b.classList.remove('primary'); } else { sel.push(n); b.classList.add('primary'); }
+        });
+      });
+    }
+    document.getElementById('p1-sv3-go').addEventListener('click',function(){
+      var t=TASKS[ti], fb=document.getElementById('p1-sv3-fb');
+      var ok=t.correct.slice().sort().join(',')===[].concat(sel).sort().join(',');
+      if(ok){ feedback(fb,true,'Верно! Множество: {'+t.correct.join('; ')+'}'); addXp(10,'p1-iv3'); bumpProgress('p1',20); }
+      else { feedback(fb,false,'Не совсем. Правильный ответ: {'+t.correct.join('; ')+'}'); }
+    });
+    document.getElementById('p1-sv3-next').addEventListener('click',function(){
+      ti=(ti+1)%TASKS.length; render();
+    });
+    render();
+  })();
 }
 
 /* ===================== § 2. СПОСОБЫ ЗАДАНИЯ МНОЖЕСТВ ===================== */
 function buildP2(){
   var box=document.getElementById('p2-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','2.0',
+    '<p>Когда составляют расписание уроков, можно написать список предметов — это перечисление. А можно написать правило: «предметы, которые идут в понедельник» — это задание свойством. В базах данных программисты постоянно используют оба способа: хранят конкретные списки и создают запросы-условия. Правильно выбрать способ задания множества — значит сэкономить время и избежать ошибок.</p>');
   h+=makeCard('theory','Два способа задания','2.1',
     '<p><b>Перечислением</b> — выписывают все элементы: $A=\\{2;4;6;8\\}$.</p>'
     +'<p><b>Характеристическим свойством</b> — указывают признак: $A=\\{x \\mid x$ — чётное, $0<x<10\\}$ (читается «множество всех $x$ таких, что …»).</p>');
+  h+=makeCard('example','Разбор по шагам','2.2',
+    '<p>Задано свойство: $B=\\{x\\mid x$ — делитель числа $12\\}$. Запишем $B$ перечислением.</p>'
+    +'<ol><li>Находим все делители $12$: числа, на которые $12$ делится без остатка.</li>'
+    +'<li>Проверяем по очереди: $1, 2, 3, 4, 6, 12$ — все делят $12$ нацело.</li>'
+    +'<li>Числа $5, 7, 8, 9, 10, 11$ — не делители: остаток не ноль.</li>'
+    +'<li>Итог: $B=\\{1;2;3;4;6;12\\}$.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','2.3',
+    '<p>Запись $\\{x\\mid\\ldots\\}$ придумали, чтобы задавать бесконечные множества. Например, множество всех чётных чисел $\\{x\\mid x$ кратно $2\\}$ нельзя задать перечислением — элементов бесконечно много. А свойством — одна строчка!</p>');
   h+='<div class="wg" id="p2-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Свойство → множество</div></div>'
     +'<div class="wg-help">Выбери множество, заданное перечислением, которое соответствует описанию.</div>'
     +'<div class="score-display"><span>Вопрос <b id="p2-i">1</b> / 5</span><span>Очки: <b id="p2-s">0</b> / 5</span></div>'
@@ -216,10 +275,19 @@ function buildP2(){
 /* ===================== § 3. ОПЕРАЦИИ НАД МНОЖЕСТВАМИ ===================== */
 function buildP3(){
   var box=document.getElementById('p3-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','3.0',
+    '<p>Представь: $A$ — ученики, которые занимаются футболом, $B$ — те, кто ходит на плавание. Пересечение $A\\cap B$ — те, кто занимается обоими видами спорта. Объединение $A\\cup B$ — все, кто занимается хотя бы одним. Такие операции каждый день используют составители расписаний, маркетологи («покупатели, которые брали и A, и B») и врачи, анализируя симптомы.</p>');
   h+=makeCard('theory','Пересечение и объединение','3.1',
     '<p><b>Пересечение</b> $A\\cap B$ — множество элементов, принадлежащих <b>обоим</b> множествам сразу.</p>'
     +'<p><b>Объединение</b> $A\\cup B$ — множество элементов, принадлежащих <b>хотя бы одному</b> из множеств.</p>'
     +'<p>$A=\\{1;2;3;4\\}$, $B=\\{3;4;5;6\\}$: $A\\cap B=\\{3;4\\}$, $A\\cup B=\\{1;2;3;4;5;6\\}$.</p>');
+  h+=makeCard('example','Разбор по шагам','3.2',
+    '<p>Найти $A\\cap B$ и $A\\cup B$, если $A=\\{2;4;6;8\\}$, $B=\\{4;6;10;12\\}$.</p>'
+    +'<ol><li>Для <b>пересечения</b> берём только общие элементы: смотрим, что есть и в $A$, и в $B$. Это $4$ и $6$. Значит, $A\\cap B=\\{4;6\\}$.</li>'
+    +'<li>Для <b>объединения</b> берём все элементы из обоих: $2, 4, 6, 8$ из $A$, добавляем новые из $B$ — $10$ и $12$. Повторы ($4$ и $6$) пишем один раз.</li>'
+    +'<li>Итог: $A\\cup B=\\{2;4;6;8;10;12\\}$.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','3.3',
+    '<p>Символы $\\cap$ (пересечение) и $\\cup$ (объединение) ввёл итальянский математик Джузеппе Пеано в 1888 году. Символ $\\cup$ напоминает букву U — от слова <i>union</i> (союз, объединение по-английски). Сегодня эти символы используют во всём мире в математике, логике и программировании.</p>');
   h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Операции наглядно</div></div>'
     +'<div class="wg-help">Нажми операцию — увидишь закрашенную область и результат для $A=\\{1;2;3;4\\}$, $B=\\{3;4;5;6\\}$.</div>'
     +'<div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px"><button class="btn primary" data-op="inter">$A\\cap B$</button><button class="btn" data-op="union">$A\\cup B$</button></div>'
@@ -264,8 +332,19 @@ function buildP3(){
 /* ===================== § 4. КРУГИ ЭЙЛЕРА ===================== */
 function buildP4(){
   var box=document.getElementById('p4-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','4.0',
+    '<p>Круги Эйлера — не просто красивые картинки. Врачи рисуют их, чтобы понять, у скольких пациентов сочетаются два симптома. Маркетологи — чтобы узнать, кто смотрит и кино, и сериалы. Задача «в классе 30 учеников, 18 занимаются музыкой, 14 — танцами, 5 — и тем и тем; сколько не занимаются ничем?» — классический круг Эйлера. Один рисунок заменяет три уравнения.</p>');
   h+=makeCard('theory','Круги Эйлера','4.1',
     '<p>Множества удобно изображать кругами (круги Эйлера). Пересекающиеся круги показывают общую часть. Если в $A$ — $a$ элементов, в $B$ — $b$, а в пересечении — $c$, то в объединении: $|A\\cup B| = a + b - c$ (общие посчитаны дважды — вычитаем один раз).</p>');
+  h+=makeCard('example','Разбор по шагам','4.2',
+    '<p>В классе 30 учеников. Математику любят 18, физику — 14, оба предмета — 6. Сколько не любят ни то, ни другое?</p>'
+    +'<ol><li>Рисуем два пересекающихся круга: «Математика» и «Физика».</li>'
+    +'<li>В центр (пересечение) пишем $6$ — те, кто любит оба.</li>'
+    +'<li>Только математику: $18-6=12$. Только физику: $14-6=8$.</li>'
+    +'<li>Любят хотя бы один предмет: $12+6+8=26$.</li>'
+    +'<li>Не любят ни один: $30-26=4$.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','4.3',
+    '<p>Круги Эйлера придумал швейцарский математик Леонард Эйлер в XVIII веке — один из самых плодовитых математиков в истории. Он опубликовал более 800 работ и продолжал трудиться, даже ослепнув на оба глаза. Его именем названы и формула $e^{i\\pi}+1=0$, и данный метод наглядного изображения множеств.</p>');
   h+='<div class="wg" id="p4-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Задача с кругами Эйлера</div></div>'
     +'<div class="wg-help">Разнеси данные по кругам и ответь на вопрос.</div>'
     +'<div class="score-display"><span>Задача <b id="p4-i">1</b> / 5</span><span>Очки: <b id="p4-s">0</b> / 5</span></div>'

frontend/textbooks/math_6_ch4.html

@@ -109,11 +109,21 @@ function svgWrap(w,h,inner){ return '<div class="m6-fig" style="max-width:'+w+'p
 /* ===================== § 1. ПОЛОЖИТЕЛЬНЫЕ И ОТРИЦАТЕЛЬНЫЕ. КООРДИНАТНАЯ ПРЯМАЯ ===================== */
 function buildP1(){
   var box=document.getElementById('p1-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','1.0',
+    '<p>Без отрицательных чисел невозможно измерить температуру зимой: −20°C — это реальный мороз. Банки записывают долги отрицательными числами, а в видеоиграх герой может иметь отрицательный счёт. Даже карты высот показывают глубину морей со знаком «минус».</p>');
   h+=makeCard('theory','Числа со знаком','1.1',
     '<p>Числа бывают <b>положительные</b> ($+3$, или просто $3$), <b>отрицательные</b> ($-3$) и <b>ноль</b> (не положителен и не отрицателен). Отрицательными измеряют температуру ниже нуля, долги, глубину.</p>');
   h+=makeCard('rule','Координатная прямая','1.2',
     '<p><b>Координатная прямая</b> — прямая с началом $O$ (точка $0$), положительным направлением (вправо) и единичным отрезком. Положительные числа — справа от нуля, отрицательные — слева.</p>'
     +'<p>Каждому числу соответствует точка, и наоборот; это его <b>координата</b>.</p>');
+  h+=makeCard('example','Разбор по шагам','1.3',
+    '<p>Задача: отметь число $-4$ и $3$ на координатной прямой, скажи, какое из них больше.</p>'
+    +'<ol><li>Рисуем прямую с нулём посередине, единичным отрезком вправо.</li>'
+    +'<li>$3$ — три единицы <b>вправо</b> от нуля: отмечаем точку $A(3)$.</li>'
+    +'<li>$-4$ — четыре единицы <b>влево</b> от нуля: отмечаем точку $B(-4)$.</li>'
+    +'<li>$A$ правее $B$, значит $3 > -4$. Любое положительное больше любого отрицательного.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','1.4',
+    '<p>Отрицательные числа официально признали математики лишь в XVII веке — до этого их называли «абсурдными» или «мнимыми долгами». Индийский математик Брахмагупта ещё в VII веке описал правила работы с ними, но в Европе их долго отвергали!</p>');
   h+='<div class="wg" id="p1-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прочитай координату</div></div>'
     +'<div class="wg-help">Определи координату отмеченной точки (может быть отрицательной).</div>'
     +'<div class="score-display"><span>Вопрос <b id="p1-i">1</b> / 6</span><span>Очки: <b id="p1-s">0</b> / 6</span></div>'
@@ -159,12 +169,22 @@ function buildP1(){
 /* ===================== § 2. МОДУЛЬ. ПРОТИВОПОЛОЖНЫЕ. Z И Q ===================== */
 function buildP2(){
   var box=document.getElementById('p2-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','2.0',
+    '<p>Когда говорят «расстояние», всегда имеют в виду положительное число — неважно, вправо ты пошёл или влево. Именно это и есть модуль: расстояние от точки до нуля. Спортсмены говорят «разница в счёте 3 очка» — это тоже модуль разности.</p>');
   h+=makeCard('theory','Модуль и противоположные числа','2.1',
     '<p><b>Модуль</b> числа $|a|$ — это расстояние от точки $a$ до нуля; он всегда $\\ge 0$: $|{-7}|=7$, $|5|=5$, $|0|=0$.</p>'
     +'<p><b>Противоположные числа</b> отличаются только знаком ($5$ и $-5$); их сумма равна нулю, а модули равны.</p>');
-  h+=makeCard('theory','Множества чисел: N ⊂ Z ⊂ Q','2.2',
+  h+=makeCard('example','Разбор по шагам','2.2',
+    '<p>Найти $|{-9}|$ и число, противоположное $-9$.</p>'
+    +'<ol><li>Модуль — это расстояние до нуля. От $-9$ до $0$ ровно $9$ шагов по прямой.</li>'
+    +'<li>Значит $|{-9}| = 9$. Знак «убираем».</li>'
+    +'<li>Противоположное меняет знак: противоположное к $-9$ — это $+9$.</li>'
+    +'<li>Проверка: $(-9) + 9 = 0$ — верно, сумма противоположных равна нулю.</li></ol>');
+  h+=makeCard('theory','Множества чисел: N ⊂ Z ⊂ Q','2.3',
     '<p><b>Натуральные</b> $\\mathbb{N}=\\{1;2;3;\\ldots\\}$ — для счёта. <b>Целые</b> $\\mathbb{Z}$ — натуральные, им противоположные и ноль. <b>Рациональные</b> $\\mathbb{Q}$ — все числа, представимые дробью $\\frac{m}{n}$ (включая десятичные и отрицательные).</p>'
     +svgWrap(240,180,'<ellipse cx="120" cy="95" rx="108" ry="78" fill="rgba(225,29,72,.08)" stroke="#e11d48" stroke-width="2"/><ellipse cx="120" cy="105" rx="78" ry="55" fill="rgba(124,58,237,.10)" stroke="#7c3aed" stroke-width="2"/><ellipse cx="120" cy="118" rx="46" ry="32" fill="rgba(79,70,229,.12)" stroke="#4f46e5" stroke-width="2"/><text x="120" y="32" text-anchor="middle" font-size="15" font-weight="800" fill="#e11d48">Q (рациональные)</text><text x="120" y="70" text-anchor="middle" font-size="14" font-weight="800" fill="#7c3aed">Z (целые)</text><text x="120" y="122" text-anchor="middle" font-size="13" font-weight="800" fill="#4f46e5">N: 1,2,3…</text>'));
+  h+=makeCard('theory','А знаешь ли ты?','2.4',
+    '<p>Слово «рациональный» происходит от латинского <i>ratio</i> — «отношение, дробь». Число называется рациональным, потому что его можно представить как отношение (дробь) двух целых чисел. Числа вроде $\\sqrt{2}$ или $\\pi$ этого сделать нельзя — они иррациональные.</p>');
   h+='<div class="wg" id="p2-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Найди модуль</div></div>'
     +'<div class="wg-help">Модуль — расстояние до нуля, всегда неотрицателен.</div>'
     +'<div class="score-display"><span>Вопрос <b id="p2-i">1</b> / 6</span><span>Очки: <b id="p2-s">0</b> / 6</span></div>'
@@ -210,9 +230,19 @@ function buildP2(){
 /* ===================== § 3. СРАВНЕНИЕ РАЦИОНАЛЬНЫХ ===================== */
 function buildP3(){
   var box=document.getElementById('p3-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','3.0',
+    '<p>Когда синоптики говорят «сегодня теплее, чем вчера», они сравнивают числа — в том числе отрицательные. −3°C теплее, чем −8°C, хотя оба со знаком минус. Такое же сравнение используют в финансах: долг −200 рублей лучше, чем долг −500 рублей.</p>');
   h+=makeCard('rule','Сравнение на координатной прямой','3.1',
     '<p>Из двух чисел <b>больше то, которое правее</b> на координатной прямой.</p>'
     +'<p>Любое положительное $>$ любого отрицательного; $0$ больше любого отрицательного. Из двух отрицательных больше то, у которого <b>меньше модуль</b> (ближе к нулю): $-2 > -5$.</p>');
+  h+=makeCard('example','Разбор по шагам','3.2',
+    '<p>Сравни числа $-3$ и $-7$.</p>'
+    +'<ol><li>Оба числа отрицательные. Смотрим модули: $|-3|=3$, $|-7|=7$.</li>'
+    +'<li>$3 < 7$, значит $-3$ ближе к нулю на прямой.</li>'
+    +'<li>Ближе к нулю — значит правее — значит больше.</li>'
+    +'<li>Ответ: $-3 > -7$. Это кажется странным, но проверь на прямой — $-3$ действительно правее $-7$.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','3.3',
+    '<p>В программировании и в физике часто используют понятие «знаковая переменная»: число может быть и положительным, и отрицательным. Датчики температуры, гироскопы в телефоне, альтиметры — все они работают с числами, которые надо уметь сравнивать со знаком.</p>');
   h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Сравни числа</div></div>'
     +'<div class="wg-help">Сравни два числа на координатной прямой.</div>'
     +'<div class="score-display"><span>Вопрос <b id="p3-i">1</b> / 6</span><span>Очки: <b id="p3-s">0</b> / 6</span></div>'
@@ -259,10 +289,21 @@ function buildP3(){
 /* ===================== § 4. СЛОЖЕНИЕ РАЦИОНАЛЬНЫХ ===================== */
 function buildP4(){
   var box=document.getElementById('p4-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','4.0',
+    '<p>Температура за окном −5°C. К вечеру потеплело на 3°C. Сколько стало? Это сложение рациональных: $-5 + 3 = -2$. Точно так же считают изменение уровня воды в реке, баланс на банковском счёте и набранные/потерянные очки в игре.</p>');
   h+=makeCard('rule','Правила сложения','4.1',
     '<p><b>Одинаковые знаки:</b> складываем модули, ставим общий знак: $-3+(-4)=-7$.</p>'
     +'<p><b>Разные знаки:</b> из большего модуля вычитаем меньший, ставим знак числа с бо́льшим модулем: $-7+4=-3$, &nbsp; $7+(-4)=3$.</p>'
     +'<p>Сумма противоположных равна нулю: $6+(-6)=0$.</p>');
+  h+=makeCard('example','Разбор по шагам','4.2',
+    '<p>Вычисли $-8 + 5$.</p>'
+    +'<ol><li>Знаки <b>разные</b> ($-$ и $+$) — применяем второе правило.</li>'
+    +'<li>Находим модули: $|-8|=8$, $|5|=5$.</li>'
+    +'<li>Из большего модуля вычитаем меньший: $8 - 5 = 3$.</li>'
+    +'<li>Знак берём от числа с бо́льшим модулем: это $-8$, значит знак «минус».</li>'
+    +'<li>Ответ: $-8 + 5 = -3$.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','4.3',
+    '<p>Сложение на координатной прямой — это буквальное «движение». Положительное слагаемое — шаг вправо, отрицательное — шаг влево. Именно поэтому термометр, линейка и шкала лифта устроены как координатные прямые!</p>');
   h+='<div class="wg" id="p4-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Сложение на прямой</div></div>'
     +'<div class="wg-help">Двигай слагаемые — результат отмечается на координатной прямой.</div>'
     +'<div class="sliders"><label>$a$ = <b id="p4-av">-3</b><input type="range" id="p4-asl" min="-6" max="6" value="-3"></label><label>$b$ = <b id="p4-bv">5</b><input type="range" id="p4-bsl" min="-6" max="6" value="5"></label></div>'
@@ -302,9 +343,20 @@ function buildP4(){
 /* ===================== § 5. ВЫЧИТАНИЕ РАЦИОНАЛЬНЫХ ===================== */
 function buildP5(){
   var box=document.getElementById('p5-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','5.0',
+    '<p>Разность температур, изменение счёта в игре, разница высот — всё это вычитание, в том числе с отрицательными числами. «На сколько −3°C больше, чем −10°C?» — это $-3 - (-10) = 7$: на 7 градусов теплее.</p>');
   h+=makeCard('rule','Вычитание — это прибавление противоположного','5.1',
     '<p>Чтобы из числа вычесть другое, нужно к нему прибавить <b>противоположное</b>: $a - b = a + (-b)$.</p>'
     +'<p>$5 - 8 = 5 + (-8) = -3$; &nbsp; $-4 - 3 = -4 + (-3) = -7$; &nbsp; $2 - (-6) = 2 + 6 = 8$.</p>');
+  h+=makeCard('example','Разбор по шагам','5.2',
+    '<p>Вычисли $-4 - (-7)$.</p>'
+    +'<ol><li>Заменяем вычитание сложением с противоположным: $-4 - (-7) = -4 + (+7)$.</li>'
+    +'<li>Два минуса дают плюс: скобки раскрыты, получили $-4 + 7$.</li>'
+    +'<li>Знаки разные. Модули: $4$ и $7$. Разность модулей: $7 - 4 = 3$.</li>'
+    +'<li>Знак от числа с большим модулем: $7 > 4$, значит знак «плюс».</li>'
+    +'<li>Ответ: $-4 - (-7) = 3$.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','5.3',
+    '<p>Правило «минус на минус даёт плюс» при вычитании вытекает из одного простого принципа: вычесть отрицательное — значит вернуть то, что было отнято. Если у тебя забрали долг в 7 рублей (то есть убрали $-7$), ты стал богаче на 7!</p>');
   h+='<div class="wg" id="p5-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Тренажёр вычитания</div></div>'
     +'<div class="wg-help">Замени вычитание сложением с противоположным и вычисли.</div>'
     +'<div class="score-display"><span>Пример <b id="p5-i">1</b> / 6</span><span>Очки: <b id="p5-s">0</b> / 6</span></div>'
@@ -353,10 +405,21 @@ function buildP5(){
 /* ===================== § 6. ЗАКОНЫ СЛОЖЕНИЯ ===================== */
 function buildP6(){
   var box=document.getElementById('p6-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','6.0',
+    '<p>Когда кассир суммирует покупки, он добавляет их в любом порядке — результат одинаков. Это переместительный закон. Бухгалтер, считая баланс, группирует доходы и расходы удобными блоками — это сочетательный. Оба закона экономят время каждый день.</p>');
   h+=makeCard('rule','Законы сложения','6.1',
     '<p><b>Переместительный:</b> $a+b=b+a$ (слагаемые можно менять местами).</p>'
     +'<p><b>Сочетательный:</b> $(a+b)+c=a+(b+c)$ (слагаемые можно группировать).</p>'
     +'<p>Их используют для удобства: сначала складывают противоположные или «круглые» числа: $-7+15+7 = (-7+7)+15 = 15$.</p>');
+  h+=makeCard('example','Разбор по шагам','6.2',
+    '<p>Вычисли удобным способом: $23 + (-18) + (-23)$.</p>'
+    +'<ol><li>Замечаем: $23$ и $-23$ — противоположные числа.</li>'
+    +'<li>По сочетательному закону группируем их: $(23 + (-23)) + (-18)$.</li>'
+    +'<li>$23 + (-23) = 0$ (сумма противоположных).</li>'
+    +'<li>$0 + (-18) = -18$.</li>'
+    +'<li>Ответ: $-18$. Без группировки это было бы сложнее!</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','6.3',
+    '<p>Переместительный закон кажется очевидным, но он выполняется не всегда! Например, при умножении матриц в высшей математике $A \cdot B \ne B \cdot A$ — это называется некоммутативностью. В обычной арифметике нам везёт: сложение и умножение чисел коммутативны.</p>');
   h+='<div class="wg" id="p6-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Вычисли удобным способом</div></div>'
     +'<div class="wg-help">Сгруппируй слагаемые, чтобы считать было легко.</div>'
     +'<div class="score-display"><span>Пример <b id="p6-i">1</b> / 5</span><span>Очки: <b id="p6-s">0</b> / 5</span></div>'
@@ -404,10 +467,20 @@ function buildP6(){
 /* ===================== § 7. УМНОЖЕНИЕ РАЦИОНАЛЬНЫХ ===================== */
 function buildP7(){
   var box=document.getElementById('p7-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','7.0',
+    '<p>Если температура падает на 3°C каждый час в течение 4 часов, то изменение составит $(-3) \cdot 4 = -12$°C. Умножение с отрицательными числами используют везде: в физике (скорость и направление), в экономике (убыток за несколько месяцев), в программировании (отражение на экране).</p>');
   h+=makeCard('rule','Правило знаков при умножении','7.1',
     '<p>Перемножают модули, а знак определяют по правилу:</p>'
     +'<table class="tbl" style="max-width:320px;margin:6px auto"><tr><th>$\\times$</th><th>$+$</th><th>$-$</th></tr><tr><th>$+$</th><td>$+$</td><td>$-$</td></tr><tr><th>$-$</th><td>$-$</td><td>$+$</td></tr></table>'
     +'<p>«Минус на минус даёт плюс». $-3\\cdot(-4)=12$, &nbsp; $-3\\cdot 4=-12$. Умножение на $0$ даёт $0$.</p>');
+  h+=makeCard('example','Разбор по шагам','7.2',
+    '<p>Вычисли $(-6) \\cdot (-5)$.</p>'
+    +'<ol><li>Перемножаем модули: $|-6| = 6$, $|-5| = 5$, $6 \\cdot 5 = 30$.</li>'
+    +'<li>Определяем знак: оба множителя <b>отрицательные</b> (знаки одинаковые).</li>'
+    +'<li>Одинаковые знаки при умножении дают «плюс».</li>'
+    +'<li>Ответ: $(-6) \\cdot (-5) = +30 = 30$.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','7.3',
+    '<p>Почему «минус на минус даёт плюс»? Вот интуитивное объяснение: «враг моего врага — мой друг». Если долг ($-$) это плохо, то убрать долг ($-$) — это хорошо ($+$). Формально это следует из дистрибутивности, но образно запомнить проще!</p>');
   h+='<div class="wg" id="p7-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Знак произведения</div></div>'
     +'<div class="wg-help">Выбери знаки множителей — узнай знак произведения.</div>'
     +'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:8px"><button class="btn" data-s="pp">$(+)\\cdot(+)$</button><button class="btn" data-s="pn">$(+)\\cdot(-)$</button><button class="btn" data-s="np">$(-)\\cdot(+)$</button><button class="btn" data-s="nn">$(-)\\cdot(-)$</button></div>'
@@ -447,9 +520,20 @@ function buildP7(){
 /* ===================== § 8. ДЕЛЕНИЕ РАЦИОНАЛЬНЫХ ===================== */
 function buildP8(){
   var box=document.getElementById('p8-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','8.0',
+    '<p>Если команда потеряла 12 очков за 4 тура поровну, то в каждом туре: $-12 \div 4 = -3$ очка. Деление с отрицательными числами встречается везде, где нужно равномерно распределить убыток, снижение температуры или расход топлива.</p>');
   h+=makeCard('rule','Правило знаков при делении','8.1',
     '<p>Делят модули, а знак — по тому же правилу, что и при умножении: одинаковые знаки дают $+$, разные — $-$.</p>'
     +'<p>$-12\\div(-3)=4$, &nbsp; $-12\\div 3=-4$, &nbsp; $12\\div(-4)=-3$. На ноль делить нельзя.</p>');
+  h+=makeCard('example','Разбор по шагам','8.2',
+    '<p>Вычисли $(-35) \\div 7$.</p>'
+    +'<ol><li>Делим модули: $|-35| = 35$, $|7| = 7$, $35 \\div 7 = 5$.</li>'
+    +'<li>Определяем знак: знаки делимого и делителя <b>разные</b> ($-$ и $+$).</li>'
+    +'<li>Разные знаки при делении дают «минус».</li>'
+    +'<li>Ответ: $(-35) \\div 7 = -5$.</li>'
+    +'<li>Проверка: $(-5) \\cdot 7 = -35$ — верно!</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','8.3',
+    '<p>Деление на ноль — единственная «запрещённая» операция в математике. Если бы оно было определено, возникли бы противоречия: например, можно было бы «доказать», что $1 = 2$. Именно поэтому в программах, где встречается деление, обязательно проверяют, не равен ли делитель нулю.</p>');
   h+='<div class="wg" id="p8-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Тренажёр деления</div></div>'
     +'<div class="wg-help">Раздели рациональные числа (деление нацело).</div>'
     +'<div class="score-display"><span>Пример <b id="p8-i">1</b> / 6</span><span>Очки: <b id="p8-s">0</b> / 6</span></div>'
@@ -495,15 +579,32 @@ function buildP8(){
 /* ===================== § 9. ЗАДАЧИ НА ВСЕ ДЕЙСТВИЯ ===================== */
 function buildP9(){
   var box=document.getElementById('p9-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','9.0',
+    '<p>В реальных задачах действия всегда смешаны: температуру сначала умножают (на несколько дней), потом прибавляют или вычитают. Финансовые расчёты, физические формулы, программные алгоритмы — всё требует правильного порядка действий со знаками.</p>');
   h+=makeCard('rule','Порядок действий со знаками','9.1',
     '<p>Сначала действия в <b>скобках</b>, затем <b>умножение и деление</b>, потом <b>сложение и вычитание</b>. Внимательно следи за знаками.</p>'
     +'<p>$-3 + 4\\cdot(-2) = -3 + (-8) = -11$.</p>');
+  h+=makeCard('example','Разбор по шагам','9.2',
+    '<p>Вычисли $(-5 + 2) \\cdot 3$.</p>'
+    +'<ol><li>Сначала скобки: $-5 + 2 = -3$.</li>'
+    +'<li>Теперь умножение: $(-3) \\cdot 3$.</li>'
+    +'<li>Знаки разные ($-$ и $+$): результат отрицательный.</li>'
+    +'<li>Модули: $3 \\cdot 3 = 9$.</li>'
+    +'<li>Ответ: $(-5 + 2) \\cdot 3 = -9$.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','9.3',
+    '<p>Приоритет операций (скобки, потом умножение/деление, потом сложение/вычитание) — международное соглашение. В разных странах его запоминают по аббревиатурам: в Беларуси и России говорят просто «порядок действий», в англоязычных странах используют BODMAS или PEMDAS. Правило одно — запись разная.</p>');
   h+='<div class="wg" id="p9-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Вычисли выражение</div></div>'
     +'<div class="wg-help">Соблюдай порядок действий и правила знаков.</div>'
     +'<div class="score-display"><span>Пример <b id="p9-i">1</b> / 6</span><span>Очки: <b id="p9-s">0</b> / 6</span></div>'
     +'<div id="p9-q" class="qbox"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p9-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p9-go">Проверить</button></div>'
     +'<div class="feedback" id="p9-fb"></div></div>';
+  h+='<div class="wg" id="p9-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Что посчитать первым?</div></div>'
+    +'<div class="wg-help">Выбери действие, которое надо выполнить ПЕРВЫМ по порядку.</div>'
+    +'<div class="score-display"><span>Вопрос <b id="p9-oi">1</b> / 5</span><span>Очки: <b id="p9-os">0</b> / 5</span></div>'
+    +'<div id="p9-oq" class="qbox"></div>'
+    +'<div id="p9-oopts" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"></div>'
+    +'<div class="feedback" id="p9-ofb"></div></div>';
   h+=secNav('p8','app')+readBtn('p9');
   box.innerHTML=h; renderMath(box);
 
@@ -521,19 +622,57 @@ function buildP9(){
     document.getElementById('p9-go').addEventListener('click',go);
     document.getElementById('p9-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
   })();
+
+  (function(){
+    var OQ=[
+      {expr:'$3 + 4 \\cdot (-2)$', opts:['сложение $3+4$','умножение $4\\cdot(-2)$','вычитание $4-2$'], ans:1, expl:'Умножение выполняется до сложения.'},
+      {expr:'$(-5 + 2) \\cdot 3$', opts:['умножение $5\\cdot3$','скобки $-5+2$','умножение $2\\cdot3$'], ans:1, expl:'Сначала — действие в скобках.'},
+      {expr:'$10 - 3 \\cdot 4$', opts:['вычитание $10-3$','умножение $3\\cdot4$','сложение $3+4$'], ans:1, expl:'Умножение приоритетнее вычитания.'},
+      {expr:'$(-8) \\div 2 - 1$', opts:['вычитание $2-1$','деление $(-8)\\div2$','сложение $8+2$'], ans:1, expl:'Деление выполняется до вычитания.'},
+      {expr:'$6 + (-2) \\cdot 5$', opts:['сложение $6+(-2)$','умножение $(-2)\\cdot5$','деление $6\\div2$'], ans:1, expl:'Умножение раньше сложения.'}
+    ];
+    var order=OQ.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
+    var i=0,score=0,cur=null;
+    function show(){ if(i>=5){ document.getElementById('p9-oq').innerHTML='<b>Готово!</b> '+score+' / 5'; document.getElementById('p9-oopts').innerHTML=''; if(score>=4){addXp(15,'p9-iv2');bumpProgress('p9',30);}else if(score>=2){addXp(8,'p9-iv2');bumpProgress('p9',16);} return; }
+      cur=OQ[order[i]]; document.getElementById('p9-oi').textContent=i+1;
+      document.getElementById('p9-oq').innerHTML='Что выполнить ПЕРВЫМ в выражении '+cur.expr+'?'; renderMath(document.getElementById('p9-oq'));
+      document.getElementById('p9-oopts').innerHTML=cur.opts.map(function(o,idx){ return '<button class="btn primary" data-idx="'+idx+'">'+o+'</button>'; }).join('');
+      document.querySelectorAll('#p9-oopts [data-idx]').forEach(function(b){ b.addEventListener('click',function(){ ansOQ(+b.getAttribute('data-idx')); }); }); renderMath(document.getElementById('p9-oopts'));
+      document.getElementById('p9-ofb').style.display='none'; }
+    function ansOQ(idx){ if(i>=5)return; var fb=document.getElementById('p9-ofb');
+      if(idx===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.expl); } else feedback(fb,false,'✗ Нет. '+cur.expl);
+      document.getElementById('p9-os').textContent=score; i++; setTimeout(show,1400); }
+    show();
+  })();
 }
 
 /* ===================== § 11. МАТЕМАТИКА ВОКРУГ НАС ===================== */
 function buildApp(){
   var box=document.getElementById('app-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','11.0',
+    '<p>Отрицательные числа — это не абстракция: они буквально повсюду. Зимой без них не обойтись (температура), в банке (баланс счёта), в навигации (высота и глубина), в спорте (разница очков), в лифте (подвальные этажи). Математика помогает описать реальный мир во всей его сложности.</p>');
   h+=makeCard('theory','Отрицательные числа вокруг нас','11.1',
     '<p>Температура ниже нуля, долги и доходы, высота над уровнем моря и глубина, координаты в играх и на карте — всюду нужны отрицательные числа.</p>');
+  h+=makeCard('example','Разбор по шагам','11.2',
+    '<p>Задача: утром было $-7$°C, днём потеплело на $12$°C. Какая температура стала?</p>'
+    +'<ol><li>«Потеплело» — значит прибавляем: $-7 + 12$.</li>'
+    +'<li>Знаки разные. Модули: $7$ и $12$. Разность: $12 - 7 = 5$.</li>'
+    +'<li>Знак от числа с большим модулем: $12 > 7$, знак «плюс».</li>'
+    +'<li>Ответ: $-7 + 12 = +5$, то есть $5$°C.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','11.3',
+    '<p>Самая низкая температура, когда-либо зафиксированная на Земле, — $-89{,}2$°C на станции «Восток» в Антарктиде (1983 год). Самая высокая — $+56{,}7$°C в Долине Смерти (США). Разница: $56{,}7 - (-89{,}2) = 145{,}9$°C. Вот зачем нужны отрицательные числа!</p>');
   h+='<div class="wg" id="app-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Задачи из жизни</div></div>'
     +'<div class="wg-help">Реши практическую задачу. Ответ — целое число (можно со знаком −).</div>'
     +'<div class="score-display"><span>Задача <b id="app-i">1</b> / 6</span><span>Очки: <b id="app-s">0</b> / 6</span></div>'
     +'<div id="app-q" class="qbox" style="font-size:1rem;text-align:left"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="app-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="app-go">Проверить</button></div>'
     +'<div class="feedback" id="app-fb"></div></div>';
+  h+='<div class="wg" id="app-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Что означает знак?</div></div>'
+    +'<div class="wg-help">Определи, что описывает это число в реальной ситуации.</div>'
+    +'<div class="score-display"><span>Вопрос <b id="app-si">1</b> / 5</span><span>Очки: <b id="app-ss">0</b> / 5</span></div>'
+    +'<div id="app-sq" class="qbox" style="font-size:1rem;text-align:left"></div>'
+    +'<div id="app-sopts" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"></div>'
+    +'<div class="feedback" id="app-sfb"></div></div>';
   h+=secNav('p9','final')+readBtn('app');
   box.innerHTML=h; renderMath(box);
 
@@ -559,6 +698,28 @@ function buildApp(){
     document.getElementById('app-go').addEventListener('click',go);
     document.getElementById('app-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
   })();
+
+  (function(){
+    var SQ=[
+      {q:'Термометр показывает $-15$. Что это означает?', opts:['15 градусов тепла','15 градусов мороза','15 метров глубины'], ans:1},
+      {q:'На банковском счёте $-300$ рублей. Что это означает?', opts:['остаток 300 рублей','долг 300 рублей','доход 300 рублей'], ans:1},
+      {q:'Высота дна озера $-8$ метров. Что это означает?', opts:['8 метров над уровнем воды','8 метров ниже уровня воды','8 метров над уровнем моря'], ans:1},
+      {q:'В игре у игрока $-20$ очков. Что произошло?', opts:['игрок заработал 20 очков','игрок потерял 20 очков','игрок остановился на 20 очков'], ans:1},
+      {q:'Лифт на этаже $-1$. Где он находится?', opts:['на первом этаже','на первом подземном этаже','между первым и вторым этажом'], ans:1}
+    ];
+    var order=SQ.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
+    var i=0,score=0,cur=null;
+    function show(){ if(i>=5){ document.getElementById('app-sq').innerHTML='<b>Готово!</b> '+score+' / 5'; document.getElementById('app-sopts').innerHTML=''; if(score>=4){addXp(15,'app-iv2');bumpProgress('app',35);}else if(score>=2){addXp(8,'app-iv2');bumpProgress('app',18);} return; }
+      cur=SQ[order[i]]; document.getElementById('app-si').textContent=i+1;
+      document.getElementById('app-sq').innerHTML=cur.q; renderMath(document.getElementById('app-sq'));
+      document.getElementById('app-sopts').innerHTML=cur.opts.map(function(o,idx){ return '<button class="btn primary" data-idx="'+idx+'">'+o+'</button>'; }).join('');
+      document.querySelectorAll('#app-iv2 [data-idx]').forEach(function(b){ b.addEventListener('click',function(){ ansS(+b.getAttribute('data-idx')); }); });
+      document.getElementById('app-sfb').style.display='none'; }
+    function ansS(idx){ if(i>=5)return; var fb=document.getElementById('app-sfb');
+      if(idx===cur.ans){ score++; feedback(fb,true,'✓ Верно!'); } else feedback(fb,false,'✗ Нет. Правильный ответ: «'+cur.opts[cur.ans]+'».');
+      document.getElementById('app-ss').textContent=score; i++; setTimeout(show,1300); }
+    show();
+  })();
 }
 
 /* ===================== ФИНАЛ ГЛАВЫ — БОССЫ ===================== */

frontend/textbooks/math_6_ch5.html

@@ -100,14 +100,24 @@ var ROM=['','I','II','III','IV'];
 /* ===================== § 1. ДЕКАРТОВА СИСТЕМА КООРДИНАТ ===================== */
 function buildP1(){
   var box=document.getElementById('p1-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','1.0',
+    '<p>Каждый раз, когда ты открываешь карту в телефоне или играешь в стратегию на компьютере, работает именно эта идея: у каждого места есть пара чисел — «сколько вправо» и «сколько вверх». Координаты используют GPS-навигаторы, пилоты самолётов, геологи, разработчики видеоигр и даже хирурги при операциях с точным позиционированием робота.</p>');
   h+=makeCard('theory','Координаты на плоскости','1.1',
     '<p>Две перпендикулярные координатные прямые с общим началом $O$ образуют <b>прямоугольную (декартову) систему координат</b>. Горизонтальная ось — ось <b>абсцисс</b> $Ox$, вертикальная — ось <b>ординат</b> $Oy$.</p>'
     +'<p>Положение точки задаёт <b>пара чисел</b> $(x;\\,y)$: первое — абсцисса (по $Ox$), второе — ордината (по $Oy$). Например, $A(3;\\,4)$.</p>');
-  h+=makeCard('rule','Четверти','1.2',
+  h+=makeCard('example','Разбор по шагам','1.2',
+    '<p>Как отметить точку $A(3;\\,4)$ на координатной плоскости?</p>'
+    +'<ol><li>Найди на оси $Ox$ значение $x = 3$ и проведи мысленно вертикальную линию.</li>'
+    +'<li>Найди на оси $Oy$ значение $y = 4$ и проведи мысленно горизонтальную линию.</li>'
+    +'<li>Точка пересечения этих двух линий и есть $A(3;\\,4)$.</li>'
+    +'<li>Проверь четверть: $x > 0$, $y > 0$ — значит, точка в I четверти. Верно!</li></ol>');
+  h+=makeCard('rule','Четверти','1.3',
     '<p>Оси делят плоскость на четыре <b>четверти</b> (нумеруют против часовой стрелки от правой верхней):</p>'
     +'<table class="tbl"><tr><th>Четверть</th><th>I</th><th>II</th><th>III</th><th>IV</th></tr>'
     +'<tr><td>знак $x$</td><td>+</td><td>−</td><td>−</td><td>+</td></tr>'
     +'<tr><td>знак $y$</td><td>+</td><td>+</td><td>−</td><td>−</td></tr></table>');
+  h+=makeCard('theory','А знаешь ли ты?','1.4',
+    '<p>Систему координат изобрёл французский математик и философ <b>Рене Декарт</b> в XVII веке. По легенде, идея пришла к нему, когда он лежал в постели и наблюдал за мухой на потолке: он понял, что положение мухи можно точно описать двумя числами — расстоянием до двух стен. Так родилась «декартова» система, которую сегодня используют в любом учебнике математики и любой компьютерной программе.</p>');
   h+='<div class="wg" id="p1-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прочитай координаты</div></div>'
     +'<div class="wg-help">Определи координаты отмеченной точки и введи абсциссу и ординату.</div>'
     +'<div class="score-display"><span>Точка <b id="p1-i">1</b> / 6</span><span>Очки: <b id="p1-s">0</b> / 6</span></div>'
@@ -120,6 +130,12 @@ function buildP1(){
     +'<div id="p1-qfig"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-q="1">I</button><button class="btn primary" data-q="2">II</button><button class="btn primary" data-q="3">III</button><button class="btn primary" data-q="4">IV</button></div>'
     +'<div class="feedback" id="p1-qfb"></div></div>';
+  h+='<div class="wg" id="p1-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Угадай, в какой четверти?</div></div>'
+    +'<div class="wg-help">Тебе даны знаки координат — определи номер четверти без графика.</div>'
+    +'<div class="score-display"><span>Вопрос <b id="p1-ti">1</b> / 6</span><span>Очки: <b id="p1-ts">0</b> / 6</span></div>'
+    +'<div id="p1-tq" class="qbox" style="font-size:1.1rem;text-align:center;padding:14px 0"></div>'
+    +'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-tq="1">I</button><button class="btn primary" data-tq="2">II</button><button class="btn primary" data-tq="3">III</button><button class="btn primary" data-tq="4">IV</button></div>'
+    +'<div class="feedback" id="p1-tfb"></div></div>';
   h+=secNav(null,'p2')+readBtn('p1');
   box.innerHTML=h; renderMath(box);
 
@@ -151,16 +167,39 @@ function buildP1(){
       document.getElementById('p1-qs').textContent=score; i++; setTimeout(show,1200); }
     document.querySelectorAll('#p1-iv2 [data-q]').forEach(function(b){ b.addEventListener('click',function(){ ans(+b.getAttribute('data-q')); }); }); show();
   })();
+
+  (function(){
+    var COMB=[{sx:'+',sy:'+',q:1},{sx:'-',sy:'+',q:2},{sx:'-',sy:'-',q:3},{sx:'+',sy:'-',q:4}];
+    var i=0,score=0,cur=null;
+    function show(){ if(i>=6){ document.getElementById('p1-tq').innerHTML='<b>Готово!</b> Результат: '+score+' / 6'; if(score>=5){addXp(15,'p1-iv3');bumpProgress('p1',20);}else if(score>=3){addXp(7,'p1-iv3');bumpProgress('p1',10);} return; }
+      cur=_pick(COMB); document.getElementById('p1-ti').textContent=i+1;
+      document.getElementById('p1-tq').innerHTML='Точка: $x '+cur.sx+'$, $y '+cur.sy+'$. Четверть?';
+      renderMath(document.getElementById('p1-tq'));
+      document.getElementById('p1-tfb').style.display='none'; }
+    function ans(q){ if(i>=6)return; var fb=document.getElementById('p1-tfb');
+      if(q===cur.q){ score++; feedback(fb,true,'✓ Верно — '+ROM[cur.q]+' четверть.'); } else feedback(fb,false,'✗ Нет. '+ROM[cur.q]+' четверть (x'+cur.sx+', y'+cur.sy+').');
+      document.getElementById('p1-ts').textContent=score; i++; setTimeout(show,1200); }
+    document.querySelectorAll('#p1-iv3 [data-tq]').forEach(function(b){ b.addEventListener('click',function(){ ans(+b.getAttribute('data-tq')); }); }); show();
+  })();
 }
 
 /* ===================== § 2. ГРАФИКИ РЕАЛЬНЫХ ПРОЦЕССОВ ===================== */
 function buildP2(){
   var box=document.getElementById('p2-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','2.0',
+    '<p>Каждый день ты видишь графики: прогноз погоды (температура по часам), курс доллара (цена по дням), пульс на спортивных часах (удары по минутам). Врачи читают кардиограмму — это тоже график. Умея читать любой график, ты понимаешь реальный процесс без длинных таблиц чисел.</p>');
   h+=makeCard('theory','Что показывает график','2.1',
     '<p><b>График</b> наглядно показывает, как одна величина зависит от другой: температура от времени, путь от времени, уровень воды от времени.</p>'
     +'<p>Чтобы прочитать значение, находят точку на горизонтальной оси, поднимаются до линии графика и смотрят значение на вертикальной оси.</p>');
-  h+=makeCard('example','Пример','2.2',
+  h+=makeCard('example','Разбор по шагам','2.2',
-    '<p>Если в $2$ ч температура была $4°$, то точка графика с абсциссой $2$ имеет ординату $4$.</p>');
+    '<p>Как прочитать температуру в 3 ч по графику?</p>'
+    +'<ol><li>Найди на горизонтальной оси (время) отметку $3$ ч.</li>'
+    +'<li>Из этой точки проведи мысленно вертикальную линию вверх до кривой графика.</li>'
+    +'<li>Из точки пересечения проведи горизонтальную линию влево до оси температур.</li>'
+    +'<li>Прочитай значение на вертикальной оси: $6°C$.</li>'
+    +'<li>Вывод: в 3 ч было $6°C$.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','2.3',
+    '<p>Первые графики температур и давления начали строить метеорологи в XVIII веке. Уже тогда учёные поняли: одна кривая на графике заменяет целую страницу цифр и сразу показывает тренд — растёт, падает или стоит на месте. Сегодня биржевые трейдеры принимают решения за секунды именно благодаря умению мгновенно «читать» линию на графике.</p>');
   h+='<div class="wg" id="p2-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прочитай значение по графику</div></div>'
     +'<div class="wg-help">Температура (°C) в зависимости от времени (ч). Ответь на вопрос по графику.</div>'
     +'<div class="score-display"><span>Вопрос <b id="p2-i">1</b> / 5</span><span>Очки: <b id="p2-s">0</b> / 5</span></div>'
@@ -173,6 +212,12 @@ function buildP2(){
     +'<div id="p2-cfig"></div><div id="p2-cq" class="qbox"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p2-ca" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p2-cgo">Проверить</button></div>'
     +'<div class="feedback" id="p2-cfb"></div></div>';
+  h+='<div class="wg" id="p2-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Рост, спад или стоп?</div></div>'
+    +'<div class="wg-help">На каком участке линия графика растёт, падает или остаётся горизонтальной?</div>'
+    +'<div class="score-display"><span>Вопрос <b id="p2-di">1</b> / 5</span><span>Очки: <b id="p2-ds">0</b> / 5</span></div>'
+    +'<div id="p2-dq" class="qbox"></div>'
+    +'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-dv="up">Растёт</button><button class="btn primary" data-dv="flat">Стоит</button><button class="btn primary" data-dv="down">Падает</button></div>'
+    +'<div class="feedback" id="p2-dfb"></div></div>';
   h+=secNav('p1','p3')+readBtn('p2');
   box.innerHTML=h; renderMath(box);
 
@@ -210,16 +255,48 @@ function buildP2(){
     document.getElementById('p2-cgo').addEventListener('click',go);
     document.getElementById('p2-ca').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
   })();
+
+  (function(){
+    var SEGS=[
+      {q:'Температура с 0 ч до 1 ч: как меняется?', ans:'up'},
+      {q:'Температура с 1 ч до 2 ч: как меняется?', ans:'flat'},
+      {q:'Температура с 2 ч до 3 ч: как меняется?', ans:'up'},
+      {q:'Температура с 3 ч до 4 ч: как меняется?', ans:'down'},
+      {q:'Температура с 4 ч до 5 ч: как меняется?', ans:'flat'},
+      {q:'Температура с 5 ч до 6 ч: как меняется?', ans:'down'}
+    ];
+    var i=0,score=0;
+    function show(){ if(i>=5){ document.getElementById('p2-dq').innerHTML='<b>Готово!</b> Результат: '+score+' / 5'; if(score>=4){addXp(12,'p2-iv3');bumpProgress('p2',25);}else if(score>=2){addXp(6,'p2-iv3');bumpProgress('p2',12);} return; }
+      document.getElementById('p2-di').textContent=i+1;
+      document.getElementById('p2-dq').innerHTML=SEGS[i].q;
+      document.getElementById('p2-dfb').style.display='none'; }
+    function ans(v){ if(i>=5)return; var fb=document.getElementById('p2-dfb'), cor=SEGS[i].ans;
+      var labels={up:'Растёт',flat:'Стоит',down:'Падает'};
+      if(v===cor){ score++; feedback(fb,true,'✓ Верно: '+labels[cor]+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+labels[cor]+'.');
+      document.getElementById('p2-ds').textContent=score; i++; setTimeout(show,1200); }
+    document.querySelectorAll('#p2-iv3 [data-dv]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-dv')); }); }); show();
+  })();
 }
 
 /* ===================== § 3. ГРАФИКИ ПРЯМОЙ И ОБРАТНОЙ ПРОПОРЦИОНАЛЬНОСТИ ===================== */
 function buildP3(){
   var box=document.getElementById('p3-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','3.0',
+    '<p>Прямая пропорциональность — это скорость и путь: проедешь вдвое больше часов — путь вдвое больше ($s = v \\cdot t$, где $v$ — коэффициент). Обратная — работа и время: чем больше рабочих, тем меньше часов ($t = A / n$). Курс обмена валюты, рецепты (больше порций — больше ингредиентов), топливо в баке — всё это пропорциональные зависимости.</p>');
   h+=makeCard('theory','Прямая пропорциональность','3.1',
     '<p>Если $y = kx$ (где $k\\ne 0$ — коэффициент), то $y$ <b>прямо пропорционален</b> $x$. График — <b>прямая</b>, проходящая через начало координат.</p>'
     +'<p>Чем больше $k$, тем «круче» прямая. При $k>0$ прямая идёт вверх, при $k<0$ — вниз.</p>');
   h+=makeCard('theory','Обратная пропорциональность','3.2',
     '<p>Если $y = \\dfrac{k}{x}$ (где $k\\ne 0$), то $y$ <b>обратно пропорционален</b> $x$. График — <b>гипербола</b> (две ветви), он не проходит через начало координат.</p>');
+  h+=makeCard('example','Разбор по шагам','3.3',
+    '<p>Задача: прямая $y = kx$ проходит через точку $(2;\\,6)$. Найди $k$.</p>'
+    +'<ol><li>Подставь координаты точки в формулу: $6 = k \\cdot 2$.</li>'
+    +'<li>Раздели обе части на $2$: $k = 6 : 2 = 3$.</li>'
+    +'<li>Формула зависимости: $y = 3x$.</li>'
+    +'<li>Проверка: при $x = 2$ получаем $y = 3 \\cdot 2 = 6$. Верно!</li></ol>'
+    +'<p>Аналогично для $y = \\frac{k}{x}$: если точка $(4;\\,3)$, то $k = 4 \\cdot 3 = 12$.</p>');
+  h+=makeCard('theory','А знаешь ли ты?','3.4',
+    '<p>Гипербола — одна из <b>конических сечений</b>: если разрезать конус плоскостью под определённым углом, срез будет гиперболой. Та же форма встречается в траекториях некоторых комет, в форме некоторых антенн и в архитектуре башен-градирен на электростанциях. Прямая пропорциональность же лежит в основе закона Ома ($I = U/R$ при фиксированном $U$) и закона Гука.</p>');
   h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">График y = kx</div></div>'
     +'<div class="wg-help">Двигай коэффициент $k$ — смотри, как меняется наклон прямой.</div>'
     +'<div class="sliders"><label>$k$ = <b id="p3-kv">2</b><input type="range" id="p3-k" min="-3" max="3" step="1" value="2"></label></div>'
@@ -230,6 +307,12 @@ function buildP3(){
     +'<div id="p3-cfig"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-t="kx">прямая ($y=kx$)</button><button class="btn primary" data-t="kdx">обратная ($y=\\frac{k}{x}$)</button></div>'
     +'<div class="feedback" id="p3-cfb"></div></div>';
+  h+='<div class="wg" id="p3-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Найди коэффициент k</div></div>'
+    +'<div class="wg-help">Прямая $y = kx$ проходит через заданную точку. Найди $k$.</div>'
+    +'<div class="score-display"><span>Задача <b id="p3-ki">1</b> / 6</span><span>Очки: <b id="p3-ks">0</b> / 6</span></div>'
+    +'<div id="p3-kq" class="qbox"></div>'
+    +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$k = $ <input type="number" id="p3-ka" class="tinp" style="width:80px;text-align:center"><button class="btn primary" id="p3-kgo">Проверить</button></div>'
+    +'<div class="feedback" id="p3-kfb"></div></div>';
   h+=secNav('p2','app')+readBtn('p3');
   box.innerHTML=h; renderMath(box);
 
@@ -255,19 +338,52 @@ function buildP3(){
       document.getElementById('p3-s').textContent=score; i++; setTimeout(show,1300); }
     document.querySelectorAll('#p3-iv2 [data-t]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-t')); }); }); show();
   })();
+
+  (function(){
+    var i=0,score=0,cur=null;
+    function gen(){ var a=_pick([2,3,4,5,6]), b=_pick([2,3,4,5]); cur={a:a,b:a*b,k:b}; }
+    function show(){ if(i>=6){ document.getElementById('p3-kq').innerHTML='<b>Готово!</b> Результат: '+score+' / 6'; if(score>=5){addXp(15,'p3-iv3');bumpProgress('p3',25);}else if(score>=3){addXp(8,'p3-iv3');bumpProgress('p3',12);} return; }
+      gen(); document.getElementById('p3-ki').textContent=i+1;
+      document.getElementById('p3-kq').innerHTML='Прямая $y = kx$ проходит через точку $('+cur.a+';\\,'+cur.b+')$. Найди $k$.';
+      renderMath(document.getElementById('p3-kq'));
+      document.getElementById('p3-ka').value=''; document.getElementById('p3-kfb').style.display='none'; }
+    function go(){ if(i>=6)return; var fb=document.getElementById('p3-kfb'), v=parseInt(document.getElementById('p3-ka').value,10);
+      if(isNaN(v)){ feedback(fb,false,'Введи целое число.'); return; }
+      if(v===cur.k){ score++; feedback(fb,true,'✓ Верно: $k = '+cur.k+'$ ('+cur.b+' : '+cur.a+' = '+cur.k+').'); } else feedback(fb,false,'✗ Нет. $k = '+cur.b+' : '+cur.a+' = '+cur.k+'$.');
+      renderMath(fb); document.getElementById('p3-ks').textContent=score; i++; setTimeout(show,1400); }
+    document.getElementById('p3-kgo').addEventListener('click',go);
+    document.getElementById('p3-ka').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
+  })();
 }
 
 /* ===================== § 5. МАТЕМАТИКА ВОКРУГ НАС ===================== */
 function buildApp(){
   var box=document.getElementById('app-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','5.0',
+    '<p>Координатная плоскость и графики сопровождают тебя везде: карта города — это координатная сетка; расписание поездов и автобусов — это график пути от времени; ценники в магазине описываются прямой пропорциональностью. Пилоты, капитаны кораблей, программисты, дизайнеры и врачи ежедневно работают с системами координат и графиками.</p>');
   h+=makeCard('theory','Графики и координаты вокруг нас','5.1',
     '<p>Координаты — это «адрес» на карте, в игре, на экране. Графики показывают курс валют, погоду, расписание движения, рост и вес. Уметь читать график — полезный жизненный навык.</p>');
+  h+=makeCard('example','Разбор по шагам','5.2',
+    '<p>Машина едет со скоростью $60$ км/ч. Составим и прочитаем график пути.</p>'
+    +'<ol><li>Формула: $s = 60 \\cdot t$ — это прямая пропорциональность.</li>'
+    +'<li>За $1$ ч: $s = 60$ км. За $2$ ч: $s = 120$ км. За $3$ ч: $s = 180$ км.</li>'
+    +'<li>Отметим точки $(1;60)$, $(2;120)$, $(3;180)$ и соединим прямой.</li>'
+    +'<li>Горизонтальный участок графика означал бы остановку: путь не растёт, но время идёт.</li>'
+    +'<li>По графику легко найти путь за любое время — просто читаем координату.</li></ol>');
+  h+=makeCard('theory','А знаешь ли ты?','5.3',
+    '<p>В видеоиграх каждый пиксель на экране задаётся парой координат $(x, y)$, где $(0, 0)$ — обычно левый верхний угол. Создатели игр описывают движение персонажа формулами прямой пропорциональности: $x = x_0 + v_x \\cdot t$, $y = y_0 + v_y \\cdot t$. Это точно такая же математика, которую вы изучаете сейчас — только работающая со скоростью десятков кадров в секунду.</p>');
   h+='<div class="wg" id="app-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Путь и время</div></div>'
     +'<div class="wg-help">График пути (км) от времени (ч). Ответь на вопрос.</div>'
     +'<div class="score-display"><span>Вопрос <b id="app-i">1</b> / 5</span><span>Очки: <b id="app-s">0</b> / 5</span></div>'
     +'<div id="app-fig"></div><div id="app-q" class="qbox"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="app-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="app-go">Проверить</button></div>'
     +'<div class="feedback" id="app-fb"></div></div>';
+  h+='<div class="wg" id="app-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Скорость по графику пути</div></div>'
+    +'<div class="wg-help">По двум точкам графика пути вычисли скорость: $v = \\Delta s / \\Delta t$.</div>'
+    +'<div class="score-display"><span>Задача <b id="app-vi">1</b> / 5</span><span>Очки: <b id="app-vs">0</b> / 5</span></div>'
+    +'<div id="app-vq" class="qbox"></div>'
+    +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$v = $ <input type="number" id="app-va" class="tinp" style="width:90px;text-align:center"> км/ч <button class="btn primary" id="app-vgo">Проверить</button></div>'
+    +'<div class="feedback" id="app-vfb"></div></div>';
   h+=secNav('p3','final')+readBtn('app');
   box.innerHTML=h; renderMath(box);
 
@@ -294,6 +410,27 @@ function buildApp(){
     document.getElementById('app-go').addEventListener('click',go);
     document.getElementById('app-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
   })();
+
+  (function(){
+    var VSEGS=[
+      {t1:0,s1:0,t2:1,s2:40},{t1:1,s1:40,t2:2,s2:80},
+      {t1:4,s1:120,t2:5,s2:160},{t1:0,s1:0,t2:2,s2:80},{t1:3,s1:80,t2:5,s2:160}
+    ];
+    var i=0,score=0;
+    function show(){ if(i>=5){ document.getElementById('app-vq').innerHTML='<b>Готово!</b> Результат: '+score+' / 5'; if(score>=4){addXp(15,'app-iv2');bumpProgress('app',30);}else if(score>=2){addXp(7,'app-iv2');bumpProgress('app',15);} return; }
+      var seg=VSEGS[i]; document.getElementById('app-vi').textContent=i+1;
+      var ds=seg.s2-seg.s1, dt=seg.t2-seg.t1;
+      document.getElementById('app-vq').innerHTML='С '+seg.t1+' ч до '+seg.t2+' ч путь вырос с '+seg.s1+' км до '+seg.s2+' км. Найди среднюю скорость (км/ч).';
+      document.getElementById('app-va').value=''; document.getElementById('app-vfb').style.display='none';
+      document.getElementById('app-vq')._ans=Math.round(ds/dt); }
+    function go(){ if(i>=5)return; var fb=document.getElementById('app-vfb'), ans=document.getElementById('app-vq')._ans, v=parseInt(document.getElementById('app-va').value,10);
+      if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
+      var seg=VSEGS[i], ds=seg.s2-seg.s1, dt=seg.t2-seg.t1;
+      if(v===ans){ score++; feedback(fb,true,'✓ Верно: '+ds+' / '+dt+' = '+ans+' км/ч.'); } else feedback(fb,false,'✗ Нет. '+ds+' : '+dt+' = '+ans+' км/ч.');
+      document.getElementById('app-vs').textContent=score; i++; setTimeout(show,1300); }
+    document.getElementById('app-vgo').addEventListener('click',go);
+    document.getElementById('app-va').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
+  })();
 }
 
 /* ===================== ФИНАЛ ГЛАВЫ — БОССЫ ===================== */

frontend/textbooks/math_6_ch6.html

@@ -153,11 +153,22 @@ var TRIS=[
 /* ===================== § 1. ТЕЛА И РАЗВЁРТКИ ===================== */
 function buildP1(){
   var box=document.getElementById('p1-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','1.0',
+    '<p>Геометрические тела окружают нас повсюду. Кубик сахара — куб, консервная банка — цилиндр, египетская пирамида — пирамида, вафельный рожок мороженого — конус, шатровая крыша — призма. Когда упаковщик разворачивает коробку из-под сока в плоский лист — он работает с развёрткой. Понимание развёрток нужно дизайнерам, инженерам и даже кулинарам, которые лепят конусы из вафельных коржей.</p>');
   h+=makeCard('theory','Тела в пространстве','1.1',
     '<p>Окружающие предметы имеют форму <b>геометрических тел</b>: коробка — это прямоугольный параллелепипед (частный случай — <b>куб</b>), палатка — <b>призма</b>, египетские сооружения — <b>пирамида</b>, банка — <b>цилиндр</b>, рожок мороженого — <b>конус</b>.</p>'
     +'<p>У многогранников есть <b>грани</b> (плоские стороны), <b>рёбра</b> (линии стыка граней) и <b>вершины</b> (точки стыка рёбер).</p>'
     +'<div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:center">'
     +['cube','prism','pyramid','cylinder','cone'].map(function(k){ return '<div style="text-align:center">'+svgWrap(140,120,SOLIDS[k])+'<div style="font-size:.8rem;color:var(--muted)">'+SOLID_NAME[k]+'</div></div>'; }).join('')+'</div>');
+  h+=makeCard('example','Разбор по шагам: считаем грани, рёбра и вершины куба','1.1e',
+    '<ol>'
+    +'<li>Смотрим на куб. Он ограничен плоскими <b>квадратами</b> — это грани. Считаем: верхняя, нижняя и 4 боковых = <b>6 граней</b>.</li>'
+    +'<li>Там, где встречаются две грани, проходит <b>ребро</b>. На каждом квадрате 4 ребра, но каждое ребро общее для двух граней: $6 \\cdot 4 \\div 2 = $ <b>12 рёбер</b>.</li>'
+    +'<li>Там, где сходятся три ребра, стоит <b>вершина</b>. У куба: $12 \\cdot 2 \\div 3 = $ <b>8 вершин</b>.</li>'
+    +'<li>Проверяем формулой Эйлера: $F - E + V = 2$, то есть $6 - 12 + 8 = 2$ — верно!</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','1.2t',
+    '<p>Формула Эйлера $F - E + V = 2$ (грани минус рёбра плюс вершины равно 2) выполняется для <b>любого</b> выпуклого многогранника — куба, призмы, пирамиды и даже футбольного мяча (из 20 шестиугольников и 12 пятиугольников). Леонард Эйлер доказал это ещё в 1752 году.</p>');
   h+=makeCard('theory','Развёртка тела','1.2',
     '<p><b>Развёртка</b> — это фигура на плоскости, из которой можно склеить тело. У куба развёртка состоит из 6 квадратов, у цилиндра — из прямоугольника и двух кругов.</p>'
     +'<div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:center">'+svgWrap(160,160,NETS.cube)+svgWrap(160,160,NETS.cylinder)+'</div>');
@@ -173,9 +184,20 @@ function buildP1(){
     +'<div id="p1-dfig"></div>'
     +'<div id="p1-dopts" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"></div>'
     +'<div class="feedback" id="p1-dfb"></div></div>';
+  h+='<div class="wg" id="p1-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Многогранник или тело вращения?</div></div>'
+    +'<div class="wg-help">Перетащи каждое тело в нужную группу. <b>Многогранники</b> ограничены плоскими гранями; <b>тела вращения</b> получаются вращением фигуры вокруг оси.</div>'
+    +'<div id="p1-sorter"></div>'
+    +'<div class="feedback" id="p1-s3fb"></div></div>';
   h+=secNav(null,'p2')+readBtn('p1');
   box.innerHTML=h; renderMath(box);
 
+  setupSorter('p1-sorter',{
+    items:['Куб','Призма','Пирамида','Цилиндр','Конус'],
+    groups:['Многогранник','Тело вращения'],
+    answers:{'Куб':'Многогранник','Призма':'Многогранник','Пирамида':'Многогранник','Цилиндр':'Тело вращения','Конус':'Тело вращения'},
+    onDone:function(ok,total){ var fb=document.getElementById('p1-s3fb'); if(ok===total){ feedback(fb,true,'Все '+total+' верно!'); addXp(12,'p1-iv3'); bumpProgress('p1',20); } else { feedback(fb,false,'Верно '+ok+' из '+total+'. Попробуй ещё.'); } }
+  });
+
   (function(){
     var i=0,score=0,cur=null, polys=['cube','prism','pyramid'], lbl=['граней','рёбер','вершин'];
     function gen(){ var k=_pick(polys), j=_ri(0,2); cur={k:k, j:j, ans:SOLID_FEV[k][j]}; }
@@ -212,12 +234,23 @@ function buildP1(){
 /* ===================== § 2. ОКРУЖНОСТЬ. КРУГ ===================== */
 function buildP2(){
   var box=document.getElementById('p2-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','2.0',
+    '<p>Колёса, монеты, блины, циферблаты, пицца, батуты, тарелки — всё это круги или окружности. Инженеры рассчитывают, сколько краски нужно на круглую разметку стадиона, используя формулу $S = \\pi r^2$. Велосипедисты знают, что чем больше колесо, тем дальше оно катится за один оборот — ведь длина окружности $C = 2\\pi r$ растёт вместе с радиусом.</p>');
   h+=makeCard('theory','Окружность и круг','2.1',
     '<p><b>Окружность</b> — замкнутая линия, все точки которой одинаково удалены от центра. <b>Круг</b> — часть плоскости, ограниченная окружностью.</p>'
     +'<p><b>Радиус</b> $r$ — расстояние от центра до окружности; <b>диаметр</b> $d=2r$.</p>');
   h+=makeCard('rule','Длина окружности и площадь круга','2.2',
     '<p>Длина окружности: $C = 2\\pi r = \\pi d$. Площадь круга: $S = \\pi r^2$.</p>'
     +'<p>Число $\\pi \\approx 3{,}14$ — отношение длины окружности к диаметру (одинаково для любой окружности).</p>');
+  h+=makeCard('example','Разбор по шагам: найди C и S при r = 5','2.1e',
+    '<ol>'
+    +'<li>Записываем данные: $r = 5$, $\\pi = 3{,}14$.</li>'
+    +'<li>Длина окружности: $C = 2 \\cdot \\pi \\cdot r = 2 \\cdot 3{,}14 \\cdot 5 = 31{,}4$.</li>'
+    +'<li>Площадь круга: $S = \\pi \\cdot r^2 = 3{,}14 \\cdot 5^2 = 3{,}14 \\cdot 25 = 78{,}5$.</li>'
+    +'<li>Проверяем единицы: длина — в тех же единицах, что и $r$; площадь — в квадратных единицах.</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','2.2t',
+    '<p>Число $\\pi$ известно человечеству более 4000 лет. Вавилоняне использовали значение $3{,}125$, а египтяне — $(4/3)^2 \\approx 1{,}78$... нет, они считали $\\pi \\approx 3{,}16$. Сейчас $\\pi$ вычислено до <b>более 100 триллионов знаков</b> после запятой — и всё равно конца не видно, потому что $\\pi$ иррационально.</p>');
   h+='<div class="wg" id="p2-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Радиус, длина, площадь</div></div>'
     +'<div class="wg-help">Двигай радиус — смотри, как меняются длина окружности и площадь круга ($\\pi=3{,}14$).</div>'
     +'<div class="sliders"><label>Радиус $r$ = <b id="p2-rv">3</b><input type="range" id="p2-r" min="1" max="8" value="3"></label></div>'
@@ -260,10 +293,21 @@ function buildP2(){
 /* ===================== § 3. ВИДЫ ТРЕУГОЛЬНИКОВ ===================== */
 function buildP3(){
   var box=document.getElementById('p3-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','3.0',
+    '<p>Треугольники — самая жёсткая геометрическая фигура: именно поэтому треугольные фермы держат мосты и крыши. Дорожный знак «Уступи дорогу» — равносторонний треугольник. Египетские пирамиды в разрезе дают равнобедренный треугольник. А строители, чтобы убедиться, что угол ровно прямой, проверяют соотношение сторон 3:4:5 — это прямоугольный треугольник.</p>');
   h+=makeCard('rule','По сторонам','3.1',
     '<p><b>Разносторонний</b> — все стороны разные. <b>Равнобедренный</b> — две стороны равны. <b>Равносторонний</b> — все три стороны равны (равные стороны отмечают одинаковыми штрихами).</p>');
   h+=makeCard('rule','По углам','3.2',
-    '<p><b>Остроугольный</b> — все углы острые ($<90°$). <b>Прямоугольный</b> — есть прямой угол ($=90°$). <b>Тупоугольный</b> — есть тупой угол ($>90°$).</p>');
+    '<p><b>Остроугольный</b> — все углы острые ($&lt;90°$). <b>Прямоугольный</b> — есть прямой угол ($=90°$). <b>Тупоугольный</b> — есть тупой угол ($&gt;90°$).</p>');
+  h+=makeCard('example','Разбор по шагам: определи вид треугольника со сторонами 3, 4, 5','3.1e',
+    '<ol>'
+    +'<li>Проверяем стороны: $3 \\ne 4$, $4 \\ne 5$, $3 \\ne 5$ — все разные. По сторонам: <b>разносторонний</b>.</li>'
+    +'<li>Проверяем, прямоугольный ли он: $3^2 + 4^2 = 9 + 16 = 25 = 5^2$. Теорема Пифагора выполнена!</li>'
+    +'<li>Значит, есть угол $90°$. По углам: <b>прямоугольный</b>.</li>'
+    +'<li>Итог: треугольник <b>прямоугольный разносторонний</b>. Это знаменитый египетский треугольник!</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','3.2t',
+    '<p>Треугольник со сторонами $3$, $4$, $5$ называют «египетским» — строители Древнего Египта натягивали верёвку с 12 узлами (3+4+5) в виде треугольника, чтобы получить идеальный прямой угол для кладки стен пирамид. Этим приёмом пользуются строители до сих пор!</p>');
   h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Вид по сторонам</div></div>'
     +'<div class="wg-help">Определи вид треугольника по сторонам (штрихи отмечают равные стороны).</div>'
     +'<div class="score-display"><span>Вопрос <b id="p3-i">1</b> / 5</span><span>Очки: <b id="p3-s">0</b> / 5</span></div>'
@@ -276,9 +320,20 @@ function buildP3(){
     +'<div id="p3-afig"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-a="остроугольный">остроугольный</button><button class="btn primary" data-a="прямоугольный">прямоугольный</button><button class="btn primary" data-a="тупоугольный">тупоугольный</button></div>'
     +'<div class="feedback" id="p3-afb"></div></div>';
+  h+='<div class="wg" id="p3-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Классификатор треугольников</div></div>'
+    +'<div class="wg-help">Перетащи каждое слово в нужный столбец: «По сторонам» или «По углам».</div>'
+    +'<div id="p3-sorter"></div>'
+    +'<div class="feedback" id="p3-s3fb"></div></div>';
   h+=secNav('p2','p4')+readBtn('p3');
   box.innerHTML=h; renderMath(box);
 
+  setupSorter('p3-sorter',{
+    items:['Равносторонний','Равнобедренный','Разносторонний','Остроугольный','Прямоугольный','Тупоугольный'],
+    groups:['По сторонам','По углам'],
+    answers:{'Равносторонний':'По сторонам','Равнобедренный':'По сторонам','Разносторонний':'По сторонам','Остроугольный':'По углам','Прямоугольный':'По углам','Тупоугольный':'По углам'},
+    onDone:function(ok,total){ var fb=document.getElementById('p3-s3fb'); if(ok===total){ feedback(fb,true,'Все '+total+' верно! Классификация усвоена.'); addXp(12,'p3-iv3'); bumpProgress('p3',20); } else { feedback(fb,false,'Верно '+ok+' из '+total+'. Попробуй ещё раз.'); } }
+  });
+
   (function(){
     var i=0,score=0,cur=null;
     function gen(){ var t=_pick(TRIS), info=triClass(t[0],t[1],t[2]); cur={t:t,info:info}; }
@@ -309,18 +364,50 @@ function buildP3(){
 /* ===================== § 4. СИММЕТРИЯ ОТНОСИТЕЛЬНО ТОЧКИ ===================== */
 function buildP4(){
   var box=document.getElementById('p4-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','4.0',
+    '<p>Центральная симметрия — это поворот на $180°$ вокруг точки. Именно поэтому игральная карта «туз» выглядит одинаково при повороте вверх ногами: центр карты является центром симметрии. Точно так же симметричны относительно центра дорожный знак «Движение в обоих направлениях» и многие кристаллы в природе.</p>');
   h+=makeCard('theory','Центральная симметрия','4.1',
     '<p>Точки $A$ и $A\'$ <b>симметричны относительно точки</b> $O$, если $O$ — <b>середина</b> отрезка $AA\'$. Точка $O$ — <b>центр симметрии</b>.</p>'
     +'<p>Координаты образа: если $A(x;\\,y)$ и центр $O(a;\\,b)$, то $A\'(2a-x;\\;2b-y)$. Относительно начала координат: $A(x;y)\\to A\'(-x;-y)$.</p>');
+  h+=makeCard('example','Разбор по шагам: найди образ точки A(3; -2) относительно O(1; 1)','4.1e',
+    '<ol>'
+    +'<li>Записываем формулу: $A\'(2a - x;\\; 2b - y)$, где $a=1$, $b=1$, $x=3$, $y=-2$.</li>'
+    +'<li>Считаем $x\'$: $2 \\cdot 1 - 3 = 2 - 3 = -1$.</li>'
+    +'<li>Считаем $y\'$: $2 \\cdot 1 - (-2) = 2 + 2 = 4$.</li>'
+    +'<li>Ответ: $A\'(-1;\\; 4)$. Проверяем: середина $AA\'$ — точка $\\left(\\tfrac{3+(-1)}{2};\\,\\tfrac{-2+4}{2}\\right) = (1;\\,1) = O$. Верно!</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','4.2t',
+    '<p>Центральная симметрия — это то же самое, что поворот на $180°$. Именно поэтому многие буквы при повороте переходят сами в себя: буква «N», цифра «8», буква «S». А вот буква «R» симметрией центра не обладает — она превратится в зеркальную копию.</p>');
   h+='<div class="wg" id="p4-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Построй образ точки</div></div>'
     +'<div class="wg-help">Найди координаты точки $A\'$, симметричной $A$ относительно центра $O$.</div>'
     +'<div class="score-display"><span>Задача <b id="p4-i">1</b> / 5</span><span>Очки: <b id="p4-s">0</b> / 5</span></div>'
     +'<div id="p4-fig"></div><div id="p4-q" class="qbox"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$x\'=$ <input type="number" id="p4-x" class="tinp" style="width:70px;text-align:center"> $y\'=$ <input type="number" id="p4-y" class="tinp" style="width:70px;text-align:center"><button class="btn primary" id="p4-go">Проверить</button></div>'
     +'<div class="feedback" id="p4-fb"></div></div>';
+  h+='<div class="wg" id="p4-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Тренажёр: образ относительно начала координат</div></div>'
+    +'<div class="wg-help">Найди координаты точки $A\'$, симметричной $A$ относительно <b>начала координат $O(0;0)$</b>.</div>'
+    +'<div class="score-display"><span>Задача <b id="p4-i2">1</b> / 5</span><span>Очки: <b id="p4-s2">0</b> / 5</span></div>'
+    +'<div id="p4-q2" class="qbox"></div>'
+    +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$x\'=$ <input type="number" id="p4-x2" class="tinp" style="width:70px;text-align:center"> $y\'=$ <input type="number" id="p4-y2" class="tinp" style="width:70px;text-align:center"><button class="btn primary" id="p4-go2">Проверить</button></div>'
+    +'<div class="feedback" id="p4-fb2"></div></div>';
   h+=secNav('p3','p5')+readBtn('p4');
   box.innerHTML=h; renderMath(box);
 
+  (function(){
+    var i2=0,score2=0,cur2=null;
+    function gen2(){ var ax=_pick([-5,-4,-3,-2,-1,1,2,3,4,5]),ay=_pick([-5,-4,-3,-2,-1,1,2,3,4,5]); cur2={ax:ax,ay:ay,rx:-ax,ry:-ay}; }
+    function show2(){ if(i2>=5){ document.getElementById('p4-q2').innerHTML='<b>Готово!</b> '+score2+' / 5'; if(score2>=4){addXp(12,'p4-iv2');bumpProgress('p4',30);}else if(score2>=2){addXp(6,'p4-iv2');bumpProgress('p4',15);} return; }
+      gen2(); document.getElementById('p4-i2').textContent=i2+1;
+      document.getElementById('p4-q2').innerHTML='$A('+cur2.ax+';\\,'+cur2.ay+')$, центр симметрии $O(0;\\,0)$. Найди $A\'$.'; renderMath(document.getElementById('p4-q2'));
+      document.getElementById('p4-x2').value=''; document.getElementById('p4-y2').value=''; document.getElementById('p4-fb2').style.display='none'; }
+    function go2(){ if(i2>=5)return; var fb=document.getElementById('p4-fb2'), x=parseInt(document.getElementById('p4-x2').value,10), y=parseInt(document.getElementById('p4-y2').value,10);
+      if(isNaN(x)||isNaN(y)){ feedback(fb,false,'Введи обе координаты.'); return; }
+      if(x===cur2.rx&&y===cur2.ry){ score2++; feedback(fb,true,'✓ Верно: $A\'('+cur2.rx+';\\,'+cur2.ry+')$. Знаки меняются на противоположные.'); } else feedback(fb,false,'✗ Нет. $A\'(-x;\\,-y)=('+cur2.rx+';\\,'+cur2.ry+')$.');
+      document.getElementById('p4-s2').textContent=score2; i2++; setTimeout(show2,1500); }
+    document.getElementById('p4-go2').addEventListener('click',go2);
+    document.getElementById('p4-y2').addEventListener('keydown',function(e){ if(e.key==='Enter')go2(); }); show2();
+  })();
+
   (function(){
     var i=0,score=0,cur=null;
     function gen(){ var ax=_ri(-4,4),ay=_ri(-4,4),ox=_ri(-2,2),oy=_ri(-2,2); cur={ax:ax,ay:ay,ox:ox,oy:oy,rx:2*ox-ax,ry:2*oy-ay}; }
@@ -341,18 +428,48 @@ function buildP4(){
 /* ===================== § 5. СИММЕТРИЯ ОТНОСИТЕЛЬНО ПРЯМОЙ ===================== */
 function buildP5(){
   var box=document.getElementById('p5-body'); var h='';
+  h+=makeCard('oral','Где это в жизни','5.0',
+    '<p>Осевая симметрия — это «зеркало». Бабочки, листья деревьев, буква «А», лицо человека — все они (почти) симметричны относительно вертикальной оси. Архитекторы используют осевую симметрию при проектировании дворцов и соборов — симметричные фасады смотрятся строго и красиво. В компьютерной графике отражение объекта — это тоже осевая симметрия.</p>');
   h+=makeCard('theory','Осевая симметрия','5.1',
     '<p>Точки $A$ и $A\'$ <b>симметричны относительно прямой</b> (оси), если эта прямая — <b>серединный перпендикуляр</b> отрезка $AA\'$: она проходит через середину $AA\'$ под прямым углом.</p>'
     +'<p>Относительно оси $Oy$: $A(x;\\,y)\\to A\'(-x;\\,y)$. Относительно оси $Ox$: $A(x;\\,y)\\to A\'(x;\\,-y)$.</p>');
+  h+=makeCard('example','Разбор по шагам: найди образ точки A(-3; 4) относительно осей Ox и Oy','5.1e',
+    '<ol>'
+    +'<li>Исходная точка: $A(-3;\\;4)$.</li>'
+    +'<li><b>Относительно $Oy$</b>: меняем знак $x$, $y$ остаётся. $A\'(3;\\;4)$. Точка «перепрыгнула» ось $Oy$ на то же расстояние.</li>'
+    +'<li><b>Относительно $Ox$</b>: меняем знак $y$, $x$ остаётся. $A\'\'(-3;\\;-4)$. Точка «перепрыгнула» ось $Ox$.</li>'
+    +'<li>Запоминаем: ось $Oy$ — меняется $x$; ось $Ox$ — меняется $y$. «Меняется та координата, которая перпендикулярна оси».</li>'
+    +'</ol>');
+  h+=makeCard('theory','А знаешь ли ты?','5.2t',
+    '<p>Знаменитый Тадж-Махал в Индии построен с идеальной осевой симметрией. Главная ось проходит через центральный купол. Даже отражение в водоёме перед мавзолеем задумано архитектором — так симметрия удваивается! Многие природные снежинки тоже симметричны, но уже шестикратно — относительно шести осей.</p>');
   h+='<div class="wg" id="p5-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Зеркало относительно оси</div></div>'
     +'<div class="wg-help">Найди координаты точки, симметричной $A$ относительно указанной оси.</div>'
     +'<div class="score-display"><span>Задача <b id="p5-i">1</b> / 6</span><span>Очки: <b id="p5-s">0</b> / 6</span></div>'
     +'<div id="p5-fig"></div><div id="p5-q" class="qbox"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$x\'=$ <input type="number" id="p5-x" class="tinp" style="width:70px;text-align:center"> $y\'=$ <input type="number" id="p5-y" class="tinp" style="width:70px;text-align:center"><button class="btn primary" id="p5-go">Проверить</button></div>'
     +'<div class="feedback" id="p5-fb"></div></div>';
+  h+='<div class="wg" id="p5-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Какая ось: Ox или Oy?</div></div>'
+    +'<div class="wg-help">Тебе даны точка $A$ и её образ $A\'$. Определи, относительно какой оси сделано отражение.</div>'
+    +'<div class="score-display"><span>Вопрос <b id="p5-i2">1</b> / 5</span><span>Очки: <b id="p5-s2">0</b> / 5</span></div>'
+    +'<div id="p5-q2" class="qbox"></div>'
+    +'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-ax2="Oy">Ось $Oy$</button><button class="btn primary" data-ax2="Ox">Ось $Ox$</button></div>'
+    +'<div class="feedback" id="p5-fb2"></div></div>';
   h+=secNav('p4','final')+readBtn('p5');
   box.innerHTML=h; renderMath(box);
 
+  (function(){
+    var i2=0,score2=0,cur2=null;
+    function gen2(){ var ax=_pick([-4,-3,-2,-1,1,2,3,4]),ay=_pick([-4,-3,-2,-1,1,2,3,4]),axis=_pick(['Oy','Ox']); cur2={ax:ax,ay:ay,axis:axis,rx:axis==='Oy'?-ax:ax,ry:axis==='Oy'?ay:-ay}; }
+    function show2(){ if(i2>=5){ document.getElementById('p5-q2').innerHTML='<b>Готово!</b> '+score2+' / 5'; if(score2>=4){addXp(12,'p5-iv2');bumpProgress('p5',30);}else if(score2>=2){addXp(6,'p5-iv2');bumpProgress('p5',15);} return; }
+      gen2(); document.getElementById('p5-i2').textContent=i2+1;
+      document.getElementById('p5-q2').innerHTML='$A('+cur2.ax+';\\,'+cur2.ay+')$ и её образ $A\'('+cur2.rx+';\\,'+cur2.ry+')$. Относительно какой оси?'; renderMath(document.getElementById('p5-q2'));
+      document.getElementById('p5-fb2').style.display='none'; }
+    function ans2(axis){ if(i2>=5)return; var fb=document.getElementById('p5-fb2');
+      if(axis===cur2.axis){ score2++; feedback(fb,true,'✓ Верно — ось $'+cur2.axis+'$!'); } else feedback(fb,false,'✗ Нет. Это отражение относительно оси $'+cur2.axis+'$.');
+      document.getElementById('p5-s2').textContent=score2; i2++; setTimeout(show2,1400); }
+    document.querySelectorAll('#p5-iv2 [data-ax2]').forEach(function(b){ b.addEventListener('click',function(){ ans2(b.getAttribute('data-ax2')); }); }); show2();
+  })();
+
   (function(){
     var i=0,score=0,cur=null;
     function gen(){ var ax=_pick([-4,-3,-2,-1,1,2,3,4]),ay=_pick([-4,-3,-2,-1,1,2,3,4]),axis=_pick(['Oy','Ox']); cur={ax:ax,ay:ay,axis:axis,rx:axis==='Oy'?-ax:ax,ry:axis==='Oy'?ay:-ay}; }

plans/textbooks-6/PLAN_MATH_6_ENRICH.md

@@ -0,0 +1,47 @@
+# PLAN — Обогащение «Математики 6»: каждый параграф интересным + интерактивным
+
+> Базовый учебник готов (6 глав, движок `math6_engine.js`, `Math6` svg). Тесты 18/18.
+> Цель этого этапа: сделать **каждый содержательный §** живым и увлекательным для ученика,
+> который впервые изучает тему. Исполнитель — **Sonnet**, по одной главе за агент (файлы глав независимы).
+
+## Что добавляем в КАЖДЫЙ содержательный § (поверх уже существующего)
+
+У каждого § уже есть 2 интерактива + теория-карточки + шпаргалка + подсказка + глоссарий.
+Sonnet **дополняет** (не ломает существующее) так, чтобы § стал интереснее:
+
+1. **«Где это в жизни» (хук).** Карточка `makeCard('oral', …)` или `theory`: 2–4 предложения — зачем тема нужна, где встречается (деньги, спорт, кулинария, природа, техника, игры). Цепляющее начало.
+2. **Разбор примера по шагам.** Карточка `makeCard('example', …)` с **нумерованными шагами** решения (если ещё нет) — чтобы ученик видел алгоритм, а не только ответ. Можно `<details class="spoiler">` «Решение по шагам».
+3. **«А знаешь ли ты?» / интересный факт.** Короткий факт/история по теме (математика, история чисел, рекорды) — `makeCard('theory', 'А знаешь ли ты?', …)` или spoiler.
+4. **Минимум 2 РАБОЧИХ интерактива.** Если у § их меньше или они слабые — довести до 2 содержательных (тренажёр со счётом+XP, конструктор/демонстратор, классификатор-DnD, визуализация через `Math6`). Каждый — с обратной связью `feedback()` и начислением `addXp`/`bumpProgress`.
+5. **Мини-челлендж «со звёздочкой».** Одна задача чуть сложнее/любопытнее в конце интерактивов (по желанию).
+
+Финалы глав (боссы) и прикладные § («Математика вокруг нас») — оставить, можно усилить 1 боссом/задачей.
+
+## Жёсткие правила (НЕ нарушать — иначе сломается движок/страница)
+
+- **Редактировать ТОЛЬКО свой файл главы** `frontend/textbooks/math_6_chN.html`. НЕ трогать `math6_engine.js`, `math6_svg.js`, `math6.css`, другие главы — это общие/чужие файлы.
+- Контент § — внутри его `function buildPk(){…}`; данные — в `SIDEBARS`/`TIPS`/`GLOSSARY`; всё уже подключается через `Object.assign(window.M6, …)` в конце скрипта. **Структуру M6/порядок init НЕ менять.**
+- Хелперы брать готовые (глобальные от движка): `makeCard, secNav, readBtn, feedback, renderMath, fmt, num, addXp, bumpProgress, achievement, setupSorter, confetti`; графика — `window.Math6.*` (numberLine/plane/pie/venn — только вызывать). Локальные `_ri/_pick/_kf/_round` уже есть в начале скрипта главы.
+- **KaTeX: десятичная запятая — `2{,}5`** (не `2,5`). Числа считать целочисленными мантиссами (`_mant/_dec`), не float.
+- **⛔ Эмодзи запрещены** — только inline SVG `.ic`.
+- Каждый `buildPk` заканчивается `secNav(prev,next) + readBtn('pk')` и `box.innerHTML=…; renderMath(box);` затем навешивает обработчики.
+- Русский язык, уровень 6 класса, по программе Герасимова. Не выдумывать неверную математику.
+
+## Само-проверка (обязательно перед завершением агента)
+
+1. `node --check` своего файла (через Bash — синтаксис html не проверяется, но JS внутри — нет; вместо этого ниже).
+2. Прогнать общий тест: `cd backend && node -e "require('./tests/math6-page.test.js')"` — все тесты зелёные, ошибок скриптов нет. (Тест монтирует каждую главу в jsdom; если builder упал — увидишь.)
+3. Если тест по своей главе падает — чинить, не оставлять сломанным.
+
+## Раскладка по агентам (1 глава = 1 агент Sonnet)
+
+| Агент | Файл | Параграфы для обогащения |
+|---|---|---|
+| ch1 | `math_6_ch1.html` | §1–§10 + §12 (десятичные дроби) |
+| ch2 | `math_6_ch2.html` | §1–§7 + §9 (проценты, пропорции) |
+| ch3 | `math_6_ch3.html` | §1–§4 (множества) |
+| ch4 | `math_6_ch4.html` | §1–§9 + §11 (рациональные числа) |
+| ch5 | `math_6_ch5.html` | §1–§3 + §5 (координатная плоскость) |
+| ch6 | `math_6_ch6.html` | §1–§5 (наглядная геометрия) |
+
+После работы агентов — общий прогон тестов, ревью, коммит поимённо + push (см. [[project_math6_textbook]]).