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

feat(phys10 ch3 wave1): §16 «Заряд» + §17 «Закон Кулона»

Browse Source
This commit is contained in:
Maxim Dolgolyov
2026-05-29 17:21:04 +03:00
parent 07adcbd108
commit 1611e4b461
1 changed files with 678 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/textbooks/physics_10_ch3.html
+678 -11
View File
@@ -664,34 +664,701 @@ function wireReadBtn(paraId){
function build_p16(){
const box = document.getElementById('p16-body');
let html = '';
html += makeCard('theory', "Электрический заряд", "§16", `
<p><b>Электрический заряд</b> — этот параграф в разработке (Phase 1+).</p>
<p>Здесь появятся: теория, формулы, разобранные примеры и 3–4 интерактива в стиле «алгебры 11» — таблицы, симуляции, ползунки, drag-and-drop и автопроверяемые тренажёры.</p>
<p style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px;font-size:.92rem">
<b>Phase 0:</b> создан скелет учебника. <b>Phase 3+:</b> наполнение этого § содержанием по учебнику «Физика 10» (Беларусь, 2019).
</p>
/* THEORY 1 — Электрический заряд и виды */
html += makeCard('theory', "Электрический заряд и виды", "§16", `
<p><b>Электрический заряд</b> $q$ — физическая величина, характеризующая способность тел и частиц участвовать в электромагнитных взаимодействиях.</p>
<p style="margin-top:8px">Бывает <b>двух видов</b>: положительный (+) и отрицательный (&minus;).</p>
<ul style="margin:6px 0 8px 22px;line-height:1.75">
<li><b style="color:#dc2626">Одноимённые</b> заряды <b>отталкиваются</b>.</li>
<li><b style="color:#2563eb">Разноимённые</b> заряды <b>притягиваются</b>.</li>
</ul>
<p><b>Элементарный заряд</b> — наименьший существующий в природе модуль заряда:</p>
<p style="text-align:center;margin:10px 0">$$e = 1{,}6 \\cdot 10^{-19} \\text{ Кл}$$</p>
<ul style="margin:6px 0 8px 22px;line-height:1.75">
<li><b>Электрон</b>: заряд $-e$, масса $\\sim 9{,}1 \\cdot 10^{-31}$ кг.</li>
<li><b>Протон</b>: заряд $+e$, масса $\\sim 1{,}67 \\cdot 10^{-27}$ кг (в 1836 раз больше электрона).</li>
<li><b>Нейтрон</b>: заряд $0$.</li>
</ul>
<p>Любой макроскопический заряд <b>кратен элементарному</b>: $q = ne$, где $n$ — целое число.</p>
`);
/* THEORY 2 — Закон сохранения заряда */
html += makeCard('rule', "Закон сохранения заряда", "§16", `
<p><b>Закон сохранения электрического заряда</b>: в любой замкнутой (изолированной) системе алгебраическая сумма электрических зарядов сохраняется:</p>
<p style="text-align:center;margin:10px 0">$$\\sum q_i = \\text{const}$$</p>
<p>Заряды могут <b>перераспределяться</b> между телами, но общий заряд не меняется.</p>
<p style="margin-top:8px"><b>Способы электризации</b> (передачи заряда):</p>
<ul style="margin:6px 0 8px 22px;line-height:1.75">
<li><b>Трением</b>: например, расчёска из пластика трением о волосы.</li>
<li><b>Прикосновением</b>: заряженное тело передаёт часть заряда нейтральному.</li>
<li><b>Через индукцию</b>: заряженное тело наводит противоположный заряд на близлежащее проводящее тело (без касания).</li>
</ul>
<p style="padding:10px 14px;background:var(--warn-bg,#fef3c7);border-left:4px solid var(--warn,#f59e0b);border-radius:9px;margin:10px 0"><b>Пример:</b> два одинаковых металлических шара. Один заряжен зарядом $q$, другой нейтрален. После соприкосновения заряд распределится поровну: на каждом по $q/2$.</p>
`);
/* THEORY 3 — Единица заряда */
html += makeCard('example', "Единица заряда и примеры", "§16", `
<p><b>Единица заряда</b> в СИ — <b>Кулон</b> (Кл). Назван в честь Шарля Кулона.</p>
<p style="margin-top:8px">$1$ Кл — заряд, эквивалентный $1/e \\approx 6{,}25 \\cdot 10^{18}$ элементарных зарядов.</p>
<p>Это <b>очень большой заряд</b>! В реальных задачах часто используются:</p>
<ul style="margin:6px 0 8px 22px;line-height:1.75">
<li><b>мкКл</b> (микроКулон) $= 10^{-6}$ Кл</li>
<li><b>нКл</b> (наноКулон) $= 10^{-9}$ Кл</li>
<li><b>пКл</b> (пикоКулон) $= 10^{-12}$ Кл</li>
</ul>
<p><b>Примеры зарядов</b>:</p>
<ul style="margin:6px 0 8px 22px;line-height:1.75">
<li>Заряд электрона: $-1{,}6 \\cdot 10^{-19}$ Кл.</li>
<li>Заряд натёртой стеклянной палочки: $\\sim 10^{-7}-10^{-9}$ Кл.</li>
<li>Заряд молнии: $\\sim 10-100$ Кл.</li>
<li>Заряд при касании дверной ручки в сухом помещении: пара нКл, но напряжение огромно!</li>
</ul>
<p style="padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px;margin:10px 0"><b>Точечный заряд</b> — модель: заряженное тело, размерами которого можно пренебречь по сравнению с расстояниями до других объектов.</p>
`);
/* INTERACTIVE 1 — Симуляция передачи заряда */
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">Два одинаковых металлических шара. Задай заряды и нажми «Прикоснуть» — заряды распределятся поровну. Сумма $q_1 + q_2$ сохранится!</div>
<div class="sliders">
<label>$q_1$: <b id="p16-iv1-q1L">+5</b> нКл <input type="range" id="p16-iv1-q1" min="-10" max="10" value="5" step="1"></label>
<label>$q_2$: <b id="p16-iv1-q2L">-3</b> нКл <input type="range" id="p16-iv1-q2" min="-10" max="10" value="-3" step="1"></label>
</div>
<div style="background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px">
<svg id="p16-iv1-svg" viewBox="0 0 380 220" width="100%" style="height:auto"></svg>
</div>
<div class="actions" style="justify-content:center;margin-top:10px">
<button class="btn primary" id="p16-iv1-touch">Прикоснуть шары</button>
<button class="btn" id="p16-iv1-reset">Сначала</button>
</div>
<div id="p16-iv1-out" style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px;font-size:.94rem;line-height:1.75;text-align:center"></div>
<div class="feedback" id="p16-iv1-fb"></div>
</div>`;
/* INTERACTIVE 2 — Калькулятор электронов */
html += `<div class="wg" id="p16-iv2">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">Калькулятор числа электронов</div></div>
<div class="wg-help">Введи заряд $q$ — получи число электронов $|n| = |q|/e$ (избыток при $q<0$, недостаток при $q>0$).</div>
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;margin-bottom:10px">
<label>$q =$ <input type="number" id="p16-iv2-q" class="tinp" style="width:120px;text-align:center" value="-1" step="any"></label>
<select id="p16-iv2-unit" class="tinp" style="padding:8px 10px">
<option value="1e-9">нКл</option>
<option value="1e-6">мкКл</option>
<option value="1e-12">пКл</option>
<option value="1">Кл</option>
</select>
<button class="btn primary" id="p16-iv2-go">Вычислить</button>
</div>
<div id="p16-iv2-out" style="padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:9px;font-size:.94rem;min-height:60px;line-height:1.85"></div>
<div class="feedback" id="p16-iv2-fb"></div>
</div>`;
/* INTERACTIVE 3 — квикфайр «Притяжение или отталкивание?» */
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">6 ситуаций — выбери, что произойдёт между телами.</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(--sec-acc-soft);border-radius:10px;font-size:1.02rem;margin-bottom:10px;text-align:center;min-height:54px"></div>
<div id="p16-iv3-opts" style="display:grid;grid-template-columns:1fr 1fr;gap:8px"></div>
<div class="feedback" id="p16-iv3-fb"></div>
<div class="actions"><button class="btn" id="p16-iv3-restart">Начать заново</button></div>
</div>`;
/* INTERACTIVE 4 — Тренажёр заряда */
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">5 задач. $e = 1{,}6 \\cdot 10^{-19}$ Кл. Допуск $\\pm 5\\%$.</div>
<div class="score-display"><span>Задача <b id="p16-iv4-i">1</b> / 5</span><span>Очки: <b id="p16-iv4-s">0</b> / 5</span></div>
<div id="p16-iv4-q" style="padding:14px;background:var(--sec-acc-soft);border-radius:10px;font-size:1.02rem;margin-bottom:10px;text-align:center;min-height:54px"></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:140px;text-align:center" step="any">
<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 += secNav(null, 'p17');
html += readButton('p16');
box.innerHTML = html;
renderMath(box);
/* IV1 — Симуляция передачи заряда */
(function(){
const svg = document.getElementById('p16-iv1-svg');
const q1S = document.getElementById('p16-iv1-q1');
const q2S = document.getElementById('p16-iv1-q2');
const q1L = document.getElementById('p16-iv1-q1L');
const q2L = document.getElementById('p16-iv1-q2L');
const out = document.getElementById('p16-iv1-out');
const fb = document.getElementById('p16-iv1-fb');
let q1 = +q1S.value, q2 = +q2S.value;
const seen = new Set();
let _done = false;
function fmtQ(q){ return (q>=0?'+':'') + q; }
function render(){
const W=380, H=220;
// Координаты шаров
const cx1 = 110, cx2 = 270, cy = 120;
const r = 30;
let g = '';
// Подставка
g += '<line x1="60" y1="180" x2="320" y2="180" stroke="#94a3b8" stroke-width="2"/>';
g += '<line x1="' + cx1 + '" y1="' + (cy + r) + '" x2="' + cx1 + '" y2="180" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3"/>';
g += '<line x1="' + cx2 + '" y1="' + (cy + r) + '" x2="' + cx2 + '" y2="180" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3"/>';
// Шары
g += PHYS.chargeMark(cx1, cy, q1 === 0 ? 1 : (q1 > 0 ? 1 : -1), r, '');
if(q1 === 0){
// overlay серый круг для нейтрального
g += '<circle cx="' + cx1 + '" cy="' + cy + '" r="' + r + '" fill="#e5e7eb" stroke="#94a3b8" stroke-width="2"/>';
g += '<text x="' + cx1 + '" y="' + (cy + 4) + '" text-anchor="middle" font-family="Inter,sans-serif" font-size="14" font-weight="700" fill="#64748b">0</text>';
}
g += PHYS.chargeMark(cx2, cy, q2 === 0 ? 1 : (q2 > 0 ? 1 : -1), r, '');
if(q2 === 0){
g += '<circle cx="' + cx2 + '" cy="' + cy + '" r="' + r + '" fill="#e5e7eb" stroke="#94a3b8" stroke-width="2"/>';
g += '<text x="' + cx2 + '" y="' + (cy + 4) + '" text-anchor="middle" font-family="Inter,sans-serif" font-size="14" font-weight="700" fill="#64748b">0</text>';
}
// Подписи
g += '<text x="' + cx1 + '" y="' + (cy + r + 22) + '" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="#0f172a">q₁ = ' + fmtQ(q1) + ' нКл</text>';
g += '<text x="' + cx2 + '" y="' + (cy + r + 22) + '" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="#0f172a">q₂ = ' + fmtQ(q2) + ' нКл</text>';
// Заголовок
g += '<text x="190" y="30" text-anchor="middle" font-family="Inter,sans-serif" font-size="13" font-weight="700" fill="#0f172a">Два металлических шара</text>';
svg.innerHTML = g;
const sum = q1 + q2;
out.innerHTML = '<b>Сумма зарядов:</b> $q_1 + q_2 = ' + fmtQ(q1) + ' + (' + fmtQ(q2) + ') = ' + fmtQ(sum) + '$ нКл (сохраняется!)';
renderMath(out);
}
function sync(){
q1 = +q1S.value; q2 = +q2S.value;
q1L.textContent = fmtQ(q1); q2L.textContent = fmtQ(q2);
render();
}
q1S.addEventListener('input', sync);
q2S.addEventListener('input', sync);
document.getElementById('p16-iv1-touch').addEventListener('click', () => {
const sum = q1 + q2;
const avg = sum / 2;
q1 = avg; q2 = avg;
q1S.value = q1; q2S.value = q2;
q1L.textContent = fmtQ(q1); q2L.textContent = fmtQ(q2);
render();
feedback(fb, true, '&#10003; После касания: $q_1 = q_2 = (q_1 + q_2)/2 = ' + fmtQ(avg) + '$ нКл. Сумма сохранилась!');
const key = (+q1S.value) + ':' + (+q2S.value);
seen.add(key);
if(!_done && seen.size >= 4){ _done = true; addXp(10, 'p16-iv1'); bumpProgress('p16', 15); }
});
document.getElementById('p16-iv1-reset').addEventListener('click', () => {
q1 = 5; q2 = -3; q1S.value = 5; q2S.value = -3;
q1L.textContent = '+5'; q2L.textContent = '-3';
fb.style.display = 'none';
render();
});
sync();
})();
/* IV2 — Калькулятор электронов */
(function(){
const qI = document.getElementById('p16-iv2-q');
const uI = document.getElementById('p16-iv2-unit');
const out = document.getElementById('p16-iv2-out');
const fb = document.getElementById('p16-iv2-fb');
const seen = new Set();
let _done = false;
const e = PHYS.CONST.e;
function calc(){
const qv = parseFloat(qI.value);
if(!isFinite(qv)){ feedback(fb, false, '&#10007; Введи число.'); return; }
const unit = parseFloat(uI.value);
const qC = qv * unit;
const n = Math.abs(qC) / e;
const exp = Math.floor(Math.log10(n));
const coef = n / Math.pow(10, exp);
const sign = qC < 0 ? '<b style="color:#2563eb">избыток</b>' : (qC > 0 ? '<b style="color:#dc2626">недостаток</b>' : '<b>нет</b>');
const qExp = qC === 0 ? 0 : Math.floor(Math.log10(Math.abs(qC)));
const qCoef = qC === 0 ? 0 : qC / Math.pow(10, qExp);
out.innerHTML = '<div style="margin-bottom:6px"><b>Заряд в Кл:</b> $q = ' + (qC === 0 ? '0' : (+qCoef.toFixed(3) + ' \\cdot 10^{' + qExp + '}')) + '$ Кл</div>'
+ '<div style="margin-bottom:6px"><b>Число электронов:</b> $|n| = \\dfrac{|q|}{e} = \\dfrac{' + Math.abs(qC).toExponential(2).replace('e','\\cdot 10^{') + '}}{1{,}6 \\cdot 10^{-19}} \\approx ' + (+coef.toFixed(2)) + ' \\cdot 10^{' + exp + '}$</div>'
+ '<div>' + sign + ' электронов (' + (qC < 0 ? 'заряд отрицательный' : (qC > 0 ? 'заряд положительный' : 'нейтрально')) + ').</div>';
renderMath(out);
feedback(fb, true, '&#10003; Вычислено.');
seen.add((+qv.toFixed(3)) + ':' + uI.value);
if(!_done && seen.size >= 4){ _done = true; addXp(10, 'p16-iv2'); bumpProgress('p16', 15); }
}
document.getElementById('p16-iv2-go').addEventListener('click', calc);
qI.addEventListener('keydown', e => { if(e.key === 'Enter') calc(); });
})();
/* IV3 — квикфайр Притяжение/Отталкивание */
(function(){
const Q = [
{ q:'Два положительно заряженных шарика рядом. Что происходит?', a:'Притяжение', b:'Отталкивание', ans:1, why:'Одноимённые ($+$ и $+$) отталкиваются.' },
{ q:'Положительный заряд и отрицательный заряд рядом.', a:'Притяжение', b:'Отталкивание', ans:0, why:'Разноимённые ($+$ и $-$) притягиваются.' },
{ q:'Два отрицательно заряженных тела рядом.', a:'Притяжение', b:'Отталкивание', ans:1, why:'Одноимённые ($-$ и $-$) отталкиваются.' },
{ q:'Заряженная стеклянная палочка подносится к нейтральному бумажному шарику (без касания).', a:'Притяжение (через индукцию)', b:'Отталкивание', ans:0, why:'На нейтральном шарике наводится противоположный заряд — индукция вызывает притяжение.' },
{ q:'Электрон и протон.', a:'Притяжение', b:'Отталкивание', ans:0, why:'Электрон $-e$, протон $+e$ — разноимённые, притягиваются.' },
{ q:'Два электрона.', a:'Притяжение', b:'Отталкивание', ans:1, why:'Оба отрицательны ($-e$, $-e$) — отталкиваются.' },
];
let i = 0, score = 0;
const qEl = document.getElementById('p16-iv3-q');
const oEl = document.getElementById('p16-iv3-opts');
const fb = document.getElementById('p16-iv3-fb');
const iEl = document.getElementById('p16-iv3-i');
const sEl = document.getElementById('p16-iv3-s');
function show(){
if(i >= Q.length){
qEl.innerHTML = '<b>Готово!</b> Результат: ' + score + ' / ' + Q.length;
oEl.innerHTML = '';
if(score === Q.length){ addXp(15, 'p16-iv3'); bumpProgress('p16', 25); }
else if(score >= 4){ addXp(8, 'p16-iv3'); bumpProgress('p16', 15); }
return;
}
iEl.textContent = (i+1);
sEl.textContent = score;
const item = Q[i];
qEl.innerHTML = item.q;
oEl.innerHTML = '<button class="btn primary" data-v="0">' + item.a + '</button><button class="btn primary" data-v="1">' + item.b + '</button>';
fb.style.display = 'none';
renderMath(qEl); renderMath(oEl);
oEl.querySelectorAll('button').forEach(b => {
b.addEventListener('click', () => {
const v = +b.dataset.v;
if(v === item.ans){ score++; feedback(fb, true, '&#10003; Верно! ' + item.why + ' Дальше ▶'); }
else feedback(fb, false, '&#10007; Неверно. ' + item.why + ' Дальше ▶');
sEl.textContent = score;
oEl.querySelectorAll('button').forEach(x => x.disabled = true);
i++;
setTimeout(show, 1600);
});
});
}
document.getElementById('p16-iv3-restart').addEventListener('click', () => { i = 0; score = 0; show(); });
show();
})();
/* IV4 — Тренажёр заряда */
(function(){
const Q = [
{ q:'Сколько электронов нужно для заряда $-1$ нКл? Введи мантиссу при $10^9$.', ans:6.25, tol:0.3, hint:'$n = 10^{-9}/(1{,}6\\cdot 10^{-19}) = 6{,}25 \\cdot 10^9$.' },
{ q:'Два одинаковых шара с зарядами $+4$ нКл и $-6$ нКл соприкоснулись. Заряд каждого после (в нКл)?', ans:-1, tol:0.1, hint:'$(q_1+q_2)/2 = (4-6)/2 = -1$ нКл.' },
{ q:'Заряд $q = +3{,}2 \\cdot 10^{-19}$ Кл соответствует скольким элементарным?', ans:2, tol:0.1, hint:'$n = 3{,}2/1{,}6 = 2$.' },
{ q:'Заряженный шар отдал половину своего заряда. Если был $+10$ нКл, сколько осталось (в нКл)?', ans:5, tol:0.2, hint:'$10/2 = 5$ нКл.' },
{ q:'Заряд молнии $\\approx 30$ Кл. Сколько это электронов? Введи мантиссу при $10^{20}$.', ans:1.9, tol:0.3, hint:'$n = 30/(1{,}6 \\cdot 10^{-19}) \\approx 1{,}9 \\cdot 10^{20}$.' },
];
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 >= 3){ 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 raw = document.getElementById('p16-iv4-ans').value.replace(',', '.');
const ans = parseFloat(raw);
if(isNaN(ans)){ feedback(fb, false, '&#10007; Введи число.'); return; }
if(Math.abs(ans - Q[i].ans) <= Q[i].tol + 0.001){ score++; feedback(fb, true, '&#10003; Верно! '+Q[i].hint+' Дальше ▶'); }
else feedback(fb, false, '&#10007; Неверно. Ответ: $'+Q[i].ans+'$. '+Q[i].hint+' Дальше ▶');
document.getElementById('p16-iv4-s').textContent = score;
i++;
setTimeout(show, 1800);
}
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');
}
function build_p17(){
const box = document.getElementById('p17-body');
let html = '';
/* THEORY 1 — Закон Кулона */
html += makeCard('theory', "Закон Кулона", "§17", `
<p><b>Закон Кулона</b> — этот параграф в разработке (Phase 1+).</p>
<p>Здесь появятся: теория, формулы, разобранные примеры и 3–4 интерактива в стиле «алгебры 11» — таблицы, симуляции, ползунки, drag-and-drop и автопроверяемые тренажёры.</p>
<p style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px;font-size:.92rem">
<b>Phase 0:</b> создан скелет учебника. <b>Phase 3+:</b> наполнение этого § содержанием по учебнику «Физика 10» (Беларусь, 2019).
</p>
<p><b>Закон Кулона</b>: сила взаимодействия двух точечных зарядов прямо пропорциональна произведению модулей зарядов и обратно пропорциональна квадрату расстояния между ними:</p>
<p style="text-align:center;margin:10px 0">$$F = k\\,\\dfrac{|q_1 q_2|}{r^2}$$</p>
<p>где:</p>
<ul style="margin:6px 0 8px 22px;line-height:1.75">
<li>$F$ — сила (Н);</li>
<li>$q_1, q_2$ — заряды (Кл);</li>
<li>$r$ — расстояние между зарядами (м);</li>
<li>$k = 9 \\cdot 10^9$ Н$\\cdot$м$^2$/Кл$^2$ — коэффициент пропорциональности.</li>
</ul>
<p>Альтернативная форма:</p>
<p style="text-align:center;margin:10px 0">$$F = \\dfrac{1}{4\\pi\\varepsilon_0} \\cdot \\dfrac{|q_1 q_2|}{r^2}$$</p>
<p>где $\\varepsilon_0 = 8{,}85 \\cdot 10^{-12}$ Ф/м — <b>электрическая постоянная</b>.</p>
<p style="margin-top:8px"><b>Направление</b>:</p>
<ul style="margin:6px 0 8px 22px;line-height:1.75">
<li>Одноимённые ($q_1 q_2 > 0$): силы направлены <b>от</b> другого заряда (отталкивание).</li>
<li>Разноимённые ($q_1 q_2 < 0$): силы направлены <b>к</b> другому заряду (притяжение).</li>
</ul>
<p>По 3-му закону Ньютона $\\vec{F}_{12} = -\\vec{F}_{21}$.</p>
`);
/* THEORY 2 — Закон Кулона в среде */
html += makeCard('rule', "Закон Кулона в среде", "§17", `
<p>В диэлектрической среде сила Кулона уменьшается в $\\varepsilon$ раз:</p>
<p style="text-align:center;margin:10px 0">$$F = k\\,\\dfrac{|q_1 q_2|}{\\varepsilon\\, r^2}$$</p>
<p>где $\\varepsilon$ — <b>относительная диэлектрическая проницаемость</b> среды (безразмерная).</p>
<p style="margin-top:8px"><b>Примеры</b>:</p>
<ul style="margin:6px 0 8px 22px;line-height:1.75">
<li><b>Вакуум, воздух</b>: $\\varepsilon \\approx 1$.</li>
<li><b>Бензин</b>: $\\varepsilon \\approx 2$.</li>
<li><b>Стекло</b>: $\\varepsilon \\approx 5-10$.</li>
<li><b>Вода</b>: $\\varepsilon \\approx 81$ (сильное ослабление сил!).</li>
<li><b>Сегнетоэлектрики</b>: $\\varepsilon$ может достигать сотен и тысяч.</li>
</ul>
<p style="padding:10px 14px;background:var(--warn-bg,#fef3c7);border-left:4px solid var(--warn,#f59e0b);border-radius:9px;margin:10px 0">Это объясняет, почему соли и кислоты легко диссоциируют в воде: силы между ионами в воде в $81$ раз слабее, чем в вакууме.</p>
`);
/* THEORY 3 — Принцип суперпозиции */
html += makeCard('example', "Принцип суперпозиции и пример", "§17", `
<p><b>Принцип суперпозиции</b>: если на заряд $q$ действуют несколько других зарядов, результирующая сила равна <b>векторной сумме</b> сил от каждого заряда отдельно:</p>
<p style="text-align:center;margin:10px 0">$$\\vec{F} = \\vec{F_1} + \\vec{F_2} + \\vec{F_3} + \\ldots$$</p>
<p>Силы складываются как векторы (учитывая направления!).</p>
<p style="margin-top:10px"><b>Пример.</b> Два заряда по $+1$ мкКл расположены на расстоянии $0{,}1$ м. Найти силу.</p>
<p style="text-align:center;margin:10px 0">$$F = 9 \\cdot 10^9 \\cdot \\dfrac{(10^{-6})^2}{(0{,}1)^2} = 9 \\cdot 10^9 \\cdot \\dfrac{10^{-12}}{0{,}01} = 0{,}9 \\text{ Н}$$</p>
<p style="padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px;margin:10px 0"><b>Сравнение с гравитацией</b>: кулоновская сила между двумя протонами в $\\sim 10^{36}$ раз сильнее гравитации. В макромире доминирует электромагнетизм; гравитация важна только потому, что положительные и отрицательные заряды в обычных телах в среднем уравновешиваются.</p>
`);
/* INTERACTIVE 1 — Визуализатор закона Кулона (главный) */
html += `<div class="wg" id="p17-iv1">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 1</span><div class="wg-title">Визуализатор закона Кулона</div></div>
<div class="wg-help">Меняй заряды и расстояние — стрелки покажут силы, формула $F = k|q_1 q_2|/r^2$ пересчитается.</div>
<div class="sliders">
<label>$q_1$: <b id="p17-iv1-q1L">+5</b> нКл <input type="range" id="p17-iv1-q1" min="-10" max="10" value="5" step="0.5"></label>
<label>$q_2$: <b id="p17-iv1-q2L">+5</b> нКл <input type="range" id="p17-iv1-q2" min="-10" max="10" value="5" step="0.5"></label>
<label>$r$: <b id="p17-iv1-rL">0.20</b> м <input type="range" id="p17-iv1-r" min="0.05" max="0.5" value="0.2" step="0.01"></label>
</div>
<div style="background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px">
<svg id="p17-iv1-svg" viewBox="0 0 480 260" width="100%" style="height:auto"></svg>
</div>
<div id="p17-iv1-out" style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px;font-size:.94rem;line-height:1.75;text-align:center"></div>
</div>`;
/* INTERACTIVE 2 — Калькулятор силы Кулона */
html += `<div class="wg" id="p17-iv2">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">Калькулятор силы Кулона</div></div>
<div class="wg-help">Введи заряды, расстояние, выбери среду. $F = k|q_1 q_2|/(\\varepsilon r^2)$, $k = 9 \\cdot 10^9$.</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:10px">
<label style="display:flex;flex-direction:column;gap:4px;font-size:.86rem">$q_1$
<div style="display:flex;gap:4px">
<input type="number" id="p17-iv2-q1" class="tinp" style="width:80px;text-align:center" value="1" step="any">
<select id="p17-iv2-u1" class="tinp" style="padding:4px"><option value="1e-9">нКл</option><option value="1e-6" selected>мкКл</option><option value="1">Кл</option></select>
</div>
</label>
<label style="display:flex;flex-direction:column;gap:4px;font-size:.86rem">$q_2$
<div style="display:flex;gap:4px">
<input type="number" id="p17-iv2-q2" class="tinp" style="width:80px;text-align:center" value="1" step="any">
<select id="p17-iv2-u2" class="tinp" style="padding:4px"><option value="1e-9">нКл</option><option value="1e-6" selected>мкКл</option><option value="1">Кл</option></select>
</div>
</label>
<label style="display:flex;flex-direction:column;gap:4px;font-size:.86rem">$r$
<div style="display:flex;gap:4px">
<input type="number" id="p17-iv2-r" class="tinp" style="width:80px;text-align:center" value="10" step="any">
<select id="p17-iv2-ur" class="tinp" style="padding:4px"><option value="0.01">см</option><option value="1" selected>м</option></select>
</div>
</label>
<label style="display:flex;flex-direction:column;gap:4px;font-size:.86rem">$\\varepsilon$
<select id="p17-iv2-eps" class="tinp" style="padding:6px">
<option value="1" selected>1 (воздух)</option>
<option value="2">2 (бензин)</option>
<option value="7">7 (стекло)</option>
<option value="81">81 (вода)</option>
</select>
</label>
</div>
<div class="actions" style="justify-content:center"><button class="btn primary" id="p17-iv2-go">Вычислить $F$</button></div>
<div id="p17-iv2-out" style="margin-top:10px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:9px;font-size:.94rem;min-height:60px;line-height:1.85"></div>
<div class="feedback" id="p17-iv2-fb"></div>
</div>`;
/* INTERACTIVE 3 — квикфайр «Как изменится сила?» */
html += `<div class="wg" id="p17-iv3">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 3</span><div class="wg-title">Как изменится сила?</div></div>
<div class="wg-help">6 ситуаций — как изменится сила Кулона? 4 варианта ответа.</div>
<div class="score-display"><span>Задача <b id="p17-iv3-i">1</b> / 6</span><span>Очки: <b id="p17-iv3-s">0</b> / 6</span></div>
<div id="p17-iv3-q" style="padding:14px;background:var(--sec-acc-soft);border-radius:10px;font-size:1.02rem;margin-bottom:10px;text-align:center;min-height:54px"></div>
<div id="p17-iv3-opts" style="display:grid;grid-template-columns:1fr 1fr;gap:8px"></div>
<div class="feedback" id="p17-iv3-fb"></div>
<div class="actions"><button class="btn" id="p17-iv3-restart">Начать заново</button></div>
</div>`;
/* INTERACTIVE 4 — Тренажёр Кулона */
html += `<div class="wg" id="p17-iv4">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 4</span><div class="wg-title">Тренажёр закона Кулона</div></div>
<div class="wg-help">5 задач. $k = 9 \\cdot 10^9$ Н$\\cdot$м$^2$/Кл$^2$. Допуск $\\pm 5\\%$.</div>
<div class="score-display"><span>Задача <b id="p17-iv4-i">1</b> / 5</span><span>Очки: <b id="p17-iv4-s">0</b> / 5</span></div>
<div id="p17-iv4-q" style="padding:14px;background:var(--sec-acc-soft);border-radius:10px;font-size:1.02rem;margin-bottom:10px;text-align:center;min-height:54px"></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="p17-iv4-ans" class="tinp" style="width:140px;text-align:center" step="any">
<button class="btn primary" id="p17-iv4-go">Проверить</button>
<button class="btn" id="p17-iv4-start">Заново</button>
</div>
<div class="feedback" id="p17-iv4-fb"></div>
</div>`;
html += secNav('p16', 'p18');
html += readButton('p17');
box.innerHTML = html;
renderMath(box);
/* IV1 — Главный визуализатор закона Кулона */
(function(){
const svg = document.getElementById('p17-iv1-svg');
const q1S = document.getElementById('p17-iv1-q1');
const q2S = document.getElementById('p17-iv1-q2');
const rS = document.getElementById('p17-iv1-r');
const q1L = document.getElementById('p17-iv1-q1L');
const q2L = document.getElementById('p17-iv1-q2L');
const rL = document.getElementById('p17-iv1-rL');
const out = document.getElementById('p17-iv1-out');
const seen = new Set();
let _done = false;
const k = PHYS.CONST.k;
function fmtQ(q){ return (q>=0?'+':'') + q.toFixed(1); }
function render(){
const q1 = +q1S.value, q2 = +q2S.value, r = +rS.value;
q1L.textContent = fmtQ(q1); q2L.textContent = fmtQ(q2); rL.textContent = r.toFixed(2);
const W = 480, H = 260;
const cy = 130;
// Картина: q1 слева, q2 справа. Минимальное расстояние пикселями для наглядности
const minPx = 90, maxPx = 360;
// Линейно: r=0.05 -> minPx, r=0.5 -> maxPx
const pxR = minPx + (r - 0.05) / (0.5 - 0.05) * (maxPx - minPx);
const cx1 = (W - pxR) / 2;
const cx2 = cx1 + pxR;
const radius = 22;
let g = '';
// Линия расстояния
g += '<line x1="' + cx1 + '" y1="' + (cy - 50) + '" x2="' + cx2 + '" y2="' + (cy - 50) + '" stroke="#94a3b8" stroke-width="1.3" stroke-dasharray="4 3"/>';
g += '<line x1="' + cx1 + '" y1="' + (cy - 55) + '" x2="' + cx1 + '" y2="' + (cy - 45) + '" stroke="#94a3b8" stroke-width="1.5"/>';
g += '<line x1="' + cx2 + '" y1="' + (cy - 55) + '" x2="' + cx2 + '" y2="' + (cy - 45) + '" stroke="#94a3b8" stroke-width="1.5"/>';
g += '<text x="' + ((cx1+cx2)/2) + '" y="' + (cy - 58) + '" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="12" font-weight="700" fill="#0f172a">r = ' + r.toFixed(2) + ' м</text>';
// Заряды
g += PHYS.chargeMark(cx1, cy, q1 === 0 ? 1 : (q1 > 0 ? 1 : -1), radius, '');
if(q1 === 0){
g += '<circle cx="' + cx1 + '" cy="' + cy + '" r="' + radius + '" fill="#e5e7eb" stroke="#94a3b8" stroke-width="2"/>';
g += '<text x="' + cx1 + '" y="' + (cy + 4) + '" text-anchor="middle" font-family="Inter,sans-serif" font-size="14" font-weight="700" fill="#64748b">0</text>';
}
g += PHYS.chargeMark(cx2, cy, q2 === 0 ? 1 : (q2 > 0 ? 1 : -1), radius, '');
if(q2 === 0){
g += '<circle cx="' + cx2 + '" cy="' + cy + '" r="' + radius + '" fill="#e5e7eb" stroke="#94a3b8" stroke-width="2"/>';
g += '<text x="' + cx2 + '" y="' + (cy + 4) + '" text-anchor="middle" font-family="Inter,sans-serif" font-size="14" font-weight="700" fill="#64748b">0</text>';
}
// Подписи зарядов
g += '<text x="' + cx1 + '" y="' + (cy + radius + 22) + '" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="#0f172a">q₁ = ' + fmtQ(q1) + ' нКл</text>';
g += '<text x="' + cx2 + '" y="' + (cy + radius + 22) + '" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="#0f172a">q₂ = ' + fmtQ(q2) + ' нКл</text>';
// Расчёт силы (в Н). Заряды в нКл -> Кл
const qC1 = q1 * 1e-9, qC2 = q2 * 1e-9;
const F = k * Math.abs(qC1 * qC2) / (r * r);
// Преобразование в мН/мкН
let Fdisp, Funit;
if(F >= 1e-3){ Fdisp = (F * 1000).toFixed(2); Funit = 'мН'; }
else if(F >= 1e-6){ Fdisp = (F * 1e6).toFixed(2); Funit = 'мкН'; }
else { Fdisp = F.toExponential(2); Funit = 'Н'; }
// Стрелки силы
const prod = q1 * q2;
let kind;
if(prod === 0){
kind = 'Один из зарядов = 0: сила отсутствует';
} else {
const repulse = prod > 0;
kind = repulse ? '<b style="color:#dc2626">Одноимённые: отталкиваются</b>' : '<b style="color:#10b981">Разноимённые: притягиваются</b>';
// Длина стрелки пропорциональна F (нормируем)
const maxArrowLen = 60;
// Нормировка относительно F при q1=q2=10 нКл, r=0.05м
const Fref = k * (10e-9 * 10e-9) / (0.05 * 0.05);
let arrowLen = Math.min(maxArrowLen, Math.sqrt(F / Fref) * maxArrowLen);
arrowLen = Math.max(15, arrowLen);
if(repulse){
// q1 толкается влево, q2 — вправо
g += PHYS.drawArrow(cx1 - 4, cy, cx1 - 4 - arrowLen, cy, '#dc2626', 3, 11);
g += PHYS.drawArrow(cx2 + 4, cy, cx2 + 4 + arrowLen, cy, '#dc2626', 3, 11);
g += '<text x="' + (cx1 - 4 - arrowLen - 6) + '" y="' + (cy - 8) + '" text-anchor="end" font-family="Inter,sans-serif" font-size="12" font-weight="700" fill="#dc2626">F</text>';
g += '<text x="' + (cx2 + 4 + arrowLen + 6) + '" y="' + (cy - 8) + '" font-family="Inter,sans-serif" font-size="12" font-weight="700" fill="#dc2626">F</text>';
} else {
// q1 тянется вправо, q2 — влево
g += PHYS.drawArrow(cx1 + 4, cy, cx1 + 4 + arrowLen, cy, '#10b981', 3, 11);
g += PHYS.drawArrow(cx2 - 4, cy, cx2 - 4 - arrowLen, cy, '#10b981', 3, 11);
g += '<text x="' + (cx1 + 4 + arrowLen + 6) + '" y="' + (cy - 8) + '" font-family="Inter,sans-serif" font-size="12" font-weight="700" fill="#10b981">F</text>';
g += '<text x="' + (cx2 - 4 - arrowLen - 6) + '" y="' + (cy - 8) + '" text-anchor="end" font-family="Inter,sans-serif" font-size="12" font-weight="700" fill="#10b981">F</text>';
}
}
// Заголовок
g += '<text x="240" y="28" text-anchor="middle" font-family="Inter,sans-serif" font-size="13" font-weight="700" fill="#0f172a">Закон Кулона: F = k|q₁q₂|/r²</text>';
svg.innerHTML = g;
out.innerHTML = '<div>' + kind + '</div>'
+ '<div style="margin-top:6px"><b>Сила:</b> $F = k\\dfrac{|q_1 q_2|}{r^2} = ' + Fdisp + '$ ' + Funit + '</div>';
renderMath(out);
seen.add(q1.toFixed(1) + ':' + q2.toFixed(1) + ':' + r.toFixed(2));
if(!_done && seen.size >= 4){ _done = true; addXp(10, 'p17-iv1'); bumpProgress('p17', 15); }
}
q1S.addEventListener('input', render);
q2S.addEventListener('input', render);
rS.addEventListener('input', render);
render();
})();
/* IV2 — Калькулятор силы Кулона */
(function(){
const out = document.getElementById('p17-iv2-out');
const fb = document.getElementById('p17-iv2-fb');
const seen = new Set();
let _done = false;
const k = PHYS.CONST.k;
function calc(){
const q1 = parseFloat(document.getElementById('p17-iv2-q1').value);
const q2 = parseFloat(document.getElementById('p17-iv2-q2').value);
const r = parseFloat(document.getElementById('p17-iv2-r').value);
const u1 = parseFloat(document.getElementById('p17-iv2-u1').value);
const u2 = parseFloat(document.getElementById('p17-iv2-u2').value);
const ur = parseFloat(document.getElementById('p17-iv2-ur').value);
const eps = parseFloat(document.getElementById('p17-iv2-eps').value);
if(!isFinite(q1) || !isFinite(q2)){ feedback(fb, false, '&#10007; Введи заряды.'); return; }
if(!isFinite(r) || r <= 0){ feedback(fb, false, '&#10007; Расстояние должно быть положительным.'); return; }
const qC1 = q1 * u1, qC2 = q2 * u2, rM = r * ur;
const F = k * Math.abs(qC1 * qC2) / (eps * rM * rM);
// подача в подходящих единицах
let Fdisp, Funit;
if(F >= 1){ Fdisp = (+F.toFixed(3)); Funit = 'Н'; }
else if(F >= 1e-3){ Fdisp = (+(F*1000).toFixed(3)); Funit = 'мН'; }
else if(F >= 1e-6){ Fdisp = (+(F*1e6).toFixed(3)); Funit = 'мкН'; }
else { Fdisp = F.toExponential(3); Funit = 'Н'; }
const epsStr = eps === 1 ? '' : '\\varepsilon';
const epsForm = eps === 1 ? '' : (' \\cdot \\dfrac{1}{' + eps + '}');
out.innerHTML = '<div style="margin-bottom:6px"><b>В СИ:</b> $q_1 = ' + qC1.toExponential(2) + '$ Кл, $q_2 = ' + qC2.toExponential(2) + '$ Кл, $r = ' + rM + '$ м'+(eps===1?'':', $\\varepsilon = '+eps+'$')+'</div>'
+ '<div style="margin-bottom:6px"><b>Подстановка:</b> $F = \\dfrac{9 \\cdot 10^9 \\cdot |' + qC1.toExponential(1) + ' \\cdot ' + qC2.toExponential(1) + '|}{' + (eps===1?'':eps+' \\cdot ') + (rM*rM).toExponential(2) + '}$</div>'
+ '<div><b>Сила:</b> $F \\approx ' + Fdisp + '$ ' + Funit + '</div>';
renderMath(out);
feedback(fb, true, '&#10003; Вычислено.');
seen.add(qC1.toExponential(1) + ':' + qC2.toExponential(1) + ':' + rM + ':' + eps);
if(!_done && seen.size >= 3){ _done = true; addXp(10, 'p17-iv2'); bumpProgress('p17', 15); }
}
document.getElementById('p17-iv2-go').addEventListener('click', calc);
})();
/* IV3 — квикфайр «Как изменится сила?» */
(function(){
// 4 опции на каждый вопрос
const OPTS = ['Увеличится в 2 раза', 'Уменьшится в 2 раза', 'Увеличится в 4 раза', 'Уменьшится в 4 раза'];
const Q = [
{ q:'Если расстояние $r$ удвоить (заряды без изменений) — как изменится $F$?', ans:3, why:'$F \\propto 1/r^2$; при $r\\to 2r$ сила уменьшается в $4$ раза.' },
{ q:'Если заряд $q_1$ удвоить (остальное без изменений) — как изменится $F$?', ans:0, why:'$F \\propto q_1$; сила увеличится в $2$ раза.' },
{ q:'Если оба заряда $q_1, q_2$ удвоить (расстояние без изменений) — как изменится $F$?', ans:2, why:'$F \\propto q_1 q_2$; при $q_1\\to 2q_1$ и $q_2\\to 2q_2$ сила увеличится в $4$ раза.' },
{ q:'Если расстояние $r$ уменьшить в $2$ раза — как изменится $F$?', ans:2, why:'$F \\propto 1/r^2$; при $r\\to r/2$ сила увеличится в $4$ раза.' },
{ q:'Если заряды поместить в среду с $\\varepsilon = 2$ (вместо вакуума) — как изменится $F$?', ans:1, why:'$F = k|q_1q_2|/(\\varepsilon r^2)$; при $\\varepsilon = 2$ сила уменьшится в $2$ раза.' },
{ q:'Если один из зарядов удвоить И расстояние удвоить — как изменится $F$?', ans:1, why:'$F \\propto q/r^2$; множитель $2/4 = 1/2$ — сила уменьшится в $2$ раза.' },
];
let i = 0, score = 0;
const qEl = document.getElementById('p17-iv3-q');
const oEl = document.getElementById('p17-iv3-opts');
const fb = document.getElementById('p17-iv3-fb');
const iEl = document.getElementById('p17-iv3-i');
const sEl = document.getElementById('p17-iv3-s');
function show(){
if(i >= Q.length){
qEl.innerHTML = '<b>Готово!</b> Результат: ' + score + ' / ' + Q.length;
oEl.innerHTML = '';
if(score === Q.length){ addXp(15, 'p17-iv3'); bumpProgress('p17', 25); }
else if(score >= 4){ addXp(8, 'p17-iv3'); bumpProgress('p17', 15); }
return;
}
iEl.textContent = (i+1);
sEl.textContent = score;
const item = Q[i];
qEl.innerHTML = item.q;
oEl.innerHTML = OPTS.map((t, k) => '<button class="btn primary" data-v="' + k + '">' + t + '</button>').join('');
fb.style.display = 'none';
renderMath(qEl); renderMath(oEl);
oEl.querySelectorAll('button').forEach(b => {
b.addEventListener('click', () => {
const v = +b.dataset.v;
if(v === item.ans){ score++; feedback(fb, true, '&#10003; Верно! ' + item.why + ' Дальше ▶'); }
else feedback(fb, false, '&#10007; Неверно. ' + item.why + ' Дальше ▶');
sEl.textContent = score;
oEl.querySelectorAll('button').forEach(x => x.disabled = true);
i++;
setTimeout(show, 1700);
});
});
}
document.getElementById('p17-iv3-restart').addEventListener('click', () => { i = 0; score = 0; show(); });
show();
})();
/* IV4 — Тренажёр Кулона */
(function(){
const Q = [
{ q:'Два заряда по $+1$ мкКл на расстоянии $0{,}1$ м (в вакууме). Сила в Н?', ans:0.9, tol:0.05, hint:'$F = 9\\cdot10^9 \\cdot (10^{-6})^2/(0{,}1)^2 = 0{,}9$ Н.' },
{ q:'Заряды $+2$ нКл и $-3$ нКл на $r = 0{,}06$ м. Сила в мН?', ans:15, tol:1, hint:'$F = 9\\cdot10^9 \\cdot 6\\cdot10^{-18}/0{,}0036 = 0{,}015$ Н $= 15$ мН.' },
{ q:'При $r = 1$ м сила Кулона $F_0$. При каком $r$ (м) сила станет в $4$ раза меньше?', ans:2, tol:0.1, hint:'$F \\propto 1/r^2$; чтобы $F\\to F_0/4$, нужно $r \\to 2r_0 = 2$ м.' },
{ q:'В воде ($\\varepsilon = 81$) сила Кулона во сколько раз меньше, чем в вакууме (при тех же зарядах и $r$)?', ans:81, tol:2, hint:'$F = k|q_1q_2|/(\\varepsilon r^2)$ — делится на $\\varepsilon = 81$.' },
{ q:'Два электрона на $r = 10^{-10}$ м. Сила в Н? Введи мантиссу при $10^{-8}$.', ans:2.3, tol:0.3, hint:'$F = 9\\cdot10^9 \\cdot (1{,}6\\cdot10^{-19})^2/(10^{-10})^2 \\approx 2{,}3 \\cdot 10^{-8}$ Н.' },
];
let i = 0, score = 0;
function show(){
if(i >= Q.length){
document.getElementById('p17-iv4-q').innerHTML = '<b>Готово!</b> Результат: ' + score + ' / ' + Q.length;
if(score === Q.length){ addXp(15, 'p17-iv4'); bumpProgress('p17', 25); }
else if(score >= 3){ addXp(8, 'p17-iv4'); bumpProgress('p17', 15); }
return;
}
document.getElementById('p17-iv4-i').textContent = (i+1);
document.getElementById('p17-iv4-s').textContent = score;
document.getElementById('p17-iv4-q').innerHTML = Q[i].q;
document.getElementById('p17-iv4-ans').value = '';
renderMath(document.getElementById('p17-iv4-q'));
document.getElementById('p17-iv4-fb').style.display = 'none';
}
function go(){
if(i >= Q.length) return;
const fb = document.getElementById('p17-iv4-fb');
const raw = document.getElementById('p17-iv4-ans').value.replace(',', '.');
const ans = parseFloat(raw);
if(isNaN(ans)){ feedback(fb, false, '&#10007; Введи число.'); return; }
if(Math.abs(ans - Q[i].ans) <= Q[i].tol + 0.001){ score++; feedback(fb, true, '&#10003; Верно! '+Q[i].hint+' Дальше ▶'); }
else feedback(fb, false, '&#10007; Неверно. Ответ: $'+Q[i].ans+'$. '+Q[i].hint+' Дальше ▶');
document.getElementById('p17-iv4-s').textContent = score;
i++;
setTimeout(show, 1800);
}
document.getElementById('p17-iv4-go').addEventListener('click', go);
document.getElementById('p17-iv4-ans').addEventListener('keydown', e => { if(e.key === 'Enter') go(); });
document.getElementById('p17-iv4-start').addEventListener('click', () => { i = 0; score = 0; show(); });
show();
})();
wireReadBtn('p17');
}