maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
Learn_System/frontend/textbooks/math_6_ch4.html
T
Maxim Dolgolyov 555f701b57 feat(math6): умножение-прыжки (Гл.4 §7) + координатный тир (Гл.5 §1) 
Math6Anim.numberLineJumps — a·b как a прыжков-дуг по b на числовой прямой
(зелёные вправо, красные влево, приземление на произведение); ползунки a,b.
Math6Anim.coordGame — «поставь точку (x;y)»: клик по узлу сетки, проверка,
счёт, при промахе показывает верную точку. План: 3D-тела исключены.
Headless-safe. Тесты math6: 20/20.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-02 21:53:47 +03:00

821 lines
88 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Математика 6 · Глава 4 · Рациональные числа</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
onload="renderMathInElement(document.body,{delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false},{left:'\\[',right:'\\]',display:true},{left:'\\(',right:'\\)',display:false}],throwOnError:false})"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Unbounded:wght@700;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/math6.css">
<script src="/js/api.js" defer></script>
<script src="/js/xp.js" defer></script>
<script src="/js/math6_svg.js" defer></script>
<script src="/js/math6_anim.js" defer></script>
<script src="/js/math6_engine.js" defer></script>
<style>:root{--pri:#e11d48;--pri2:#be123c;--pri-soft:#ffe4e6;--acc:#f43f5e;--acc2:#e11d48;--acc-soft:#fff1f2}</style>
</head>
<body>
<header class="hdr" data-wm="−5">
<div class="hdr-row">
<div>
<h1>Математика 6 · Глава 4</h1>
<div class="hdr-sub">Положительные и отрицательные числа · модуль · множества Z и Q · действия и законы</div>
</div>
<div class="hdr-side">
<a href="/textbook/math-6" class="hdr-btn" title="Ко всем главам"><svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg> К математике 6</a>
<button id="search-btn" class="hdr-btn" title="Поиск (Ctrl+K)"><svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg> <span>Поиск</span></button>
<button id="sidebar-btn" class="hdr-btn" title="Шпаргалка"><svg class="ic" viewBox="0 0 24 24"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="14" y2="18"/></svg> Шпаргалка</button>
<button id="theme-btn" class="hdr-btn" title="Сменить тему"><svg class="ic" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg> <span id="theme-lab">Тёмная</span></button>
</div>
</div>
</header>
<main class="main">
<div class="col-main">
<section class="hero" data-wm="−5">
<h2>Рациональные числа</h2>
<p>Температура ниже нуля, долги, координаты влево от нуля — так в математику приходят <b>отрицательные числа</b>. В этой главе мы построим <b>координатную прямую</b>, познакомимся с <b>модулем</b> и противоположными числами, множествами целых $\mathbb{Z}$ и рациональных $\mathbb{Q}$ чисел, и научимся выполнять <b>все действия</b> с рациональными числами по правилам знаков.</p>
<div class="hero-row">
<button class="btn-primary" onclick="goTo('p1')"><svg class="ic" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg> Начать § 1</button>
<div class="hero-progress"><span class="hp-label">Прогресс по главе</span><div class="hp-bar"><div id="hero-hp-fill" class="hp-fill"></div></div><span id="hero-hp-text" class="hp-text">0%</span></div>
<div id="hero-xp-badge" class="hero-xp-badge" title="Опыт" data-gamified></div>
</div>
</section>
<section class="psel"><div class="psel-title">Параграфы главы</div><div id="psel-grid" class="psel-grid"></div></section>
<div id="sections"></div>
</div>
<aside class="col-side" id="col-side"><div id="sidebar-content"></div></aside>
<div class="col-side-backdrop" id="col-side-backdrop"></div>
</main>
<footer class="foot" id="m6-foot">Интерактивный учебник «Математика 6» · Глава 4 · Рациональные числа · LearnSpace</footer>
<div id="ach-popup" class="ach-popup"><svg class="ic" viewBox="0 0 24 24" style="width:22px;height:22px"><polygon points="12,2 22,20 2,20"/></svg><span id="ach-text">Достижение!</span></div>
<div id="gloss-tip" class="gloss-tip"></div>
<div id="search-modal" class="search-modal" role="dialog" aria-label="Поиск по главе">
<div class="search-box">
<input type="text" id="search-input" class="search-input" placeholder="Поиск: понятие, действие, параграф…" autocomplete="off">
<div id="search-results" class="search-results"></div>
<div class="search-foot"><span><kbd>&#8593;&#8595;</kbd> навигация</span><span><kbd>Enter</kbd> открыть</span><span><kbd>Esc</kbd> закрыть</span></div>
</div>
</div>
<script>
'use strict';
window.M6 = {
slug: 'math-6-ch4', lsPrefix: 'math6_ch4', xpKey: 'math6_xp', wm: '−5',
paras: [
{ id:'p1', num:'§ 1', name:'Положительные и отрицательные числа. Координатная прямая', sub:'Числа со знаком' },
{ id:'p2', num:'§ 2', name:'Модуль. Противоположные числа. Z и Q', sub:'|x| и множества чисел' },
{ id:'p3', num:'§ 3', name:'Сравнение рациональных чисел', sub:'Что больше на прямой' },
{ id:'p4', num:'§ 4', name:'Сложение рациональных чисел', sub:'Правила сложения' },
{ id:'p5', num:'§ 5', name:'Вычитание рациональных чисел', sub:'Прибавляем противоположное' },
{ id:'p6', num:'§ 6', name:'Законы сложения', sub:'Удобный порядок действий' },
{ id:'p7', num:'§ 7', name:'Умножение рациональных чисел', sub:'Знаки при умножении' },
{ id:'p8', num:'§ 8', name:'Деление рациональных чисел', sub:'Знаки при делении' },
{ id:'p9', num:'§ 9', name:'Задачи на все действия', sub:'Порядок действий' },
{ id:'app', num:'§ 11', name:'Математика вокруг нас', sub:'Отрицательные числа в жизни', applied:true },
{ id:'final', num:'★', name:'Финал главы', sub:'Тест · боссы главы 4', final:true }
],
achLabels: {
start:'Начало главы 4!', p1_done:'Числа со знаком — ясно!', p2_done:'Модуль и Z, Q освоены!',
p3_done:'Сравниваю рациональные!', p4_done:'Сложение освоено!', p5_done:'Вычитание — точно!',
p6_done:'Законы сложения работают!', p7_done:'Умножение знаков — мастер!', p8_done:'Деление знаков — уверенно!',
p9_done:'Все действия — на отлично!', app_done:'Математика вокруг нас!', ch4_done:'Глава 4 пройдена!'
},
startAch: ['start','Начало главы 4!'],
finalAch: ['ch4_done','Глава 4 пройдена!'],
sidebars: {}, tips: [], glossary: [], builders: {},
footer: 'Интерактивный учебник «Математика 6» · Глава 4 · Рациональные числа · 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 _nz(a,b){ var v; do{ v=_ri(a,b); }while(v===0); return v; }
function _par(x){ return x<0 ? '('+x+')' : ''+x; }
function svgWrap(w,h,inner){ return '<div class="m6-fig" style="max-width:'+w+'px;margin:10px auto"><svg viewBox="0 0 '+w+' '+h+'" style="width:100%;height:auto;display:block;background:var(--card,#fff);border-radius:10px;border:1px solid var(--border)">'+inner+'</svg></div>'; }
/* ===================== § 1. ПОЛОЖИТЕЛЬНЫЕ И ОТРИЦАТЕЛЬНЫЕ. КООРДИНАТНАЯ ПРЯМАЯ ===================== */
function buildP1(){
var box=document.getElementById('p1-body'); var h='';
h+=makeCard('oral','Где это в жизни','1.0',
'<p>Без отрицательных чисел невозможно измерить температуру зимой: −20°C — это реальный мороз. Банки записывают долги отрицательными числами, а в видеоиграх герой может иметь отрицательный счёт. Даже карты высот показывают глубину морей со знаком «минус».</p>');
h+=makeCard('theory','Числа со знаком','1.1',
'<p>Числа бывают <b>положительные</b> ($+3$, или просто $3$), <b>отрицательные</b> ($-3$) и <b>ноль</b> (не положителен и не отрицателен). Отрицательными измеряют температуру ниже нуля, долги, глубину.</p>');
h+=makeCard('rule','Координатная прямая','1.2',
'<p><b>Координатная прямая</b> — прямая с началом $O$ (точка $0$), положительным направлением (вправо) и единичным отрезком. Положительные числа — справа от нуля, отрицательные — слева.</p>'
+'<p>Каждому числу соответствует точка, и наоборот; это его <b>координата</b>.</p>');
h+=makeCard('example','Разбор по шагам','1.3',
'<p>Задача: отметь число $-4$ и $3$ на координатной прямой, скажи, какое из них больше.</p>'
+'<ol><li>Рисуем прямую с нулём посередине, единичным отрезком вправо.</li>'
+'<li>$3$ — три единицы <b>вправо</b> от нуля: отмечаем точку $A(3)$.</li>'
+'<li>$-4$ — четыре единицы <b>влево</b> от нуля: отмечаем точку $B(-4)$.</li>'
+'<li>$A$ правее $B$, значит $3 > -4$. Любое положительное больше любого отрицательного.</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','1.4',
'<p>Отрицательные числа официально признали математики лишь в XVII веке — до этого их называли «абсурдными» или «мнимыми долгами». Индийский математик Брахмагупта ещё в VII веке описал правила работы с ними, но в Европе их долго отвергали!</p>');
h+='<div class="wg" id="p1-therm"><div class="wg-header"><span class="wg-badge">Анимация</span><div class="wg-title">Термометр: тепло и мороз</div></div>'
+'<div class="wg-help">Двигай ползунок. Выше нуля — тепло (красный), ниже — мороз (синий). Модуль $|x|$ — это расстояние числа до нуля.</div>'
+'<div class="sliders"><label>Температура = <b id="p1-tv">5</b>°<input type="range" id="p1-ts" min="-10" max="10" value="5"></label></div>'
+'<div id="p1-therm-fig"></div></div>';
h+='<div class="wg" id="p1-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прочитай координату</div></div>'
+'<div class="wg-help">Определи координату отмеченной точки (может быть отрицательной).</div>'
+'<div class="score-display"><span>Вопрос <b id="p1-i">1</b> / 6</span><span>Очки: <b id="p1-s">0</b> / 6</span></div>'
+'<div id="p1-fig"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p1-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p1-go">Проверить</button></div>'
+'<div class="feedback" id="p1-fb"></div></div>';
h+='<div class="wg" id="p1-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Положительное, отрицательное или ноль?</div></div>'
+'<div class="wg-help">Определи знак числа.</div>'
+'<div class="score-display"><span>Вопрос <b id="p1-ci">1</b> / 6</span><span>Очки: <b id="p1-cs">0</b> / 6</span></div>'
+'<div id="p1-cq" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-v="p">положительное</button><button class="btn primary" data-v="z">ноль</button><button class="btn primary" data-v="n">отрицательное</button></div>'
+'<div class="feedback" id="p1-cfb"></div></div>';
h+=secNav(null,'p2')+readBtn('p1');
box.innerHTML=h; renderMath(box);
(function(){ if(!window.Math6Anim) return; var t=Math6Anim.thermometer(document.getElementById('p1-therm-fig'),{value:5});
var sl=document.getElementById('p1-ts'); sl.oninput=function(){ document.getElementById('p1-tv').textContent=sl.value; t.set(+sl.value); }; })();
(function(){
var i=0,score=0,cur=0;
function show(){ if(i>=6){ document.getElementById('p1-fig').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p1-iv1');bumpProgress('p1',30);}else if(score>=3){addXp(8,'p1-iv1');bumpProgress('p1',16);} return; }
cur=_ri(-6,6); document.getElementById('p1-i').textContent=i+1;
document.getElementById('p1-fig').innerHTML=Math6.numberLine({min:-7,max:7,minor:1,major:1,width:580,marks:[{v:cur,label:'?',color:'#e11d48'}]});
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){ score++; feedback(fb,true,'✓ Верно: '+cur+'.'); } else feedback(fb,false,'✗ Нет. Координата: '+cur+'.');
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 i=0,score=0,cur=null;
function gen(){ var v=_ri(-9,9); cur={v:v, k:v>0?'p':(v<0?'n':'z')}; }
function show(){ if(i>=6){ document.getElementById('p1-cq').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p1-iv2');bumpProgress('p1',30);}else if(score>=3){addXp(8,'p1-iv2');bumpProgress('p1',16);} return; }
gen(); document.getElementById('p1-ci').textContent=i+1; document.getElementById('p1-cq').innerHTML='Число $'+cur.v+'$ — какое?'; renderMath(document.getElementById('p1-cq'));
document.getElementById('p1-cfb').style.display='none'; }
function ans(k){ if(i>=6)return; var fb=document.getElementById('p1-cfb'), nm={p:'положительное',n:'отрицательное',z:'ноль'};
if(k===cur.k){ score++; feedback(fb,true,'✓ Верно — '+nm[cur.k]+'.'); } else feedback(fb,false,'✗ Нет. $'+cur.v+'$ — '+nm[cur.k]+'.');
document.getElementById('p1-cs').textContent=score; i++; setTimeout(show,1200); }
document.querySelectorAll('#p1-iv2 [data-v]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-v')); }); }); show();
})();
}
/* ===================== § 2. МОДУЛЬ. ПРОТИВОПОЛОЖНЫЕ. Z И Q ===================== */
function buildP2(){
var box=document.getElementById('p2-body'); var h='';
h+=makeCard('oral','Где это в жизни','2.0',
'<p>Когда говорят «расстояние», всегда имеют в виду положительное число — неважно, вправо ты пошёл или влево. Именно это и есть модуль: расстояние от точки до нуля. Спортсмены говорят «разница в счёте 3 очка» — это тоже модуль разности.</p>');
h+=makeCard('theory','Модуль и противоположные числа','2.1',
'<p><b>Модуль</b> числа $|a|$ — это расстояние от точки $a$ до нуля; он всегда $\\ge 0$: $|{-7}|=7$, $|5|=5$, $|0|=0$.</p>'
+'<p><b>Противоположные числа</b> отличаются только знаком ($5$ и $-5$); их сумма равна нулю, а модули равны.</p>');
h+=makeCard('example','Разбор по шагам','2.2',
'<p>Найти $|{-9}|$ и число, противоположное $-9$.</p>'
+'<ol><li>Модуль — это расстояние до нуля. От $-9$ до $0$ ровно $9$ шагов по прямой.</li>'
+'<li>Значит $|{-9}| = 9$. Знак «убираем».</li>'
+'<li>Противоположное меняет знак: противоположное к $-9$ — это $+9$.</li>'
+'<li>Проверка: $(-9) + 9 = 0$ — верно, сумма противоположных равна нулю.</li></ol>');
h+=makeCard('theory','Множества чисел: N ⊂ Z ⊂ Q','2.3',
'<p><b>Натуральные</b> $\\mathbb{N}=\\{1;2;3;\\ldots\\}$ — для счёта. <b>Целые</b> $\\mathbb{Z}$ — натуральные, им противоположные и ноль. <b>Рациональные</b> $\\mathbb{Q}$ — все числа, представимые дробью $\\frac{m}{n}$ (включая десятичные и отрицательные).</p>'
+svgWrap(240,180,'<ellipse cx="120" cy="95" rx="108" ry="78" fill="rgba(225,29,72,.08)" stroke="#e11d48" stroke-width="2"/><ellipse cx="120" cy="105" rx="78" ry="55" fill="rgba(124,58,237,.10)" stroke="#7c3aed" stroke-width="2"/><ellipse cx="120" cy="118" rx="46" ry="32" fill="rgba(79,70,229,.12)" stroke="#4f46e5" stroke-width="2"/><text x="120" y="32" text-anchor="middle" font-size="15" font-weight="800" fill="#e11d48">Q (рациональные)</text><text x="120" y="70" text-anchor="middle" font-size="14" font-weight="800" fill="#7c3aed">Z (целые)</text><text x="120" y="122" text-anchor="middle" font-size="13" font-weight="800" fill="#4f46e5">N: 1,2,3…</text>'));
h+=makeCard('theory','А знаешь ли ты?','2.4',
'<p>Слово «рациональный» происходит от латинского <i>ratio</i> — «отношение, дробь». Число называется рациональным, потому что его можно представить как отношение (дробь) двух целых чисел. Числа вроде $\\sqrt{2}$ или $\\pi$ этого сделать нельзя — они иррациональные.</p>');
h+='<div class="wg" id="p2-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Найди модуль</div></div>'
+'<div class="wg-help">Модуль — расстояние до нуля, всегда неотрицателен.</div>'
+'<div class="score-display"><span>Вопрос <b id="p2-i">1</b> / 6</span><span>Очки: <b id="p2-s">0</b> / 6</span></div>'
+'<div id="p2-q" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p2-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p2-go">Проверить</button></div>'
+'<div class="feedback" id="p2-fb"></div></div>';
h+='<div class="wg" id="p2-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Противоположное число</div></div>'
+'<div class="wg-help">Назови число, противоположное данному.</div>'
+'<div class="score-display"><span>Вопрос <b id="p2-oi">1</b> / 5</span><span>Очки: <b id="p2-os">0</b> / 5</span></div>'
+'<div id="p2-oq" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p2-oa" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p2-ogo">Проверить</button></div>'
+'<div class="feedback" id="p2-ofb"></div></div>';
h+=secNav('p1','p3')+readBtn('p2');
box.innerHTML=h; renderMath(box);
(function(){
var i=0,score=0,cur=0;
function show(){ if(i>=6){ document.getElementById('p2-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p2-iv1');bumpProgress('p2',30);}else if(score>=3){addXp(8,'p2-iv1');bumpProgress('p2',16);} return; }
cur=_ri(-15,15); document.getElementById('p2-i').textContent=i+1; document.getElementById('p2-q').innerHTML='Вычисли $|'+cur+'|$.'; 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===Math.abs(cur)){ score++; feedback(fb,true,'✓ Верно: '+Math.abs(cur)+'.'); } else feedback(fb,false,'✗ Нет. $|'+cur+'|='+Math.abs(cur)+'$.');
document.getElementById('p2-s').textContent=score; i++; setTimeout(show,1200); }
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=0;
function show(){ if(i>=5){ document.getElementById('p2-oq').innerHTML='<b>Готово!</b> '+score+' / 5'; if(score>=4){addXp(15,'p2-iv2');bumpProgress('p2',30);}else if(score>=2){addXp(8,'p2-iv2');bumpProgress('p2',16);} return; }
cur=_nz(-12,12); document.getElementById('p2-oi').textContent=i+1; document.getElementById('p2-oq').innerHTML='Число, противоположное $'+cur+'$ — это?'; renderMath(document.getElementById('p2-oq'));
document.getElementById('p2-oa').value=''; document.getElementById('p2-ofb').style.display='none'; }
function go(){ if(i>=5)return; var fb=document.getElementById('p2-ofb'), v=parseInt(document.getElementById('p2-oa').value,10);
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
if(v===-cur){ score++; feedback(fb,true,'✓ Верно: '+(-cur)+'.'); } else feedback(fb,false,'✗ Нет. Противоположное: '+(-cur)+'.');
document.getElementById('p2-os').textContent=score; i++; setTimeout(show,1200); }
document.getElementById('p2-ogo').addEventListener('click',go);
document.getElementById('p2-oa').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',
'<p>Когда синоптики говорят «сегодня теплее, чем вчера», они сравнивают числа — в том числе отрицательные. −3°C теплее, чем −8°C, хотя оба со знаком минус. Такое же сравнение используют в финансах: долг −200 рублей лучше, чем долг −500 рублей.</p>');
h+=makeCard('rule','Сравнение на координатной прямой','3.1',
'<p>Из двух чисел <b>больше то, которое правее</b> на координатной прямой.</p>'
+'<p>Любое положительное $>$ любого отрицательного; $0$ больше любого отрицательного. Из двух отрицательных больше то, у которого <b>меньше модуль</b> (ближе к нулю): $-2 > -5$.</p>');
h+=makeCard('example','Разбор по шагам','3.2',
'<p>Сравни числа $-3$ и $-7$.</p>'
+'<ol><li>Оба числа отрицательные. Смотрим модули: $|-3|=3$, $|-7|=7$.</li>'
+'<li>$3 < 7$, значит $-3$ ближе к нулю на прямой.</li>'
+'<li>Ближе к нулю — значит правее — значит больше.</li>'
+'<li>Ответ: $-3 > -7$. Это кажется странным, но проверь на прямой — $-3$ действительно правее $-7$.</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','3.3',
'<p>В программировании и в физике часто используют понятие «знаковая переменная»: число может быть и положительным, и отрицательным. Датчики температуры, гироскопы в телефоне, альтиметры — все они работают с числами, которые надо уметь сравнивать со знаком.</p>');
h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Сравни числа</div></div>'
+'<div class="wg-help">Сравни два числа на координатной прямой.</div>'
+'<div class="score-display"><span>Вопрос <b id="p3-i">1</b> / 6</span><span>Очки: <b id="p3-s">0</b> / 6</span></div>'
+'<div id="p3-fig"></div><div id="p3-q" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-c=">">a &gt; b</button><button class="btn primary" data-c="<">a &lt; b</button></div>'
+'<div class="feedback" id="p3-fb"></div></div>';
h+='<div class="wg" id="p3-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Наибольшее из трёх</div></div>'
+'<div class="wg-help">Выбери наибольшее из трёх чисел.</div>'
+'<div class="score-display"><span>Вопрос <b id="p3-mi">1</b> / 5</span><span>Очки: <b id="p3-ms">0</b> / 5</span></div>'
+'<div id="p3-mopts" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"></div>'
+'<div class="feedback" id="p3-mfb"></div></div>';
h+=secNav('p2','p4')+readBtn('p3');
box.innerHTML=h; renderMath(box);
(function(){
var i=0,score=0,cur=null;
function gen(){ var a=_ri(-6,6), b=_ri(-6,6); if(a===b)b=b>=0?b-1:b+1; cur={a:a,b:b}; }
function show(){ if(i>=6){ document.getElementById('p3-fig').innerHTML=''; document.getElementById('p3-q').innerHTML='<b>Готово!</b> '+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-fig').innerHTML=Math6.numberLine({min:-7,max:7,minor:1,major:1,width:580,marks:[{v:cur.a,label:'a',color:'#4f46e5'},{v:cur.b,label:'b',color:'#e11d48',above:false}]});
document.getElementById('p3-q').innerHTML='$a='+cur.a+'$, $b='+cur.b+'$. Что верно?'; renderMath(document.getElementById('p3-q'));
document.getElementById('p3-fb').style.display='none'; }
function ans(c){ if(i>=6)return; var fb=document.getElementById('p3-fb'), correct=cur.a>cur.b?'>':'<';
if(c===correct){ score++; feedback(fb,true,'✓ Верно: $'+cur.a+' '+correct+' '+cur.b+'$.'); } else feedback(fb,false,'✗ Нет: $'+cur.a+' '+correct+' '+cur.b+'$.');
document.getElementById('p3-s').textContent=score; i++; setTimeout(show,1200); }
document.querySelectorAll('#p3-iv1 [data-c]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-c')); }); }); show();
})();
(function(){
var i=0,score=0,cur=null;
function gen(){ var s=[]; while(s.length<3){ var v=_ri(-9,9); if(s.indexOf(v)<0)s.push(v); } var mx=Math.max.apply(null,s); cur={s:s,mx:mx}; }
function show(){ if(i>=5){ document.getElementById('p3-mopts').innerHTML='<b>Готово!</b> '+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-mopts').innerHTML=cur.s.map(function(v){ return '<button class="btn primary" data-v="'+v+'">$'+v+'$</button>'; }).join('');
document.querySelectorAll('#p3-mopts [data-v]').forEach(function(b){ b.addEventListener('click',function(){ ans(+b.getAttribute('data-v')); }); }); renderMath(document.getElementById('p3-mopts'));
document.getElementById('p3-mfb').style.display='none'; }
function ans(v){ if(i>=5)return; var fb=document.getElementById('p3-mfb');
if(v===cur.mx){ score++; feedback(fb,true,'✓ Верно: '+cur.mx+'.'); } else feedback(fb,false,'✗ Нет. Наибольшее: '+cur.mx+'.');
document.getElementById('p3-ms').textContent=score; i++; setTimeout(show,1200); }
show();
})();
}
/* ===================== § 4. СЛОЖЕНИЕ РАЦИОНАЛЬНЫХ ===================== */
function buildP4(){
var box=document.getElementById('p4-body'); var h='';
h+=makeCard('oral','Где это в жизни','4.0',
'<p>Температура за окном −5°C. К вечеру потеплело на 3°C. Сколько стало? Это сложение рациональных: $-5 + 3 = -2$. Точно так же считают изменение уровня воды в реке, баланс на банковском счёте и набранные/потерянные очки в игре.</p>');
h+=makeCard('rule','Правила сложения','4.1',
'<p><b>Одинаковые знаки:</b> складываем модули, ставим общий знак: $-3+(-4)=-7$.</p>'
+'<p><b>Разные знаки:</b> из большего модуля вычитаем меньший, ставим знак числа с бо́льшим модулем: $-7+4=-3$, &nbsp; $7+(-4)=3$.</p>'
+'<p>Сумма противоположных равна нулю: $6+(-6)=0$.</p>');
h+=makeCard('example','Разбор по шагам','4.2',
'<p>Вычисли $-8 + 5$.</p>'
+'<ol><li>Знаки <b>разные</b> ($-$ и $+$) — применяем второе правило.</li>'
+'<li>Находим модули: $|-8|=8$, $|5|=5$.</li>'
+'<li>Из большего модуля вычитаем меньший: $8 - 5 = 3$.</li>'
+'<li>Знак берём от числа с бо́льшим модулем: это $-8$, значит знак «минус».</li>'
+'<li>Ответ: $-8 + 5 = -3$.</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','4.3',
'<p>Сложение на координатной прямой — это буквальное «движение». Положительное слагаемое — шаг вправо, отрицательное — шаг влево. Именно поэтому термометр, линейка и шкала лифта устроены как координатные прямые!</p>');
h+='<div class="wg" id="p4-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Сложение на прямой</div></div>'
+'<div class="wg-help">Двигай слагаемые — результат отмечается на координатной прямой.</div>'
+'<div class="sliders"><label>$a$ = <b id="p4-av">-3</b><input type="range" id="p4-asl" min="-6" max="6" value="-3"></label><label>$b$ = <b id="p4-bv">5</b><input type="range" id="p4-bsl" min="-6" max="6" value="5"></label></div>'
+'<div id="p4-fig"></div><div id="p4-walk" style="margin-top:8px"></div><div id="p4-out" class="qbox"></div></div>';
h+='<div class="wg" id="p4-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Тренажёр сложения</div></div>'
+'<div class="wg-help">Сложи рациональные числа.</div>'
+'<div class="score-display"><span>Пример <b id="p4-i">1</b> / 6</span><span>Очки: <b id="p4-s">0</b> / 6</span></div>'
+'<div id="p4-q" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p4-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p4-go">Проверить</button></div>'
+'<div class="feedback" id="p4-fb"></div></div>';
h+=secNav('p3','p5')+readBtn('p4');
box.innerHTML=h; renderMath(box);
(function(){
var asl=document.getElementById('p4-asl'), bsl=document.getElementById('p4-bsl'), fig=document.getElementById('p4-fig'), out=document.getElementById('p4-out'), walk=null;
function render(){ var a=+asl.value,b=+bsl.value,s=a+b; document.getElementById('p4-av').textContent=a; document.getElementById('p4-bv').textContent=b;
fig.innerHTML=Math6.numberLine({min:-12,max:12,minor:1,major:2,width:580,marks:[{v:a,label:'a',color:'#4f46e5'},{v:s,label:'a+b',color:'#059669',above:false}]});
out.innerHTML='<div style="font-size:1.3rem;font-weight:800;color:var(--pri2)">$'+a+' + '+_par(b)+' = '+s+'$</div>'; renderMath(out);
if(window.Math6Anim){ if(walk)walk.stop(); walk=Math6Anim.numberLineWalk(document.getElementById('p4-walk'),{a:a,b:b}); } }
asl.oninput=render; bsl.oninput=render; render();
})();
(function(){
var i=0,score=0,cur=null;
function gen(){ var a=_nz(-12,12), b=_nz(-12,12); cur={a:a,b:b,s:a+b}; }
function show(){ if(i>=6){ document.getElementById('p4-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p4-iv2');bumpProgress('p4',30);}else if(score>=3){addXp(8,'p4-iv2');bumpProgress('p4',16);} return; }
gen(); document.getElementById('p4-i').textContent=i+1; document.getElementById('p4-q').innerHTML='Вычисли $'+cur.a+' + '+_par(cur.b)+'$'; renderMath(document.getElementById('p4-q'));
document.getElementById('p4-a').value=''; document.getElementById('p4-fb').style.display='none'; }
function go(){ if(i>=6)return; var fb=document.getElementById('p4-fb'), v=parseInt(document.getElementById('p4-a').value,10);
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
if(v===cur.s){ score++; feedback(fb,true,'✓ Верно: '+cur.s+'.'); } else feedback(fb,false,'✗ Нет. $'+cur.a+'+'+_par(cur.b)+'='+cur.s+'$.');
document.getElementById('p4-s').textContent=score; i++; setTimeout(show,1200); }
document.getElementById('p4-go').addEventListener('click',go);
document.getElementById('p4-a').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',
'<p>Разность температур, изменение счёта в игре, разница высот — всё это вычитание, в том числе с отрицательными числами. «На сколько −3°C больше, чем −10°C?» — это $-3 - (-10) = 7$: на 7 градусов теплее.</p>');
h+=makeCard('rule','Вычитание — это прибавление противоположного','5.1',
'<p>Чтобы из числа вычесть другое, нужно к нему прибавить <b>противоположное</b>: $a - b = a + (-b)$.</p>'
+'<p>$5 - 8 = 5 + (-8) = -3$; &nbsp; $-4 - 3 = -4 + (-3) = -7$; &nbsp; $2 - (-6) = 2 + 6 = 8$.</p>');
h+=makeCard('example','Разбор по шагам','5.2',
'<p>Вычисли $-4 - (-7)$.</p>'
+'<ol><li>Заменяем вычитание сложением с противоположным: $-4 - (-7) = -4 + (+7)$.</li>'
+'<li>Два минуса дают плюс: скобки раскрыты, получили $-4 + 7$.</li>'
+'<li>Знаки разные. Модули: $4$ и $7$. Разность модулей: $7 - 4 = 3$.</li>'
+'<li>Знак от числа с большим модулем: $7 > 4$, значит знак «плюс».</li>'
+'<li>Ответ: $-4 - (-7) = 3$.</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','5.3',
'<p>Правило «минус на минус даёт плюс» при вычитании вытекает из одного простого принципа: вычесть отрицательное — значит вернуть то, что было отнято. Если у тебя забрали долг в 7 рублей (то есть убрали $-7$), ты стал богаче на 7!</p>');
h+='<div class="wg" id="p5-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Тренажёр вычитания</div></div>'
+'<div class="wg-help">Замени вычитание сложением с противоположным и вычисли.</div>'
+'<div class="score-display"><span>Пример <b id="p5-i">1</b> / 6</span><span>Очки: <b id="p5-s">0</b> / 6</span></div>'
+'<div id="p5-q" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p5-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p5-go">Проверить</button></div>'
+'<div class="feedback" id="p5-fb"></div></div>';
h+='<div class="wg" id="p5-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Перепиши как сложение</div></div>'
+'<div class="wg-help">Выбери верную запись вычитания в виде сложения.</div>'
+'<div class="score-display"><span>Вопрос <b id="p5-ri">1</b> / 5</span><span>Очки: <b id="p5-rs">0</b> / 5</span></div>'
+'<div id="p5-rq" class="qbox"></div><div id="p5-ropts" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"></div>'
+'<div class="feedback" id="p5-rfb"></div></div>';
h+=secNav('p4','p6')+readBtn('p5');
box.innerHTML=h; renderMath(box);
(function(){
var i=0,score=0,cur=null;
function gen(){ var a=_ri(-10,10), b=_nz(-10,10); cur={a:a,b:b,d:a-b}; }
function show(){ if(i>=6){ document.getElementById('p5-q').innerHTML='<b>Готово!</b> '+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='Вычисли $'+cur.a+' - '+_par(cur.b)+'$'; 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.d){ score++; feedback(fb,true,'✓ Верно: '+cur.a+' + '+_par(-cur.b)+' = '+cur.d+'.'); } else feedback(fb,false,'✗ Нет. $'+cur.a+'-'+_par(cur.b)+'='+cur.a+'+'+_par(-cur.b)+'='+cur.d+'$.');
document.getElementById('p5-s').textContent=score; i++; setTimeout(show,1300); }
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 gen(){ var a=_ri(-8,8), b=_nz(-8,8); cur={a:a,b:b}; }
function show(){ if(i>=5){ document.getElementById('p5-rq').innerHTML='<b>Готово!</b> '+score+' / 5'; document.getElementById('p5-ropts').innerHTML=''; 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='Как записать $'+cur.a+' - '+_par(cur.b)+'$ в виде сложения?'; renderMath(document.getElementById('p5-rq'));
var right=cur.a+' + '+_par(-cur.b); var w1=cur.a+' + '+_par(cur.b); var w2=(-cur.a)+' + '+_par(-cur.b);
var opts=[right,w1,w2]; for(var j=opts.length-1;j>0;j--){var k=_ri(0,j),t=opts[j];opts[j]=opts[k];opts[k]=t;}
document.getElementById('p5-ropts').innerHTML=opts.map(function(o){ return '<button class="btn primary" data-o="'+o+'">$'+o+'$</button>'; }).join('');
document.querySelectorAll('#p5-ropts [data-o]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-o'),right); }); }); renderMath(document.getElementById('p5-ropts'));
document.getElementById('p5-rfb').style.display='none'; }
function ans(o,right){ if(i>=5)return; var fb=document.getElementById('p5-rfb');
if(o===right){ score++; feedback(fb,true,'✓ Верно: $'+right+'$.'); } else feedback(fb,false,'✗ Нет. Правильно: $'+right+'$.');
document.getElementById('p5-rs').textContent=score; i++; setTimeout(show,1300); }
show();
})();
}
/* ===================== § 6. ЗАКОНЫ СЛОЖЕНИЯ ===================== */
function buildP6(){
var box=document.getElementById('p6-body'); var h='';
h+=makeCard('oral','Где это в жизни','6.0',
'<p>Когда кассир суммирует покупки, он добавляет их в любом порядке — результат одинаков. Это переместительный закон. Бухгалтер, считая баланс, группирует доходы и расходы удобными блоками — это сочетательный. Оба закона экономят время каждый день.</p>');
h+=makeCard('rule','Законы сложения','6.1',
'<p><b>Переместительный:</b> $a+b=b+a$ (слагаемые можно менять местами).</p>'
+'<p><b>Сочетательный:</b> $(a+b)+c=a+(b+c)$ (слагаемые можно группировать).</p>'
+'<p>Их используют для удобства: сначала складывают противоположные или «круглые» числа: $-7+15+7 = (-7+7)+15 = 15$.</p>');
h+=makeCard('example','Разбор по шагам','6.2',
'<p>Вычисли удобным способом: $23 + (-18) + (-23)$.</p>'
+'<ol><li>Замечаем: $23$ и $-23$ — противоположные числа.</li>'
+'<li>По сочетательному закону группируем их: $(23 + (-23)) + (-18)$.</li>'
+'<li>$23 + (-23) = 0$ (сумма противоположных).</li>'
+'<li>$0 + (-18) = -18$.</li>'
+'<li>Ответ: $-18$. Без группировки это было бы сложнее!</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','6.3',
'<p>Переместительный закон кажется очевидным, но он выполняется не всегда! Например, при умножении матриц в высшей математике $A \cdot B \ne B \cdot A$ — это называется некоммутативностью. В обычной арифметике нам везёт: сложение и умножение чисел коммутативны.</p>');
h+='<div class="wg" id="p6-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Вычисли удобным способом</div></div>'
+'<div class="wg-help">Сгруппируй слагаемые, чтобы считать было легко.</div>'
+'<div class="score-display"><span>Пример <b id="p6-i">1</b> / 5</span><span>Очки: <b id="p6-s">0</b> / 5</span></div>'
+'<div id="p6-q" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p6-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p6-go">Проверить</button></div>'
+'<div class="feedback" id="p6-fb"></div></div>';
h+='<div class="wg" id="p6-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Какой закон применён?</div></div>'
+'<div class="wg-help">Определи, какой закон сложения использован в равенстве.</div>'
+'<div class="score-display"><span>Вопрос <b id="p6-li">1</b> / 5</span><span>Очки: <b id="p6-ls">0</b> / 5</span></div>'
+'<div id="p6-lq" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-l="p">переместительный</button><button class="btn primary" data-l="s">сочетательный</button></div>'
+'<div class="feedback" id="p6-lfb"></div></div>';
h+=secNav('p5','p7')+readBtn('p6');
box.innerHTML=h; renderMath(box);
(function(){
var P=[['-7 + 15 + 7',15],['23 + (-18) + (-23)',-18],['-12 + 30 + 12',30],['8 + (-15) + (-8)',-15],['-5 + (-9) + 5',-9],['-20 + 14 + 20',14]];
var order=P.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
var i=0,score=0,cur=null;
function show(){ if(i>=5){ document.getElementById('p6-q').innerHTML='<b>Готово!</b> '+score+' / 5'; if(score>=4){addXp(15,'p6-iv1');bumpProgress('p6',30);}else if(score>=2){addXp(8,'p6-iv1');bumpProgress('p6',16);} return; }
cur=P[order[i]]; document.getElementById('p6-i').textContent=i+1; document.getElementById('p6-q').innerHTML='Вычисли удобным способом: $'+cur[0]+'$'; renderMath(document.getElementById('p6-q'));
document.getElementById('p6-a').value=''; document.getElementById('p6-fb').style.display='none'; }
function go(){ if(i>=5)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[1]){ score++; feedback(fb,true,'✓ Верно: '+cur[1]+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+cur[1]+'.');
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 Q=[['a+b = b+a','p'],['(a+b)+c = a+(b+c)','s'],['7 + (-5) = -5 + 7','p'],['(2+8)+5 = 2+(8+5)','s'],['(-3+4)+1 = -3+(4+1)','s'],['12 + 9 = 9 + 12','p']];
var order=Q.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
var i=0,score=0,cur=null;
function show(){ if(i>=5){ document.getElementById('p6-lq').innerHTML='<b>Готово!</b> '+score+' / 5'; if(score>=4){addXp(15,'p6-iv2');bumpProgress('p6',30);}else if(score>=2){addXp(8,'p6-iv2');bumpProgress('p6',16);} return; }
cur=Q[order[i]]; document.getElementById('p6-li').textContent=i+1; document.getElementById('p6-lq').innerHTML='$'+cur[0]+'$'; renderMath(document.getElementById('p6-lq'));
document.getElementById('p6-lfb').style.display='none'; }
function ans(l){ if(i>=5)return; var fb=document.getElementById('p6-lfb'), nm={p:'переместительный',s:'сочетательный'};
if(l===cur[1]){ score++; feedback(fb,true,'✓ Верно — '+nm[cur[1]]+'.'); } else feedback(fb,false,'✗ Нет. Это '+nm[cur[1]]+' закон.');
document.getElementById('p6-ls').textContent=score; i++; setTimeout(show,1300); }
document.querySelectorAll('#p6-iv2 [data-l]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-l')); }); }); show();
})();
}
/* ===================== § 7. УМНОЖЕНИЕ РАЦИОНАЛЬНЫХ ===================== */
function buildP7(){
var box=document.getElementById('p7-body'); var h='';
h+=makeCard('oral','Где это в жизни','7.0',
'<p>Если температура падает на 3°C каждый час в течение 4 часов, то изменение составит $(-3) \cdot 4 = -12$°C. Умножение с отрицательными числами используют везде: в физике (скорость и направление), в экономике (убыток за несколько месяцев), в программировании (отражение на экране).</p>');
h+=makeCard('rule','Правило знаков при умножении','7.1',
'<p>Перемножают модули, а знак определяют по правилу:</p>'
+'<table class="tbl" style="max-width:320px;margin:6px auto"><tr><th>$\\times$</th><th>$+$</th><th>$-$</th></tr><tr><th>$+$</th><td>$+$</td><td>$-$</td></tr><tr><th>$-$</th><td>$-$</td><td>$+$</td></tr></table>'
+'<p>«Минус на минус даёт плюс». $-3\\cdot(-4)=12$, &nbsp; $-3\\cdot 4=-12$. Умножение на $0$ даёт $0$.</p>');
h+=makeCard('example','Разбор по шагам','7.2',
'<p>Вычисли $(-6) \\cdot (-5)$.</p>'
+'<ol><li>Перемножаем модули: $|-6| = 6$, $|-5| = 5$, $6 \\cdot 5 = 30$.</li>'
+'<li>Определяем знак: оба множителя <b>отрицательные</b> (знаки одинаковые).</li>'
+'<li>Одинаковые знаки при умножении дают «плюс».</li>'
+'<li>Ответ: $(-6) \\cdot (-5) = +30 = 30$.</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','7.3',
'<p>Почему «минус на минус даёт плюс»? Вот интуитивное объяснение: «враг моего врага — мой друг». Если долг ($-$) это плохо, то убрать долг ($-$) — это хорошо ($+$). Формально это следует из дистрибутивности, но образно запомнить проще!</p>');
h+='<div class="wg" id="p7-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Знак произведения</div></div>'
+'<div class="wg-help">Выбери знаки множителей — узнай знак произведения.</div>'
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:8px"><button class="btn" data-s="pp">$(+)\\cdot(+)$</button><button class="btn" data-s="pn">$(+)\\cdot(-)$</button><button class="btn" data-s="np">$(-)\\cdot(+)$</button><button class="btn" data-s="nn">$(-)\\cdot(-)$</button></div>'
+'<div id="p7-out" class="qbox"></div></div>';
h+='<div class="wg" id="p7-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Тренажёр умножения</div></div>'
+'<div class="wg-help">Перемножь рациональные числа со знаками.</div>'
+'<div class="score-display"><span>Пример <b id="p7-i">1</b> / 6</span><span>Очки: <b id="p7-s">0</b> / 6</span></div>'
+'<div id="p7-q" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p7-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p7-go">Проверить</button></div>'
+'<div class="feedback" id="p7-fb"></div></div>';
h+='<div class="wg" id="p7-jumps"><div class="wg-header"><span class="wg-badge">Анимация</span><div class="wg-title">Умножение — это прыжки</div></div>'
+'<div class="wg-help">$a \\cdot b$ — сделать $a$ прыжков по $b$ от нуля. Зелёные прыжки — вправо ($b>0$), красные — влево ($b<0$).</div>'
+'<div class="sliders"><label>$a$ (сколько прыжков) = <b id="p7-jav">3</b><input type="range" id="p7-ja" min="1" max="5" value="3"></label>'
+'<label>$b$ (длина прыжка) = <b id="p7-jbv">-2</b><input type="range" id="p7-jb" min="-5" max="5" value="-2"></label></div>'
+'<div id="p7-jumpfig"></div></div>';
h+=secNav('p6','p8')+readBtn('p7');
box.innerHTML=h; renderMath(box);
(function(){ if(!window.Math6Anim) return; var ja=document.getElementById('p7-ja'), jb=document.getElementById('p7-jb'), jump=null;
function r(){ var a=+ja.value,b=+jb.value; document.getElementById('p7-jav').textContent=a; document.getElementById('p7-jbv').textContent=b; if(jump)jump.stop(); jump=Math6Anim.numberLineJumps(document.getElementById('p7-jumpfig'),{a:a,b:b}); }
ja.oninput=r; jb.oninput=r; r(); })();
(function(){
var out=document.getElementById('p7-out');
function render(s){ var map={pp:['$(+)\\cdot(+)=+$','плюс'],pn:['$(+)\\cdot(-)=-$','минус'],np:['$(-)\\cdot(+)=-$','минус'],nn:['$(-)\\cdot(-)=+$','плюс']};
out.innerHTML='<div style="font-size:1.3rem;font-weight:800;color:var(--pri2)">'+map[s][0]+'</div><div style="color:var(--muted);margin-top:4px">Знак произведения — <b>'+map[s][1]+'</b>.</div>'; renderMath(out); }
document.querySelectorAll('#p7-iv1 [data-s]').forEach(function(b){ b.addEventListener('click',function(){ document.querySelectorAll('#p7-iv1 [data-s]').forEach(function(x){x.classList.remove('primary');}); b.classList.add('primary'); render(b.getAttribute('data-s')); }); });
render('nn');
})();
(function(){
var i=0,score=0,cur=null;
function gen(){ var a=_nz(-9,9), b=_nz(-9,9); cur={a:a,b:b,p:a*b}; }
function show(){ if(i>=6){ document.getElementById('p7-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p7-iv2');bumpProgress('p7',30);}else if(score>=3){addXp(8,'p7-iv2');bumpProgress('p7',16);} return; }
gen(); document.getElementById('p7-i').textContent=i+1; document.getElementById('p7-q').innerHTML='Вычисли $'+_par(cur.a)+' \\cdot '+_par(cur.b)+'$'; 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.p){ score++; feedback(fb,true,'✓ Верно: '+cur.p+'.'); } else feedback(fb,false,'✗ Нет. $'+_par(cur.a)+'\\cdot'+_par(cur.b)+'='+cur.p+'$.');
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();
})();
}
/* ===================== § 8. ДЕЛЕНИЕ РАЦИОНАЛЬНЫХ ===================== */
function buildP8(){
var box=document.getElementById('p8-body'); var h='';
h+=makeCard('oral','Где это в жизни','8.0',
'<p>Если команда потеряла 12 очков за 4 тура поровну, то в каждом туре: $-12 \div 4 = -3$ очка. Деление с отрицательными числами встречается везде, где нужно равномерно распределить убыток, снижение температуры или расход топлива.</p>');
h+=makeCard('rule','Правило знаков при делении','8.1',
'<p>Делят модули, а знак — по тому же правилу, что и при умножении: одинаковые знаки дают $+$, разные — $-$.</p>'
+'<p>$-12\\div(-3)=4$, &nbsp; $-12\\div 3=-4$, &nbsp; $12\\div(-4)=-3$. На ноль делить нельзя.</p>');
h+=makeCard('example','Разбор по шагам','8.2',
'<p>Вычисли $(-35) \\div 7$.</p>'
+'<ol><li>Делим модули: $|-35| = 35$, $|7| = 7$, $35 \\div 7 = 5$.</li>'
+'<li>Определяем знак: знаки делимого и делителя <b>разные</b> ($-$ и $+$).</li>'
+'<li>Разные знаки при делении дают «минус».</li>'
+'<li>Ответ: $(-35) \\div 7 = -5$.</li>'
+'<li>Проверка: $(-5) \\cdot 7 = -35$ — верно!</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','8.3',
'<p>Деление на ноль — единственная «запрещённая» операция в математике. Если бы оно было определено, возникли бы противоречия: например, можно было бы «доказать», что $1 = 2$. Именно поэтому в программах, где встречается деление, обязательно проверяют, не равен ли делитель нулю.</p>');
h+='<div class="wg" id="p8-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Тренажёр деления</div></div>'
+'<div class="wg-help">Раздели рациональные числа (деление нацело).</div>'
+'<div class="score-display"><span>Пример <b id="p8-i">1</b> / 6</span><span>Очки: <b id="p8-s">0</b> / 6</span></div>'
+'<div id="p8-q" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p8-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p8-go">Проверить</button></div>'
+'<div class="feedback" id="p8-fb"></div></div>';
h+='<div class="wg" id="p8-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Какой знак результата?</div></div>'
+'<div class="wg-help">Определи знак частного, не вычисляя значение.</div>'
+'<div class="score-display"><span>Вопрос <b id="p8-zi">1</b> / 5</span><span>Очки: <b id="p8-zs">0</b> / 5</span></div>'
+'<div id="p8-zq" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-z="+">положительный</button><button class="btn primary" data-z="-">отрицательный</button></div>'
+'<div class="feedback" id="p8-zfb"></div></div>';
h+=secNav('p7','p9')+readBtn('p8');
box.innerHTML=h; renderMath(box);
(function(){
var i=0,score=0,cur=null;
function gen(){ var q=_nz(-9,9), b=_nz(-6,6); cur={a:q*b,b:b,q:q}; }
function show(){ if(i>=6){ document.getElementById('p8-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p8-iv1');bumpProgress('p8',30);}else if(score>=3){addXp(8,'p8-iv1');bumpProgress('p8',16);} return; }
gen(); document.getElementById('p8-i').textContent=i+1; document.getElementById('p8-q').innerHTML='Вычисли $'+_par(cur.a)+' \\div '+_par(cur.b)+'$'; renderMath(document.getElementById('p8-q'));
document.getElementById('p8-a').value=''; document.getElementById('p8-fb').style.display='none'; }
function go(){ if(i>=6)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.q){ score++; feedback(fb,true,'✓ Верно: '+cur.q+'.'); } else feedback(fb,false,'✗ Нет. $'+_par(cur.a)+'\\div'+_par(cur.b)+'='+cur.q+'$.');
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 a=_nz(-9,9), b=_nz(-9,9); cur={a:a,b:b,z:(a*b>0)?'+':'-'}; }
function show(){ if(i>=5){ document.getElementById('p8-zq').innerHTML='<b>Готово!</b> '+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-zi').textContent=i+1; document.getElementById('p8-zq').innerHTML='Какой знак у $'+_par(cur.a)+' \\div '+_par(cur.b)+'$?'; renderMath(document.getElementById('p8-zq'));
document.getElementById('p8-zfb').style.display='none'; }
function ans(z){ if(i>=5)return; var fb=document.getElementById('p8-zfb');
if(z===cur.z){ score++; feedback(fb,true,'✓ Верно — '+(cur.z==='+'?'положительный':'отрицательный')+'.'); } else feedback(fb,false,'✗ Нет. Знак '+(cur.z==='+'?'положительный':'отрицательный')+'.');
document.getElementById('p8-zs').textContent=score; i++; setTimeout(show,1200); }
document.querySelectorAll('#p8-iv2 [data-z]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-z')); }); }); show();
})();
}
/* ===================== § 9. ЗАДАЧИ НА ВСЕ ДЕЙСТВИЯ ===================== */
function buildP9(){
var box=document.getElementById('p9-body'); var h='';
h+=makeCard('oral','Где это в жизни','9.0',
'<p>В реальных задачах действия всегда смешаны: температуру сначала умножают (на несколько дней), потом прибавляют или вычитают. Финансовые расчёты, физические формулы, программные алгоритмы — всё требует правильного порядка действий со знаками.</p>');
h+=makeCard('rule','Порядок действий со знаками','9.1',
'<p>Сначала действия в <b>скобках</b>, затем <b>умножение и деление</b>, потом <b>сложение и вычитание</b>. Внимательно следи за знаками.</p>'
+'<p>$-3 + 4\\cdot(-2) = -3 + (-8) = -11$.</p>');
h+=makeCard('example','Разбор по шагам','9.2',
'<p>Вычисли $(-5 + 2) \\cdot 3$.</p>'
+'<ol><li>Сначала скобки: $-5 + 2 = -3$.</li>'
+'<li>Теперь умножение: $(-3) \\cdot 3$.</li>'
+'<li>Знаки разные ($-$ и $+$): результат отрицательный.</li>'
+'<li>Модули: $3 \\cdot 3 = 9$.</li>'
+'<li>Ответ: $(-5 + 2) \\cdot 3 = -9$.</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','9.3',
'<p>Приоритет операций (скобки, потом умножение/деление, потом сложение/вычитание) — международное соглашение. В разных странах его запоминают по аббревиатурам: в Беларуси и России говорят просто «порядок действий», в англоязычных странах используют BODMAS или PEMDAS. Правило одно — запись разная.</p>');
h+='<div class="wg" id="p9-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Вычисли выражение</div></div>'
+'<div class="wg-help">Соблюдай порядок действий и правила знаков.</div>'
+'<div class="score-display"><span>Пример <b id="p9-i">1</b> / 6</span><span>Очки: <b id="p9-s">0</b> / 6</span></div>'
+'<div id="p9-q" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p9-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p9-go">Проверить</button></div>'
+'<div class="feedback" id="p9-fb"></div></div>';
h+='<div class="wg" id="p9-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Что посчитать первым?</div></div>'
+'<div class="wg-help">Выбери действие, которое надо выполнить ПЕРВЫМ по порядку.</div>'
+'<div class="score-display"><span>Вопрос <b id="p9-oi">1</b> / 5</span><span>Очки: <b id="p9-os">0</b> / 5</span></div>'
+'<div id="p9-oq" class="qbox"></div>'
+'<div id="p9-oopts" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"></div>'
+'<div class="feedback" id="p9-ofb"></div></div>';
h+=secNav('p8','app')+readBtn('p9');
box.innerHTML=h; renderMath(box);
(function(){
var P=[['-3 + 4\\cdot(-2)',-11],['(-5+2)\\cdot 3',-9],['10 - 3\\cdot 4',-2],['-2\\cdot(-3) + 1',7],['(-8)\\div 2 - 1',-5],['-1 - (-6)',5],['5\\cdot(-2) + 12',2],['(-4)\\cdot 2 + (-3)',-11],['(-12)\\div(-4) - 5',-2],['6 + (-2)\\cdot 5',-4]];
var order=P.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
var i=0,score=0,cur=null;
function show(){ if(i>=6){ document.getElementById('p9-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(20,'p9-iv1');bumpProgress('p9',50);}else if(score>=3){addXp(10,'p9-iv1');bumpProgress('p9',26);} return; }
cur=P[order[i]]; document.getElementById('p9-i').textContent=i+1; document.getElementById('p9-q').innerHTML='Вычисли $'+cur[0]+'$'; 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=parseInt(document.getElementById('p9-a').value,10);
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
if(v===cur[1]){ score++; feedback(fb,true,'✓ Верно: '+cur[1]+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+cur[1]+'.');
document.getElementById('p9-s').textContent=score; i++; setTimeout(show,1300); }
document.getElementById('p9-go').addEventListener('click',go);
document.getElementById('p9-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
})();
(function(){
var OQ=[
{expr:'$3 + 4 \\cdot (-2)$', opts:['сложение $3+4$','умножение $4\\cdot(-2)$','вычитание $4-2$'], ans:1, expl:'Умножение выполняется до сложения.'},
{expr:'$(-5 + 2) \\cdot 3$', opts:['умножение $5\\cdot3$','скобки $-5+2$','умножение $2\\cdot3$'], ans:1, expl:'Сначала — действие в скобках.'},
{expr:'$10 - 3 \\cdot 4$', opts:['вычитание $10-3$','умножение $3\\cdot4$','сложение $3+4$'], ans:1, expl:'Умножение приоритетнее вычитания.'},
{expr:'$(-8) \\div 2 - 1$', opts:['вычитание $2-1$','деление $(-8)\\div2$','сложение $8+2$'], ans:1, expl:'Деление выполняется до вычитания.'},
{expr:'$6 + (-2) \\cdot 5$', opts:['сложение $6+(-2)$','умножение $(-2)\\cdot5$','деление $6\\div2$'], ans:1, expl:'Умножение раньше сложения.'}
];
var order=OQ.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
var i=0,score=0,cur=null;
function show(){ if(i>=5){ document.getElementById('p9-oq').innerHTML='<b>Готово!</b> '+score+' / 5'; document.getElementById('p9-oopts').innerHTML=''; if(score>=4){addXp(15,'p9-iv2');bumpProgress('p9',30);}else if(score>=2){addXp(8,'p9-iv2');bumpProgress('p9',16);} return; }
cur=OQ[order[i]]; document.getElementById('p9-oi').textContent=i+1;
document.getElementById('p9-oq').innerHTML='Что выполнить ПЕРВЫМ в выражении '+cur.expr+'?'; renderMath(document.getElementById('p9-oq'));
document.getElementById('p9-oopts').innerHTML=cur.opts.map(function(o,idx){ return '<button class="btn primary" data-idx="'+idx+'">'+o+'</button>'; }).join('');
document.querySelectorAll('#p9-oopts [data-idx]').forEach(function(b){ b.addEventListener('click',function(){ ansOQ(+b.getAttribute('data-idx')); }); }); renderMath(document.getElementById('p9-oopts'));
document.getElementById('p9-ofb').style.display='none'; }
function ansOQ(idx){ if(i>=5)return; var fb=document.getElementById('p9-ofb');
if(idx===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.expl); } else feedback(fb,false,'✗ Нет. '+cur.expl);
document.getElementById('p9-os').textContent=score; i++; setTimeout(show,1400); }
show();
})();
}
/* ===================== § 11. МАТЕМАТИКА ВОКРУГ НАС ===================== */
function buildApp(){
var box=document.getElementById('app-body'); var h='';
h+=makeCard('oral','Где это в жизни','11.0',
'<p>Отрицательные числа — это не абстракция: они буквально повсюду. Зимой без них не обойтись (температура), в банке (баланс счёта), в навигации (высота и глубина), в спорте (разница очков), в лифте (подвальные этажи). Математика помогает описать реальный мир во всей его сложности.</p>');
h+=makeCard('theory','Отрицательные числа вокруг нас','11.1',
'<p>Температура ниже нуля, долги и доходы, высота над уровнем моря и глубина, координаты в играх и на карте — всюду нужны отрицательные числа.</p>');
h+=makeCard('example','Разбор по шагам','11.2',
'<p>Задача: утром было $-7$°C, днём потеплело на $12$°C. Какая температура стала?</p>'
+'<ol><li>«Потеплело» — значит прибавляем: $-7 + 12$.</li>'
+'<li>Знаки разные. Модули: $7$ и $12$. Разность: $12 - 7 = 5$.</li>'
+'<li>Знак от числа с большим модулем: $12 > 7$, знак «плюс».</li>'
+'<li>Ответ: $-7 + 12 = +5$, то есть $5$°C.</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','11.3',
'<p>Самая низкая температура, когда-либо зафиксированная на Земле, — $-89{,}2$°C на станции «Восток» в Антарктиде (1983 год). Самая высокая — $+56{,}7$°C в Долине Смерти (США). Разница: $56{,}7 - (-89{,}2) = 145{,}9$°C. Вот зачем нужны отрицательные числа!</p>');
h+='<div class="wg" id="app-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Задачи из жизни</div></div>'
+'<div class="wg-help">Реши практическую задачу. Ответ — целое число (можно со знаком −).</div>'
+'<div class="score-display"><span>Задача <b id="app-i">1</b> / 6</span><span>Очки: <b id="app-s">0</b> / 6</span></div>'
+'<div id="app-q" class="qbox" style="font-size:1rem;text-align:left"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="app-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="app-go">Проверить</button></div>'
+'<div class="feedback" id="app-fb"></div></div>';
h+='<div class="wg" id="app-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Что означает знак?</div></div>'
+'<div class="wg-help">Определи, что описывает это число в реальной ситуации.</div>'
+'<div class="score-display"><span>Вопрос <b id="app-si">1</b> / 5</span><span>Очки: <b id="app-ss">0</b> / 5</span></div>'
+'<div id="app-sq" class="qbox" style="font-size:1rem;text-align:left"></div>'
+'<div id="app-sopts" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"></div>'
+'<div class="feedback" id="app-sfb"></div></div>';
h+=secNav('p9','final')+readBtn('app');
box.innerHTML=h; renderMath(box);
(function(){
var P=[
{q:'Утром было −5°, днём потеплело на 8°. Какая температура стала (°C)?',a:3},
{q:'Температура −3° понизилась ещё на 6°. Сколько стало (°C)?',a:-9},
{q:'На счёте было 200 руб., сняли долг 250 руб. Сколько на счёте (руб.)?',a:-50},
{q:'Подводная лодка на глубине −80 м поднялась на 30 м. На какой глубине теперь (м)?',a:-50},
{q:'Игрок имел −15 очков и заработал 40. Сколько очков стало?',a:25},
{q:'Температура поднялась с −7° до 5°. На сколько градусов потеплело?',a:12},
{q:'Лифт с −2 этажа поднялся на 7 этажей. На каком этаже он теперь?',a:5}
];
var order=P.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
var i=0,score=0,cur=null;
function show(){ if(i>=6){ document.getElementById('app-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'app-iv1');bumpProgress('app',35);}else if(score>=3){addXp(8,'app-iv1');bumpProgress('app',18);} return; }
cur=P[order[i]]; document.getElementById('app-i').textContent=i+1; document.getElementById('app-q').innerHTML=cur.q;
document.getElementById('app-a').value=''; document.getElementById('app-fb').style.display='none'; }
function go(){ if(i>=6)return; var fb=document.getElementById('app-fb'), v=parseInt(document.getElementById('app-a').value,10);
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
if(v===cur.a){ score++; feedback(fb,true,'✓ Верно: '+cur.a+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+cur.a+'.');
document.getElementById('app-s').textContent=score; i++; setTimeout(show,1300); }
document.getElementById('app-go').addEventListener('click',go);
document.getElementById('app-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
})();
(function(){
var SQ=[
{q:'Термометр показывает $-15$. Что это означает?', opts:['15 градусов тепла','15 градусов мороза','15 метров глубины'], ans:1},
{q:'На банковском счёте $-300$ рублей. Что это означает?', opts:['остаток 300 рублей','долг 300 рублей','доход 300 рублей'], ans:1},
{q:'Высота дна озера $-8$ метров. Что это означает?', opts:['8 метров над уровнем воды','8 метров ниже уровня воды','8 метров над уровнем моря'], ans:1},
{q:'В игре у игрока $-20$ очков. Что произошло?', opts:['игрок заработал 20 очков','игрок потерял 20 очков','игрок остановился на 20 очков'], ans:1},
{q:'Лифт на этаже $-1$. Где он находится?', opts:['на первом этаже','на первом подземном этаже','между первым и вторым этажом'], ans:1}
];
var order=SQ.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
var i=0,score=0,cur=null;
function show(){ if(i>=5){ document.getElementById('app-sq').innerHTML='<b>Готово!</b> '+score+' / 5'; document.getElementById('app-sopts').innerHTML=''; if(score>=4){addXp(15,'app-iv2');bumpProgress('app',35);}else if(score>=2){addXp(8,'app-iv2');bumpProgress('app',18);} return; }
cur=SQ[order[i]]; document.getElementById('app-si').textContent=i+1;
document.getElementById('app-sq').innerHTML=cur.q; renderMath(document.getElementById('app-sq'));
document.getElementById('app-sopts').innerHTML=cur.opts.map(function(o,idx){ return '<button class="btn primary" data-idx="'+idx+'">'+o+'</button>'; }).join('');
document.querySelectorAll('#app-iv2 [data-idx]').forEach(function(b){ b.addEventListener('click',function(){ ansS(+b.getAttribute('data-idx')); }); });
document.getElementById('app-sfb').style.display='none'; }
function ansS(idx){ if(i>=5)return; var fb=document.getElementById('app-sfb');
if(idx===cur.ans){ score++; feedback(fb,true,'✓ Верно!'); } else feedback(fb,false,'✗ Нет. Правильный ответ: «'+cur.opts[cur.ans]+'».');
document.getElementById('app-ss').textContent=score; i++; setTimeout(show,1300); }
show();
})();
}
/* ===================== ФИНАЛ ГЛАВЫ — БОССЫ ===================== */
function buildFinal(){
var box=document.getElementById('final-body'); var h='';
h+=makeCard('theory','Финал главы 4','★','<p>Шесть боссов проверят модуль, сравнение и все действия с рациональными числами. Победи всех!</p>');
h+='<div class="wg" id="fin"><div class="wg-header"><span class="wg-badge">Боссы</span><div class="wg-title">Сразись с главой 4</div></div>'
+'<div class="hp-boss"><div class="hp-boss-fill" id="fin-hp" style="width:100%"></div></div>'
+'<div class="score-display"><span>Босс <b id="fin-i">1</b> / 6</span><span>Побеждено: <b id="fin-s">0</b> / 6</span></div>'
+'<div id="fin-name" style="font-weight:800;color:#b91c1c;text-align:center;margin-bottom:6px"></div>'
+'<div id="fin-q" class="boss-q"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="fin-a" class="tinp" style="width:120px;text-align:center" placeholder="ответ"><button class="btn primary" id="fin-go">Удар!</button></div>'
+'<div class="feedback" id="fin-fb"></div></div>';
h+=secNav('app',null)+readBtn('final','Завершить главу 4 (+10 XP)');
box.innerHTML=h; renderMath(box);
(function(){
var bosses=[
function(){ var v=_nz(-15,15); return {name:'Модуль', q:'Вычисли $|'+v+'|$.', ans:Math.abs(v)}; },
function(){ var a=_nz(-12,12),b=_nz(-12,12); return {name:'Сумматор', q:'Вычисли $'+a+' + '+_par(b)+'$.', ans:a+b}; },
function(){ var a=_ri(-10,10),b=_nz(-10,10); return {name:'Вычитатель', q:'Вычисли $'+a+' - '+_par(b)+'$.', ans:a-b}; },
function(){ var a=_nz(-9,9),b=_nz(-9,9); return {name:'Множитель', q:'Вычисли $'+_par(a)+' \\cdot '+_par(b)+'$.', ans:a*b}; },
function(){ var q=_nz(-9,9),b=_nz(-6,6); return {name:'Делитель', q:'Вычисли $'+_par(q*b)+' \\div '+_par(b)+'$.', ans:q}; },
function(){ var e=_pick([['-3 + 4\\cdot(-2)',-11],['(-5+2)\\cdot 3',-9],['-2\\cdot(-3)+1',7],['(-12)\\div(-4)-5',-2]]); return {name:'Порядок Действий', q:'Вычисли $'+e[0]+'$.', ans:e[1]}; }
];
var i=0,score=0,cur=null,done=false,N=6;
function show(){ if(i>=N){ done=true; document.getElementById('fin-name').textContent=''; document.getElementById('fin-q').innerHTML=(score>=5?'<b>Победа!</b> Глава 4 пройдена. ':'<b>Бой окончен.</b> ')+'Побеждено боссов: '+score+' / '+N+'.'; document.getElementById('fin-hp').style.width=(score>=5?0:40)+'%';
if(score>=5){ 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*100/N)+'%';
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>=N)return; var fb=document.getElementById('fin-fb'), v=parseInt(document.getElementById('fin-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('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();
})();
}
/* ===================== ДАННЫЕ ===================== */
var SIDEBARS = {
p1:{ title:'Шпаргалка § 1', rows:[ ['Положительные','справа от 0'], ['Отрицательные','слева от 0'], ['Ноль','ни +, ни −'], ['Координата','число точки на прямой'] ]},
p2:{ title:'Шпаргалка § 2', rows:[ ['Модуль $|a|$','расстояние до 0, $\\ge0$'], ['$|{-7}|$','$=7$'], ['Противоположные','$a$ и $-a$, сумма $0$'], ['$\\mathbb{N}\\subset\\mathbb{Z}\\subset\\mathbb{Q}$','натур. ⊂ целые ⊂ рацион.'] ]},
p3:{ title:'Шпаргалка § 3', rows:[ ['Больше','то, что правее'], ['$+ > -$','любое полож. > любого отриц.'], ['Два отрицат.','больше с меньшим модулем'], ['$-2 > -5$','ближе к нулю'] ]},
p4:{ title:'Шпаргалка § 4', rows:[ ['Одинаковые знаки','складываем модули, знак тот же'], ['Разные знаки','модули вычитаем, знак большего'], ['$a+(-a)$','$=0$'] ]},
p5:{ title:'Шпаргалка § 5', rows:[ ['Вычитание','$a-b=a+(-b)$'], ['$5-8$','$=5+(-8)=-3$'], ['$2-(-6)$','$=2+6=8$'] ]},
p6:{ title:'Шпаргалка § 6', rows:[ ['Переместительный','$a+b=b+a$'], ['Сочетательный','$(a+b)+c=a+(b+c)$'], ['Удобно','группируем противоположные'] ]},
p7:{ title:'Шпаргалка § 7', rows:[ ['$(-)\\cdot(-)$','$=+$'], ['$(+)\\cdot(-)$','$=-$'], ['Модули','перемножаем'], ['$\\cdot 0$','$=0$'] ]},
p8:{ title:'Шпаргалка § 8', rows:[ ['Знаки','как при умножении'], ['$(-)\\div(-)$','$=+$'], ['$(+)\\div(-)$','$=-$'], ['На 0','делить нельзя'] ]},
p9:{ title:'Шпаргалка § 9', rows:[ ['Порядок','скобки → ×÷ → +−'], ['Знаки','следим внимательно'], ['$-3+4\\cdot(-2)$','$=-11$'] ]},
app:{ title:'Шпаргалка § 11', rows:[ ['Потеплело','прибавляем'], ['Похолодало','вычитаем'], ['Долг','отрицательное число'], ['Глубина','со знаком −'] ]},
final:{ title:'Финал главы 4', rows:[ ['6 боссов','модуль, сравнение, все действия'], ['Победа','5 из 6 и больше'], ['Награда','+40 XP и достижение «Глава 4 пройдена»'] ]}
};
var TIPS = [
{ sec:'p1', html:'Отрицательные числа левее нуля. Чем левее число, тем оно меньше: $-6$ меньше, чем $-1$.' },
{ sec:'p2', html:'Модуль «снимает» знак: $|{-7}|=7$. Противоположное — меняет знак: для $-7$ это $7$.' },
{ sec:'p3', html:'На прямой больше то, что правее. Из двух отрицательных больше то, что ближе к нулю (меньше по модулю).' },
{ sec:'p4', html:'Сначала реши: знаки одинаковые (складываем модули) или разные (вычитаем меньший модуль из большего, знак — от большего).' },
{ sec:'p5', html:'Любое вычитание превращай в сложение: $a-b=a+(-b)$. Дальше работают правила сложения.' },
{ sec:'p6', html:'Ищи пары противоположных чисел ($-7$ и $7$) — их сумма ноль; складывай их первыми, остальное проще.' },
{ sec:'p7', html:'Сначала перемножь модули, потом поставь знак: одинаковые знаки — плюс, разные — минус. «Минус на минус — плюс».' },
{ sec:'p8', html:'Деление по тем же правилам знаков, что умножение. Сначала найди знак, потом раздели модули.' },
{ sec:'p9', html:'Порядок: скобки, потом умножение/деление, потом сложение/вычитание. Каждый шаг следи за знаком.' }
];
var GLOSSARY = [
{ term:'отрицательное число', def:'Число меньше нуля, со знаком минус ($-3$).', sec:'p1', aliases:['отрицательное число','отрицательные числа','отрицательных чисел','отрицательным'] },
{ term:'координатная прямая', def:'Прямая с началом, направлением и единичным отрезком.', sec:'p1', aliases:['координатная прямая','координатной прямой','координатную прямую'] },
{ term:'модуль', def:'Расстояние от числа до нуля, $|a|\\ge0$.', sec:'p2', aliases:['модуль','модуля','модуле','модулем','модулю'] },
{ term:'противоположные числа', def:'Числа, отличающиеся только знаком ($a$ и $-a$); их сумма ноль.', sec:'p2', aliases:['противоположные числа','противоположное число','противоположных чисел','противоположное'] },
{ term:'целые числа', def:'Натуральные, противоположные им и ноль: $\\mathbb{Z}$.', sec:'p2', aliases:['целые числа','целых чисел','целое число'] },
{ term:'рациональные числа', def:'Числа, представимые дробью $\\frac{m}{n}$ (включая отрицательные): $\\mathbb{Q}$.', sec:'p2', aliases:['рациональные числа','рациональных чисел','рациональное число'] }
];
var BUILDERS = { p1:buildP1, p2:buildP2, p3:buildP3, p4:buildP4, p5:buildP5, p6:buildP6, p7:buildP7, p8:buildP8, p9:buildP9, app:buildApp, final:buildFinal };
Object.assign(window.M6, { sidebars:SIDEBARS, tips:TIPS, glossary:GLOSSARY, builders:BUILDERS });
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink