From 5a2a1be089f2c4ff7a469bedaabad69e560abdde Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Wed, 3 Jun 2026 10:34:15 +0300 Subject: [PATCH] =?UTF-8?q?feat(math5):=20=D0=93=D0=BB=D0=B0=D0=B2=D0=B0?= =?UTF-8?q?=203=20=C2=AB=D0=9E=D0=B1=D1=8B=D0=BA=D0=BD=D0=BE=D0=B2=D0=B5?= =?UTF-8?q?=D0=BD=D0=BD=D1=8B=D0=B5=20=D0=B4=D1=80=D0=BE=D0=B1=D0=B8=C2=BB?= =?UTF-8?q?=20=E2=80=94=20=C2=A71=E2=80=9318=20+=20=D1=84=D0=B8=D0=BD?= =?UTF-8?q?=D0=B0=D0=BB=20(Sonnet=20=D0=BF=D0=BE=20=D1=8D=D1=82=D0=B0?= =?UTF-8?q?=D0=BB=D0=BE=D0=BD=D1=83)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Дроби и доли, основное свойство и сокращение, смешанные числа, сравнение, сложение/вычитание/умножение/деление дробей, задачи на дроби; геометрия: параллельные/перпендикулярные прямые, периметр многоугольника, площадь и площадь треугольника, среднее арифметическое, столбчатые диаграммы, параллелепипед и объём (2D-изометрия). Inline-SVG визуалы (полоса долей, сетка умножения, изометрия). Реализовано Sonnet-агентом инкрементально по образцу math_5_ch1; проверено: грузится без ошибок, §1–18 без заглушек. Учебник «Математика 5» наполнен ЦЕЛИКОМ (3 главы, 44 §). Тесты math5: 12/12. Co-Authored-By: Claude Opus 4.8 (1M context) --- backend/tests/math5-page.test.js | 26 +- frontend/textbooks/math_5_ch3.html | 1461 ++++++++++++++++++++++++++++ 2 files changed, 1485 insertions(+), 2 deletions(-) diff --git a/backend/tests/math5-page.test.js b/backend/tests/math5-page.test.js index 20f2bb6..74c84b5 100644 --- a/backend/tests/math5-page.test.js +++ b/backend/tests/math5-page.test.js @@ -75,9 +75,31 @@ for (const ch of CHAPTERS) { }); } -test('ch3: §§ без билдеров — заглушка движка (каркас ждёт наполнения)', async () => { +test('ch3: дроби + геометрия + объём + финал', async () => { + const { doc, errors } = await loadDom('math_5_ch3.html'); + const win = doc.defaultView; + assert.ok(!doc.querySelector('#p1-body .m6-placeholder'), '§1 наполнен'); + assert.ok(doc.querySelector('#p1-fig svg'), '§1: полоса долей (SVG)'); + win.goTo('p7'); await wait(80); + assert.ok(doc.querySelector('#p7-fig svg'), '§7: сетка умножения дробей (SVG)'); + win.goTo('p17'); await wait(80); + assert.ok(doc.querySelector('#p17-fig svg'), '§17: параллелепипед (изометрия SVG)'); + win.goTo('p18'); await wait(80); + assert.ok(doc.querySelector('#p18-fig svg'), '§18: объём кубиками (изометрия SVG)'); + win.goTo('final'); await wait(80); + assert.ok(doc.querySelector('#fin-go'), 'финал: арена боссов'); + win.bumpProgress('final', 100); await wait(20); + assert.ok(win.M6STATE.achievements.has('ch3_done'), 'достижение «Глава 3 пройдена»'); + assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); +}); + +test('ch3: все § §1–§18 наполнены (нет заглушек)', async () => { const { doc } = await loadDom('math_5_ch3.html'); - assert.ok(doc.querySelector('#p1-body .m6-placeholder'), 'ch3: заглушка § 1'); + const win = doc.defaultView; + for (let n = 1; n <= 18; n++) { + win.goTo('p' + n); await wait(20); + assert.ok(!doc.querySelector('#p' + n + '-body .m6-placeholder'), '§' + n + ' наполнен'); + } }); test('ch2: выражения/уравнения/углы + финал', async () => { diff --git a/frontend/textbooks/math_5_ch3.html b/frontend/textbooks/math_5_ch3.html index 0c878fb..41362c9 100644 --- a/frontend/textbooks/math_5_ch3.html +++ b/frontend/textbooks/math_5_ch3.html @@ -101,6 +101,1467 @@ window.M6 = { sidebars: {}, tips: [], glossary: [], searchRows: [], builders: {}, footer: 'Интерактивный учебник «Математика 5» · Глава 3 · Обыкновенные дроби · LearnSpace' }; + +/* ==== ХЕЛПЕРЫ ==== */ +function _ri(a,b){ return a + Math.floor(Math.random()*(b-a+1)); } +function _pick(a){ return a[_ri(0,a.length-1)]; } +function _kf(x){ return String(x).replace('.','{,}'); } +function _grp(s){ s=String(s); var o='',c=0; for(var i=s.length-1;i>=0;i--){ o=s[i]+o; if(++c%3===0&&i>0)o='\\,'+o; } return o; } +function gcd(a,b){ while(b){var t=b;b=a%b;a=t;} return a; } + +/* ==== BUILDERS ==== */ + +function buildFinal(){ + var box=document.getElementById('final-body'); var h=''; + h+=makeCard('theory','Финал главы 3','★', + '

Пять боссов проверят владение дробями и геометрией. Победи не меньше четырёх — и глава покорена!

'); + h+='
Боссы
Сразись с главой 3
' + +'
' + +'
Босс 1 / 5Побеждено: 0 / 5
' + +'
' + +'
' + +'
' + +'
'; + h+=secNav('p18',null)+readBtn('final','Завершить главу 3 (+10 XP)'); + box.innerHTML=h; renderMath(box); + (function(){ + var bosses=[ + function(){ var n=_ri(1,7),d=_ri(n+1,10); return {name:'Страж Долей', q:'Сократи дробь $\\dfrac{'+(n*2)+'}{'+( d*2)+'}$. Введи числитель (знаменатель '+d+').', ans:n}; }, + function(){ var a=_ri(1,4),b=_ri(1,4),d=_ri(3,8); return {name:'Лорд Слагаемых', q:'$\\dfrac{'+a+'}{'+d+'} + \\dfrac{'+b+'}{'+d+'}$ — числитель результата (знаменатель '+d+').', ans:a+b}; }, + function(){ var a=_ri(2,5),b=_ri(2,5); return {name:'Умножитель Дробей', q:'$\\dfrac{'+a+'}{'+( a+1)+'} \\cdot \\dfrac{'+(a+1)+'}{'+b+'}$ — числитель результата (знаменатель '+b+').', ans:a}; }, + function(){ var n=_ri(2,9),k=_ri(2,7); return {name:'Часть от числа', q:'Найди $\\dfrac{'+n+'}{'+k+'}$ от числа '+(n*k)+'.', ans:n*n}; }, + function(){ var a=_ri(2,6),b=_ri(2,6),c=_ri(1,4); return {name:'Мастер Площади', q:'Площадь прямоугольника '+a+' × '+b+' = ?', ans:a*b}; } + ]; + var i=0,score=0,cur=null,done=false; + function show(){ + if(i>=5){ done=true; document.getElementById('fin-name').textContent=''; document.getElementById('fin-q').innerHTML=(score>=4?'Победа! Глава 3 пройдена. ':'Бой окончен. ')+'Побеждено боссов: '+score+' / 5.'; + document.getElementById('fin-hp').style.width=(score>=4?0:40)+'%'; + if(score>=4){ addXp(40,'final'); bumpProgress('final',100); if(window.confetti)try{confetti();}catch(e){} } else { bumpProgress('final',60); } + return; } + cur=bosses[i](); document.getElementById('fin-i').textContent=i+1; document.getElementById('fin-s').textContent=score; + document.getElementById('fin-name').textContent='Босс '+(i+1)+': '+cur.name; + document.getElementById('fin-hp').style.width=(100-i*20)+'%'; + document.getElementById('fin-q').innerHTML=cur.q; renderMath(document.getElementById('fin-q')); + document.getElementById('fin-a').value=''; document.getElementById('fin-fb').style.display='none'; } + function go(){ if(done||i>=5)return; var fb=document.getElementById('fin-fb'), v=parseFloat(document.getElementById('fin-a').value.replace(',','.').trim()); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(Math.abs(v-cur.ans)<1e-9){ score++; feedback(fb,true,'✓ Босс повержен! Ответ '+cur.ans+'.'); } else feedback(fb,false,'✗ Босс устоял. Верный ответ: '+cur.ans+'.'); + document.getElementById('fin-s').textContent=score; i++; setTimeout(show,1400); } + document.getElementById('fin-go').addEventListener('click',go); + document.getElementById('fin-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 1. ДРОБНЫЕ ЧИСЛА ==== */ +function buildP1(){ + var box=document.getElementById('p1-body'); var h=''; + h+=makeCard('oral','Где это в жизни','1.0', + '

Мама режет пирог на $4$ равные части и даёт тебе одну. Ты съел четверть пирога — это дробь $\\dfrac{1}{4}$. Стрелка часов прошла половину круга — это $\\dfrac{1}{2}$. Дроби встречаются везде, где что-то делят на равные части.

'); + h+=makeCard('theory','Обыкновенная дробь','1.1', + '

Если единицу разбить на $n$ равных частей, каждая такая часть называется $\\dfrac{1}{n}$ (одна $n$-ая).

' + +'

$m$ таких долей записывают дробью $\\dfrac{m}{n}$, где $m$ — числитель (сколько взяли), $n$ — знаменатель (на сколько делили).

' + +'
' + +'' + +'' + +'' + +'' + +'' + +'' + +'1' + +'2' + +'3' + +'4' + +'Закрашена 1 из 4 частей — дробь ¼' + +'
'); + h+=makeCard('rule','Как читать дробь','1.2', + '

$\\dfrac{3}{5}$ — «три пятых».   $\\dfrac{7}{8}$ — «семь восьмых».   $\\dfrac{1}{2}$ — «одна вторая» (половина).   $\\dfrac{1}{4}$ — «одна четвёртая» (четверть).

'); + h+=makeCard('example','Разбор по шагам','1.3', + '

Прямоугольник разделён на $8$ равных частей, $3$ из них закрашены. Запиши дробь.

' + +'
    ' + +'
  1. Знаменатель = на сколько частей разбит: $8$.
    2. ' + +'
  2. Числитель = сколько частей взяли: $3$.
    3. ' + +'
  3. Дробь: $\\dfrac{3}{8}$. Читаем «три восьмых».
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','1.4', + '

Древние египтяне использовали только дроби с числителем $1$ — так называемые единичные дроби. Например, вместо $\\dfrac{2}{5}$ они писали $\\dfrac{1}{3}+\\dfrac{1}{15}$. Их таблицы из папируса Ахмеса дошли до нас через $3700$ лет!

'); + h+='
Интерактив 1
Запиши дробь по рисунку
' + +'
Полоска разбита на равные части. Введи числитель (закрашенные части).
' + +'
Вопрос 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'Числитель:
' + +'
'; + h+='
Интерактив 2
Найди дробь от числа
' + +'
Вычисли дробную часть от числа. Ответ целое число.
' + +'
Задача 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav(null,'p2')+readBtn('p1'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function stripSVG(n,m){ var W=280,H=40,pw=Math.floor((W-8)/n),s=''; + for(var k=0;k'; } + return s+''; } + function gen(){ var n=_ri(3,8), m=_ri(1,n-1); cur={n:n,m:m}; } + function show(){ if(i>=6){ document.getElementById('p1-fig2').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p1-iv1');bumpProgress('p1',30);}else if(score>=3){addXp(8,'p1-iv1');bumpProgress('p1',16);} return; } + gen(); document.getElementById('p1-i').textContent=i+1; + document.getElementById('p1-fig2').innerHTML=stripSVG(cur.n,cur.m)+'
Знаменатель: '+cur.n+'
'; + document.getElementById('p1-a').value=''; document.getElementById('p1-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p1-fb'), v=parseInt(document.getElementById('p1-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.m){ score++; feedback(fb,true,'✓ Верно! Дробь $\\dfrac{'+cur.m+'}{'+cur.n+'}$.'); renderMath(fb); } else feedback(fb,false,'✗ Нет. Закрашено '+cur.m+' частей.'); + document.getElementById('p1-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p1-go').addEventListener('click',go); + document.getElementById('p1-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var PROB=[ + {q:'$\\dfrac{1}{4}$ от $20$',ans:5},{q:'$\\dfrac{1}{3}$ от $18$',ans:6},{q:'$\\dfrac{1}{5}$ от $35$',ans:7}, + {q:'$\\dfrac{1}{6}$ от $42$',ans:7},{q:'$\\dfrac{1}{7}$ от $49$',ans:7},{q:'$\\dfrac{1}{8}$ от $64$',ans:8}, + {q:'$\\dfrac{1}{2}$ от $30$',ans:15},{q:'$\\dfrac{1}{9}$ от $36$',ans:4} + ]; + var order=[],i=0,score=0,cur=null; + function reorder(){ order=PROB.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; } } reorder(); + function show(){ if(i>=5){ document.getElementById('p1-pq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p1-iv2');bumpProgress('p1',30);}else if(score>=2){addXp(8,'p1-iv2');bumpProgress('p1',16);} return; } + cur=PROB[order[i]]; document.getElementById('p1-pi').textContent=i+1; + document.getElementById('p1-pq').innerHTML=cur.q; renderMath(document.getElementById('p1-pq')); + document.getElementById('p1-pa').value=''; document.getElementById('p1-pfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p1-pfb'), v=parseFloat(document.getElementById('p1-pa').value); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(Math.abs(v-cur.ans)<1e-9){ score++; feedback(fb,true,'✓ Верно! Ответ '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ '+cur.ans+'.'); + document.getElementById('p1-ps').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p1-pgo').addEventListener('click',go); + document.getElementById('p1-pa').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 2. ДЕЛЕНИЕ И ДРОБИ. ОСНОВНОЕ СВОЙСТВО ==== */ +function buildP2(){ + var box=document.getElementById('p2-body'); var h=''; + h+=makeCard('oral','Где это в жизни','2.0', + '

Поделить $3$ яблока на $4$ детей можно, только если разрезать их на части. Каждый получит $\\dfrac{3}{4}$ яблока. Деление с «некруглым» результатом и рождает дроби: $a \\div b = \\dfrac{a}{b}$.

'); + h+=makeCard('rule','Деление и дробь','2.1', + '

$a : b = \\dfrac{a}{b}$.   Числитель — делимое, знаменатель — делитель.

' + +'

Дробь можно читать как деление: $\\dfrac{12}{4}=12:4=3$.

'); + h+=makeCard('rule','Основное свойство дроби','2.2', + '

Дробь не изменится, если числитель и знаменатель умножить (или разделить) на одно и то же ненулевое число:

' + +'

$\\dfrac{a}{b} = \\dfrac{a\\cdot k}{b\\cdot k} = \\dfrac{a:k}{b:k}$.

' + +'

Нахождение равной дроби с меньшими числами называют сокращением. Для этого делят числитель и знаменатель на их НОД. Дробь, у которой НОД числителя и знаменателя равен $1$, называется несократимой.

'); + h+=makeCard('example','Разбор по шагам','2.3', + '

Сократим $\\dfrac{18}{24}$.

' + +'
    ' + +'
  1. Находим НОД$(18,24)$. Делители $18$: $1,2,3,6,9,18$. Делители $24$: $1,2,3,4,6,8,12,24$. НОД $=6$.
    2. ' + +'
  2. Делим числитель и знаменатель на $6$: $\\dfrac{18:6}{24:6}=\\dfrac{3}{4}$.
    3. ' + +'
  3. Проверяем: НОД$(3,4)=1$ — дробь несократима.
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','2.4', + '

Горизонтальную черту дроби (vinculum) ввёл арабский математик аль-Хасар в XII веке. В Европе её распространил Фибоначчи в $1202$ году. До этого числитель просто писали рядом с знаменателем без черты, и всё время путались!

'); + h+='
Интерактив 1
Сократи дробь
' + +'
Введи числитель сокращённой дроби. Знаменатель подсказан.
' + +'
Дробь 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'Числитель:
' + +'
'; + h+='
Интерактив 2
Эквивалентные дроби
' + +'
Найди пропущенный числитель в равенстве дробей.
' + +'
Вопрос 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p1','p3')+readBtn('p2'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ + var g=_pick([2,3,4,5,6]), n=_ri(1,5)*g, d=_ri(n/g+1,8)*g; + var rn=n/g, rd=d/g; cur={n:n,d:d,rn:rn,rd:rd}; } + function show(){ if(i>=6){ document.getElementById('p2-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p2-iv1');bumpProgress('p2',30);}else if(score>=3){addXp(8,'p2-iv1');bumpProgress('p2',16);} return; } + gen(); document.getElementById('p2-i').textContent=i+1; + document.getElementById('p2-q').innerHTML='Сократи $\\dfrac{'+cur.n+'}{'+cur.d+'}$ — знаменатель станет $'+cur.rd+'$.'; renderMath(document.getElementById('p2-q')); + document.getElementById('p2-a').value=''; document.getElementById('p2-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p2-fb'), v=parseInt(document.getElementById('p2-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.rn){ score++; feedback(fb,true,'✓ Верно! $\\dfrac{'+cur.n+'}{'+cur.d+'}=\\dfrac{'+cur.rn+'}{'+cur.rd+'}$.'); renderMath(fb); } else feedback(fb,false,'✗ Нет. Числитель: '+cur.rn+'.'); + document.getElementById('p2-s').textContent=score; i++; setTimeout(show,1300); } + document.getElementById('p2-go').addEventListener('click',go); + document.getElementById('p2-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var n=_ri(1,5), d=_ri(n+1,7), k=_ri(2,5); cur={n:n,d:d,k:k,ans:n*k,nd:d*k}; } + function show(){ if(i>=5){ document.getElementById('p2-eq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p2-iv2');bumpProgress('p2',30);}else if(score>=2){addXp(8,'p2-iv2');bumpProgress('p2',16);} return; } + gen(); document.getElementById('p2-ei').textContent=i+1; + document.getElementById('p2-eq').innerHTML='$\\dfrac{'+cur.n+'}{'+cur.d+'} = \\dfrac{\\square}{'+cur.nd+'}$'; renderMath(document.getElementById('p2-eq')); + document.getElementById('p2-ea').value=''; document.getElementById('p2-efb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p2-efb'), v=parseInt(document.getElementById('p2-ea').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ '+cur.ans+'.'); + document.getElementById('p2-es').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p2-ego').addEventListener('click',go); + document.getElementById('p2-ea').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 3. ПРАВИЛЬНЫЕ, НЕПРАВИЛЬНЫЕ, СМЕШАННЫЕ ==== */ +function buildP3(){ + var box=document.getElementById('p3-body'); var h=''; + h+=makeCard('oral','Где это в жизни','3.0', + '

Купить $2\\dfrac{1}{2}$ килограмма яблок или $\\dfrac{5}{2}$ — это одно и то же! Смешанные числа удобны в быту, неправильные дроби — в вычислениях. Уметь переводить одно в другое очень полезно.

'); + h+=makeCard('rule','Правильные и неправильные дроби','3.1', + '

Дробь $\\dfrac{m}{n}$ называют правильной, если $m < n$ (числитель меньше знаменателя): значение меньше $1$.

' + +'

Если $m \\ge n$ — дробь неправильная: значение $\\ge 1$.

'); + h+=makeCard('rule','Смешанные числа','3.2', + '

Смешанное число = целая часть + правильная дробь: $2\\dfrac{3}{5}$ читают «два целых три пятых».

' + +'

Перевод неправильной дроби в смешанное число: разделить числитель на знаменатель с остатком. Например: $\\dfrac{11}{4}=2\\dfrac{3}{4}$ (так как $11=4\\cdot2+3$).

' + +'

Обратно: $2\\dfrac{3}{4}=\\dfrac{4\\cdot2+3}{4}=\\dfrac{11}{4}$.

' + +'
' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'1' + +'1' + +'¼' + +'2¼ = 9/4' + +'
'); + h+=makeCard('example','Разбор по шагам','3.3', + '

Переведём $\\dfrac{17}{5}$ в смешанное число.

' + +'
    ' + +'
  1. Делим: $17 : 5 = 3$ (ост. $2$), ведь $5\\cdot3=15$, $17-15=2$.
    2. ' + +'
  2. Целая часть $= 3$, дробная часть $= \\dfrac{2}{5}$.
    3. ' + +'
  3. Ответ: $\\dfrac{17}{5} = 3\\dfrac{2}{5}$.
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','3.4', + '

В разных странах смешанные числа записывают по-разному. В России пишут $2\\dfrac{3}{5}$. В некоторых странах — $2+\\dfrac{3}{5}$ или даже $2\\frac{3}{5}$ без знака плюс. В алгебре смешанные числа почти не используют — предпочитают неправильные дроби, чтобы не путать с умножением.

'); + h+='
Интерактив 1
Неправильная дробь → смешанное число
' + +'
Переведи неправильную дробь в смешанное число. Введи целую часть.
' + +'
Дробь 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'Целая часть:
' + +'
'; + h+='
Интерактив 2
Смешанное → неправильная дробь
' + +'
Переведи смешанное число в неправильную дробь. Введи числитель.
' + +'
Дробь 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'Числитель:
' + +'
'; + h+=secNav('p2','p4')+readBtn('p3'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var d=_ri(2,7), q=_ri(2,5), r=_ri(1,d-1); cur={n:d*q+r,d:d,q:q,r:r}; } + function show(){ if(i>=6){ document.getElementById('p3-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p3-iv1');bumpProgress('p3',30);}else if(score>=3){addXp(8,'p3-iv1');bumpProgress('p3',16);} return; } + gen(); document.getElementById('p3-i').textContent=i+1; + document.getElementById('p3-q').innerHTML='$\\dfrac{'+cur.n+'}{'+cur.d+'}$'; renderMath(document.getElementById('p3-q')); + document.getElementById('p3-a').value=''; document.getElementById('p3-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p3-fb'), v=parseInt(document.getElementById('p3-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.q){ score++; feedback(fb,true,'✓ Верно! $\\dfrac{'+cur.n+'}{'+cur.d+'}='+cur.q+'\\dfrac{'+cur.r+'}{'+cur.d+'}$.'); renderMath(fb); } else feedback(fb,false,'✗ Нет. Целая часть: '+cur.q+'.'); + document.getElementById('p3-s').textContent=score; i++; setTimeout(show,1300); } + document.getElementById('p3-go').addEventListener('click',go); + document.getElementById('p3-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var d=_ri(2,7), w=_ri(2,5), r=_ri(1,d-1); cur={w:w,r:r,d:d,ans:d*w+r}; } + function show(){ if(i>=5){ document.getElementById('p3-mq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p3-iv2');bumpProgress('p3',30);}else if(score>=2){addXp(8,'p3-iv2');bumpProgress('p3',16);} return; } + gen(); document.getElementById('p3-mi').textContent=i+1; + document.getElementById('p3-mq').innerHTML='$'+cur.w+'\\dfrac{'+cur.r+'}{'+cur.d+'}$ → знаменатель останется $'+cur.d+'$.'; renderMath(document.getElementById('p3-mq')); + document.getElementById('p3-ma').value=''; document.getElementById('p3-mfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p3-mfb'), v=parseInt(document.getElementById('p3-ma').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Числитель '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Числитель: '+cur.ans+'.'); + document.getElementById('p3-ms').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p3-mgo').addEventListener('click',go); + document.getElementById('p3-ma').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 4. СРАВНЕНИЕ ДРОБЕЙ ==== */ +function buildP4(){ + var box=document.getElementById('p4-body'); var h=''; + h+=makeCard('oral','Где это в жизни','4.0', + '

Какой кусок пирога больше: $\\dfrac{3}{8}$ или $\\dfrac{2}{5}$? На первый взгляд неочевидно. Научившись сравнивать дроби, ты сможешь выбирать лучшую скидку в магазине, правильно читать рецепты и оценивать доли.

'); + h+=makeCard('rule','Как сравнивать дроби','4.1', + '

Одинаковый знаменатель: больше та дробь, у которой больше числитель. $\\dfrac{3}{7} > \\dfrac{2}{7}$.

' + +'

Разные знаменатели: привести к общему знаменателю (НОК), затем сравнить числители.

' + +'

$\\dfrac{3}{4}$ и $\\dfrac{5}{6}$: НОК$(4,6)=12$. $\\dfrac{3}{4}=\\dfrac{9}{12}$, $\\dfrac{5}{6}=\\dfrac{10}{12}$. Поскольку $9<10$, имеем $\\dfrac{3}{4}<\\dfrac{5}{6}$.

'); + h+=makeCard('example','Разбор по шагам','4.2', + '

Сравним $\\dfrac{5}{6}$ и $\\dfrac{7}{9}$.

' + +'
    ' + +'
  1. НОК$(6,9)=18$.
    2. ' + +'
  2. $\\dfrac{5}{6}=\\dfrac{15}{18}$, $\\dfrac{7}{9}=\\dfrac{14}{18}$.
    3. ' + +'
  3. $15>14$, значит $\\dfrac{5}{6}>\\dfrac{7}{9}$.
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','4.3', + '

Есть быстрый способ: «крест-накрест». Сравниваем $\\dfrac{a}{b}$ и $\\dfrac{c}{d}$: умножаем крест-накрест ($a\\cdot d$ и $b\\cdot c$). Если $a\\cdot d > b\\cdot c$, то первая дробь больше. Это работает, потому что обе части умножены на $b\\cdot d>0$.

'); + h+='
Интерактив 1
Поставь знак
' + +'
Сравни дроби: выбери < = >
' + +'
Вопрос 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'
'; + h+='
Интерактив 2
Числитель при сравнении
' + +'
Приведи к общему знаменателю и введи числитель первой дроби.
' + +'
Вопрос 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p3','p5')+readBtn('p4'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function lcm(a,b){ return a*b/gcd(a,b); } + function gen(){ var d1=_ri(2,8), d2=_ri(2,8), n1=_ri(1,d1-1), n2=_ri(1,d2-1); + var l=lcm(d1,d2), k1=l/d1, k2=l/d2, nn1=n1*k1, nn2=n2*k2; + var cmp=nn1>nn2?'>':(nn1=6){ document.getElementById('p4-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p4-iv1');bumpProgress('p4',30);}else if(score>=3){addXp(8,'p4-iv1');bumpProgress('p4',16);} return; } + gen(); document.getElementById('p4-i').textContent=i+1; + document.getElementById('p4-q').innerHTML='$\\dfrac{'+cur.n1+'}{'+cur.d1+'} \\;\\square\\; \\dfrac{'+cur.n2+'}{'+cur.d2+'}$'; renderMath(document.getElementById('p4-q')); + document.getElementById('p4-fb').style.display='none'; } + function ans(sym){ if(i>=6)return; var fb=document.getElementById('p4-fb'); + if(sym===cur.cmp){ score++; feedback(fb,true,'✓ Верно!'); } else feedback(fb,false,'✗ Нет. Правильный знак: '+cur.cmp+'.'); + document.getElementById('p4-s').textContent=score; i++; setTimeout(show,1100); } + document.querySelectorAll('#p4-iv1 [data-cmp]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-cmp')); }); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function lcm(a,b){ return a*b/gcd(a,b); } + function gen(){ var d1=_ri(2,6), d2=_ri(2,6); while(d2===d1)d2=_ri(2,6); var n1=_ri(1,d1-1); + var l=lcm(d1,d2); cur={n1:n1,d1:d1,d2:d2,l:l,ans:n1*(l/d1)}; } + function show(){ if(i>=5){ document.getElementById('p4-cq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p4-iv2');bumpProgress('p4',30);}else if(score>=2){addXp(8,'p4-iv2');bumpProgress('p4',16);} return; } + gen(); document.getElementById('p4-ci').textContent=i+1; + document.getElementById('p4-cq').innerHTML='$\\dfrac{'+cur.n1+'}{'+cur.d1+'}=\\dfrac{\\square}{'+cur.l+'}$'; renderMath(document.getElementById('p4-cq')); + document.getElementById('p4-ca').value=''; document.getElementById('p4-cfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p4-cfb'), v=parseInt(document.getElementById('p4-ca').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ '+cur.ans+'.'); + document.getElementById('p4-cs').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p4-cgo').addEventListener('click',go); + document.getElementById('p4-ca').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 5. СЛОЖЕНИЕ И ВЫЧИТАНИЕ ДРОБЕЙ ==== */ +function buildP5(){ + var box=document.getElementById('p5-body'); var h=''; + h+=makeCard('oral','Где это в жизни','5.0', + '

Ты съел $\\dfrac{1}{4}$ пиццы утром и $\\dfrac{2}{4}$ вечером. Сколько всего? Это сложение дробей с одинаковыми знаменателями. А если утром было $\\dfrac{1}{3}$ и вечером $\\dfrac{1}{4}$? Нужен общий знаменатель.

'); + h+=makeCard('rule','Одинаковые знаменатели','5.1', + '

$\\dfrac{a}{d}\\pm\\dfrac{b}{d}=\\dfrac{a\\pm b}{d}$.   Знаменатель не меняется, складываем/вычитаем только числители.

'); + h+=makeCard('rule','Разные знаменатели','5.2', + '

1. Найти НОК знаменателей.
' + +'2. Привести каждую дробь к этому знаменателю.
' + +'3. Сложить/вычесть числители.

' + +'

$\\dfrac{1}{4}+\\dfrac{1}{6}$: НОК$(4,6)=12$. $\\dfrac{3}{12}+\\dfrac{2}{12}=\\dfrac{5}{12}$.

'); + h+=makeCard('example','Разбор по шагам','5.3', + '

Вычислим $\\dfrac{3}{4}-\\dfrac{1}{6}$.

' + +'
    ' + +'
  1. НОК$(4,6)=12$.
    2. ' + +'
  2. $\\dfrac{3}{4}=\\dfrac{9}{12}$, $\\dfrac{1}{6}=\\dfrac{2}{12}$.
    3. ' + +'
  3. $\\dfrac{9}{12}-\\dfrac{2}{12}=\\dfrac{7}{12}$.
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','5.4', + '

Правило общего знаменателя существует с древности. Индийский математик Брахмагупта описал его ещё в VII веке. Арабы называли числитель «числом» (بسط), а знаменатель — «основанием» (مقام) — эти слова и сейчас используют в арабском.

'); + h+='
Интерактив 1
Сложи дроби (одинаковый знаменатель)
' + +'
Введи числитель суммы.
' + +'
Пример 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'Числитель:
' + +'
'; + h+='
Интерактив 2
Сложение с разными знаменателями
' + +'
Введи числитель результата (после приведения к НОК).
' + +'
Пример 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p4','p6')+readBtn('p5'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var d=_ri(3,9), a=_ri(1,d-1), b=_ri(1,d-a); cur={a:a,b:b,d:d,ans:a+b}; } + function show(){ if(i>=6){ document.getElementById('p5-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p5-iv1');bumpProgress('p5',30);}else if(score>=3){addXp(8,'p5-iv1');bumpProgress('p5',16);} return; } + gen(); document.getElementById('p5-i').textContent=i+1; + document.getElementById('p5-q').innerHTML='$\\dfrac{'+cur.a+'}{'+cur.d+'} + \\dfrac{'+cur.b+'}{'+cur.d+'}$ — знаменатель: $'+cur.d+'$.'; renderMath(document.getElementById('p5-q')); + document.getElementById('p5-a').value=''; document.getElementById('p5-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p5-fb'), v=parseInt(document.getElementById('p5-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Числитель '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Числитель '+cur.ans+'.'); + document.getElementById('p5-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p5-go').addEventListener('click',go); + document.getElementById('p5-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function lcm(a,b){ return a*b/gcd(a,b); } + function gen(){ var d1=_ri(2,6), d2=_ri(2,6); while(d2===d1)d2=_ri(2,6); + var n1=_ri(1,d1-1), n2=_ri(1,d2-1), l=lcm(d1,d2); + var rn=n1*(l/d1)+n2*(l/d2); cur={n1:n1,d1:d1,n2:n2,d2:d2,l:l,ans:rn}; } + function show(){ if(i>=5){ document.getElementById('p5-rq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p5-iv2');bumpProgress('p5',30);}else if(score>=2){addXp(8,'p5-iv2');bumpProgress('p5',16);} return; } + gen(); document.getElementById('p5-ri').textContent=i+1; + document.getElementById('p5-rq').innerHTML='$\\dfrac{'+cur.n1+'}{'+cur.d1+'} + \\dfrac{'+cur.n2+'}{'+cur.d2+'}$ — знаменатель станет $'+cur.l+'$.'; renderMath(document.getElementById('p5-rq')); + document.getElementById('p5-ra').value=''; document.getElementById('p5-rfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p5-rfb'), v=parseInt(document.getElementById('p5-ra').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Числитель: '+cur.ans+'.'); + document.getElementById('p5-rs').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p5-rgo').addEventListener('click',go); + document.getElementById('p5-ra').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 6. СЛОЖЕНИЕ И ВЫЧИТАНИЕ СМЕШАННЫХ ЧИСЕЛ ==== */ +function buildP6(){ + var box=document.getElementById('p6-body'); var h=''; + h+=makeCard('oral','Где это в жизни','6.0', + '

Рецепт: $1\\dfrac{1}{2}$ стакана муки и $2\\dfrac{3}{4}$ стакана сахара. Сколько всего сыпучих продуктов? Здесь нужно складывать смешанные числа — это умение пригодится на кухне, в мастерской и в магазине.

'); + h+=makeCard('rule','Сложение смешанных чисел','6.1', + '

Складываем целые части и дробные части отдельно:

' + +'

$2\\dfrac{1}{4}+1\\dfrac{1}{4}=(2+1)+\\left(\\dfrac{1}{4}+\\dfrac{1}{4}\\right)=3\\dfrac{2}{4}=3\\dfrac{1}{2}$.

' + +'

Если сумма дробных частей $\\ge 1$ — переводим лишнее в целую часть.

'); + h+=makeCard('rule','Вычитание смешанных чисел','6.2', + '

Вычитаем целые и дробные части отдельно. Если дробная часть уменьшаемого меньше вычитаемой — занимаем единицу из целой части.

' + +'

$3\\dfrac{1}{6}-1\\dfrac{4}{6}$: дробная часть $\\dfrac{1}{6}<\\dfrac{4}{6}$. Берём $1$ из $3$: получаем $2\\dfrac{7}{6}-1\\dfrac{4}{6}=1\\dfrac{3}{6}=1\\dfrac{1}{2}$.

'); + h+=makeCard('example','Разбор по шагам','6.3', + '

Вычислим $3\\dfrac{2}{5}+1\\dfrac{4}{5}$.

' + +'
    ' + +'
  1. Целые: $3+1=4$.
    2. ' + +'
  2. Дроби: $\\dfrac{2}{5}+\\dfrac{4}{5}=\\dfrac{6}{5}=1\\dfrac{1}{5}$.
    3. ' + +'
  3. Итого: $4+1\\dfrac{1}{5}=5\\dfrac{1}{5}$.
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','6.4', + '

В старых русских рецептах меры назывались «фунт», «золотник», «лот» — и их записывали смешанными числами. Один фунт равен $409{,}5$ грамма. Перевести рецепт в граммы без знания дробей было невозможно!

'); + h+='
Интерактив 1
Сложение смешанных чисел
' + +'
Вычисли сумму. Введи целую часть результата.
' + +'
Пример 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'Целая часть:
' + +'
'; + h+='
Интерактив 2
Вычитание смешанных чисел
' + +'
Вычисли разность. Введи целую часть результата.
' + +'
Пример 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'Целая часть:
' + +'
'; + h+=secNav('p5','p7')+readBtn('p6'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var d=_ri(3,8), w1=_ri(1,4), n1=_ri(1,d-1), w2=_ri(1,3), n2=_ri(1,d-1); + var rn=n1+n2, rw=w1+w2+Math.floor(rn/d); rn=rn%d; cur={w1:w1,n1:n1,w2:w2,n2:n2,d:d,rw:rw,rn:rn}; } + function show(){ if(i>=6){ document.getElementById('p6-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p6-iv1');bumpProgress('p6',30);}else if(score>=3){addXp(8,'p6-iv1');bumpProgress('p6',16);} return; } + gen(); document.getElementById('p6-i').textContent=i+1; + document.getElementById('p6-q').innerHTML='$'+cur.w1+'\\dfrac{'+cur.n1+'}{'+cur.d+'} + '+cur.w2+'\\dfrac{'+cur.n2+'}{'+cur.d+'}$'; renderMath(document.getElementById('p6-q')); + document.getElementById('p6-a').value=''; document.getElementById('p6-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p6-fb'), v=parseInt(document.getElementById('p6-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.rw){ score++; feedback(fb,true,'✓ Верно! Целая часть '+cur.rw+(cur.rn>0?', дробная '+cur.rn+'/'+cur.d:'')+'.'); } else feedback(fb,false,'✗ Нет. Целая часть: '+cur.rw+'.'); + document.getElementById('p6-s').textContent=score; i++; setTimeout(show,1300); } + document.getElementById('p6-go').addEventListener('click',go); + document.getElementById('p6-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var d=_ri(4,8), w1=_ri(3,6), n1=_ri(1,d-1), w2=_ri(1,w1-1), n2=_ri(1,d-1); + var v1=w1*d+n1, v2=w2*d+n2, rv=v1-v2, rw=Math.floor(rv/d); cur={w1:w1,n1:n1,w2:w2,n2:n2,d:d,rw:rw}; } + function show(){ if(i>=5){ document.getElementById('p6-vq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p6-iv2');bumpProgress('p6',30);}else if(score>=2){addXp(8,'p6-iv2');bumpProgress('p6',16);} return; } + gen(); document.getElementById('p6-vi').textContent=i+1; + document.getElementById('p6-vq').innerHTML='$'+cur.w1+'\\dfrac{'+cur.n1+'}{'+cur.d+'} - '+cur.w2+'\\dfrac{'+cur.n2+'}{'+cur.d+'}$'; renderMath(document.getElementById('p6-vq')); + document.getElementById('p6-va').value=''; document.getElementById('p6-vfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p6-vfb'), v=parseInt(document.getElementById('p6-va').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.rw){ score++; feedback(fb,true,'✓ Верно! Целая часть '+cur.rw+'.'); } else feedback(fb,false,'✗ Нет. Целая часть: '+cur.rw+'.'); + document.getElementById('p6-vs').textContent=score; i++; setTimeout(show,1300); } + document.getElementById('p6-vgo').addEventListener('click',go); + document.getElementById('p6-va').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 7. УМНОЖЕНИЕ ДРОБЕЙ ==== */ +function buildP7(){ + var box=document.getElementById('p7-body'); var h=''; + h+=makeCard('oral','Где это в жизни','7.0', + '

Плитка шоколада разбита на $4$ ряда по $6$ кусочков. Ты хочешь $\\dfrac{2}{3}$ плитки. Это $\\dfrac{2}{3}\\cdot 24=16$ кусочков. Умножение дробей встречается в кулинарии, строительстве, финансах.

'); + h+=makeCard('rule','Умножение дробей','7.1', + '

$\\dfrac{a}{b}\\cdot\\dfrac{c}{d}=\\dfrac{a\\cdot c}{b\\cdot d}$.   Числители перемножают, знаменатели перемножают.

' + +'

Перед умножением удобно сокращать крест-накрест: $\\dfrac{3}{4}\\cdot\\dfrac{8}{9}=\\dfrac{3}{9}\\cdot\\dfrac{8}{4}=\\dfrac{1}{3}\\cdot\\dfrac{2}{1}=\\dfrac{2}{3}$.

' + +'
' + +'' + +'' + +'' + +'' + +'' + +'½ × ½ = ¼ закрашено' + +'
'); + h+=makeCard('example','Разбор по шагам','7.2', + '

Вычислим $\\dfrac{4}{9}\\cdot\\dfrac{3}{8}$.

' + +'
    ' + +'
  1. Сокращаем: $4$ и $8$ — делятся на $4$; $3$ и $9$ — делятся на $3$.
    2. ' + +'
  2. $\\dfrac{4:4}{9:3}\\cdot\\dfrac{3:3}{8:4}=\\dfrac{1}{3}\\cdot\\dfrac{1}{2}=\\dfrac{1}{6}$.
    3. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','7.4', + '

Умножение дроби на дробь «площадным» способом иллюстрирует единичный квадрат: $\\dfrac{a}{b}\\cdot\\dfrac{c}{d}$ — это доля площади квадрата $1\\times1$, занятая прямоугольником $\\dfrac{a}{b}\\times\\dfrac{c}{d}$.

'); + h+='
Интерактив 1
Перемножи дроби
' + +'
Введи числитель произведения (до сокращения).
' + +'
Пример 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'Числитель:
' + +'
'; + h+='
Интерактив 2
Дробь от числа
' + +'
Найди значение. Ответ — целое число.
' + +'
Задача 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p6','p8')+readBtn('p7'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var n1=_ri(1,5), d1=_ri(n1+1,8), n2=_ri(1,5), d2=_ri(n2+1,8); cur={n1:n1,d1:d1,n2:n2,d2:d2,ans:n1*n2}; } + function show(){ if(i>=6){ document.getElementById('p7-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p7-iv1');bumpProgress('p7',30);}else if(score>=3){addXp(8,'p7-iv1');bumpProgress('p7',16);} return; } + gen(); document.getElementById('p7-i').textContent=i+1; + document.getElementById('p7-q').innerHTML='$\\dfrac{'+cur.n1+'}{'+cur.d1+'} \\cdot \\dfrac{'+cur.n2+'}{'+cur.d2+'}$ — знаменатель $'+(cur.d1*cur.d2)+'$.'; renderMath(document.getElementById('p7-q')); + document.getElementById('p7-a').value=''; document.getElementById('p7-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p7-fb'), v=parseInt(document.getElementById('p7-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Числитель '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Числитель: '+cur.ans+'.'); + document.getElementById('p7-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p7-go').addEventListener('click',go); + document.getElementById('p7-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var PROB=[ + {q:'$\\dfrac{2}{3}$ от $27$',ans:18},{q:'$\\dfrac{3}{4}$ от $20$',ans:15},{q:'$\\dfrac{5}{6}$ от $24$',ans:20}, + {q:'$\\dfrac{3}{5}$ от $35$',ans:21},{q:'$\\dfrac{4}{7}$ от $49$',ans:28},{q:'$\\dfrac{2}{5}$ от $30$',ans:12}, + {q:'$\\dfrac{7}{8}$ от $40$',ans:35},{q:'$\\dfrac{5}{9}$ от $45$',ans:25} + ]; + var order=[],i=0,score=0,cur=null; + function reorder(){ order=PROB.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; } } reorder(); + function show(){ if(i>=5){ document.getElementById('p7-pq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p7-iv2');bumpProgress('p7',30);}else if(score>=2){addXp(8,'p7-iv2');bumpProgress('p7',16);} return; } + cur=PROB[order[i]]; document.getElementById('p7-pi').textContent=i+1; + document.getElementById('p7-pq').innerHTML=cur.q; renderMath(document.getElementById('p7-pq')); + document.getElementById('p7-pa').value=''; document.getElementById('p7-pfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p7-pfb'), v=parseFloat(document.getElementById('p7-pa').value); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(Math.abs(v-cur.ans)<1e-9){ score++; feedback(fb,true,'✓ Верно! Ответ '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ '+cur.ans+'.'); + document.getElementById('p7-ps').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p7-pgo').addEventListener('click',go); + document.getElementById('p7-pa').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 8. ДЕЛЕНИЕ ДРОБЕЙ ==== */ +function buildP8(){ + var box=document.getElementById('p8-body'); var h=''; + h+=makeCard('oral','Где это в жизни','8.0', + '

Если $\\dfrac{3}{4}$ метра ткани нужно разрезать на куски по $\\dfrac{1}{8}$ метра, сколько кусков получится? $\\dfrac{3}{4} : \\dfrac{1}{8} = 6$. Деление дробей — это умножение на обратную дробь.

'); + h+=makeCard('rule','Обратная дробь и деление','8.1', + '

Обратная дробь к $\\dfrac{a}{b}$ — это $\\dfrac{b}{a}$ (числитель и знаменатель меняются местами). Произведение числа и обратного к нему равно $1$.

' + +'

$\\dfrac{a}{b} : \\dfrac{c}{d} = \\dfrac{a}{b} \\cdot \\dfrac{d}{c}$.   «Делить на дробь = умножать на обратную».

'); + h+=makeCard('example','Разбор по шагам','8.2', + '

Вычислим $\\dfrac{5}{6} : \\dfrac{10}{3}$.

' + +'
    ' + +'
  1. Переворачиваем вторую дробь: $\\dfrac{10}{3}\\to\\dfrac{3}{10}$.
    2. ' + +'
  2. Умножаем: $\\dfrac{5}{6}\\cdot\\dfrac{3}{10}=\\dfrac{15}{60}$.
    3. ' + +'
  3. Сокращаем: $\\dfrac{15:15}{60:15}=\\dfrac{1}{4}$.
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','8.3', + '

Правило «перевернуть и умножить» хорошо объясняется через единицы измерения. Если на $\\dfrac{3}{4}$ кг у тебя $6$ яблок, то в $1$ кг поместится $6 \\div \\dfrac{3}{4} = 8$ яблок. Деление дробей — это поиск «сколько раз меньшее укладывается в большем».

'); + h+='
Интерактив 1
Обратная дробь
' + +'
Введи числитель обратной дроби.
' + +'
Вопрос 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'Числитель обратной:
' + +'
'; + h+='
Интерактив 2
Раздели дробь
' + +'
Вычисли результат деления. Введи числитель ответа (до сокращения).
' + +'
Пример 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p7','p9')+readBtn('p8'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var n=_ri(1,7), d=_ri(n+1,10); cur={n:n,d:d,ans:d}; } + function show(){ if(i>=5){ document.getElementById('p8-q').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p8-iv1');bumpProgress('p8',30);}else if(score>=2){addXp(8,'p8-iv1');bumpProgress('p8',16);} return; } + gen(); document.getElementById('p8-i').textContent=i+1; + document.getElementById('p8-q').innerHTML='Обратная к $\\dfrac{'+cur.n+'}{'+cur.d+'}$ — знаменатель $'+cur.n+'.$.'; renderMath(document.getElementById('p8-q')); + document.getElementById('p8-a').value=''; document.getElementById('p8-fb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p8-fb'), v=parseInt(document.getElementById('p8-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Обратная $\\dfrac{'+cur.d+'}{'+cur.n+'}$.'); renderMath(fb); } else feedback(fb,false,'✗ Нет. Числитель обратной: '+cur.ans+'.'); + document.getElementById('p8-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p8-go').addEventListener('click',go); + document.getElementById('p8-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var n1=_ri(2,6), d1=_ri(n1+1,8), n2=_ri(1,5), d2=_ri(n2+1,8); cur={n1:n1,d1:d1,n2:n2,d2:d2,ans:n1*d2}; } + function show(){ if(i>=5){ document.getElementById('p8-dq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p8-iv2');bumpProgress('p8',30);}else if(score>=2){addXp(8,'p8-iv2');bumpProgress('p8',16);} return; } + gen(); document.getElementById('p8-di').textContent=i+1; + document.getElementById('p8-dq').innerHTML='$\\dfrac{'+cur.n1+'}{'+cur.d1+'} : \\dfrac{'+cur.n2+'}{'+cur.d2+'}$ — знаменатель $'+(cur.d1*cur.n2)+'$.'; renderMath(document.getElementById('p8-dq')); + document.getElementById('p8-da').value=''; document.getElementById('p8-dfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p8-dfb'), v=parseInt(document.getElementById('p8-da').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Числитель '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Числитель: '+cur.ans+'.'); + document.getElementById('p8-ds').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p8-dgo').addEventListener('click',go); + document.getElementById('p8-da').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 9. ЗАДАЧИ НА ВСЕ ДЕЙСТВИЯ С ДРОБЯМИ ==== */ +function buildP9(){ + var box=document.getElementById('p9-body'); var h=''; + h+=makeCard('oral','Где это в жизни','9.0', + '

Задача из кулинарии: рецепт на $6$ порций требует $\\dfrac{3}{4}$ стакана сахара. Ты хочешь приготовить $4$ порции. Сколько сахара нужно? $\\dfrac{3}{4}\\cdot\\dfrac{4}{6}=\\dfrac{1}{2}$ стакана. Здесь умножение и деление дробей вместе!

'); + h+=makeCard('rule','Порядок действий','9.1', + '

1. Действия в скобках.
2. Умножение и деление (слева направо).
3. Сложение и вычитание.

' + +'

При работе со смешанными числами сначала переводим в неправильные дроби, затем выполняем действия.

'); + h+=makeCard('example','Разбор по шагам','9.2', + '

Вычислим $\\dfrac{3}{4} \\cdot 8 - 1\\dfrac{1}{2}$.

' + +'
    ' + +'
  1. $\\dfrac{3}{4}\\cdot 8 = \\dfrac{24}{4}=6$.
    2. ' + +'
  2. $1\\dfrac{1}{2}=\\dfrac{3}{2}$.
    3. ' + +'
  3. $6-\\dfrac{3}{2}=\\dfrac{12}{2}-\\dfrac{3}{2}=\\dfrac{9}{2}=4\\dfrac{1}{2}$.
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','9.3', + '

Задачи с дробями встречались уже в папирусе Ахмеса (~1650 до н.э.): «Раздели $7$ хлебов на $10$ человек». Современные задачи о скидках, налогах и рецептах — их прямые потомки!

'); + h+='
Интерактив 1
Вычисли выражение
' + +'
Ответ вводи числом (если целое) или числителем при подсказанном знаменателе.
' + +'
Пример 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'
'; + h+='
Интерактив 2
Текстовые задачи
' + +'
Реши задачу. Ответ — целое число.
' + +'
Задача 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p8','p10')+readBtn('p9'); + box.innerHTML=h; renderMath(box); + (function(){ + var QS=[ + {q:'$\\dfrac{3}{5} \\cdot 10$',ans:6},{q:'$\\dfrac{2}{3} \\cdot 12$',ans:8},{q:'$\\dfrac{5}{4} \\cdot 4$',ans:5}, + {q:'$24 \\cdot \\dfrac{1}{6}$',ans:4},{q:'$\\dfrac{7}{2} \\cdot 4$',ans:14},{q:'$15 \\cdot \\dfrac{2}{5}$',ans:6}, + {q:'$\\dfrac{9}{3}$',ans:3},{q:'$\\dfrac{4}{1} \\cdot \\dfrac{3}{4}$',ans:3} + ]; + var order=[],i=0,score=0,cur=null; + function reorder(){ order=QS.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; } } reorder(); + function show(){ if(i>=6){ document.getElementById('p9-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p9-iv1');bumpProgress('p9',30);}else if(score>=3){addXp(8,'p9-iv1');bumpProgress('p9',16);} return; } + cur=QS[order[i]]; document.getElementById('p9-i').textContent=i+1; + document.getElementById('p9-q').innerHTML=cur.q; renderMath(document.getElementById('p9-q')); + document.getElementById('p9-a').value=''; document.getElementById('p9-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p9-fb'), v=parseFloat(document.getElementById('p9-a').value); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(Math.abs(v-cur.ans)<1e-9){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+'.'); + document.getElementById('p9-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p9-go').addEventListener('click',go); + document.getElementById('p9-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var TASKS=[ + {q:'Поезд прошёл $\\dfrac{2}{5}$ пути за $4$ ч. Весь путь $100$ км. Сколько км уже пройдено?',ans:40}, + {q:'В классе $30$ учеников. $\\dfrac{3}{5}$ из них пришли. Сколько пришло?',ans:18}, + {q:'Рулон ткани $12$ м. Отрезали $\\dfrac{3}{4}$. Сколько метров отрезали?',ans:9}, + {q:'Из $24$ кг яблок $\\dfrac{1}{6}$ — гнилые. Сколько кг хороших яблок?',ans:20}, + {q:'Книга из $80$ страниц. Прочитано $\\dfrac{3}{8}$. Сколько страниц осталось?',ans:50} + ]; + var order=[],i=0,score=0,cur=null; + function reorder(){ order=TASKS.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; } } reorder(); + function show(){ if(i>=5){ document.getElementById('p9-pq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p9-iv2');bumpProgress('p9',30);}else if(score>=2){addXp(8,'p9-iv2');bumpProgress('p9',16);} return; } + cur=TASKS[order[i]]; document.getElementById('p9-pi').textContent=i+1; + document.getElementById('p9-pq').innerHTML=cur.q; renderMath(document.getElementById('p9-pq')); + document.getElementById('p9-pa').value=''; document.getElementById('p9-pfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p9-pfb'), v=parseFloat(document.getElementById('p9-pa').value); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(Math.abs(v-cur.ans)<1e-9){ score++; feedback(fb,true,'✓ Верно! Ответ '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+'.'); + document.getElementById('p9-ps').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p9-pgo').addEventListener('click',go); + document.getElementById('p9-pa').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 10. ЗАДАЧИ НА ПРИМЕНЕНИЕ ДРОБЕЙ ==== */ +function buildP10(){ + var box=document.getElementById('p10-body'); var h=''; + h+=makeCard('oral','Где это в жизни','10.0', + '

«Скидка $\\dfrac{1}{4}$ от цены» или «в классе $\\dfrac{3}{5}$ девочек» — всё это задачи на часть от числа. Иногда нам известна часть, а нужно найти целое: «если $12$ — это $\\dfrac{3}{4}$ от числа, чему равно целое?»

'); + h+=makeCard('rule','Часть от числа и число по части','10.1', + '

Найти $\\dfrac{m}{n}$ от числа $a$: $a \\cdot \\dfrac{m}{n}$.

' + +'

Найти число по его части: если $\\dfrac{m}{n}$ от числа равно $b$, то всё число $= b \\cdot \\dfrac{n}{m} = b : \\dfrac{m}{n}$.

'); + h+=makeCard('example','Разбор по шагам','10.2', + '

Задача 1: найти $\\dfrac{3}{5}$ от $40$.   $40\\cdot\\dfrac{3}{5}=24$.

' + +'

Задача 2: $\\dfrac{3}{5}$ числа равно $24$. Найти число.   $24 : \\dfrac{3}{5}=24\\cdot\\dfrac{5}{3}=40$.

'); + h+=makeCard('theory','А знаешь ли ты?','10.3', + '

Банковские проценты — это тоже дроби: $10\\%=\\dfrac{10}{100}=\\dfrac{1}{10}$. Когда банк даёт кредит под $15\\%$ годовых, он берёт $\\dfrac{15}{100}$ от суммы долга каждый год. В классе 7 ты изучишь проценты подробнее — и поймёшь, что уже всё умеешь!

'); + h+='
Интерактив 1
Найди часть от числа
' + +'
Вычисли дробную часть. Ответ — целое число.
' + +'
Задача 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'
'; + h+='
Интерактив 2
Найди целое по части
' + +'
Найди исходное число. Ответ — целое.
' + +'
Задача 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p9','p11')+readBtn('p10'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var d=_ri(2,8), m=_ri(1,d-1), whole=d*_ri(2,8); cur={m:m,d:d,whole:whole,ans:(whole*m/d)}; } + function show(){ if(i>=6){ document.getElementById('p10-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p10-iv1');bumpProgress('p10',30);}else if(score>=3){addXp(8,'p10-iv1');bumpProgress('p10',16);} return; } + gen(); document.getElementById('p10-i').textContent=i+1; + document.getElementById('p10-q').innerHTML='Найди $\\dfrac{'+cur.m+'}{'+cur.d+'}$ от $'+cur.whole+'$.'; renderMath(document.getElementById('p10-q')); + document.getElementById('p10-a').value=''; document.getElementById('p10-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p10-fb'), v=parseFloat(document.getElementById('p10-a').value); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(Math.abs(v-cur.ans)<1e-9){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+'.'); + document.getElementById('p10-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p10-go').addEventListener('click',go); + document.getElementById('p10-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var d=_ri(2,7), m=_ri(1,d-1), whole=d*_ri(2,9); var part=whole*m/d; cur={m:m,d:d,part:part,ans:whole}; } + function show(){ if(i>=5){ document.getElementById('p10-wq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p10-iv2');bumpProgress('p10',30);}else if(score>=2){addXp(8,'p10-iv2');bumpProgress('p10',16);} return; } + gen(); document.getElementById('p10-wi').textContent=i+1; + document.getElementById('p10-wq').innerHTML='$\\dfrac{'+cur.m+'}{'+cur.d+'}$ числа равно $'+cur.part+'$. Найди число.'; renderMath(document.getElementById('p10-wq')); + document.getElementById('p10-wa').value=''; document.getElementById('p10-wfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p10-wfb'), v=parseFloat(document.getElementById('p10-wa').value); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(Math.abs(v-cur.ans)<1e-9){ score++; feedback(fb,true,'✓ Верно! Целое число: '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+'.'); + document.getElementById('p10-ws').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p10-wgo').addEventListener('click',go); + document.getElementById('p10-wa').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 11. ПАРАЛЛЕЛЬНЫЕ И ПЕРПЕНДИКУЛЯРНЫЕ ПРЯМЫЕ ==== */ +function buildP11(){ + var box=document.getElementById('p11-body'); var h=''; + h+=makeCard('oral','Где это в жизни','11.0', + '

Рельсы железной дороги никогда не пересекаются — они параллельны. Угол в углу комнаты — прямой, стены перпендикулярны полу. Каждый раз, когда ты видишь ровные линии, включается геометрия!

'); + h+=makeCard('theory','Параллельные прямые','11.1', + '

Две прямые на плоскости называют параллельными, если они не имеют общих точек (не пересекаются). Обозначение: $a \\parallel b$.

' + +'
' + +'' + +'' + +'' + +'a' + +'b' + +'a ∥ b' + +'' + +'' + +'' + +'одинаковое расстояние' + +'
'); + h+=makeCard('theory','Перпендикулярные прямые','11.2', + '

Две прямые называют перпендикулярными, если при пересечении они образуют прямой угол ($90°$). Обозначение: $a \\perp b$. Знак прямого угла — квадратик в вершине угла.

'); + h+=makeCard('example','Разбор по шагам','11.3', + '

Начертим прямую, перпендикулярную данной.

' + +'
    ' + +'
  1. Отметим точку $A$ на прямой $a$.
    2. ' + +'
  2. В точке $A$ поставим угольник так, чтобы один катет лежал вдоль $a$.
    3. ' + +'
  3. Проведём прямую $b$ вдоль другого катета — это и есть $a \\perp b$.
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','11.4', + '

Параллельные прямые дали название целой геометрии: Лобачевский в XIX веке предложил геометрию, где через точку можно провести бесконечно много прямых, параллельных данной. Оказалось, что это описывает искривлённое пространство — именно такое встречается в общей теории относительности!

'); + h+='
Интерактив 1
Параллельные или перпендикулярные?
' + +'
Посмотри на рисунок и определи вид прямых.
' + +'
Вопрос 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'
'; + h+='
Интерактив 2
Угол при пересечении
' + +'
Введи величину прямого угла в градусах.
' + +'
Вопрос 1 / 4Очки: 0 / 4
' + +'
' + +'
°
' + +'
'; + h+=secNav('p10','p12')+readBtn('p11'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function makeSVG(t){ var W=240,H=100; + if(t==='par') return 'ab'; + return 'ab'; } + function gen(){ cur=_pick(['par','perp']); } + function show(){ if(i>=6){ document.getElementById('p11-fig2').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p11-iv1');bumpProgress('p11',30);}else if(score>=3){addXp(8,'p11-iv1');bumpProgress('p11',16);} return; } + gen(); document.getElementById('p11-i').textContent=i+1; + document.getElementById('p11-fig2').innerHTML=makeSVG(cur); + document.getElementById('p11-fb').style.display='none'; } + function ans(t){ if(i>=6)return; var fb=document.getElementById('p11-fb'), names={par:'параллельные',perp:'перпендикулярные'}; + if(t===cur){ score++; feedback(fb,true,'✓ Верно — '+names[cur]+'.'); } else feedback(fb,false,'✗ Нет. Это '+names[cur]+'.'); + document.getElementById('p11-s').textContent=score; i++; setTimeout(show,1100); } + document.querySelectorAll('#p11-iv1 [data-t]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-t')); }); }); + show(); + })(); + (function(){ + var QS=[ + {q:'Перпендикулярные прямые пересекаются под углом… (°)',ans:90}, + {q:'Если $a \\perp b$, угол между ними равен … °.',ans:90}, + {q:'Прямой угол — это … °.',ans:90}, + {q:'При пересечении перпендикулярных прямых образуется … прямых угла.',ans:4} + ]; + var i=0,score=0,cur=null; + function show(){ if(i>=4){ document.getElementById('p11-aq').innerHTML='Готово! '+score+' / 4'; if(score>=3){addXp(20,'p11-iv2');bumpProgress('p11',40);}else{addXp(8,'p11-iv2');bumpProgress('p11',16);} return; } + cur=QS[i]; document.getElementById('p11-ai').textContent=i+1; + document.getElementById('p11-aq').innerHTML=cur.q; renderMath(document.getElementById('p11-aq')); + document.getElementById('p11-aa').value=''; document.getElementById('p11-afb').style.display='none'; } + function go(){ if(i>=4)return; var fb=document.getElementById('p11-afb'), v=parseInt(document.getElementById('p11-aa').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+'.'); + document.getElementById('p11-as').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p11-ago').addEventListener('click',go); + document.getElementById('p11-aa').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 12. ЛОМАНАЯ. МНОГОУГОЛЬНИК. ПЕРИМЕТР ==== */ +function buildP12(){ + var box=document.getElementById('p12-body'); var h=''; + h+=makeCard('oral','Где это в жизни','12.0', + '

Забор вокруг огорода — это периметр прямоугольника. Длина маршрута из точки в точку через несколько улиц — это длина ломаной. Знать периметр нужно строителям, дизайнерам, спортсменам.

'); + h+=makeCard('theory','Ломаная и многоугольник','12.1', + '

Ломаная — фигура из последовательных отрезков. Если концы соединены — получается замкнутая ломаная (многоугольник).

' + +'

Многоугольник с $n$ сторонами: $n=3$ — треугольник; $n=4$ — четырёхугольник; $n=5$ — пятиугольник и т.д. Особый случай четырёхугольника: прямоугольник (все углы прямые); квадрат (прямоугольник с равными сторонами).

' + +'
' + +'' + +'' + +'A' + +'B' + +'C' + +'3' + +'4' + +'5' + +'' + +'D' + +'E' + +'F' + +'G' + +'
'); + h+=makeCard('rule','Периметр','12.2', + '

Периметр многоугольника — сумма длин всех его сторон.

' + +'

Прямоугольник: $P=2(a+b)$.   Квадрат: $P=4a$.   Равносторонний треугольник: $P=3a$.

'); + h+=makeCard('example','Разбор по шагам','12.3', + '

Найдём периметр треугольника со сторонами $3{,}5$ см, $4{,}2$ см и $5{,}1$ см.

' + +'
    ' + +'
  1. $P = a + b + c = 3{,}5 + 4{,}2 + 5{,}1$.
    2. ' + +'
  2. $3{,}5+4{,}2=7{,}7$; $7{,}7+5{,}1=12{,}8$.
    3. ' + +'
  3. Ответ: $P=12{,}8$ см.
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','12.4', + '

Слово «периметр» от греч. peri («вокруг») + metron («мера»). Именно периметр нужно было знать, чтобы обнести землю забором. В Древнем Египте землемеры-«гарпедонапты» натягивали верёвки вокруг участков и так измеряли периметр!

'); + h+='
Интерактив 1
Найди периметр
' + +'
Сложи длины сторон и введи периметр.
' + +'
Задача 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'
'; + h+='
Интерактив 2
Сторона по периметру
' + +'
Найди неизвестную сторону по периметру.
' + +'
Задача 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p11','p13')+readBtn('p12'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ + var t=_ri(0,2); + if(t===0){ var a=_ri(2,12),b=_ri(2,12); cur={q:'Прямоугольник $'+a+' \\times '+b+'$ см. Периметр?',ans:2*(a+b)}; } + else if(t===1){ var a=_ri(2,15); cur={q:'Квадрат со стороной $'+a+'$ см. Периметр?',ans:4*a}; } + else { var a=_ri(2,10),b=_ri(2,10),c=_ri(2,10); cur={q:'Треугольник со сторонами $'+a+'$, $'+b+'$, $'+c+'$ см.',ans:a+b+c}; } } + function show(){ if(i>=6){ document.getElementById('p12-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p12-iv1');bumpProgress('p12',30);}else if(score>=3){addXp(8,'p12-iv1');bumpProgress('p12',16);} return; } + gen(); document.getElementById('p12-i').textContent=i+1; + document.getElementById('p12-q').innerHTML=cur.q; renderMath(document.getElementById('p12-q')); + document.getElementById('p12-a').value=''; document.getElementById('p12-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p12-fb'), v=parseInt(document.getElementById('p12-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Периметр '+cur.ans+' см.'); } else feedback(fb,false,'✗ Нет. Периметр: '+cur.ans+' см.'); + document.getElementById('p12-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p12-go').addEventListener('click',go); + document.getElementById('p12-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function gen(){ + var t=_ri(0,1); + if(t===0){ var a=_ri(3,12), P=4*a; cur={q:'Квадрат, периметр $'+P+'$ см. Сторона?',ans:a}; } + else { var a=_ri(3,10), b=_ri(3,10), P=2*(a+b); cur={q:'Прямоугольник, периметр $'+P+'$ см, одна сторона $'+a+'$ см. Другая сторона?',ans:b}; } } + function show(){ if(i>=5){ document.getElementById('p12-sq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p12-iv2');bumpProgress('p12',30);}else if(score>=2){addXp(8,'p12-iv2');bumpProgress('p12',16);} return; } + gen(); document.getElementById('p12-si').textContent=i+1; + document.getElementById('p12-sq').innerHTML=cur.q; renderMath(document.getElementById('p12-sq')); + document.getElementById('p12-sa').value=''; document.getElementById('p12-sfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p12-sfb'), v=parseInt(document.getElementById('p12-sa').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+' см.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+' см.'); + document.getElementById('p12-ss').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p12-sgo').addEventListener('click',go); + document.getElementById('p12-sa').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 13. ПЛОЩАДЬ ==== */ +function buildP13(){ + var box=document.getElementById('p13-body'); var h=''; + h+=makeCard('oral','Где это в жизни','13.0', + '

Сколько плитки нужно, чтобы выложить пол? Какой ковёр купить в комнату? Площадь огорода — чтобы знать, сколько семян нужно. Всё это — задачи на площадь.

'); + h+=makeCard('rule','Площадь. Единицы','13.1', + '

Площадь измеряют квадратными единицами: $\\text{мм}^2$, $\\text{см}^2$, $\\text{дм}^2$, $\\text{м}^2$, $\\text{км}^2$, $\\text{га}$.

' + +'

$1\\text{ м}^2=100\\text{ дм}^2=10\\,000\\text{ см}^2$.   $1\\text{ га}=10\\,000\\text{ м}^2$.

' + +'

Прямоугольник: $S=a\\cdot b$.   Квадрат: $S=a^2$.

' + +'
' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'S = 4 × 3 = 12' + +'4 клетки × 3 клетки = 12 кл²' + +'
'); + h+=makeCard('example','Разбор по шагам','13.2', + '

Площадь комнаты $5$ м на $4$ м в квадратных дециметрах.

' + +'
    ' + +'
  1. $S=5\\cdot4=20$ м².
    2. ' + +'
  2. $1$ м² $=100$ дм², значит $20$ м² $=2000$ дм².
    3. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','13.3', + '

Слово «гектар» образовано от «гекто» ($100$) + «ар» ($100$ м²). Значит $1$ га $=100\\times100=10\\,000$ м². В России средний огород около $6$ соток, то есть $600$ м² — это $0{,}06$ га. Египетские землемеры тысячелетия назад рассчитывали площади таким же способом!

'); + h+='
Интерактив 1
Найди площадь
' + +'
Вычисли площадь фигуры.
' + +'
Задача 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'
'; + h+='
Интерактив 2
Перевод единиц площади
' + +'
Переведи площадь в указанные единицы.
' + +'
Вопрос 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p12','p14')+readBtn('p13'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ + var t=_ri(0,2); + if(t===0){ var a=_ri(2,15), b=_ri(2,15); cur={q:'Прямоугольник $'+a+' \\times '+b+'$. Площадь (кл²)?',ans:a*b}; } + else if(t===1){ var a=_ri(2,12); cur={q:'Квадрат со стороной $'+a+'$ см. Площадь (см²)?',ans:a*a}; } + else { var a=_ri(2,10), b=_ri(2,10); cur={q:'Прямоугольник $'+a+'$ м на $'+b+'$ м. Площадь (м²)?',ans:a*b}; } } + function show(){ if(i>=6){ document.getElementById('p13-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p13-iv1');bumpProgress('p13',30);}else if(score>=3){addXp(8,'p13-iv1');bumpProgress('p13',16);} return; } + gen(); document.getElementById('p13-i').textContent=i+1; + document.getElementById('p13-q').innerHTML=cur.q; renderMath(document.getElementById('p13-q')); + document.getElementById('p13-a').value=''; document.getElementById('p13-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p13-fb'), v=parseInt(document.getElementById('p13-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Площадь '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+'.'); + document.getElementById('p13-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p13-go').addEventListener('click',go); + document.getElementById('p13-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var QS=[ + {q:'$3$ м² = \\square дм²',ans:300},{q:'$5$ м² = \\square дм²',ans:500}, + {q:'$200$ дм² = \\square м²',ans:2},{q:'$2$ га = \\square м²',ans:20000}, + {q:'$1$ м² = \\square см²',ans:10000} + ]; + var i=0,score=0,cur=null; + function show(){ if(i>=5){ document.getElementById('p13-uq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p13-iv2');bumpProgress('p13',30);}else if(score>=2){addXp(8,'p13-iv2');bumpProgress('p13',16);} return; } + cur=QS[i]; document.getElementById('p13-ui').textContent=i+1; + document.getElementById('p13-uq').innerHTML='$'+cur.q+'$'; renderMath(document.getElementById('p13-uq')); + document.getElementById('p13-ua').value=''; document.getElementById('p13-ufb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p13-ufb'), v=parseInt(document.getElementById('p13-ua').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+'.'); + document.getElementById('p13-us').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p13-ugo').addEventListener('click',go); + document.getElementById('p13-ua').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 14. ПЛОЩАДЬ ПРЯМОУГОЛЬНОГО ТРЕУГОЛЬНИКА ==== */ +function buildP14(){ + var box=document.getElementById('p14-body'); var h=''; + h+=makeCard('oral','Где это в жизни','14.0', + '

Чтобы сшить парус-треугольник или купить треугольный кусок стекла — нужна площадь треугольника. Прямоугольный треугольник — самый простой случай: он ровно половина прямоугольника.

'); + h+=makeCard('rule','Формула площади треугольника','14.1', + '

Прямоугольный треугольник с катетами $a$ и $b$:

' + +'

$S_{\\triangle} = \\dfrac{a\\cdot b}{2}$

' + +'

Для любого треугольника: $S = \\dfrac{1}{2} \\cdot \\text{основание} \\cdot \\text{высота}$.

' + +'
' + +'' + +'' + +'' + +'' + +'' + +'a (основание)' + +'b' + +'S = ab/2' + +'
'); + h+=makeCard('example','Разбор по шагам','14.2', + '

Катеты прямоугольного треугольника $6$ см и $8$ см. Площадь?

' + +'
    ' + +'
  1. $S=\\dfrac{6\\cdot8}{2}=\\dfrac{48}{2}=24$ см².
    2. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','14.3', + '

Египетский «верёвочный треугольник» $3{-}4{-}5$ — это прямоугольный треугольник ($3^2+4^2=5^2$). Строители тысячи лет назад использовали верёвку с узлами через $3$, $4$ и $5$ единиц, чтобы делать точные прямые углы. Теорему Пифагора — в $7$ классе!

'); + h+='
Интерактив 1
Площадь прямоугольного треугольника
' + +'
Введи площадь треугольника.
' + +'
Задача 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'
'; + h+='
Интерактив 2
Катет по площади
' + +'
Один катет и площадь известны. Найди другой катет.
' + +'
Задача 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p13','p15')+readBtn('p14'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var a=_ri(2,12)*2, b=_ri(2,12)*2; cur={a:a,b:b,ans:a*b/2}; } + function show(){ if(i>=6){ document.getElementById('p14-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p14-iv1');bumpProgress('p14',30);}else if(score>=3){addXp(8,'p14-iv1');bumpProgress('p14',16);} return; } + gen(); document.getElementById('p14-i').textContent=i+1; + document.getElementById('p14-q').innerHTML='Катеты $'+cur.a+'$ и $'+cur.b+'$ см. Площадь (см²)?'; renderMath(document.getElementById('p14-q')); + document.getElementById('p14-a').value=''; document.getElementById('p14-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p14-fb'), v=parseInt(document.getElementById('p14-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Площадь '+cur.ans+' см².'); } else feedback(fb,false,'✗ Нет. S='+cur.a+'·'+cur.b+'/2='+cur.ans+'.'); + document.getElementById('p14-s').textContent=score; i++; setTimeout(show,1300); } + document.getElementById('p14-go').addEventListener('click',go); + document.getElementById('p14-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var a=_ri(3,12), b=_ri(3,12); var S=a*b; cur={a:a,b:b,S:S,ans:b}; } + function show(){ if(i>=5){ document.getElementById('p14-kq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p14-iv2');bumpProgress('p14',30);}else if(score>=2){addXp(8,'p14-iv2');bumpProgress('p14',16);} return; } + gen(); document.getElementById('p14-ki').textContent=i+1; + document.getElementById('p14-kq').innerHTML='Площадь треугольника $'+cur.S+'$ см², один катет $'+cur.a+'$ см. Другой катет?'; renderMath(document.getElementById('p14-kq')); + document.getElementById('p14-ka').value=''; document.getElementById('p14-kfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p14-kfb'), v=parseInt(document.getElementById('p14-ka').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+' см.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+' (S·2÷a='+cur.ans+').'); + document.getElementById('p14-ks').textContent=score; i++; setTimeout(show,1300); } + document.getElementById('p14-kgo').addEventListener('click',go); + document.getElementById('p14-ka').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 15. СРЕДНЕЕ АРИФМЕТИЧЕСКОЕ ==== */ +function buildP15(){ + var box=document.getElementById('p15-body'); var h=''; + h+=makeCard('oral','Где это в жизни','15.0', + '

Средняя оценка за четверть, средняя температура за неделю, средняя скорость автомобиля — везде нужно среднее арифметическое. Это одна из самых востребованных операций в статистике и в повседневной жизни.

'); + h+=makeCard('rule','Среднее арифметическое','15.1', + '

Среднее арифметическое $n$ чисел — это их сумма, делённая на $n$:

' + +'

$\\bar{a} = \\dfrac{a_1 + a_2 + \\ldots + a_n}{n}$

'); + h+=makeCard('example','Примеры','15.2', + '

Оценки: $4, 5, 3, 5, 4$. Среднее $=\\dfrac{4+5+3+5+4}{5}=\\dfrac{21}{5}=4{,}2$.

' + +'

Температура за $3$ дня: $12°, 15°, 9°$. Среднее $=\\dfrac{12+15+9}{3}=12°$.

'); + h+=makeCard('example','Разбор по шагам','15.3', + '

Найдём среднее арифметическое чисел $8, 12, 6, 10$.

' + +'
    ' + +'
  1. Сумма: $8+12+6+10=36$.
    2. ' + +'
  2. Количество чисел: $4$.
    3. ' + +'
  3. Среднее: $36:4=9$.
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','15.4', + '

В статистике среднее обозначают $\\bar{x}$ («икс с чертой»). Когда говорят «средняя зарплата по стране», имеют в виду именно среднее арифметическое. Но оно может быть обманчивым: если один человек зарабатывает миллион, а девять — по тысяче, среднее $=109\\,000$, хотя большинство получают $1000$.

'); + h+='
Интерактив 1
Найди среднее
' + +'
Вычисли среднее арифметическое. Ответ — целое число.
' + +'
Задача 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'
'; + h+='
Интерактив 2
Восстанови число
' + +'
Среднее и часть чисел известны. Найди пропущенное число.
' + +'
Задача 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p14','p16')+readBtn('p15'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var n=_ri(3,5); var avg=_ri(3,15); var arr=[]; var sum=0; + for(var k=0;k=6){ document.getElementById('p15-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p15-iv1');bumpProgress('p15',30);}else if(score>=3){addXp(8,'p15-iv1');bumpProgress('p15',16);} return; } + gen(); document.getElementById('p15-i').textContent=i+1; + document.getElementById('p15-q').innerHTML='Среднее чисел $'+cur.arr.join(', ')+'$.'; renderMath(document.getElementById('p15-q')); + document.getElementById('p15-a').value=''; document.getElementById('p15-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p15-fb'), v=parseInt(document.getElementById('p15-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Среднее: '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Среднее: '+cur.ans+'.'); + document.getElementById('p15-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p15-go').addEventListener('click',go); + document.getElementById('p15-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var n=3, avg=_ri(5,15); var a=_ri(avg-3,avg+3), b=_ri(avg-3,avg+3); var x=avg*n-a-b; cur={a:a,b:b,avg:avg,n:n,ans:x}; } + function show(){ if(i>=5){ document.getElementById('p15-rq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p15-iv2');bumpProgress('p15',30);}else if(score>=2){addXp(8,'p15-iv2');bumpProgress('p15',16);} return; } + gen(); document.getElementById('p15-ri').textContent=i+1; + document.getElementById('p15-rq').innerHTML='Среднее трёх чисел $'+cur.avg+'$. Два числа: $'+cur.a+'$ и $'+cur.b+'$. Третье?'; renderMath(document.getElementById('p15-rq')); + document.getElementById('p15-ra').value=''; document.getElementById('p15-rfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p15-rfb'), v=parseInt(document.getElementById('p15-ra').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+'.'); + document.getElementById('p15-rs').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p15-rgo').addEventListener('click',go); + document.getElementById('p15-ra').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 16. ДИАГРАММЫ ==== */ +function buildP16(){ + var box=document.getElementById('p16-body'); var h=''; + h+=makeCard('oral','Где это в жизни','16.0', + '

Графики продаж, диаграммы успеваемости, результаты опросов — диаграммы везде. Умение их читать важно для учёбы, работы и чтения новостей.

'); + h+=makeCard('theory','Виды диаграмм','16.1', + '

Столбчатая диаграмма: высота столбика = значение. Удобна для сравнения нескольких величин.

' + +'

Линейная диаграмма (ломаная): точки соединяются линиями. Удобна для показа изменения во времени.

' + +'
' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'Пн' + +'Вт' + +'Ср' + +'Чт' + +'5' + +'7' + +'3' + +'6' + +'
'); + h+=makeCard('rule','Читаем диаграмму','16.2', + '

По диаграмме определяют: максимум/минимум, разность, сумму, среднее значений.

'); + h+=makeCard('example','Разбор по шагам','16.3', + '

На столбчатой диаграмме показано количество задач, решённых за 4 дня: Пн=5, Вт=7, Ср=3, Чт=6.

' + +'
    ' + +'
  1. Всего: $5+7+3+6=21$.
    2. ' + +'
  2. Среднее: $21:4=5{,}25$.
    3. ' + +'
  3. Максимум во вторник ($7$), минимум в среду ($3$).
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','16.4', + '

Первую столбчатую диаграмму нарисовал шотландский инженер Уильям Плейфэр в $1786$ году в «Коммерческом и политическом атласе». Он же изобрёл линейный и круговой графики. До него все данные представляли только таблицами!

'); + h+='
Интерактив 1
Читаем диаграмму
' + +'
По диаграмме ответь на вопрос.
' + +'
Вопрос 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'
' + +'
'; + h+='
Интерактив 2
Среднее по диаграмме
' + +'
Найди среднее арифметическое значений диаграммы.
' + +'
Задача 1 / 4Очки: 0 / 4
' + +'
' + +'
' + +'
' + +'
'; + h+=secNav('p15','p17')+readBtn('p16'); + box.innerHTML=h; renderMath(box); + function barSVG(vals,labels,question){ var W=260,H=130,bw=30,gap=10,x0=30,y0=10,H0=80; + var mx=Math.max.apply(null,vals); var s=''; + s+=''; + s+=''; + vals.forEach(function(v,k){ var bh=Math.round(v/mx*H0); var x=x0+10+k*(bw+gap); var y=(y0+H0+5-bh); + s+=''; + s+=''+v+''; + s+=''+labels[k]+''; }); + return s+''; } + (function(){ + var i=0,score=0,cur=null; + var DAYS=['Пн','Вт','Ср','Чт','Пт']; + function gen(){ var vals=[]; for(var k=0;k<4;k++) vals.push(_ri(2,10)); + var t=_ri(0,2), ans, q; + if(t===0){ ans=Math.max.apply(null,vals); q='Максимальное значение?'; } + else if(t===1){ ans=Math.min.apply(null,vals); q='Минимальное значение?'; } + else { ans=vals.reduce(function(a,b){return a+b;},0); q='Сумма всех значений?'; } + cur={vals:vals,ans:ans,q:q}; } + function show(){ if(i>=6){ document.getElementById('p16-fig2').innerHTML='Готово! '+score+' / 6'; document.getElementById('p16-q').innerHTML=''; if(score>=5){addXp(15,'p16-iv1');bumpProgress('p16',30);}else if(score>=3){addXp(8,'p16-iv1');bumpProgress('p16',16);} return; } + gen(); document.getElementById('p16-i').textContent=i+1; + document.getElementById('p16-fig2').innerHTML=barSVG(cur.vals,DAYS.slice(0,4),''); + document.getElementById('p16-q').innerHTML=cur.q; + document.getElementById('p16-a').value=''; document.getElementById('p16-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p16-fb'), v=parseInt(document.getElementById('p16-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+'.'); + document.getElementById('p16-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p16-go').addEventListener('click',go); + document.getElementById('p16-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + var DAYS=['Пн','Вт','Ср','Чт']; + function gen(){ var n=4, avg=_ri(3,8); var vals=[]; var sum=0; + for(var k=0;k=4){ document.getElementById('p16-af').innerHTML='Готово! '+score+' / 4'; document.getElementById('p16-aq').innerHTML=''; if(score>=3){addXp(20,'p16-iv2');bumpProgress('p16',40);}else{addXp(8,'p16-iv2');bumpProgress('p16',16);} return; } + gen(); document.getElementById('p16-ai').textContent=i+1; + document.getElementById('p16-af').innerHTML=barSVG(cur.vals,DAYS,''); + document.getElementById('p16-aq').innerHTML='Среднее арифметическое значений диаграммы?'; + document.getElementById('p16-aa').value=''; document.getElementById('p16-afb').style.display='none'; } + function go(){ if(i>=4)return; var fb=document.getElementById('p16-afb'), v=parseInt(document.getElementById('p16-aa').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Среднее: '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Среднее: '+cur.ans+'.'); + document.getElementById('p16-as').textContent=score; i++; setTimeout(show,1300); } + document.getElementById('p16-ago').addEventListener('click',go); + document.getElementById('p16-aa').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 17. ПАРАЛЛЕЛЕПИПЕД И КУБ ==== */ +function buildP17(){ + var box=document.getElementById('p17-body'); var h=''; + h+=makeCard('oral','Где это в жизни','17.0', + '

Коробка из-под сока, кирпич, комната — всё это прямоугольные параллелепипеды. Грани, рёбра, вершины — основные понятия пространственной геометрии, которые тебе пригодятся в дальнейшем.

'); + h+=makeCard('theory','Прямоугольный параллелепипед','17.1', + '

Прямоугольный параллелепипед — тело, у которого все $6$ граней — прямоугольники. У него $8$ вершин, $12$ рёбер, $6$ граней.

' + +'

Три измерения: длина $a$, ширина $b$, высота $c$.

' + +'

Куб — особый параллелепипед: все рёбра равны ($a=b=c$), все грани — квадраты.

' + +'
' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'a' + +'c' + +'b' + +'
'); + h+=makeCard('rule','Грани, рёбра, вершины','17.2', + '

Параллелепипед: $6$ граней, $12$ рёбер, $8$ вершин. Рёбра трёх видов по $4$ каждого: длиной $a$, $b$, $c$.

'); + h+=makeCard('example','Разбор по шагам','17.3', + '

Параллелепипед $3\\times4\\times5$. Сколько рёбер каждой длины?

' + +'
    ' + +'
  1. Длина $3$ — $4$ ребра.
    2. ' + +'
  2. Длина $4$ — $4$ ребра.
    3. ' + +'
  3. Длина $5$ — $4$ ребра. Итого: $12$ рёбер.
    4. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','17.4', + '

Термин «параллелепипед» от греч. parallelos («параллельный») + epipedon («поверхность»). Это «тело с параллельными гранями». В кристаллографии форма кристаллов описывается именно параллелепипедами — в том числе соль NaCl кристаллизуется в форме куба!

'); + h+='
Интерактив 1
Рёбра, грани, вершины
' + +'
Ответь на вопрос о параллелепипеде.
' + +'
Вопрос 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+='
Интерактив 2
Сумма всех рёбер куба
' + +'
Введи сумму длин всех рёбер куба со стороной a.
' + +'
Задача 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p16','p18')+readBtn('p17'); + box.innerHTML=h; renderMath(box); + (function(){ + var QS=[ + {q:'Сколько граней у прямоугольного параллелепипеда?',ans:6}, + {q:'Сколько рёбер у прямоугольного параллелепипеда?',ans:12}, + {q:'Сколько вершин у прямоугольного параллелепипеда?',ans:8}, + {q:'Сколько граней у куба?',ans:6}, + {q:'Сколько рёбер у куба?',ans:12} + ]; + var i=0,score=0,cur=null; + function show(){ if(i>=5){ document.getElementById('p17-q').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p17-iv1');bumpProgress('p17',30);}else if(score>=2){addXp(8,'p17-iv1');bumpProgress('p17',16);} return; } + cur=QS[i]; document.getElementById('p17-i').textContent=i+1; + document.getElementById('p17-q').innerHTML=cur.q; + document.getElementById('p17-a').value=''; document.getElementById('p17-fb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p17-fb'), v=parseInt(document.getElementById('p17-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+'.'); + document.getElementById('p17-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p17-go').addEventListener('click',go); + document.getElementById('p17-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var a=_ri(2,10); cur={a:a,ans:12*a}; } + function show(){ if(i>=5){ document.getElementById('p17-rq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p17-iv2');bumpProgress('p17',30);}else if(score>=2){addXp(8,'p17-iv2');bumpProgress('p17',16);} return; } + gen(); document.getElementById('p17-ri').textContent=i+1; + document.getElementById('p17-rq').innerHTML='Куб со стороной $'+cur.a+'$ см. Сумма всех рёбер?'; renderMath(document.getElementById('p17-rq')); + document.getElementById('p17-ra').value=''; document.getElementById('p17-rfb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p17-rfb'), v=parseInt(document.getElementById('p17-ra').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! $12\\cdot'+cur.a+'='+cur.ans+'$ см.'); renderMath(fb); } else feedback(fb,false,'✗ Нет. $12\\cdot'+cur.a+'='+cur.ans+'$.'); + document.getElementById('p17-rs').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p17-rgo').addEventListener('click',go); + document.getElementById('p17-ra').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== § 18. ОБЪЁМ ПАРАЛЛЕЛЕПИПЕДА ==== */ +function buildP18(){ + var box=document.getElementById('p18-body'); var h=''; + h+=makeCard('oral','Где это в жизни','18.0', + '

Сколько воды войдёт в аквариум? Сколько коробок уместится в ящик? Какой объём холодильника? Всё это задачи на объём прямоугольного параллелепипеда.

'); + h+=makeCard('rule','Формула объёма','18.1', + '

Объём прямоугольного параллелепипеда:

' + +'

$V = a \\cdot b \\cdot c$

' + +'

Единицы: $\\text{мм}^3$, $\\text{см}^3$, $\\text{дм}^3$, $\\text{м}^3$. Особое название: $1$ л $= 1$ дм³ $= 1000$ см³.

' + +'

Куб со стороной $a$: $V=a^3$.

' + +'
' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'' + +'a=3' + +'c=2' + +'b=2' + +'V = 3·2·2 = 12' + +'
'); + h+=makeCard('example','Разбор по шагам','18.2', + '

Аквариум $40$ см × $20$ см × $25$ см. Объём в литрах?

' + +'
    ' + +'
  1. $V=40\\cdot20\\cdot25=20\\,000$ см³.
    2. ' + +'
  2. $1$ л $=1000$ см³, поэтому $V=20\\,000:1000=20$ л.
    3. ' + +'
'); + h+=makeCard('theory','А знаешь ли ты?','18.3', + '

Один кубический дециметр равен одному литру — это не случайность, а осознанное решение создателей метрической системы в $1795$ году. Они хотели, чтобы $1$ л воды весил ровно $1$ кг (при $4°$C). Задумка удалась: $1$ л воды весит $1000$ г = $1$ кг!

'); + h+='
Интерактив 1
Найди объём
' + +'
Вычисли объём параллелепипеда.
' + +'
Задача 1 / 6Очки: 0 / 6
' + +'
' + +'
' + +'
'; + h+='
Интерактив 2
Ребро по объёму
' + +'
Найди неизвестное ребро по объёму.
' + +'
Задача 1 / 5Очки: 0 / 5
' + +'
' + +'
' + +'
'; + h+=secNav('p17','final')+readBtn('p18'); + box.innerHTML=h; renderMath(box); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var t=_ri(0,1); + if(t===0){ var a=_ri(2,8),b=_ri(2,8),c=_ri(2,8); cur={q:'Параллелепипед $'+a+'\\times'+b+'\\times'+c+'$. Объём?',ans:a*b*c}; } + else { var a=_ri(2,8); cur={q:'Куб со стороной $'+a+'$ см. Объём (см³)?',ans:a*a*a}; } } + function show(){ if(i>=6){ document.getElementById('p18-q').innerHTML='Готово! '+score+' / 6'; if(score>=5){addXp(15,'p18-iv1');bumpProgress('p18',30);}else if(score>=3){addXp(8,'p18-iv1');bumpProgress('p18',16);} return; } + gen(); document.getElementById('p18-i').textContent=i+1; + document.getElementById('p18-q').innerHTML=cur.q; renderMath(document.getElementById('p18-q')); + document.getElementById('p18-a').value=''; document.getElementById('p18-fb').style.display='none'; } + function go(){ if(i>=6)return; var fb=document.getElementById('p18-fb'), v=parseInt(document.getElementById('p18-a').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Объём '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Ответ: '+cur.ans+'.'); + document.getElementById('p18-s').textContent=score; i++; setTimeout(show,1200); } + document.getElementById('p18-go').addEventListener('click',go); + document.getElementById('p18-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); + (function(){ + var i=0,score=0,cur=null; + function gen(){ var a=_ri(2,8), b=_ri(2,8), c=_ri(2,8); cur={a:a,b:b,c:c,V:a*b*c,ans:c}; } + function show(){ if(i>=5){ document.getElementById('p18-eq').innerHTML='Готово! '+score+' / 5'; if(score>=4){addXp(15,'p18-iv2');bumpProgress('p18',30);}else if(score>=2){addXp(8,'p18-iv2');bumpProgress('p18',16);} return; } + gen(); document.getElementById('p18-ei').textContent=i+1; + document.getElementById('p18-eq').innerHTML='Объём $'+cur.V+'$ см³, основание $'+cur.a+'\\times'+cur.b+'$ см². Высота?'; renderMath(document.getElementById('p18-eq')); + document.getElementById('p18-ea').value=''; document.getElementById('p18-efb').style.display='none'; } + function go(){ if(i>=5)return; var fb=document.getElementById('p18-efb'), v=parseInt(document.getElementById('p18-ea').value,10); + if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; } + if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно! Высота '+cur.ans+' см.'); } else feedback(fb,false,'✗ Нет. Высота: '+cur.ans+' ('+cur.V+'/'+cur.a+'/'+cur.b+'='+cur.ans+').'); + document.getElementById('p18-es').textContent=score; i++; setTimeout(show,1300); } + document.getElementById('p18-ego').addEventListener('click',go); + document.getElementById('p18-ea').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); + show(); + })(); +} + +/* ==== ДАННЫЕ ==== */ +var SIDEBARS={ + final:{title:'Финал главы 3',rows:[['5 боссов','дроби и геометрия'],['Победа','4 из 5'],['Награда','+40 XP, ачивка']]} +}; +var TIPS=[]; +var GLOSSARY=[]; +var BUILDERS={p1:buildP1,p2:buildP2,p3:buildP3,p4:buildP4,p5:buildP5,p6:buildP6,p7:buildP7,p8:buildP8,p9:buildP9,p10:buildP10,p11:buildP11,p12:buildP12,p13:buildP13,p14:buildP14,p15:buildP15,p16:buildP16,p17:buildP17,p18:buildP18,final:buildFinal}; +Object.assign(window.M6,{sidebars:SIDEBARS,tips:TIPS,glossary:GLOSSARY,builders:BUILDERS});