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>
This commit is contained in:
Maxim Dolgolyov
2026-06-02 21:14:56 +03:00
parent fe378371bd
commit 85c516e811
7 changed files with 813 additions and 12 deletions
+142
View File
@@ -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> (09), умножение на 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>'