Maxim Dolgolyov
51db000545
Math6Anim.pieGrow (растущие сектора, §7 — заменил статичный Math6.pie, цвета синхронны легенде), balanceScale (весы a·d ? b·c, §3, кнопка «другой пример»), constAreaRect (обратная проп. = постоянная площадь, §4, ползунок x). Headless-safe. Тесты math6: 20/20 (поправлен ассерт §7 svg→canvas). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
742 lines
83 KiB
HTML
742 lines
83 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||
<meta http-equiv="Pragma" content="no-cache">
|
||
<meta http-equiv="Expires" content="0">
|
||
<title>Математика 6 · Глава 2 · Проценты и пропорции</title>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
|
||
onload="renderMathInElement(document.body,{delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false},{left:'\\[',right:'\\]',display:true},{left:'\\(',right:'\\)',display:false}],throwOnError:false})"></script>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Unbounded:wght@700;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="/css/math6.css">
|
||
<script src="/js/api.js" defer></script>
|
||
<script src="/js/xp.js" defer></script>
|
||
<script src="/js/math6_svg.js" defer></script>
|
||
<script src="/js/math6_anim.js" defer></script>
|
||
<script src="/js/math6_engine.js" defer></script>
|
||
<style>:root{--pri:#0891b2;--pri2:#0e7490;--pri-soft:#cffafe;--acc:#06b6d4;--acc2:#0891b2;--acc-soft:#ecfeff}</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hdr" data-wm="%">
|
||
<div class="hdr-row">
|
||
<div>
|
||
<h1>Математика 6 · Глава 2</h1>
|
||
<div class="hdr-sub">Проценты · задачи на проценты · пропорция · прямая и обратная зависимости · масштаб · диаграммы</div>
|
||
</div>
|
||
<div class="hdr-side">
|
||
<a href="/textbook/math-6" class="hdr-btn" title="Ко всем главам"><svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg> К математике 6</a>
|
||
<button id="search-btn" class="hdr-btn" title="Поиск (Ctrl+K)"><svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg> <span>Поиск</span></button>
|
||
<button id="sidebar-btn" class="hdr-btn" title="Шпаргалка"><svg class="ic" viewBox="0 0 24 24"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="14" y2="18"/></svg> Шпаргалка</button>
|
||
<button id="theme-btn" class="hdr-btn" title="Сменить тему"><svg class="ic" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg> <span id="theme-lab">Тёмная</span></button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<div class="col-main">
|
||
<section class="hero" data-wm="%">
|
||
<h2>Проценты и пропорции</h2>
|
||
<p>Процент — это сотая доля. Скидки, налоги, банковские вклады, состав сплавов и растворов — всё это язык процентов и пропорций. В этой главе мы разберём <b>три основные задачи на проценты</b>, освоим <b>пропорцию и её главное свойство</b>, научимся отличать <b>прямую и обратную</b> пропорциональные зависимости, поработаем с <b>масштабом</b> и построим <b>круговые диаграммы</b>.</p>
|
||
<div class="hero-row">
|
||
<button class="btn-primary" onclick="goTo('p1')"><svg class="ic" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg> Начать § 1</button>
|
||
<div class="hero-progress"><span class="hp-label">Прогресс по главе</span><div class="hp-bar"><div id="hero-hp-fill" class="hp-fill"></div></div><span id="hero-hp-text" class="hp-text">0%</span></div>
|
||
<div id="hero-xp-badge" class="hero-xp-badge" title="Опыт" data-gamified></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="psel"><div class="psel-title">Параграфы главы</div><div id="psel-grid" class="psel-grid"></div></section>
|
||
|
||
<div id="sections"></div>
|
||
</div>
|
||
|
||
<aside class="col-side" id="col-side"><div id="sidebar-content"></div></aside>
|
||
<div class="col-side-backdrop" id="col-side-backdrop"></div>
|
||
</main>
|
||
|
||
<footer class="foot" id="m6-foot">Интерактивный учебник «Математика 6» · Глава 2 · Проценты и пропорции · LearnSpace</footer>
|
||
|
||
<div id="ach-popup" class="ach-popup"><svg class="ic" viewBox="0 0 24 24" style="width:22px;height:22px"><polygon points="12,2 22,20 2,20"/></svg><span id="ach-text">Достижение!</span></div>
|
||
<div id="gloss-tip" class="gloss-tip"></div>
|
||
<div id="search-modal" class="search-modal" role="dialog" aria-label="Поиск по главе">
|
||
<div class="search-box">
|
||
<input type="text" id="search-input" class="search-input" placeholder="Поиск: понятие, действие, параграф…" autocomplete="off">
|
||
<div id="search-results" class="search-results"></div>
|
||
<div class="search-foot"><span><kbd>↑↓</kbd> навигация</span><span><kbd>Enter</kbd> открыть</span><span><kbd>Esc</kbd> закрыть</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
'use strict';
|
||
window.M6 = {
|
||
slug: 'math-6-ch2', lsPrefix: 'math6_ch2', xpKey: 'math6_xp', wm: '%',
|
||
paras: [
|
||
{ id:'p1', num:'§ 1', name:'Проценты', sub:'Сотая доля' },
|
||
{ id:'p2', num:'§ 2', name:'Основные задачи на проценты', sub:'Три типа задач' },
|
||
{ id:'p3', num:'§ 3', name:'Пропорция и её свойства', sub:'Основное свойство пропорции' },
|
||
{ id:'p4', num:'§ 4', name:'Прямая и обратная зависимости', sub:'Как связаны величины' },
|
||
{ id:'p5', num:'§ 5', name:'Решение задач с помощью пропорций', sub:'Пропорция как инструмент' },
|
||
{ id:'p6', num:'§ 6', name:'Масштаб', sub:'Карты и чертежи' },
|
||
{ id:'p7', num:'§ 7', name:'Круговые диаграммы', sub:'Доли в виде секторов' },
|
||
{ id:'app', num:'§ 9', name:'Математика вокруг нас', sub:'Проценты и пропорции в жизни', applied:true },
|
||
{ id:'final', num:'★', name:'Финал главы', sub:'Тест · боссы главы 2', final:true }
|
||
],
|
||
achLabels: {
|
||
start:'Начало главы 2!', p1_done:'Проценты понятны!', p2_done:'Три задачи на проценты — решены!',
|
||
p3_done:'Пропорция освоена!', p4_done:'Зависимости различаю!', p5_done:'Решаю задачи пропорцией!',
|
||
p6_done:'Масштаб покорён!', p7_done:'Круговые диаграммы — мастер!', app_done:'Математика вокруг нас!',
|
||
ch2_done:'Глава 2 пройдена!'
|
||
},
|
||
startAch: ['start','Начало главы 2!'],
|
||
finalAch: ['ch2_done','Глава 2 пройдена!'],
|
||
sidebars: {}, tips: [], glossary: [], builders: {},
|
||
footer: 'Интерактивный учебник «Математика 6» · Глава 2 · Проценты и пропорции · 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('.','{,}'); }
|
||
function _round(n,d){ var p=Math.pow(10,d); return Math.round(n*p)/p; }
|
||
function svgWrap(w,h,inner){ return '<div class="m6-fig" style="max-width:'+w+'px;margin:10px auto"><svg viewBox="0 0 '+w+' '+h+'" style="width:100%;height:auto;display:block;background:var(--card,#fff);border-radius:10px;border:1px solid var(--border)">'+inner+'</svg></div>'; }
|
||
function grid100(p){ var s=''; for(var r=0;r<10;r++)for(var c=0;c<10;c++){ var idx=r*10+c, fill=idx<p?'#0891b2':'var(--card,#fff)'; s+='<rect x="'+(c*16+3)+'" y="'+(r*16+3)+'" width="14" height="14" rx="2" fill="'+fill+'" stroke="#cbd5e1" stroke-width="0.8"/>'; } return svgWrap(166,166,s); }
|
||
|
||
/* ===================== § 1. ПРОЦЕНТЫ ===================== */
|
||
function buildP1(){
|
||
var box=document.getElementById('p1-body'); var h='';
|
||
h+=makeCard('oral','Где это в жизни','1.0',
|
||
'<p>Проценты окружают нас повсюду: скидка 30% в магазине, 5% годовых на вкладе, 12% жира в сметане, 90% влажности на улице. Даже рейтинг игрока в онлайн-игре — это процент побед. Тот, кто понимает проценты, не даст себя обмануть на распродаже и сможет выбрать выгодный вклад в банке.</p>');
|
||
h+=makeCard('theory','Что такое процент','1.1',
|
||
'<p><b>Процент</b> — это сотая доля числа. $1\\% = \\dfrac{1}{100} = 0{,}01$. Знак процента — $\\%$.</p>'
|
||
+'<p>Всё число — это $100\\%$. Половина — $50\\%$, четверть — $25\\%$, пятая часть — $20\\%$.</p>');
|
||
h+=makeCard('example','Разбор по шагам','1.01',
|
||
'<p>Задача: переведи $35\\%$ в десятичную дробь и в обыкновенную дробь.</p>'
|
||
+'<ol><li>Вспоминаем: процент — сотая доля. Значит $35\\% = \\dfrac{35}{100}$.</li>'
|
||
+'<li>Чтобы получить десятичную дробь, делим числитель на знаменатель: $35 \\div 100 = 0{,}35$.</li>'
|
||
+'<li>Сокращаем обыкновенную дробь: $\\dfrac{35}{100} = \\dfrac{7}{20}$.</li>'
|
||
+'<li>Проверка обратно: $0{,}35 \\times 100 = 35\\%$ — верно!</li></ol>');
|
||
h+=makeCard('theory','А знаешь ли ты?','1.02',
|
||
'<p>Слово «процент» происходит от латинского <i>pro centum</i> — «за сотню». В Древнем Риме торговцы брали плату за каждые 100 монет займа. Сегодня символ % используется во всём мире, хотя в некоторых странах пишут «pct» или «p.c.».</p>');
|
||
h+=makeCard('rule','Перевод процентов','1.2',
|
||
'<p>Проценты $\\to$ десятичная дробь: делим на $100$ (запятая влево на 2 знака): $35\\% = 0{,}35$.</p>'
|
||
+'<p>Десятичная дробь $\\to$ проценты: умножаем на $100$: $0{,}7 = 70\\%$.</p>'
|
||
+'<p>Обыкновенная дробь $\\to$ проценты: $\\dfrac{1}{4} = 0{,}25 = 25\\%$.</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">Двигай ползунок — закрашенные клетки из 100 показывают процент.</div>'
|
||
+'<div class="sliders"><label>Процент = <b id="p1-pv">35</b>%<input type="range" id="p1-p" min="0" max="100" value="35"></label></div>'
|
||
+'<div id="p1-fig"></div><div id="p1-bar" style="margin:8px 0"></div><div id="p1-out" class="qbox"></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-i">1</b> / 6</span><span>Очки: <b id="p1-s">0</b> / 6</span></div>'
|
||
+'<div id="p1-q" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="p1-a" class="tinp" style="width:110px;text-align:center"><button class="btn primary" id="p1-go">Проверить</button></div>'
|
||
+'<div class="feedback" id="p1-fb"></div></div>';
|
||
h+=secNav(null,'p2')+readBtn('p1');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){
|
||
var sl=document.getElementById('p1-p'), fig=document.getElementById('p1-fig'), out=document.getElementById('p1-out'), bar=null;
|
||
function render(){ var p=+sl.value; document.getElementById('p1-pv').textContent=p; fig.innerHTML=grid100(p);
|
||
out.innerHTML='<div style="font-size:1.2rem;font-weight:800;color:var(--pri2)">$'+p+'\\% = \\dfrac{'+p+'}{100} = '+_kf(p/100)+'$</div>'; renderMath(out);
|
||
if(window.Math6Anim){ if(!bar) bar=Math6Anim.barModel(document.getElementById('p1-bar'),{percent:p}); else bar.set(p); } }
|
||
sl.oninput=render; render();
|
||
})();
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ var t=_pick(['p2d','d2p','f2p']);
|
||
if(t==='p2d'){ var p=_pick([5,10,25,40,75,8,150]); cur={q:'$'+p+'\\%$ = ? (десятичная дробь)', ans:p/100}; }
|
||
else if(t==='d2p'){ var d=_pick([0.3,0.07,0.5,1.2,0.25,0.9]); cur={q:'$'+_kf(d)+'$ = ? $\\%$', ans:_round(d*100,2)}; }
|
||
else { var f=_pick([[1,4,25],[1,2,50],[1,5,20],[3,4,75],[1,10,10],[1,20,5]]); cur={q:'$\\dfrac{'+f[0]+'}{'+f[1]+'}$ = ? $\\%$', ans:f[2]}; } }
|
||
function show(){ if(i>=6){ document.getElementById('p1-q').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-i').textContent=i+1; document.getElementById('p1-q').innerHTML=cur.q; renderMath(document.getElementById('p1-q'));
|
||
document.getElementById('p1-a').value=''; document.getElementById('p1-fb').style.display='none'; }
|
||
function go(){ if(i>=6)return; var fb=document.getElementById('p1-fb'), v=parseFloat(document.getElementById('p1-a').value.replace(',','.').replace('%','').trim());
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-cur.ans)<1e-9){ score++; feedback(fb,true,'✓ Верно: $'+_kf(cur.ans)+'$.'); } else feedback(fb,false,'✗ Нет. Правильно: $'+_kf(cur.ans)+'$.');
|
||
document.getElementById('p1-s').textContent=score; i++; setTimeout(show,1200); }
|
||
document.getElementById('p1-go').addEventListener('click',go);
|
||
document.getElementById('p1-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 2. ОСНОВНЫЕ ЗАДАЧИ НА ПРОЦЕНТЫ ===================== */
|
||
function buildP2(){
|
||
var box=document.getElementById('p2-body'); var h='';
|
||
h+=makeCard('oral','Где это в жизни','2.0',
|
||
'<p>Три задачи на проценты — это три реальных вопроса. В магазине: «Сколько рублей составляет скидка 20% от цены 500 руб.?» — тип 1. В банке: «Если 150 руб. — это 30% моих сбережений, сколько у меня всего?» — тип 2. В спорте: «Команда выиграла 18 игр из 24 — какой это процент побед?» — тип 3. Умея решать все три, ты разберёшься в любой жизненной ситуации с процентами.</p>');
|
||
h+=makeCard('rule','Три типа задач на проценты','2.1',
|
||
'<p><b>1) Процент от числа.</b> Найти $m\\%$ от $a$: $\\;b = \\dfrac{a}{100}\\cdot m$.</p>'
|
||
+'<p><b>2) Число по его проценту.</b> $b$ — это $m\\%$ от $a$, найти $a$: $\\;a = \\dfrac{b}{m}\\cdot 100$.</p>'
|
||
+'<p><b>3) Процентное отношение.</b> Какой процент $b$ от $a$: $\\;m\\% = \\dfrac{b}{a}\\cdot 100\\%$.</p>');
|
||
h+=makeCard('example','Разбор по шагам','2.2',
|
||
'<p><b>Тип 1.</b> Найти $20\\%$ от $150$.</p>'
|
||
+'<ol><li>Формула: $b = \\dfrac{a}{100}\\cdot m = \\dfrac{150}{100}\\cdot 20$.</li>'
|
||
+'<li>Вычисляем: $\\dfrac{150}{100} = 1{,}5$; $\\;1{,}5 \\cdot 20 = 30$.</li>'
|
||
+'<li>Ответ: $30$.</li></ol>'
|
||
+'<p><b>Тип 2.</b> $15$ — это $30\\%$ от какого числа?</p>'
|
||
+'<ol><li>Формула: $a = \\dfrac{b}{m}\\cdot 100 = \\dfrac{15}{30}\\cdot 100$.</li>'
|
||
+'<li>$\\dfrac{15}{30} = 0{,}5$; $\\;0{,}5 \\cdot 100 = 50$.</li>'
|
||
+'<li>Ответ: $50$.</li></ol>'
|
||
+'<p><b>Тип 3.</b> Какой процент $30$ составляет от $120$?</p>'
|
||
+'<ol><li>Формула: $m\\% = \\dfrac{b}{a}\\cdot 100\\% = \\dfrac{30}{120}\\cdot 100\\%$.</li>'
|
||
+'<li>$\\dfrac{30}{120} = 0{,}25$; $\\;0{,}25 \\cdot 100 = 25$.</li>'
|
||
+'<li>Ответ: $25\\%$.</li></ol>');
|
||
h+=makeCard('theory','А знаешь ли ты?','2.02',
|
||
'<p>В супермаркетах часто пишут «Скидка 50%», но рядом мелким шрифтом — «на второй товар». Это значит, что скидка не 50% от всей суммы, а лишь на половину покупки. Реальная скидка составляет только $25\\%$. Вот почему важно уметь точно считать проценты — чтобы не быть обманутым рекламой!</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">К какому из трёх типов относится задача?</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-q" class="qbox" style="font-size:1rem"></div>'
|
||
+'<div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-t="1">1 — % от числа</button><button class="btn primary" data-t="2">2 — число по %</button><button class="btn primary" data-t="3">3 — % отношение</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">Вычисли $m\\%$ от числа $a$ по формуле $\\dfrac{a}{100}\\cdot m$.</div>'
|
||
+'<div class="score-display"><span>Задача <b id="p2-ci">1</b> / 6</span><span>Очки: <b id="p2-cs">0</b> / 6</span></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="text" id="p2-ca" class="tinp" style="width:110px;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);
|
||
|
||
(function(){
|
||
var Q=[
|
||
{t:1,q:'В классе 25 учеников, 40% из них — девочки. Сколько девочек?'},
|
||
{t:2,q:'12 страниц — это 30% книги. Сколько страниц в книге?'},
|
||
{t:3,q:'Из 50 задач решено 30. Какой процент задач решён?'},
|
||
{t:1,q:'Цена 800 руб., скидка 15%. Какова величина скидки в рублях?'},
|
||
{t:2,q:'Со счёта сняли 200 руб., это 25% вклада. Каков был вклад?'},
|
||
{t:3,q:'Из 200 семян взошло 180. Какой процент семян взошёл?'}
|
||
];
|
||
var order=Q.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
|
||
var i=0,score=0,cur=null;
|
||
function show(){ if(i>=5){ 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=Q[order[i]]; document.getElementById('p2-i').textContent=i+1; document.getElementById('p2-q').innerHTML=cur.q; document.getElementById('p2-fb').style.display='none'; }
|
||
function ans(t){ if(i>=5)return; var fb=document.getElementById('p2-fb'), names={1:'процент от числа',2:'число по проценту',3:'процентное отношение'};
|
||
if(t===cur.t){ score++; feedback(fb,true,'✓ Верно — тип '+cur.t+' ('+names[cur.t]+').'); } else feedback(fb,false,'✗ Нет. Это тип '+cur.t+' ('+names[cur.t]+').');
|
||
document.getElementById('p2-s').textContent=score; i++; setTimeout(show,1400); }
|
||
document.querySelectorAll('#p2-iv1 [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([20,40,60,80,100,120,200,500]), m=_pick([5,10,15,20,25,50]); cur={a:a,m:m,ans:a*m/100}; }
|
||
function show(){ if(i>=6){ document.getElementById('p2-cq').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p2-iv2');bumpProgress('p2',30);}else if(score>=3){addXp(8,'p2-iv2');bumpProgress('p2',16);} return; }
|
||
gen(); document.getElementById('p2-ci').textContent=i+1; document.getElementById('p2-cq').innerHTML='Найди $'+cur.m+'\\%$ от $'+cur.a+'$.'; renderMath(document.getElementById('p2-cq'));
|
||
document.getElementById('p2-ca').value=''; document.getElementById('p2-cfb').style.display='none'; }
|
||
function go(){ if(i>=6)return; var fb=document.getElementById('p2-cfb'), v=parseFloat(document.getElementById('p2-ca').value.replace(',','.').trim());
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-cur.ans)<1e-9){ score++; feedback(fb,true,'✓ Верно: '+_kf(cur.ans)+'.'); } else feedback(fb,false,'✗ Нет. $\\dfrac{'+cur.a+'}{100}\\cdot'+cur.m+' = '+_kf(cur.ans)+'$.');
|
||
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('oral','Где это в жизни','3.0',
|
||
'<p>Пропорция — это равенство двух отношений. Кулинарный рецепт рассчитан на 4 порции, а нужно 6? Все ингредиенты надо увеличить в одном и том же отношении — это пропорция. Фотограф масштабирует снимок, сохраняя пропорции сторон. Архитектор строит модель здания в масштабе, используя пропорцию. Пропорция — это инструмент «справедливого пересчёта».</p>');
|
||
h+=makeCard('theory','Отношение и пропорция','3.1',
|
||
'<p><b>Отношение</b> двух чисел — их частное: $a:b=\\dfrac{a}{b}$. <b>Пропорция</b> — равенство двух отношений: $a:b = c:d$ (читается «$a$ относится к $b$, как $c$ к $d$»).</p>'
|
||
+'<p>$a$ и $d$ — <b>крайние</b> члены, $b$ и $c$ — <b>средние</b>.</p>');
|
||
h+=makeCard('rule','Основное свойство пропорции','3.2',
|
||
'<p>Произведение крайних членов равно произведению средних: $\\;a\\cdot d = b\\cdot c$ («крест-накрест»).</p>'
|
||
+'<p>Отсюда находят неизвестный член: из $a:b=c:x$ получаем $x = \\dfrac{b\\cdot c}{a}$.</p>');
|
||
h+=makeCard('example','Разбор по шагам','3.01',
|
||
'<p>Задача: решить пропорцию $3 : 4 = 15 : x$.</p>'
|
||
+'<ol><li>Запишем основное свойство пропорции: $3 \\cdot x = 4 \\cdot 15$.</li>'
|
||
+'<li>Вычисляем правую часть: $4 \\cdot 15 = 60$.</li>'
|
||
+'<li>Находим $x$: $x = \\dfrac{60}{3} = 20$.</li>'
|
||
+'<li>Проверка: $3 : 4 = 0{,}75$ и $15 : 20 = 0{,}75$ — отношения равны, пропорция верна!</li></ol>');
|
||
h+=makeCard('theory','А знаешь ли ты?','3.02',
|
||
'<p>Древнегреческий математик Пифагор считал пропорцию основой красоты и гармонии. «Золотое сечение» $1 : 1{,}618$ — особая пропорция, которую можно найти в пропорциях тела человека, раковинах моллюсков и архитектуре Парфенона. Художники и архитекторы тысячи лет используют её для создания красивых произведений.</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">Реши пропорцию «крест-накрест»: $x = \\dfrac{b\\cdot c}{a}$.</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;align-items:center;flex-wrap:wrap"><input type="text" id="p3-a" class="tinp" style="width:100px;text-align:center" placeholder="x"><button class="btn primary" id="p3-go">Проверить</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-vi">1</b> / 5</span><span>Очки: <b id="p3-vs">0</b> / 5</span></div>'
|
||
+'<div id="p3-vq" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-v="1">Верна</button><button class="btn primary" data-v="0">Неверна</button></div>'
|
||
+'<div class="feedback" id="p3-vfb"></div></div>';
|
||
h+='<div class="wg" id="p3-bal"><div class="wg-header"><span class="wg-badge">Анимация</span><div class="wg-title">Весы пропорции</div></div>'
|
||
+'<div class="wg-help">Пропорция верна, когда произведение крайних равно произведению средних: $a\\cdot d = b\\cdot c$ — весы в равновесии. Жми «другой пример».</div>'
|
||
+'<div id="p3-balfig"></div><div style="text-align:center;margin-top:6px"><button class="btn primary" id="p3-bal-next">Другой пример</button></div></div>';
|
||
h+=secNav('p2','p4')+readBtn('p3');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){ if(!window.Math6Anim) return; var EX=[[3,4,6,8],[2,5,4,10],[3,4,5,8],[6,9,2,3],[2,3,5,8]];
|
||
var bal=Math6Anim.balanceScale(document.getElementById('p3-balfig'),{a:EX[0][0],b:EX[0][1],c:EX[0][2],d:EX[0][3]}); var k=0;
|
||
document.getElementById('p3-bal-next').addEventListener('click',function(){ k=(k+1)%EX.length; var e=EX[k]; bal.set(e[0],e[1],e[2],e[3]); }); })();
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ var a=_ri(2,6), b=_ri(2,9), m=_ri(2,6); cur={a:a,b:b,c:a*m,x:b*m}; }
|
||
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='$'+cur.a+' : '+cur.b+' = '+cur.c+' : x$. Найди $x$.'; renderMath(document.getElementById('p3-q'));
|
||
document.getElementById('p3-a').value=''; document.getElementById('p3-fb').style.display='none'; }
|
||
function go(){ if(i>=6)return; var fb=document.getElementById('p3-fb'), v=parseFloat(document.getElementById('p3-a').value.replace(',','.').trim());
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-cur.x)<1e-9){ score++; feedback(fb,true,'✓ Верно: $x = \\dfrac{'+cur.b+'\\cdot'+cur.c+'}{'+cur.a+'} = '+cur.x+'$.'); } else feedback(fb,false,'✗ Нет. $x = \\dfrac{'+cur.b+'\\cdot'+cur.c+'}{'+cur.a+'} = '+cur.x+'$.');
|
||
document.getElementById('p3-s').textContent=score; i++; setTimeout(show,1400); }
|
||
document.getElementById('p3-go').addEventListener('click',go);
|
||
document.getElementById('p3-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||
})();
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ var a=_ri(2,6),b=_ri(2,6),m=_ri(2,5),c=a*m,d=b*m, ok=_pick([true,true,false]); if(!ok){ d+=_pick([1,2,-1,3]); if(a*d===b*c) d+=1; } cur={a:a,b:b,c:c,d:d,ok:a*d===b*c}; }
|
||
function show(){ if(i>=5){ document.getElementById('p3-vq').innerHTML='<b>Готово!</b> '+score+' / 5'; 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-vi').textContent=i+1; document.getElementById('p3-vq').innerHTML='Верна ли пропорция $'+cur.a+':'+cur.b+' = '+cur.c+':'+cur.d+'$?'; renderMath(document.getElementById('p3-vq'));
|
||
document.getElementById('p3-vfb').style.display='none'; }
|
||
function ans(v){ if(i>=5)return; var fb=document.getElementById('p3-vfb'), correct=cur.ok?1:0;
|
||
if(v===correct){ score++; feedback(fb,true,'✓ Верно! $'+cur.a+'\\cdot'+cur.d+' = '+(cur.a*cur.d)+'$, $'+cur.b+'\\cdot'+cur.c+' = '+(cur.b*cur.c)+'$.'); } else feedback(fb,false,'✗ Нет. $'+cur.a+'\\cdot'+cur.d+'='+(cur.a*cur.d)+'$, $'+cur.b+'\\cdot'+cur.c+'='+(cur.b*cur.c)+'$ — '+(cur.ok?'равны':'не равны')+'.');
|
||
document.getElementById('p3-vs').textContent=score; i++; setTimeout(show,1600); }
|
||
document.querySelectorAll('#p3-iv2 [data-v]').forEach(function(b){ b.addEventListener('click',function(){ ans(+b.getAttribute('data-v')); }); }); show();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 4. ПРЯМАЯ И ОБРАТНАЯ ЗАВИСИМОСТИ ===================== */
|
||
function buildP4(){
|
||
var box=document.getElementById('p4-body'); var h='';
|
||
h+=makeCard('oral','Где это в жизни','4.0',
|
||
'<p>Представь, что едешь на велосипеде с постоянной скоростью: чем дольше едешь, тем больший путь проедешь — это прямая зависимость. Но если тот же путь надо проехать быстрее, скорость надо увеличить, а время уменьшится — это обратная зависимость. Ещё пример: чем больше друзей делят одну пиццу, тем меньше достаётся каждому. Распознав вид зависимости, можно правильно составить пропорцию и решить задачу.</p>');
|
||
h+=makeCard('theory','Прямая пропорциональность','4.1',
|
||
'<p>Величины <b>прямо пропорциональны</b>, если при увеличении одной в несколько раз другая увеличивается во <b>столько же</b> раз. Их отношение постоянно: $\\dfrac{y}{x}=k$.</p>'
|
||
+'<p>Пример: при постоянной цене стоимость покупки прямо пропорциональна количеству товара.</p>');
|
||
h+=makeCard('theory','Обратная пропорциональность','4.2',
|
||
'<p>Величины <b>обратно пропорциональны</b>, если при увеличении одной в несколько раз другая во <b>столько же</b> раз уменьшается. Их произведение постоянно: $x\\cdot y=k$.</p>'
|
||
+'<p>Пример: при постоянном пути время обратно пропорционально скорости.</p>');
|
||
h+=makeCard('example','Разбор по шагам','4.01',
|
||
'<p><b>Прямая:</b> 3 кг помидоров стоят 18 руб. Сколько стоят 5 кг?</p>'
|
||
+'<ol><li>Определяем вид зависимости: цена постоянна, значит стоимость и масса <b>прямо</b> пропорциональны.</li>'
|
||
+'<li>Коэффициент: $k = \\dfrac{18}{3} = 6$ руб/кг.</li>'
|
||
+'<li>Ответ: $5 \\cdot 6 = 30$ руб.</li></ol>'
|
||
+'<p><b>Обратная:</b> 4 рабочих делают ремонт за 6 дней. За сколько сделают 3 рабочих?</p>'
|
||
+'<ol><li>Зависимость <b>обратная</b>: чем меньше рабочих, тем дольше.</li>'
|
||
+'<li>Произведение постоянно: $4 \\cdot 6 = 24$.</li>'
|
||
+'<li>Ответ: $24 \\div 3 = 8$ дней.</li></ol>');
|
||
h+=makeCard('theory','А знаешь ли ты?','4.02',
|
||
'<p>Закон Ома в физике — это тоже пропорциональность. Сила тока прямо пропорциональна напряжению ($I = U/R$, при постоянном $R$) и обратно пропорциональна сопротивлению ($I = U/R$, при постоянном $U$). Изучая математику сегодня, ты уже готовишься к физике!</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> / 6</span><span>Очки: <b id="p4-s">0</b> / 6</span></div>'
|
||
+'<div id="p4-q" class="qbox" style="font-size:1rem"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-t="d">прямая</button><button class="btn primary" data-t="o">обратная</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">Величины прямо пропорциональны ($y=kx$). Найди недостающее значение.</div>'
|
||
+'<div class="score-display"><span>Задача <b id="p4-ti">1</b> / 5</span><span>Очки: <b id="p4-ts">0</b> / 5</span></div>'
|
||
+'<div id="p4-tq" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="p4-ta" class="tinp" style="width:100px;text-align:center"><button class="btn primary" id="p4-tgo">Проверить</button></div>'
|
||
+'<div class="feedback" id="p4-tfb"></div></div>';
|
||
h+='<div class="wg" id="p4-car"><div class="wg-header"><span class="wg-badge">Анимация</span><div class="wg-title">Обратная пропорция: постоянная площадь</div></div>'
|
||
+'<div class="wg-help">Двигай ширину $x$ — высота $y$ сама подстраивается так, что площадь $x\\cdot y$ остаётся постоянной. Это и есть обратная пропорциональность.</div>'
|
||
+'<div class="sliders"><label>Ширина $x$ = <b id="p4-cwv">3</b><input type="range" id="p4-cw" min="1" max="12" value="3"></label></div>'
|
||
+'<div id="p4-carfig"></div></div>';
|
||
h+=secNav('p3','p5')+readBtn('p4');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){ if(!window.Math6Anim) return; var car=Math6Anim.constAreaRect(document.getElementById('p4-carfig'),{area:12});
|
||
var sl=document.getElementById('p4-cw'); sl.oninput=function(){ document.getElementById('p4-cwv').textContent=sl.value; car.set(+sl.value); }; })();
|
||
|
||
(function(){
|
||
var Q=[
|
||
{t:'d',q:'Количество тетрадей и их общая стоимость (цена постоянна).'},
|
||
{t:'o',q:'Скорость автомобиля и время в пути (расстояние постоянно).'},
|
||
{t:'o',q:'Число рабочих и время выполнения работы (объём постоянен).'},
|
||
{t:'d',q:'Время движения и пройденный путь (скорость постоянна).'},
|
||
{t:'o',q:'Число друзей и доля пирога каждому (пирог один).'},
|
||
{t:'d',q:'Масса покупки и её стоимость (цена за кг постоянна).'},
|
||
{t:'d',q:'Число одинаковых коробок и общее число книг в них.'},
|
||
{t:'o',q:'Длина шага и число шагов на одну и ту же дистанцию.'}
|
||
];
|
||
var order=Q.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
|
||
var i=0,score=0,cur=null;
|
||
function show(){ if(i>=6){ document.getElementById('p4-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p4-iv1');bumpProgress('p4',30);}else if(score>=3){addXp(8,'p4-iv1');bumpProgress('p4',16);} return; }
|
||
cur=Q[order[i]]; document.getElementById('p4-i').textContent=i+1; document.getElementById('p4-q').innerHTML=cur.q; document.getElementById('p4-fb').style.display='none'; }
|
||
function ans(t){ if(i>=6)return; var fb=document.getElementById('p4-fb');
|
||
if(t===cur.t){ score++; feedback(fb,true,'✓ Верно — '+(cur.t==='d'?'прямая':'обратная')+' пропорциональность.'); } else feedback(fb,false,'✗ Нет. Здесь '+(cur.t==='d'?'прямая':'обратная')+' зависимость.');
|
||
document.getElementById('p4-s').textContent=score; i++; setTimeout(show,1400); }
|
||
document.querySelectorAll('#p4-iv1 [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 k=_ri(2,9), x1=_ri(2,6), x2=_ri(2,8); cur={k:k,x1:x1,y1:k*x1,x2:x2,y2:k*x2}; }
|
||
function show(){ if(i>=5){ document.getElementById('p4-tq').innerHTML='<b>Готово!</b> '+score+' / 5'; 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-ti').textContent=i+1;
|
||
document.getElementById('p4-tq').innerHTML='<table class="tbl" style="max-width:260px;margin:0 auto"><tr><th>$x$</th><td>'+cur.x1+'</td><td>'+cur.x2+'</td></tr><tr><th>$y$</th><td>'+cur.y1+'</td><td>?</td></tr></table><div style="margin-top:6px">Найди недостающее $y$.</div>'; renderMath(document.getElementById('p4-tq'));
|
||
document.getElementById('p4-ta').value=''; document.getElementById('p4-tfb').style.display='none'; }
|
||
function go(){ if(i>=5)return; var fb=document.getElementById('p4-tfb'), v=parseFloat(document.getElementById('p4-ta').value.replace(',','.').trim());
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-cur.y2)<1e-9){ score++; feedback(fb,true,'✓ Верно: $k='+cur.k+'$, $y='+cur.k+'\\cdot'+cur.x2+'='+cur.y2+'$.'); } else feedback(fb,false,'✗ Нет. $k=\\dfrac{'+cur.y1+'}{'+cur.x1+'}='+cur.k+'$, значит $y='+cur.y2+'$.');
|
||
document.getElementById('p4-ts').textContent=score; i++; setTimeout(show,1500); }
|
||
document.getElementById('p4-tgo').addEventListener('click',go);
|
||
document.getElementById('p4-ta').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>Пропорция — универсальный инструмент для пересчёта. Рецепт рассчитан на 6 человек, а пришло 10 — сколько муки нужно? Строитель знает, что на 12 м² нужно 3 мешка штукатурки, и считает, сколько нужно на 20 м². Врач пересчитывает дозу лекарства по весу пациента. Пропорция работает везде, где есть «пересчёт в том же соотношении».</p>');
|
||
h+=makeCard('rule','Как решать задачи пропорцией','5.1',
|
||
'<p>1) Обозначают неизвестное буквой $x$. 2) Записывают условие в две строки. 3) Если зависимость <b>прямая</b> — стрелки в одну сторону, составляют пропорцию напрямую; если <b>обратная</b> — одно из отношений переворачивают. 4) Решают «крест-накрест».</p>');
|
||
h+=makeCard('example','Разбор по шагам','5.2',
|
||
'<p><b>Прямая пропорция:</b> За $3$ кг яблок заплатили $12$ руб. Сколько за $5$ кг?</p>'
|
||
+'<ol><li>Обозначаем: $x$ — стоимость $5$ кг. Зависимость прямая (больше кг — больше денег).</li>'
|
||
+'<li>Записываем пропорцию (стрелки в одну сторону): $3 : 5 = 12 : x$.</li>'
|
||
+'<li>Решаем крест-накрест: $3 \\cdot x = 12 \\cdot 5 = 60$.</li>'
|
||
+'<li>$x = 60 \\div 3 = 20$ руб. Ответ: $20$ руб.</li></ol>'
|
||
+'<p><b>Обратная пропорция:</b> $4$ трубы наполнят бак за $9$ мин. За сколько — $6$ труб?</p>'
|
||
+'<ol><li>Зависимость обратная: больше труб — меньше времени.</li>'
|
||
+'<li>Переворачиваем одно отношение: $4 : 6 = x : 9$.</li>'
|
||
+'<li>Крест-накрест: $4 \\cdot 9 = 6 \\cdot x$, значит $x = \\dfrac{36}{6} = 6$ мин.</li>'
|
||
+'<li>Ответ: $6$ минут.</li></ol>');
|
||
h+=makeCard('theory','А знаешь ли ты?','5.02',
|
||
'<p>Пропорциональный пересчёт используется в кулинарии всего мира. Французские шеф-повара называют это «scaling recipe» — масштабирование рецепта. Профессиональные повара делают это автоматически, но в основе — обычная пропорция из учебника математики 6 класса.</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> / 6</span><span>Очки: <b id="p5-s">0</b> / 6</span></div>'
|
||
+'<div id="p5-q" class="qbox" style="font-size:1rem"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="p5-a" class="tinp" style="width:100px;text-align:center"><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-ii">1</b> / 5</span><span>Очки: <b id="p5-is">0</b> / 5</span></div>'
|
||
+'<div id="p5-iq" class="qbox" style="font-size:1rem"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="p5-ia" class="tinp" style="width:100px;text-align:center"><button class="btn primary" id="p5-igo">Проверить</button></div>'
|
||
+'<div class="feedback" id="p5-ifb"></div></div>';
|
||
h+=secNav('p4','p6')+readBtn('p5');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){
|
||
var P=[
|
||
{q:'За 3 кг яблок заплатили 12 руб. Сколько рублей за 5 кг?',a:20},
|
||
{q:'2 л сока стоят 10 руб. Сколько стоят 7 л?',a:35},
|
||
{q:'4 одинаковых коробки весят 20 кг. Сколько весят 6 коробок?',a:30},
|
||
{q:'За 5 ручек заплатили 15 руб. Сколько за 8 ручек?',a:24},
|
||
{q:'3 м ткани стоят 9 руб. Сколько стоят 7 м?',a:21},
|
||
{q:'За 2 ч турист прошёл 8 км. Сколько км за 9 ч (тот же темп)?',a:36}
|
||
];
|
||
var order=P.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
|
||
var i=0,score=0,cur=null;
|
||
function show(){ if(i>=6){ document.getElementById('p5-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p5-iv1');bumpProgress('p5',30);}else if(score>=3){addXp(8,'p5-iv1');bumpProgress('p5',16);} return; }
|
||
cur=P[order[i]]; document.getElementById('p5-i').textContent=i+1; document.getElementById('p5-q').innerHTML=cur.q;
|
||
document.getElementById('p5-a').value=''; document.getElementById('p5-fb').style.display='none'; }
|
||
function go(){ if(i>=6)return; var fb=document.getElementById('p5-fb'), v=parseFloat(document.getElementById('p5-a').value.replace(',','.').trim());
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-cur.a)<1e-9){ score++; feedback(fb,true,'✓ Верно: '+cur.a+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+cur.a+'.');
|
||
document.getElementById('p5-s').textContent=score; i++; setTimeout(show,1300); }
|
||
document.getElementById('p5-go').addEventListener('click',go);
|
||
document.getElementById('p5-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||
})();
|
||
|
||
(function(){
|
||
var P=[
|
||
{q:'5 рабочих выполнят заказ за 12 дней. За сколько дней — 6 рабочих?',a:10},
|
||
{q:'Автомобиль прошёл путь за 4 ч со скоростью 60 км/ч. За сколько часов при 80 км/ч?',a:3},
|
||
{q:'8 одинаковых насосов наполнят бассейн за 6 ч. За сколько часов — 4 насоса?',a:12},
|
||
{q:'6 человек съедят запас за 8 дней. На сколько дней хватит 4 людям?',a:12},
|
||
{q:'3 трубы наполнят бак за 10 мин. За сколько минут — 5 таких труб?',a:6}
|
||
];
|
||
var order=P.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
|
||
var i=0,score=0,cur=null;
|
||
function show(){ if(i>=5){ document.getElementById('p5-iq').innerHTML='<b>Готово!</b> '+score+' / 5'; if(score>=4){addXp(15,'p5-iv2');bumpProgress('p5',30);}else if(score>=2){addXp(8,'p5-iv2');bumpProgress('p5',16);} return; }
|
||
cur=P[order[i]]; document.getElementById('p5-ii').textContent=i+1; document.getElementById('p5-iq').innerHTML=cur.q;
|
||
document.getElementById('p5-ia').value=''; document.getElementById('p5-ifb').style.display='none'; }
|
||
function go(){ if(i>=5)return; var fb=document.getElementById('p5-ifb'), v=parseFloat(document.getElementById('p5-ia').value.replace(',','.').trim());
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-cur.a)<1e-9){ score++; feedback(fb,true,'✓ Верно: '+cur.a+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+cur.a+' (произведение величин постоянно).');
|
||
document.getElementById('p5-is').textContent=score; i++; setTimeout(show,1400); }
|
||
document.getElementById('p5-igo').addEventListener('click',go);
|
||
document.getElementById('p5-ia').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>Масштаб — везде, где большое изображают маленьким (или наоборот). Карта страны, план квартиры, схема метро, чертёж детали — всё это масштабные изображения. Даже Google Maps использует масштаб: приближая карту, ты уменьшаешь знаменатель (1:1000 вместо 1:1 000 000). Космические снимки со спутника имеют масштаб 1:50 000 000 и больше!</p>');
|
||
h+=makeCard('theory','Что такое масштаб','6.1',
|
||
'<p><b>Масштаб</b> — отношение длины отрезка на чертеже (карте) к длине соответствующего отрезка в реальности. Запись $1:N$ означает: $1$ см на карте соответствует $N$ см на местности.</p>'
|
||
+'<p>Карта: реальное расстояние $=$ расстояние на карте $\\times N$. Чертёж детали может быть и крупнее ($N<1$).</p>');
|
||
h+=makeCard('example','Разбор по шагам','6.2',
|
||
'<p>Задача: масштаб $1:1000$. На карте $3$ см. Найди реальное расстояние.</p>'
|
||
+'<ol><li>Масштаб $1:1000$ означает: $1$ см на карте $= 1000$ см в реальности.</li>'
|
||
+'<li>На карте $3$ см, значит в реальности: $3 \\times 1000 = 3000$ см.</li>'
|
||
+'<li>Переводим в метры: $3000$ см $\\div 100 = 30$ м.</li>'
|
||
+'<li>Ответ: $30$ метров.</li></ol>'
|
||
+'<p>Обратная задача: масштаб $1:500$, реальное расстояние $25$ м. Найди длину на карте.</p>'
|
||
+'<ol><li>Переводим метры в сантиметры: $25$ м $= 2500$ см.</li>'
|
||
+'<li>Делим на знаменатель масштаба: $2500 \\div 500 = 5$ см.</li>'
|
||
+'<li>Ответ: $5$ см на карте.</li></ol>');
|
||
h+=makeCard('theory','А знаешь ли ты?','6.02',
|
||
'<p>Самая точная карта мира — не на бумаге, а в голове у миграционных птиц. Дрозд, летящий из Беларуси в Африку, преодолевает тысячи километров без единой карты. Учёные до сих пор выясняют, как именно птицы ориентируются — но уже ясно, что они инстинктивно «знают масштаб» и расстояния.</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-q" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="p6-a" class="tinp" style="width:110px;text-align:center" placeholder="метры"><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-ri">1</b> / 5</span><span>Очки: <b id="p6-rs">0</b> / 5</span></div>'
|
||
+'<div id="p6-rq" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="p6-ra" class="tinp" style="width:110px;text-align:center" placeholder="см"><button class="btn primary" id="p6-rgo">Проверить</button></div>'
|
||
+'<div class="feedback" id="p6-rfb"></div></div>';
|
||
h+=secNav('p5','p7')+readBtn('p6');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ var N=_pick([200,500,1000,2000,10000]), d=_ri(2,9); cur={N:N,d:d,ans:d*N/100}; }
|
||
function show(){ if(i>=6){ document.getElementById('p6-q').innerHTML='<b>Готово!</b> '+score+' / 6'; 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-q').innerHTML='Масштаб $1:'+cur.N+'$. На карте $'+cur.d+'$ см. Реальное расстояние в метрах?'; renderMath(document.getElementById('p6-q'));
|
||
document.getElementById('p6-a').value=''; document.getElementById('p6-fb').style.display='none'; }
|
||
function go(){ if(i>=6)return; var fb=document.getElementById('p6-fb'), v=parseFloat(document.getElementById('p6-a').value.replace(',','.').trim());
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-cur.ans)<1e-9){ score++; feedback(fb,true,'✓ Верно: '+_kf(cur.ans)+' м.'); } else feedback(fb,false,'✗ Нет. '+cur.d+'·'+cur.N+'='+(cur.d*cur.N)+' см = '+_kf(cur.ans)+' м.');
|
||
document.getElementById('p6-s').textContent=score; i++; setTimeout(show,1400); }
|
||
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 N=_pick([100,200,500,1000]), m=_pick([10,20,50,100,5]); cur={N:N,m:m,ans:m*100/N}; }
|
||
function show(){ if(i>=5){ document.getElementById('p6-rq').innerHTML='<b>Готово!</b> '+score+' / 5'; 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-ri').textContent=i+1; document.getElementById('p6-rq').innerHTML='Масштаб $1:'+cur.N+'$. Реальное расстояние $'+cur.m+'$ м. Длина на карте в см?'; renderMath(document.getElementById('p6-rq'));
|
||
document.getElementById('p6-ra').value=''; document.getElementById('p6-rfb').style.display='none'; }
|
||
function go(){ if(i>=5)return; var fb=document.getElementById('p6-rfb'), v=parseFloat(document.getElementById('p6-ra').value.replace(',','.').trim());
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-cur.ans)<1e-9){ score++; feedback(fb,true,'✓ Верно: '+_kf(cur.ans)+' см.'); } else feedback(fb,false,'✗ Нет. '+cur.m+' м = '+(cur.m*100)+' см; делим на '+cur.N+' → '+_kf(cur.ans)+' см.');
|
||
document.getElementById('p6-rs').textContent=score; i++; setTimeout(show,1400); }
|
||
document.getElementById('p6-rgo').addEventListener('click',go);
|
||
document.getElementById('p6-ra').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 7. КРУГОВЫЕ ДИАГРАММЫ ===================== */
|
||
function buildP7(){
|
||
var box=document.getElementById('p7-body'); var h='';
|
||
h+=makeCard('oral','Где это в жизни','7.0',
|
||
'<p>Круговые диаграммы используют журналисты, учёные, компании и государства. Диаграмма расходов бюджета страны, диаграмма состава воздуха (азот — $78\\%$, кислород — $21\\%$, прочее — $1\\%$), диаграмма времени твоего дня — всё это круговые диаграммы. Они мгновенно показывают, какая доля чего-либо наибольшая. Без понимания диаграмм сегодня не обойтись ни в школе, ни в жизни.</p>');
|
||
h+=makeCard('theory','Круговая диаграмма','7.1',
|
||
'<p><b>Круговая диаграмма</b> наглядно показывает, как целое делится на части. Весь круг — это $100\\%$, или $360°$.</p>'
|
||
+'<p>Сектор в $p\\%$ занимает угол $p\\%\\cdot 360° = 3{,}6\\cdot p$ градусов. Например, $25\\%$ — это $90°$ (четверть круга).</p>');
|
||
h+=makeCard('example','Разбор по шагам','7.01',
|
||
'<p>Задача: в классе $30$ учеников. Отличников $6$, хорошистов $15$, остальные — троечники. Построй круговую диаграмму.</p>'
|
||
+'<ol><li>Находим доли: отличники $\\dfrac{6}{30} = 20\\%$; хорошисты $\\dfrac{15}{30} = 50\\%$; остальные $100\\% - 20\\% - 50\\% = 30\\%$.</li>'
|
||
+'<li>Переводим в градусы: $20\\% \\cdot 3{,}6 = 72°$; $50\\% \\cdot 3{,}6 = 180°$; $30\\% \\cdot 3{,}6 = 108°$.</li>'
|
||
+'<li>Проверка: $72° + 180° + 108° = 360°$ — весь круг. Верно!</li>'
|
||
+'<li>Строим круг, откладываем сектора по очереди транспортиром, подписываем.</li></ol>');
|
||
h+=makeCard('theory','А знаешь ли ты?','7.02',
|
||
'<p>Круговую диаграмму придумала британская медсестра Флоренс Найтингейл в $1858$ году — не математик, а медик! Она использовала диаграмму, чтобы доказать военным чиновникам, что большинство солдат гибнет не от ран, а от болезней в грязных госпиталях. Её диаграмма спасла тысячи жизней — пример того, как математика меняет мир.</p>');
|
||
h+='<div class="wg" id="p7-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Диаграмма данных</div></div>'
|
||
+'<div class="wg-help">Выбери набор данных — построится круговая диаграмма с долями.</div>'
|
||
+'<div id="p7-pick" style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px"></div>'
|
||
+'<div style="display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap"><div id="p7-fig"></div><div id="p7-leg"></div></div></div>';
|
||
h+='<div class="wg" id="p7-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Проценты и градусы</div></div>'
|
||
+'<div class="wg-help">Переведи долю сектора между процентами и градусами ($1\\% = 3{,}6°$).</div>'
|
||
+'<div class="score-display"><span>Вопрос <b id="p7-i">1</b> / 6</span><span>Очки: <b id="p7-s">0</b> / 6</span></div>'
|
||
+'<div id="p7-q" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="p7-a" class="tinp" style="width:110px;text-align:center"><button class="btn primary" id="p7-go">Проверить</button></div>'
|
||
+'<div class="feedback" id="p7-fb"></div></div>';
|
||
h+=secNav('p6','app')+readBtn('p7');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){
|
||
var DS=[
|
||
{name:'Рацион (БЖУ)', segs:[{label:'Углеводы',value:66},{label:'Жиры',value:17},{label:'Белки',value:17}]},
|
||
{name:'Оценки класса', segs:[{label:'«9–10»',value:30},{label:'«7–8»',value:45},{label:'«5–6»',value:25}]},
|
||
{name:'Сутки школьника', segs:[{label:'Сон',value:33},{label:'Учёба',value:25},{label:'Отдых',value:42}]}
|
||
];
|
||
var pick=document.getElementById('p7-pick'), fig=document.getElementById('p7-fig'), leg=document.getElementById('p7-leg'), grow=null;
|
||
var pal=['#0891b2','#f59e0b','#e11d48','#059669','#7c3aed'];
|
||
pick.innerHTML=DS.map(function(d,k){ return '<button class="btn'+(k===0?' primary':'')+'" data-k="'+k+'">'+d.name+'</button>'; }).join('');
|
||
function render(k){ var d=DS[k]; var segs=d.segs.map(function(s,j){ return {label:s.label,value:s.value,color:pal[j%pal.length]}; });
|
||
if(window.Math6Anim){ if(!grow) grow=Math6Anim.pieGrow(fig,{segs:segs}); else grow.set(segs); } else { fig.innerHTML=Math6.pie(d.segs,{size:200}); }
|
||
leg.innerHTML=segs.map(function(s){ return '<div style="display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.9rem"><span style="width:14px;height:14px;border-radius:3px;background:'+s.color+';display:inline-block"></span>'+s.label+' — <b>'+s.value+'%</b></div>'; }).join(''); }
|
||
pick.querySelectorAll('[data-k]').forEach(function(b){ b.addEventListener('click',function(){ pick.querySelectorAll('button').forEach(function(x){x.classList.remove('primary');}); b.classList.add('primary'); render(+b.getAttribute('data-k')); }); });
|
||
render(0);
|
||
})();
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ if(_pick([true,false])){ var p=_pick([10,20,25,50,75]); cur={q:'Сектор $'+p+'\\%$ — сколько это градусов?', ans:_round(p*3.6,1)}; } else { var g=_pick([36,72,90,180,270]); cur={q:'Сектор $'+g+'°$ — сколько это процентов?', ans:_round(g/3.6,1)}; } }
|
||
function show(){ if(i>=6){ document.getElementById('p7-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p7-iv2');bumpProgress('p7',30);}else if(score>=3){addXp(8,'p7-iv2');bumpProgress('p7',16);} return; }
|
||
gen(); document.getElementById('p7-i').textContent=i+1; document.getElementById('p7-q').innerHTML=cur.q; renderMath(document.getElementById('p7-q'));
|
||
document.getElementById('p7-a').value=''; document.getElementById('p7-fb').style.display='none'; }
|
||
function go(){ if(i>=6)return; var fb=document.getElementById('p7-fb'), v=parseFloat(document.getElementById('p7-a').value.replace(',','.').replace('%','').trim());
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-cur.ans)<0.051){ score++; feedback(fb,true,'✓ Верно: '+_kf(cur.ans)+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+_kf(cur.ans)+'.');
|
||
document.getElementById('p7-s').textContent=score; i++; setTimeout(show,1300); }
|
||
document.getElementById('p7-go').addEventListener('click',go);
|
||
document.getElementById('p7-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 9. МАТЕМАТИКА ВОКРУГ НАС ===================== */
|
||
function buildApp(){
|
||
var box=document.getElementById('app-body'); var h='';
|
||
h+=makeCard('oral','Где это в жизни','9.0',
|
||
'<p>Весь раздел «Проценты и пропорции» — это язык реального мира. Читая этикетку на продукте, анализируя результаты выборов, планируя ремонт или путешествие, оценивая выгоду банковского предложения — везде используются проценты и пропорции. Этот параграф — практика: решаем задачи из настоящей жизни.</p>');
|
||
h+=makeCard('theory','Проценты вокруг нас','9.1',
|
||
'<p>Скидки и распродажи, наценки, банковские вклады под проценты, состав продуктов, статистика и опросы — везде встречаются проценты и пропорции.</p>');
|
||
h+=makeCard('example','Разбор по шагам','9.01',
|
||
'<p>Задача: в магазине на куртку скидка $25\\%$, цена до скидки $800$ руб. Найди цену со скидкой.</p>'
|
||
+'<ol><li>Находим размер скидки: $25\\%$ от $800 = \\dfrac{800}{100} \\cdot 25 = 200$ руб.</li>'
|
||
+'<li>Вычитаем из начальной цены: $800 - 200 = 600$ руб.</li>'
|
||
+'<li>Ответ: $600$ руб.</li>'
|
||
+'<li>Быстрый способ: цена со скидкой $= 800 \\cdot (1 - 0{,}25) = 800 \\cdot 0{,}75 = 600$ руб.</li></ol>');
|
||
h+=makeCard('theory','А знаешь ли ты?','9.02',
|
||
'<p>Самые большие «скидки» — до $90\\%$ — часто оказываются обманом. Продавец сначала искусственно завышает цену, а потом объявляет «грандиозную распродажу». Закон требует, чтобы скидка считалась от реальной цены, которая действовала раньше. Знание математики помогает не попасться на такие уловки.</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> / 6</span><span>Очки: <b id="app-s">0</b> / 6</span></div>'
|
||
+'<div id="app-q" class="qbox" style="font-size:1rem;text-align:left"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="app-a" class="tinp" style="width:110px;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">Определи: цена выросла (наценка) или упала (скидка)?</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" style="font-size:1rem;text-align:left"></div>'
|
||
+'<div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-av="n">Наценка</button><button class="btn primary" data-av="s">Скидка</button></div>'
|
||
+'<div class="feedback" id="app-vfb"></div></div>';
|
||
h+=secNav('p7','final')+readBtn('app');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){
|
||
var P=[
|
||
{q:'Товар стоил 200 руб. Скидка 10%. Новая цена (руб.)?',a:180},
|
||
{q:'Куртка 800 руб., скидка 25%. Сколько рублей скидка?',a:200},
|
||
{q:'Вклад 1000 руб. под 5% годовых. Сколько рублей процентов за год?',a:50},
|
||
{q:'В магазине 60 товаров, 20% распроданы. Сколько товаров продано?',a:12},
|
||
{q:'Цена выросла с 50 руб. на 20%. Новая цена (руб.)?',a:60},
|
||
{q:'Из 40 учеников 30% занимаются спортом. Сколько это человек?',a:12},
|
||
{q:'Билет 500 руб., детям скидка 40%. Сколько платит ребёнок (руб.)?',a:300}
|
||
];
|
||
var order=P.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
|
||
var i=0,score=0,cur=null;
|
||
function show(){ if(i>=6){ document.getElementById('app-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'app-iv1');bumpProgress('app',35);}else if(score>=3){addXp(8,'app-iv1');bumpProgress('app',18);} return; }
|
||
cur=P[order[i]]; document.getElementById('app-i').textContent=i+1; document.getElementById('app-q').innerHTML=cur.q;
|
||
document.getElementById('app-a').value=''; document.getElementById('app-fb').style.display='none'; }
|
||
function go(){ if(i>=6)return; var fb=document.getElementById('app-fb'), v=parseFloat(document.getElementById('app-a').value.replace(',','.').trim());
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-cur.a)<1e-9){ score++; feedback(fb,true,'✓ Верно: '+cur.a+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+cur.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(){
|
||
var QQ=[
|
||
{t:'s', q:'Куртка стоила 600 руб., теперь стоит 450 руб. Что произошло с ценой?'},
|
||
{t:'n', q:'Цена на хлеб выросла с 1 руб. до 1 руб. 20 коп. Что произошло с ценой?'},
|
||
{t:'s', q:'Магазин объявил распродажу: было 800 руб., стало 560 руб. Что произошло?'},
|
||
{t:'n', q:'Из-за роста спроса цена на билет выросла с 200 до 300 руб. Что это?'},
|
||
{t:'s', q:'Акция: было 500 руб., по акции 375 руб. Что произошло с ценой?'},
|
||
{t:'n', q:'Производитель повысил цену молока с 1 руб. до 1 руб. 15 коп. Что это?'}
|
||
];
|
||
var order2=QQ.map(function(_,k){return k;}); for(var j2=order2.length-1;j2>0;j2--){var kk=_ri(0,j2),tt=order2[j2];order2[j2]=order2[kk];order2[kk]=tt;}
|
||
var i2=0,score2=0,cur2=null;
|
||
function show2(){ if(i2>=5){ document.getElementById('app-vq').innerHTML='<b>Готово!</b> '+score2+' / 5'; if(score2>=4){addXp(15,'app-iv2');bumpProgress('app',35);}else if(score2>=2){addXp(8,'app-iv2');bumpProgress('app',18);} return; }
|
||
cur2=QQ[order2[i2]]; document.getElementById('app-vi').textContent=i2+1; document.getElementById('app-vq').innerHTML=cur2.q; document.getElementById('app-vfb').style.display='none'; }
|
||
function ans2(v){ if(i2>=5)return; var fb=document.getElementById('app-vfb');
|
||
if(v===cur2.t){ score2++; feedback(fb,true,'✓ Верно — это '+(cur2.t==='n'?'наценка (цена выросла)':'скидка (цена упала)')+'.'); } else feedback(fb,false,'✗ Нет. Это '+(cur2.t==='n'?'наценка':'скидка')+'.');
|
||
document.getElementById('app-vs').textContent=score2; i2++; setTimeout(show2,1400); }
|
||
document.querySelectorAll('#app-iv2 [data-av]').forEach(function(b){ b.addEventListener('click',function(){ ans2(b.getAttribute('data-av')); }); }); show2();
|
||
})();
|
||
}
|
||
|
||
/* ===================== ФИНАЛ ГЛАВЫ — БОССЫ ===================== */
|
||
function buildFinal(){
|
||
var box=document.getElementById('final-body'); var h='';
|
||
h+=makeCard('theory','Финал главы 2','★','<p>Пять боссов проверят проценты, пропорции, масштаб и круговые диаграммы. Победи всех!</p>');
|
||
h+='<div class="wg" id="fin"><div class="wg-header"><span class="wg-badge">Боссы</span><div class="wg-title">Сразись с главой 2</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-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','Завершить главу 2 (+10 XP)');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){
|
||
var bosses=[
|
||
function(){ var a=_pick([40,60,80,200]), m=_pick([10,20,25,5]); return {name:'Процентщик', q:'Найди $'+m+'\\%$ от $'+a+'$.', ans:a*m/100}; },
|
||
function(){ var b=_pick([10,20,30]), a=_pick([40,50,200]); return {name:'Аналитик', q:'Какой процент число $'+b+'$ составляет от $'+a+'$?', ans:_round(b/a*100,2)}; },
|
||
function(){ var aa=_ri(2,6),bb=_ri(2,8),m=_ri(2,5); return {name:'Пропорция', q:'Реши пропорцию $'+aa+':'+bb+' = '+(aa*m)+':x$. Найди $x$.', ans:bb*m}; },
|
||
function(){ var N=_pick([500,1000,2000]), d=_ri(2,8); return {name:'Картограф', q:'Масштаб $1:'+N+'$. На карте $'+d+'$ см. Реальное расстояние в метрах?', ans:d*N/100}; },
|
||
function(){ var p=_pick([10,20,25,50]); return {name:'Диаграмма', q:'Сектор $'+p+'\\%$ — сколько это градусов?', ans:_round(p*3.6,1)}; }
|
||
];
|
||
var i=0,score=0,cur=null,done=false;
|
||
function show(){ if(i>=5){ done=true; document.getElementById('fin-name').textContent=''; document.getElementById('fin-q').innerHTML=(score>=4?'<b>Победа!</b> Глава 2 пройдена. ':'<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-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)<0.051){ score++; feedback(fb,true,'✓ Босс повержен! Ответ '+_kf(cur.ans)+'.'); } else feedback(fb,false,'✗ Босс устоял. Верно: '+_kf(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:[ ['Процент','$1\\%=\\frac{1}{100}=0{,}01$'], ['$\\%\\to$ дробь','делим на 100'], ['дробь $\\to\\%$','умножаем на 100'], ['Всё число','$100\\%$'] ]},
|
||
p2:{ title:'Шпаргалка § 2', rows:[ ['% от числа','$b=\\frac{a}{100}\\cdot m$'], ['число по %','$a=\\frac{b}{m}\\cdot100$'], ['% отношение','$m\\%=\\frac{b}{a}\\cdot100\\%$'] ]},
|
||
p3:{ title:'Шпаргалка § 3', rows:[ ['Отношение','$a:b=\\frac{a}{b}$'], ['Пропорция','$a:b=c:d$'], ['Осн. свойство','$a\\cdot d=b\\cdot c$'], ['Неизвестный','$x=\\frac{b\\cdot c}{a}$'] ]},
|
||
p4:{ title:'Шпаргалка § 4', rows:[ ['Прямая','$\\frac{y}{x}=k$ (вместе растут)'], ['Обратная','$x\\cdot y=k$ (одна растёт — другая падает)'] ]},
|
||
p5:{ title:'Шпаргалка § 5', rows:[ ['Прямая','стрелки в одну сторону'], ['Обратная','одно отношение переворачиваем'], ['Решаем','крест-накрест'] ]},
|
||
p6:{ title:'Шпаргалка § 6', rows:[ ['Масштаб $1:N$','1 см карты = $N$ см реально'], ['Карта → реал','$\\times N$'], ['Реал → карта','$\\div N$'], ['1 м','$=100$ см'] ]},
|
||
p7:{ title:'Шпаргалка § 7', rows:[ ['Весь круг','$100\\%=360°$'], ['$p\\%$ сектора','$=3{,}6\\cdot p$ градусов'], ['$25\\%$','$=90°$'] ]},
|
||
app:{ title:'Шпаргалка § 9', rows:[ ['Скидка','цена $\\times$ (1 − %/100)'], ['Наценка','цена $\\times$ (1 + %/100)'], ['Проценты вклада','$\\frac{вклад}{100}\\cdot$ ставка'] ]},
|
||
final:{ title:'Финал главы 2', rows:[ ['5 боссов','проценты, пропорции, масштаб, диаграммы'], ['Победа','4 из 5 и больше'], ['Награда','+40 XP и достижение «Глава 2 пройдена»'] ]}
|
||
};
|
||
var TIPS = [
|
||
{ sec:'p1', html:'Процент — это сотая. Чтобы перевести проценты в дробь, просто сдвинь запятую на 2 знака влево: $7\\%=0{,}07$.' },
|
||
{ sec:'p2', html:'Определи тип задачи: ищешь часть от числа (тип 1), само число (тип 2) или сколько процентов (тип 3) — и примени нужную формулу.' },
|
||
{ sec:'p3', html:'Основное свойство: перемножь «крест-накрест». Неизвестный член $x=\\frac{b\\cdot c}{a}$ — произведение средних делить на известный крайний.' },
|
||
{ sec:'p4', html:'Прямая: «больше — больше» (отношение постоянно). Обратная: «больше — меньше» (произведение постоянно).' },
|
||
{ sec:'p5', html:'Запиши условие в две строки. Если зависимость обратная — переверни одно из отношений перед тем, как решать крест-накрест.' },
|
||
{ sec:'p6', html:'$1:N$ — карта в $N$ раз меньше. Из карты в реальность умножай на $N$; не забудь перевести см в метры (делить на 100).' },
|
||
{ sec:'p7', html:'Весь круг = $360°$ = $100\\%$. Значит $1\\%=3{,}6°$. Чтобы из процентов получить градусы — умножь на $3{,}6$.' }
|
||
];
|
||
var GLOSSARY = [
|
||
{ term:'процент', def:'Сотая доля числа: $1\\%=\\frac{1}{100}$.', sec:'p1', aliases:['процент','процента','процентов','проценты','процентах'] },
|
||
{ term:'пропорция', def:'Равенство двух отношений: $a:b=c:d$.', sec:'p3', aliases:['пропорция','пропорции','пропорцию','пропорций'] },
|
||
{ term:'отношение', def:'Частное двух чисел $a:b=\\frac{a}{b}$.', sec:'p3', aliases:['отношение','отношения','отношении'] },
|
||
{ term:'крайние члены', def:'Первый и последний члены пропорции ($a$ и $d$).', sec:'p3', aliases:['крайние члены','крайних членов','крайние'] },
|
||
{ term:'средние члены', def:'Второй и третий члены пропорции ($b$ и $c$).', sec:'p3', aliases:['средние члены','средних членов','средние'] },
|
||
{ term:'прямая пропорциональность', def:'Зависимость, при которой отношение величин постоянно ($y/x=k$).', sec:'p4', aliases:['прямая пропорциональность','прямо пропорциональны','прямой пропорциональности'] },
|
||
{ term:'обратная пропорциональность', def:'Зависимость, при которой произведение величин постоянно ($xy=k$).', sec:'p4', aliases:['обратная пропорциональность','обратно пропорциональны','обратной пропорциональности'] },
|
||
{ term:'масштаб', def:'Отношение длины на карте к реальной длине; $1:N$.', sec:'p6', aliases:['масштаб','масштаба','масштабе','масштабом'] },
|
||
{ term:'круговая диаграмма', def:'Диаграмма-круг, показывающая доли целого; весь круг $=360°=100\\%$.', sec:'p7', aliases:['круговая диаграмма','круговой диаграммы','круговую диаграмму','диаграмма','диаграммы'] }
|
||
];
|
||
var BUILDERS = { p1:buildP1, p2:buildP2, p3:buildP3, p4:buildP4, p5:buildP5, p6:buildP6, p7:buildP7, app:buildApp, final:buildFinal };
|
||
Object.assign(window.M6, { sidebars:SIDEBARS, tips:TIPS, glossary:GLOSSARY, builders:BUILDERS });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|