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

feat(phys10 ch5 wave1): §27 «Магнитное поле тока» + §28 «Индукция»

Browse Source
This commit is contained in:
Maxim Dolgolyov
2026-05-29 18:03:50 +03:00
parent fb01e5aafb
commit 6087c814b3
1 changed files with 733 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/textbooks/physics_10_ch5.html
+733 -12
View File
@@ -652,34 +652,755 @@ function wireReadBtn(paraId){
function build_p27(){
const box = document.getElementById('p27-body');
let html = '';
html += makeCard('theory', "Магнитное поле тока", "§27", `
<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 5+:</b> наполнение этого § содержанием по учебнику «Физика 10» (Беларусь, 2019).
</p>
/* THEORY 1 — Магнитное поле и опыт Эрстеда */
html += makeCard('theory', "Магнитное поле и опыт Эрстеда", "§27", `
<p><b>Магнитное поле</b> — особый вид материи, возникающий вокруг движущихся электрических зарядов и магнитов. Действует на другие движущиеся заряды и магниты.</p>
<p style="margin-top:10px"><b>Открытие связи электричества и магнетизма.</b> В 1820 году датский физик обнаружил, что магнитная стрелка возле проводника с током <b>отклоняется</b>. Это доказало, что электрический ток создаёт магнитное поле.</p>
<p style="margin-top:10px">До этого опыта электричество и магнетизм считались разными явлениями. После — стало ясно, что это <b>разные проявления одного электромагнитного взаимодействия</b>.</p>
<p style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px"><b>Главная мысль.</b> Магнитное поле <b>создаётся движущимися зарядами</b> (током, движущимися частицами, постоянными магнитами) и <b>действует на движущиеся заряды</b> и магниты.</p>
`);
/* THEORY 2 — Источники и свойства поля */
html += makeCard('rule', "Источники и свойства поля", "§27", `
<p><b>Источники магнитного поля:</b></p>
<ul style="margin:6px 0 6px 22px">
<li><b>Постоянные магниты</b> (магнетит, ферриты, неодимовые магниты).</li>
<li><b>Проводники с током</b> (любые).</li>
<li><b>Движущиеся заряженные частицы</b>.</li>
<li><b>Земля</b> — гигантский магнит, создающий геомагнитное поле.</li>
</ul>
<p style="margin-top:10px"><b>Главные свойства:</b></p>
<ul style="margin:6px 0 6px 22px">
<li>Поле — <b>векторная</b> характеристика, обозначается $\\vec{B}$ — <b>магнитная индукция</b>.</li>
<li>Линии поля <b>замкнуты</b> (нет «магнитных зарядов» — северного или южного по отдельности).</li>
<li>Поле действует <b>только</b> на движущиеся заряды и магниты.</li>
</ul>
<p style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px"><b>Сравни.</b> Электрическое поле создают <b>любые</b> заряды (даже неподвижные). Магнитное — только <b>движущиеся</b>.</p>
`);
/* THEORY 3 — Взаимодействие проводников с током */
html += makeCard('example', "Взаимодействие двух проводников с током", "§27", `
<p><b>Опыт Ампера</b> (1820): два параллельных проводника с током <b>взаимодействуют</b>.</p>
<ul style="margin:6px 0 6px 22px">
<li><b>Параллельные токи</b> (в одном направлении) — <b>притягиваются</b>.</li>
<li><b>Антипараллельные токи</b> (в разных направлениях) — <b>отталкиваются</b>.</li>
</ul>
<p style="margin-top:10px">Это <b>противоположно</b> зарядам! (Одноимённые заряды отталкиваются, одноимённо направленные токи — притягиваются.)</p>
<p style="margin-top:10px"><b>Объяснение.</b> Первый проводник создаёт магнитное поле в области второго; это поле действует с силой на ток во втором проводнике. Эта сила называется <b>силой Ампера</b> (§29).</p>
<p style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px"><b>Определение Ампера через силу</b> (СИ): $1$ А — сила тока, при которой два параллельных проводника длиной $1$ м, расположенные на расстоянии $1$ м, взаимодействуют с силой $F = 2 \\cdot 10^{-7}$ Н.</p>
`);
/* INTERACTIVE 1 — Опыт Эрстеда */
html += `<div class="wg" id="p27-iv1">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 1</span><div class="wg-title">Опыт Эрстеда: ток отклоняет стрелку</div></div>
<div class="wg-help">Переключай ток в проводнике и смотри, как ведёт себя магнитная стрелка под ним. Без тока — стрелка показывает на север.</div>
<div style="display:flex;gap:8px;justify-content:center;margin-bottom:10px;flex-wrap:wrap">
<button class="btn" id="p27-iv1-off">Ток выкл.</button>
<button class="btn primary" id="p27-iv1-right">Ток вправо</button>
<button class="btn" id="p27-iv1-left">Ток влево</button>
</div>
<div style="background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px">
<svg id="p27-iv1-svg" viewBox="0 0 480 280" width="100%" style="height:auto"></svg>
</div>
<div id="p27-iv1-out" style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px;font-size:.94rem;line-height:1.65;text-align:center"></div>
</div>`;
/* INTERACTIVE 2 — Взаимодействие проводников */
html += `<div class="wg" id="p27-iv2">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">Два проводника: притяжение или отталкивание?</div></div>
<div class="wg-help">Переключай направление тока в каждом проводнике. Параллельные токи притягиваются, антипараллельные — отталкиваются.</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px">
<div style="text-align:center"><div style="font-size:.88rem;color:var(--muted);margin-bottom:4px">$I_1$ (слева)</div>
<button class="btn primary" id="p27-iv2-1up" style="margin:2px">Вверх ↑</button>
<button class="btn" id="p27-iv2-1dn" style="margin:2px">Вниз ↓</button>
</div>
<div style="text-align:center"><div style="font-size:.88rem;color:var(--muted);margin-bottom:4px">$I_2$ (справа)</div>
<button class="btn primary" id="p27-iv2-2up" style="margin:2px">Вверх ↑</button>
<button class="btn" id="p27-iv2-2dn" style="margin:2px">Вниз ↓</button>
</div>
</div>
<div style="background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px">
<svg id="p27-iv2-svg" viewBox="0 0 480 280" width="100%" style="height:auto"></svg>
</div>
<div id="p27-iv2-out" style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px;font-size:.94rem;line-height:1.65;text-align:center"></div>
</div>`;
/* INTERACTIVE 3 — Откуда берётся поле? */
html += `<div class="wg" id="p27-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="p27-iv3-i">1</b> / 6</span><span>Очки: <b id="p27-iv3-s">0</b> / 6</span></div>
<div id="p27-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="p27-iv3-opts" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px"></div>
<div class="feedback" id="p27-iv3-fb"></div>
<div class="actions"><button class="btn" id="p27-iv3-restart">Начать заново</button></div>
</div>`;
/* INTERACTIVE 4 — Тренажёр */
html += `<div class="wg" id="p27-iv4">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 4</span><div class="wg-title">Тренажёр: магнитное поле тока</div></div>
<div class="wg-help">5 вопросов на ключевые понятия §27.</div>
<div class="score-display"><span>Задача <b id="p27-iv4-i">1</b> / 5</span><span>Очки: <b id="p27-iv4-s">0</b> / 5</span></div>
<div id="p27-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 id="p27-iv4-opts" style="display:grid;grid-template-columns:1fr;gap:8px"></div>
<div class="feedback" id="p27-iv4-fb"></div>
<div class="actions"><button class="btn" id="p27-iv4-restart">Начать заново</button></div>
</div>`;
html += secNav(null, 'p28');
html += readButton('p27');
box.innerHTML = html;
renderMath(box);
/* IV1 — Опыт Эрстеда */
(function(){
const svg = document.getElementById('p27-iv1-svg');
const out = document.getElementById('p27-iv1-out');
const bOff = document.getElementById('p27-iv1-off');
const bR = document.getElementById('p27-iv1-right');
const bL = document.getElementById('p27-iv1-left');
const seen = new Set();
let _done = false;
let state = 'right'; // 'off' | 'right' | 'left'
function setState(s){
state = s;
[bOff,bR,bL].forEach(b => b.classList.remove('primary'));
({off:bOff, right:bR, left:bL}[s]).classList.add('primary');
render();
seen.add(s);
if(!_done && seen.size >= 3){ _done = true; addXp(10, 'p27-iv1'); bumpProgress('p27', 15); }
}
function render(){
const W = 480, H = 280;
let g = '';
g += '<rect x="0" y="0" width="'+W+'" height="'+H+'" fill="#fafafa"/>';
g += '<text x="240" y="22" text-anchor="middle" font-family="Inter,sans-serif" font-size="13" font-weight="700" fill="#0f172a">Опыт Эрстеда</text>';
// Провод горизонтальный
const wireY = 110;
g += '<line x1="40" y1="'+wireY+'" x2="440" y2="'+wireY+'" stroke="#0f172a" stroke-width="4" stroke-linecap="round"/>';
g += '<text x="50" y="'+(wireY-12)+'" font-family="Inter,sans-serif" font-size="12" fill="#0f172a">Проводник</text>';
// Стрелка направления тока на проводе
if(state === 'right'){
g += PHYS.drawArrow(180, wireY, 300, wireY, '#dc2626', 3, 14);
g += '<text x="240" y="'+(wireY-6)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="#dc2626">I →</text>';
} else if(state === 'left'){
g += PHYS.drawArrow(300, wireY, 180, wireY, '#dc2626', 3, 14);
g += '<text x="240" y="'+(wireY-6)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="#dc2626">← I</text>';
} else {
g += '<text x="240" y="'+(wireY-6)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="#64748b">I = 0</text>';
}
// Магнитная стрелка под проводом — крутится
const compassX = 240, compassY = 210;
const compassR = 42;
// По умолчанию (off) — север (вверх). При токе вправо — отклоняется влево (на нас, по правилу буравчика снизу). При токе влево — вправо.
let angle = 0; // 0 = север (вверх), измеряется по часовой стрелке
if(state === 'right') angle = -75; // отклонение влево
else if(state === 'left') angle = 75; // отклонение вправо
// Корпус компаса
g += '<circle cx="'+compassX+'" cy="'+compassY+'" r="'+compassR+'" fill="#fff" stroke="#0f172a" stroke-width="2"/>';
g += '<text x="'+compassX+'" y="'+(compassY-compassR-4)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#64748b">С</text>';
g += '<text x="'+compassX+'" y="'+(compassY+compassR+12)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#64748b">Ю</text>';
g += '<text x="'+(compassX-compassR-6)+'" y="'+(compassY+3)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#64748b">З</text>';
g += '<text x="'+(compassX+compassR+6)+'" y="'+(compassY+3)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#64748b">В</text>';
// Стрелка компаса (вращается)
const rad = angle * Math.PI / 180;
const nx = compassX + Math.sin(rad) * (compassR - 6);
const ny = compassY - Math.cos(rad) * (compassR - 6);
const sx = compassX - Math.sin(rad) * (compassR - 6);
const sy = compassY + Math.cos(rad) * (compassR - 6);
g += '<line x1="'+sx.toFixed(1)+'" y1="'+sy.toFixed(1)+'" x2="'+nx.toFixed(1)+'" y2="'+ny.toFixed(1)+'" stroke="#0f172a" stroke-width="2"/>';
// Северный конец — красный
g += '<polygon points="'+nx.toFixed(1)+','+ny.toFixed(1)+' '+(compassX + Math.sin(rad)*(compassR-22) - Math.cos(rad)*5).toFixed(1)+','+(compassY - Math.cos(rad)*(compassR-22) - Math.sin(rad)*5).toFixed(1)+' '+(compassX + Math.sin(rad)*(compassR-22) + Math.cos(rad)*5).toFixed(1)+','+(compassY - Math.cos(rad)*(compassR-22) + Math.sin(rad)*5).toFixed(1)+'" fill="#dc2626"/>';
// центр
g += '<circle cx="'+compassX+'" cy="'+compassY+'" r="3" fill="#0f172a"/>';
svg.innerHTML = g;
let txt = '';
if(state === 'off'){
txt = '<b>Ток выключен.</b> Стрелка показывает на север (магнитное поле Земли).';
} else if(state === 'right'){
txt = '<b>Ток вправо</b> → стрелка отклонилась влево. Проводник создал магнитное поле, повернувшее стрелку.';
} else {
txt = '<b>Ток влево</b> → стрелка отклонилась вправо. Смена направления тока — смена направления поля.';
}
out.innerHTML = txt;
}
bOff.addEventListener('click', () => setState('off'));
bR.addEventListener('click', () => setState('right'));
bL.addEventListener('click', () => setState('left'));
setState('right');
})();
/* IV2 — Взаимодействие проводников */
(function(){
const svg = document.getElementById('p27-iv2-svg');
const out = document.getElementById('p27-iv2-out');
const b1u = document.getElementById('p27-iv2-1up');
const b1d = document.getElementById('p27-iv2-1dn');
const b2u = document.getElementById('p27-iv2-2up');
const b2d = document.getElementById('p27-iv2-2dn');
const seen = new Set();
let _done = false;
let I1 = 'up', I2 = 'up';
function setI1(v){ I1 = v; b1u.classList.toggle('primary', v==='up'); b1d.classList.toggle('primary', v==='dn'); render(); }
function setI2(v){ I2 = v; b2u.classList.toggle('primary', v==='up'); b2d.classList.toggle('primary', v==='dn'); render(); }
function render(){
const W = 480, H = 280;
let g = '';
g += '<rect x="0" y="0" width="'+W+'" height="'+H+'" fill="#fafafa"/>';
g += '<text x="240" y="22" text-anchor="middle" font-family="Inter,sans-serif" font-size="13" font-weight="700" fill="#0f172a">Два параллельных проводника</text>';
// Два вертикальных провода
const x1 = 170, x2 = 310;
const yTop = 50, yBot = 230;
g += '<line x1="'+x1+'" y1="'+yTop+'" x2="'+x1+'" y2="'+yBot+'" stroke="#0f172a" stroke-width="4" stroke-linecap="round"/>';
g += '<line x1="'+x2+'" y1="'+yTop+'" x2="'+x2+'" y2="'+yBot+'" stroke="#0f172a" stroke-width="4" stroke-linecap="round"/>';
// Стрелки токов
if(I1 === 'up'){
g += PHYS.drawArrow(x1, yBot-20, x1, yTop+20, '#dc2626', 3, 12);
g += '<text x="'+(x1-22)+'" y="'+(yTop+12)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="#dc2626">I₁ ↑</text>';
} else {
g += PHYS.drawArrow(x1, yTop+20, x1, yBot-20, '#dc2626', 3, 12);
g += '<text x="'+(x1-22)+'" y="'+(yBot)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="#dc2626">I₁ ↓</text>';
}
if(I2 === 'up'){
g += PHYS.drawArrow(x2, yBot-20, x2, yTop+20, '#dc2626', 3, 12);
g += '<text x="'+(x2+22)+'" y="'+(yTop+12)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="#dc2626">I₂ ↑</text>';
} else {
g += PHYS.drawArrow(x2, yTop+20, x2, yBot-20, '#dc2626', 3, 12);
g += '<text x="'+(x2+22)+'" y="'+(yBot)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="#dc2626">I₂ ↓</text>';
}
// Силы взаимодействия
const sameDir = (I1 === I2);
const fY = 140;
if(sameDir){
// Притяжение: стрелки направлены друг к другу
g += PHYS.drawArrow(x1+8, fY, x1+58, fY, '#7c3aed', 3, 12);
g += PHYS.drawArrow(x2-8, fY, x2-58, fY, '#7c3aed', 3, 12);
g += '<text x="240" y="'+(fY-12)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="13" font-weight="800" fill="#7c3aed">Притяжение</text>';
g += '<text x="'+(x1+33)+'" y="'+(fY+18)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="12" font-weight="700" fill="#7c3aed">F</text>';
g += '<text x="'+(x2-33)+'" y="'+(fY+18)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="12" font-weight="700" fill="#7c3aed">F</text>';
} else {
// Отталкивание: стрелки направлены в стороны
g += PHYS.drawArrow(x1+8, fY, x1-42, fY, '#0ea5e9', 3, 12);
g += PHYS.drawArrow(x2-8, fY, x2+42, fY, '#0ea5e9', 3, 12);
g += '<text x="240" y="'+(fY-12)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="13" font-weight="800" fill="#0ea5e9">Отталкивание</text>';
g += '<text x="'+(x1-17)+'" y="'+(fY+18)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="12" font-weight="700" fill="#0ea5e9">F</text>';
g += '<text x="'+(x2+17)+'" y="'+(fY+18)+'" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="12" font-weight="700" fill="#0ea5e9">F</text>';
}
svg.innerHTML = g;
let txt = '';
if(sameDir){
txt = '<b>Токи параллельны (в одну сторону)</b> → проводники <b>притягиваются</b>.';
} else {
txt = '<b>Токи антипараллельны (в разные стороны)</b> → проводники <b>отталкиваются</b>.';
}
out.innerHTML = txt;
seen.add(I1+I2);
if(!_done && seen.size >= 4){ _done = true; addXp(10, 'p27-iv2'); bumpProgress('p27', 15); }
}
b1u.addEventListener('click', () => setI1('up'));
b1d.addEventListener('click', () => setI1('dn'));
b2u.addEventListener('click', () => setI2('up'));
b2d.addEventListener('click', () => setI2('dn'));
render();
})();
/* IV3 — Откуда берётся поле? */
(function(){
const OPTS = ['От постоянных магнитов','От движущихся зарядов','Не существует'];
const Q = [
{ q:'Возле железного магнита (на холодильнике).', ans:0, why:'Постоянный магнит — источник магнитного поля.' },
{ q:'Вокруг проводника, по которому течёт ток.', ans:1, why:'Ток — это движущиеся заряды, создающие поле.' },
{ q:'Возле неподвижного заряженного шарика в вакууме.', ans:2, why:'Неподвижный заряд создаёт только электрическое поле, магнитного нет.' },
{ q:'Вокруг Земли (геомагнитное поле).', ans:1, why:'Поле создаётся токами в жидком металлическом ядре Земли.' },
{ q:'Возле сверхпроводящего кольца без тока.', ans:2, why:'Без тока — нет движущихся зарядов, значит, нет и магнитного поля.' },
{ q:'Возле летящего на большой скорости протона.', ans:1, why:'Движущийся заряд — то же, что ток, и тоже создаёт магнитное поле.' }
];
let i = 0, score = 0;
const qEl = document.getElementById('p27-iv3-q');
const oEl = document.getElementById('p27-iv3-opts');
const fb = document.getElementById('p27-iv3-fb');
const iEl = document.getElementById('p27-iv3-i');
const sEl = document.getElementById('p27-iv3-s');
function show(){
if(i >= Q.length){
qEl.innerHTML = '<b>Готово!</b> Результат: ' + score + ' / ' + Q.length;
oEl.innerHTML = '';
if(score === Q.length){ addXp(15, 'p27-iv3'); bumpProgress('p27', 25); }
else if(score >= 4){ addXp(8, 'p27-iv3'); bumpProgress('p27', 15); }
return;
}
iEl.textContent = (i+1);
sEl.textContent = score;
qEl.innerHTML = Q[i].q;
oEl.innerHTML = OPTS.map((t, k) => '<button class="btn primary" data-v="' + k + '">' + t + '</button>').join('');
fb.style.display = 'none';
renderMath(qEl);
oEl.querySelectorAll('button').forEach(b => {
b.addEventListener('click', () => {
const v = +b.dataset.v;
if(v === Q[i].ans){ score++; feedback(fb, true, '&#10003; Верно! ' + Q[i].why + ' Дальше ▶'); }
else feedback(fb, false, '&#10007; Верно: ' + OPTS[Q[i].ans] + '. ' + Q[i].why + ' Дальше ▶');
sEl.textContent = score;
oEl.querySelectorAll('button').forEach(x => x.disabled = true);
i++;
setTimeout(show, 1800);
});
});
}
document.getElementById('p27-iv3-restart').addEventListener('click', () => { i = 0; score = 0; show(); });
show();
})();
/* IV4 — Тренажёр */
(function(){
const Q = [
{ q:'Магнитное поле создают:', opts:['любые заряды','движущиеся заряды','масса тел'], ans:1, why:'Только движущиеся заряды создают магнитное поле.' },
{ q:'Кто в 1820 году открыл связь электричества и магнетизма?', opts:['Ньютон','Эрстед','Фарадей'], ans:1, why:'Эрстед заметил отклонение магнитной стрелки возле проводника с током.' },
{ q:'Два параллельных проводника, токи в одну сторону. Что происходит?', opts:['притягиваются','отталкиваются','ничего'], ans:0, why:'Параллельные токи — притягиваются (опыт Ампера).' },
{ q:'Два проводника, токи в противоположных направлениях:', opts:['притягиваются','отталкиваются','ничего'], ans:1, why:'Антипараллельные токи — отталкиваются.' },
{ q:'Вектор магнитной индукции обозначается:', opts:['$\\vec{E}$','$\\vec{B}$','$\\vec{F}$'], ans:1, why:'$\\vec{E}$ — электрическое поле, $\\vec{F}$ — сила, $\\vec{B}$ — магнитная индукция.' }
];
let i = 0, score = 0;
const qEl = document.getElementById('p27-iv4-q');
const oEl = document.getElementById('p27-iv4-opts');
const fb = document.getElementById('p27-iv4-fb');
const iEl = document.getElementById('p27-iv4-i');
const sEl = document.getElementById('p27-iv4-s');
function show(){
if(i >= Q.length){
qEl.innerHTML = '<b>Готово!</b> Результат: ' + score + ' / ' + Q.length;
oEl.innerHTML = '';
if(score === Q.length){ addXp(15, 'p27-iv4'); bumpProgress('p27', 25); }
else if(score >= 3){ addXp(8, 'p27-iv4'); bumpProgress('p27', 15); }
return;
}
iEl.textContent = (i+1);
sEl.textContent = score;
qEl.innerHTML = Q[i].q;
oEl.innerHTML = Q[i].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 === Q[i].ans){ score++; feedback(fb, true, '&#10003; Верно! ' + Q[i].why + ' Дальше ▶'); }
else feedback(fb, false, '&#10007; Верно: ' + Q[i].opts[Q[i].ans] + '. ' + Q[i].why + ' Дальше ▶');
sEl.textContent = score;
oEl.querySelectorAll('button').forEach(x => x.disabled = true);
i++;
setTimeout(show, 1800);
});
});
}
document.getElementById('p27-iv4-restart').addEventListener('click', () => { i = 0; score = 0; show(); });
show();
})();
wireReadBtn('p27');
}
function build_p28(){
const box = document.getElementById('p28-body');
let html = '';
html += makeCard('theory', "Индукция магнитного поля", "§28", `
<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 5+:</b> наполнение этого § содержанием по учебнику «Физика 10» (Беларусь, 2019).
</p>
/* THEORY 1 — Магнитная индукция */
html += makeCard('theory', "Магнитная индукция $\\vec{B}$", "§28", `
<p><b>Магнитная индукция</b> $\\vec{B}$ — векторная характеристика магнитного поля. Определяет силу, действующую на движущуюся заряженную частицу или на проводник с током.</p>
<p><b>Единица</b> в СИ — <b>Тесла</b> (Тл):</p>
<p style="text-align:center;margin:8px 0">$$[B] = 1\\text{ Тл} = \\dfrac{1\\text{ Н}}{1\\text{ А}\\cdot 1\\text{ м}} = \\dfrac{1\\text{ кг}}{1\\text{ А}\\cdot 1\\text{ с}^2}$$</p>
<p style="margin-top:10px"><b>Порядки величин:</b></p>
<ul style="margin:6px 0 6px 22px">
<li>Магнитное поле Земли: $\\sim 5\\cdot 10^{-5}$ Тл.</li>
<li>Магнит холодильника: $\\sim 5\\cdot 10^{-3}$ Тл.</li>
<li>Сильный электромагнит: $\\sim 1-2$ Тл.</li>
<li>Сверхпроводящий магнит МРТ: $\\sim 3$ Тл и выше.</li>
</ul>
<p style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px"><b>Направление $\\vec{B}$</b>:
в постоянном магните <b>снаружи</b> — от северного (N) к южному (S); <b>внутри</b> магнита — от S к N. Линии замкнуты!</p>
`);
/* THEORY 2 — Правило буравчика */
html += makeCard('rule', "Правило буравчика (правой руки)", "§28", `
<p><b>Правило буравчика</b> определяет направление $\\vec{B}$ возле проводника с током.</p>
<p style="margin-top:8px">Возьми проводник правой рукой так, чтобы <b>большой палец</b> указывал по направлению тока. Остальные <b>пальцы</b> покажут направление $\\vec{B}$ (закручивается вокруг проводника).</p>
<p style="margin-top:10px"><b>Альтернатива</b>: представь штопор (буравчик), который вкручивается в направлении тока — ручка вращается в направлении $\\vec{B}$.</p>
<p style="margin-top:10px"><b>Линии магнитной индукции вокруг прямого проводника</b>: <b>концентрические окружности</b> в плоскости, перпендикулярной проводнику.</p>
<p style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px"><b>Свойства линий индукции:</b></p>
<ol style="margin:6px 0 6px 22px">
<li><b>Замкнуты</b> — главное отличие от электрических линий (магнитных монополей не существует).</li>
<li>Не пересекаются.</li>
<li>Густота линий $\\propto B$ (чем гуще, тем сильнее поле).</li>
<li>Направлены от N к S снаружи магнита.</li>
</ol>
`);
/* THEORY 3 — Поле кругового тока и соленоида */
html += makeCard('example', "Поле кругового тока и соленоида", "§28", `
<p><b>Поле кругового тока</b> (витка): линии индукции образуют картину, похожую на поле магнитного диполя. Виток ведёт себя как <b>маленький магнит</b>:</p>
<ul style="margin:6px 0 6px 22px">
<li>Одна сторона — N (магнитные линии выходят).</li>
<li>Другая сторона — S (входят).</li>
</ul>
<p style="margin-top:10px"><b>Соленоид</b> — катушка из многих витков. Поле <b>внутри</b>:</p>
<ul style="margin:6px 0 6px 22px">
<li>Почти <b>однородное</b> (одинаковое по величине и направлению).</li>
<li>Очень похоже на поле в постоянном магните.</li>
<li>Направление — правило правой руки для тока в витках.</li>
</ul>
<p style="margin-top:10px">Модуль индукции внутри длинного соленоида:</p>
<p style="text-align:center;margin:8px 0">$$B = \\dfrac{\\mu_0 N I}{L}$$</p>
<p>где $N$ — число витков, $L$ — длина соленоида, $\\mu_0 = 4\\pi \\cdot 10^{-7}$ Тл·м/А — <b>магнитная постоянная</b>.</p>
<p style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px"><b>Электромагнит</b> — соленоид + железный сердечник. Сердечник усиливает поле в сотни и тысячи раз. Применение: моторы, реле, динамики, МРТ-сканеры, ускорители частиц, левитирующие поезда.</p>
`);
/* INTERACTIVE 1 — Правило буравчика */
html += `<div class="wg" id="p28-iv1">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 1</span><div class="wg-title">Правило буравчика: $\\vec{B}$ возле проводника</div></div>
<div class="wg-help">Переключай направление тока. Смотри, как меняется направление линий $\\vec{B}$ (вид сверху, ток идёт сквозь экран).</div>
<div style="display:flex;gap:8px;justify-content:center;margin-bottom:10px;flex-wrap:wrap">
<button class="btn primary" id="p28-iv1-out">Ток ИЗ экрана (•)</button>
<button class="btn" id="p28-iv1-in">Ток В экран (×)</button>
</div>
<div style="background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px">
<svg id="p28-iv1-svg" viewBox="0 0 480 280" width="100%" style="height:auto"></svg>
</div>
<div id="p28-iv1-out-txt" style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft);border-radius:9px;font-size:.94rem;line-height:1.65;text-align:center"></div>
</div>`;
/* INTERACTIVE 2 — Соленоид */
html += `<div class="wg" id="p28-iv2">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">Магнитное поле соленоида</div></div>
<div class="wg-help">Меняй ток $I$ и число витков $N$. Длина соленоида $L = 0{,}1$ м. Формула: $B = \\mu_0 N I / L$.</div>
<div class="sliders">
<label>$I$: <b id="p28-iv2-IL">2.0</b> А <input type="range" id="p28-iv2-I" min="0" max="5" value="2" step="0.1"></label>
<label>$N$: <b id="p28-iv2-NL">50</b> витков <input type="range" id="p28-iv2-N" min="10" max="100" value="50" step="1"></label>
</div>
<div style="background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px">
<svg id="p28-iv2-svg" viewBox="0 0 480 280" width="100%" style="height:auto"></svg>
</div>
<div id="p28-iv2-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 3 — Куда направлено B? */
html += `<div class="wg" id="p28-iv3">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 3</span><div class="wg-title">Куда направлено $\\vec{B}$?</div></div>
<div class="wg-help">Выбери, как определяется (или существует ли вообще) магнитное поле в каждой ситуации.</div>
<div class="score-display"><span>Задача <b id="p28-iv3-i">1</b> / 6</span><span>Очки: <b id="p28-iv3-s">0</b> / 6</span></div>
<div id="p28-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="p28-iv3-opts" style="display:grid;grid-template-columns:1fr 1fr;gap:8px"></div>
<div class="feedback" id="p28-iv3-fb"></div>
<div class="actions"><button class="btn" id="p28-iv3-restart">Начать заново</button></div>
</div>`;
/* INTERACTIVE 4 — Тренажёр */
html += `<div class="wg" id="p28-iv4">
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 4</span><div class="wg-title">Тренажёр: индукция магнитного поля</div></div>
<div class="wg-help">5 вопросов на ключевые понятия §28.</div>
<div class="score-display"><span>Задача <b id="p28-iv4-i">1</b> / 5</span><span>Очки: <b id="p28-iv4-s">0</b> / 5</span></div>
<div id="p28-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 id="p28-iv4-opts" style="display:grid;grid-template-columns:1fr;gap:8px"></div>
<div class="feedback" id="p28-iv4-fb"></div>
<div class="actions"><button class="btn" id="p28-iv4-restart">Начать заново</button></div>
</div>`;
html += secNav('p27', 'p29');
html += readButton('p28');
box.innerHTML = html;
renderMath(box);
/* IV1 — Правило буравчика */
(function(){
const svg = document.getElementById('p28-iv1-svg');
const out = document.getElementById('p28-iv1-out-txt');
const bOut = document.getElementById('p28-iv1-out');
const bIn = document.getElementById('p28-iv1-in');
const seen = new Set();
let _done = false;
let dir = 'out'; // 'out' or 'in'
function setDir(d){
dir = d;
bOut.classList.toggle('primary', d==='out');
bIn.classList.toggle('primary', d==='in');
render();
seen.add(d);
if(!_done && seen.size >= 2){ _done = true; addXp(10, 'p28-iv1'); bumpProgress('p28', 15); }
}
function render(){
const W = 480, H = 280;
let g = '';
g += '<rect x="0" y="0" width="'+W+'" height="'+H+'" fill="#fafafa"/>';
g += '<text x="240" y="22" text-anchor="middle" font-family="Inter,sans-serif" font-size="13" font-weight="700" fill="#0f172a">Поле прямого тока (вид вдоль проводника)</text>';
// Центральный проводник
const cx = 240, cy = 150;
const wireColor = '#0f172a';
// Концентрические окружности — линии B
const rings = [40, 70, 100, 130];
const Bcolor = '#7c3aed';
rings.forEach(r => {
g += '<circle cx="'+cx+'" cy="'+cy+'" r="'+r+'" fill="none" stroke="'+Bcolor+'" stroke-width="1.5" opacity=".55"/>';
});
// Стрелки касательные к окружностям — направление B по правилу буравчика
// При токе ИЗ экрана (•) — B по часовой стрелке снизу? Нет: правая рука, большой палец на нас (out), пальцы — против часовой стрелки.
// Считаю: ток OUT (на наблюдателя) → B против часовой стрелки.
// ток IN (от наблюдателя) → B по часовой стрелке.
const ccw = (dir === 'out');
const arrowAngles = [0, Math.PI/2, Math.PI, 3*Math.PI/2]; // 4 стрелки на каждой окружности
rings.forEach((r, idx) => {
if(idx % 2 !== 0) return; // только на двух окружностях
arrowAngles.forEach((a, k) => {
const ax = cx + r * Math.cos(a);
const ay = cy + r * Math.sin(a);
// Касательный вектор
const tx = -Math.sin(a) * (ccw ? -1 : 1);
const ty = Math.cos(a) * (ccw ? -1 : 1);
const len = 16;
const x2 = ax + tx * len;
const y2 = ay + ty * len;
g += PHYS.drawArrow(ax, ay, x2, y2, Bcolor, 2, 8);
});
});
// Проводник в центре — крест или точка
g += '<circle cx="'+cx+'" cy="'+cy+'" r="14" fill="white" stroke="'+wireColor+'" stroke-width="2.4"/>';
if(dir === 'in'){
// Крест ×
g += '<line x1="'+(cx-8)+'" y1="'+(cy-8)+'" x2="'+(cx+8)+'" y2="'+(cy+8)+'" stroke="'+wireColor+'" stroke-width="3"/>';
g += '<line x1="'+(cx-8)+'" y1="'+(cy+8)+'" x2="'+(cx+8)+'" y2="'+(cy-8)+'" stroke="'+wireColor+'" stroke-width="3"/>';
} else {
// Точка •
g += '<circle cx="'+cx+'" cy="'+cy+'" r="4" fill="'+wireColor+'"/>';
}
// Подпись
const lbl = dir === 'out' ? 'Ток I из экрана (•)' : 'Ток I в экран (×)';
g += '<text x="'+cx+'" y="'+(cy+45)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="12" font-weight="700" fill="'+wireColor+'">'+lbl+'</text>';
// Подпись B
g += '<text x="'+(cx + 150)+'" y="'+(cy)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="14" font-weight="800" fill="'+Bcolor+'">B</text>';
svg.innerHTML = g;
let txt = '';
if(dir === 'out'){
txt = '<b>Ток направлен ИЗ экрана</b> (на тебя). Правило буравчика: большой палец на тебя → линии $\\vec{B}$ <b>против часовой стрелки</b>.';
} else {
txt = '<b>Ток направлен В экран</b> (от тебя). Правило буравчика: большой палец от тебя → линии $\\vec{B}$ <b>по часовой стрелке</b>.';
}
out.innerHTML = txt;
renderMath(out);
}
bOut.addEventListener('click', () => setDir('out'));
bIn.addEventListener('click', () => setDir('in'));
setDir('out');
})();
/* IV2 — Соленоид */
(function(){
const svg = document.getElementById('p28-iv2-svg');
const out = document.getElementById('p28-iv2-out');
const IS = document.getElementById('p28-iv2-I');
const NS = document.getElementById('p28-iv2-N');
const IL = document.getElementById('p28-iv2-IL');
const NL = document.getElementById('p28-iv2-NL');
const seen = new Set();
let _done = false;
function render(){
const I = +IS.value, N = +NS.value;
IL.textContent = I.toFixed(1);
NL.textContent = N.toFixed(0);
const L = 0.1; // м
const mu0 = 4 * Math.PI * 1e-7;
const B = mu0 * N * I / L;
const W = 480, H = 280;
let g = '';
g += '<rect x="0" y="0" width="'+W+'" height="'+H+'" fill="#fafafa"/>';
g += '<text x="240" y="22" text-anchor="middle" font-family="Inter,sans-serif" font-size="13" font-weight="700" fill="#0f172a">Соленоид: однородное поле внутри</text>';
// Соленоид — нарисуем как ряд овалов (витков) горизонтально
const cy = 145;
const xL = 90, xR = 390;
const numVisible = Math.min(20, Math.max(5, Math.round(N/5)));
const stepX = (xR - xL) / (numVisible - 1);
const Bcolor = '#7c3aed';
// Корпус соленоида
g += '<rect x="'+xL+'" y="'+(cy-40)+'" width="'+(xR-xL)+'" height="80" fill="rgba(124,58,237,0.05)" stroke="#94a3b8" stroke-width="1.4" stroke-dasharray="4 3"/>';
// Витки как петли
for(let i = 0; i < numVisible; i++){
const x = xL + i * stepX;
g += '<ellipse cx="'+x+'" cy="'+cy+'" rx="6" ry="35" fill="none" stroke="#0f172a" stroke-width="1.6"/>';
// Точка на верхушке (ток на нас) или крест внизу (от нас) — упрощённо
g += '<circle cx="'+x+'" cy="'+(cy-35)+'" r="2.5" fill="#dc2626"/>';
// Крест внизу
g += '<line x1="'+(x-3)+'" y1="'+(cy+33)+'" x2="'+(x+3)+'" y2="'+(cy+37)+'" stroke="#dc2626" stroke-width="1.2"/>';
g += '<line x1="'+(x-3)+'" y1="'+(cy+37)+'" x2="'+(x+3)+'" y2="'+(cy+33)+'" stroke="#dc2626" stroke-width="1.2"/>';
}
// Внутреннее поле — стрелки слева направо (зависит от направления намотки, считаем что N справа)
if(I > 0.01){
const nArrows = 5;
for(let k = 0; k < nArrows; k++){
const ax = xL + 30 + k * ((xR-xL-60)/(nArrows-1));
const arrowLen = Math.min(50, 20 + (B * 1e3) * 8);
g += PHYS.drawArrow(ax - arrowLen/2, cy, ax + arrowLen/2, cy, Bcolor, 2.5, 10);
}
// Подписи полюсов
g += '<text x="'+(xL-18)+'" y="'+(cy+5)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="16" font-weight="800" fill="#0ea5e9">S</text>';
g += '<text x="'+(xR+18)+'" y="'+(cy+5)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="16" font-weight="800" fill="#dc2626">N</text>';
// Линии поля снаружи (упрощённо — две дуги)
g += '<path d="M '+xR+' '+(cy-35)+' Q '+(xR+60)+' '+(cy-90)+' '+(xL+ (xR-xL)/2)+' '+(cy-100)+' Q '+(xL-60)+' '+(cy-90)+' '+xL+' '+(cy-35)+'" fill="none" stroke="'+Bcolor+'" stroke-width="1.4" opacity=".55"/>';
g += '<path d="M '+xR+' '+(cy+35)+' Q '+(xR+60)+' '+(cy+90)+' '+(xL+ (xR-xL)/2)+' '+(cy+100)+' Q '+(xL-60)+' '+(cy+90)+' '+xL+' '+(cy+35)+'" fill="none" stroke="'+Bcolor+'" stroke-width="1.4" opacity=".55"/>';
} else {
g += '<text x="240" y="'+(cy+5)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="13" fill="#64748b">I = 0 → поля нет</text>';
}
// Метка B
if(I > 0.01) g += '<text x="240" y="'+(cy-50)+'" text-anchor="middle" font-family="Inter,sans-serif" font-size="14" font-weight="800" fill="'+Bcolor+'">B</text>';
svg.innerHTML = g;
out.innerHTML = '<b>$B = \\dfrac{\\mu_0 N I}{L} = \\dfrac{4\\pi\\cdot 10^{-7}\\cdot '+N.toFixed(0)+'\\cdot '+I.toFixed(2)+'}{0{,}1} = '+B.toExponential(2).replace('e','\\cdot 10^{').replace('+','')+'}$ Тл</b>';
renderMath(out);
seen.add(I.toFixed(1)+':'+N.toFixed(0));
if(!_done && seen.size >= 4){ _done = true; addXp(10, 'p28-iv2'); bumpProgress('p28', 15); }
}
IS.addEventListener('input', render);
NS.addEventListener('input', render);
render();
})();
/* IV3 — Куда направлено B? */
(function(){
const OPTS = ['От N к S','По правилу буравчика','От заряда','$\\vec{B} = 0$'];
const Q = [
{ q:'Снаружи постоянного магнита (вне корпуса).', ans:0, why:'Снаружи магнита линии $\\vec{B}$ идут от северного полюса к южному.' },
{ q:'Возле прямого проводника с током.', ans:1, why:'Используем правило правой руки (буравчика).' },
{ q:'Внутри сверхпроводящего кольца без тока.', ans:3, why:'Нет тока — нет источника поля, $\\vec{B} = 0$.' },
{ q:'В вакууме вдали от любых источников.', ans:3, why:'Без источников $\\vec{B} = 0$.' },
{ q:'Внутри соленоида с током.', ans:1, why:'Направление определяется правилом правой руки для тока в витках.' },
{ q:'В точке посередине между двумя одинаковыми параллельными токами одного направления.', ans:3, why:'Поля от двух проводников в этой точке направлены противоположно и взаимно компенсируются.' }
];
let i = 0, score = 0;
const qEl = document.getElementById('p28-iv3-q');
const oEl = document.getElementById('p28-iv3-opts');
const fb = document.getElementById('p28-iv3-fb');
const iEl = document.getElementById('p28-iv3-i');
const sEl = document.getElementById('p28-iv3-s');
function show(){
if(i >= Q.length){
qEl.innerHTML = '<b>Готово!</b> Результат: ' + score + ' / ' + Q.length;
oEl.innerHTML = '';
if(score === Q.length){ addXp(15, 'p28-iv3'); bumpProgress('p28', 25); }
else if(score >= 4){ addXp(8, 'p28-iv3'); bumpProgress('p28', 15); }
return;
}
iEl.textContent = (i+1);
sEl.textContent = score;
qEl.innerHTML = Q[i].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 === Q[i].ans){ score++; feedback(fb, true, '&#10003; Верно! ' + Q[i].why + ' Дальше ▶'); }
else feedback(fb, false, '&#10007; Верно: ' + OPTS[Q[i].ans] + '. ' + Q[i].why + ' Дальше ▶');
sEl.textContent = score;
oEl.querySelectorAll('button').forEach(x => x.disabled = true);
i++;
setTimeout(show, 1800);
});
});
}
document.getElementById('p28-iv3-restart').addEventListener('click', () => { i = 0; score = 0; show(); });
show();
})();
/* IV4 — Тренажёр */
(function(){
const Q = [
{ q:'Единица измерения магнитной индукции в СИ:', opts:['Тесла (Тл)','Вольт (В)','Ампер (А)'], ans:0, why:'$1$ Тл $= 1$ Н/(А·м).' },
{ q:'Магнитное поле Земли по порядку величины (в Тл):', opts:['$5\\cdot 10^{-5}$','$5\\cdot 10^{-2}$','$5\\cdot 10^{1}$'], ans:0, why:'Геомагнитное поле слабое: $\\sim 5\\cdot 10^{-5}$ Тл.' },
{ q:'Направление $\\vec{B}$ возле прямого проводника находят:', opts:['по закону Ома','по правилу буравчика','по второму закону Ньютона'], ans:1, why:'Правило правой руки (буравчика): большой палец — по току, пальцы — по $\\vec{B}$.' },
{ q:'Коэффициент $\\mu_0$ в формуле $B = \\mu_0 N I / L$ равен:', opts:['$4\\pi\\cdot 10^{-7}$ Тл·м/А','$8{,}85\\cdot 10^{-12}$ Ф/м','$9\\cdot 10^{9}$ Н·м²/Кл²'], ans:0, why:'$\\mu_0 = 4\\pi\\cdot 10^{-7}$ Тл·м/А — магнитная постоянная.' },
{ q:'Линии магнитной индукции замкнуты, потому что:', opts:['поле слабое','магнитных монополей не существует','так удобно рисовать'], ans:1, why:'В природе нет отдельных «северных» или «южных» зарядов, поэтому линии $\\vec{B}$ всегда замкнуты.' }
];
let i = 0, score = 0;
const qEl = document.getElementById('p28-iv4-q');
const oEl = document.getElementById('p28-iv4-opts');
const fb = document.getElementById('p28-iv4-fb');
const iEl = document.getElementById('p28-iv4-i');
const sEl = document.getElementById('p28-iv4-s');
function show(){
if(i >= Q.length){
qEl.innerHTML = '<b>Готово!</b> Результат: ' + score + ' / ' + Q.length;
oEl.innerHTML = '';
if(score === Q.length){ addXp(15, 'p28-iv4'); bumpProgress('p28', 25); }
else if(score >= 3){ addXp(8, 'p28-iv4'); bumpProgress('p28', 15); }
return;
}
iEl.textContent = (i+1);
sEl.textContent = score;
qEl.innerHTML = Q[i].q;
oEl.innerHTML = Q[i].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 === Q[i].ans){ score++; feedback(fb, true, '&#10003; Верно! ' + Q[i].why + ' Дальше ▶'); }
else feedback(fb, false, '&#10007; Верно: ' + Q[i].opts[Q[i].ans] + '. ' + Q[i].why + ' Дальше ▶');
sEl.textContent = score;
oEl.querySelectorAll('button').forEach(x => x.disabled = true);
i++;
setTimeout(show, 1800);
});
});
}
document.getElementById('p28-iv4-restart').addEventListener('click', () => { i = 0; score = 0; show(); });
show();
})();
wireReadBtn('p28');
}