feat(math6): Глава 5 — Координатная плоскость (§1–§5, на Math6.plane)
§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>
This commit is contained in:
Maxim Dolgolyov
@@ -68,6 +68,23 @@ for (const ch of CHAPTERS) {
|
||||
});
|
||||
}
|
||||
|
||||
test('ch5: координатная плоскость — интерактивы §1–§3 + финал', async () => {
|
||||
const { doc, errors } = await loadDom('math_6_ch5.html');
|
||||
const win = doc.defaultView;
|
||||
assert.ok(doc.querySelector('#p1-fig svg'), 'плоскость с точкой §1');
|
||||
assert.ok(doc.querySelectorAll('#p1-iv2 [data-q]').length === 4, 'кнопки четвертей §1');
|
||||
win.goTo('p2'); await wait(80);
|
||||
assert.ok(doc.querySelector('#p2-fig svg polyline'), 'график процесса §2');
|
||||
win.goTo('p3'); await wait(80);
|
||||
assert.ok(doc.querySelector('#p3-k'), 'слайдер k §3');
|
||||
assert.ok(doc.querySelector('#p3-fig svg path'), 'график y=kx §3');
|
||||
win.goTo('final'); await wait(80);
|
||||
assert.ok(doc.querySelector('#fin-go'), 'арена боссов §5');
|
||||
win.bumpProgress('final', 100); await wait(20);
|
||||
assert.ok(win.M6STATE.achievements.has('ch5_done'), 'достижение «Глава 5 пройдена»');
|
||||
assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
|
||||
});
|
||||
|
||||
test('hub: 6 карточек глав', async () => {
|
||||
const { doc, errors } = await loadDom('math_6_hub.html');
|
||||
assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
|
||||
|
||||
@@ -133,6 +133,12 @@ M.plane = function (opts) {
|
||||
}
|
||||
s += '<path d="' + d + '" fill="none" stroke="' + (pl.color || 'var(--pri,#4f46e5)') + '" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>';
|
||||
}
|
||||
/* ломаная (график реального процесса по точкам) */
|
||||
if (opts.polyline && opts.polyline.length) {
|
||||
var pl2 = opts.polyline, pts2 = pl2.map(function (p) { return X(p.x) + ',' + Y(p.y); }).join(' ');
|
||||
s += '<polyline points="' + pts2 + '" fill="none" stroke="' + (opts.polylineColor || 'var(--pri,#4f46e5)') + '" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>';
|
||||
if (opts.polylineDots) pl2.forEach(function (p) { s += '<circle cx="' + X(p.x) + '" cy="' + Y(p.y) + '" r="3.5" fill="' + (opts.polylineColor || 'var(--pri,#4f46e5)') + '"/>'; });
|
||||
}
|
||||
/* отрезки */
|
||||
(opts.segments || []).forEach(function (sg) {
|
||||
s += '<line x1="' + X(sg.from.x) + '" y1="' + Y(sg.from.y) + '" x2="' + X(sg.to.x) + '" y2="' + Y(sg.to.y) + '" stroke="' + (sg.color || 'var(--pri,#4f46e5)') + '" stroke-width="2"' + (sg.dash ? ' stroke-dasharray="' + sg.dash + '"' : '') + '/>';
|
||||
|
||||
@@ -90,6 +90,296 @@ window.M6 = {
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user