Maxim Dolgolyov
555f701b57
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>
550 lines
56 KiB
HTML
550 lines
56 KiB
HTML
<!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 · Глава 5 · Координатная плоскость</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:#059669;--pri2:#047857;--pri-soft:#d1fae5;--acc:#10b981;--acc2:#059669;--acc-soft:#ecfdf5}</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hdr" data-wm="xy">
|
||
<div class="hdr-row">
|
||
<div>
|
||
<h1>Математика 6 · Глава 5</h1>
|
||
<div class="hdr-sub">Декартова система координат · графики реальных процессов · графики зависимостей</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="xy">
|
||
<h2>Координатная плоскость</h2>
|
||
<p>Две пересекающиеся под прямым углом числовые прямые превращают плоскость в карту, где у каждой точки есть свой «адрес» — пара координат $(x;\,y)$. Мы научимся <b>ставить и читать точки</b>, понимать <b>графики реальных процессов</b> (движение, температура) и строить <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» · Глава 5 · Координатная плоскость · 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>↑↓</kbd> навигация</span><span><kbd>Enter</kbd> открыть</span><span><kbd>Esc</kbd> закрыть</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
'use strict';
|
||
window.M6 = {
|
||
slug: 'math-6-ch5', lsPrefix: 'math6_ch5', xpKey: 'math6_xp', wm: 'xy',
|
||
paras: [
|
||
{ id:'p1', num:'§ 1', name:'Прямоугольная (декартова) система координат', sub:'Точка (x; y) и четверти' },
|
||
{ id:'p2', num:'§ 2', name:'График. Графики реальных процессов', sub:'Чтение графиков' },
|
||
{ id:'p3', num:'§ 3', name:'Графики прямой и обратной пропорциональности', sub:'y = kx и y = k/x' },
|
||
{ id:'app', num:'§ 5', name:'Математика вокруг нас', sub:'Графики в жизни', applied:true },
|
||
{ id:'final', num:'★', name:'Финал главы', sub:'Тест · боссы главы 5', final:true }
|
||
],
|
||
achLabels: {
|
||
start:'Начало главы 5!', p1_done:'Координаты точек освоены!', p2_done:'Читаю графики процессов!',
|
||
p3_done:'Графики зависимостей — мастер!', app_done:'Математика вокруг нас!', ch5_done:'Глава 5 пройдена!'
|
||
},
|
||
startAch: ['start','Начало главы 5!'],
|
||
finalAch: ['ch5_done','Глава 5 пройдена!'],
|
||
sidebars: {}, tips: [], glossary: [], builders: {},
|
||
footer: 'Интерактивный учебник «Математика 6» · Глава 5 · Координатная плоскость · 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('.','{,}'); }
|
||
var ROM=['','I','II','III','IV'];
|
||
|
||
/* ===================== § 1. ДЕКАРТОВА СИСТЕМА КООРДИНАТ ===================== */
|
||
function buildP1(){
|
||
var box=document.getElementById('p1-body'); var h='';
|
||
h+=makeCard('oral','Где это в жизни','1.0',
|
||
'<p>Каждый раз, когда ты открываешь карту в телефоне или играешь в стратегию на компьютере, работает именно эта идея: у каждого места есть пара чисел — «сколько вправо» и «сколько вверх». Координаты используют GPS-навигаторы, пилоты самолётов, геологи, разработчики видеоигр и даже хирурги при операциях с точным позиционированием робота.</p>');
|
||
h+=makeCard('theory','Координаты на плоскости','1.1',
|
||
'<p>Две перпендикулярные координатные прямые с общим началом $O$ образуют <b>прямоугольную (декартову) систему координат</b>. Горизонтальная ось — ось <b>абсцисс</b> $Ox$, вертикальная — ось <b>ординат</b> $Oy$.</p>'
|
||
+'<p>Положение точки задаёт <b>пара чисел</b> $(x;\\,y)$: первое — абсцисса (по $Ox$), второе — ордината (по $Oy$). Например, $A(3;\\,4)$.</p>');
|
||
h+=makeCard('example','Разбор по шагам','1.2',
|
||
'<p>Как отметить точку $A(3;\\,4)$ на координатной плоскости?</p>'
|
||
+'<ol><li>Найди на оси $Ox$ значение $x = 3$ и проведи мысленно вертикальную линию.</li>'
|
||
+'<li>Найди на оси $Oy$ значение $y = 4$ и проведи мысленно горизонтальную линию.</li>'
|
||
+'<li>Точка пересечения этих двух линий и есть $A(3;\\,4)$.</li>'
|
||
+'<li>Проверь четверть: $x > 0$, $y > 0$ — значит, точка в I четверти. Верно!</li></ol>');
|
||
h+=makeCard('rule','Четверти','1.3',
|
||
'<p>Оси делят плоскость на четыре <b>четверти</b> (нумеруют против часовой стрелки от правой верхней):</p>'
|
||
+'<table class="tbl"><tr><th>Четверть</th><th>I</th><th>II</th><th>III</th><th>IV</th></tr>'
|
||
+'<tr><td>знак $x$</td><td>+</td><td>−</td><td>−</td><td>+</td></tr>'
|
||
+'<tr><td>знак $y$</td><td>+</td><td>+</td><td>−</td><td>−</td></tr></table>');
|
||
h+=makeCard('theory','А знаешь ли ты?','1.4',
|
||
'<p>Систему координат изобрёл французский математик и философ <b>Рене Декарт</b> в XVII веке. По легенде, идея пришла к нему, когда он лежал в постели и наблюдал за мухой на потолке: он понял, что положение мухи можно точно описать двумя числами — расстоянием до двух стен. Так родилась «декартова» система, которую сегодня используют в любом учебнике математики и любой компьютерной программе.</p>');
|
||
h+='<div class="wg" id="p1-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прочитай координаты</div></div>'
|
||
+'<div class="wg-help">Определи координаты отмеченной точки и введи абсциссу и ординату.</div>'
|
||
+'<div class="score-display"><span>Точка <b id="p1-i">1</b> / 6</span><span>Очки: <b id="p1-s">0</b> / 6</span></div>'
|
||
+'<div id="p1-fig"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$x=$ <input type="number" id="p1-x" class="tinp" style="width:70px;text-align:center"> $y=$ <input type="number" id="p1-y" class="tinp" style="width:70px;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-qi">1</b> / 6</span><span>Очки: <b id="p1-qs">0</b> / 6</span></div>'
|
||
+'<div id="p1-qfig"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-q="1">I</button><button class="btn primary" data-q="2">II</button><button class="btn primary" data-q="3">III</button><button class="btn primary" data-q="4">IV</button></div>'
|
||
+'<div class="feedback" id="p1-qfb"></div></div>';
|
||
h+='<div class="wg" id="p1-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Угадай, в какой четверти?</div></div>'
|
||
+'<div class="wg-help">Тебе даны знаки координат — определи номер четверти без графика.</div>'
|
||
+'<div class="score-display"><span>Вопрос <b id="p1-ti">1</b> / 6</span><span>Очки: <b id="p1-ts">0</b> / 6</span></div>'
|
||
+'<div id="p1-tq" class="qbox" style="font-size:1.1rem;text-align:center;padding:14px 0"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-tq="1">I</button><button class="btn primary" data-tq="2">II</button><button class="btn primary" data-tq="3">III</button><button class="btn primary" data-tq="4">IV</button></div>'
|
||
+'<div class="feedback" id="p1-tfb"></div></div>';
|
||
h+='<div class="wg" id="p1-game-wg"><div class="wg-header"><span class="wg-badge">Игра</span><div class="wg-title">Координатный тир: поставь точку</div></div>'
|
||
+'<div class="wg-help">Тебе называют координаты — кликни по нужному узлу сетки. Попал — очко и новая цель; промахнулся — покажу, где была точка.</div>'
|
||
+'<div id="p1-game"></div></div>';
|
||
h+=secNav(null,'p2')+readBtn('p1');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){ if(window.Math6Anim) Math6Anim.coordGame(document.getElementById('p1-game'),{}); })();
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ cur={x:_ri(-5,5), y:_ri(-5,5)}; }
|
||
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; }
|
||
gen(); document.getElementById('p1-i').textContent=i+1;
|
||
document.getElementById('p1-fig').innerHTML=Math6.plane({size:320,quadrants:true,points:[{x:cur.x,y:cur.y,label:'A',color:'#059669'}]});
|
||
document.getElementById('p1-x').value=''; document.getElementById('p1-y').value=''; document.getElementById('p1-fb').style.display='none'; }
|
||
function go(){ if(i>=6)return; var fb=document.getElementById('p1-fb'), x=parseInt(document.getElementById('p1-x').value,10), y=parseInt(document.getElementById('p1-y').value,10);
|
||
if(isNaN(x)||isNaN(y)){ feedback(fb,false,'Введи оба числа.'); return; }
|
||
if(x===cur.x&&y===cur.y){ score++; feedback(fb,true,'✓ Верно: $A('+cur.x+';\\,'+cur.y+')$.'); } else feedback(fb,false,'✗ Нет. Правильно: $A('+cur.x+';\\,'+cur.y+')$.');
|
||
document.getElementById('p1-s').textContent=score; i++; setTimeout(show,1200); }
|
||
document.getElementById('p1-go').addEventListener('click',go);
|
||
document.getElementById('p1-y').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||
})();
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function quad(p){ return p.x>0?(p.y>0?1:4):(p.y>0?2:3); }
|
||
function gen(){ var x=_pick([-5,-4,-3,-2,-1,1,2,3,4,5]), y=_pick([-5,-4,-3,-2,-1,1,2,3,4,5]); cur={x:x,y:y,q:quad({x:x,y:y})}; }
|
||
function show(){ if(i>=6){ document.getElementById('p1-qfig').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-qi').textContent=i+1;
|
||
document.getElementById('p1-qfig').innerHTML=Math6.plane({size:320,quadrants:true,points:[{x:cur.x,y:cur.y,label:'B',color:'#e11d48'}]});
|
||
document.getElementById('p1-qfb').style.display='none'; }
|
||
function ans(q){ if(i>=6)return; var fb=document.getElementById('p1-qfb');
|
||
if(q===cur.q){ score++; feedback(fb,true,'✓ Верно — '+ROM[cur.q]+' четверть.'); } else feedback(fb,false,'✗ Нет. Точка $('+cur.x+';\\,'+cur.y+')$ — '+ROM[cur.q]+' четверть.');
|
||
document.getElementById('p1-qs').textContent=score; i++; setTimeout(show,1200); }
|
||
document.querySelectorAll('#p1-iv2 [data-q]').forEach(function(b){ b.addEventListener('click',function(){ ans(+b.getAttribute('data-q')); }); }); show();
|
||
})();
|
||
|
||
(function(){
|
||
var COMB=[{sx:'+',sy:'+',q:1},{sx:'-',sy:'+',q:2},{sx:'-',sy:'-',q:3},{sx:'+',sy:'-',q:4}];
|
||
var i=0,score=0,cur=null;
|
||
function show(){ if(i>=6){ document.getElementById('p1-tq').innerHTML='<b>Готово!</b> Результат: '+score+' / 6'; if(score>=5){addXp(15,'p1-iv3');bumpProgress('p1',20);}else if(score>=3){addXp(7,'p1-iv3');bumpProgress('p1',10);} return; }
|
||
cur=_pick(COMB); document.getElementById('p1-ti').textContent=i+1;
|
||
document.getElementById('p1-tq').innerHTML='Точка: $x '+cur.sx+'$, $y '+cur.sy+'$. Четверть?';
|
||
renderMath(document.getElementById('p1-tq'));
|
||
document.getElementById('p1-tfb').style.display='none'; }
|
||
function ans(q){ if(i>=6)return; var fb=document.getElementById('p1-tfb');
|
||
if(q===cur.q){ score++; feedback(fb,true,'✓ Верно — '+ROM[cur.q]+' четверть.'); } else feedback(fb,false,'✗ Нет. '+ROM[cur.q]+' четверть (x'+cur.sx+', y'+cur.sy+').');
|
||
document.getElementById('p1-ts').textContent=score; i++; setTimeout(show,1200); }
|
||
document.querySelectorAll('#p1-iv3 [data-tq]').forEach(function(b){ b.addEventListener('click',function(){ ans(+b.getAttribute('data-tq')); }); }); show();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 2. ГРАФИКИ РЕАЛЬНЫХ ПРОЦЕССОВ ===================== */
|
||
function buildP2(){
|
||
var box=document.getElementById('p2-body'); var h='';
|
||
h+=makeCard('oral','Где это в жизни','2.0',
|
||
'<p>Каждый день ты видишь графики: прогноз погоды (температура по часам), курс доллара (цена по дням), пульс на спортивных часах (удары по минутам). Врачи читают кардиограмму — это тоже график. Умея читать любой график, ты понимаешь реальный процесс без длинных таблиц чисел.</p>');
|
||
h+=makeCard('theory','Что показывает график','2.1',
|
||
'<p><b>График</b> наглядно показывает, как одна величина зависит от другой: температура от времени, путь от времени, уровень воды от времени.</p>'
|
||
+'<p>Чтобы прочитать значение, находят точку на горизонтальной оси, поднимаются до линии графика и смотрят значение на вертикальной оси.</p>');
|
||
h+=makeCard('example','Разбор по шагам','2.2',
|
||
'<p>Как прочитать температуру в 3 ч по графику?</p>'
|
||
+'<ol><li>Найди на горизонтальной оси (время) отметку $3$ ч.</li>'
|
||
+'<li>Из этой точки проведи мысленно вертикальную линию вверх до кривой графика.</li>'
|
||
+'<li>Из точки пересечения проведи горизонтальную линию влево до оси температур.</li>'
|
||
+'<li>Прочитай значение на вертикальной оси: $6°C$.</li>'
|
||
+'<li>Вывод: в 3 ч было $6°C$.</li></ol>');
|
||
h+=makeCard('theory','А знаешь ли ты?','2.3',
|
||
'<p>Первые графики температур и давления начали строить метеорологи в XVIII веке. Уже тогда учёные поняли: одна кривая на графике заменяет целую страницу цифр и сразу показывает тренд — растёт, падает или стоит на месте. Сегодня биржевые трейдеры принимают решения за секунды именно благодаря умению мгновенно «читать» линию на графике.</p>');
|
||
h+='<div class="wg" id="p2-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прочитай значение по графику</div></div>'
|
||
+'<div class="wg-help">Температура (°C) в зависимости от времени (ч). Ответь на вопрос по графику.</div>'
|
||
+'<div class="score-display"><span>Вопрос <b id="p2-i">1</b> / 5</span><span>Очки: <b id="p2-s">0</b> / 5</span></div>'
|
||
+'<div id="p2-fig"></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-ci">1</b> / 5</span><span>Очки: <b id="p2-cs">0</b> / 5</span></div>'
|
||
+'<div id="p2-cfig"></div><div id="p2-cq" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p2-ca" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p2-cgo">Проверить</button></div>'
|
||
+'<div class="feedback" id="p2-cfb"></div></div>';
|
||
h+='<div class="wg" id="p2-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Рост, спад или стоп?</div></div>'
|
||
+'<div class="wg-help">На каком участке линия графика растёт, падает или остаётся горизонтальной?</div>'
|
||
+'<div class="score-display"><span>Вопрос <b id="p2-di">1</b> / 5</span><span>Очки: <b id="p2-ds">0</b> / 5</span></div>'
|
||
+'<div id="p2-dq" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-dv="up">Растёт</button><button class="btn primary" data-dv="flat">Стоит</button><button class="btn primary" data-dv="down">Падает</button></div>'
|
||
+'<div class="feedback" id="p2-dfb"></div></div>';
|
||
h+='<div class="wg" id="p2-anim"><div class="wg-header"><span class="wg-badge">Анимация</span><div class="wg-title">Машинка едет — график рисуется сам</div></div>'
|
||
+'<div class="wg-help">Смотри, как движение машины по дороге превращается в линию на графике «путь–время». Горизонтальный участок — машина стоит.</div>'
|
||
+'<div id="p2-car"></div></div>';
|
||
h+=secNav('p1','p3')+readBtn('p2');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){ if(window.Math6Anim) Math6Anim.carGraph(document.getElementById('p2-car'),{}); })();
|
||
|
||
var G=[{x:0,y:2},{x:1,y:4},{x:2,y:4},{x:3,y:6},{x:4,y:5},{x:5,y:5},{x:6,y:3}];
|
||
function gy(x){ for(var k=0;k<G.length;k++) if(G[k].x===x) return G[k].y; return null; }
|
||
function fig(){ return Math6.plane({xmin:0,xmax:7,ymin:0,ymax:7,size:340,polyline:G,polylineColor:'#059669',polylineDots:true}); }
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=0;
|
||
function show(){ if(i>=5){ document.getElementById('p2-fig').innerHTML=''; document.getElementById('p2-q').innerHTML='<b>Готово!</b> Результат: '+score+' / 5'; if(score>=4){addXp(15,'p2-iv1');bumpProgress('p2',30);}else if(score>=2){addXp(8,'p2-iv1');bumpProgress('p2',16);} return; }
|
||
cur=_ri(0,6); document.getElementById('p2-i').textContent=i+1;
|
||
document.getElementById('p2-fig').innerHTML=fig();
|
||
document.getElementById('p2-q').innerHTML='Какая температура была в <b>'+cur+' ч</b>?';
|
||
document.getElementById('p2-a').value=''; document.getElementById('p2-fb').style.display='none'; }
|
||
function go(){ if(i>=5)return; var fb=document.getElementById('p2-fb'), v=parseInt(document.getElementById('p2-a').value,10);
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(v===gy(cur)){ score++; feedback(fb,true,'✓ Верно: '+gy(cur)+'°.'); } else feedback(fb,false,'✗ Нет. В '+cur+' ч было '+gy(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=null;
|
||
function gen(){ var a=_ri(0,4), b=_ri(a+1,6); cur={a:a,b:b,d:gy(b)-gy(a)}; }
|
||
function show(){ if(i>=5){ document.getElementById('p2-cfig').innerHTML=''; document.getElementById('p2-cq').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; }
|
||
gen(); document.getElementById('p2-ci').textContent=i+1;
|
||
document.getElementById('p2-cfig').innerHTML=fig();
|
||
document.getElementById('p2-cq').innerHTML='На сколько изменилась температура с <b>'+cur.a+' ч</b> до <b>'+cur.b+' ч</b>?';
|
||
document.getElementById('p2-ca').value=''; document.getElementById('p2-cfb').style.display='none'; }
|
||
function go(){ if(i>=5)return; var fb=document.getElementById('p2-cfb'), v=parseInt(document.getElementById('p2-ca').value,10);
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число (можно со знаком −).'); return; }
|
||
if(v===cur.d){ score++; feedback(fb,true,'✓ Верно: '+(cur.d>0?'+':'')+cur.d+'°.'); } else feedback(fb,false,'✗ Нет. Изменение: '+(cur.d>0?'+':'')+cur.d+'° ('+gy(cur.b)+' − '+gy(cur.a)+').');
|
||
document.getElementById('p2-cs').textContent=score; i++; setTimeout(show,1300); }
|
||
document.getElementById('p2-cgo').addEventListener('click',go);
|
||
document.getElementById('p2-ca').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||
})();
|
||
|
||
(function(){
|
||
var SEGS=[
|
||
{q:'Температура с 0 ч до 1 ч: как меняется?', ans:'up'},
|
||
{q:'Температура с 1 ч до 2 ч: как меняется?', ans:'flat'},
|
||
{q:'Температура с 2 ч до 3 ч: как меняется?', ans:'up'},
|
||
{q:'Температура с 3 ч до 4 ч: как меняется?', ans:'down'},
|
||
{q:'Температура с 4 ч до 5 ч: как меняется?', ans:'flat'},
|
||
{q:'Температура с 5 ч до 6 ч: как меняется?', ans:'down'}
|
||
];
|
||
var i=0,score=0;
|
||
function show(){ if(i>=5){ document.getElementById('p2-dq').innerHTML='<b>Готово!</b> Результат: '+score+' / 5'; if(score>=4){addXp(12,'p2-iv3');bumpProgress('p2',25);}else if(score>=2){addXp(6,'p2-iv3');bumpProgress('p2',12);} return; }
|
||
document.getElementById('p2-di').textContent=i+1;
|
||
document.getElementById('p2-dq').innerHTML=SEGS[i].q;
|
||
document.getElementById('p2-dfb').style.display='none'; }
|
||
function ans(v){ if(i>=5)return; var fb=document.getElementById('p2-dfb'), cor=SEGS[i].ans;
|
||
var labels={up:'Растёт',flat:'Стоит',down:'Падает'};
|
||
if(v===cor){ score++; feedback(fb,true,'✓ Верно: '+labels[cor]+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+labels[cor]+'.');
|
||
document.getElementById('p2-ds').textContent=score; i++; setTimeout(show,1200); }
|
||
document.querySelectorAll('#p2-iv3 [data-dv]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-dv')); }); }); show();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 3. ГРАФИКИ ПРЯМОЙ И ОБРАТНОЙ ПРОПОРЦИОНАЛЬНОСТИ ===================== */
|
||
function buildP3(){
|
||
var box=document.getElementById('p3-body'); var h='';
|
||
h+=makeCard('oral','Где это в жизни','3.0',
|
||
'<p>Прямая пропорциональность — это скорость и путь: проедешь вдвое больше часов — путь вдвое больше ($s = v \\cdot t$, где $v$ — коэффициент). Обратная — работа и время: чем больше рабочих, тем меньше часов ($t = A / n$). Курс обмена валюты, рецепты (больше порций — больше ингредиентов), топливо в баке — всё это пропорциональные зависимости.</p>');
|
||
h+=makeCard('theory','Прямая пропорциональность','3.1',
|
||
'<p>Если $y = kx$ (где $k\\ne 0$ — коэффициент), то $y$ <b>прямо пропорционален</b> $x$. График — <b>прямая</b>, проходящая через начало координат.</p>'
|
||
+'<p>Чем больше $k$, тем «круче» прямая. При $k>0$ прямая идёт вверх, при $k<0$ — вниз.</p>');
|
||
h+=makeCard('theory','Обратная пропорциональность','3.2',
|
||
'<p>Если $y = \\dfrac{k}{x}$ (где $k\\ne 0$), то $y$ <b>обратно пропорционален</b> $x$. График — <b>гипербола</b> (две ветви), он не проходит через начало координат.</p>');
|
||
h+=makeCard('example','Разбор по шагам','3.3',
|
||
'<p>Задача: прямая $y = kx$ проходит через точку $(2;\\,6)$. Найди $k$.</p>'
|
||
+'<ol><li>Подставь координаты точки в формулу: $6 = k \\cdot 2$.</li>'
|
||
+'<li>Раздели обе части на $2$: $k = 6 : 2 = 3$.</li>'
|
||
+'<li>Формула зависимости: $y = 3x$.</li>'
|
||
+'<li>Проверка: при $x = 2$ получаем $y = 3 \\cdot 2 = 6$. Верно!</li></ol>'
|
||
+'<p>Аналогично для $y = \\frac{k}{x}$: если точка $(4;\\,3)$, то $k = 4 \\cdot 3 = 12$.</p>');
|
||
h+=makeCard('theory','А знаешь ли ты?','3.4',
|
||
'<p>Гипербола — одна из <b>конических сечений</b>: если разрезать конус плоскостью под определённым углом, срез будет гиперболой. Та же форма встречается в траекториях некоторых комет, в форме некоторых антенн и в архитектуре башен-градирен на электростанциях. Прямая пропорциональность же лежит в основе закона Ома ($I = U/R$ при фиксированном $U$) и закона Гука.</p>');
|
||
h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">График y = kx</div></div>'
|
||
+'<div class="wg-help">Двигай коэффициент $k$ — смотри, как меняется наклон прямой.</div>'
|
||
+'<div class="sliders"><label>$k$ = <b id="p3-kv">2</b><input type="range" id="p3-k" min="-3" max="3" step="1" value="2"></label></div>'
|
||
+'<div id="p3-fig"></div></div>';
|
||
h+='<div class="wg" id="p3-live"><div class="wg-header"><span class="wg-badge">Анимация</span><div class="wg-title">Живой график: двигай k</div></div>'
|
||
+'<div class="wg-help">Переключай вид зависимости и двигай $k$ — график <b>плавно перетекает</b>. Прямая $y=kx$ всегда проходит через начало координат; гипербола $y=k/x$ — две ветви, через начало не проходит.</div>'
|
||
+'<div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px"><button class="btn primary" data-m="kx">прямая $y=kx$</button><button class="btn" data-m="kdx">обратная $y=k/x$</button></div>'
|
||
+'<div class="sliders"><label>$k$ = <b id="p3-lkv">2</b><input type="range" id="p3-lk" min="-4" max="4" step="0.5" value="2"></label></div>'
|
||
+'<div id="p3-livefig"></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-i">1</b> / 6</span><span>Очки: <b id="p3-s">0</b> / 6</span></div>'
|
||
+'<div id="p3-cfig"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-t="kx">прямая ($y=kx$)</button><button class="btn primary" data-t="kdx">обратная ($y=\\frac{k}{x}$)</button></div>'
|
||
+'<div class="feedback" id="p3-cfb"></div></div>';
|
||
h+='<div class="wg" id="p3-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Найди коэффициент k</div></div>'
|
||
+'<div class="wg-help">Прямая $y = kx$ проходит через заданную точку. Найди $k$.</div>'
|
||
+'<div class="score-display"><span>Задача <b id="p3-ki">1</b> / 6</span><span>Очки: <b id="p3-ks">0</b> / 6</span></div>'
|
||
+'<div id="p3-kq" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$k = $ <input type="number" id="p3-ka" class="tinp" style="width:80px;text-align:center"><button class="btn primary" id="p3-kgo">Проверить</button></div>'
|
||
+'<div class="feedback" id="p3-kfb"></div></div>';
|
||
h+=secNav('p2','app')+readBtn('p3');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){
|
||
if(!window.Math6Anim) return;
|
||
var ctrl=Math6Anim.plotLive(document.getElementById('p3-livefig'),{k:2,mode:'kx'});
|
||
var sl=document.getElementById('p3-lk'), kv=document.getElementById('p3-lkv');
|
||
sl.oninput=function(){ var v=+sl.value; kv.textContent=String(v).replace('.',','); ctrl.setK(v); };
|
||
document.querySelectorAll('#p3-live [data-m]').forEach(function(b){ b.addEventListener('click',function(){
|
||
document.querySelectorAll('#p3-live [data-m]').forEach(function(x){x.classList.remove('primary');}); b.classList.add('primary');
|
||
ctrl.setMode(b.getAttribute('data-m')); }); });
|
||
})();
|
||
|
||
(function(){
|
||
var sl=document.getElementById('p3-k'), fig=document.getElementById('p3-fig');
|
||
function render(){ var k=+sl.value; document.getElementById('p3-kv').textContent=k;
|
||
fig.innerHTML=Math6.plane({size:340,quadrants:false,plot:{fn:function(x){ return k*x; },color:'#059669'}})
|
||
.replace('</svg>','</svg>')+'<div style="text-align:center;font-weight:700;color:var(--pri2);margin-top:6px">$y = '+(k===1?'':(k===-1?'-':k))+'x$</div>';
|
||
renderMath(fig); }
|
||
sl.oninput=render; render();
|
||
})();
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ var t=_pick(['kx','kdx']), k=_pick([1,2,3,4]); cur={t:t,k:k}; }
|
||
function show(){ if(i>=6){ document.getElementById('p3-cfig').innerHTML='<b>Готово!</b> Результат: '+score+' / 6'; if(score>=5){addXp(15,'p3-iv2');bumpProgress('p3',30);}else if(score>=3){addXp(8,'p3-iv2');bumpProgress('p3',16);} return; }
|
||
gen(); document.getElementById('p3-i').textContent=i+1;
|
||
var fn=cur.t==='kx'?function(x){return cur.k*x;}:function(x){ return x===0?null:cur.k/x; };
|
||
document.getElementById('p3-cfig').innerHTML=Math6.plane({size:340,plot:{fn:fn,color:'#7c3aed'}});
|
||
document.getElementById('p3-cfb').style.display='none'; }
|
||
function ans(t){ if(i>=6)return; var fb=document.getElementById('p3-cfb');
|
||
if(t===cur.t){ score++; feedback(fb,true,'✓ Верно — '+(cur.t==='kx'?'прямая пропорциональность':'обратная пропорциональность')+'.'); } else feedback(fb,false,'✗ Нет. Это '+(cur.t==='kx'?'прямая ($y=kx$)':'обратная ($y=k/x$)')+'.');
|
||
document.getElementById('p3-s').textContent=score; i++; setTimeout(show,1300); }
|
||
document.querySelectorAll('#p3-iv2 [data-t]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-t')); }); }); show();
|
||
})();
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ var a=_pick([2,3,4,5,6]), b=_pick([2,3,4,5]); cur={a:a,b:a*b,k:b}; }
|
||
function show(){ if(i>=6){ document.getElementById('p3-kq').innerHTML='<b>Готово!</b> Результат: '+score+' / 6'; if(score>=5){addXp(15,'p3-iv3');bumpProgress('p3',25);}else if(score>=3){addXp(8,'p3-iv3');bumpProgress('p3',12);} return; }
|
||
gen(); document.getElementById('p3-ki').textContent=i+1;
|
||
document.getElementById('p3-kq').innerHTML='Прямая $y = kx$ проходит через точку $('+cur.a+';\\,'+cur.b+')$. Найди $k$.';
|
||
renderMath(document.getElementById('p3-kq'));
|
||
document.getElementById('p3-ka').value=''; document.getElementById('p3-kfb').style.display='none'; }
|
||
function go(){ if(i>=6)return; var fb=document.getElementById('p3-kfb'), v=parseInt(document.getElementById('p3-ka').value,10);
|
||
if(isNaN(v)){ feedback(fb,false,'Введи целое число.'); return; }
|
||
if(v===cur.k){ score++; feedback(fb,true,'✓ Верно: $k = '+cur.k+'$ ('+cur.b+' : '+cur.a+' = '+cur.k+').'); } else feedback(fb,false,'✗ Нет. $k = '+cur.b+' : '+cur.a+' = '+cur.k+'$.');
|
||
renderMath(fb); document.getElementById('p3-ks').textContent=score; i++; setTimeout(show,1400); }
|
||
document.getElementById('p3-kgo').addEventListener('click',go);
|
||
document.getElementById('p3-ka').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 5. МАТЕМАТИКА ВОКРУГ НАС ===================== */
|
||
function buildApp(){
|
||
var box=document.getElementById('app-body'); var h='';
|
||
h+=makeCard('oral','Где это в жизни','5.0',
|
||
'<p>Координатная плоскость и графики сопровождают тебя везде: карта города — это координатная сетка; расписание поездов и автобусов — это график пути от времени; ценники в магазине описываются прямой пропорциональностью. Пилоты, капитаны кораблей, программисты, дизайнеры и врачи ежедневно работают с системами координат и графиками.</p>');
|
||
h+=makeCard('theory','Графики и координаты вокруг нас','5.1',
|
||
'<p>Координаты — это «адрес» на карте, в игре, на экране. Графики показывают курс валют, погоду, расписание движения, рост и вес. Уметь читать график — полезный жизненный навык.</p>');
|
||
h+=makeCard('example','Разбор по шагам','5.2',
|
||
'<p>Машина едет со скоростью $60$ км/ч. Составим и прочитаем график пути.</p>'
|
||
+'<ol><li>Формула: $s = 60 \\cdot t$ — это прямая пропорциональность.</li>'
|
||
+'<li>За $1$ ч: $s = 60$ км. За $2$ ч: $s = 120$ км. За $3$ ч: $s = 180$ км.</li>'
|
||
+'<li>Отметим точки $(1;60)$, $(2;120)$, $(3;180)$ и соединим прямой.</li>'
|
||
+'<li>Горизонтальный участок графика означал бы остановку: путь не растёт, но время идёт.</li>'
|
||
+'<li>По графику легко найти путь за любое время — просто читаем координату.</li></ol>');
|
||
h+=makeCard('theory','А знаешь ли ты?','5.3',
|
||
'<p>В видеоиграх каждый пиксель на экране задаётся парой координат $(x, y)$, где $(0, 0)$ — обычно левый верхний угол. Создатели игр описывают движение персонажа формулами прямой пропорциональности: $x = x_0 + v_x \\cdot t$, $y = y_0 + v_y \\cdot t$. Это точно такая же математика, которую вы изучаете сейчас — только работающая со скоростью десятков кадров в секунду.</p>');
|
||
h+='<div class="wg" id="app-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Путь и время</div></div>'
|
||
+'<div class="wg-help">График пути (км) от времени (ч). Ответь на вопрос.</div>'
|
||
+'<div class="score-display"><span>Вопрос <b id="app-i">1</b> / 5</span><span>Очки: <b id="app-s">0</b> / 5</span></div>'
|
||
+'<div id="app-fig"></div><div id="app-q" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="app-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="app-go">Проверить</button></div>'
|
||
+'<div class="feedback" id="app-fb"></div></div>';
|
||
h+='<div class="wg" id="app-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Скорость по графику пути</div></div>'
|
||
+'<div class="wg-help">По двум точкам графика пути вычисли скорость: $v = \\Delta s / \\Delta t$.</div>'
|
||
+'<div class="score-display"><span>Задача <b id="app-vi">1</b> / 5</span><span>Очки: <b id="app-vs">0</b> / 5</span></div>'
|
||
+'<div id="app-vq" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$v = $ <input type="number" id="app-va" class="tinp" style="width:90px;text-align:center"> км/ч <button class="btn primary" id="app-vgo">Проверить</button></div>'
|
||
+'<div class="feedback" id="app-vfb"></div></div>';
|
||
h+=secNav('p3','final')+readBtn('app');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
var P=[{x:0,y:0},{x:1,y:40},{x:2,y:80},{x:3,y:80},{x:4,y:120},{x:5,y:160}];
|
||
function py(x){ for(var k=0;k<P.length;k++) if(P[k].x===x) return P[k].y; return null; }
|
||
(function(){
|
||
var QS=[
|
||
{t:'Сколько километров проехали за 2 ч?', f:function(){return py(2);}},
|
||
{t:'Какой путь пройден к 5 ч?', f:function(){return py(5);}},
|
||
{t:'На сколько км увеличился путь с 4 ч до 5 ч?', f:function(){return py(5)-py(4);}},
|
||
{t:'Между какими часами была остановка (путь не менялся)? Введи час начала остановки.', f:function(){return 2;}},
|
||
{t:'Сколько км проехали за первый час?', f:function(){return py(1);}}
|
||
];
|
||
var i=0,score=0,cur=null;
|
||
function show(){ if(i>=5){ document.getElementById('app-fig').innerHTML=''; document.getElementById('app-q').innerHTML='<b>Готово!</b> Результат: '+score+' / 5'; if(score>=4){addXp(15,'app-iv1');bumpProgress('app',35);}else if(score>=2){addXp(8,'app-iv1');bumpProgress('app',18);} return; }
|
||
cur=QS[i]; document.getElementById('app-i').textContent=i+1;
|
||
document.getElementById('app-fig').innerHTML=Math6.plane({xmin:0,xmax:6,ymin:0,ymax:180,size:340,polyline:P,polylineColor:'#059669',polylineDots:true});
|
||
document.getElementById('app-q').innerHTML=cur.t;
|
||
document.getElementById('app-a').value=''; document.getElementById('app-fb').style.display='none'; }
|
||
function go(){ if(i>=5)return; var fb=document.getElementById('app-fb'), v=parseFloat(document.getElementById('app-a').value.replace(',','.').trim()), a=cur.f();
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-a)<1e-9){ score++; feedback(fb,true,'✓ Верно: '+a+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+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 VSEGS=[
|
||
{t1:0,s1:0,t2:1,s2:40},{t1:1,s1:40,t2:2,s2:80},
|
||
{t1:4,s1:120,t2:5,s2:160},{t1:0,s1:0,t2:2,s2:80},{t1:3,s1:80,t2:5,s2:160}
|
||
];
|
||
var i=0,score=0;
|
||
function show(){ if(i>=5){ document.getElementById('app-vq').innerHTML='<b>Готово!</b> Результат: '+score+' / 5'; if(score>=4){addXp(15,'app-iv2');bumpProgress('app',30);}else if(score>=2){addXp(7,'app-iv2');bumpProgress('app',15);} return; }
|
||
var seg=VSEGS[i]; document.getElementById('app-vi').textContent=i+1;
|
||
var ds=seg.s2-seg.s1, dt=seg.t2-seg.t1;
|
||
document.getElementById('app-vq').innerHTML='С '+seg.t1+' ч до '+seg.t2+' ч путь вырос с '+seg.s1+' км до '+seg.s2+' км. Найди среднюю скорость (км/ч).';
|
||
document.getElementById('app-va').value=''; document.getElementById('app-vfb').style.display='none';
|
||
document.getElementById('app-vq')._ans=Math.round(ds/dt); }
|
||
function go(){ if(i>=5)return; var fb=document.getElementById('app-vfb'), ans=document.getElementById('app-vq')._ans, v=parseInt(document.getElementById('app-va').value,10);
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
var seg=VSEGS[i], ds=seg.s2-seg.s1, dt=seg.t2-seg.t1;
|
||
if(v===ans){ score++; feedback(fb,true,'✓ Верно: '+ds+' / '+dt+' = '+ans+' км/ч.'); } else feedback(fb,false,'✗ Нет. '+ds+' : '+dt+' = '+ans+' км/ч.');
|
||
document.getElementById('app-vs').textContent=score; i++; setTimeout(show,1300); }
|
||
document.getElementById('app-vgo').addEventListener('click',go);
|
||
document.getElementById('app-va').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||
})();
|
||
}
|
||
|
||
/* ===================== ФИНАЛ ГЛАВЫ — БОССЫ ===================== */
|
||
function buildFinal(){
|
||
var box=document.getElementById('final-body'); var h='';
|
||
h+=makeCard('theory','Финал главы 5','★','<p>Пять боссов проверят координаты, четверти, чтение графиков и пропорциональные зависимости. Победи всех!</p>');
|
||
h+='<div class="wg" id="fin"><div class="wg-header"><span class="wg-badge">Боссы</span><div class="wg-title">Сразись с главой 5</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> / 5</span><span>Побеждено: <b id="fin-s">0</b> / 5</span></div>'
|
||
+'<div id="fin-name" style="font-weight:800;color:#b91c1c;text-align:center;margin-bottom:6px"></div>'
|
||
+'<div id="fin-fig"></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="text" id="fin-a" class="tinp" style="width:140px;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','Завершить главу 5 (+10 XP)');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){
|
||
var bosses=[
|
||
function(){ var x=_ri(-5,5), y=_ri(-5,5); return {name:'Картограф', fig:Math6.plane({size:300,quadrants:true,points:[{x:x,y:y,label:'A',color:'#059669'}]}), q:'Назови <b>абсциссу</b> точки $A$.', ans:x}; },
|
||
function(){ var x=_pick([-4,-3,-2,-1,1,2,3,4]), y=_pick([-4,-3,-2,-1,1,2,3,4]); var q=x>0?(y>0?1:4):(y>0?2:3); return {name:'Хранитель Четвертей', fig:Math6.plane({size:300,quadrants:true,points:[{x:x,y:y,label:'B',color:'#e11d48'}]}), q:'В какой четверти точка $B$? (номер 1–4)', ans:q}; },
|
||
function(){ var G=[{x:0,y:1},{x:1,y:3},{x:2,y:5},{x:3,y:4},{x:4,y:6}]; var xx=_ri(0,4); var yy; for(var k=0;k<G.length;k++) if(G[k].x===xx) yy=G[k].y; return {name:'Читатель Графиков', fig:Math6.plane({xmin:0,xmax:5,ymin:0,ymax:7,size:300,polyline:G,polylineColor:'#059669',polylineDots:true}), q:'Чему равно значение графика при $x='+xx+'$?', ans:yy}; },
|
||
function(){ var k=_pick([2,3,4,5]), a=_pick([2,3,4]), b=k*a; return {name:'Прямая Пропорция', fig:'', q:'Прямая $y=kx$ проходит через точку $('+a+';\\,'+b+')$. Чему равен $k$?', ans:k}; },
|
||
function(){ var a=_pick([2,3,4,6]), b=_pick([2,3,4]); var k=a*b; return {name:'Обратная Пропорция', fig:'', q:'Обратная зависимость $y=\\dfrac{k}{x}$: при $x='+a+'$ значение $y='+b+'$. Найди $k$.', ans:k}; }
|
||
];
|
||
var i=0,score=0,cur=null,done=false;
|
||
function show(){ if(i>=5){ done=true; document.getElementById('fin-name').textContent=''; document.getElementById('fin-fig').innerHTML=''; document.getElementById('fin-q').innerHTML=(score>=4?'<b>Победа!</b> Глава 5 пройдена. ':'<b>Бой окончен.</b> ')+'Побеждено боссов: '+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-fig').innerHTML=cur.fig||'';
|
||
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();
|
||
})();
|
||
}
|
||
|
||
/* ===================== ДАННЫЕ ===================== */
|
||
var SIDEBARS = {
|
||
p1:{ title:'Шпаргалка § 1', rows:[
|
||
['Ось $Ox$','абсцисс (горизонтальная)'],
|
||
['Ось $Oy$','ординат (вертикальная)'],
|
||
['Точка','$(x;\\,y)$ — абсцисса, ордината'],
|
||
['Четверти','I(+;+) II(−;+) III(−;−) IV(+;−)'] ]},
|
||
p2:{ title:'Шпаргалка § 2', rows:[
|
||
['График','зависимость величины от другой'],
|
||
['Чтение','от $x$ вверх до линии, затем до $y$'],
|
||
['Рост','линия идёт вверх'],
|
||
['Спад','линия идёт вниз'] ]},
|
||
p3:{ title:'Шпаргалка § 3', rows:[
|
||
['$y=kx$','прямая через начало координат'],
|
||
['$y=\\frac{k}{x}$','гипербола (две ветви)'],
|
||
['$k$','коэффициент'],
|
||
['$k>0$ / $k<0$','прямая вверх / вниз'] ]},
|
||
app:{ title:'Шпаргалка § 5', rows:[
|
||
['Координаты','адрес точки на карте/экране'],
|
||
['График пути','круче — быстрее'],
|
||
['Горизонталь','остановка (путь не меняется)'] ]},
|
||
final:{ title:'Финал главы 5', rows:[
|
||
['5 боссов','координаты, четверти, графики, пропорции'],
|
||
['Победа','4 из 5 и больше'],
|
||
['Награда','+40 XP и достижение «Глава 5 пройдена»'] ]}
|
||
};
|
||
var TIPS = [
|
||
{ sec:'p1', html:'Сначала идём по горизонтали (абсцисса $x$), потом по вертикали (ордината $y$). Порядок важен: $(3;\\,4)$ и $(4;\\,3)$ — разные точки.' },
|
||
{ sec:'p2', html:'Чтобы узнать значение в момент $x$, поднимись от этой точки на оси вверх до линии графика и посмотри на ось $y$.' },
|
||
{ sec:'p3', html:'Прямая $y=kx$ всегда проходит через начало $(0;0)$. Гипербола $y=k/x$ — нет: при $x=0$ значения не существует.' },
|
||
{ sec:'app', html:'Горизонтальный участок графика пути — это остановка: время идёт, а путь не растёт.' },
|
||
{ sec:'final', html:'Для $y=kx$ через $(a;b)$ коэффициент $k=b/a$. Для $y=k/x$ наоборот: $k=a\\cdot b$.' }
|
||
];
|
||
var GLOSSARY = [
|
||
{ term:'координатная плоскость', def:'Плоскость с прямоугольной системой координат (оси $Ox$ и $Oy$).', sec:'p1', aliases:['координатная плоскость','координатной плоскости','координатную плоскость'] },
|
||
{ term:'абсцисса', def:'Первая координата точки $(x;y)$ — по оси $Ox$.', sec:'p1', aliases:['абсцисса','абсциссу','абсциссы','абсциссой'] },
|
||
{ term:'ордината', def:'Вторая координата точки $(x;y)$ — по оси $Oy$.', sec:'p1', aliases:['ордината','ординату','ординаты','ординатой'] },
|
||
{ term:'четверть', def:'Одна из четырёх частей координатной плоскости (I–IV).', sec:'p1', aliases:['четверть','четверти','четвертях'] },
|
||
{ term:'график', def:'Линия, наглядно показывающая зависимость одной величины от другой.', sec:'p2', aliases:['график','графика','графике','графики'] },
|
||
{ term:'прямая пропорциональность', def:'Зависимость $y=kx$; график — прямая через начало координат.', sec:'p3', aliases:['прямая пропорциональность','прямой пропорциональности','прямая пропорциональная'] },
|
||
{ term:'обратная пропорциональность', def:'Зависимость $y=k/x$; график — гипербола.', sec:'p3', aliases:['обратная пропорциональность','обратной пропорциональности','обратная пропорциональная'] }
|
||
];
|
||
var BUILDERS = { p1:buildP1, p2:buildP2, p3:buildP3, app:buildApp, final:buildFinal };
|
||
Object.assign(window.M6, { sidebars:SIDEBARS, tips:TIPS, glossary:GLOSSARY, builders:BUILDERS });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|