feat(math5): Глава 1 §3–§6 — сравнение, фигуры, измерение, координатный луч
§3 Сравнение (правила + тренажёр знаков + «выбери наибольшее»). §4 Точка/прямая/луч/отрезок/плоскость (SVG-галерея фигур + квиз «что изображено» + счёт отрезков по точкам). §5 Измерение отрезков (SVG-линейка с цветным отрезком + перевод единиц длины). §6 Координатный луч (Math6.numberLine ray: назови координату + расстояние между точками). Шпаргалки/типсы §3–6. Тесты math5: 8/8. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
@@ -333,6 +333,294 @@ function buildFinal(){
|
||||
})();
|
||||
}
|
||||
|
||||
/* ===================== § 3. СРАВНЕНИЕ НАТУРАЛЬНЫХ ЧИСЕЛ ===================== */
|
||||
function buildP3(){
|
||||
var box=document.getElementById('p3-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','3.0',
|
||||
'<p>Сравнивать числа приходится постоянно: где цена ниже, у какого телефона больше памяти, в каком городе больше жителей, чей результат в игре выше. Натуральные числа сравнивать легко — нужно лишь знать два простых правила.</p>');
|
||||
h+=makeCard('rule','Как сравнивать натуральные числа','3.1',
|
||||
'<p>1) Из двух чисел больше то, в записи которого <b>больше цифр</b> (без лишних нулей слева): $1000>999$.</p>'
|
||||
+'<p>2) Если цифр <b>поровну</b> — сравнивают <b>поразрядно слева направо</b>: на первом же различии больше то число, у которого цифра больше.</p>'
|
||||
+'<p>Знаки: $<$ «меньше», $>$ «больше», $=$ «равно». Острый угол знака всегда «смотрит» на меньшее число.</p>');
|
||||
h+=makeCard('example','Примеры','3.2',
|
||||
'<p>$58>9$ (две цифры против одной). $347<352$ (сотни равны, десятки $4<5$). $1\\,200>1\\,199$.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','3.3',
|
||||
'<p>Сравним $4\\,019$ и $4\\,190$.</p>'
|
||||
+'<ol style="padding-left:22px;line-height:2">'
|
||||
+'<li>Цифр поровну — по $4$. Сравниваем поразрядно.</li>'
|
||||
+'<li>Тысячи: $4=4$. Сотни: $0<1$ — на этом различии всё решается.</li>'
|
||||
+'<li>Значит $4\\,019<4\\,190$.</li>'
|
||||
+'</ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','3.4',
|
||||
'<p>Знаки $>$ и $<$ придумал английский математик <b>Томас Хэрриот</b> (изданы в $1631$ году). А знак равенства $=$ ещё раньше, в $1557$ году, предложил Роберт Рекорд: «нет двух вещей более равных, чем две параллельные чёрточки».</p>');
|
||||
h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Поставь знак</div></div>'
|
||||
+'<div class="wg-help">Сравни два числа и выбери верный знак.</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p3-i">1</b> / 6</span><span>Очки: <b id="p3-s">0</b> / 6</span></div>'
|
||||
+'<div id="p3-q" class="qbox"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-cmp=">">></button><button class="btn primary" data-cmp="=">=</button><button class="btn primary" data-cmp="<"><</button></div>'
|
||||
+'<div class="feedback" id="p3-fb"></div></div>';
|
||||
h+='<div class="wg" id="p3-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Выбери наибольшее</div></div>'
|
||||
+'<div class="wg-help">Из четырёх чисел нажми самое большое.</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p3-mi">1</b> / 5</span><span>Очки: <b id="p3-ms">0</b> / 5</span></div>'
|
||||
+'<div id="p3-mq" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0"></div>'
|
||||
+'<div class="feedback" id="p3-mfb"></div></div>';
|
||||
h+=secNav('p2','p4')+readBtn('p3');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ var a,b; if(_ri(0,3)===0){ a=_ri(10,9999); b=a; } else { a=_ri(10,9999); b=_ri(10,9999); } cur={a:a,b:b}; }
|
||||
function show(){ if(i>=6){ document.getElementById('p3-q').innerHTML='<b>Готово!</b> Результат: '+score+' / 6'; if(score>=5){addXp(15,'p3-iv1');bumpProgress('p3',30);}else if(score>=3){addXp(8,'p3-iv1');bumpProgress('p3',16);} return; }
|
||||
gen(); document.getElementById('p3-i').textContent=i+1;
|
||||
document.getElementById('p3-q').innerHTML='$'+_grp(cur.a)+' \\;\\square\\; '+_grp(cur.b)+'$'; renderMath(document.getElementById('p3-q'));
|
||||
document.getElementById('p3-fb').style.display='none'; }
|
||||
function ans(sym){ if(i>=6)return; var fb=document.getElementById('p3-fb'), correct=cur.a>cur.b?'>':(cur.a<cur.b?'<':'=');
|
||||
if(sym===correct){ score++; feedback(fb,true,'✓ Верно: $'+_grp(cur.a)+' '+correct+' '+_grp(cur.b)+'$.'); } else feedback(fb,false,'✗ Нет. Верно: $'+_grp(cur.a)+' '+correct+' '+_grp(cur.b)+'$.');
|
||||
document.getElementById('p3-s').textContent=score; i++; setTimeout(show,1100); }
|
||||
document.querySelectorAll('#p3-iv1 [data-cmp]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-cmp')); }); });
|
||||
show();
|
||||
})();
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ var arr=[],mx=_ri(1000,99999); arr.push(mx); while(arr.length<4){ var x=_ri(100,99999); if(x!==mx&&arr.indexOf(x)<0)arr.push(x); } for(var j=arr.length-1;j>0;j--){ var k=_ri(0,j),t=arr[j];arr[j]=arr[k];arr[k]=t; } cur={arr:arr,max:mx}; }
|
||||
function show(){ if(i>=5){ document.getElementById('p3-mq').innerHTML='<b>Готово! '+score+' / 5</b>'; if(score>=4){addXp(15,'p3-iv2');bumpProgress('p3',30);}else if(score>=2){addXp(8,'p3-iv2');bumpProgress('p3',16);} return; }
|
||||
gen(); document.getElementById('p3-mi').textContent=i+1;
|
||||
var html=''; cur.arr.forEach(function(x){ html+='<button class="btn primary" data-x="'+x+'">'+x.toLocaleString('ru-RU')+'</button>'; });
|
||||
document.getElementById('p3-mq').innerHTML=html;
|
||||
document.querySelectorAll('#p3-mq [data-x]').forEach(function(b){ b.addEventListener('click',function(){ ans(+b.getAttribute('data-x')); }); });
|
||||
document.getElementById('p3-mfb').style.display='none'; }
|
||||
function ans(x){ if(i>=5)return; var fb=document.getElementById('p3-mfb');
|
||||
if(x===cur.max){ score++; feedback(fb,true,'✓ Верно! Наибольшее — '+cur.max.toLocaleString('ru-RU')+'.'); } else feedback(fb,false,'✗ Нет. Наибольшее — '+cur.max.toLocaleString('ru-RU')+'.');
|
||||
document.getElementById('p3-ms').textContent=score; i++; setTimeout(show,1100); }
|
||||
show();
|
||||
})();
|
||||
}
|
||||
|
||||
/* ===================== § 4. ТОЧКА, ПРЯМАЯ, ЛУЧ, ОТРЕЗОК, ПЛОСКОСТЬ ===================== */
|
||||
function buildP4(){
|
||||
var box=document.getElementById('p4-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','4.0',
|
||||
'<p>Геометрия начинается с простых образов. Натянутая нить — это <b>отрезок</b>, луч прожектора уходит в небо как <b>луч</b>, ровная гладь озера — кусочек <b>плоскости</b>, а кончик карандаша оставляет <b>точку</b>. Из этих «кирпичиков» строят все чертежи.</p>');
|
||||
h+=makeCard('theory','Главные геометрические фигуры','4.1',
|
||||
'<p><b>Точка</b> — самая простая фигура, у неё нет размеров. Обозначают большой буквой: $A$, $B$.</p>'
|
||||
+'<p><b>Прямая</b> бесконечна в обе стороны. Обозначают малой буквой $a$ или двумя точками: прямая $AB$.</p>'
|
||||
+'<p><b>Луч</b> имеет начало и уходит в бесконечность в одну сторону. Обозначают $OA$ (первой ставят <b>начало</b> $O$).</p>'
|
||||
+'<p><b>Отрезок</b> — часть прямой между двумя точками-концами: отрезок $AB$.</p>'
|
||||
+'<p><b>Плоскость</b> — бесконечная ровная поверхность (например, поверхность стола, продолженная во все стороны).</p>');
|
||||
h+=makeCard('rule','Сколько фигур можно провести','4.2',
|
||||
'<p>Через одну точку можно провести <b>сколько угодно</b> прямых. А через <b>две</b> точки — <b>только одну</b> прямую. Это важное свойство прямой.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','4.3',
|
||||
'<p>На прямой отметили $4$ точки: $A, B, C, D$. Сколько получилось отрезков?</p>'
|
||||
+'<ol style="padding-left:22px;line-height:2">'
|
||||
+'<li>Отрезок задаётся <b>двумя</b> точками-концами.</li>'
|
||||
+'<li>Считаем пары: $AB, AC, AD, BC, BD, CD$.</li>'
|
||||
+'<li>Получилось $6$ отрезков.</li>'
|
||||
+'</ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','4.4',
|
||||
'<p>Около $2300$ лет назад древнегреческий учёный <b>Евклид</b> написал книгу «Начала», с которой и начинается геометрия. Он первым строго описал точку, прямую и плоскость. По «Началам» учились более двух тысяч лет — это один из самых издаваемых учебников в истории!</p>');
|
||||
h+='<div class="wg" id="p4-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Что изображено?</div></div>'
|
||||
+'<div class="wg-help">Определи фигуру по рисунку.</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p4-i">1</b> / 5</span><span>Очки: <b id="p4-s">0</b> / 5</span></div>'
|
||||
+'<div id="p4-fig" style="text-align:center;margin:8px 0"></div>'
|
||||
+'<div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-f="точка">точка</button><button class="btn primary" data-f="прямая">прямая</button><button class="btn primary" data-f="луч">луч</button><button class="btn primary" data-f="отрезок">отрезок</button></div>'
|
||||
+'<div class="feedback" id="p4-fb"></div></div>';
|
||||
h+='<div class="wg" id="p4-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Сколько отрезков?</div></div>'
|
||||
+'<div class="wg-help">На прямой отмечено несколько точек. Сколько всего отрезков они задают?</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p4-ci">1</b> / 5</span><span>Очки: <b id="p4-cs">0</b> / 5</span></div>'
|
||||
+'<div id="p4-cfig" style="text-align:center;margin:8px 0"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p4-ca" class="tinp" style="width:90px;text-align:center" min="0"><button class="btn primary" id="p4-cgo">Проверить</button></div>'
|
||||
+'<div class="feedback" id="p4-cfb"></div></div>';
|
||||
h+=secNav('p3','p5')+readBtn('p4');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
function figSVG(type){
|
||||
var W=300,H=70,y=40;
|
||||
var s='<svg viewBox="0 0 '+W+' '+H+'" width="300" style="max-width:100%"><defs></defs>';
|
||||
if(type==='точка'){ s+='<circle cx="150" cy="'+y+'" r="5" fill="#4f46e5"/><text x="160" y="'+(y-6)+'" font-size="13" font-weight="700" fill="#4f46e5">A</text>'; }
|
||||
else if(type==='прямая'){ s+='<line x1="14" y1="'+y+'" x2="286" y2="'+y+'" stroke="#4f46e5" stroke-width="2.4"/><polygon points="14,'+y+' 22,'+(y-4)+' 22,'+(y+4)+'" fill="#4f46e5"/><polygon points="286,'+y+' 278,'+(y-4)+' 278,'+(y+4)+'" fill="#4f46e5"/>'; }
|
||||
else if(type==='луч'){ s+='<line x1="60" y1="'+y+'" x2="286" y2="'+y+'" stroke="#0d9488" stroke-width="2.4"/><circle cx="60" cy="'+y+'" r="4.5" fill="#0d9488"/><polygon points="286,'+y+' 278,'+(y-4)+' 278,'+(y+4)+'" fill="#0d9488"/><text x="50" y="'+(y-8)+'" font-size="13" font-weight="700" fill="#0d9488">O</text>'; }
|
||||
else { s+='<line x1="70" y1="'+y+'" x2="230" y2="'+y+'" stroke="#e11d48" stroke-width="2.6"/><circle cx="70" cy="'+y+'" r="4.5" fill="#e11d48"/><circle cx="230" cy="'+y+'" r="4.5" fill="#e11d48"/><text x="62" y="'+(y-8)+'" font-size="13" font-weight="700" fill="#e11d48">A</text><text x="224" y="'+(y-8)+'" font-size="13" font-weight="700" fill="#e11d48">B</text>'; }
|
||||
return s+'</svg>';
|
||||
}
|
||||
(function(){
|
||||
var T=['точка','прямая','луч','отрезок'];
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ cur=_pick(T); }
|
||||
function show(){ if(i>=5){ document.getElementById('p4-fig').innerHTML='<b>Готово! '+score+' / 5</b>'; if(score>=4){addXp(15,'p4-iv1');bumpProgress('p4',30);}else if(score>=2){addXp(8,'p4-iv1');bumpProgress('p4',16);} return; }
|
||||
gen(); document.getElementById('p4-i').textContent=i+1;
|
||||
document.getElementById('p4-fig').innerHTML=figSVG(cur);
|
||||
document.getElementById('p4-fb').style.display='none'; }
|
||||
function ans(f){ if(i>=5)return; var fb=document.getElementById('p4-fb');
|
||||
if(f===cur){ score++; feedback(fb,true,'✓ Верно — это '+cur+'.'); } else feedback(fb,false,'✗ Нет. Это '+cur+'.');
|
||||
document.getElementById('p4-s').textContent=score; i++; setTimeout(show,1100); }
|
||||
document.querySelectorAll('#p4-iv1 [data-f]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-f')); }); });
|
||||
show();
|
||||
})();
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ var n=_ri(3,6); cur={n:n, ans:n*(n-1)/2}; }
|
||||
function show(){ if(i>=5){ document.getElementById('p4-cfig').innerHTML='<b>Готово! '+score+' / 5</b>'; document.getElementById('p4-cq')&&0; if(score>=4){addXp(15,'p4-iv2');bumpProgress('p4',30);}else if(score>=2){addXp(8,'p4-iv2');bumpProgress('p4',16);} return; }
|
||||
gen(); document.getElementById('p4-ci').textContent=i+1;
|
||||
var W=300,y=30,names=['A','B','C','D','E','F'],s='<svg viewBox="0 0 '+W+' 50" width="300" style="max-width:100%"><line x1="20" y1="'+y+'" x2="280" y2="'+y+'" stroke="#94a3b8" stroke-width="2"/>';
|
||||
for(var k=0;k<cur.n;k++){ var x=20+260*k/(cur.n-1); s+='<circle cx="'+x+'" cy="'+y+'" r="4.5" fill="#4f46e5"/><text x="'+x+'" y="'+(y-9)+'" font-size="12" font-weight="700" fill="#4f46e5" text-anchor="middle">'+names[k]+'</text>'; }
|
||||
s+='</svg>';
|
||||
document.getElementById('p4-cfig').innerHTML=s;
|
||||
document.getElementById('p4-ca').value=''; document.getElementById('p4-cfb').style.display='none'; }
|
||||
function go(){ if(i>=5)return; var fb=document.getElementById('p4-cfb'), a=parseInt(document.getElementById('p4-ca').value,10);
|
||||
if(isNaN(a)){ feedback(fb,false,'Введи число.'); return; }
|
||||
if(a===cur.ans){ score++; feedback(fb,true,'✓ Верно! '+cur.n+' точки задают '+cur.ans+' отрезков.'); } else feedback(fb,false,'✗ Нет. Правильно: '+cur.ans+' (пары из '+cur.n+' точек).');
|
||||
document.getElementById('p4-cs').textContent=score; i++; setTimeout(show,1300); }
|
||||
document.getElementById('p4-cgo').addEventListener('click',go);
|
||||
document.getElementById('p4-ca').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); });
|
||||
show();
|
||||
})();
|
||||
}
|
||||
|
||||
/* ===================== § 5. ИЗМЕРЕНИЕ ОТРЕЗКОВ. ДЛИНА ===================== */
|
||||
function buildP5(){
|
||||
var box=document.getElementById('p5-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','5.0',
|
||||
'<p>Длину измеряют каждый день: рост на медосмотре, размер стола, расстояние до школы, длину доски при ремонте. Чтобы понять друг друга, люди договорились о единых <b>единицах длины</b>.</p>');
|
||||
h+=makeCard('rule','Единицы длины','5.1',
|
||||
'<p>$1$ см $=10$ мм, $1$ дм $=10$ см, $1$ м $=10$ дм $=100$ см $=1000$ мм, $1$ км $=1000$ м.</p>'
|
||||
+'<p><b>Длина отрезка</b> — это число, которое показывает, сколько раз в нём укладывается единичный отрезок (например, $1$ см). Равные отрезки имеют равные длины.</p>');
|
||||
h+=makeCard('example','Примеры перевода','5.2',
|
||||
'<p>$3$ см $=30$ мм. $250$ см $=2$ м $50$ см. $1$ м $7$ см $=107$ см.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','5.3',
|
||||
'<p>Вырази $3$ м $5$ см в сантиметрах.</p>'
|
||||
+'<ol style="padding-left:22px;line-height:2">'
|
||||
+'<li>$1$ м $=100$ см, значит $3$ м $=300$ см.</li>'
|
||||
+'<li>Добавляем оставшиеся $5$ см: $300+5$.</li>'
|
||||
+'<li>Ответ: $3$ м $5$ см $=305$ см.</li>'
|
||||
+'</ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','5.4',
|
||||
'<p>Раньше длину мерили частями тела: локоть, ладонь, фут («ступня»). Но у всех они разные! Поэтому в $1799$ году ввели <b>метр</b>. Сегодня метр определяют через скорость света — это самый точный эталон длины в мире.</p>');
|
||||
h+='<div class="wg" id="p5-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Измерь отрезок линейкой</div></div>'
|
||||
+'<div class="wg-help">Посмотри, до какого деления линейки доходит цветной отрезок, и введи его длину в сантиметрах.</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p5-i">1</b> / 5</span><span>Очки: <b id="p5-s">0</b> / 5</span></div>'
|
||||
+'<div id="p5-fig" style="text-align:center;margin:8px 0;overflow-x:auto"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p5-a" class="tinp" style="width:90px;text-align:center" min="0"><span>см</span><button class="btn primary" id="p5-go">Проверить</button></div>'
|
||||
+'<div class="feedback" id="p5-fb"></div></div>';
|
||||
h+='<div class="wg" id="p5-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Перевод единиц длины</div></div>'
|
||||
+'<div class="wg-help">Вырази длину в указанных единицах. Ответ — число.</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p5-ui">1</b> / 6</span><span>Очки: <b id="p5-us">0</b> / 6</span></div>'
|
||||
+'<div id="p5-uq" class="qbox"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p5-ua" class="tinp" style="width:110px;text-align:center"><button class="btn primary" id="p5-ugo">Проверить</button></div>'
|
||||
+'<div class="feedback" id="p5-ufb"></div></div>';
|
||||
h+=secNav('p4','p6')+readBtn('p5');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ cur=_ri(2,14); }
|
||||
function show(){ if(i>=5){ document.getElementById('p5-fig').innerHTML='<b>Готово! '+score+' / 5</b>'; if(score>=4){addXp(15,'p5-iv1');bumpProgress('p5',30);}else if(score>=2){addXp(8,'p5-iv1');bumpProgress('p5',16);} return; }
|
||||
gen(); document.getElementById('p5-i').textContent=i+1;
|
||||
var x0=20,unit=18,W=x0+15*unit+24,H=64,yr=44;
|
||||
var s='<svg viewBox="0 0 '+W+' '+H+'" width="'+W+'" style="max-width:100%"><rect x="'+x0+'" y="'+yr+'" width="'+(15*unit)+'" height="16" fill="#fef3c7" stroke="#d97706"/>';
|
||||
for(var k=0;k<=15;k++){ var x=x0+k*unit; s+='<line x1="'+x+'" y1="'+yr+'" x2="'+x+'" y2="'+(yr+(k%5===0?16:9))+'" stroke="#92400e" stroke-width="1"/>'; if(k%5===0)s+='<text x="'+x+'" y="'+(yr-3)+'" font-size="9" fill="#92400e" text-anchor="middle">'+k+'</text>'; }
|
||||
s+='<line x1="'+x0+'" y1="32" x2="'+(x0+cur*unit)+'" y2="32" stroke="#4f46e5" stroke-width="5" stroke-linecap="round"/>';
|
||||
s+='</svg>';
|
||||
document.getElementById('p5-fig').innerHTML=s;
|
||||
document.getElementById('p5-a').value=''; document.getElementById('p5-fb').style.display='none'; }
|
||||
function go(){ if(i>=5)return; var fb=document.getElementById('p5-fb'), a=parseInt(document.getElementById('p5-a').value,10);
|
||||
if(isNaN(a)){ feedback(fb,false,'Введи число.'); return; }
|
||||
if(a===cur){ score++; feedback(fb,true,'✓ Верно! Длина '+cur+' см.'); } else feedback(fb,false,'✗ Нет. Отрезок доходит до '+cur+' см.');
|
||||
document.getElementById('p5-s').textContent=score; i++; setTimeout(show,1200); }
|
||||
document.getElementById('p5-go').addEventListener('click',go);
|
||||
document.getElementById('p5-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); });
|
||||
show();
|
||||
})();
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ var t=_ri(0,3),a;
|
||||
if(t===0){ a=_ri(2,9); cur={q:a+'\\text{ см} = \\square \\text{ мм}',ans:a*10}; }
|
||||
else if(t===1){ a=_ri(2,9); cur={q:a+'\\text{ м} = \\square \\text{ см}',ans:a*100}; }
|
||||
else if(t===2){ var m=_ri(1,5),c=_ri(5,95); cur={q:m+'\\text{ м } '+c+'\\text{ см} = \\square \\text{ см}',ans:m*100+c}; }
|
||||
else { a=_ri(2,9); cur={q:a+'\\text{ км} = \\square \\text{ м}',ans:a*1000}; } }
|
||||
function show(){ if(i>=6){ document.getElementById('p5-uq').innerHTML='<b>Готово! '+score+' / 6</b>'; if(score>=5){addXp(15,'p5-iv2');bumpProgress('p5',30);}else if(score>=3){addXp(8,'p5-iv2');bumpProgress('p5',16);} return; }
|
||||
gen(); document.getElementById('p5-ui').textContent=i+1;
|
||||
document.getElementById('p5-uq').innerHTML='$'+cur.q+'$'; renderMath(document.getElementById('p5-uq'));
|
||||
document.getElementById('p5-ua').value=''; document.getElementById('p5-ufb').style.display='none'; }
|
||||
function go(){ if(i>=6)return; var fb=document.getElementById('p5-ufb'), a=parseInt(document.getElementById('p5-ua').value,10);
|
||||
if(isNaN(a)){ feedback(fb,false,'Введи число.'); return; }
|
||||
if(a===cur.ans){ score++; feedback(fb,true,'✓ Верно! Ответ '+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+cur.ans+'.');
|
||||
document.getElementById('p5-us').textContent=score; i++; setTimeout(show,1200); }
|
||||
document.getElementById('p5-ugo').addEventListener('click',go);
|
||||
document.getElementById('p5-ua').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); });
|
||||
show();
|
||||
})();
|
||||
}
|
||||
|
||||
/* ===================== § 6. КООРДИНАТНЫЙ ЛУЧ ===================== */
|
||||
function buildP6(){
|
||||
var box=document.getElementById('p6-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','6.0',
|
||||
'<p>Линейка, шкала термометра, разметка на стадионе, числовая ось в играх-«ходилках» — всё это <b>координатные лучи</b>. Каждому числу соответствует своя точка, и наоборот.</p>');
|
||||
h+=makeCard('theory','Что такое координатный луч','6.1',
|
||||
'<p><b>Координатный луч</b> — это луч, на котором выбрали: начало $O$ (ему соответствует число $0$), <b>направление</b> (обычно вправо) и <b>единичный отрезок</b>.</p>'
|
||||
+'<p>Число, соответствующее точке, называют её <b>координатой</b>. Запись $A(3)$ означает: точка $A$ имеет координату $3$.</p>');
|
||||
h+=makeCard('rule','Как отметить число','6.2',
|
||||
'<p>Чтобы отметить число $5$, откладывают от начала $O$ пять единичных отрезков вправо. Чем больше число — тем правее точка. Поэтому на луче из двух чисел больше то, что <b>правее</b>.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','6.3',
|
||||
'<p>Отметим число $7$ на координатном луче с единичным отрезком в одну клетку.</p>'
|
||||
+'<ol style="padding-left:22px;line-height:2">'
|
||||
+'<li>Ставим начало $O$ и число $0$.</li>'
|
||||
+'<li>Откладываем вправо $7$ единичных отрезков.</li>'
|
||||
+'<li>В конце ставим точку и подписываем $A(7)$.</li>'
|
||||
+'</ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','6.4',
|
||||
'<p>Идею изображать числа точками на прямой развил французский математик <b>Рене Декарт</b> в XVII веке. Позже из координатного луча выросла целая координатная плоскость — её ты изучишь в $6$ классе.</p>');
|
||||
h+='<div class="wg" id="p6-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Назови координату</div></div>'
|
||||
+'<div class="wg-help">Какое число соответствует отмеченной точке?</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p6-i">1</b> / 6</span><span>Очки: <b id="p6-s">0</b> / 6</span></div>'
|
||||
+'<div id="p6-fig"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p6-a" class="tinp" style="width:90px;text-align:center" min="0"><button class="btn primary" id="p6-go">Проверить</button></div>'
|
||||
+'<div class="feedback" id="p6-fb"></div></div>';
|
||||
h+='<div class="wg" id="p6-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Расстояние между точками</div></div>'
|
||||
+'<div class="wg-help">На сколько единичных отрезков одна точка дальше другой?</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p6-di">1</b> / 5</span><span>Очки: <b id="p6-ds">0</b> / 5</span></div>'
|
||||
+'<div id="p6-dfig"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p6-da" class="tinp" style="width:90px;text-align:center" min="0"><button class="btn primary" id="p6-dgo">Проверить</button></div>'
|
||||
+'<div class="feedback" id="p6-dfb"></div></div>';
|
||||
h+=secNav('p5','p7')+readBtn('p6');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ cur=_ri(1,10); }
|
||||
function show(){ if(i>=6){ document.getElementById('p6-fig').innerHTML=''; document.getElementById('p6-fb').className='feedback'; document.getElementById('p6-fb').style.display='block'; document.getElementById('p6-fb').innerHTML='<b>Готово! '+score+' / 6</b>'; if(score>=5){addXp(15,'p6-iv1');bumpProgress('p6',30);}else if(score>=3){addXp(8,'p6-iv1');bumpProgress('p6',16);} return; }
|
||||
gen(); document.getElementById('p6-i').textContent=i+1;
|
||||
document.getElementById('p6-fig').innerHTML=Math6.numberLine({min:0,max:11,minor:1,major:1,width:560,ray:true,marks:[{v:cur,label:'A',color:'#4f46e5'}]});
|
||||
document.getElementById('p6-a').value=''; document.getElementById('p6-fb').style.display='none'; }
|
||||
function go(){ if(i>=6)return; var fb=document.getElementById('p6-fb'), a=parseInt(document.getElementById('p6-a').value,10);
|
||||
if(isNaN(a)){ feedback(fb,false,'Введи число.'); return; }
|
||||
if(a===cur){ score++; feedback(fb,true,'✓ Верно! Координата точки A равна '+cur+'.'); } else feedback(fb,false,'✗ Нет. Координата A равна '+cur+'.');
|
||||
document.getElementById('p6-s').textContent=score; i++; setTimeout(show,1100); }
|
||||
document.getElementById('p6-go').addEventListener('click',go);
|
||||
document.getElementById('p6-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); });
|
||||
show();
|
||||
})();
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ var a=_ri(1,5), b=_ri(6,11); cur={a:a,b:b,d:b-a}; }
|
||||
function show(){ if(i>=5){ document.getElementById('p6-dfig').innerHTML=''; var fb0=document.getElementById('p6-dfb'); fb0.className='feedback'; fb0.style.display='block'; fb0.innerHTML='<b>Готово! '+score+' / 5</b>'; if(score>=4){addXp(15,'p6-iv2');bumpProgress('p6',30);}else if(score>=2){addXp(8,'p6-iv2');bumpProgress('p6',16);} return; }
|
||||
gen(); document.getElementById('p6-di').textContent=i+1;
|
||||
document.getElementById('p6-dfig').innerHTML=Math6.numberLine({min:0,max:11,minor:1,major:1,width:560,ray:true,marks:[{v:cur.a,label:'A',color:'#4f46e5'},{v:cur.b,label:'B',color:'#e11d48',above:false}]});
|
||||
document.getElementById('p6-da').value=''; document.getElementById('p6-dfb').style.display='none'; }
|
||||
function go(){ if(i>=5)return; var fb=document.getElementById('p6-dfb'), a=parseInt(document.getElementById('p6-da').value,10);
|
||||
if(isNaN(a)){ feedback(fb,false,'Введи число.'); return; }
|
||||
if(a===cur.d){ score++; feedback(fb,true,'✓ Верно! Расстояние '+cur.d+' (от '+cur.a+' до '+cur.b+').'); } else feedback(fb,false,'✗ Нет. Расстояние '+cur.d+' = '+cur.b+' − '+cur.a+'.');
|
||||
document.getElementById('p6-ds').textContent=score; i++; setTimeout(show,1200); }
|
||||
document.getElementById('p6-dgo').addEventListener('click',go);
|
||||
document.getElementById('p6-da').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); });
|
||||
show();
|
||||
})();
|
||||
}
|
||||
|
||||
/* ===================== ДАННЫЕ САЙДБАРА / ГЛОССАРИЯ ===================== */
|
||||
var SIDEBARS = {
|
||||
p1:{ title:'Шпаргалка § 1', rows:[
|
||||
@@ -345,6 +633,27 @@ var SIDEBARS = {
|
||||
['Нуль','не натуральное, но нужно в записи'],
|
||||
['Класс','группа из 3 разрядов'],
|
||||
['Классы','единицы, тысячи, миллионы…'] ]},
|
||||
p3:{ title:'Шпаргалка § 3', rows:[
|
||||
['Больше цифр','то число и больше: $1000>999$'],
|
||||
['Поровну цифр','сравниваем поразрядно слева'],
|
||||
['Знаки','$<$ меньше, $>$ больше, $=$ равно'],
|
||||
['Острый угол','смотрит на меньшее число'] ]},
|
||||
p4:{ title:'Шпаргалка § 4', rows:[
|
||||
['Точка','нет размеров; $A$'],
|
||||
['Прямая','бесконечна в обе стороны; $a$'],
|
||||
['Луч','начало $O$ + бесконечность в одну сторону'],
|
||||
['Отрезок','часть прямой между концами $AB$'],
|
||||
['Через 2 точки','ровно одна прямая'] ]},
|
||||
p5:{ title:'Шпаргалка § 5', rows:[
|
||||
['1 см','$=10$ мм'],
|
||||
['1 дм','$=10$ см'],
|
||||
['1 м','$=100$ см $=1000$ мм'],
|
||||
['1 км','$=1000$ м'] ]},
|
||||
p6:{ title:'Шпаргалка § 6', rows:[
|
||||
['Начало','$O$ — это число $0$'],
|
||||
['Единичный отрезок','задаёт «шаг»'],
|
||||
['Координата','число точки: $A(3)$'],
|
||||
['Правее','значит больше'] ]},
|
||||
final:{ title:'Финал главы 1', rows:[
|
||||
['5 боссов','разряды, округление, действия, степень'],
|
||||
['Победа','4 из 5 и больше'],
|
||||
@@ -353,6 +662,10 @@ var SIDEBARS = {
|
||||
var TIPS = [
|
||||
{ sec:'p1', html:'Не бросайся считать сразу. Сначала спроси себя: «что дано?» и «что нужно найти?» — половина дела готова.' },
|
||||
{ sec:'p2', html:'Разбивай длинное число на классы по три цифры справа: $12\\,345\\,678$. Так его легко прочитать.' },
|
||||
{ sec:'p3', html:'Сначала глянь на длину записи: где цифр больше — то число и больше. Если поровну — сравнивай поразрядно слева направо.' },
|
||||
{ sec:'p4', html:'Запоминай по концам: у отрезка два конца, у луча — один (его начало), у прямой — ни одного.' },
|
||||
{ sec:'p5', html:'Переводя единицы, держи в голове «лесенку»: мм → см → дм → м, каждый шаг в 10 раз. От м до км — в 1000 раз.' },
|
||||
{ sec:'p6', html:'Координата — это сколько единичных отрезков от нуля. Чем правее точка, тем больше её координата.' },
|
||||
{ sec:'final', html:'Перед ударом прикинь ответ в уме. Для степени $a^n$ — это $a$, умноженное само на себя $n$ раз.' }
|
||||
];
|
||||
var GLOSSARY = [
|
||||
@@ -360,7 +673,7 @@ var GLOSSARY = [
|
||||
{ term:'разряд', def:'Место цифры в записи числа: единицы, десятки, сотни и т. д.', sec:'p2', aliases:['разряд','разряда','разряде','разряды','разрядов'] },
|
||||
{ term:'класс', def:'Группа из трёх соседних разрядов: единицы, тысячи, миллионы.', sec:'p2', aliases:['класс','класса','классе','классы','классов'] }
|
||||
];
|
||||
var BUILDERS = { p1:buildP1, p2:buildP2, final:buildFinal };
|
||||
var BUILDERS = { p1:buildP1, p2:buildP2, p3:buildP3, p4:buildP4, p5:buildP5, p6:buildP6, final:buildFinal };
|
||||
Object.assign(window.M6, { sidebars:SIDEBARS, tips:TIPS, glossary:GLOSSARY, builders:BUILDERS });
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user