Maxim Dolgolyov
09c61d8eed
§1 чтение координат + определение четверти (плоскость с точкой); §2 чтение графиков реальных процессов + изменение величины (polyline); §3 слайдер y=kx + классификатор прямая/обратная пропорциональность; §5 прикладной (путь–время); финал — 5 боссов (координаты, четверти, график, k для y=kx и y=k/x). Math6.plane получил поддержку polyline. Тесты math6: 13/13. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
387 lines
36 KiB
HTML
387 lines
36 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_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('theory','Координаты на плоскости','1.1',
|
||
'<p>Две перпендикулярные координатные прямые с общим началом $O$ образуют <b>прямоугольную (декартову) систему координат</b>. Горизонтальная ось — ось <b>абсцисс</b> $Ox$, вертикальная — ось <b>ординат</b> $Oy$.</p>'
|
||
+'<p>Положение точки задаёт <b>пара чисел</b> $(x;\\,y)$: первое — абсцисса (по $Ox$), второе — ордината (по $Oy$). Например, $A(3;\\,4)$.</p>');
|
||
h+=makeCard('rule','Четверти','1.2',
|
||
'<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+='<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+=secNav(null,'p2')+readBtn('p1');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(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();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 2. ГРАФИКИ РЕАЛЬНЫХ ПРОЦЕССОВ ===================== */
|
||
function buildP2(){
|
||
var box=document.getElementById('p2-body'); var h='';
|
||
h+=makeCard('theory','Что показывает график','2.1',
|
||
'<p><b>График</b> наглядно показывает, как одна величина зависит от другой: температура от времени, путь от времени, уровень воды от времени.</p>'
|
||
+'<p>Чтобы прочитать значение, находят точку на горизонтальной оси, поднимаются до линии графика и смотрят значение на вертикальной оси.</p>');
|
||
h+=makeCard('example','Пример','2.2',
|
||
'<p>Если в $2$ ч температура была $4°$, то точка графика с абсциссой $2$ имеет ординату $4$.</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+=secNav('p1','p3')+readBtn('p2');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
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();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 3. ГРАФИКИ ПРЯМОЙ И ОБРАТНОЙ ПРОПОРЦИОНАЛЬНОСТИ ===================== */
|
||
function buildP3(){
|
||
var box=document.getElementById('p3-body'); var h='';
|
||
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+='<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-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+=secNav('p2','app')+readBtn('p3');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(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();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 5. МАТЕМАТИКА ВОКРУГ НАС ===================== */
|
||
function buildApp(){
|
||
var box=document.getElementById('app-body'); var h='';
|
||
h+=makeCard('theory','Графики и координаты вокруг нас','5.1',
|
||
'<p>Координаты — это «адрес» на карте, в игре, на экране. Графики показывают курс валют, погоду, расписание движения, рост и вес. Уметь читать график — полезный жизненный навык.</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+=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 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>
|