maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(geom9 ch4 wave2): §15 «3/4/6-угольники» + §16 «Окружность и круг»

Browse Source
This commit is contained in:
Maxim Dolgolyov
2026-05-29 10:25:10 +03:00
parent cbeb198be3
commit b8be0b879a
1 changed files with 601 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/textbooks/geometry_9_ch4.html
+601 -2
View File
@@ -501,8 +501,607 @@ function _stubBuilder(paraId, num, name, prev, next){
if(window.renderMathInElement) renderMath(body);
}
function buildP15(){ _stubBuilder('p15', '§15', 'Треугольник, квадрат, шестиугольник', 'p14', 'p16'); }
function buildP16(){ _stubBuilder('p16', '§16', 'Длина окружности и площадь круга', 'p15', 'final4'); }
/* ===== §15 Треугольник, квадрат, шестиугольник ===== */
function buildP15(){
const box = document.getElementById('p15-body');
let html = '';
html += makeCard('theory', 'Эталонные значения для $n=3,4,6$', '15.1', `
<p>Из общей формулы $\\dfrac{a}{2} = R\\sin\\dfrac{180^\\circ}{n}$ (§14) для трёх «именных» правильных многоугольников получаются красивые ответы.</p>
<p><b>Равносторонний треугольник</b> ($n = 3$, $180^\\circ/3 = 60^\\circ$):</p>
<p style="text-align:center">$a = 2R\\sin 60^\\circ = R\\sqrt{3}$,&nbsp; $r = R\\cos 60^\\circ = \\dfrac{R}{2}$,&nbsp; $S = \\dfrac{3\\sqrt{3}}{4} R^2$.</p>
<p><b>Квадрат</b> ($n = 4$, $180^\\circ/4 = 45^\\circ$):</p>
<p style="text-align:center">$a = 2R\\sin 45^\\circ = R\\sqrt{2}$,&nbsp; $r = R\\cos 45^\\circ = R\\dfrac{\\sqrt{2}}{2}$,&nbsp; $S = 2R^2$.</p>
<p><b>Правильный шестиугольник</b> ($n = 6$, $180^\\circ/6 = 30^\\circ$):</p>
<p style="text-align:center">$a = 2R\\sin 30^\\circ = R$,&nbsp; $r = R\\cos 30^\\circ = R\\dfrac{\\sqrt{3}}{2}$,&nbsp; $S = \\dfrac{3\\sqrt{3}}{2} R^2$.</p>
<details class="spoiler"><summary>Откуда $S$?</summary><div class="spoiler-body">
Берём $S = \\tfrac{1}{2} n R^2 \\sin\\dfrac{360^\\circ}{n}$. Для $n=3$: $S = \\tfrac{3}{2} R^2 \\sin 120^\\circ = \\tfrac{3}{2}\\cdot\\tfrac{\\sqrt{3}}{2} R^2 = \\tfrac{3\\sqrt{3}}{4} R^2$. Для $n=4$: $S = 2 R^2 \\sin 90^\\circ = 2R^2$. Для $n=6$: $S = 3 R^2 \\sin 60^\\circ = \\tfrac{3\\sqrt{3}}{2} R^2$.
</div></details>`);
html += makeCard('rule', 'Как это запомнить', '15.2', `
<p>Сторона выражается через $R$ корнем (или без него) — главное правило главы:</p>
<ul style="padding-left:22px;line-height:1.95">
<li><b>3-угольник:</b>&nbsp; $a = R\\sqrt{3}$ — «три-корень-три».</li>
<li><b>4-угольник:</b>&nbsp; $a = R\\sqrt{2}$ — «квадрат-корень-два». Кстати, диагональ квадрата $= a\\sqrt{2} = 2R$ (это диаметр описанной окружности).</li>
<li><b>6-угольник:</b>&nbsp; $a = R$ — «шестиугольник = радиус». Правильный 6-угольник состоит из <b>6 равносторонних треугольников</b> со стороной $R$ (с вершиной в центре).</li>
</ul>
<p style="margin-top:10px"><b>Совет:</b> запомни только эти три случая — на ЦТ/экзамене они встречаются чаще всего, и формулы для них короче «общих».</p>`);
html += makeCard('example', 'Обратные формулы (от $a$ к $R$)', '15.3', `
<p>Если дана сторона $a$, радиус описанной окружности находится так:</p>
<ul style="padding-left:22px;line-height:1.95">
<li><b>3-угольник:</b>&nbsp; $R = \\dfrac{a}{\\sqrt{3}} = \\dfrac{a\\sqrt{3}}{3}$. Пример: $a = 6 \\Rightarrow R = \\dfrac{6}{\\sqrt{3}} = 2\\sqrt{3} \\approx 3{,}46$.</li>
<li><b>4-угольник:</b>&nbsp; $R = \\dfrac{a}{\\sqrt{2}} = \\dfrac{a\\sqrt{2}}{2}$. Пример: $a = 4 \\Rightarrow R = 2\\sqrt{2} \\approx 2{,}83$.</li>
<li><b>6-угольник:</b>&nbsp; $R = a$. Пример: $a = 5 \\Rightarrow R = 5$.</li>
</ul>
<details class="spoiler"><summary>А апофема $r$?</summary><div class="spoiler-body">
Для треугольника $r = R/2 = \\dfrac{a}{2\\sqrt{3}} = \\dfrac{a\\sqrt{3}}{6}$. Для квадрата $r = R\\dfrac{\\sqrt{2}}{2} = \\dfrac{a}{2}$ — апофема квадрата равна половине стороны. Для шестиугольника $r = R\\dfrac{\\sqrt{3}}{2} = \\dfrac{a\\sqrt{3}}{2}$.
</div></details>`);
/* IV1 — Три эталонных многоугольника */
html += `<div class="wg" id="p15-iv1">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 1</span><div class="wg-title">Три эталонных многоугольника</div></div>
<div class="wg-help">Меняй радиус $R$ — увидишь сразу 3 правильных многоугольника с одинаковой описанной окружностью.</div>
<div class="sliders">
<label>Радиус $R$<b id="p15-iv1-rval">70</b><input type="range" id="p15-iv1-r" min="40" max="100" step="1" value="70"></label>
</div>
<div style="background:var(--card);border-radius:10px;padding:10px;overflow-x:auto">
<svg id="p15-iv1-svg" viewBox="0 0 700 260" style="width:100%;max-width:700px;min-width:340px;height:auto;display:block;margin:0 auto"></svg>
</div>
<div id="p15-iv1-out" style="margin-top:10px;padding:10px 14px;background:var(--pri-soft);border-radius:9px;font-size:.92rem;overflow-x:auto"></div>
</div>`;
/* IV2 — Калькулятор для эталонов */
html += `<div class="wg" id="p15-iv2">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">Калькулятор для эталонов</div></div>
<div class="wg-help">Выбери многоугольник, введи радиус $R$ — получишь $a$, $r$, $S$ по «короткой» формуле.</div>
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;justify-content:center" id="p15-iv2-modes">
<button class="btn primary" data-m="3">Треугольник</button>
<button class="btn" data-m="4">Квадрат</button>
<button class="btn" data-m="6">6-угольник</button>
</div>
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;margin-bottom:10px">
<span style="font-family:'JetBrains Mono',monospace">$R$ =</span>
<input type="number" id="p15-iv2-r" class="tinp" style="width:100px;text-align:center" value="4" step="0.01" min="0.01">
<button class="btn primary" id="p15-iv2-go">Вычислить</button>
</div>
<div id="p15-iv2-out" style="padding:12px 14px;background:var(--card);border-radius:9px;text-align:center;font-size:1rem;min-height:50px"></div>
<div class="feedback" id="p15-iv2-fb"></div>
</div>`;
/* IV3 — Какая сторона? */
html += `<div class="wg" id="p15-iv3">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 3</span><div class="wg-title">Какая сторона?</div></div>
<div class="wg-help">Выбери правильную формулу для стороны $a$ через радиус $R$.</div>
<div class="score-display"><span>Задача <b id="p15-iv3-i">1</b> / 6</span><span>Очки: <b id="p15-iv3-s">0</b> / 6</span></div>
<div id="p15-iv3-q" style="padding:14px;background:var(--pri-soft);border-radius:10px;font-size:1.1rem;text-align:center;margin-bottom:10px"></div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px">
<button class="btn primary" data-ans="3" id="p15-iv3-a3">$a = R\\sqrt{3}$</button>
<button class="btn primary" data-ans="2" id="p15-iv3-a2">$a = R\\sqrt{2}$</button>
<button class="btn primary" data-ans="1" id="p15-iv3-a1">$a = R$</button>
</div>
<div class="feedback" id="p15-iv3-fb"></div>
</div>`;
/* IV4 — Тренажёр */
html += `<div class="wg" id="p15-iv4">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 4</span><div class="wg-title">Тренажёр эталонных формул</div></div>
<div class="wg-help">Реши задачу и введи число (округли до двух знаков, допуск 0.05).</div>
<div class="score-display"><span>Задача <b id="p15-iv4-i">1</b> / 6</span><span>Очки: <b id="p15-iv4-s">0</b> / 6</span></div>
<div id="p15-iv4-q" style="padding:14px;background:var(--pri-soft);border-radius:10px;font-size:1.05rem;margin-bottom:10px;text-align:center"></div>
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center">
<span style="font-family:'JetBrains Mono',monospace">ответ =</span>
<input type="number" id="p15-iv4-ans" class="tinp" style="width:110px;text-align:center" step="0.01">
<button class="btn primary" id="p15-iv4-go">Проверить</button>
<button class="btn" id="p15-iv4-start">Заново</button>
</div>
<div class="feedback" id="p15-iv4-fb"></div>
</div>`;
html += readButton('p15');
html += secNav('p14', 'p16');
box.innerHTML = html;
renderMath(box);
/* IV1 — три эталонных */
(function(){
const sl = document.getElementById('p15-iv1-r');
const lab = document.getElementById('p15-iv1-rval');
const svg = document.getElementById('p15-iv1-svg');
const out = document.getElementById('p15-iv1-out');
const seen = new Set();
const centers = [{x:120, y:130, n:3, label:'3-угольник', aStr:'R\\sqrt{3}'},
{x:350, y:130, n:4, label:'Квадрат', aStr:'R\\sqrt{2}'},
{x:580, y:130, n:6, label:'6-угольник', aStr:'R'}];
function draw(){
const R = +sl.value;
lab.textContent = R;
let s = '';
centers.forEach(c=>{
const pts = regularPoly(c.x, c.y, R, c.n);
// описанная окр
s += '<circle cx="'+c.x+'" cy="'+c.y+'" r="'+R+'" fill="none" stroke="#94a3b8" stroke-width="1.3" stroke-dasharray="4 4"/>';
// многоугольник
s += '<polygon points="'+pts.map(p=>p.x.toFixed(2)+','+p.y.toFixed(2)).join(' ')+'" fill="rgba(8,145,178,.12)" stroke="#0e7490" stroke-width="2.2" stroke-linejoin="round"/>';
// одна сторона (выделим)
const P0 = pts[0], P1 = pts[1];
s += '<line x1="'+P0.x.toFixed(2)+'" y1="'+P0.y.toFixed(2)+'" x2="'+P1.x.toFixed(2)+'" y2="'+P1.y.toFixed(2)+'" stroke="#dc2626" stroke-width="3.2"/>';
// центр
s += '<circle cx="'+c.x+'" cy="'+c.y+'" r="3" fill="#0f172a"/>';
// подпись названия снизу
s += '<text x="'+c.x+'" y="240" text-anchor="middle" font-family="Inter,sans-serif" font-size="13" font-weight="700" fill="#0f172a">'+c.label+'</text>';
s += '<text x="'+c.x+'" y="255" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="11" fill="#0e7490">a = '+c.aStr+'</text>';
});
svg.innerHTML = s;
const a3 = R*Math.sqrt(3), a4 = R*Math.sqrt(2), a6 = R;
const r3 = R/2, r4 = R*Math.sqrt(2)/2, r6 = R*Math.sqrt(3)/2;
const S3 = 3*Math.sqrt(3)/4*R*R, S4 = 2*R*R, S6 = 3*Math.sqrt(3)/2*R*R;
out.innerHTML =
'<table style="margin:0 auto;border-collapse:collapse;font-size:.9rem">'
+'<tr style="border-bottom:1px solid var(--border)"><th style="padding:4px 10px;text-align:left">$n$</th><th style="padding:4px 10px">$a$</th><th style="padding:4px 10px">$r$</th><th style="padding:4px 10px">$S$</th></tr>'
+'<tr><td style="padding:4px 10px"><b>3</b></td><td style="padding:4px 10px">$R\\sqrt{3} \\approx '+a3.toFixed(2)+'$</td><td style="padding:4px 10px">$R/2 = '+r3.toFixed(2)+'$</td><td style="padding:4px 10px">$\\tfrac{3\\sqrt{3}}{4} R^2 \\approx '+S3.toFixed(2)+'$</td></tr>'
+'<tr><td style="padding:4px 10px"><b>4</b></td><td style="padding:4px 10px">$R\\sqrt{2} \\approx '+a4.toFixed(2)+'$</td><td style="padding:4px 10px">$R\\tfrac{\\sqrt{2}}{2} \\approx '+r4.toFixed(2)+'$</td><td style="padding:4px 10px">$2R^2 = '+S4.toFixed(2)+'$</td></tr>'
+'<tr><td style="padding:4px 10px"><b>6</b></td><td style="padding:4px 10px">$R = '+a6.toFixed(2)+'$</td><td style="padding:4px 10px">$R\\tfrac{\\sqrt{3}}{2} \\approx '+r6.toFixed(2)+'$</td><td style="padding:4px 10px">$\\tfrac{3\\sqrt{3}}{2} R^2 \\approx '+S6.toFixed(2)+'$</td></tr>'
+'</table>';
renderMath(out);
seen.add(R);
if(seen.size >= 4 && !seen.has('_done')){ addXp(10,'p15-iv1'); bumpProgress('p15', 15); seen.add('_done'); }
}
sl.addEventListener('input', draw);
draw();
})();
/* IV2 — Калькулятор для эталонов */
(function(){
const modes = document.querySelectorAll('#p15-iv2-modes button');
const inpR = document.getElementById('p15-iv2-r');
const go = document.getElementById('p15-iv2-go');
const out = document.getElementById('p15-iv2-out');
const fb = document.getElementById('p15-iv2-fb');
let mode = 3;
let solved = 0;
function calc(){
const R = parseFloat(inpR.value);
if(isNaN(R) || R <= 0){ feedback(fb, false, '&#10007; Введи положительное $R$.'); return; }
let a, r, S, formA, formR, formS;
if(mode === 3){
a = R*Math.sqrt(3); r = R/2; S = 3*Math.sqrt(3)/4*R*R;
formA = 'a = R\\sqrt{3} = '+R+'\\sqrt{3} \\approx '+a.toFixed(3);
formR = 'r = R/2 = '+r.toFixed(3);
formS = 'S = \\dfrac{3\\sqrt{3}}{4} R^2 \\approx '+S.toFixed(3);
} else if(mode === 4){
a = R*Math.sqrt(2); r = R*Math.sqrt(2)/2; S = 2*R*R;
formA = 'a = R\\sqrt{2} = '+R+'\\sqrt{2} \\approx '+a.toFixed(3);
formR = 'r = R\\dfrac{\\sqrt{2}}{2} \\approx '+r.toFixed(3);
formS = 'S = 2R^2 = '+S.toFixed(3);
} else {
a = R; r = R*Math.sqrt(3)/2; S = 3*Math.sqrt(3)/2*R*R;
formA = 'a = R = '+a.toFixed(3);
formR = 'r = R\\dfrac{\\sqrt{3}}{2} \\approx '+r.toFixed(3);
formS = 'S = \\dfrac{3\\sqrt{3}}{2} R^2 \\approx '+S.toFixed(3);
}
out.innerHTML = '<b>$'+formA+'$</b><br><b>$'+formR+'$</b><br><b>$'+formS+'$</b>';
renderMath(out);
feedback(fb, true, '&#10003; Готово.');
solved++;
if(solved === 1){ addXp(10,'p15-iv2'); bumpProgress('p15', 10); }
}
modes.forEach(b=>{
b.addEventListener('click', ()=>{
mode = +b.dataset.m;
modes.forEach(x=>{ x.classList.remove('primary'); x.classList.add('btn'); });
b.classList.remove('btn'); b.classList.add('btn','primary');
out.innerHTML = ''; fb.style.display = 'none';
});
});
go.addEventListener('click', calc);
inpR.addEventListener('keydown', e=>{ if(e.key==='Enter') calc(); });
calc();
})();
/* IV3 — Какая сторона? */
(function(){
const Q = [
{ q:'Равносторонний треугольник', ans:3, why:'$a = R\\sqrt{3}$ (n = 3)' },
{ q:'Квадрат', ans:2, why:'$a = R\\sqrt{2}$ (n = 4)' },
{ q:'Правильный 6-угольник', ans:1, why:'$a = R$ (n = 6)' },
{ q:'Правильный 3-угольник', ans:3, why:'Это равносторонний: $a = R\\sqrt{3}$' },
{ q:'4-угольник правильный', ans:2, why:'Это квадрат: $a = R\\sqrt{2}$' },
{ q:'Гексагон (6-угольник)', ans:1, why:'$a = R$ — шестиугольник = радиус' },
];
let i = 0, score = 0;
function show(){
if(i >= Q.length){
document.getElementById('p15-iv3-q').innerHTML = '<b>Готово!</b> Результат: ' + score + ' / ' + Q.length;
if(score === Q.length){ addXp(15,'p15-iv3'); bumpProgress('p15', 25); }
else if(score >= Q.length - 1){ addXp(8,'p15-iv3'); bumpProgress('p15', 15); }
return;
}
document.getElementById('p15-iv3-i').textContent = (i+1);
document.getElementById('p15-iv3-s').textContent = score;
document.getElementById('p15-iv3-q').innerHTML = 'Какая формула для стороны $a$ через $R$?<br><b style="font-size:1.15rem">'+Q[i].q+'</b>';
renderMath(document.getElementById('p15-iv3-q'));
document.getElementById('p15-iv3-fb').style.display = 'none';
}
function answer(a){
if(i >= Q.length) return;
const fb = document.getElementById('p15-iv3-fb');
if(+a === Q[i].ans){ score++; feedback(fb, true, '&#10003; Верно! '+Q[i].why+'. Дальше'); }
else feedback(fb, false, '&#10007; Нет. '+Q[i].why+'. Дальше');
document.getElementById('p15-iv3-s').textContent = score;
i++;
setTimeout(show, 1100);
}
['1','2','3'].forEach(k=>{
const b = document.getElementById('p15-iv3-a'+k); if(b) b.addEventListener('click', ()=>answer(k));
});
show();
})();
/* IV4 — Тренажёр */
(function(){
const Q = [
{ q:'Равносторонний треугольник с $R = 4$. Найди сторону $a$.',
ans:6.93, hint:'$a = R\\sqrt{3} = 4\\sqrt{3} \\approx 6{,}93$' },
{ q:'Квадрат с $R = 5$. Найди сторону $a$.',
ans:7.07, hint:'$a = R\\sqrt{2} = 5\\sqrt{2} \\approx 7{,}07$' },
{ q:'Правильный 6-угольник с $R = 7$. Найди сторону $a$.',
ans:7, hint:'$a = R = 7$ (шестиугольник = радиус)' },
{ q:'Квадрат со стороной $a = 6$. Найди радиус описанной окружности $R$.',
ans:4.24, hint:'$R = a/\\sqrt{2} = 6/\\sqrt{2} = 3\\sqrt{2} \\approx 4{,}24$' },
{ q:'Равносторонний треугольник со стороной $a = 9$. Найди $R$.',
ans:5.20, hint:'$R = a/\\sqrt{3} = 9/\\sqrt{3} = 3\\sqrt{3} \\approx 5{,}20$' },
{ q:'Правильный 6-угольник со стороной $a = 8$. Найди $R$.',
ans:8, hint:'$R = a = 8$' },
];
let i = 0, score = 0;
function show(){
if(i >= Q.length){
document.getElementById('p15-iv4-q').innerHTML = '<b>Готово!</b> Результат: ' + score + ' / ' + Q.length;
if(score === Q.length){ addXp(15,'p15-iv4'); bumpProgress('p15', 25); }
else if(score >= 4){ addXp(8,'p15-iv4'); bumpProgress('p15', 15); }
return;
}
document.getElementById('p15-iv4-i').textContent = (i+1);
document.getElementById('p15-iv4-s').textContent = score;
document.getElementById('p15-iv4-q').innerHTML = Q[i].q;
document.getElementById('p15-iv4-ans').value = '';
renderMath(document.getElementById('p15-iv4-q'));
document.getElementById('p15-iv4-fb').style.display = 'none';
}
function go(){
if(i >= Q.length) return;
const fb = document.getElementById('p15-iv4-fb');
const ans = parseFloat(document.getElementById('p15-iv4-ans').value);
if(isNaN(ans)){ feedback(fb, false, '&#10007; Введи число.'); return; }
if(Math.abs(ans - Q[i].ans) < 0.05){ score++; feedback(fb, true, '&#10003; Верно! '+Q[i].hint+'. Дальше'); }
else feedback(fb, false, '&#10007; Неверно. Ответ: '+Q[i].ans+' ('+Q[i].hint+'). Дальше');
document.getElementById('p15-iv4-s').textContent = score;
i++;
setTimeout(show, 1300);
}
document.getElementById('p15-iv4-go').addEventListener('click', go);
document.getElementById('p15-iv4-ans').addEventListener('keydown', e=>{ if(e.key==='Enter') go(); });
document.getElementById('p15-iv4-start').addEventListener('click', ()=>{ i=0; score=0; show(); });
show();
})();
wireReadBtn('p15');
}
/* ===== §16 Длина окружности и площадь круга ===== */
function buildP16(){
const box = document.getElementById('p16-body');
let html = '';
html += makeCard('theory', 'Длина окружности', '16.1', `
<p>Длина окружности радиуса $R$ (диаметр $d = 2R$):</p>
<p style="text-align:center;font-size:1.1rem">$$C = 2\\pi R = \\pi d$$</p>
<p>Число $\\pi$ (отношение длины окружности к её диаметру) — иррациональное:</p>
<p style="text-align:center">$\\pi \\approx 3{,}14159265\\ldots$&nbsp; (для оценок берут $\\pi \\approx 3{,}14$ или $\\pi \\approx \\dfrac{22}{7}$).</p>
<p><b>Примеры:</b></p>
<ul style="padding-left:22px;line-height:1.95">
<li>$R = 5$: $C = 10\\pi \\approx 31{,}4$.</li>
<li>$d = 10$: $C = 10\\pi \\approx 31{,}4$ (тот же ответ, т.к. $d = 2R$).</li>
<li>$R = 1$: $C = 2\\pi \\approx 6{,}28$ — длина единичной окружности.</li>
</ul>`);
html += makeCard('rule', 'Площадь круга', '16.2', `
<p><b>Круг</b> — это вся часть плоскости, ограниченная окружностью (плюс сама окружность). Его площадь:</p>
<p style="text-align:center;font-size:1.1rem">$$S = \\pi R^2$$</p>
<p>Через диаметр: $S = \\pi \\left(\\dfrac{d}{2}\\right)^2 = \\dfrac{\\pi d^2}{4}$.</p>
<p><b>Примеры:</b></p>
<ul style="padding-left:22px;line-height:1.95">
<li>$R = 4$: $S = 16\\pi \\approx 50{,}24$.</li>
<li>$d = 10$: $S = \\dfrac{\\pi \\cdot 100}{4} = 25\\pi \\approx 78{,}5$.</li>
<li>$R = 1$: $S = \\pi \\approx 3{,}14$ — площадь единичного круга.</li>
</ul>
<details class="spoiler"><summary>Откуда $S = \\pi R^2$?</summary><div class="spoiler-body">
«Разрежем» круг на много узких секторов и сложим их в прямоугольник: ширина $\\approx R$, длина $\\approx \\tfrac{1}{2} \\cdot 2\\pi R = \\pi R$. Площадь $\\approx R \\cdot \\pi R = \\pi R^2$. В пределе (бесконечно тонкие секторы) — точное равенство.
</div></details>`);
html += makeCard('example', 'Дуга и сектор', '16.3', `
<p>Дуге, на которую опирается центральный угол $\\alpha^\\circ$, соответствует доля $\\dfrac{\\alpha}{360^\\circ}$ всей окружности. Поэтому:</p>
<p style="text-align:center">$$\\ell = 2\\pi R \\cdot \\dfrac{\\alpha}{360^\\circ} = \\dfrac{\\pi R \\alpha}{180^\\circ}$$</p>
<p>Сектор с углом $\\alpha^\\circ$ занимает ту же долю круга:</p>
<p style="text-align:center">$$S_{\\text{сек}} = \\pi R^2 \\cdot \\dfrac{\\alpha}{360^\\circ} = \\dfrac{\\pi R^2 \\alpha}{360^\\circ}$$</p>
<p><b>Примеры:</b></p>
<ul style="padding-left:22px;line-height:1.95">
<li>Длина дуги четверти круга радиуса $R = 2$: $\\ell = \\dfrac{\\pi \\cdot 2 \\cdot 90}{180} = \\pi \\approx 3{,}14$.</li>
<li>Площадь сектора $60^\\circ$ в круге радиуса $6$: $S = \\dfrac{\\pi \\cdot 36 \\cdot 60}{360} = 6\\pi \\approx 18{,}85$.</li>
</ul>`);
/* IV1 — Slider R и сектор */
html += `<div class="wg" id="p16-iv1">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 1</span><div class="wg-title">Окружность, круг и сектор</div></div>
<div class="wg-help">Меняй радиус $R$ и угол сектора $\\alpha$ — следи за длиной окружности, площадью круга, длиной дуги и площадью сектора.</div>
<div class="sliders">
<label>Радиус $R$<b id="p16-iv1-rval">100</b><input type="range" id="p16-iv1-r" min="40" max="150" step="1" value="100"></label>
<label>Угол $\\alpha$ (°)<b id="p16-iv1-aval">90</b><input type="range" id="p16-iv1-a" min="0" max="360" step="1" value="90"></label>
</div>
<div style="background:var(--card);border-radius:10px;padding:10px;overflow-x:auto">
<svg id="p16-iv1-svg" viewBox="0 0 400 400" style="width:100%;max-width:420px;min-width:280px;height:auto;display:block;margin:0 auto"></svg>
</div>
<div id="p16-iv1-out" style="margin-top:10px;padding:10px 14px;background:var(--pri-soft);border-radius:9px;font-size:.92rem;text-align:center;line-height:1.9"></div>
</div>`;
/* IV2 — Калькулятор C и S */
html += `<div class="wg" id="p16-iv2">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">Калькулятор: $C$, $S$, дуга, сектор</div></div>
<div class="wg-help">Выбери, что дано ($R$ или $d$). Введи значение — посчитаем $C$ и $S$ круга, а также длину дуги и площадь сектора для угла $\\alpha$.</div>
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;justify-content:center" id="p16-iv2-modes">
<button class="btn primary" data-m="R">Дано $R$</button>
<button class="btn" data-m="d">Дано $d$</button>
</div>
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;margin-bottom:10px">
<span style="font-family:'JetBrains Mono',monospace" id="p16-iv2-lab">$R$ =</span>
<input type="number" id="p16-iv2-val" class="tinp" style="width:90px;text-align:center" value="5" step="0.01" min="0.01">
<span style="font-family:'JetBrains Mono',monospace">$\\alpha$ =</span>
<input type="number" id="p16-iv2-a" class="tinp" style="width:80px;text-align:center" value="90" step="1" min="0" max="360">°
<button class="btn primary" id="p16-iv2-go">Вычислить</button>
</div>
<div id="p16-iv2-out" style="padding:12px 14px;background:var(--card);border-radius:9px;text-align:center;font-size:.98rem;min-height:50px;line-height:1.9"></div>
<div class="feedback" id="p16-iv2-fb"></div>
</div>`;
/* IV3 — Какая формула? */
html += `<div class="wg" id="p16-iv3">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 3</span><div class="wg-title">Какая формула?</div></div>
<div class="wg-help">Выбери формулу, которая подходит под описание.</div>
<div class="score-display"><span>Задача <b id="p16-iv3-i">1</b> / 6</span><span>Очки: <b id="p16-iv3-s">0</b> / 6</span></div>
<div id="p16-iv3-q" style="padding:14px;background:var(--pri-soft);border-radius:10px;font-size:1.1rem;text-align:center;margin-bottom:10px"></div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px">
<button class="btn primary" data-ans="C" id="p16-iv3-aC">$2\\pi R$</button>
<button class="btn primary" data-ans="S" id="p16-iv3-aS">$\\pi R^2$</button>
<button class="btn primary" data-ans="L" id="p16-iv3-aL">$\\dfrac{\\pi R \\alpha}{180}$</button>
<button class="btn primary" data-ans="Ss" id="p16-iv3-aSs">$\\dfrac{\\pi R^2 \\alpha}{360}$</button>
</div>
<div class="feedback" id="p16-iv3-fb"></div>
</div>`;
/* IV4 — Тренажёр */
html += `<div class="wg" id="p16-iv4">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 4</span><div class="wg-title">Тренажёр окружности и круга</div></div>
<div class="wg-help">Для всех задач используй $\\pi \\approx 3{,}14$. Ответы округляй до двух знаков (допуск 0.05).</div>
<div class="score-display"><span>Задача <b id="p16-iv4-i">1</b> / 6</span><span>Очки: <b id="p16-iv4-s">0</b> / 6</span></div>
<div id="p16-iv4-q" style="padding:14px;background:var(--pri-soft);border-radius:10px;font-size:1.05rem;margin-bottom:10px;text-align:center"></div>
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center">
<span style="font-family:'JetBrains Mono',monospace">ответ =</span>
<input type="number" id="p16-iv4-ans" class="tinp" style="width:110px;text-align:center" step="0.01">
<button class="btn primary" id="p16-iv4-go">Проверить</button>
<button class="btn" id="p16-iv4-start">Заново</button>
</div>
<div class="feedback" id="p16-iv4-fb"></div>
</div>`;
html += readButton('p16');
html += secNav('p15', 'final4');
box.innerHTML = html;
renderMath(box);
/* IV1 — Slider R + сектор */
(function(){
const slR = document.getElementById('p16-iv1-r');
const slA = document.getElementById('p16-iv1-a');
const labR = document.getElementById('p16-iv1-rval');
const labA = document.getElementById('p16-iv1-aval');
const svg = document.getElementById('p16-iv1-svg');
const out = document.getElementById('p16-iv1-out');
const seen = new Set();
const cx = 200, cy = 200;
function draw(){
const R = +slR.value, alpha = +slA.value;
labR.textContent = R; labA.textContent = alpha;
let s = '';
// основная окружность (контур)
s += '<circle cx="'+cx+'" cy="'+cy+'" r="'+R+'" fill="rgba(34,211,238,.06)" stroke="#94a3b8" stroke-width="1.4"/>';
// сектор — рисуем path
if(alpha > 0){
if(alpha >= 360){
// целый круг
s += '<circle cx="'+cx+'" cy="'+cy+'" r="'+R+'" fill="rgba(8,145,178,.30)" stroke="#0e7490" stroke-width="2"/>';
} else {
const rad = alpha * Math.PI / 180;
const x1 = cx + R, y1 = cy;
const x2 = cx + R*Math.cos(rad), y2 = cy + R*Math.sin(rad);
const large = alpha > 180 ? 1 : 0;
s += '<path d="M '+cx+' '+cy+' L '+x1+' '+y1+' A '+R+' '+R+' 0 '+large+' 1 '+x2.toFixed(2)+' '+y2.toFixed(2)+' Z" fill="rgba(8,145,178,.30)" stroke="#0e7490" stroke-width="2"/>';
}
}
// радиус (на 0°)
s += '<line x1="'+cx+'" y1="'+cy+'" x2="'+(cx+R)+'" y2="'+cy+'" stroke="#0891b2" stroke-width="2.2"/>';
// радиус на углу alpha
const ax = cx + R*Math.cos(alpha*Math.PI/180), ay = cy + R*Math.sin(alpha*Math.PI/180);
s += '<line x1="'+cx+'" y1="'+cy+'" x2="'+ax.toFixed(2)+'" y2="'+ay.toFixed(2)+'" stroke="#0891b2" stroke-width="2.2"/>';
// центр O
s += '<circle cx="'+cx+'" cy="'+cy+'" r="3.5" fill="#0f172a"/>';
s += '<text x="'+(cx-10)+'" y="'+(cy-8)+'" text-anchor="end" font-family="Inter,sans-serif" font-size="14" font-weight="700" fill="#0f172a">O</text>';
// подпись R
s += '<text x="'+(cx + R/2)+'" y="'+(cy-6)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="12" font-weight="700" fill="#0891b2">R</text>';
svg.innerHTML = s;
const PI = Math.PI;
const C = 2*PI*R;
const Scircle = PI*R*R;
const L = PI*R*alpha/180;
const Ssec = PI*R*R*alpha/360;
out.innerHTML =
'$R = '+R+'$,&nbsp; $\\alpha = '+alpha+'^\\circ$<br>'
+'$C = 2\\pi R \\approx '+C.toFixed(2)+'$,&nbsp; $S_{\\text{круга}} = \\pi R^2 \\approx '+Scircle.toFixed(2)+'$<br>'
+'$\\ell_{\\text{дуги}} = \\dfrac{\\pi R \\alpha}{180} \\approx '+L.toFixed(2)+'$,&nbsp; $S_{\\text{сектора}} = \\dfrac{\\pi R^2 \\alpha}{360} \\approx '+Ssec.toFixed(2)+'$';
renderMath(out);
seen.add(R+'_'+alpha);
if(seen.size >= 5 && !seen.has('_done')){ addXp(10,'p16-iv1'); bumpProgress('p16', 15); seen.add('_done'); }
}
slR.addEventListener('input', draw);
slA.addEventListener('input', draw);
draw();
})();
/* IV2 — Калькулятор C, S, дуга, сектор */
(function(){
const modes = document.querySelectorAll('#p16-iv2-modes button');
const inpV = document.getElementById('p16-iv2-val');
const inpA = document.getElementById('p16-iv2-a');
const lab = document.getElementById('p16-iv2-lab');
const go = document.getElementById('p16-iv2-go');
const out = document.getElementById('p16-iv2-out');
const fb = document.getElementById('p16-iv2-fb');
let mode = 'R';
let solved = 0;
function updateLabel(){
lab.innerHTML = mode === 'R' ? '$R$ =' : '$d$ =';
renderMath(lab);
}
function calc(){
const v = parseFloat(inpV.value);
const alpha = parseFloat(inpA.value);
if(isNaN(v) || v <= 0){ feedback(fb, false, '&#10007; Введи положительное значение.'); return; }
if(isNaN(alpha) || alpha < 0 || alpha > 360){ feedback(fb, false, '&#10007; Угол $\\alpha$ — от 0° до 360°.'); return; }
const R = mode === 'R' ? v : v/2;
const d = 2*R;
const PI = Math.PI;
const C = 2*PI*R;
const S = PI*R*R;
const L = PI*R*alpha/180;
const Ss = PI*R*R*alpha/360;
out.innerHTML =
'<b>$R = '+R.toFixed(3)+'$, $d = '+d.toFixed(3)+'$</b><br>'
+'$C = 2\\pi R \\approx '+C.toFixed(3)+'$<br>'
+'$S_{\\text{круга}} = \\pi R^2 \\approx '+S.toFixed(3)+'$<br>'
+'$\\ell_{\\text{дуги}}('+alpha+'^\\circ) = \\dfrac{\\pi R \\alpha}{180} \\approx '+L.toFixed(3)+'$<br>'
+'$S_{\\text{сектора}}('+alpha+'^\\circ) = \\dfrac{\\pi R^2 \\alpha}{360} \\approx '+Ss.toFixed(3)+'$';
renderMath(out);
feedback(fb, true, '&#10003; Готово.');
solved++;
if(solved === 1){ addXp(10,'p16-iv2'); bumpProgress('p16', 10); }
}
modes.forEach(b=>{
b.addEventListener('click', ()=>{
mode = b.dataset.m;
modes.forEach(x=>{ x.classList.remove('primary'); x.classList.add('btn'); });
b.classList.remove('btn'); b.classList.add('btn','primary');
updateLabel();
out.innerHTML = ''; fb.style.display = 'none';
});
});
go.addEventListener('click', calc);
inpV.addEventListener('keydown', e=>{ if(e.key==='Enter') calc(); });
inpA.addEventListener('keydown', e=>{ if(e.key==='Enter') calc(); });
updateLabel(); calc();
})();
/* IV3 — Какая формула? */
(function(){
const Q = [
{ q:'Длина окружности', ans:'C', why:'$C = 2\\pi R$' },
{ q:'Площадь круга', ans:'S', why:'$S = \\pi R^2$' },
{ q:'Длина дуги, на которую опирается угол $\\alpha$', ans:'L', why:'$\\ell = \\dfrac{\\pi R \\alpha}{180}$' },
{ q:'Площадь сектора с углом $\\alpha$', ans:'Ss', why:'$S_{\\text{сек}} = \\dfrac{\\pi R^2 \\alpha}{360}$' },
{ q:'Половина окружности (дуга с углом 180°)', ans:'L', why:'Это $\\ell = \\dfrac{\\pi R \\alpha}{180}$ при $\\alpha = 180^\\circ$, выходит $\\pi R$' },
{ q:'Четверть круга (сектор с углом 90°)', ans:'Ss', why:'Это $S_{\\text{сек}} = \\dfrac{\\pi R^2 \\alpha}{360}$ при $\\alpha = 90^\\circ$, выходит $\\pi R^2 / 4$' },
];
let i = 0, score = 0;
function show(){
if(i >= Q.length){
document.getElementById('p16-iv3-q').innerHTML = '<b>Готово!</b> Результат: ' + score + ' / ' + Q.length;
if(score === Q.length){ addXp(15,'p16-iv3'); bumpProgress('p16', 25); }
else if(score >= Q.length - 1){ addXp(8,'p16-iv3'); bumpProgress('p16', 15); }
return;
}
document.getElementById('p16-iv3-i').textContent = (i+1);
document.getElementById('p16-iv3-s').textContent = score;
document.getElementById('p16-iv3-q').innerHTML = 'Какая формула?<br><b>'+Q[i].q+'</b>';
renderMath(document.getElementById('p16-iv3-q'));
document.getElementById('p16-iv3-fb').style.display = 'none';
}
function answer(a){
if(i >= Q.length) return;
const fb = document.getElementById('p16-iv3-fb');
if(a === Q[i].ans){ score++; feedback(fb, true, '&#10003; Верно! '+Q[i].why+'. Дальше'); }
else feedback(fb, false, '&#10007; Нет. '+Q[i].why+'. Дальше');
document.getElementById('p16-iv3-s').textContent = score;
i++;
setTimeout(show, 1200);
}
['C','S','L','Ss'].forEach(k=>{
const b = document.getElementById('p16-iv3-a'+k); if(b) b.addEventListener('click', ()=>answer(k));
});
show();
})();
/* IV4 — Тренажёр (π = 3.14) */
(function(){
const PI = 3.14;
const Q = [
{ q:'Длина окружности с $R = 5$. ($\\pi \\approx 3{,}14$)',
ans: 10*PI, hint:'$C = 2\\pi R = 10\\pi \\approx 31{,}4$' },
{ q:'Площадь круга с $R = 4$. ($\\pi \\approx 3{,}14$)',
ans: 16*PI, hint:'$S = \\pi R^2 = 16\\pi \\approx 50{,}24$' },
{ q:'Длина окружности с $d = 10$. ($\\pi \\approx 3{,}14$)',
ans: 10*PI, hint:'$C = \\pi d = 10\\pi \\approx 31{,}4$' },
{ q:'Длина дуги: $R = 6$, $\\alpha = 90^\\circ$. ($\\pi \\approx 3{,}14$)',
ans: 3*PI, hint:'$\\ell = \\dfrac{\\pi R \\alpha}{180} = \\dfrac{\\pi \\cdot 6 \\cdot 90}{180} = 3\\pi \\approx 9{,}42$' },
{ q:'Площадь сектора: $R = 4$, $\\alpha = 90^\\circ$. ($\\pi \\approx 3{,}14$)',
ans: 4*PI, hint:'$S = \\dfrac{\\pi R^2 \\alpha}{360} = \\dfrac{\\pi \\cdot 16 \\cdot 90}{360} = 4\\pi \\approx 12{,}56$' },
{ q:'Площадь круга с $d = 10$. ($\\pi \\approx 3{,}14$)',
ans: 25*PI, hint:'$S = \\dfrac{\\pi d^2}{4} = \\dfrac{100\\pi}{4} = 25\\pi \\approx 78{,}5$' },
];
let i = 0, score = 0;
function show(){
if(i >= Q.length){
document.getElementById('p16-iv4-q').innerHTML = '<b>Готово!</b> Результат: ' + score + ' / ' + Q.length;
if(score === Q.length){ addXp(15,'p16-iv4'); bumpProgress('p16', 25); }
else if(score >= 4){ addXp(8,'p16-iv4'); bumpProgress('p16', 15); }
return;
}
document.getElementById('p16-iv4-i').textContent = (i+1);
document.getElementById('p16-iv4-s').textContent = score;
document.getElementById('p16-iv4-q').innerHTML = Q[i].q;
document.getElementById('p16-iv4-ans').value = '';
renderMath(document.getElementById('p16-iv4-q'));
document.getElementById('p16-iv4-fb').style.display = 'none';
}
function go(){
if(i >= Q.length) return;
const fb = document.getElementById('p16-iv4-fb');
const ans = parseFloat(document.getElementById('p16-iv4-ans').value);
if(isNaN(ans)){ feedback(fb, false, '&#10007; Введи число.'); return; }
if(Math.abs(ans - Q[i].ans) < 0.05){ score++; feedback(fb, true, '&#10003; Верно! '+Q[i].hint+'. Дальше'); }
else feedback(fb, false, '&#10007; Неверно. Ответ: '+Q[i].ans.toFixed(2)+' ('+Q[i].hint+'). Дальше');
document.getElementById('p16-iv4-s').textContent = score;
i++;
setTimeout(show, 1400);
}
document.getElementById('p16-iv4-go').addEventListener('click', go);
document.getElementById('p16-iv4-ans').addEventListener('keydown', e=>{ if(e.key==='Enter') go(); });
document.getElementById('p16-iv4-start').addEventListener('click', ()=>{ i=0; score=0; show(); });
show();
})();
wireReadBtn('p16');
}
/* ===== §13 Правильные многоугольники ===== */
function buildP13(){