Maxim Dolgolyov
653d3564df
§1 разрядный конструктор (ползунки) + квиз «цифра в разряде»; §2 сравнение на числовой прямой + тренажёр округления; §3 чтение координаты и поиск точки A–D на координатном луче (Math6.numberLine). Теория-карточки, шпаргалки, подсказки, глоссарий. Тесты: 9/9. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
344 lines
31 KiB
HTML
344 lines
31 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 · Глава 1 · Десятичные дроби</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_engine.js" defer></script>
|
||
<style>:root{--pri:#4f46e5;--pri2:#3730a3;--pri-soft:#e0e7ff;--acc:#6366f1;--acc2:#4f46e5;--acc-soft:#eef2ff}</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hdr" data-wm="0,5">
|
||
<div class="hdr-row">
|
||
<div>
|
||
<h1>Математика 6 · Глава 1</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="0,5">
|
||
<h2>Десятичные дроби</h2>
|
||
<p>Десятичная дробь — это привычная запись чисел с запятой: цена, рост, масса, показания приборов. В этой главе мы научимся <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» · Глава 1 · Десятичные дроби · 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-ch1', lsPrefix: 'math6_ch1', xpKey: 'math6_xp', wm: '0,5',
|
||
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:'Умножение и деление на 10, 100, 1000', sub:'Сдвиг запятой' },
|
||
{ id:'p6', num:'§ 6', name:'Умножение десятичных дробей', sub:'Считаем знаки после запятой' },
|
||
{ id:'p7', num:'§ 7', name:'Деление на натуральное число', sub:'Деление уголком' },
|
||
{ id:'p8', num:'§ 8', name:'Деление на десятичную дробь', sub:'Переносим запятую' },
|
||
{ id:'p9', num:'§ 9', name:'Конечные и бесконечные дроби', sub:'Период дроби' },
|
||
{ id:'p10', num:'§ 10', name:'Преобразования выражений', sub:'Обыкновенные и десятичные вместе' },
|
||
{ id:'app', num:'§ 12', name:'Математика вокруг нас', sub:'Десятичные дроби в жизни', applied:true },
|
||
{ id:'final', num:'★', name:'Финал главы', sub:'Тест · боссы главы 1', final:true }
|
||
],
|
||
achLabels: {
|
||
start:'Начало главы 1!', p1_done:'Разряды освоены!', p2_done:'Сравнение и округление — легко!',
|
||
p3_done:'Координатный луч покорён!', p4_done:'Сложение и вычитание — точно!', p5_done:'Сдвиг запятой освоен!',
|
||
p6_done:'Умножение десятичных — мастер!', p7_done:'Деление уголком — уверенно!', p8_done:'Деление на дробь — без страха!',
|
||
p9_done:'Период дроби найден!', p10_done:'Преобразования — на отлично!', app_done:'Математика вокруг нас!',
|
||
ch1_done:'Глава 1 пройдена!'
|
||
},
|
||
startAch: ['start','Начало главы 1!'],
|
||
finalAch: ['ch1_done','Глава 1 пройдена!'],
|
||
sidebars: {}, tips: [], glossary: [], builders: {},
|
||
footer: 'Интерактивный учебник «Математика 6» · Глава 1 · Десятичные дроби · 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('.','{,}'); } /* число → KaTeX с запятой */
|
||
function _round(n,d){ var p=Math.pow(10,d); return Math.round(n*p)/p; }
|
||
|
||
/* ===================== § 1. ЗАПИСЬ И РАЗРЯДЫ ===================== */
|
||
function buildP1(){
|
||
var box=document.getElementById('p1-body'); var h='';
|
||
h+=makeCard('theory','Что такое десятичная дробь','1.1',
|
||
'<p><b>Десятичная дробь</b> — это дробь со знаменателем $10$, $100$, $1000$ и т. д. Такие дроби записывают <b>без знаменателя</b>, отделяя целую часть от дробной <b>запятой</b>.</p>'
|
||
+'<p>$\\dfrac{7}{10}=0{,}7$ · $\\dfrac{25}{100}=0{,}25$ · $3\\dfrac{4}{100}=3{,}04$</p>'
|
||
+'<p>Слева от запятой — <b>целая</b> часть, справа — <b>дробная</b>. Сколько нулей в знаменателе, столько цифр после запятой.</p>');
|
||
h+=makeCard('rule','Разряды десятичной дроби','1.2',
|
||
'<p>После запятой идут разряды: <b>десятые</b> $\\bigl(\\tfrac{1}{10}\\bigr)$, <b>сотые</b> $\\bigl(\\tfrac{1}{100}\\bigr)$, <b>тысячные</b> $\\bigl(\\tfrac{1}{1000}\\bigr)$ и далее.</p>'
|
||
+'<table class="tbl"><tr><th>дес.</th><th>ед.</th><th>,</th><th>десятые</th><th>сотые</th><th>тысячные</th></tr>'
|
||
+'<tr><td>1</td><td>2</td><td><b>,</b></td><td>3</td><td>0</td><td>5</td></tr></table>'
|
||
+'<p>Это число $12{,}305$ — «двенадцать целых триста пять тысячных».</p>');
|
||
h+=makeCard('example','Читаем по разрядам','1.3',
|
||
'<p>$0{,}7$ — семь десятых; $0{,}09$ — девять сотых; $5{,}28$ — пять целых двадцать восемь сотых.</p>'
|
||
+'<p>Приписывание нулей <b>справа</b> не меняет дробь: $0{,}5=0{,}50=0{,}500$.</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="sliders">'
|
||
+'<label>Целые = <b id="p1-cv">3</b><input type="range" id="p1-c" min="0" max="20" value="3"></label>'
|
||
+'<label>Десятые = <b id="p1-tv">2</b><input type="range" id="p1-t" min="0" max="9" value="2"></label>'
|
||
+'<label>Сотые = <b id="p1-hv">5</b><input type="range" id="p1-h" min="0" max="9" value="5"></label>'
|
||
+'<label>Тысячные = <b id="p1-thv">0</b><input type="range" id="p1-th" min="0" max="9" value="0"></label>'
|
||
+'</div><div id="p1-iv1-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">Назови цифру в указанном разряде данного числа. Введи одну цифру (0–9).</div>'
|
||
+'<div class="score-display"><span>Вопрос <b id="p1-qi">1</b> / 6</span><span>Очки: <b id="p1-qs">0</b> / 6</span></div>'
|
||
+'<div id="p1-qq" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p1-qa" class="tinp" style="width:90px;text-align:center" min="0" max="9"><button class="btn primary" id="p1-qgo">Проверить</button></div>'
|
||
+'<div class="feedback" id="p1-qfb"></div></div>';
|
||
h+=secNav(null,'p2')+readBtn('p1');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){
|
||
var c=document.getElementById('p1-c'),t=document.getElementById('p1-t'),hh=document.getElementById('p1-h'),th=document.getElementById('p1-th'),out=document.getElementById('p1-iv1-out');
|
||
function upd(){
|
||
document.getElementById('p1-cv').textContent=c.value; document.getElementById('p1-tv').textContent=t.value;
|
||
document.getElementById('p1-hv').textContent=hh.value; document.getElementById('p1-thv').textContent=th.value;
|
||
var ci=+c.value,ti=+t.value,hi=+hh.value,thi=+th.value, total=ci*1000+ti*100+hi*10+thi, val=total/1000;
|
||
out.innerHTML='<div style="font-size:1.5rem;font-weight:800;color:var(--pri2)">$'+_kf(val)+'$</div>'
|
||
+'<div style="font-size:.88rem;color:var(--muted);margin-top:6px">$'+ci+' + '+ti+'\\cdot 0{,}1 + '+hi+'\\cdot 0{,}01 + '+thi+'\\cdot 0{,}001 = \\dfrac{'+total+'}{1000}$</div>';
|
||
renderMath(out);
|
||
}
|
||
c.oninput=t.oninput=hh.oninput=th.oninput=upd; upd();
|
||
})();
|
||
|
||
(function(){
|
||
var places=[['десятков',2],['единиц',1],['десятых',-1],['сотых',-2],['тысячных',-3]];
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ var ws=String(_ri(10,99)), ds=String(_ri(0,999)).padStart(3,'0'), pl=_pick(places), dg;
|
||
if(pl[1]===2)dg=+ws[0]; else if(pl[1]===1)dg=+ws[1]; else if(pl[1]===-1)dg=+ds[0]; else if(pl[1]===-2)dg=+ds[1]; else dg=+ds[2];
|
||
cur={num:ws+','+ds, place:pl[0], digit:dg}; }
|
||
function show(){
|
||
if(i>=6){ document.getElementById('p1-qq').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',18);} return; }
|
||
gen(); document.getElementById('p1-qi').textContent=i+1;
|
||
document.getElementById('p1-qq').innerHTML='Число <b style="font-family:JetBrains Mono,monospace;font-size:1.25rem">'+cur.num+'</b>. Какая цифра в разряде <b>'+cur.place+'</b>?';
|
||
document.getElementById('p1-qa').value=''; document.getElementById('p1-qfb').style.display='none';
|
||
}
|
||
function go(){ if(i>=6)return; var fb=document.getElementById('p1-qfb'), a=parseInt(document.getElementById('p1-qa').value,10);
|
||
if(isNaN(a)){ feedback(fb,false,'Введи одну цифру 0–9.'); return; }
|
||
if(a===cur.digit){ score++; feedback(fb,true,'✓ Верно! В разряде '+cur.place+' стоит '+cur.digit+'.'); } else feedback(fb,false,'✗ Нет. Правильный ответ: '+cur.digit+'.');
|
||
document.getElementById('p1-qs').textContent=score; i++; setTimeout(show,1100); }
|
||
document.getElementById('p1-qgo').addEventListener('click',go);
|
||
document.getElementById('p1-qa').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); });
|
||
show();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 2. СРАВНЕНИЕ И ОКРУГЛЕНИЕ ===================== */
|
||
function buildP2(){
|
||
var box=document.getElementById('p2-body'); var h='';
|
||
h+=makeCard('rule','Как сравнивать десятичные дроби','2.1',
|
||
'<p>1) Сначала сравнивают <b>целые</b> части: больше та дробь, у которой целая часть больше.</p>'
|
||
+'<p>2) Если целые части равны — сравнивают <b>поразрядно</b> слева направо: десятые, потом сотые и т. д.</p>'
|
||
+'<p>Чтобы было удобно, число знаков после запятой <b>уравнивают</b> нулями: $0{,}5$ и $0{,}48 \\Rightarrow 0{,}50$ и $0{,}48$, значит $0{,}5>0{,}48$.</p>');
|
||
h+=makeCard('rule','Округление до разряда','2.2',
|
||
'<p>Чтобы округлить дробь до некоторого разряда, смотрят на <b>следующую</b> цифру:</p>'
|
||
+'<ul style="padding-left:22px;line-height:1.9"><li>если она $0,1,2,3,4$ — разряд <b>оставляют</b>, остальное отбрасывают;</li>'
|
||
+'<li>если она $5,6,7,8,9$ — разряд <b>увеличивают на 1</b>.</li></ul>'
|
||
+'<p>$3{,}472 \\approx 3{,}5$ (до десятых), $\\;3{,}472 \\approx 3$ (до целых).</p>');
|
||
h+=makeCard('example','Примеры','2.3',
|
||
'<p>$0{,}9>0{,}89$, ведь $0{,}90>0{,}89$. $2{,}1<2{,}15$. $7{,}0=7$.</p>'
|
||
+'<p>$12{,}96 \\approx 13{,}0$ (до десятых) — при округлении $9$ превратилось в $10$, перенос в целые.</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-ci">1</b> / 6</span><span>Очки: <b id="p2-cs">0</b> / 6</span></div>'
|
||
+'<div id="p2-cfig"></div><div id="p2-cq" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-cmp=">">a > b</button><button class="btn primary" data-cmp="=">a = b</button><button class="btn primary" data-cmp="<">a < b</button></div>'
|
||
+'<div class="feedback" id="p2-cfb"></div></div>';
|
||
h+='<div class="wg" id="p2-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Округли число</div></div>'
|
||
+'<div class="wg-help">Округли данное число до указанного разряда. Десятичную запятую вводи как точку или запятую.</div>'
|
||
+'<div class="score-display"><span>Вопрос <b id="p2-ri">1</b> / 5</span><span>Очки: <b id="p2-rs">0</b> / 5</span></div>'
|
||
+'<div id="p2-rq" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="p2-ra" class="tinp" style="width:120px;text-align:center" placeholder="ответ"><button class="btn primary" id="p2-rgo">Проверить</button></div>'
|
||
+'<div class="feedback" id="p2-rfb"></div></div>';
|
||
h+=secNav('p1','p3')+readBtn('p2');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ var a=_ri(0,49)/10, b=_ri(0,49)/10; cur={a:a,b:b}; }
|
||
function show(){
|
||
if(i>=6){ document.getElementById('p2-cq').innerHTML='<b>Готово!</b> Результат: '+score+' / 6'; document.getElementById('p2-cfig').innerHTML=''; if(score>=5){addXp(15,'p2-iv1');bumpProgress('p2',30);}else if(score>=3){addXp(8,'p2-iv1');bumpProgress('p2',16);} return; }
|
||
gen(); document.getElementById('p2-ci').textContent=i+1;
|
||
document.getElementById('p2-cfig').innerHTML=Math6.numberLine({min:0,max:5,minor:0.5,major:1,width:560,marks:[{v:cur.a,label:'a',color:'#4f46e5'},{v:cur.b,label:'b',color:'#e11d48',above:false}]});
|
||
document.getElementById('p2-cq').innerHTML='$a='+_kf(cur.a)+'$, $b='+_kf(cur.b)+'$. Что верно?'; renderMath(document.getElementById('p2-cq'));
|
||
document.getElementById('p2-cfb').style.display='none';
|
||
}
|
||
function ans(sym){ if(i>=6)return; var fb=document.getElementById('p2-cfb'), correct=cur.a>cur.b?'>':(cur.a<cur.b?'<':'=');
|
||
if(sym===correct){ score++; feedback(fb,true,'✓ Верно: $'+_kf(cur.a)+' '+correct+' '+_kf(cur.b)+'$.'); } else feedback(fb,false,'✗ Нет. Верно: $'+_kf(cur.a)+' '+correct+' '+_kf(cur.b)+'$.');
|
||
document.getElementById('p2-cs').textContent=score; i++; setTimeout(show,1100); }
|
||
document.querySelectorAll('#p2-iv1 [data-cmp]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-cmp')); }); });
|
||
show();
|
||
})();
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ var n=_ri(105,4995)/100, pl=_pick([['целых',0],['десятых',1]]); cur={n:n, place:pl[0], d:pl[1], ans:_round(n,pl[1])}; }
|
||
function show(){
|
||
if(i>=5){ document.getElementById('p2-rq').innerHTML='<b>Готово!</b> Результат: '+score+' / 5'; if(score>=4){addXp(15,'p2-iv2');bumpProgress('p2',30);}else if(score>=2){addXp(8,'p2-iv2');bumpProgress('p2',16);} return; }
|
||
gen(); document.getElementById('p2-ri').textContent=i+1;
|
||
document.getElementById('p2-rq').innerHTML='Округли $'+_kf(n_str(cur.n))+'$ до <b>'+cur.place+'</b>.'; renderMath(document.getElementById('p2-rq'));
|
||
document.getElementById('p2-ra').value=''; document.getElementById('p2-rfb').style.display='none';
|
||
}
|
||
function n_str(x){ return x; }
|
||
function go(){ if(i>=5)return; var fb=document.getElementById('p2-rfb'), raw=document.getElementById('p2-ra').value.replace(',','.').trim(); var v=parseFloat(raw);
|
||
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('p2-rs').textContent=score; i++; setTimeout(show,1200); }
|
||
document.getElementById('p2-rgo').addEventListener('click',go);
|
||
document.getElementById('p2-ra').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); });
|
||
show();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 3. КООРДИНАТНЫЙ ЛУЧ ===================== */
|
||
function buildP3(){
|
||
var box=document.getElementById('p3-body'); var h='';
|
||
h+=makeCard('theory','Координатный луч','3.1',
|
||
'<p><b>Координатный луч</b> — это луч с началом в точке $O$, которой соответствует число $0$, выбранным <b>единичным отрезком</b> и направлением.</p>'
|
||
+'<p>Каждой точке луча соответствует <b>координата</b> — число, показывающее, на каком расстоянии (в единичных отрезках) от начала она находится.</p>');
|
||
h+=makeCard('rule','Как отметить десятичную дробь','3.2',
|
||
'<p>Чтобы отметить десятые, единичный отрезок делят на <b>10</b> равных частей. Тогда $0{,}7$ — это $7$ маленьких делений от нуля.</p>'
|
||
+'<p>$1{,}3$ лежит между $1$ и $2$, ближе к $1$; $2{,}5$ — ровно посередине между $2$ и $3$.</p>');
|
||
h+=makeCard('example','Пример','3.3',
|
||
'<p>Точка с координатой $0{,}4$ — четвёртое деление после нуля. Точка с координатой $1{,}8$ — восьмое деление после единицы.</p>');
|
||
h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прочитай координату</div></div>'
|
||
+'<div class="wg-help">Определи координату отмеченной точки. Запятую вводи как точку или запятую.</div>'
|
||
+'<div class="score-display"><span>Вопрос <b id="p3-ai">1</b> / 5</span><span>Очки: <b id="p3-as">0</b> / 5</span></div>'
|
||
+'<div id="p3-afig"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="p3-aa" class="tinp" style="width:120px;text-align:center" placeholder="координата"><button class="btn primary" id="p3-ago">Проверить</button></div>'
|
||
+'<div class="feedback" id="p3-afb"></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">Какая из точек $A, B, C, D$ имеет указанную координату?</div>'
|
||
+'<div class="score-display"><span>Вопрос <b id="p3-bi">1</b> / 5</span><span>Очки: <b id="p3-bs">0</b> / 5</span></div>'
|
||
+'<div id="p3-bfig"></div><div id="p3-bq" class="qbox"></div>'
|
||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-pt="A">A</button><button class="btn primary" data-pt="B">B</button><button class="btn primary" data-pt="C">C</button><button class="btn primary" data-pt="D">D</button></div>'
|
||
+'<div class="feedback" id="p3-bfb"></div></div>';
|
||
h+=secNav('p2','p4')+readBtn('p3');
|
||
box.innerHTML=h; renderMath(box);
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=0;
|
||
function show(){
|
||
if(i>=5){ document.getElementById('p3-afig').innerHTML='<b>Готово!</b> Результат: '+score+' / 5'; if(score>=4){addXp(15,'p3-iv1');bumpProgress('p3',30);}else if(score>=2){addXp(8,'p3-iv1');bumpProgress('p3',16);} return; }
|
||
cur=_ri(1,29)/10; document.getElementById('p3-ai').textContent=i+1;
|
||
document.getElementById('p3-afig').innerHTML=Math6.numberLine({min:0,max:3,minor:0.1,major:1,ray:true,width:560,marks:[{v:cur,label:'?',color:'#e11d48'}]});
|
||
document.getElementById('p3-aa').value=''; document.getElementById('p3-afb').style.display='none';
|
||
}
|
||
function go(){ if(i>=5)return; var fb=document.getElementById('p3-afb'), v=parseFloat(document.getElementById('p3-aa').value.replace(',','.').trim());
|
||
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
|
||
if(Math.abs(v-cur)<0.001){ score++; feedback(fb,true,'✓ Верно: $'+_kf(cur)+'$.'); } else feedback(fb,false,'✗ Нет. Координата: $'+_kf(cur)+'$.');
|
||
document.getElementById('p3-as').textContent=score; i++; setTimeout(show,1200); }
|
||
document.getElementById('p3-ago').addEventListener('click',go);
|
||
document.getElementById('p3-aa').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); });
|
||
show();
|
||
})();
|
||
|
||
(function(){
|
||
var i=0,score=0,cur=null;
|
||
function gen(){ var set={}; var vals=[]; while(vals.length<4){ var v=_ri(2,48)/10; if(!set[v]){ set[v]=1; vals.push(v); } } vals.sort(function(a,b){return a-b;});
|
||
var labels=['A','B','C','D']; var marks=vals.map(function(v,k){ return {v:v,label:labels[k],color:'#4f46e5'}; });
|
||
var ti=_ri(0,3); cur={marks:marks, target:vals[ti], label:labels[ti]}; }
|
||
function show(){
|
||
if(i>=5){ document.getElementById('p3-bfig').innerHTML=''; document.getElementById('p3-bq').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-bi').textContent=i+1;
|
||
document.getElementById('p3-bfig').innerHTML=Math6.numberLine({min:0,max:5,minor:0.5,major:1,width:560,marks:cur.marks});
|
||
document.getElementById('p3-bq').innerHTML='Точка с координатой $'+_kf(cur.target)+'$ — это ...?'; renderMath(document.getElementById('p3-bq'));
|
||
document.getElementById('p3-bfb').style.display='none';
|
||
}
|
||
function ans(lab){ if(i>=5)return; var fb=document.getElementById('p3-bfb');
|
||
if(lab===cur.label){ score++; feedback(fb,true,'✓ Верно — это точка '+cur.label+'.'); } else feedback(fb,false,'✗ Нет. Это точка '+cur.label+'.');
|
||
document.getElementById('p3-bs').textContent=score; i++; setTimeout(show,1100); }
|
||
document.querySelectorAll('#p3-iv2 [data-pt]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-pt')); }); });
|
||
show();
|
||
})();
|
||
}
|
||
|
||
/* ===================== ДАННЫЕ САЙДБАРА / ГЛОССАРИЯ ===================== */
|
||
var SIDEBARS = {
|
||
p1:{ title:'Шпаргалка § 1', rows:[
|
||
['Десятичная дробь','знаменатель $10,100,1000\\ldots$, пишут через запятую'],
|
||
['Целая часть','слева от запятой'],
|
||
['Дробная часть','справа от запятой'],
|
||
['Разряды','десятые, сотые, тысячные …'],
|
||
['Нули справа','$0{,}5=0{,}50=0{,}500$'] ]},
|
||
p2:{ title:'Шпаргалка § 2', rows:[
|
||
['Сравнение','сначала целые части, потом поразрядно'],
|
||
['Уравнять знаки','дописать нули: $0{,}5=0{,}50$'],
|
||
['Округление','следующая цифра $<5$ — отбросить'],
|
||
['','следующая цифра $\\ge 5$ — прибавить 1'] ]},
|
||
p3:{ title:'Шпаргалка § 3', rows:[
|
||
['Координатный луч','начало $O$, $0$, единичный отрезок'],
|
||
['Координата','расстояние от $0$ в единичных отрезках'],
|
||
['Десятые','единичный отрезок делим на 10'],
|
||
['$2{,}5$','посередине между 2 и 3'] ]}
|
||
};
|
||
var TIPS = [
|
||
{ sec:'p1', html:'Число цифр после запятой = числу нулей в знаменателе. У $0{,}305$ три цифры → знаменатель $1000$.' },
|
||
{ sec:'p2', html:'Перед сравнением мысленно <b>уравняй</b> число знаков нулями: $0{,}5$ это $0{,}50$, и сразу видно, что $0{,}50>0{,}48$.' },
|
||
{ sec:'p3', html:'Чтобы отметить десятые, дели единичный отрезок на 10. $1{,}7$ — это $1$ и ещё $7$ маленьких делений.' }
|
||
];
|
||
var GLOSSARY = [
|
||
{ term:'десятичная дробь', def:'Дробь со знаменателем $10,100,1000,\\ldots$, записанная через запятую.', sec:'p1', aliases:['десятичная дробь','десятичной дроби','десятичные дроби','десятичных дробей','десятичную дробь'] },
|
||
{ term:'разряд', def:'Место цифры в записи числа: десятые, сотые, тысячные и т. д.', sec:'p1', aliases:['разряд','разряда','разряде','разряды','разрядов'] },
|
||
{ term:'координатный луч', def:'Луч с началом $O$ (число $0$), единичным отрезком и направлением.', sec:'p3', aliases:['координатный луч','координатном луче','координатного луча'] },
|
||
{ term:'координата', def:'Число, показывающее расстояние точки от начала в единичных отрезках.', sec:'p3', aliases:['координата','координату','координаты','координатой'] },
|
||
{ term:'округление', def:'Замена числа близким с меньшим числом разрядов по правилу: следующая цифра $\\ge5$ — разряд увеличивают.', sec:'p2', aliases:['округление','округления','округлить','округлении'] }
|
||
];
|
||
var BUILDERS = { p1:buildP1, p2:buildP2, p3:buildP3 };
|
||
Object.assign(window.M6, { sidebars:SIDEBARS, tips:TIPS, glossary:GLOSSARY, builders:BUILDERS });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|