feat(math6): обогащение всех глав — хук, разбор по шагам, факты в каждом §
Каждый содержательный параграф 6 глав дополнен (Sonnet, по главе): - карточка «Где это в жизни» (реальный контекст темы); - «Разбор по шагам» (нумерованный алгоритм решения); - «А знаешь ли ты?» (интересный факт/история); - доведено до ≥2 рабочих интерактивов (где было меньше — добавлены). Движок/общие файлы не трогались; структура M6/порядок init сохранены. Проверено: тесты math6 18/18, честный рендер 4 глав — контент появляется, рантайм-ошибок нет (только jsdom scrollTo-заглушка). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
@@ -100,14 +100,24 @@ var ROM=['','I','II','III','IV'];
|
||||
/* ===================== § 1. ДЕКАРТОВА СИСТЕМА КООРДИНАТ ===================== */
|
||||
function buildP1(){
|
||||
var box=document.getElementById('p1-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','1.0',
|
||||
'<p>Каждый раз, когда ты открываешь карту в телефоне или играешь в стратегию на компьютере, работает именно эта идея: у каждого места есть пара чисел — «сколько вправо» и «сколько вверх». Координаты используют GPS-навигаторы, пилоты самолётов, геологи, разработчики видеоигр и даже хирурги при операциях с точным позиционированием робота.</p>');
|
||||
h+=makeCard('theory','Координаты на плоскости','1.1',
|
||||
'<p>Две перпендикулярные координатные прямые с общим началом $O$ образуют <b>прямоугольную (декартову) систему координат</b>. Горизонтальная ось — ось <b>абсцисс</b> $Ox$, вертикальная — ось <b>ординат</b> $Oy$.</p>'
|
||||
+'<p>Положение точки задаёт <b>пара чисел</b> $(x;\\,y)$: первое — абсцисса (по $Ox$), второе — ордината (по $Oy$). Например, $A(3;\\,4)$.</p>');
|
||||
h+=makeCard('rule','Четверти','1.2',
|
||||
h+=makeCard('example','Разбор по шагам','1.2',
|
||||
'<p>Как отметить точку $A(3;\\,4)$ на координатной плоскости?</p>'
|
||||
+'<ol><li>Найди на оси $Ox$ значение $x = 3$ и проведи мысленно вертикальную линию.</li>'
|
||||
+'<li>Найди на оси $Oy$ значение $y = 4$ и проведи мысленно горизонтальную линию.</li>'
|
||||
+'<li>Точка пересечения этих двух линий и есть $A(3;\\,4)$.</li>'
|
||||
+'<li>Проверь четверть: $x > 0$, $y > 0$ — значит, точка в I четверти. Верно!</li></ol>');
|
||||
h+=makeCard('rule','Четверти','1.3',
|
||||
'<p>Оси делят плоскость на четыре <b>четверти</b> (нумеруют против часовой стрелки от правой верхней):</p>'
|
||||
+'<table class="tbl"><tr><th>Четверть</th><th>I</th><th>II</th><th>III</th><th>IV</th></tr>'
|
||||
+'<tr><td>знак $x$</td><td>+</td><td>−</td><td>−</td><td>+</td></tr>'
|
||||
+'<tr><td>знак $y$</td><td>+</td><td>+</td><td>−</td><td>−</td></tr></table>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','1.4',
|
||||
'<p>Систему координат изобрёл французский математик и философ <b>Рене Декарт</b> в XVII веке. По легенде, идея пришла к нему, когда он лежал в постели и наблюдал за мухой на потолке: он понял, что положение мухи можно точно описать двумя числами — расстоянием до двух стен. Так родилась «декартова» система, которую сегодня используют в любом учебнике математики и любой компьютерной программе.</p>');
|
||||
h+='<div class="wg" id="p1-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прочитай координаты</div></div>'
|
||||
+'<div class="wg-help">Определи координаты отмеченной точки и введи абсциссу и ординату.</div>'
|
||||
+'<div class="score-display"><span>Точка <b id="p1-i">1</b> / 6</span><span>Очки: <b id="p1-s">0</b> / 6</span></div>'
|
||||
@@ -120,6 +130,12 @@ function buildP1(){
|
||||
+'<div id="p1-qfig"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-q="1">I</button><button class="btn primary" data-q="2">II</button><button class="btn primary" data-q="3">III</button><button class="btn primary" data-q="4">IV</button></div>'
|
||||
+'<div class="feedback" id="p1-qfb"></div></div>';
|
||||
h+='<div class="wg" id="p1-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Угадай, в какой четверти?</div></div>'
|
||||
+'<div class="wg-help">Тебе даны знаки координат — определи номер четверти без графика.</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p1-ti">1</b> / 6</span><span>Очки: <b id="p1-ts">0</b> / 6</span></div>'
|
||||
+'<div id="p1-tq" class="qbox" style="font-size:1.1rem;text-align:center;padding:14px 0"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-tq="1">I</button><button class="btn primary" data-tq="2">II</button><button class="btn primary" data-tq="3">III</button><button class="btn primary" data-tq="4">IV</button></div>'
|
||||
+'<div class="feedback" id="p1-tfb"></div></div>';
|
||||
h+=secNav(null,'p2')+readBtn('p1');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
@@ -151,16 +167,39 @@ function buildP1(){
|
||||
document.getElementById('p1-qs').textContent=score; i++; setTimeout(show,1200); }
|
||||
document.querySelectorAll('#p1-iv2 [data-q]').forEach(function(b){ b.addEventListener('click',function(){ ans(+b.getAttribute('data-q')); }); }); show();
|
||||
})();
|
||||
|
||||
(function(){
|
||||
var COMB=[{sx:'+',sy:'+',q:1},{sx:'-',sy:'+',q:2},{sx:'-',sy:'-',q:3},{sx:'+',sy:'-',q:4}];
|
||||
var i=0,score=0,cur=null;
|
||||
function show(){ if(i>=6){ document.getElementById('p1-tq').innerHTML='<b>Готово!</b> Результат: '+score+' / 6'; if(score>=5){addXp(15,'p1-iv3');bumpProgress('p1',20);}else if(score>=3){addXp(7,'p1-iv3');bumpProgress('p1',10);} return; }
|
||||
cur=_pick(COMB); document.getElementById('p1-ti').textContent=i+1;
|
||||
document.getElementById('p1-tq').innerHTML='Точка: $x '+cur.sx+'$, $y '+cur.sy+'$. Четверть?';
|
||||
renderMath(document.getElementById('p1-tq'));
|
||||
document.getElementById('p1-tfb').style.display='none'; }
|
||||
function ans(q){ if(i>=6)return; var fb=document.getElementById('p1-tfb');
|
||||
if(q===cur.q){ score++; feedback(fb,true,'✓ Верно — '+ROM[cur.q]+' четверть.'); } else feedback(fb,false,'✗ Нет. '+ROM[cur.q]+' четверть (x'+cur.sx+', y'+cur.sy+').');
|
||||
document.getElementById('p1-ts').textContent=score; i++; setTimeout(show,1200); }
|
||||
document.querySelectorAll('#p1-iv3 [data-tq]').forEach(function(b){ b.addEventListener('click',function(){ ans(+b.getAttribute('data-tq')); }); }); show();
|
||||
})();
|
||||
}
|
||||
|
||||
/* ===================== § 2. ГРАФИКИ РЕАЛЬНЫХ ПРОЦЕССОВ ===================== */
|
||||
function buildP2(){
|
||||
var box=document.getElementById('p2-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','2.0',
|
||||
'<p>Каждый день ты видишь графики: прогноз погоды (температура по часам), курс доллара (цена по дням), пульс на спортивных часах (удары по минутам). Врачи читают кардиограмму — это тоже график. Умея читать любой график, ты понимаешь реальный процесс без длинных таблиц чисел.</p>');
|
||||
h+=makeCard('theory','Что показывает график','2.1',
|
||||
'<p><b>График</b> наглядно показывает, как одна величина зависит от другой: температура от времени, путь от времени, уровень воды от времени.</p>'
|
||||
+'<p>Чтобы прочитать значение, находят точку на горизонтальной оси, поднимаются до линии графика и смотрят значение на вертикальной оси.</p>');
|
||||
h+=makeCard('example','Пример','2.2',
|
||||
'<p>Если в $2$ ч температура была $4°$, то точка графика с абсциссой $2$ имеет ординату $4$.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','2.2',
|
||||
'<p>Как прочитать температуру в 3 ч по графику?</p>'
|
||||
+'<ol><li>Найди на горизонтальной оси (время) отметку $3$ ч.</li>'
|
||||
+'<li>Из этой точки проведи мысленно вертикальную линию вверх до кривой графика.</li>'
|
||||
+'<li>Из точки пересечения проведи горизонтальную линию влево до оси температур.</li>'
|
||||
+'<li>Прочитай значение на вертикальной оси: $6°C$.</li>'
|
||||
+'<li>Вывод: в 3 ч было $6°C$.</li></ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','2.3',
|
||||
'<p>Первые графики температур и давления начали строить метеорологи в XVIII веке. Уже тогда учёные поняли: одна кривая на графике заменяет целую страницу цифр и сразу показывает тренд — растёт, падает или стоит на месте. Сегодня биржевые трейдеры принимают решения за секунды именно благодаря умению мгновенно «читать» линию на графике.</p>');
|
||||
h+='<div class="wg" id="p2-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прочитай значение по графику</div></div>'
|
||||
+'<div class="wg-help">Температура (°C) в зависимости от времени (ч). Ответь на вопрос по графику.</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p2-i">1</b> / 5</span><span>Очки: <b id="p2-s">0</b> / 5</span></div>'
|
||||
@@ -173,6 +212,12 @@ function buildP2(){
|
||||
+'<div id="p2-cfig"></div><div id="p2-cq" class="qbox"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p2-ca" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="p2-cgo">Проверить</button></div>'
|
||||
+'<div class="feedback" id="p2-cfb"></div></div>';
|
||||
h+='<div class="wg" id="p2-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Рост, спад или стоп?</div></div>'
|
||||
+'<div class="wg-help">На каком участке линия графика растёт, падает или остаётся горизонтальной?</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p2-di">1</b> / 5</span><span>Очки: <b id="p2-ds">0</b> / 5</span></div>'
|
||||
+'<div id="p2-dq" class="qbox"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-dv="up">Растёт</button><button class="btn primary" data-dv="flat">Стоит</button><button class="btn primary" data-dv="down">Падает</button></div>'
|
||||
+'<div class="feedback" id="p2-dfb"></div></div>';
|
||||
h+=secNav('p1','p3')+readBtn('p2');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
@@ -210,16 +255,48 @@ function buildP2(){
|
||||
document.getElementById('p2-cgo').addEventListener('click',go);
|
||||
document.getElementById('p2-ca').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||||
})();
|
||||
|
||||
(function(){
|
||||
var SEGS=[
|
||||
{q:'Температура с 0 ч до 1 ч: как меняется?', ans:'up'},
|
||||
{q:'Температура с 1 ч до 2 ч: как меняется?', ans:'flat'},
|
||||
{q:'Температура с 2 ч до 3 ч: как меняется?', ans:'up'},
|
||||
{q:'Температура с 3 ч до 4 ч: как меняется?', ans:'down'},
|
||||
{q:'Температура с 4 ч до 5 ч: как меняется?', ans:'flat'},
|
||||
{q:'Температура с 5 ч до 6 ч: как меняется?', ans:'down'}
|
||||
];
|
||||
var i=0,score=0;
|
||||
function show(){ if(i>=5){ document.getElementById('p2-dq').innerHTML='<b>Готово!</b> Результат: '+score+' / 5'; if(score>=4){addXp(12,'p2-iv3');bumpProgress('p2',25);}else if(score>=2){addXp(6,'p2-iv3');bumpProgress('p2',12);} return; }
|
||||
document.getElementById('p2-di').textContent=i+1;
|
||||
document.getElementById('p2-dq').innerHTML=SEGS[i].q;
|
||||
document.getElementById('p2-dfb').style.display='none'; }
|
||||
function ans(v){ if(i>=5)return; var fb=document.getElementById('p2-dfb'), cor=SEGS[i].ans;
|
||||
var labels={up:'Растёт',flat:'Стоит',down:'Падает'};
|
||||
if(v===cor){ score++; feedback(fb,true,'✓ Верно: '+labels[cor]+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+labels[cor]+'.');
|
||||
document.getElementById('p2-ds').textContent=score; i++; setTimeout(show,1200); }
|
||||
document.querySelectorAll('#p2-iv3 [data-dv]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-dv')); }); }); show();
|
||||
})();
|
||||
}
|
||||
|
||||
/* ===================== § 3. ГРАФИКИ ПРЯМОЙ И ОБРАТНОЙ ПРОПОРЦИОНАЛЬНОСТИ ===================== */
|
||||
function buildP3(){
|
||||
var box=document.getElementById('p3-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','3.0',
|
||||
'<p>Прямая пропорциональность — это скорость и путь: проедешь вдвое больше часов — путь вдвое больше ($s = v \\cdot t$, где $v$ — коэффициент). Обратная — работа и время: чем больше рабочих, тем меньше часов ($t = A / n$). Курс обмена валюты, рецепты (больше порций — больше ингредиентов), топливо в баке — всё это пропорциональные зависимости.</p>');
|
||||
h+=makeCard('theory','Прямая пропорциональность','3.1',
|
||||
'<p>Если $y = kx$ (где $k\\ne 0$ — коэффициент), то $y$ <b>прямо пропорционален</b> $x$. График — <b>прямая</b>, проходящая через начало координат.</p>'
|
||||
+'<p>Чем больше $k$, тем «круче» прямая. При $k>0$ прямая идёт вверх, при $k<0$ — вниз.</p>');
|
||||
h+=makeCard('theory','Обратная пропорциональность','3.2',
|
||||
'<p>Если $y = \\dfrac{k}{x}$ (где $k\\ne 0$), то $y$ <b>обратно пропорционален</b> $x$. График — <b>гипербола</b> (две ветви), он не проходит через начало координат.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','3.3',
|
||||
'<p>Задача: прямая $y = kx$ проходит через точку $(2;\\,6)$. Найди $k$.</p>'
|
||||
+'<ol><li>Подставь координаты точки в формулу: $6 = k \\cdot 2$.</li>'
|
||||
+'<li>Раздели обе части на $2$: $k = 6 : 2 = 3$.</li>'
|
||||
+'<li>Формула зависимости: $y = 3x$.</li>'
|
||||
+'<li>Проверка: при $x = 2$ получаем $y = 3 \\cdot 2 = 6$. Верно!</li></ol>'
|
||||
+'<p>Аналогично для $y = \\frac{k}{x}$: если точка $(4;\\,3)$, то $k = 4 \\cdot 3 = 12$.</p>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','3.4',
|
||||
'<p>Гипербола — одна из <b>конических сечений</b>: если разрезать конус плоскостью под определённым углом, срез будет гиперболой. Та же форма встречается в траекториях некоторых комет, в форме некоторых антенн и в архитектуре башен-градирен на электростанциях. Прямая пропорциональность же лежит в основе закона Ома ($I = U/R$ при фиксированном $U$) и закона Гука.</p>');
|
||||
h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">График y = kx</div></div>'
|
||||
+'<div class="wg-help">Двигай коэффициент $k$ — смотри, как меняется наклон прямой.</div>'
|
||||
+'<div class="sliders"><label>$k$ = <b id="p3-kv">2</b><input type="range" id="p3-k" min="-3" max="3" step="1" value="2"></label></div>'
|
||||
@@ -230,6 +307,12 @@ function buildP3(){
|
||||
+'<div id="p3-cfig"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-t="kx">прямая ($y=kx$)</button><button class="btn primary" data-t="kdx">обратная ($y=\\frac{k}{x}$)</button></div>'
|
||||
+'<div class="feedback" id="p3-cfb"></div></div>';
|
||||
h+='<div class="wg" id="p3-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Найди коэффициент k</div></div>'
|
||||
+'<div class="wg-help">Прямая $y = kx$ проходит через заданную точку. Найди $k$.</div>'
|
||||
+'<div class="score-display"><span>Задача <b id="p3-ki">1</b> / 6</span><span>Очки: <b id="p3-ks">0</b> / 6</span></div>'
|
||||
+'<div id="p3-kq" class="qbox"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$k = $ <input type="number" id="p3-ka" class="tinp" style="width:80px;text-align:center"><button class="btn primary" id="p3-kgo">Проверить</button></div>'
|
||||
+'<div class="feedback" id="p3-kfb"></div></div>';
|
||||
h+=secNav('p2','app')+readBtn('p3');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
@@ -255,19 +338,52 @@ function buildP3(){
|
||||
document.getElementById('p3-s').textContent=score; i++; setTimeout(show,1300); }
|
||||
document.querySelectorAll('#p3-iv2 [data-t]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-t')); }); }); show();
|
||||
})();
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ var a=_pick([2,3,4,5,6]), b=_pick([2,3,4,5]); cur={a:a,b:a*b,k:b}; }
|
||||
function show(){ if(i>=6){ document.getElementById('p3-kq').innerHTML='<b>Готово!</b> Результат: '+score+' / 6'; if(score>=5){addXp(15,'p3-iv3');bumpProgress('p3',25);}else if(score>=3){addXp(8,'p3-iv3');bumpProgress('p3',12);} return; }
|
||||
gen(); document.getElementById('p3-ki').textContent=i+1;
|
||||
document.getElementById('p3-kq').innerHTML='Прямая $y = kx$ проходит через точку $('+cur.a+';\\,'+cur.b+')$. Найди $k$.';
|
||||
renderMath(document.getElementById('p3-kq'));
|
||||
document.getElementById('p3-ka').value=''; document.getElementById('p3-kfb').style.display='none'; }
|
||||
function go(){ if(i>=6)return; var fb=document.getElementById('p3-kfb'), v=parseInt(document.getElementById('p3-ka').value,10);
|
||||
if(isNaN(v)){ feedback(fb,false,'Введи целое число.'); return; }
|
||||
if(v===cur.k){ score++; feedback(fb,true,'✓ Верно: $k = '+cur.k+'$ ('+cur.b+' : '+cur.a+' = '+cur.k+').'); } else feedback(fb,false,'✗ Нет. $k = '+cur.b+' : '+cur.a+' = '+cur.k+'$.');
|
||||
renderMath(fb); document.getElementById('p3-ks').textContent=score; i++; setTimeout(show,1400); }
|
||||
document.getElementById('p3-kgo').addEventListener('click',go);
|
||||
document.getElementById('p3-ka').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||||
})();
|
||||
}
|
||||
|
||||
/* ===================== § 5. МАТЕМАТИКА ВОКРУГ НАС ===================== */
|
||||
function buildApp(){
|
||||
var box=document.getElementById('app-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','5.0',
|
||||
'<p>Координатная плоскость и графики сопровождают тебя везде: карта города — это координатная сетка; расписание поездов и автобусов — это график пути от времени; ценники в магазине описываются прямой пропорциональностью. Пилоты, капитаны кораблей, программисты, дизайнеры и врачи ежедневно работают с системами координат и графиками.</p>');
|
||||
h+=makeCard('theory','Графики и координаты вокруг нас','5.1',
|
||||
'<p>Координаты — это «адрес» на карте, в игре, на экране. Графики показывают курс валют, погоду, расписание движения, рост и вес. Уметь читать график — полезный жизненный навык.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','5.2',
|
||||
'<p>Машина едет со скоростью $60$ км/ч. Составим и прочитаем график пути.</p>'
|
||||
+'<ol><li>Формула: $s = 60 \\cdot t$ — это прямая пропорциональность.</li>'
|
||||
+'<li>За $1$ ч: $s = 60$ км. За $2$ ч: $s = 120$ км. За $3$ ч: $s = 180$ км.</li>'
|
||||
+'<li>Отметим точки $(1;60)$, $(2;120)$, $(3;180)$ и соединим прямой.</li>'
|
||||
+'<li>Горизонтальный участок графика означал бы остановку: путь не растёт, но время идёт.</li>'
|
||||
+'<li>По графику легко найти путь за любое время — просто читаем координату.</li></ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','5.3',
|
||||
'<p>В видеоиграх каждый пиксель на экране задаётся парой координат $(x, y)$, где $(0, 0)$ — обычно левый верхний угол. Создатели игр описывают движение персонажа формулами прямой пропорциональности: $x = x_0 + v_x \\cdot t$, $y = y_0 + v_y \\cdot t$. Это точно такая же математика, которую вы изучаете сейчас — только работающая со скоростью десятков кадров в секунду.</p>');
|
||||
h+='<div class="wg" id="app-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Путь и время</div></div>'
|
||||
+'<div class="wg-help">График пути (км) от времени (ч). Ответь на вопрос.</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="app-i">1</b> / 5</span><span>Очки: <b id="app-s">0</b> / 5</span></div>'
|
||||
+'<div id="app-fig"></div><div id="app-q" class="qbox"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="app-a" class="tinp" style="width:90px;text-align:center"><button class="btn primary" id="app-go">Проверить</button></div>'
|
||||
+'<div class="feedback" id="app-fb"></div></div>';
|
||||
h+='<div class="wg" id="app-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Скорость по графику пути</div></div>'
|
||||
+'<div class="wg-help">По двум точкам графика пути вычисли скорость: $v = \\Delta s / \\Delta t$.</div>'
|
||||
+'<div class="score-display"><span>Задача <b id="app-vi">1</b> / 5</span><span>Очки: <b id="app-vs">0</b> / 5</span></div>'
|
||||
+'<div id="app-vq" class="qbox"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$v = $ <input type="number" id="app-va" class="tinp" style="width:90px;text-align:center"> км/ч <button class="btn primary" id="app-vgo">Проверить</button></div>'
|
||||
+'<div class="feedback" id="app-vfb"></div></div>';
|
||||
h+=secNav('p3','final')+readBtn('app');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
@@ -294,6 +410,27 @@ function buildApp(){
|
||||
document.getElementById('app-go').addEventListener('click',go);
|
||||
document.getElementById('app-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||||
})();
|
||||
|
||||
(function(){
|
||||
var VSEGS=[
|
||||
{t1:0,s1:0,t2:1,s2:40},{t1:1,s1:40,t2:2,s2:80},
|
||||
{t1:4,s1:120,t2:5,s2:160},{t1:0,s1:0,t2:2,s2:80},{t1:3,s1:80,t2:5,s2:160}
|
||||
];
|
||||
var i=0,score=0;
|
||||
function show(){ if(i>=5){ document.getElementById('app-vq').innerHTML='<b>Готово!</b> Результат: '+score+' / 5'; if(score>=4){addXp(15,'app-iv2');bumpProgress('app',30);}else if(score>=2){addXp(7,'app-iv2');bumpProgress('app',15);} return; }
|
||||
var seg=VSEGS[i]; document.getElementById('app-vi').textContent=i+1;
|
||||
var ds=seg.s2-seg.s1, dt=seg.t2-seg.t1;
|
||||
document.getElementById('app-vq').innerHTML='С '+seg.t1+' ч до '+seg.t2+' ч путь вырос с '+seg.s1+' км до '+seg.s2+' км. Найди среднюю скорость (км/ч).';
|
||||
document.getElementById('app-va').value=''; document.getElementById('app-vfb').style.display='none';
|
||||
document.getElementById('app-vq')._ans=Math.round(ds/dt); }
|
||||
function go(){ if(i>=5)return; var fb=document.getElementById('app-vfb'), ans=document.getElementById('app-vq')._ans, v=parseInt(document.getElementById('app-va').value,10);
|
||||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||||
var seg=VSEGS[i], ds=seg.s2-seg.s1, dt=seg.t2-seg.t1;
|
||||
if(v===ans){ score++; feedback(fb,true,'✓ Верно: '+ds+' / '+dt+' = '+ans+' км/ч.'); } else feedback(fb,false,'✗ Нет. '+ds+' : '+dt+' = '+ans+' км/ч.');
|
||||
document.getElementById('app-vs').textContent=score; i++; setTimeout(show,1300); }
|
||||
document.getElementById('app-vgo').addEventListener('click',go);
|
||||
document.getElementById('app-va').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||||
})();
|
||||
}
|
||||
|
||||
/* ===================== ФИНАЛ ГЛАВЫ — БОССЫ ===================== */
|
||||
|
||||
Reference in New Issue
Block a user