feat(geom11 ch3 wave2): §6 «Шар» + сегменты + вписанные/описанные
This commit is contained in:
Maxim Dolgolyov
@@ -396,7 +396,7 @@ function buildParaSelector(){
|
||||
}
|
||||
|
||||
const BUILT=new Set();
|
||||
const BUILDERS = { p5:buildP5, p6:()=>buildStub('p6'), p7:()=>buildStub('p7'), final3:()=>buildStub('final3') };
|
||||
const BUILDERS = { p5:buildP5, p6:buildP6, p7:()=>buildStub('p7'), final3:()=>buildStub('final3') };
|
||||
function ensureBuilt(id){ if(BUILT.has(id)) return; const fn=BUILDERS[id]; if(fn){ fn(); BUILT.add(id); } }
|
||||
function goTo(id){
|
||||
STATE.current=id; ensureBuilt(id);
|
||||
@@ -422,14 +422,25 @@ const SIDEBARS = {
|
||||
["Площадь", "$S=4\\\\pi R^2$"],
|
||||
["Объём шара", "$V=\\\\tfrac{4}{3}\\\\pi R^3$"]
|
||||
]},
|
||||
p6:{title:"Шпаргалка § 6", rows:[["Тема", "Шар"],["Формула","$S=4\\\\pi R^2$, $V=\\\\frac{4}{3}\\\\pi R^3$"]]},
|
||||
p6:{title:"Шпаргалка § 6", rows:[
|
||||
["Тема", "Шар"],
|
||||
["Шар", "тело, $|OM|\\\\le R$"],
|
||||
["Площадь сферы", "$S=4\\\\pi R^2$"],
|
||||
["Объём шара", "$V=\\\\tfrac{4}{3}\\\\pi R^3$"],
|
||||
["Сегмент $V$", "$\\\\tfrac{\\\\pi h^2(3R-h)}{3}$"],
|
||||
["Сегмент $S$", "$2\\\\pi R h$"],
|
||||
["Сектор $V$", "$\\\\tfrac{2}{3}\\\\pi R^2 h$"],
|
||||
["Слой $V$", "$\\\\tfrac{\\\\pi h}{6}(3r_1^2+3r_2^2+h^2)$"],
|
||||
["Куб впис. шар", "$r=a/2$"],
|
||||
["Куб опис. шар", "$R=\\\\tfrac{a\\\\sqrt{3}}{2}$"]
|
||||
]},
|
||||
p7:{title:"Шпаргалка § 7", rows:[["Тема", "Правильные многогранники"],["Формула","5 платоновых тел"]]},
|
||||
final3:{title:"Финал раздела 3", rows:[["§ 5–§ 7","теория раздела 3"],["Награда","+50 XP"]]}
|
||||
};
|
||||
|
||||
const TIPS=[
|
||||
{sec:'p5',html:"Сфера: $|OM|=R$. Уравнение $(x-a)^2+(y-b)^2+(z-c)^2=R^2$. Сечение плоскостью — окружность $r=\\\\sqrt{R^2-d^2}$."},
|
||||
{sec:'p6',html:"§ 6 «Шар» — содержание в разработке. $S=4\\\\\\\\pi R^2$, $V=\\\\\\\\frac{4}{3}\\\\\\\\pi R^3$"},
|
||||
{sec:'p6',html:"Шар: $S=4\\\\pi R^2$, $V=\\\\tfrac{4}{3}\\\\pi R^3$. Сегмент: $V=\\\\tfrac{\\\\pi h^2(3R-h)}{3}$, $S=2\\\\pi R h$. Куб впис. шар: $r=a/2$; куб опис. шар: $R=\\\\tfrac{a\\\\sqrt 3}{2}$."},
|
||||
{sec:'p7',html:"§ 7 «Правильные многогранники» — содержание в разработке. 5 платоновых тел"},
|
||||
{sec:'final3',html:"Финал раздела 3 — интегрированные задачи по разделу."}
|
||||
];
|
||||
@@ -986,6 +997,446 @@ function buildP5(){
|
||||
wireReadBtn('p5');
|
||||
}
|
||||
|
||||
/* ===== § 6 «Шар» — Wave 2 ===== */
|
||||
function buildP6(){
|
||||
const box = document.getElementById('p6-body');
|
||||
if(!box) return;
|
||||
let html = '';
|
||||
|
||||
/* === ТЕОРИЯ === */
|
||||
|
||||
html += makeCard('theory', 'Площадь поверхности и объём шара', '§ 6.1',
|
||||
'<p><b>Шар</b> — тело, ограниченное сферой. Это множество точек пространства, для которых $|OM|\\le R$.</p>'
|
||||
+ '<p>Все точки шара удалены от центра $O$ не более чем на $R$. Поверхность шара — сама сфера.</p>'
|
||||
+ '<p><b>Основные формулы</b> для шара радиуса $R$:</p>'
|
||||
+ '<p style="text-align:center;margin:8px 0">$$S_{\\text{сферы}}=4\\pi R^2 \\qquad V_{\\text{шара}}=\\dfrac{4}{3}\\pi R^3$$</p>'
|
||||
+ '<p>Формула объёма обосновывается <b>методом Кавальери</b>: сравнивая шар с цилиндром, из которого вырезан конус, получаем те же объёмы у равных поперечных сечений на одной высоте.</p>'
|
||||
+ '<details class="spoiler"><summary>Пример: $R=3$ — численное совпадение $S$ и $V$</summary><div class="spoiler-body">'
|
||||
+ '<p>$S=4\\pi\\cdot 9=36\\pi\\approx 113{,}10$.</p>'
|
||||
+ '<p>$V=\\dfrac{4}{3}\\pi\\cdot 27=36\\pi\\approx 113{,}10$.</p>'
|
||||
+ '<p>Численно $S$ и $V$ совпадают — но только при $R=3$. Это лишь совпадение единиц измерения (одно — площадь, другое — объём).</p>'
|
||||
+ '</div></details>'
|
||||
+ '<details class="spoiler"><summary>Пример: связь радиуса и объёма</summary><div class="spoiler-body">'
|
||||
+ '<p>Если радиус увеличить в $2$ раза, то площадь сферы вырастет в $4$ раза, а объём — в $8$ раз.</p>'
|
||||
+ '<p>$\\dfrac{V_2}{V_1}=\\dfrac{(2R)^3}{R^3}=8$, $\\dfrac{S_2}{S_1}=\\dfrac{(2R)^2}{R^2}=4$.</p>'
|
||||
+ '</div></details>');
|
||||
|
||||
html += makeCard('rule', 'Шаровой сегмент, сектор, слой', '§ 6.2',
|
||||
'<p><b>Шаровой сегмент</b> — часть шара, отсекаемая плоскостью. <b>Высота сегмента</b> $h$ — расстояние от секущей плоскости до самой удалённой точки сегмента.</p>'
|
||||
+ '<p style="text-align:center;margin:8px 0">$$V_{\\text{сегм}}=\\dfrac{\\pi h^2(3R-h)}{3}, \\qquad S_{\\text{сфер.часть}}=2\\pi R h$$</p>'
|
||||
+ '<p>Радиус основания сегмента: $r=\\sqrt{2Rh-h^2}$ (по теореме Пифагора в осевом сечении).</p>'
|
||||
+ '<p><b>Шаровой сектор</b> — тело, состоящее из шарового сегмента и конуса с вершиной в центре шара и основанием — кругом сегмента.</p>'
|
||||
+ '<p style="text-align:center;margin:8px 0">$$V_{\\text{сект}}=\\dfrac{2}{3}\\pi R^2 h$$</p>'
|
||||
+ '<p><b>Шаровой слой</b> — часть шара между двумя параллельными плоскостями. $r_1$, $r_2$ — радиусы оснований, $h$ — расстояние между плоскостями.</p>'
|
||||
+ '<p style="text-align:center;margin:8px 0">$$V_{\\text{слой}}=\\dfrac{\\pi h}{6}\\bigl(3r_1^2+3r_2^2+h^2\\bigr), \\qquad S_{\\text{сфер.часть}}=2\\pi R h$$</p>'
|
||||
+ '<p style="background:var(--sec-acc-soft,var(--pri-soft));border-left:4px solid var(--sec-acc,var(--pri));padding:8px 12px;border-radius:6px;margin:8px 0"><b>Замечательно:</b> формула $S=2\\pi R h$ работает <b>и для сегмента, и для шарового пояса (слоя)</b> — площадь сферического пояса между параллельными плоскостями зависит только от его высоты $h$ и от $R$ сферы.</p>'
|
||||
+ '<details class="spoiler"><summary>Пример: $R=5$, $h=2$ (сегмент)</summary><div class="spoiler-body">'
|
||||
+ '<p>$V_{\\text{сегм}}=\\dfrac{\\pi\\cdot 4\\cdot(15-2)}{3}=\\dfrac{52\\pi}{3}\\approx 54{,}45$.</p>'
|
||||
+ '<p>$S_{\\text{сфер.часть}}=2\\pi\\cdot 5\\cdot 2=20\\pi\\approx 62{,}83$.</p>'
|
||||
+ '<p>Радиус основания: $r=\\sqrt{2\\cdot 5\\cdot 2-4}=\\sqrt{16}=4$.</p>'
|
||||
+ '</div></details>');
|
||||
|
||||
html += makeCard('example', 'Вписанные и описанные шары', '§ 6.3',
|
||||
'<p><b>Шар вписан</b> в многогранник, если он касается всех его граней изнутри.</p>'
|
||||
+ '<p><b>Шар описан</b> около многогранника, если все его вершины лежат на сфере.</p>'
|
||||
+ '<p style="font-weight:700;margin-top:10px">Куб и шар.</p>'
|
||||
+ '<ul style="margin:6px 0 10px 22px;line-height:1.7">'
|
||||
+ '<li><b>Шар вписан в куб</b> со стороной $a$: касается каждой грани в её центре. Радиус: $r_{\\text{вп}}=\\dfrac{a}{2}$.</li>'
|
||||
+ '<li><b>Шар описан около куба</b> со стороной $a$: все 8 вершин на сфере. Диаметр шара равен диагонали куба $a\\sqrt{3}$. Радиус: $R_{\\text{оп}}=\\dfrac{a\\sqrt{3}}{2}$.</li>'
|
||||
+ '<li>Отношение объёмов: $\\dfrac{V_{\\text{шара впис.}}}{V_{\\text{куба}}}=\\dfrac{\\tfrac{4}{3}\\pi(a/2)^3}{a^3}=\\dfrac{\\pi}{6}\\approx 0{,}524$.</li>'
|
||||
+ '</ul>'
|
||||
+ '<p style="font-weight:700;margin-top:6px">Цилиндр и шар.</p>'
|
||||
+ '<ul style="margin:6px 0 10px 22px;line-height:1.7">'
|
||||
+ '<li><b>Шар вписан в цилиндр</b>, если касается боковой поверхности и обоих оснований. Тогда $h_{\\text{цил}}=2R$, а радиусы шара и цилиндра совпадают. Отношение: $\\dfrac{V_{\\text{шара}}}{V_{\\text{цил}}}=\\dfrac{2}{3}$ (теорема Архимеда).</li>'
|
||||
+ '<li><b>Шар описан около цилиндра</b> с радиусом $R$ и высотой $h$: $R_{\\text{шар}}=\\sqrt{R^2+\\left(\\dfrac{h}{2}\\right)^2}$ (теорема Пифагора).</li>'
|
||||
+ '</ul>'
|
||||
+ '<details class="spoiler"><summary>Пример: куб со стороной $a=4$</summary><div class="spoiler-body">'
|
||||
+ '<p>Вписанный шар: $r=2$, $V=\\dfrac{4}{3}\\pi\\cdot 8=\\dfrac{32\\pi}{3}\\approx 33{,}51$.</p>'
|
||||
+ '<p>Описанный шар: $R=\\dfrac{4\\sqrt 3}{2}=2\\sqrt 3\\approx 3{,}46$.</p>'
|
||||
+ '</div></details>');
|
||||
|
||||
/* === ИНТЕРАКТИВ 1 — 3D-визуализатор шара с сегментами === */
|
||||
html += '<div class="wg" id="p6-iv1">'
|
||||
+ '<div class="wg-header"><span class="wg-badge">3D · шар + сегмент</span><div class="wg-title">Визуализатор шара и шарового сегмента</div></div>'
|
||||
+ '<div class="wg-help">Меняй радиус $R$ и высоту сегмента $h$. Сегмент выделяется сверху. После <b>4 разных пар $(R,h)$</b> — +10 XP.</div>'
|
||||
+ '<div class="sliders">'
|
||||
+ '<label>$R$ (радиус):<b id="p6-iv1-R-v">2.0</b><input type="range" id="p6-iv1-R" min="1" max="4" step="0.1" value="2"></label>'
|
||||
+ '<label>$h$ (высота сегмента):<b id="p6-iv1-h-v">1.0</b><input type="range" id="p6-iv1-h" min="0" max="4" step="0.1" value="1"></label>'
|
||||
+ '</div>'
|
||||
+ '<div class="g3d-tools">'
|
||||
+ '<button class="btn" data-view="iso">Изо</button>'
|
||||
+ '<button class="btn" data-view="front">Спереди</button>'
|
||||
+ '<button class="btn" data-view="top">Сверху</button>'
|
||||
+ '<button class="btn" data-view="side">Сбоку</button>'
|
||||
+ '</div>'
|
||||
+ '<div style="background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px;text-align:center"><svg id="p6-iv1-svg" viewBox="0 0 480 400" width="100%" style="max-width:480px;height:auto"></svg></div>'
|
||||
+ '<div class="score-display" style="margin-top:10px;flex-wrap:wrap">'
|
||||
+ '<span>$S_{\\text{сферы}}=4\\pi R^2\\approx$<b id="p6-iv1-S-o">—</b></span>'
|
||||
+ '<span>$V_{\\text{шара}}=\\tfrac{4}{3}\\pi R^3\\approx$<b id="p6-iv1-V-o">—</b></span>'
|
||||
+ '<span>$V_{\\text{сегм}}\\approx$<b id="p6-iv1-Vseg-o">—</b></span>'
|
||||
+ '<span>$S_{\\text{сфер.сегм}}=2\\pi R h\\approx$<b id="p6-iv1-Sseg-o">—</b></span>'
|
||||
+ '</div>'
|
||||
+ '<div style="font-size:.78rem;color:var(--muted);margin-top:6px">Разных пар $(R,h)$ изучено: <b id="p6-iv1-cnt">0</b> / 4</div>'
|
||||
+ '</div>';
|
||||
|
||||
/* === ИНТЕРАКТИВ 2 — Калькулятор шара/сегмента/слоя === */
|
||||
html += '<div class="wg" id="p6-iv2">'
|
||||
+ '<div class="wg-header"><span class="wg-badge">калькулятор</span><div class="wg-title">Калькулятор шара, сегмента и слоя</div></div>'
|
||||
+ '<div class="wg-help">Выбери режим, введи параметры и получи $S$, $V$ и другие характеристики.</div>'
|
||||
+ '<div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px">'
|
||||
+ '<button class="btn primary" data-mode="ball" id="p6-iv2-mb">Шар целиком</button>'
|
||||
+ '<button class="btn" data-mode="seg" id="p6-iv2-ms">Сегмент</button>'
|
||||
+ '<button class="btn" data-mode="lay" id="p6-iv2-ml">Слой</button>'
|
||||
+ '</div>'
|
||||
+ '<div id="p6-iv2-form" style="background:var(--card);border:1px solid var(--border);border-radius:9px;padding:10px 12px"></div>'
|
||||
+ '<div id="p6-iv2-out" style="font-size:.95rem;line-height:1.7;margin-top:8px"></div>'
|
||||
+ '</div>';
|
||||
|
||||
/* === ИНТЕРАКТИВ 3 — Вписан или описан? === */
|
||||
html += '<div class="wg" id="p6-iv3">'
|
||||
+ '<div class="wg-header"><span class="wg-badge">квикфайр · 6 заданий</span><div class="wg-title">Вписан или описан?</div></div>'
|
||||
+ '<div class="wg-help">Прочитай условие и выбери, какое отношение шара и многогранника описано.</div>'
|
||||
+ '<div id="p6-iv3-list"></div>'
|
||||
+ '<div class="score-display" style="margin-top:10px">Верно: <b id="p6-iv3-score">0</b> / 6</div>'
|
||||
+ '</div>';
|
||||
|
||||
/* === ИНТЕРАКТИВ 4 — Тренажёр === */
|
||||
html += '<div class="wg" id="p6-iv4">'
|
||||
+ '<div class="wg-header"><span class="wg-badge">тренажёр · 6 задач</span><div class="wg-title">Шар, сегмент, вписанные и описанные тела</div></div>'
|
||||
+ '<div class="wg-help">Используй $\\pi\\approx 3{,}14$. Допуск $\\pm 0{,}5$ для больших значений, $\\pm 0{,}05$ — для остальных.</div>'
|
||||
+ '<div id="p6-iv4-list"></div>'
|
||||
+ '<div class="score-display" style="margin-top:10px">Решено: <b id="p6-iv4-score">0</b> / 6</div>'
|
||||
+ '</div>';
|
||||
|
||||
html += secNav('p5', 'p7');
|
||||
html += readButton('p6');
|
||||
|
||||
box.innerHTML = html;
|
||||
renderMath(box);
|
||||
|
||||
/* ====== JS-логика интерактивов ====== */
|
||||
|
||||
/* IV1 — 3D-визуализатор шара с сегментом */
|
||||
(function(){
|
||||
if(!window.G3D) return;
|
||||
const svg = document.getElementById('p6-iv1-svg');
|
||||
const elR = document.getElementById('p6-iv1-R');
|
||||
const elH = document.getElementById('p6-iv1-h');
|
||||
const vR = document.getElementById('p6-iv1-R-v');
|
||||
const vH = document.getElementById('p6-iv1-h-v');
|
||||
const oS = document.getElementById('p6-iv1-S-o');
|
||||
const oV = document.getElementById('p6-iv1-V-o');
|
||||
const oVseg = document.getElementById('p6-iv1-Vseg-o');
|
||||
const oSseg = document.getElementById('p6-iv1-Sseg-o');
|
||||
const oCnt = document.getElementById('p6-iv1-cnt');
|
||||
if(!svg) return;
|
||||
const scene = G3D.createScene({W:480, H:400, scale:60, camDist:8, rotX:-0.35, rotY:0.7});
|
||||
const seen = new Set();
|
||||
let xpGiven = false;
|
||||
const PI = 3.14;
|
||||
|
||||
function projector(v){
|
||||
if (scene.proj === 'iso') return G3D.projectIso(v, scene.cx, scene.cy, scene.scale);
|
||||
return G3D.projectPersp(v, scene.camDist, scene.cx, scene.cy, scene.scale);
|
||||
}
|
||||
|
||||
function segmentOverlay(R, h, M){
|
||||
// Сегмент сверху: от высоты y0 = R - h до y = R
|
||||
if(h <= 0) return '';
|
||||
const hClamp = Math.min(h, 2*R);
|
||||
const y0 = R - hClamp; // y координата секущей плоскости
|
||||
// 1) Окружность секущего круга — эллипс в проекции
|
||||
const rBase = Math.sqrt(Math.max(0, 2*R*hClamp - hClamp*hClamp));
|
||||
const N = 64;
|
||||
const ringPts = [];
|
||||
for(let i=0; i<=N; i++){
|
||||
const t = 2*Math.PI*i/N;
|
||||
ringPts.push({x: rBase*Math.cos(t), y: y0, z: rBase*Math.sin(t)});
|
||||
}
|
||||
const ringRot = ringPts.map(p => G3D.vApply(M, p)).map(projector);
|
||||
let path = '';
|
||||
for(let i=0; i<ringRot.length; i++){
|
||||
const p = ringRot[i];
|
||||
if(!p) continue;
|
||||
path += (i===0?'M':'L') + p.x.toFixed(1) + ',' + p.y.toFixed(1) + ' ';
|
||||
}
|
||||
let out = '<path d="'+path+'Z" fill="rgba(244,114,182,.32)" stroke="#be185d" stroke-width="1.8" stroke-dasharray="4 3"/>';
|
||||
|
||||
// 2) Полупрозрачная "шапка" сегмента — несколько горизонтальных эллипсов выше плоскости
|
||||
const SLICES = 6;
|
||||
for(let k=1; k<=SLICES; k++){
|
||||
const yk = y0 + hClamp * k / SLICES;
|
||||
const rk = Math.sqrt(Math.max(0, R*R - yk*yk));
|
||||
if(rk < 1e-3) continue;
|
||||
const pts = [];
|
||||
for(let i=0; i<=N; i++){
|
||||
const t = 2*Math.PI*i/N;
|
||||
pts.push({x: rk*Math.cos(t), y: yk, z: rk*Math.sin(t)});
|
||||
}
|
||||
const proj = pts.map(p => G3D.vApply(M, p)).map(projector);
|
||||
let p2 = '';
|
||||
for(let i=0; i<proj.length; i++){
|
||||
const p = proj[i]; if(!p) continue;
|
||||
p2 += (i===0?'M':'L') + p.x.toFixed(1) + ',' + p.y.toFixed(1) + ' ';
|
||||
}
|
||||
out += '<path d="'+p2+'" fill="none" stroke="rgba(244,114,182,.55)" stroke-width="1"/>';
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function draw(){
|
||||
const R = +elR.value;
|
||||
let h = +elH.value;
|
||||
if(h > 2*R) h = 2*R;
|
||||
// Обновляем верхнюю границу слайдера h по текущему R
|
||||
elH.max = (2*R).toFixed(1);
|
||||
vR.textContent = R.toFixed(1);
|
||||
vH.textContent = h.toFixed(1);
|
||||
const sph = G3D.sphereWireframe(R, 6, 12);
|
||||
const M = G3D.buildRotMatrix(scene);
|
||||
const wire = G3D.renderSphereWireframe(sph, M, scene);
|
||||
const seg = segmentOverlay(R, h, M);
|
||||
svg.innerHTML = wire + seg;
|
||||
|
||||
oS.textContent = (4*PI*R*R).toFixed(2);
|
||||
oV.textContent = ((4/3)*PI*R*R*R).toFixed(2);
|
||||
oVseg.textContent = (PI*h*h*(3*R - h)/3).toFixed(2);
|
||||
oSseg.textContent = (2*PI*R*h).toFixed(2);
|
||||
|
||||
const key = R.toFixed(1)+'|'+h.toFixed(1);
|
||||
seen.add(key);
|
||||
oCnt.textContent = Math.min(seen.size, 4);
|
||||
if(seen.size >= 4 && !xpGiven){
|
||||
xpGiven = true;
|
||||
addXp(10, 'p6-iv1');
|
||||
bumpProgress('p6', 15);
|
||||
const note = document.createElement('div');
|
||||
note.className = 'feedback ok';
|
||||
note.innerHTML = '✓ +10 XP за исследование 4 разных конфигураций!';
|
||||
note.style.cssText = 'display:block;margin-top:8px';
|
||||
const host = document.getElementById('p6-iv1');
|
||||
if(host) host.appendChild(note);
|
||||
setTimeout(function(){ try{ note.remove(); }catch(e){} }, 3000);
|
||||
}
|
||||
}
|
||||
draw();
|
||||
G3D.attachOrbit(svg, scene, draw);
|
||||
elR.addEventListener('input', draw);
|
||||
elH.addEventListener('input', draw);
|
||||
document.querySelectorAll('#p6-iv1 .g3d-tools .btn').forEach(function(b){
|
||||
b.addEventListener('click', function(){ G3D.presetView(scene, b.dataset.view, draw); });
|
||||
});
|
||||
})();
|
||||
|
||||
/* IV2 — Калькулятор */
|
||||
(function(){
|
||||
const formBox = document.getElementById('p6-iv2-form');
|
||||
const outBox = document.getElementById('p6-iv2-out');
|
||||
let mode = 'ball';
|
||||
let xpGiven = false;
|
||||
const seenModes = new Set();
|
||||
const PI = 3.14;
|
||||
|
||||
function setActive(){
|
||||
['mb','ms','ml'].forEach(function(s, i){
|
||||
const b = document.getElementById('p6-iv2-'+s);
|
||||
const m = ['ball','seg','lay'][i];
|
||||
if(!b) return;
|
||||
b.classList.toggle('primary', m === mode);
|
||||
});
|
||||
}
|
||||
|
||||
function parseNum(id){ const el = document.getElementById(id); if(!el) return NaN; const v = (el.value||'').replace(',', '.').trim(); const x = parseFloat(v); return isFinite(x) ? x : NaN; }
|
||||
|
||||
function render(){
|
||||
let h = '';
|
||||
if(mode === 'ball'){
|
||||
h = '<p style="font-weight:700;margin-bottom:6px">Шар целиком</p>'
|
||||
+ '<div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">'
|
||||
+ '<span>$R=$</span><input type="text" class="tinp" id="p6-iv2-R" value="5" style="width:80px">'
|
||||
+ '<button class="btn primary" id="p6-iv2-calc">Вычислить</button>'
|
||||
+ '</div>';
|
||||
} else if(mode === 'seg'){
|
||||
h = '<p style="font-weight:700;margin-bottom:6px">Шаровой сегмент</p>'
|
||||
+ '<div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">'
|
||||
+ '<span>$R=$</span><input type="text" class="tinp" id="p6-iv2-R" value="5" style="width:70px">'
|
||||
+ '<span>$h=$</span><input type="text" class="tinp" id="p6-iv2-h" value="2" style="width:70px">'
|
||||
+ '<button class="btn primary" id="p6-iv2-calc">Вычислить</button>'
|
||||
+ '</div>';
|
||||
} else {
|
||||
h = '<p style="font-weight:700;margin-bottom:6px">Шаровой слой</p>'
|
||||
+ '<div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">'
|
||||
+ '<span>$R=$</span><input type="text" class="tinp" id="p6-iv2-R" value="10" style="width:60px">'
|
||||
+ '<span>$r_1=$</span><input type="text" class="tinp" id="p6-iv2-r1" value="6" style="width:60px">'
|
||||
+ '<span>$r_2=$</span><input type="text" class="tinp" id="p6-iv2-r2" value="8" style="width:60px">'
|
||||
+ '<span>$h=$</span><input type="text" class="tinp" id="p6-iv2-h" value="4" style="width:60px">'
|
||||
+ '<button class="btn primary" id="p6-iv2-calc">Вычислить</button>'
|
||||
+ '</div>';
|
||||
}
|
||||
formBox.innerHTML = h;
|
||||
renderMath(formBox);
|
||||
const btn = document.getElementById('p6-iv2-calc');
|
||||
if(btn) btn.addEventListener('click', calc);
|
||||
}
|
||||
|
||||
function calc(){
|
||||
let out = '';
|
||||
if(mode === 'ball'){
|
||||
const R = parseNum('p6-iv2-R');
|
||||
if(!isFinite(R) || R<=0){ outBox.innerHTML = '<span style="color:var(--bad)">✗ Введи $R>0$.</span>'; renderMath(outBox); return; }
|
||||
const S = 4*PI*R*R;
|
||||
const V = (4/3)*PI*R*R*R;
|
||||
const C = 2*PI*R;
|
||||
out = '<p>Шар радиуса $R='+fmt(R)+'$:</p>'
|
||||
+ '<p>$S_{\\text{сферы}}=4\\pi R^2=4\\cdot 3{,}14\\cdot '+fmt(R*R)+'\\approx '+fmt(+S.toFixed(2))+'$</p>'
|
||||
+ '<p>$V_{\\text{шара}}=\\dfrac{4}{3}\\pi R^3\\approx '+fmt(+V.toFixed(2))+'$</p>'
|
||||
+ '<p>Длина большой окружности: $C=2\\pi R\\approx '+fmt(+C.toFixed(2))+'$</p>'
|
||||
+ '<p>$\\dfrac{V}{S}=\\dfrac{R}{3}='+fmt(+(R/3).toFixed(4))+'$</p>';
|
||||
} else if(mode === 'seg'){
|
||||
const R = parseNum('p6-iv2-R');
|
||||
const h = parseNum('p6-iv2-h');
|
||||
if(!isFinite(R) || R<=0 || !isFinite(h) || h<=0 || h>2*R){ outBox.innerHTML = '<span style="color:var(--bad)">✗ Введи $R>0$ и $0<h\\le 2R$.</span>'; renderMath(outBox); return; }
|
||||
const V = PI*h*h*(3*R - h)/3;
|
||||
const S = 2*PI*R*h;
|
||||
const r = Math.sqrt(Math.max(0, 2*R*h - h*h));
|
||||
out = '<p>Шаровой сегмент $R='+fmt(R)+'$, $h='+fmt(h)+'$:</p>'
|
||||
+ '<p>$V_{\\text{сегм}}=\\dfrac{\\pi h^2(3R-h)}{3}=\\dfrac{3{,}14\\cdot '+fmt(h*h)+'\\cdot '+fmt(3*R-h)+'}{3}\\approx '+fmt(+V.toFixed(2))+'$</p>'
|
||||
+ '<p>$S_{\\text{сфер.часть}}=2\\pi R h=2\\cdot 3{,}14\\cdot '+fmt(R)+'\\cdot '+fmt(h)+'\\approx '+fmt(+S.toFixed(2))+'$</p>'
|
||||
+ '<p>Радиус основания сегмента: $r=\\sqrt{2Rh-h^2}=\\sqrt{'+fmt(2*R*h-h*h)+'}\\approx '+fmt(+r.toFixed(4))+'$</p>';
|
||||
} else {
|
||||
const R = parseNum('p6-iv2-R');
|
||||
const r1 = parseNum('p6-iv2-r1');
|
||||
const r2 = parseNum('p6-iv2-r2');
|
||||
const h = parseNum('p6-iv2-h');
|
||||
if(!isFinite(R) || R<=0 || !isFinite(r1) || r1<0 || !isFinite(r2) || r2<0 || !isFinite(h) || h<=0){ outBox.innerHTML = '<span style="color:var(--bad)">✗ Введи корректные значения ($R>0$, $r_1,r_2\\ge 0$, $h>0$).</span>'; renderMath(outBox); return; }
|
||||
const V = PI*h*(3*r1*r1 + 3*r2*r2 + h*h)/6;
|
||||
const S = 2*PI*R*h;
|
||||
out = '<p>Шаровой слой $R='+fmt(R)+'$, $r_1='+fmt(r1)+'$, $r_2='+fmt(r2)+'$, $h='+fmt(h)+'$:</p>'
|
||||
+ '<p>$V_{\\text{слой}}=\\dfrac{\\pi h(3r_1^2+3r_2^2+h^2)}{6}\\approx '+fmt(+V.toFixed(2))+'$</p>'
|
||||
+ '<p>$S_{\\text{сфер.часть}}=2\\pi R h\\approx '+fmt(+S.toFixed(2))+'$</p>'
|
||||
+ '<p>Площадь полной боковой поверхности слоя зависит только от $R$ и $h$ — это и есть свойство сферического пояса.</p>';
|
||||
}
|
||||
outBox.innerHTML = out;
|
||||
renderMath(outBox);
|
||||
seenModes.add(mode);
|
||||
if(seenModes.size >= 3 && !xpGiven){
|
||||
xpGiven = true;
|
||||
addXp(10, 'p6-iv2');
|
||||
bumpProgress('p6', 15);
|
||||
}
|
||||
}
|
||||
|
||||
['mb','ms','ml'].forEach(function(s, i){
|
||||
const b = document.getElementById('p6-iv2-'+s);
|
||||
const m = ['ball','seg','lay'][i];
|
||||
if(!b) return;
|
||||
b.addEventListener('click', function(){ mode = m; setActive(); render(); outBox.innerHTML=''; });
|
||||
});
|
||||
setActive();
|
||||
render();
|
||||
})();
|
||||
|
||||
/* IV3 — Вписан или описан? */
|
||||
(function(){
|
||||
const tasks = [
|
||||
{ q:'Шар касается всех 6 граней куба, его центр совпадает с центром куба.', a:'in', h:'Если шар касается всех граней изнутри — он <b>вписан</b> в куб.' },
|
||||
{ q:'Все 8 вершин куба лежат на сфере с центром в центре куба.', a:'out', h:'Все вершины на сфере — шар <b>описан около</b> куба.' },
|
||||
{ q:'Радиус шара равен $\\dfrac{a}{2}$, где $a$ — сторона куба.', a:'in', h:'$r=a/2$ — это вписанный шар (касается граней в центре).' },
|
||||
{ q:'Радиус шара равен $\\dfrac{a\\sqrt{3}}{2}$, где $a$ — сторона куба.', a:'out', h:'$R=\\dfrac{a\\sqrt 3}{2}$ = половина диагонали — шар <b>описан</b>.' },
|
||||
{ q:'Шар касается боковой поверхности цилиндра и обоих его оснований.', a:'in', h:'Касается всей поверхности изнутри — шар <b>вписан</b> в цилиндр ($h=2R$).' },
|
||||
{ q:'Все 4 вершины правильного тетраэдра лежат на сфере.', a:'out', h:'Все вершины на сфере — сфера <b>описана около</b> тетраэдра.' }
|
||||
];
|
||||
const list = document.getElementById('p6-iv3-list');
|
||||
const scoreEl = document.getElementById('p6-iv3-score');
|
||||
const solved = new Set();
|
||||
let xpGiven = false;
|
||||
list.innerHTML = tasks.map(function(t, i){
|
||||
return '<div style="background:var(--card);border:1px solid var(--border);border-radius:9px;padding:10px 12px;margin-bottom:8px">'
|
||||
+ '<div style="margin-bottom:8px"><b>Задание '+(i+1)+'.</b> '+t.q+'</div>'
|
||||
+ '<div style="display:flex;gap:6px;flex-wrap:wrap">'
|
||||
+ '<button class="btn" data-i="'+i+'" data-v="in">Шар вписан</button>'
|
||||
+ '<button class="btn" data-i="'+i+'" data-v="out">Шар описан</button>'
|
||||
+ '</div>'
|
||||
+ '<div class="feedback" id="p6-iv3-fb-'+i+'"></div>'
|
||||
+ '</div>';
|
||||
}).join('');
|
||||
renderMath(list);
|
||||
list.querySelectorAll('button[data-i]').forEach(function(b){
|
||||
b.addEventListener('click', function(){
|
||||
const i = +b.dataset.i, v = b.dataset.v, t = tasks[i];
|
||||
const fb = document.getElementById('p6-iv3-fb-'+i);
|
||||
if(solved.has(i)) return;
|
||||
if(v === t.a){
|
||||
feedback(fb, true, '✓ Верно. '+t.h);
|
||||
solved.add(i);
|
||||
scoreEl.textContent = solved.size;
|
||||
if(solved.size === tasks.length && !xpGiven){
|
||||
xpGiven = true;
|
||||
addXp(15, 'p6-iv3');
|
||||
bumpProgress('p6', 25);
|
||||
}
|
||||
} else {
|
||||
feedback(fb, false, '✗ Не то. Подумай: шар <i>вписан</i> = касается граней; <i>описан</i> = вершины на сфере.');
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
/* IV4 — Тренажёр */
|
||||
(function(){
|
||||
const tasks = [
|
||||
{ q:'Шар $R=5$. Найди $V$ (используй $\\pi\\approx 3{,}14$).', a:523.33, tol:0.6 },
|
||||
{ q:'Шар $R=3$. Найди $S$ (используй $\\pi\\approx 3{,}14$).', a:113.04, tol:0.1 },
|
||||
{ q:'Шар вписан в куб со стороной $a=6$. Найди $V_{\\text{шара}}$ ($\\pi\\approx 3{,}14$).', a:113.04, tol:0.1 },
|
||||
{ q:'Шар описан около куба со стороной $a=2$. Найди радиус шара $R$ (с точностью до 0,01).', a:1.73, tol:0.05 },
|
||||
{ q:'Шаровой сегмент: $R=5$, $h=2$. Найди $V_{\\text{сегм}}$ ($\\pi\\approx 3{,}14$).', a:54.43, tol:0.1 },
|
||||
{ q:'Шар $R=10$, сферический пояс высотой $h=4$. Найди $S$ пояса ($\\pi\\approx 3{,}14$).', a:251.2, tol:0.3 }
|
||||
];
|
||||
const list = document.getElementById('p6-iv4-list');
|
||||
const scoreEl = document.getElementById('p6-iv4-score');
|
||||
const solved = new Set();
|
||||
let xpGiven = false;
|
||||
list.innerHTML = tasks.map(function(t, i){
|
||||
return '<div style="background:var(--card);border:1px solid var(--border);border-radius:9px;padding:10px 12px;margin-bottom:8px">'
|
||||
+ '<div style="margin-bottom:6px"><b>Задача '+(i+1)+'.</b> '+t.q+'</div>'
|
||||
+ '<div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">'
|
||||
+ '<input type="text" class="tinp" id="p6-iv4-inp-'+i+'" placeholder="число" style="width:140px">'
|
||||
+ '<button class="btn primary" data-i="'+i+'">Проверить</button>'
|
||||
+ '</div>'
|
||||
+ '<div class="feedback" id="p6-iv4-fb-'+i+'"></div>'
|
||||
+ '</div>';
|
||||
}).join('');
|
||||
renderMath(list);
|
||||
list.querySelectorAll('button[data-i]').forEach(function(b){
|
||||
b.addEventListener('click', function(){
|
||||
const i = +b.dataset.i, t = tasks[i];
|
||||
const inp = document.getElementById('p6-iv4-inp-'+i);
|
||||
const fb = document.getElementById('p6-iv4-fb-'+i);
|
||||
const raw = (inp.value || '').replace(',', '.').trim();
|
||||
const val = parseFloat(raw);
|
||||
if(!isFinite(val)){ feedback(fb, false, '✗ Введи число'); return; }
|
||||
if(Math.abs(val - t.a) <= t.tol){
|
||||
feedback(fb, true, '✓ Верно!');
|
||||
if(!solved.has(i)){
|
||||
solved.add(i);
|
||||
scoreEl.textContent = solved.size;
|
||||
if(solved.size === tasks.length && !xpGiven){
|
||||
xpGiven = true;
|
||||
addXp(15, 'p6-iv4');
|
||||
bumpProgress('p6', 25);
|
||||
setTimeout(function(){ achievement('p6_done'); }, 400);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
feedback(fb, false, '✗ Не точно. Пересчитай с $\\pi\\approx 3{,}14$.');
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
wireReadBtn('p6');
|
||||
}
|
||||
|
||||
/* ===== STUB BUILDER — единый для всех параграфов раздела (Phase 0) ===== */
|
||||
|
||||
function buildStub(id){
|
||||
@@ -1071,6 +1522,11 @@ const SEARCH_INDEX = (function(){
|
||||
arr.push({kind:'Теория',title:'Уравнение сферы',desc:'(x-a)^2+(y-b)^2+(z-c)^2=R^2',sec:'p5'});
|
||||
arr.push({kind:'Теория',title:'Касательная плоскость к сфере',desc:'перпендикулярна радиусу в точке касания',sec:'p5'});
|
||||
arr.push({kind:'Теория',title:'Сечение сферы плоскостью',desc:'r = sqrt(R^2 - d^2), большой круг',sec:'p5'});
|
||||
arr.push({kind:'Теория',title:'Площадь сферы и объём шара',desc:'S = 4πR², V = (4/3)πR³',sec:'p6'});
|
||||
arr.push({kind:'Теория',title:'Шаровой сегмент',desc:'V = πh²(3R−h)/3, S = 2πRh',sec:'p6'});
|
||||
arr.push({kind:'Теория',title:'Шаровой сектор и слой',desc:'V_сект = (2/3)πR²h; V_слой = πh(3r1²+3r2²+h²)/6',sec:'p6'});
|
||||
arr.push({kind:'Теория',title:'Шар, вписанный и описанный около куба',desc:'r = a/2, R = a√3/2',sec:'p6'});
|
||||
arr.push({kind:'Теория',title:'Шар и цилиндр',desc:'вписан: h=2R; описан: R_шар=√(R²+(h/2)²)',sec:'p6'});
|
||||
return arr;
|
||||
})();
|
||||
function initSearch(){
|
||||
|
||||
Reference in New Issue
Block a user