Две перпендикулярные координатные прямые с общим началом $O$ образуют прямоугольную (декартову) систему координат. Горизонтальная ось — ось абсцисс $Ox$, вертикальная — ось ординат $Oy$.
'
+ +'
Положение точки задаёт пара чисел $(x;\\,y)$: первое — абсцисса (по $Ox$), второе — ордината (по $Oy$). Например, $A(3;\\,4)$.
');
+ h+=makeCard('rule','Четверти','1.2',
+ '
Оси делят плоскость на четыре четверти (нумеруют против часовой стрелки от правой верхней):
'
+ +'
Четверть
I
II
III
IV
'
+ +'
знак $x$
+
−
−
+
'
+ +'
знак $y$
+
+
−
−
');
+ h+='
Интерактив 1
Прочитай координаты
'
+ +'
Определи координаты отмеченной точки и введи абсциссу и ординату.
'
+ +'
Точка 1 / 6Очки: 0 / 6
'
+ +''
+ +'
$x=$ $y=$
'
+ +'
';
+ h+='
Интерактив 2
В какой четверти?
'
+ +'
Определи номер четверти, в которой лежит точка.
'
+ +'
Точка 1 / 6Очки: 0 / 6
'
+ +''
+ +''
+ +'
';
+ 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='Готово! Результат: '+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='Готово! Результат: '+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',
+ '
График наглядно показывает, как одна величина зависит от другой: температура от времени, путь от времени, уровень воды от времени.
'
+ +'
Чтобы прочитать значение, находят точку на горизонтальной оси, поднимаются до линии графика и смотрят значение на вертикальной оси.
');
+ h+=makeCard('example','Пример','2.2',
+ '
Если в $2$ ч температура была $4°$, то точка графика с абсциссой $2$ имеет ординату $4$.
');
+ h+='
Интерактив 1
Прочитай значение по графику
'
+ +'
Температура (°C) в зависимости от времени (ч). Ответь на вопрос по графику.
'
+ +'
Вопрос 1 / 5Очки: 0 / 5
'
+ +''
+ +''
+ +'
';
+ h+='
Интерактив 2
Изменение величины
'
+ +'
На сколько изменилась величина между двумя моментами времени? (рост — со знаком +, спад — со знаком −)
'
+ +'
Вопрос 1 / 5Очки: 0 / 5
'
+ +''
+ +''
+ +'
';
+ 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=5){ document.getElementById('p2-fig').innerHTML=''; document.getElementById('p2-q').innerHTML='Готово! Результат: '+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='Какая температура была в '+cur+' ч?';
+ 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='Готово! Результат: '+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='На сколько изменилась температура с '+cur.a+' ч до '+cur.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',
+ '
Если $y = kx$ (где $k\\ne 0$ — коэффициент), то $y$ прямо пропорционален $x$. График — прямая, проходящая через начало координат.
'
+ +'
Чем больше $k$, тем «круче» прямая. При $k>0$ прямая идёт вверх, при $k<0$ — вниз.
Если $y = \\dfrac{k}{x}$ (где $k\\ne 0$), то $y$ обратно пропорционален $x$. График — гипербола (две ветви), он не проходит через начало координат.
');
+ h+='
Интерактив 1
График y = kx
'
+ +'
Двигай коэффициент $k$ — смотри, как меняется наклон прямой.
'
+ +''
+ +'
';
+ h+='
Интерактив 2
Прямая или обратная?
'
+ +'
Определи по графику вид зависимости.
'
+ +'
Вопрос 1 / 6Очки: 0 / 6
'
+ +''
+ +''
+ +'
';
+ 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('','')+'
$y = '+(k===1?'':(k===-1?'-':k))+'x$
';
+ 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='Готово! Результат: '+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',
+ '
Координаты — это «адрес» на карте, в игре, на экране. Графики показывают курс валют, погоду, расписание движения, рост и вес. Уметь читать график — полезный жизненный навык.
');
+ h+='
Интерактив 1
Путь и время
'
+ +'
График пути (км) от времени (ч). Ответь на вопрос.
'
+ +'
Вопрос 1 / 5Очки: 0 / 5
'
+ +''
+ +''
+ +'
';
+ 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=5){ document.getElementById('app-fig').innerHTML=''; document.getElementById('app-q').innerHTML='Готово! Результат: '+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','★','
Пять боссов проверят координаты, четверти, чтение графиков и пропорциональные зависимости. Победи всех!
');
+ h+='
Боссы
Сразись с главой 5
'
+ +'
'
+ +'
Босс 1 / 5Побеждено: 0 / 5
'
+ +''
+ +''
+ +''
+ +'
';
+ 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:'Назови абсциссу точки $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=5){ done=true; document.getElementById('fin-name').textContent=''; document.getElementById('fin-fig').innerHTML=''; document.getElementById('fin-q').innerHTML=(score>=4?'Победа! Глава 5 пройдена. ':'Бой окончен. ')+'Побеждено боссов: '+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 });