Maxim Dolgolyov
dfe26a4771
Tracker проверяет 'LS.getToken()' перед каждым POST'ом. Без api.js объект LS undefined, и tracker возвращает из syncToServer ничего не делая. Поэтому в physics8_thermal/electro/optics прогресс не писался вообще (ни last_para, ни mark_read). Добавил <script src="/js/api.js" defer> перед xp.js во все 3 файла. Chemistry-9 и physics-9 не затронуты — у них api.js уже подключён в конце body перед tracker'ом.
5843 lines
388 KiB
HTML
5843 lines
388 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" id="root">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Физика 8 — Электромагнитные явления</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
|
||
<script src="/js/api.js" defer></script>
|
||
<script src="/js/xp.js" defer></script>
|
||
<script src="/js/textbook-tracker.js" defer></script>
|
||
<script src="/js/textbook-xp-widget.js" defer></script>
|
||
<style>
|
||
/* ═══════════ ДИЗАЙН-ТОКЕНЫ v2 ═══════════ */
|
||
:root{
|
||
/* Палитра — 9 ступеней */
|
||
--pri-50:#eff6ff; --pri-100:#dbeafe; --pri-200:#bfdbfe; --pri-300:#93c5fd;
|
||
--pri-400:#60a5fa; --pri-500:#3b82f6; --pri-600:#2563eb; --pri-700:#1d4ed8;
|
||
--pri-800:#1e40af; --pri-900:#1e3a8a;
|
||
--acc-300:#a5b4fc; --acc-400:#818cf8; --acc-500:#6366f1; --acc-600:#4f46e5; --acc-700:#4338ca;
|
||
--pri:var(--pri-600); --acc:var(--acc-500);
|
||
|
||
/* Статусы */
|
||
--ok:#16a34a; --ok-bg:#dcfce7; --ok-border:#86efac;
|
||
--fail:#dc2626; --fail-bg:#fee2e2; --fail-border:#fca5a5;
|
||
--warn:#d97706; --warn-bg:#fef3c7;
|
||
|
||
/* Поверхности */
|
||
--bg:#eff6ff; --card:#fff;
|
||
--surface-1:#ffffff; --surface-2:#eff6ff; --surface-3:#dbeafe;
|
||
--text:#1e293b; --muted:#64748b; --border:#dbeafe;
|
||
--glass-bg:rgba(255,255,255,.65); --glass-border:rgba(255,255,255,.4);
|
||
|
||
/* Тени и свечение */
|
||
--sh:0 2px 10px rgba(37,99,235,.08);
|
||
--shadow-sm:0 1px 2px rgba(15,23,42,.06);
|
||
--shadow-md:0 4px 14px rgba(15,23,42,.08);
|
||
--shadow-lg:0 12px 32px rgba(15,23,42,.10);
|
||
--shadow-glow:0 0 24px rgba(37,99,235,.25);
|
||
--shadow-pop:0 8px 22px rgba(37,99,235,.16);
|
||
|
||
/* Радиусы */
|
||
--r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
|
||
|
||
/* Анимации */
|
||
--ease:cubic-bezier(.4,0,.2,1);
|
||
--ease-out:cubic-bezier(.16,1,.3,1);
|
||
--ease-bounce:cubic-bezier(.34,1.56,.64,1);
|
||
--dur-1:.16s; --dur-2:.22s; --dur-3:.36s; --dur-4:.56s;
|
||
}
|
||
html.dark{
|
||
--bg:#0f172a; --card:#1e293b;
|
||
--surface-1:#1e293b; --surface-2:#0f172a; --surface-3:#1e3a5f;
|
||
--text:#e2e8f0; --muted:#94a3b8; --border:#1e3a5f;
|
||
--glass-bg:rgba(30,41,59,.6); --glass-border:rgba(255,255,255,.08);
|
||
--ok:#22c55e; --ok-bg:rgba(34,197,94,.12); --ok-border:rgba(34,197,94,.3);
|
||
--fail:#f87171; --fail-bg:rgba(248,113,113,.12); --fail-border:rgba(248,113,113,.3);
|
||
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
|
||
--shadow-md:0 4px 14px rgba(0,0,0,.5);
|
||
--shadow-lg:0 12px 32px rgba(0,0,0,.6);
|
||
--shadow-glow:0 0 28px rgba(96,165,250,.35);
|
||
--shadow-pop:0 8px 22px rgba(37,99,235,.4);
|
||
}
|
||
@media (prefers-reduced-motion: reduce){
|
||
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:'Outfit',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}
|
||
::-webkit-scrollbar{width:5px;height:5px}
|
||
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
|
||
|
||
/* ═══════════ PARA-HERO ═══════════ */
|
||
.para-hero{border-radius:18px;padding:22px 24px;margin-bottom:22px;color:#fff;position:relative;overflow:hidden}
|
||
.para-hero::after{content:'';position:absolute;right:-30px;top:-30px;width:160px;height:160px;
|
||
border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none}
|
||
.ph-num{font-size:.72rem;font-weight:700;opacity:.75;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
|
||
.ph-title{font-size:1.15rem;font-weight:900;line-height:1.3}
|
||
.ph-12{background:linear-gradient(135deg,#b45309,#f59e0b)}
|
||
.ph-12::after{background:#fde68a}
|
||
.ph-13{background:linear-gradient(135deg,#9d174d,#ec4899)}
|
||
.ph-13::after{background:#fbcfe8}
|
||
.ph-14{background:linear-gradient(135deg,#0e7490,#22d3ee);color:#1c1917}
|
||
.ph-14::after{background:#a5f3fc}
|
||
.ph-15{background:linear-gradient(135deg,#3730a3,#818cf8)}
|
||
.ph-15::after{background:#c7d2fe}
|
||
.ph-16{background:linear-gradient(135deg,#6d28d9,#c4b5fd)}
|
||
.ph-16::after{background:#ede9fe}
|
||
.ph-17{background:linear-gradient(135deg,#1d4ed8,#60a5fa)}
|
||
.ph-17::after{background:#bfdbfe}
|
||
.ph-18{background:linear-gradient(135deg,#0369a1,#38bdf8)}
|
||
.ph-18::after{background:#bae6fd}
|
||
.ph-19{background:linear-gradient(135deg,#92400e,#fbbf24)}
|
||
.ph-19::after{background:#fde68a}
|
||
.ph-20{background:linear-gradient(135deg,#c2410c,#fb923c)}
|
||
.ph-20::after{background:#ffedd5}
|
||
.ph-21{background:linear-gradient(135deg,#065f46,#34d399)}
|
||
.ph-21::after{background:#a7f3d0}
|
||
.ph-22{background:linear-gradient(135deg,#1e3a8a,#3b82f6)}
|
||
.ph-22::after{background:#bfdbfe}
|
||
.ph-23{background:linear-gradient(135deg,#374151,#9ca3af)}
|
||
.ph-23::after{background:#e7e5e4}
|
||
.ph-24{background:linear-gradient(135deg,#164e63,#67e8f9);color:#1c1917}
|
||
.ph-24::after{background:#cffafe}
|
||
.ph-25{background:linear-gradient(135deg,#0c4a6e,#7dd3fc)}
|
||
.ph-25::after{background:#e0f2fe}
|
||
.ph-26{background:linear-gradient(135deg,#78350f,#d97706)}
|
||
.ph-26::after{background:#fde68a}
|
||
.ph-27{background:linear-gradient(135deg,#166534,#4ade80)}
|
||
.ph-27::after{background:#bbf7d0}
|
||
.ph-28{background:linear-gradient(135deg,#0f2027,#2c5364)}
|
||
.ph-28::after{background:#a5f3fc}
|
||
.ph-29{background:linear-gradient(135deg,#2e1065,#7c3aed)}
|
||
.ph-29::after{background:#ede9fe}
|
||
.ph-30{background:linear-gradient(135deg,#1e1b4b,#4338ca)}
|
||
.ph-30::after{background:#c7d2fe}
|
||
.ph-31{background:linear-gradient(135deg,#064e3b,#0891b2)}
|
||
.ph-31::after{background:#a7f3d0}
|
||
|
||
/* ═══════════ ТЕОРИЯ ═══════════ */
|
||
.section-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
|
||
color:var(--pri);display:flex;align-items:center;gap:8px;margin-bottom:16px}
|
||
.section-title::before{content:'';display:block;width:16px;height:2px;background:var(--pri);border-radius:1px}
|
||
.def-box{background:rgba(29,78,216,.05);border-left:4px solid var(--pri);border-radius:10px;
|
||
padding:12px 16px;margin-bottom:16px;font-size:.88rem;line-height:1.8}
|
||
html.dark .def-box{background:rgba(29,78,216,.09)}
|
||
.formula-box{background:var(--card);border:2px solid var(--border);border-radius:14px;
|
||
padding:16px 20px;margin-bottom:16px;box-shadow:var(--sh)}
|
||
.formula-box .main-f{font-size:1.05rem;font-weight:700;text-align:center;padding:10px;
|
||
background:rgba(29,78,216,.06);border-radius:8px;margin:8px 0}
|
||
html.dark .formula-box .main-f{background:rgba(29,78,216,.12)}
|
||
.info-row{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;
|
||
background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;font-size:.85rem;line-height:1.7}
|
||
.ovr-card{background:var(--card);border:1px solid var(--border);border-radius:14px;
|
||
padding:16px 18px;margin-bottom:14px;box-shadow:var(--sh)}
|
||
|
||
/* ═══════════ CANVAS ═══════════ */
|
||
canvas{width:100%;border-radius:10px;background:var(--card);display:block}
|
||
.ctrl-row{display:flex;align-items:center;gap:10px;margin:8px 0;flex-wrap:wrap;font-size:.83rem}
|
||
.slider-row{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:.82rem;flex-wrap:wrap}
|
||
.slider-lbl{min-width:100px;font-weight:600;color:var(--text);flex-shrink:0}
|
||
.slider-val{min-width:72px;font-weight:800;color:var(--pri);font-family:monospace;font-size:.82rem}
|
||
input[type=range]{flex:1;min-width:100px;accent-color:var(--pri);cursor:pointer}
|
||
|
||
/* ═══════════ ЗАДАЧИ: ПИЛЮЛИ ═══════════ */
|
||
.para-pills{display:flex;flex-wrap:wrap;gap:6px;padding:14px;background:var(--card);
|
||
border-bottom:1px solid var(--border);border-radius:14px 14px 0 0;margin-bottom:0}
|
||
.para-pill{padding:6px 13px;border:2px solid var(--border);border-radius:9px;font-size:.72rem;
|
||
font-weight:700;cursor:pointer;white-space:nowrap;background:var(--card);color:var(--muted);transition:.16s}
|
||
.para-pill:hover{border-color:var(--pri);color:var(--pri)}
|
||
.para-pill.active{background:var(--pri);color:#fff;border-color:var(--pri)}
|
||
|
||
/* ═══════════ ЗАДАЧИ: ДВИЖОК ═══════════ */
|
||
.score-bar{display:flex;gap:10px;align-items:center;margin-bottom:12px;font-size:.85rem;font-weight:600;flex-wrap:wrap}
|
||
.chip{padding:5px 13px;border-radius:50px;display:inline-flex;align-items:center;gap:5px}
|
||
.chip-ok{background:var(--ok-bg);color:#166534}
|
||
html.dark .chip-ok{color:#86efac}
|
||
.chip-tot{background:var(--card);color:var(--muted);border:1px solid var(--border)}
|
||
.prog-wrap{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:14px}
|
||
.prog-fill{height:100%;background:linear-gradient(90deg,var(--pri),var(--acc));border-radius:3px;transition:width .4s}
|
||
.nav-dots{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
|
||
.nav-dot{min-width:30px;height:30px;padding:0 6px;border-radius:7px;border:2px solid var(--border);
|
||
background:var(--card);font-size:.72rem;font-weight:700;cursor:pointer;display:grid;place-items:center;
|
||
transition:.15s;color:var(--muted);font-family:monospace}
|
||
.nav-dot:hover{border-color:var(--pri);color:var(--pri)}
|
||
.nav-dot.nd-cur{background:var(--pri);border-color:var(--pri);color:#fff}
|
||
.nav-dot.nd-ok{background:var(--ok-bg);border-color:var(--ok);color:#166534}
|
||
.nav-dot.nd-fail{background:var(--fail-bg);border-color:var(--fail);color:#991b1b}
|
||
.task-card{background:var(--card);border:1px solid var(--border);border-radius:14px;
|
||
padding:20px 22px;box-shadow:var(--sh);margin-bottom:12px}
|
||
.task-num{font-size:.72rem;font-weight:700;color:var(--acc);text-transform:uppercase;
|
||
letter-spacing:.06em;margin-bottom:6px}
|
||
.task-text{font-size:.96rem;font-weight:700;line-height:1.85;margin-bottom:14px}
|
||
.task-hint{font-size:.8rem;color:var(--muted);margin-bottom:12px;display:flex;align-items:flex-start;gap:6px}
|
||
.task-hint i{margin-top:2px;color:var(--warn);flex-shrink:0}
|
||
.ans-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||
.ans-inp{width:120px;padding:11px 10px;border:2px solid var(--border);border-radius:10px;
|
||
font-size:1.05rem;font-family:monospace;text-align:center;outline:none;
|
||
background:var(--card);color:var(--text);transition:.18s}
|
||
.ans-inp:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
|
||
.unit-lbl{font-size:.82rem;color:var(--muted);font-weight:600;white-space:nowrap}
|
||
.btn{padding:10px 18px;border:none;border-radius:10px;font-weight:700;font-size:.84rem;
|
||
cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
|
||
.btn:active{transform:scale(.96)}
|
||
.btn-pri{background:var(--pri);color:#fff}
|
||
.btn-pri:hover{filter:brightness(1.1)}
|
||
.btn-ghost{background:transparent;border:2px solid var(--border);color:var(--muted)}
|
||
.btn-ghost:hover{border-color:var(--pri);color:var(--pri)}
|
||
.btn-next{background:var(--ok);color:#fff}
|
||
.btn-next:hover{filter:brightness(1.1)}
|
||
.mcq-opts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
|
||
.opt-btn{width:100%;text-align:left;padding:11px 16px;border:2px solid var(--border);border-radius:10px;
|
||
background:var(--card);color:var(--text);font-size:.9rem;font-weight:500;cursor:pointer;
|
||
transition:.18s;line-height:1.5;font-family:inherit}
|
||
.opt-btn:hover:not(:disabled){border-color:var(--pri);background:rgba(29,78,216,.05)}
|
||
.opt-btn:disabled{cursor:default}
|
||
.opt-btn.mcq-cor{border-color:var(--ok)!important;background:var(--ok-bg)!important;color:#166534!important;font-weight:700}
|
||
.opt-btn.mcq-wrong{border-color:var(--fail)!important;background:var(--fail-bg)!important;color:#991b1b!important}
|
||
.feedback{padding:13px 18px;border-radius:11px;font-size:.87rem;font-weight:600;
|
||
display:none;line-height:1.7;margin-top:10px}
|
||
.feedback.show{display:block;animation:pop .25s ease}
|
||
.fb-ok{background:var(--ok-bg);color:#166534}
|
||
html.dark .fb-ok{color:#86efac}
|
||
.fb-fail{background:var(--fail-bg);color:#991b1b}
|
||
html.dark .fb-fail{color:#fca5a5}
|
||
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
|
||
.summary{background:var(--card);border:1px solid var(--border);border-radius:16px;
|
||
padding:28px;text-align:center;box-shadow:var(--sh);display:none}
|
||
.summary.show{display:block;animation:pop .35s ease}
|
||
.summary h2{font-size:1.2rem;font-weight:800;margin-bottom:8px}
|
||
.big-score{font-size:3.5rem;font-weight:900;color:var(--pri);line-height:1;margin:10px 0}
|
||
.sum-grade{color:var(--muted);font-size:.9rem;margin-bottom:20px}
|
||
.sum-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
|
||
|
||
/* ═══════════ СПРАВОЧНИК (таблица ρ) ═══════════ */
|
||
.ref-tbl{width:100%;border-collapse:collapse;font-size:.78rem;margin:4px 0 10px}
|
||
.ref-tbl td{padding:4px 8px;border:1px solid var(--border)}
|
||
.ref-tbl tr:nth-child(odd) td{background:rgba(37,99,235,.04)}
|
||
|
||
/* ═══════════ PTAB ═══════════ */
|
||
[id^="ptab-"]{display:none;padding:14px}
|
||
|
||
/* ── Карточки формул ── */
|
||
.formula-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
|
||
@media(max-width:560px){.formula-grid{grid-template-columns:1fr}}
|
||
.fcard{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s}
|
||
.fcard:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(29,78,216,.1)}
|
||
.fcard.highlight{border-color:var(--pri);background:linear-gradient(135deg,rgba(29,78,216,.04),rgba(249,115,22,.04))}
|
||
.fcard h3{font-size:.8rem;font-weight:700;color:var(--pri);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
|
||
.fcard .main-f{font-size:1.05rem;font-weight:700;text-align:center;margin:8px 0;padding:10px;background:rgba(29,78,216,.06);border-radius:9px}
|
||
.fcard p{font-size:.83rem;color:var(--muted);line-height:1.7;margin-top:6px}
|
||
.fcard ul{font-size:.83rem;color:var(--muted);line-height:1.8;padding-left:18px;margin-top:6px}
|
||
|
||
/* ── Интерактивные диаграммы ── */
|
||
.idiag{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;margin:14px 0;box-shadow:var(--sh)}
|
||
.idiag h3{font-size:.79rem;font-weight:700;color:var(--pri);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;display:flex;align-items:center;gap:6px}
|
||
.idiag-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
|
||
@media(max-width:560px){.idiag-2col{grid-template-columns:1fr}}
|
||
.idiag-result{background:rgba(29,78,216,.08);border-radius:10px;padding:10px 14px;margin-top:10px;font-size:.9rem;font-weight:700;text-align:center;letter-spacing:.02em;border:1px solid rgba(29,78,216,.15)}
|
||
.slider-lbl{min-width:90px;font-weight:600;color:var(--text);flex-shrink:0;font-size:.82rem}
|
||
.slider-val{min-width:72px;font-weight:800;color:var(--pri);font-size:.82rem;flex-shrink:0}
|
||
|
||
/* ── Запомни! ── */
|
||
.remember-box{background:linear-gradient(135deg,rgba(29,78,216,.06),rgba(29,78,216,.03));border:2px solid rgba(29,78,216,.3);border-radius:13px;padding:14px 17px;margin:16px 0}
|
||
.remember-box-title{font-weight:800;font-size:.82rem;color:#b91c1c;margin-bottom:8px;display:flex;align-items:center;gap:7px}
|
||
html.dark .remember-box{border-color:rgba(29,78,216,.4);background:rgba(29,78,216,.07)}
|
||
html.dark .remember-box-title{color:#fca5a5}
|
||
.remember-box ul,.remember-box p{font-size:.83rem;color:var(--text);line-height:1.9;margin:0}
|
||
.remember-box ul{padding-left:18px}
|
||
.remember-box li{margin-bottom:3px}
|
||
|
||
/* ── Частые ошибки ── */
|
||
.mistakes-box{background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(251,191,36,.03));border:2px solid rgba(245,158,11,.35);border-radius:13px;padding:14px 17px;margin:16px 0}
|
||
.mistakes-box-title{font-weight:800;font-size:.82rem;color:#92400e;margin-bottom:8px;display:flex;align-items:center;gap:7px}
|
||
html.dark .mistakes-box-title{color:#fcd34d}
|
||
.mistakes-box ul{padding-left:18px;margin:0}
|
||
.mistakes-box li{font-size:.83rem;color:var(--text);line-height:1.9}
|
||
|
||
/* ── Объяснение по-человечески ── */
|
||
.student-box{background:linear-gradient(135deg,rgba(254,243,199,.7),rgba(255,237,213,.7));border:1.5px solid #f59e0b;border-radius:14px;padding:16px 18px;margin:16px 0;line-height:1.75}
|
||
html.dark .student-box{background:linear-gradient(135deg,rgba(120,80,0,.18),rgba(100,50,0,.18));border-color:#d97706}
|
||
.student-box-title{font-weight:800;font-size:.88rem;color:#92400e;margin-bottom:10px;display:flex;align-items:center;gap:7px}
|
||
html.dark .student-box-title{color:#fbbf24}
|
||
.student-box p{margin:0 0 9px;font-size:.84rem;color:var(--text)}
|
||
.student-box p:last-child{margin-bottom:0}
|
||
.student-box b{color:#92400e}
|
||
html.dark .student-box b{color:#fbbf24}
|
||
|
||
/* ── Инсайт ── */
|
||
.insight-box{background:linear-gradient(135deg,rgba(29,78,216,.07),rgba(249,115,22,.04));border:2px solid rgba(29,78,216,.22);border-radius:13px;padding:14px 17px;margin:16px 0}
|
||
.insight-title{font-weight:800;font-size:.82rem;color:var(--pri);margin-bottom:7px;display:flex;align-items:center;gap:7px}
|
||
.insight-box p{font-size:.83rem;color:var(--text);line-height:1.8;margin:0 0 6px}
|
||
|
||
/* ── Примеры из жизни ── */
|
||
.life-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
|
||
.life-item{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:12px 10px;text-align:center}
|
||
.life-item .li-icon{font-size:1.9rem;margin-bottom:5px}
|
||
.life-item .li-title{font-size:.79rem;font-weight:700;color:var(--text);margin-bottom:3px}
|
||
.life-item .li-desc{font-size:.71rem;color:var(--muted);line-height:1.55}
|
||
|
||
/* ── Para-hero доп. элементы ── */
|
||
.para-hero .ph-formula{display:inline-block;font-size:1rem;background:rgba(255,255,255,.17);border-radius:10px;padding:7px 16px;margin:2px 0 8px;font-weight:700;border:1px solid rgba(255,255,255,.22)}
|
||
.para-hero .ph-desc{font-size:.79rem;opacity:.87;line-height:1.65;margin-bottom:10px}
|
||
.para-hero .ph-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
|
||
.para-hero .ph-tag{background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:3px 11px;font-size:.7rem;font-weight:700}
|
||
.para-hero .ph-label{font-size:.7rem;font-weight:700;opacity:.75;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
|
||
.para-hero h2{font-size:1.12rem;font-weight:900;margin-bottom:8px;line-height:1.3}
|
||
|
||
/* ── Разделитель ── */
|
||
hr.divider{border:none;border-top:1px solid var(--border);margin:20px 0}
|
||
|
||
/* ── Шаги решения ── */
|
||
.sol-steps{list-style:none;padding:0;margin:8px 0}
|
||
.sol-steps li{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:.86rem;line-height:1.75}
|
||
.step-n{min-width:24px;height:24px;border-radius:50%;background:var(--pri);color:#fff;font-size:.69rem;font-weight:800;display:grid;place-items:center;margin-top:1px;flex-shrink:0}
|
||
|
||
/* ═══════════════════════════════════════════════ */
|
||
/* ═══════════ PRO MAX UPGRADE ═════════════════ */
|
||
/* ═══════════════════════════════════════════════ */
|
||
|
||
/* ── Body тонкий фоновый градиент ── */
|
||
body{background:radial-gradient(1200px 600px at 80% -10%,rgba(99,102,241,.10),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(37,99,235,.07),transparent 55%),var(--bg)}
|
||
html.dark body{background:radial-gradient(1200px 600px at 80% -10%,rgba(37,99,235,.20),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(99,102,241,.12),transparent 55%),var(--bg)}
|
||
|
||
/* ── A5. Motion: появление секций ── */
|
||
.fx-rise{opacity:0;transform:translateY(18px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
|
||
.fx-rise.is-in{opacity:1;transform:none}
|
||
.fx-stagger>*{opacity:0;transform:translateY(12px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
|
||
.fx-stagger.is-in>*{opacity:1;transform:none}
|
||
.fx-stagger.is-in>*:nth-child(1){transition-delay:0ms}
|
||
.fx-stagger.is-in>*:nth-child(2){transition-delay:60ms}
|
||
.fx-stagger.is-in>*:nth-child(3){transition-delay:120ms}
|
||
.fx-stagger.is-in>*:nth-child(4){transition-delay:180ms}
|
||
.fx-stagger.is-in>*:nth-child(5){transition-delay:240ms}
|
||
.fx-stagger.is-in>*:nth-child(6){transition-delay:300ms}
|
||
|
||
/* ── A4. Типографика fluid + gradient ── */
|
||
.section-title{font-size:clamp(.68rem,.62rem + .25vw,.78rem)}
|
||
.fcard h3{font-size:clamp(.78rem,.72rem + .3vw,.92rem)}
|
||
.task-text{font-size:clamp(.92rem,.86rem + .35vw,1.05rem)}
|
||
.para-hero h2{font-size:clamp(1.1rem,.95rem + .8vw,1.5rem);background:linear-gradient(135deg,#fff,rgba(255,255,255,.78));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 18px rgba(0,0,0,.18)}
|
||
.ph-14 h2,.ph-24 h2{background:linear-gradient(135deg,#1c1917,#3f3f46);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
|
||
|
||
/* KaTeX inline подсветка */
|
||
.katex{font-size:1.02em}
|
||
.katex-html{padding:0 .15em;border-radius:5px;transition:background var(--dur-1) var(--ease)}
|
||
.def-box .katex-html:hover,.task-text .katex-html:hover,.fcard .katex-html:hover{background:rgba(37,99,235,.08)}
|
||
|
||
/* ── A2. Para-hero v2: SVG-узор + параллакс + glow ── */
|
||
.para-hero{box-shadow:var(--shadow-lg),0 0 50px rgba(37,99,235,.18);position:relative;isolation:isolate;transform:translateZ(0);transition:transform var(--dur-2) var(--ease)}
|
||
.para-hero::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.32;mix-blend-mode:overlay;
|
||
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='80' viewBox='0 0 140 80'><g fill='none' stroke='%23ffffff' stroke-width='1.2' opacity='0.55'><path d='M0 20 Q35 0 70 20 T140 20'/><path d='M0 40 Q35 20 70 40 T140 40'/><path d='M0 60 Q35 40 70 60 T140 60'/></g></svg>")}
|
||
.para-hero::after{transition:transform .5s var(--ease-out);transform:translate(var(--phx,0),var(--phy,0))}
|
||
.para-hero:hover{transform:translateY(-2px)}
|
||
.para-hero:hover::after{transform:translate(var(--phx,0),var(--phy,0)) scale(1.1)}
|
||
.para-hero .ph-glow{position:absolute;left:-10%;bottom:-40%;width:60%;height:120%;background:radial-gradient(closest-side,rgba(255,255,255,.32),transparent);pointer-events:none;z-index:-1;animation:phPulse 4s ease-in-out infinite alternate}
|
||
@keyframes phPulse{from{opacity:.6;transform:scale(.92)}to{opacity:.95;transform:scale(1.06)}}
|
||
.ph-badge{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);border-radius:var(--r-full);padding:4px 10px;font-size:.68rem;font-weight:800;letter-spacing:.05em;backdrop-filter:blur(6px);z-index:1}
|
||
.ph-14 .ph-badge,.ph-24 .ph-badge{background:rgba(0,0,0,.12);border-color:rgba(0,0,0,.15);color:#1c1917}
|
||
|
||
/* ── A3. Карточки формул v2 ── */
|
||
.fcard{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease);position:relative;overflow:hidden;backdrop-filter:blur(8px);background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 96%,var(--pri-300)))}
|
||
.fcard::before{content:'';position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(37,99,235,.10),transparent 60%);opacity:0;transition:opacity var(--dur-2) var(--ease);pointer-events:none}
|
||
.fcard:hover{transform:translateY(-3px) scale(1.005);box-shadow:var(--shadow-pop);border-color:var(--pri-400)}
|
||
.fcard:hover::before{opacity:1}
|
||
.fcard .main-f{transition:transform var(--dur-2) var(--ease-bounce)}
|
||
.fcard:hover .main-f{transform:scale(1.03)}
|
||
html.dark .fcard{background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 92%,var(--pri-700)))}
|
||
|
||
/* Семантические бордеры для разных типов карточек */
|
||
.fcard.is-def{border-color:var(--pri-400)}
|
||
.fcard.is-law{border-color:#0891b2}
|
||
.fcard.is-formula{border-color:#a16207}
|
||
.fcard.is-rule{border-color:#7c3aed}
|
||
|
||
/* ── Кнопки v2: ripple + улучшенные ── */
|
||
.btn{transition:transform var(--dur-1) var(--ease-bounce),box-shadow var(--dur-2) var(--ease),filter var(--dur-2) var(--ease),background var(--dur-2) var(--ease);position:relative;overflow:hidden}
|
||
.btn-pri{background:linear-gradient(135deg,var(--pri-500),var(--pri-700));box-shadow:0 4px 14px rgba(37,99,235,.3)}
|
||
.btn-pri:hover{box-shadow:0 6px 20px rgba(37,99,235,.45);transform:translateY(-1px)}
|
||
.btn-next{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 4px 14px rgba(22,163,74,.3)}
|
||
.btn-next:hover{box-shadow:0 6px 20px rgba(22,163,74,.45);transform:translateY(-1px)}
|
||
.btn::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(255,255,255,.6),transparent 40%);opacity:0;transition:opacity var(--dur-3) var(--ease);pointer-events:none}
|
||
.btn.is-ripple::after{opacity:1;animation:rippleOut .55s var(--ease-out) forwards}
|
||
@keyframes rippleOut{from{opacity:.5;transform:scale(.4)}to{opacity:0;transform:scale(2.2)}}
|
||
|
||
/* ── Табы v2 (sidebar-only, no hover lift) ── */
|
||
.tab{transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease);position:relative}
|
||
.tab.active{box-shadow:none}
|
||
|
||
/* Pills параграфов в задачах */
|
||
.para-pill{transition:all var(--dur-1) var(--ease)}
|
||
.para-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
|
||
.para-pill.active{box-shadow:0 3px 10px rgba(37,99,235,.3)}
|
||
|
||
/* ── Nav-dots v2: пульс активного ── */
|
||
.nav-dot{transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
|
||
.nav-dot:hover{transform:scale(1.08)}
|
||
.nav-dot.nd-cur{box-shadow:0 0 0 4px rgba(37,99,235,.18),0 4px 12px rgba(37,99,235,.3);animation:dotPulse 2.4s ease-in-out infinite}
|
||
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 4px rgba(37,99,235,.18),0 4px 12px rgba(37,99,235,.3)}50%{box-shadow:0 0 0 7px rgba(37,99,235,.08),0 4px 14px rgba(37,99,235,.4)}}
|
||
|
||
/* ── Task-card v2 ── */
|
||
.task-card{transition:box-shadow var(--dur-2) var(--ease);background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 95%,var(--pri-300)))}
|
||
.task-card:focus-within{box-shadow:var(--shadow-pop),0 0 0 3px rgba(37,99,235,.15)}
|
||
.ans-inp{transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
|
||
.ans-inp:focus{transform:scale(1.02)}
|
||
|
||
/* ── Feedback v2: с иконкой и slide ── */
|
||
.feedback{border-left:4px solid transparent;backdrop-filter:blur(4px)}
|
||
.fb-ok{border-left-color:var(--ok);background:linear-gradient(135deg,var(--ok-bg),color-mix(in srgb,var(--ok-bg) 70%,transparent))}
|
||
.fb-fail{border-left-color:var(--fail);background:linear-gradient(135deg,var(--fail-bg),color-mix(in srgb,var(--fail-bg) 70%,transparent))}
|
||
|
||
/* ── Канвас-контейнер v2 ── */
|
||
.idiag{transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
|
||
.idiag:hover{border-color:var(--pri-400);box-shadow:var(--shadow-md)}
|
||
canvas{transition:filter var(--dur-2) var(--ease)}
|
||
|
||
/* Подпись под канвасом */
|
||
.cv-cap{font-size:.74rem;color:var(--muted);margin-top:8px;line-height:1.6;display:flex;align-items:flex-start;gap:6px}
|
||
.cv-cap i{color:var(--pri);margin-top:2px;flex-shrink:0}
|
||
|
||
/* ── Чипы значений интерактивов ── */
|
||
.val-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-full);background:rgba(37,99,235,.1);color:var(--pri-700);font-weight:800;font-family:monospace;font-size:.78rem;border:1px solid rgba(37,99,235,.2);transition:all var(--dur-1) var(--ease)}
|
||
html.dark .val-chip{color:var(--pri-300);background:rgba(37,99,235,.18);border-color:rgba(37,99,235,.3)}
|
||
|
||
/* ── Скролл — плавный ── */
|
||
html{scroll-behavior:smooth}
|
||
|
||
/* ── Hint для канваса при касании/hover ── */
|
||
.cv-hint{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.45);color:#fff;padding:3px 9px;border-radius:var(--r-full);font-size:.65rem;font-weight:700;pointer-events:none;backdrop-filter:blur(4px);letter-spacing:.04em;text-transform:uppercase;opacity:.9}
|
||
|
||
/* ── Hover на iconified элементах ── */
|
||
.life-item{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
|
||
.life-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--pri-300)}
|
||
.life-item .li-icon{transition:transform var(--dur-2) var(--ease-bounce)}
|
||
.life-item:hover .li-icon{transform:scale(1.15) rotate(-4deg)}
|
||
|
||
/* ══════════════════════════════════════════
|
||
LAYOUT v2 — Sidebar + Main col
|
||
══════════════════════════════════════════ */
|
||
|
||
/* Base */
|
||
html,body{height:100%}
|
||
body{display:flex;flex-direction:column;overflow-x:hidden}
|
||
|
||
/* ── Header/hdr ── */
|
||
.hdr{flex-shrink:0;background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#6366f1 100%);
|
||
padding:28px 28px 22px;position:relative;overflow:hidden;
|
||
border-bottom:2px solid rgba(99,102,241,.3);text-align:left}
|
||
.hdr::before{content:'ЭЛЕКТРО';position:absolute;right:-12px;top:-8%;
|
||
font-family:'Outfit',sans-serif;font-size:clamp(4rem,14vw,11rem);
|
||
font-weight:900;letter-spacing:-.05em;color:transparent;
|
||
-webkit-text-stroke:1.5px rgba(165,180,252,.09);line-height:1;
|
||
pointer-events:none;user-select:none;z-index:0}
|
||
.hdr::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
|
||
background:
|
||
radial-gradient(ellipse 55% 90% at 5% 60%,rgba(37,99,235,.18) 0%,transparent 60%),
|
||
radial-gradient(ellipse 45% 65% at 90% 20%,rgba(99,102,241,.14) 0%,transparent 55%)}
|
||
.hdr h1{font-family:'Outfit',sans-serif;font-size:clamp(1.4rem,4vw,2rem);
|
||
font-weight:900;letter-spacing:-.025em;color:#e8eeff;
|
||
position:relative;z-index:1;line-height:1.15;margin-bottom:0}
|
||
.hdr h1 i{color:#818cf8;margin-right:.25em}
|
||
.hdr p{font-family:'Outfit',sans-serif;font-size:.72rem;color:rgba(180,210,255,.8);
|
||
margin-top:10px;position:relative;z-index:1;letter-spacing:.07em;
|
||
font-weight:500;text-transform:uppercase}
|
||
|
||
/* ── Page Layout ── */
|
||
.page-layout{display:grid;grid-template-columns:230px 1fr;flex:1;min-height:0;overflow:hidden}
|
||
|
||
/* ── Sidebar ── */
|
||
.sidebar{position:static;height:100%;overflow-y:auto;overflow-x:hidden;
|
||
background:rgba(8,14,40,.99);border-right:1px solid rgba(99,102,241,.14);
|
||
scrollbar-width:thin;scrollbar-color:rgba(99,102,241,.2) transparent}
|
||
.sidebar::-webkit-scrollbar{width:3px}
|
||
.sidebar::-webkit-scrollbar-thumb{background:rgba(99,102,241,.22);border-radius:99px}
|
||
|
||
/* Sidebar brand */
|
||
.sb-brand{display:flex;align-items:center;gap:11px;padding:18px 14px 14px;
|
||
border-bottom:1px solid rgba(99,102,241,.12)}
|
||
.sb-logo{width:30px;height:30px;color:#818cf8;flex-shrink:0}
|
||
.sb-title{display:block;font-family:'Outfit',sans-serif;font-size:.88rem;
|
||
font-weight:800;color:#c7d2fe;letter-spacing:-.02em;line-height:1.1}
|
||
.sb-sub{display:block;font-family:'JetBrains Mono',monospace;font-size:.52rem;
|
||
color:rgba(129,140,248,.45);margin-top:3px;letter-spacing:.04em}
|
||
|
||
/* Chapter buttons */
|
||
.ch-bar{display:flex;flex-direction:column;padding:12px 10px 6px;gap:1px}
|
||
.ch-btn{display:flex;align-items:center;gap:9px;padding:9px 12px;border:none;
|
||
border-left:2.5px solid transparent;border-radius:7px;background:transparent;
|
||
font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:700;
|
||
color:rgba(165,180,252,.7);cursor:pointer;text-align:left;width:100%;
|
||
transition:background .18s,color .18s,border-color .18s;letter-spacing:.02em}
|
||
.ch-btn:hover{background:rgba(99,102,241,.09);border-left-color:rgba(99,102,241,.25);color:#a5b4fc}
|
||
.ch-btn.active{background:rgba(99,102,241,.14);border-left-color:#818cf8;color:#c7d2fe}
|
||
.ch-icon-svg{width:14px;height:14px;flex-shrink:0;opacity:.55;transition:opacity .15s,color .15s}
|
||
.ch-btn.active .ch-icon-svg{opacity:1;color:#818cf8}
|
||
.ch-btn:hover .ch-icon-svg{opacity:.85}
|
||
.ch-roman{font-size:.68rem;color:rgba(129,140,248,.4);font-weight:400;font-style:italic;
|
||
flex-shrink:0;margin-left:auto}
|
||
.ch-btn.active .ch-roman{color:rgba(129,140,248,.55)}
|
||
|
||
/* Section tabs inside sidebar */
|
||
.sec-bar{padding:6px 10px 16px;border-top:1px solid rgba(99,102,241,.1)}
|
||
.sec-group{display:none;flex-direction:column;gap:1px}
|
||
.sec-group.show{display:flex}
|
||
.sidebar .tab{display:flex!important;align-items:baseline;gap:0;
|
||
text-align:left;border:none!important;
|
||
background:transparent!important;color:rgba(165,200,255,.65)!important;
|
||
border-radius:5px;padding:5px 10px;font-size:.73rem;white-space:normal;
|
||
line-height:1.3;box-shadow:none!important;cursor:pointer;
|
||
transition:background .15s,color .15s;width:100%;border-left:2px solid transparent!important}
|
||
.sidebar .tab:hover{background:rgba(99,102,241,.09)!important;color:#c7d2fe!important}
|
||
.sidebar .tab.active{background:rgba(99,102,241,.17)!important;color:#e0e7ff!important;
|
||
border-left-color:#818cf8!important;padding-left:8px!important;box-shadow:none!important}
|
||
.sidebar .tab.active::after{display:none!important}
|
||
.tab-num{font-family:'JetBrains Mono',monospace;font-size:.62rem;
|
||
color:rgba(129,140,248,.5);flex-shrink:0;min-width:30px;transition:color .15s}
|
||
.tab-name{font-family:'Outfit',sans-serif;font-size:.72rem;line-height:1.35;white-space:normal}
|
||
.sidebar .tab.active .tab-num{color:#818cf8}
|
||
.sidebar .tab:hover .tab-num{color:rgba(129,140,248,.8)}
|
||
|
||
/* ── Main content column ── */
|
||
.main-col{min-width:0;overflow-y:auto;overflow-x:hidden;height:100%}
|
||
.content-area{max-width:860px;margin:0 auto;padding:0 4px 40px}
|
||
.content{display:none;padding:20px 14px;animation:fadeUp .25s ease}
|
||
.content.active{display:block}
|
||
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
||
|
||
/* ── Floating buttons ── */
|
||
.theme-btn{position:fixed;top:12px;right:12px;z-index:80;width:38px;height:38px;
|
||
border-radius:10px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);
|
||
cursor:pointer;display:grid;place-items:center;font-size:1rem;
|
||
color:rgba(224,231,255,.8);box-shadow:none;transition:background .2s,color .2s}
|
||
.theme-btn:hover{background:rgba(255,255,255,.22);color:#fbbf24}
|
||
|
||
.ref-toggle{position:fixed;bottom:16px;right:16px;z-index:80;width:46px;height:46px;
|
||
border-radius:14px;background:var(--pri);color:#fff;border:none;cursor:pointer;
|
||
display:grid;place-items:center;font-size:1.15rem;
|
||
box-shadow:0 6px 18px rgba(37,99,235,.4),0 0 0 4px rgba(37,99,235,.08);
|
||
transition:transform var(--dur-2) var(--ease-bounce),box-shadow var(--dur-2) var(--ease)}
|
||
.ref-toggle:hover{transform:scale(1.06) rotate(-4deg);
|
||
box-shadow:0 10px 26px rgba(37,99,235,.55),0 0 0 6px rgba(37,99,235,.12)}
|
||
|
||
/* ── Ref-panel popup ── */
|
||
.ref-panel{position:fixed;bottom:72px;right:16px;z-index:78;width:310px;
|
||
max-height:72vh;overflow-y:auto;background:var(--card);
|
||
border:1px solid var(--border);border-radius:16px;padding:16px 18px;
|
||
box-shadow:0 12px 40px rgba(0,0,0,.18);display:none;
|
||
font-size:.8rem;line-height:1.85;scrollbar-width:thin}
|
||
.ref-panel.show{display:block;animation:pop .22s ease}
|
||
.ref-panel h3{font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:800;
|
||
text-transform:uppercase;letter-spacing:.1em;color:var(--pri);margin:12px 0 5px}
|
||
.ref-panel h3:first-child{margin-top:0}
|
||
.ref-panel .rf{background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.15);
|
||
border-radius:8px;padding:7px 12px;margin:3px 0;text-align:center}
|
||
html.dark .ref-panel .rf{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.2)}
|
||
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
|
||
|
||
/* ── Responsive ── */
|
||
@media(max-width:768px){
|
||
.page-layout{grid-template-columns:1fr;flex:1;min-height:0;overflow:visible}
|
||
.sidebar{height:auto;overflow-y:visible;overflow-x:auto;border-right:none;
|
||
border-bottom:1px solid rgba(99,102,241,.15)}
|
||
.main-col{height:auto;overflow-y:visible}
|
||
.ch-bar{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:0 8px;
|
||
scrollbar-width:none;gap:0}
|
||
.ch-bar::-webkit-scrollbar{display:none}
|
||
.ch-btn{white-space:nowrap;border-left:none!important;width:auto;
|
||
border-bottom:2.5px solid transparent!important;padding:11px 12px;border-radius:0}
|
||
.ch-btn.active{border-left:none!important;border-bottom-color:#818cf8!important;
|
||
background:transparent;color:#a5b4fc}
|
||
.sec-bar{border-top:1px solid rgba(99,102,241,.12)}
|
||
.sec-group{flex-direction:row;flex-wrap:wrap}
|
||
.sidebar .tab{display:inline-flex!important;white-space:nowrap;
|
||
border:1px solid rgba(99,102,241,.2)!important;
|
||
background:rgba(99,102,241,.07)!important;
|
||
color:rgba(165,180,252,.55)!important;border-radius:7px!important;
|
||
padding:5px 11px!important;width:auto!important}
|
||
.hdr{padding:18px 16px 14px}
|
||
.hdr h1{font-size:1.3rem}
|
||
}
|
||
@media(max-width:480px){
|
||
.ref-panel{width:calc(100vw - 32px);right:16px}
|
||
}
|
||
|
||
/* ═══════════ KEY POINTS BLOCK ═══════════ */
|
||
.key-points{background:rgba(37,99,235,.08);border-left:4px solid #2563eb;padding:16px;margin:24px 0;border-radius:8px}
|
||
html.dark .key-points{background:rgba(37,99,235,.12)}
|
||
.key-points-title{font-weight:800;font-size:.85rem;color:var(--pri);margin-bottom:10px;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.04em}
|
||
.key-points-list{list-style:none;padding-left:0;margin:0}
|
||
.key-points-list li{font-size:.84rem;color:var(--text);line-height:1.75;margin-bottom:7px;padding-left:20px;position:relative}
|
||
.key-points-list li:before{content:'▪';position:absolute;left:6px;color:var(--pri);font-weight:700}
|
||
|
||
/* ═══════════ REF PANEL TABS ═══════════ */
|
||
.ref-tabs{display:flex;gap:8px;margin-bottom:12px;border-bottom:1px solid var(--border);padding-bottom:10px}
|
||
.ref-tab-btn{padding:6px 12px;border:none;background:transparent;color:var(--muted);font-size:.78rem;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;transition:.18s;text-transform:uppercase;letter-spacing:.04em}
|
||
.ref-tab-btn:hover{color:var(--text)}
|
||
.ref-tab-btn.active{color:var(--pri);border-bottom-color:var(--pri)}
|
||
.ref-tab-content{display:none}
|
||
.ref-tab-content.active{display:block}
|
||
|
||
/* ═══════════ FORMULA TABLE ═══════════ */
|
||
.formula-table{width:100%;border-collapse:collapse;font-size:.78rem;margin:10px 0}
|
||
.formula-table th{background:rgba(37,99,235,.12);padding:8px;text-align:left;font-weight:700;color:var(--pri);border:1px solid var(--border)}
|
||
.formula-table td{padding:8px;border:1px solid var(--border)}
|
||
.formula-table tr:nth-child(odd) td{background:rgba(37,99,235,.04)}
|
||
.formula-table tr:hover td{background:rgba(37,99,235,.08)}
|
||
@media(max-width:768px){
|
||
.formula-table{font-size:.7rem}
|
||
.formula-table th,.formula-table td{padding:6px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Плавающие кнопки -->
|
||
<button class="theme-btn" id="themeBtn" title="Тема"><i class="fas fa-moon"></i></button>
|
||
<button class="ref-toggle" id="refToggle" title="Формулы"><i class="fas fa-bolt"></i></button>
|
||
|
||
<!-- Popup справочник -->
|
||
<div class="ref-panel" id="refPanel">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)">
|
||
<span style="font-size:.82rem;font-weight:800;color:var(--pri)">⚡ Справочник · §12–31</span>
|
||
<button onclick="document.getElementById('refPanel').classList.remove('show')"
|
||
style="background:none;border:none;cursor:pointer;color:var(--muted);font-size:1rem;line-height:1;padding:2px 4px;border-radius:5px" title="Закрыть">✕</button>
|
||
</div>
|
||
|
||
<!-- Вкладки -->
|
||
<div class="ref-tabs">
|
||
<button class="ref-tab-btn active" onclick="switchRefTab('para')">Параграф</button>
|
||
<button class="ref-tab-btn" onclick="switchRefTab('cheat')">Шпаргалка</button>
|
||
<button class="ref-tab-btn" onclick="switchRefTab('tasks')">Задачи</button>
|
||
</div>
|
||
|
||
<!-- Вкладка: Параграф -->
|
||
<div class="ref-tab-content active" id="reftab-para">
|
||
<h3>Заряд</h3>
|
||
<div style="background:rgba(29,78,216,.06);border-radius:9px;padding:10px 12px;margin-bottom:10px">
|
||
<div>$q = eN$, $e = 1{,}6 \times 10^{-19}$ Кл</div>
|
||
<div style="margin-top:4px">1 мКл=$10^{-3}$Кл; 1нКл=$10^{-9}$Кл; 1пКл=$10^{-12}$Кл</div>
|
||
</div>
|
||
<h3>Напряжение и работа</h3>
|
||
<div style="background:rgba(29,78,216,.06);border-radius:9px;padding:10px 12px;margin-bottom:10px">
|
||
<div>$U = A/q$ [В]; $A = qU$ [Дж]</div>
|
||
<div>1 В = 1 Дж/Кл</div>
|
||
</div>
|
||
<h3>Сила тока</h3>
|
||
<div style="background:rgba(29,78,216,.06);border-radius:9px;padding:10px 12px;margin-bottom:10px">
|
||
<div>$I = q/t$ [А]; $q = It$ [Кл]</div>
|
||
</div>
|
||
<h3>Закон Ома</h3>
|
||
<div style="background:rgba(29,78,216,.06);border-radius:9px;padding:10px 12px;margin-bottom:10px">
|
||
<div>$I = U/R$; $R = U/I$; $U = IR$</div>
|
||
<div>$R = \rho l/S$ ($[\rho]$ = Ом·мм²/м)</div>
|
||
</div>
|
||
<h3>Последовательное соединение</h3>
|
||
<div style="background:rgba(29,78,216,.06);border-radius:9px;padding:10px 12px;margin-bottom:10px">
|
||
<div>$I = I_1 = I_2$; $U = U_1 + U_2$; $R = R_1 + R_2$</div>
|
||
</div>
|
||
<h3>Параллельное соединение</h3>
|
||
<div style="background:rgba(29,78,216,.06);border-radius:9px;padding:10px 12px;margin-bottom:10px">
|
||
<div>$U = U_1 = U_2$; $I = I_1 + I_2$</div>
|
||
<div>$\dfrac{1}{R} = \dfrac{1}{R_1} + \dfrac{1}{R_2}$</div>
|
||
</div>
|
||
<h3>Работа и мощность тока</h3>
|
||
<div style="background:rgba(29,78,216,.06);border-radius:9px;padding:10px 12px;margin-bottom:10px">
|
||
<div>$A = IUt = I^2Rt$ [Дж]</div>
|
||
<div>$P = IU = I^2R$ [Вт]</div>
|
||
<div>1 кВт·ч = $3{,}6 \times 10^6$ Дж</div>
|
||
</div>
|
||
<h3>Удельное сопротивление $\rho$, Ом·мм²/м</h3>
|
||
<table class="ref-tbl">
|
||
<thead><tr style="background:rgba(29,78,216,.08)"><th>Материал</th><th>$\rho$</th><th>Материал</th><th>$\rho$</th></tr></thead>
|
||
<tr><td>Медь</td><td>0,017</td><td>Алюминий</td><td>0,028</td></tr>
|
||
<tr><td>Вольфрам</td><td>0,055</td><td>Железо</td><td>0,10</td></tr>
|
||
<tr><td>Константан</td><td>0,50</td><td>Нихром</td><td>1,10</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Вкладка: Шпаргалка -->
|
||
<div class="ref-tab-content" id="reftab-cheat">
|
||
<div style="font-size:.72rem;color:var(--muted);margin-bottom:8px">Все формулы главы — сверь с параграфом</div>
|
||
<div style="max-height:65vh;overflow-y:auto;">
|
||
<table class="formula-table">
|
||
<thead>
|
||
<tr><th>§</th><th>Формула</th><th>Описание</th><th>Ед.</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>§15</td><td>$q = eN$</td><td>Заряд тела через элементарный заряд</td><td>Кл</td></tr>
|
||
<tr><td>§17</td><td>$U = A/q$</td><td>Напряжение — работа на единицу заряда</td><td>В</td></tr>
|
||
<tr><td>§18</td><td>$A = qU$</td><td>Работа электрического поля</td><td>Дж</td></tr>
|
||
<tr><td>§20</td><td>$I = q/t$</td><td>Сила тока — заряд в секунду</td><td>А</td></tr>
|
||
<tr><td>§22</td><td>$I = U/R$</td><td>Закон Ома для участка цепи</td><td>А</td></tr>
|
||
<tr><td>§22</td><td>$R = U/I$</td><td>Сопротивление через ток и напряжение</td><td>Ом</td></tr>
|
||
<tr><td>§23</td><td>$R = \rho l/S$</td><td>Сопротивление проводника</td><td>Ом</td></tr>
|
||
<tr><td>§24</td><td>$R = R_1 + R_2$</td><td>Последовательное соединение</td><td>Ом</td></tr>
|
||
<tr><td>§25</td><td>$\frac{1}{R} = \frac{1}{R_1} + \frac{1}{R_2}$</td><td>Параллельное соединение</td><td>Ом</td></tr>
|
||
<tr><td>§26</td><td>$P = UI = I^2R = U^2/R$</td><td>Мощность электрического тока</td><td>Вт</td></tr>
|
||
<tr><td>§26</td><td>$A = IUt = I^2Rt$</td><td>Работа тока за время t</td><td>Дж</td></tr>
|
||
<tr><td>§26</td><td>$Q = I^2Rt$</td><td>Закон Джоуля-Ленца — теплота</td><td>Дж</td></tr>
|
||
<tr><td>§27</td><td>1 кВт·ч = $3{,}6 \times 10^6$ Дж</td><td>Единица электроэнергии на счётчике</td><td>Дж</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div style="margin-top:10px">
|
||
<h3>Удельное сопротивление $\rho$, Ом·мм²/м</h3>
|
||
<table class="ref-tbl">
|
||
<thead><tr style="background:rgba(29,78,216,.08)"><th>Материал</th><th>$\rho$</th><th>Материал</th><th>$\rho$</th></tr></thead>
|
||
<tr><td>Серебро</td><td>0,016</td><td>Медь</td><td>0,017</td></tr>
|
||
<tr><td>Алюминий</td><td>0,028</td><td>Вольфрам</td><td>0,055</td></tr>
|
||
<tr><td>Железо</td><td>0,10</td><td>Константан</td><td>0,50</td></tr>
|
||
<tr><td colspan="2">Нихром</td><td colspan="2">1,10</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Вкладка: Задачи -->
|
||
<div class="ref-tab-content" id="reftab-tasks">
|
||
<div style="font-size:.8rem;color:var(--muted);line-height:1.8">
|
||
<b style="color:var(--pri)">Алгоритм решения задач:</b>
|
||
<ol style="margin:8px 0 0 16px;font-size:.78rem">
|
||
<li>Записать условие, перевести единицы в СИ</li>
|
||
<li>Выбрать нужную формулу (см. Шпаргалку)</li>
|
||
<li>Выразить неизвестную, подставить числа</li>
|
||
<li>Проверить единицы измерения</li>
|
||
</ol>
|
||
<div style="margin-top:10px"><b style="color:var(--pri)">Типичные ошибки:</b></div>
|
||
<ul style="margin:6px 0 0 16px;font-size:.78rem">
|
||
<li>Путать Ом·мм²/м и Ом·м при $\rho$</li>
|
||
<li>Параллельное: $R < R_{min}$ — не складывать!</li>
|
||
<li>$Q = I^2Rt$, но не $IRt$ — ток в квадрате!</li>
|
||
<li>При смешанном соединении: считать поэтапно</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Шапка -->
|
||
<div class="hdr">
|
||
<h1><i class="fas fa-bolt"></i> Физика 8 — Электромагнитные явления</h1>
|
||
<p>Электростатика · Электрический ток · Закон Ома · Электромагнетизм</p>
|
||
</div>
|
||
|
||
<div class="page-layout">
|
||
<aside class="sidebar">
|
||
|
||
<!-- Sidebar brand -->
|
||
<div class="sb-brand">
|
||
<svg class="sb-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round">
|
||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||
</svg>
|
||
<div>
|
||
<span class="sb-title">Электро</span>
|
||
<span class="sb-sub">Физика 8 — §12–31</span>
|
||
</div>
|
||
</div>
|
||
|
||
<nav>
|
||
<div class="ch-bar">
|
||
|
||
<button class="ch-btn active" data-ch="es">
|
||
<svg class="ch-icon-svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
|
||
<circle cx="10" cy="10" r="3"/><path d="M10 1v3M10 16v3M1 10h3M16 10h3"/>
|
||
<path d="M3.5 3.5l2 2M14.5 14.5l2 2M3.5 16.5l2-2M14.5 5.5l2-2"/>
|
||
</svg>
|
||
<span>Электростатика</span>
|
||
<span class="ch-roman">§12–16</span>
|
||
</button>
|
||
|
||
<button class="ch-btn" data-ch="et">
|
||
<svg class="ch-icon-svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M2 10h4l3-7 4 14 3-7h2"/>
|
||
</svg>
|
||
<span>Электрический ток</span>
|
||
<span class="ch-roman">§17–21</span>
|
||
</button>
|
||
|
||
<button class="ch-btn" data-ch="om">
|
||
<svg class="ch-icon-svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="7" width="14" height="6" rx="3"/>
|
||
<path d="M3 10h2M15 10h2"/>
|
||
</svg>
|
||
<span>Закон Ома и цепи</span>
|
||
<span class="ch-roman">§22–27</span>
|
||
</button>
|
||
|
||
<button class="ch-btn" data-ch="mg">
|
||
<svg class="ch-icon-svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
|
||
<path d="M10 3 Q17 10 10 17 Q3 10 10 3z" fill="currentColor" opacity=".15"/>
|
||
<path d="M7 7Q3 10 7 13M13 7Q17 10 13 13"/>
|
||
</svg>
|
||
<span>Магнетизм</span>
|
||
<span class="ch-roman">§28–31</span>
|
||
</button>
|
||
|
||
<button class="ch-btn" data-ch="tasks">
|
||
<svg class="ch-icon-svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="3" width="14" height="14" rx="3"/>
|
||
<path d="M7 10l2.5 2.5L13 7"/>
|
||
</svg>
|
||
<span>Задачи</span>
|
||
<span class="ch-roman">VIII</span>
|
||
</button>
|
||
|
||
</div>
|
||
|
||
<div class="sec-bar">
|
||
<!-- Электростатика §12–16 -->
|
||
<div class="sec-group show" data-chg="es">
|
||
<div class="tab active" data-tab="ref12"><span class="tab-num">§12</span><span class="tab-name">Электризация тел</span></div>
|
||
<div class="tab" data-tab="ref13"><span class="tab-num">§13</span><span class="tab-name">Проводники и диэлектрики</span></div>
|
||
<div class="tab" data-tab="ref14"><span class="tab-num">§14</span><span class="tab-name">Электризация через влияние</span></div>
|
||
<div class="tab" data-tab="ref15"><span class="tab-num">§15</span><span class="tab-name">Электрический заряд</span></div>
|
||
<div class="tab" data-tab="ref16"><span class="tab-num">§16</span><span class="tab-name">Строение атома. Ионы</span></div>
|
||
</div>
|
||
<!-- Электрический ток §17–21 -->
|
||
<div class="sec-group" data-chg="et">
|
||
<div class="tab" data-tab="ref17"><span class="tab-num">§17</span><span class="tab-name">Электрическое поле. Напряжение</span></div>
|
||
<div class="tab" data-tab="ref18"><span class="tab-num">§18</span><span class="tab-name">Единица напряжения. Работа</span></div>
|
||
<div class="tab" data-tab="ref19"><span class="tab-num">§19</span><span class="tab-name">Электрический ток. Источники</span></div>
|
||
<div class="tab" data-tab="ref20"><span class="tab-num">§20</span><span class="tab-name">Сила и направление тока</span></div>
|
||
<div class="tab" data-tab="ref21"><span class="tab-num">§21</span><span class="tab-name">Электрическая цепь. Измерения</span></div>
|
||
</div>
|
||
<!-- Закон Ома §22–27 -->
|
||
<div class="sec-group" data-chg="om">
|
||
<div class="tab" data-tab="ref22"><span class="tab-num">§22</span><span class="tab-name">Закон Ома</span></div>
|
||
<div class="tab" data-tab="ref23"><span class="tab-num">§23</span><span class="tab-name">Единица сопротивления</span></div>
|
||
<div class="tab" data-tab="ref24"><span class="tab-num">§24</span><span class="tab-name">Последовательное соединение</span></div>
|
||
<div class="tab" data-tab="ref25"><span class="tab-num">§25</span><span class="tab-name">Параллельное соединение</span></div>
|
||
<div class="tab" data-tab="ref26"><span class="tab-num">§26</span><span class="tab-name">Работа и мощность тока</span></div>
|
||
<div class="tab" data-tab="ref27"><span class="tab-num">§27</span><span class="tab-name">Экономия электроэнергии</span></div>
|
||
</div>
|
||
<!-- Магнетизм §28–31 -->
|
||
<div class="sec-group" data-chg="mg">
|
||
<div class="tab" data-tab="ref28"><span class="tab-num">§28</span><span class="tab-name">Постоянные магниты</span></div>
|
||
<div class="tab" data-tab="ref29"><span class="tab-num">§29</span><span class="tab-name">Магнитное поле</span></div>
|
||
<div class="tab" data-tab="ref30"><span class="tab-num">§30</span><span class="tab-name">Магнитное поле тока</span></div>
|
||
<div class="tab" data-tab="ref31"><span class="tab-num">§31</span><span class="tab-name">Катушка с током. Электромагнит</span></div>
|
||
</div>
|
||
<!-- Задачи -->
|
||
<div class="sec-group" data-chg="tasks">
|
||
<div class="tab" data-tab="tasks"><span class="tab-num">📝</span><span class="tab-name">Все задачи</span></div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
</aside>
|
||
<main class="main-col">
|
||
<div class="content-area">
|
||
|
||
<!-- §12 -->
|
||
<div class="content active" id="tab-ref12">
|
||
<div class="para-hero ph-12">
|
||
<div class="ph-label">§12 · Физика 8 кл</div>
|
||
<h2>Электризация тел. Взаимодействие зарядов</h2>
|
||
<div class="ph-desc">При трении оба тела заряжаются разноимёнными зарядами. Одноимённые отталкиваются, разноимённые — притягиваются.</div>
|
||
<div class="ph-tags"><span class="ph-tag">⚡ трение → 2 заряда</span><span class="ph-tag">↔ одноимённые отталкиваются</span><span class="ph-tag">🔬 электроскоп</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-bolt"></i> §12. Электризация тел. Взаимодействие зарядов</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Электризация трением</h3>
|
||
<div class="main-f" style="font-size:.88rem">оба тела → разноимённые заряды</div>
|
||
<p>При трении двух тел <b>оба заряжаются</b>. Трение лишь увеличивает площадь соприкосновения — это облегчает переход электронов от одного тела к другому.</p>
|
||
<p><b>Стекло о шёлк</b> → стекло «+», шёлк «−»</p>
|
||
<p><b>Эбонит о мех</b> → эбонит «−», мех «+»</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Взаимодействие зарядов</h3>
|
||
<div class="main-f" style="font-size:.88rem">«+»«+» и «−»«−» → отталкиваются<br>«+»«−» → притягиваются</div>
|
||
<p><b>Одноимённые</b> заряды отталкиваются.</p>
|
||
<p><b>Разноимённые</b> заряды притягиваются.</p>
|
||
<p>Это — <b>электрическое взаимодействие</b>.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag-2col">
|
||
<div class="idiag">
|
||
<h3>🔬 Электроскоп</h3>
|
||
<svg width="100%" viewBox="0 0 180 130" style="display:block">
|
||
<ellipse cx="90" cy="50" rx="55" ry="45" fill="rgba(147,197,253,.1)" stroke="#3b82f6" stroke-width="1.5"/>
|
||
<line x1="90" y1="5" x2="90" y2="70" stroke="#94a3b8" stroke-width="3"/>
|
||
<circle cx="90" cy="5" r="7" fill="#94a3b8" stroke="#64748b" stroke-width="1"/>
|
||
<line x1="90" y1="70" x2="75" y2="95" stroke="#fbbf24" stroke-width="2.5" id="svg12leaf1"/>
|
||
<line x1="90" y1="70" x2="105" y2="95" stroke="#fbbf24" stroke-width="2.5" id="svg12leaf2"/>
|
||
<rect x="60" y="3" width="60" height="5" rx="2" fill="#64748b"/>
|
||
<text x="90" y="120" text-anchor="middle" font-size="9" fill="#64748b" font-family="sans-serif">незаряжен: листочки висят</text>
|
||
</svg>
|
||
</div>
|
||
<div class="idiag">
|
||
<h3>⚡ Заряженный электроскоп</h3>
|
||
<svg width="100%" viewBox="0 0 180 130" style="display:block">
|
||
<ellipse cx="90" cy="50" rx="55" ry="45" fill="rgba(147,197,253,.1)" stroke="#3b82f6" stroke-width="1.5"/>
|
||
<line x1="90" y1="5" x2="90" y2="70" stroke="#94a3b8" stroke-width="3"/>
|
||
<circle cx="90" cy="5" r="7" fill="#ef4444" stroke="#dc2626" stroke-width="1"/>
|
||
<text x="90" y="9" text-anchor="middle" font-size="8" fill="#fff" font-family="sans-serif" font-weight="bold">−</text>
|
||
<line x1="90" y1="70" x2="65" y2="100" stroke="#ef4444" stroke-width="2.5"/>
|
||
<line x1="90" y1="70" x2="115" y2="100" stroke="#ef4444" stroke-width="2.5"/>
|
||
<text x="65" y="113" text-anchor="middle" font-size="8" fill="#ef4444" font-family="sans-serif">−</text>
|
||
<text x="115" y="113" text-anchor="middle" font-size="8" fill="#ef4444" font-family="sans-serif">−</text>
|
||
<rect x="60" y="3" width="60" height="5" rx="2" fill="#64748b"/>
|
||
<text x="90" y="125" text-anchor="middle" font-size="9" fill="#ef4444" font-family="sans-serif">заряжен: листочки расходятся</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>При трении заряжаются <b>оба</b> тела — разноимёнными зарядами.</li>
|
||
<li>Одноимённые заряды <b>отталкиваются</b>; разноимённые — <b>притягиваются</b>.</li>
|
||
<li>Электроскоп <b>обнаруживает и сравнивает</b> заряды (не измеряет точное значение).</li>
|
||
<li>Сумма разноимённых зарядов равна нулю: «+» + «−» = 0.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="life-grid">
|
||
<div class="life-item"><div class="li-icon">👕</div><div class="li-title">Свитер и рубашка</div><div class="li-desc">Прилипают при надевании — электризация трением шерсти о ткань</div></div>
|
||
<div class="life-item"><div class="li-icon">⚡</div><div class="li-title">Молния</div><div class="li-desc">Электрический разряд между разноимённо заряженным облаком и землёй</div></div>
|
||
<div class="life-item"><div class="li-icon">🖨️</div><div class="li-title">Принтер/ксерокс</div><div class="li-desc">Тонер притягивается к заряженным участкам барабана — электростатика</div></div>
|
||
<div class="life-item"><div class="li-icon">🧹</div><div class="li-title">Пыль на экране</div><div class="li-desc">Экран заряжается → притягивает заряженные пылинки (разноимённо)</div></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Электризация и взаимодействие</div>
|
||
<div class="idiag">
|
||
<h3>⚡ Потри палочки и сближай — наблюдай взаимодействие</h3>
|
||
<canvas id="cv12" style="width:100%;height:260px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<button class="btn btn-pri" onclick="rub12()">🧻 Потереть</button>
|
||
<button class="btn btn-ghost" onclick="approach12(true)">🔴↔🔵 Разноимённые (сблизить)</button>
|
||
<button class="btn btn-ghost" onclick="approach12(false)">🔴↔🔴 Одноимённые (сблизить)</button>
|
||
<button class="btn btn-ghost" onclick="reset12()">↺ Сброс</button>
|
||
</div>
|
||
<p style="font-size:.78rem;color:var(--muted);margin-top:8px">Электроскоп справа: листочки расходятся при поднесении заряженной палочки.</p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §12</div>
|
||
<ul class="key-points-list">
|
||
<li>При трении заряжаются <b>оба</b> тела, получая разноимённые заряды — это основное правило электризации трением.</li>
|
||
<li>Одноимённые заряды (<b>+/+</b> или <b>−/−</b>) отталкиваются; разноимённые (<b>+/−</b>) притягиваются.</li>
|
||
<li>Электроскоп <b>обнаруживает</b> и сравнивает заряды — листочки расходятся, когда заряд есть.</li>
|
||
<li>Трение увеличивает площадь соприкосновения и облегчает переход электронов между телами.</li>
|
||
<li>Сумма зарядов при электризации равна нулю: заряд не создаётся, а <b>перераспределяется</b>.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §13 -->
|
||
<div class="content" id="tab-ref13">
|
||
<div class="para-hero ph-13">
|
||
<div class="ph-label">§13 · Физика 8 кл</div>
|
||
<h2>Проводники и диэлектрики</h2>
|
||
<div class="ph-desc">Проводники: заряды перемещаются свободно (металлы, растворы). Диэлектрики: перемещение затруднено (стекло, резина).</div>
|
||
<div class="ph-tags"><span class="ph-tag">⚙️ металлы — проводники</span><span class="ph-tag">🪟 стекло — диэлектрик</span><span class="ph-tag">💡 полупроводники</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-plug"></i> §13. Проводники и диэлектрики</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Проводники</h3>
|
||
<div class="main-f" style="font-size:.88rem">заряды перемещаются свободно</div>
|
||
<p>В проводниках есть <b>свободные заряженные частицы</b> (электроны в металлах, ионы в растворах), которые могут перемещаться по всему телу.</p>
|
||
<p><b>Примеры:</b> все металлы, растворы солей и кислот, тело человека, питьевая вода.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Диэлектрики (изоляторы)</h3>
|
||
<div class="main-f" style="font-size:.88rem">заряды не перемещаются</div>
|
||
<p>В диэлектриках <b>нет свободных зарядов</b> — все электроны прочно связаны с атомами.</p>
|
||
<p><b>Примеры:</b> стекло, резина, пластмасса, сухой воздух, дерево.</p>
|
||
<p>Идеальных диэлектриков нет — при высоком напряжении любой изолятор пробивается.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📊 Сравнение проводников и диэлектриков</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:.8rem">
|
||
<thead><tr style="background:rgba(29,78,216,.08)"><th style="padding:6px 8px;border:1px solid var(--border);text-align:left">Свойство</th><th style="padding:6px 8px;border:1px solid var(--border)">Проводники</th><th style="padding:6px 8px;border:1px solid var(--border)">Диэлектрики</th></tr></thead>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">Свободные заряды</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;color:#059669;font-weight:700">✓ есть</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;color:#dc2626;font-weight:700">✗ нет</td></tr>
|
||
<tr style="background:rgba(29,78,216,.03)"><td style="padding:5px 8px;border:1px solid var(--border)">Передача заряда</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center">да</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center">нет</td></tr>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">Примеры</td><td style="padding:5px 8px;border:1px solid var(--border)">Cu, Fe, Al, Au, Ag; растворы кислот</td><td style="padding:5px 8px;border:1px solid var(--border)">стекло, резина, пластик, воздух</td></tr>
|
||
<tr style="background:rgba(29,78,216,.03)"><td style="padding:5px 8px;border:1px solid var(--border)">Применение</td><td style="padding:5px 8px;border:1px solid var(--border)">провода, контакты</td><td style="padding:5px 8px;border:1px solid var(--border)">изоляция проводов, корпуса</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="insight-box">
|
||
<div class="insight-title"><i class="fas fa-lightbulb"></i> Полупроводники — третья группа</div>
|
||
<p>Кремний (Si) и германий (Ge) — полупроводники: при нормальных условиях проводят плохо, но их проводимость можно менять нагревом, светом или легированием. Именно полупроводники — основа транзисторов, микросхем, солнечных батарей и смартфонов!</p>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Электрический заряд может перемещаться <b>только в проводниках</b>.</li>
|
||
<li>Тело человека — проводник (≈ 60% воды). Поэтому ток опасен!</li>
|
||
<li>Идеальных диэлектриков нет — при достаточно высоком напряжении любой изолятор пробивается (молния пробивает воздух).</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Передача заряда через разные материалы</div>
|
||
<div class="idiag">
|
||
<h3>🔌 Два электроскопа — выбери материал перемычки</h3>
|
||
<canvas id="cv13" style="width:100%;height:240px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<select id="sel13mat" onchange="upd13()" style="padding:6px 10px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="1">🔩 Медная проволока (проводник)</option>
|
||
<option value="1">💧 Солёная вода (проводник)</option>
|
||
<option value="0">🪟 Стеклянная палочка (диэлектрик)</option>
|
||
<option value="0">🟡 Резиновый шланг (диэлектрик)</option>
|
||
<option value="0">🌬️ Воздух (диэлектрик)</option>
|
||
</select>
|
||
<button class="btn btn-pri" onclick="connect13()">⚡ Соединить</button>
|
||
<button class="btn btn-ghost" onclick="reset13()">↺ Сброс</button>
|
||
</div>
|
||
<p style="font-size:.78rem;color:var(--muted);margin-top:8px">Левый электроскоп заряжен. После соединения: проводник — заряд перетекает; диэлектрик — не перетекает.</p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §13</div>
|
||
<ul class="key-points-list">
|
||
<li><b>Проводники</b> содержат свободные заряженные частицы (электроны в металлах, ионы в растворах) — заряд перемещается свободно.</li>
|
||
<li><b>Диэлектрики</b> (стекло, резина, пластик) не имеют свободных зарядов — электрический заряд не перемещается.</li>
|
||
<li>Тело человека — проводник (60% воды), поэтому ток опасен для жизни.</li>
|
||
<li>Полупроводники (Si, Ge) — третья группа: проводимость можно менять нагревом, светом или легированием.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §14 -->
|
||
<div class="content" id="tab-ref14">
|
||
<div class="para-hero ph-14">
|
||
<div class="ph-label">§14 · Физика 8 кл</div>
|
||
<h2>Электризация через влияние</h2>
|
||
<div class="ph-desc">Заряженное тело перераспределяет заряды в соседнем проводнике без контакта. Незаряженные тела притягиваются к заряженным.</div>
|
||
<div class="ph-tags"><span class="ph-tag">🔄 перераспределение зарядов</span><span class="ph-tag">🧲 притяжение незаряженных</span><span class="ph-tag">⚡ молния — следствие</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-magnet"></i> §14. Электризация через влияние</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Механизм влияния</h3>
|
||
<div class="main-f" style="font-size:.88rem">заряд → перераспределение в проводнике</div>
|
||
<p>Поднесённое заряженное тело создаёт электрическое поле. Оно действует на свободные электроны проводника: <b>разноимённые притягиваются</b> к ближней стороне, <b>одноимённые отталкиваются</b> на дальнюю.</p>
|
||
<p>Без контакта! Убрали палочку → заряды вернулись в исходное состояние.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Как зарядить тело через влияние</h3>
|
||
<div class="main-f" style="font-size:.85rem">палочка → перемычку убрать → палочку убрать</div>
|
||
<ol style="font-size:.83rem;color:var(--muted);padding-left:18px;line-height:1.9;margin-top:6px">
|
||
<li>Поднести заряженную палочку к двум телам, соединённым проводником</li>
|
||
<li>Убрать <b>перемычку</b> (пока палочка на месте!)</li>
|
||
<li>Убрать палочку</li>
|
||
</ol>
|
||
<p>Результат: одно тело «+», другое «−».</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>🌩️ Как образуется молния</h3>
|
||
<svg width="100%" viewBox="0 0 300 110" style="display:block">
|
||
<ellipse cx="150" cy="25" rx="80" ry="20" fill="rgba(71,85,105,.4)" stroke="#475569" stroke-width="1.5"/>
|
||
<text x="100" y="20" font-size="9" fill="#94a3b8" font-family="sans-serif">нижняя часть облака «−»</text>
|
||
<text x="105" y="32" font-size="10" fill="#ef4444" font-family="sans-serif">− − − − − −</text>
|
||
<line x1="150" y1="47" x2="150" y2="68" stroke="#f97316" stroke-width="1.5" stroke-dasharray="4,2"/>
|
||
<text x="155" y="60" font-size="8" fill="#f97316" font-family="sans-serif">влияние</text>
|
||
<rect x="30" y="70" width="240" height="10" rx="3" fill="rgba(120,80,10,.3)" stroke="#92400e" stroke-width="1"/>
|
||
<text x="65" y="68" font-size="8" fill="#3b82f6" font-family="sans-serif">+ + + + + + + +</text>
|
||
<text x="150" y="90" text-anchor="middle" font-size="8" fill="#94a3b8" font-family="sans-serif">поверхность Земли (индуцированный «+»)</text>
|
||
<polyline points="150,47 140,65 155,65 140,90" stroke="#fbbf24" stroke-width="2.5" fill="none"/>
|
||
<text x="170" y="75" font-size="9" fill="#fbbf24" font-family="sans-serif">⚡ разряд</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Заряды, возникающие через влияние, <b>равны по модулю и противоположны по знаку</b>.</li>
|
||
<li>Незаряженные тела притягиваются к заряженным именно из-за влияния: ближняя сторона — разноимённая (притяжение сильнее).</li>
|
||
<li>Молния — следствие электризации через влияние в атмосфере.</li>
|
||
<li>Молниеотвод медленно «разряжает» грозовое облако, предотвращая разряд-молнию.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="life-grid">
|
||
<div class="life-item"><div class="li-icon">⚡</div><div class="li-title">Молния</div><div class="li-desc">Заряженное облако → индуцирует противоположный заряд на земле → разряд</div></div>
|
||
<div class="life-item"><div class="li-icon">📠</div><div class="li-title">Лазерный принтер</div><div class="li-desc">Заряженный барабан притягивает тонер через влияние в нужных местах</div></div>
|
||
<div class="life-item"><div class="li-icon">💧</div><div class="li-title">Струя воды</div><div class="li-desc">Заряженная расчёска притягивает струю воды через влияние</div></div>
|
||
<div class="life-item"><div class="li-icon">🪥</div><div class="li-title">Волосы при расчёсывании</div><div class="li-desc">Расчёска заряжается → притягивает незаряженные волосы через влияние</div></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Электризация через влияние</div>
|
||
<div class="idiag">
|
||
<h3>🔄 Перераспределение электронов под действием заряда</h3>
|
||
<canvas id="cv14" style="width:100%;height:260px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:220px">
|
||
<span class="slider-lbl">📏 Расстояние:</span>
|
||
<input type="range" id="sl14d" min="5" max="95" value="80" style="flex:1" oninput="sl14dval=+this.value;upd14();">
|
||
<span class="slider-val" id="lbl14d">далеко</span>
|
||
</div>
|
||
<select id="sel14sign" onchange="upd14()" style="padding:6px 10px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="1">➕ положительная палочка</option>
|
||
<option value="-1">➖ отрицательная палочка</option>
|
||
</select>
|
||
<button class="btn btn-pri" onclick="approach14()">🤚 Поднести</button>
|
||
<button class="btn btn-ghost" onclick="reset14()">↺ Убрать</button>
|
||
</div>
|
||
<div class="ctrl-row" style="margin-top:8px;gap:8px">
|
||
<span class="val-chip" id="chip14L">Левая сторона: 0</span>
|
||
<span class="val-chip" id="chip14R">Правая сторона: 0</span>
|
||
<span class="val-chip" id="chip14F">Влияние: 0%</span>
|
||
</div>
|
||
<p class="cv-cap"><i class="fas fa-info-circle"></i> Заряженная палочка создаёт поле — свободные электроны проводника смещаются. На ближней к палочке стороне появляется противоположный заряд, на дальней — одноимённый.</p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §14</div>
|
||
<ul class="key-points-list">
|
||
<li>Электризация через <b>влияние</b> (индукцию) происходит без контакта — заряженное тело перераспределяет заряды в проводнике.</li>
|
||
<li>Ближняя к заряженному телу сторона проводника приобретает <b>разноимённый</b> заряд, дальняя — одноимённый.</li>
|
||
<li>Незаряженные тела <b>притягиваются</b> к заряженным: ближняя разноимённая сторона притягивается сильнее, чем отталкивается дальняя.</li>
|
||
<li>Молния — следствие электризации через влияние: заряженное облако индуцирует противоположный заряд на земле.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §15 -->
|
||
<div class="content" id="tab-ref15">
|
||
<div class="para-hero ph-15">
|
||
<div class="ph-label">§15 · Физика 8 кл</div>
|
||
<h2>Электрический заряд. Элементарный заряд</h2>
|
||
<div class="ph-formula">$q = eN$</div>
|
||
<div class="ph-desc">Заряд тела кратен элементарному: $q = eN$, $e = 1{,}6 \times 10^{-19}$ Кл.</div>
|
||
<div class="ph-tags"><span class="ph-tag">$e = 1{,}6 \times 10^{-19}$ Кл</span><span class="ph-tag">📐 [q] = Кл</span><span class="ph-tag">🔬 опыт Милликена</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-atom"></i> §15. Электрический заряд. Элементарный заряд</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Элементарный заряд</h3>
|
||
<div class="main-f">$e = 1{,}6 \times 10^{-19}$ Кл</div>
|
||
<p>Наименьшая «порция» электрического заряда. Носители: <b>электрон</b> (заряд $-e$) и <b>протон</b> (заряд $+e$).</p>
|
||
<p>Заряд <b>дискретен</b>: любой заряд тела кратен $e$.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Формула заряда тела</h3>
|
||
<div class="main-f">$q = eN$</div>
|
||
<p>$q$ — заряд тела [Кл]; $e = 1{,}6 \times 10^{-19}$ Кл; $N$ — число элементарных зарядов (целое!).</p>
|
||
<p><b>Единица:</b> кулон (Кл). Дольные единицы: мКл ($10^{-3}$), мкКл ($10^{-6}$), нКл ($10^{-9}$), пКл ($10^{-12}$).</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="insight-box">
|
||
<div class="insight-title"><i class="fas fa-lightbulb"></i> Опыт Милликена и Иоффе (1910-1913)</div>
|
||
<p>Заряженная масляная капля «зависала» между заряженными пластинами, когда электрическая сила уравновешивала силу тяжести. По условию равновесия можно найти заряд капли. Оказалось: он всегда кратен $1{,}6 \times 10^{-19}$ Кл — это и есть элементарный заряд!</p>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Заряд любого тела <b>дискретен</b>: $q = eN$, $N = 1, 2, 3, ...$</li>
|
||
<li>При электризации трением переносятся <b>сами частицы</b> (электроны), а не некое «электричество».</li>
|
||
<li>1 Кл — очень большой заряд. В бытовых экспериментах — микро- и наноколоны.</li>
|
||
<li>Электрон: $q_e = -1{,}6 \times 10^{-19}$ Кл; протон: $q_p = +1{,}6 \times 10^{-19}$ Кл.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Элементарный заряд</div>
|
||
<div class="idiag">
|
||
<h3>⚛️ $q = eN$ — перенос электронов при электризации</h3>
|
||
<canvas id="cv15" style="width:100%;height:180px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:200px">
|
||
<span class="slider-lbl">Электронов $N$:</span>
|
||
<input type="range" id="sl15N" min="0" max="2000" step="100" value="0" style="flex:1" oninput="sl15Nval=+this.value;lbl15N.textContent=this.value;upd15();">
|
||
<span class="slider-val"><span id="lbl15N">0</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="idiag-result" id="res15">$q = e \times 0 = 0$ Кл</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §15</div>
|
||
<ul class="key-points-list">
|
||
<li>Элементарный заряд $e = 1{,}6 \times 10^{-19}$ Кл — наименьшая «порция» заряда в природе (носители: электрон и протон).</li>
|
||
<li>Заряд любого тела <b>дискретен</b>: $q = eN$, где $N$ — целое число переданных элементарных зарядов.</li>
|
||
<li>Единица заряда — кулон (Кл); дольные: мКл ($10^{-3}$), мкКл ($10^{-6}$), нКл ($10^{-9}$).</li>
|
||
<li>1 Кл — очень большой заряд; в бытовых экспериментах работают с микро- и наноколонами.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §16 -->
|
||
<div class="content" id="tab-ref16">
|
||
<div class="para-hero ph-16">
|
||
<div class="ph-label">§16 · Физика 8 кл</div>
|
||
<h2>Строение атома. Ионы</h2>
|
||
<div class="ph-desc">Атом: ядро (протоны+нейтроны) + электронная оболочка. Ион — атом, потерявший или принявший электроны.</div>
|
||
<div class="ph-tags"><span class="ph-tag">⊕ ядро = протоны+нейтроны</span><span class="ph-tag">⊖ электроны на оболочках</span><span class="ph-tag">🔬 опыт Резерфорда</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-atom"></i> §16. Строение атома. Ионы</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Строение атома (модель Резерфорда)</h3>
|
||
<div class="main-f" style="font-size:.85rem">ядро (p⁺ + n⁰) + электронные оболочки (e⁻)</div>
|
||
<p><b>Ядро</b>: протоны (+) и нейтроны (0). Занимает ничтожно малый объём ($10^{-15}$ м).</p>
|
||
<p><b>Электроны</b>: движутся вокруг ядра на оболочках. Число электронов = числу протонов у нейтрального атома.</p>
|
||
<p>Диаметр атома ≈ $10^{-10}$ м; ядра — в $10^4$–$10^5$ раз меньше!</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Ионы</h3>
|
||
<div class="main-f" style="font-size:.85rem">атом ± e⁻ = ион</div>
|
||
<p><b>Катион</b> (+): атом <em>потерял</em> электрон(ы). Протонов больше электронов.</p>
|
||
<p><b>Анион</b> (−): атом <em>принял</em> лишний электрон. Электронов больше протонов.</p>
|
||
<p>В проводниках: электроны могут покидать атомы → свободные электроны → проводимость.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>🔬 Опыт Резерфорда (рассеяние α-частиц)</h3>
|
||
<svg width="100%" viewBox="0 0 300 100" style="display:block">
|
||
<rect x="5" y="35" width="30" height="30" rx="5" fill="rgba(239,68,68,.2)" stroke="#ef4444" stroke-width="1.5"/>
|
||
<text x="20" y="53" text-anchor="middle" font-size="7.5" fill="#ef4444" font-family="sans-serif">α</text>
|
||
<line x1="35" y1="50" x2="120" y2="50" stroke="rgba(251,191,36,.5)" stroke-width="1" stroke-dasharray="4,2"/>
|
||
<rect x="120" y="10" width="8" height="80" rx="2" fill="rgba(234,179,8,.3)" stroke="#ca8a04" stroke-width="1.5"/>
|
||
<text x="124" y="8" text-anchor="middle" font-size="7" fill="#ca8a04" font-family="sans-serif">Au</text>
|
||
<line x1="128" y1="50" x2="220" y2="50" stroke="rgba(251,191,36,.7)" stroke-width="1.5"/>
|
||
<polygon points="220,50 212,46 212,54" fill="#fbbf24"/>
|
||
<text x="200" y="45" font-size="7" fill="#fbbf24" font-family="sans-serif">большинство прямо</text>
|
||
<line x1="128" y1="47" x2="200" y2="20" stroke="rgba(251,191,36,.5)" stroke-width="1"/>
|
||
<polygon points="200,20 194,25 200,27" fill="#fbbf24" opacity=".5"/>
|
||
<line x1="128" y1="53" x2="60" y2="30" stroke="#ef4444" stroke-width="1.5"/>
|
||
<polygon points="60,30 70,33 68,24" fill="#ef4444"/>
|
||
<text x="35" y="25" font-size="7" fill="#ef4444" font-family="sans-serif">единицы — назад</text>
|
||
<circle cx="130" cy="50" r="4" fill="#ef4444"/>
|
||
<text x="140" y="70" font-size="7.5" fill="#94a3b8" font-family="sans-serif">ядро — крошечное</text>
|
||
<text x="130" y="85" text-anchor="middle" font-size="7" fill="#64748b" font-family="sans-serif">Вывод: весь + заряд сосредоточен в маленьком ядре!</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Нейтральный атом: число <b>протонов = числу электронов</b>.</li>
|
||
<li>Катион (+): потерял $e^-$ → протонов больше. Анион (−): принял $e^-$ → электронов больше.</li>
|
||
<li>В металлах проводимость обеспечивают <b>свободные электроны</b>, покинувшие атомы.</li>
|
||
<li>Опыт Резерфорда: большинство α-частиц проходит насквозь → атом почти «пустой».</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Модель атома и образование ионов</div>
|
||
<div class="idiag">
|
||
<h3>⚛️ Нейтральный атом → ион (добавляй/убирай электроны)</h3>
|
||
<canvas id="cv16" style="width:100%;height:240px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<button class="btn btn-ghost" onclick="ionize16(-1)">➖ Отнять электрон → катион</button>
|
||
<button class="btn btn-ghost" onclick="ionize16(1)">➕ Добавить электрон → анион</button>
|
||
<button class="btn btn-pri" onclick="reset16()">↺ Нейтральный атом</button>
|
||
<select id="sel16elem" onchange="reset16()" style="padding:6px 10px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="1,1">Водород H (1p, 1e)</option>
|
||
<option value="6,6" selected>Углерод C (6p, 6e)</option>
|
||
<option value="8,8">Кислород O (8p, 8e)</option>
|
||
<option value="11,11">Натрий Na (11p, 11e)</option>
|
||
</select>
|
||
</div>
|
||
<div class="idiag-result" id="res16">Нейтральный атом: 6 протонов, 6 электронов — заряд 0</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §16</div>
|
||
<ul class="key-points-list">
|
||
<li>Атом состоит из ядра (протоны + нейтроны) и электронных оболочек; ядро в $10^4$–$10^5$ раз меньше самого атома.</li>
|
||
<li><b>Нейтральный</b> атом: число протонов равно числу электронов.</li>
|
||
<li><b>Катион</b> (+) — атом потерял электрон(ы); <b>анион</b> (−) — атом принял лишние электроны.</li>
|
||
<li>Опыт Резерфорда: большинство альфа-частиц проходит насквозь — атом почти «пустой», весь заряд сосредоточен в крошечном ядре.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §17 -->
|
||
<div class="content" id="tab-ref17">
|
||
<div class="para-hero ph-17">
|
||
<div class="ph-label">§17 · Физика 8 кл</div>
|
||
<h2>Электрическое поле. Электрическое напряжение</h2>
|
||
<div class="ph-desc">Электрическое поле — особая форма материи, создаваемая зарядами. Напряжение $U = A/q$ [В].</div>
|
||
<div class="ph-tags"><span class="ph-tag">🌐 особая форма материи</span><span class="ph-tag">$U = A/q$</span><span class="ph-tag">📐 [U] = В</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-broadcast-tower"></i> §17. Электрическое поле. Электрическое напряжение</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Электрическое поле</h3>
|
||
<div class="main-f" style="font-size:.85rem">особое состояние пространства вокруг заряда</div>
|
||
<p>Электрическое поле — <b>особая форма материи</b>, создаваемая заряженными телами. Оно реально существует независимо от нашего сознания.</p>
|
||
<p><b>Доказательство</b>: поле действует на любой внесённый заряд с определённой силой.</p>
|
||
<p>Поле распространяется в пространстве и действует без контакта.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Электрическое напряжение U</h3>
|
||
<div class="main-f">$U_{AC} = U_{AB} + U_{BC}$</div>
|
||
<p>Напряжение <b>U</b> между двумя точками поля определяет, сколько работы совершают силы поля при переносе заряда между этими точками.</p>
|
||
<p>Чем дальше от заряда — тем меньше напряжение: $U_{AC} > U_{AB}$</p>
|
||
<p>Напряжения складываются на последовательных участках.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag-2col">
|
||
<div class="idiag">
|
||
<h3>🌐 Сравнение с полем тяготения</h3>
|
||
<svg width="100%" viewBox="0 0 200 120" style="display:block">
|
||
<text x="50" y="12" text-anchor="middle" font-size="8.5" fill="#94a3b8" font-family="sans-serif" font-weight="bold">Поле тяготения</text>
|
||
<circle cx="50" cy="50" r="15" fill="rgba(71,85,105,.4)" stroke="#475569" stroke-width="1.5"/>
|
||
<text x="50" y="54" text-anchor="middle" font-size="7.5" fill="#94a3b8" font-family="sans-serif">Земля</text>
|
||
<line x1="50" y1="68" x2="50" y2="90" stroke="#6366f1" stroke-width="1.5"/>
|
||
<polygon points="50,92 46,84 54,84" fill="#6366f1"/>
|
||
<text x="68" y="82" font-size="7" fill="#6366f1" font-family="sans-serif">сила тяж.</text>
|
||
<circle cx="50" cy="103" r="5" fill="#6366f1"/>
|
||
<text x="55" y="107" font-size="7" fill="#94a3b8" font-family="sans-serif">m</text>
|
||
<text x="105" y="65" text-anchor="middle" font-size="10" fill="#fbbf24" font-family="sans-serif">↔</text>
|
||
<text x="105" y="78" text-anchor="middle" font-size="7" fill="#fbbf24" font-family="sans-serif">аналогия</text>
|
||
<text x="158" y="12" text-anchor="middle" font-size="8.5" fill="#94a3b8" font-family="sans-serif" font-weight="bold">Электрическое поле</text>
|
||
<circle cx="158" cy="50" r="15" fill="rgba(239,68,68,.25)" stroke="#ef4444" stroke-width="1.5"/>
|
||
<text x="158" y="54" text-anchor="middle" font-size="8" fill="#ef4444" font-family="sans-serif">+q</text>
|
||
<line x1="158" y1="68" x2="158" y2="90" stroke="#3b82f6" stroke-width="1.5"/>
|
||
<polygon points="158,92 154,84 162,84" fill="#3b82f6"/>
|
||
<text x="173" y="82" font-size="7" fill="#3b82f6" font-family="sans-serif">сила эл.</text>
|
||
<circle cx="158" cy="103" r="5" fill="#3b82f6"/>
|
||
<text x="163" y="107" font-size="7" fill="#94a3b8" font-family="sans-serif">+q</text>
|
||
</svg>
|
||
</div>
|
||
<div class="idiag">
|
||
<h3>📐 Силовые линии электрического поля</h3>
|
||
<svg width="100%" viewBox="0 0 200 120" style="display:block">
|
||
<circle cx="50" cy="60" r="14" fill="rgba(239,68,68,.25)" stroke="#ef4444" stroke-width="1.5"/>
|
||
<text x="50" y="65" text-anchor="middle" font-size="11" fill="#ef4444" font-family="sans-serif" font-weight="bold">+</text>
|
||
<circle cx="150" cy="60" r="14" fill="rgba(59,130,246,.25)" stroke="#3b82f6" stroke-width="1.5"/>
|
||
<text x="150" y="65" text-anchor="middle" font-size="11" fill="#3b82f6" font-family="sans-serif" font-weight="bold">−</text>
|
||
<line x1="64" y1="60" x2="136" y2="60" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<polygon points="136,60 128,56 128,64" fill="#94a3b8"/>
|
||
<line x1="60" y1="46" x2="140" y2="46" stroke="#94a3b8" stroke-width="1" opacity=".6"/>
|
||
<polygon points="140,46 133,43 133,49" fill="#94a3b8" opacity=".6"/>
|
||
<line x1="60" y1="74" x2="140" y2="74" stroke="#94a3b8" stroke-width="1" opacity=".6"/>
|
||
<polygon points="140,74 133,71 133,77" fill="#94a3b8" opacity=".6"/>
|
||
<text x="100" y="50" text-anchor="middle" font-size="7" fill="#94a3b8" font-family="sans-serif">→ направление поля</text>
|
||
<text x="100" y="100" text-anchor="middle" font-size="7.5" fill="#64748b" font-family="sans-serif">линии: из + в −</text>
|
||
<line x1="50" y1="15" x2="150" y2="15" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="4,2"/>
|
||
<text x="100" y="12" text-anchor="middle" font-size="7.5" fill="#fbbf24" font-family="sans-serif">U > 0 между + и −</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Электрическое поле — <b>материально</b>: оно реально существует и действует на заряды.</li>
|
||
<li>Источник поля — заряженное тело. Поле существует вокруг него всегда.</li>
|
||
<li>Напряжение между точками <b>складывается</b> на последовательных участках.</li>
|
||
<li>Силовые линии выходят из «+» и входят в «−». Их гуще — поле сильнее.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="life-grid">
|
||
<div class="life-item"><div class="li-icon">⚡</div><div class="li-title">Молния</div><div class="li-desc">Очень сильное электрическое поле между грозовым облаком и землёй</div></div>
|
||
<div class="life-item"><div class="li-icon">🖨️</div><div class="li-title">Принтер</div><div class="li-desc">Тонер летит в зоны с другим зарядом под действием электрического поля</div></div>
|
||
<div class="life-item"><div class="li-icon">📱</div><div class="li-title">Сенсорный экран</div><div class="li-desc">Палец меняет электрическое поле у экрана — так смартфон «чувствует» касание</div></div>
|
||
<div class="life-item"><div class="li-icon">🔋</div><div class="li-title">Батарейка</div><div class="li-desc">Создаёт постоянное напряжение (эл. поле) между «+» и «−» полюсами</div></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Силовые линии электрического поля</div>
|
||
<div class="idiag">
|
||
<h3>🌐 Силовые линии и пробный заряд (живая анимация)</h3>
|
||
<canvas id="cv17" style="width:100%;height:300px;border-radius:12px;background:#0f172a;display:block;cursor:crosshair"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<select id="sel17mode" onchange="upd17()" style="padding:6px 10px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="single_pos">➕ одиночный заряд</option>
|
||
<option value="single_neg">➖ одиночный заряд</option>
|
||
<option value="dipole" selected>➕➖ диполь</option>
|
||
<option value="same_pos">➕➕ одноимённые</option>
|
||
<option value="quad">⊞ квадруполь (+ − + −)</option>
|
||
</select>
|
||
<label style="font-size:.82rem;display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted)">
|
||
<input type="checkbox" id="chk17probe" checked onchange="upd17()"> Пробный заряд (тащи мышью)
|
||
</label>
|
||
<label style="font-size:.82rem;display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted)">
|
||
<input type="checkbox" id="chk17flow" checked onchange="upd17()"> Анимация потока
|
||
</label>
|
||
</div>
|
||
<div class="ctrl-row" style="margin-top:8px;gap:8px">
|
||
<span class="val-chip" id="chip17F">|F| ≈ 0 у.е.</span>
|
||
<span class="val-chip" id="chip17E">E поле ≈ 0 у.е.</span>
|
||
<span class="val-chip" id="chip17dir">направление: —</span>
|
||
</div>
|
||
<p class="cv-cap"><i class="fas fa-info-circle"></i> Силовые линии выходят из «+» и входят в «−». Где линии гуще — там поле сильнее. Перетаскивай жёлтый пробный заряд мышью, чтобы видеть, как меняется сила.</p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §17</div>
|
||
<ul class="key-points-list">
|
||
<li>Электрическое поле — <b>особая форма материи</b>, создаваемая заряженными телами; оно реально существует и действует на заряды.</li>
|
||
<li>Силовые линии поля выходят из «+» и входят в «−»; чем гуще линии — тем сильнее поле.</li>
|
||
<li>Напряжение $U$ между двумя точками характеризует работоспособность поля: $U = A/q$.</li>
|
||
<li>Напряжения на последовательных участках складываются: $U_{AC} = U_{AB} + U_{BC}$.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §18 -->
|
||
<div class="content" id="tab-ref18">
|
||
<div class="para-hero ph-18">
|
||
<div class="ph-label">§18 · Физика 8 кл</div>
|
||
<h2>Единица напряжения. Расчёт работы в электрическом поле</h2>
|
||
<div class="ph-formula">$A = qU$</div>
|
||
<div class="ph-desc">1 В — напряжение, при котором перенос 1 Кл совершает работу 1 Дж. Формула $A = qU$.</div>
|
||
<div class="ph-tags"><span class="ph-tag">$A = qU$ [Дж]</span><span class="ph-tag">$U = A/q$ [В]</span><span class="ph-tag">1 В = 1 Дж/Кл</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-plug-circle-bolt"></i> §18. Единица напряжения. Расчёт работы в электрическом поле</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Определение 1 вольта</h3>
|
||
<div class="main-f">1 В = 1 Дж / 1 Кл</div>
|
||
<p><b>1 вольт</b> — это напряжение между двумя точками поля, при перемещении заряда 1 Кл между которыми совершается работа 1 Дж.</p>
|
||
<p>Назван в честь итальянца <b>А. Вольта</b> (1745–1827) — создателя первого химического источника тока.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Работа электрического поля</h3>
|
||
<div class="main-f">$A = qU$</div>
|
||
<p>Работа сил электрического поля по перемещению заряда $q$ между точками с напряжением $U$.</p>
|
||
<p>$A$ [Дж]; $q$ [Кл]; $U$ [В]</p>
|
||
<p>Откуда: $U = A/q$ — характеристика «работоспособности» поля.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>🔋 Примеры напряжений</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:.8rem">
|
||
<thead><tr style="background:rgba(29,78,216,.08)"><th style="padding:6px 8px;border:1px solid var(--border);text-align:left">Источник</th><th style="padding:6px 8px;border:1px solid var(--border)">U</th><th style="padding:6px 8px;text-align:left;border:1px solid var(--border)">Применение</th></tr></thead>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">Пальчиковая батарейка (AA)</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;font-weight:700">1,5 В</td><td style="padding:5px 8px;border:1px solid var(--border)">фонарик, пульт</td></tr>
|
||
<tr style="background:rgba(29,78,216,.03)"><td style="padding:5px 8px;border:1px solid var(--border)">Автомобильный аккумулятор</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;font-weight:700">12 В</td><td style="padding:5px 8px;border:1px solid var(--border)">запуск двигателя</td></tr>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">Безопасное напряжение (в воде)</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;font-weight:700">12 В</td><td style="padding:5px 8px;border:1px solid var(--border)">ванны, бассейны</td></tr>
|
||
<tr style="background:rgba(29,78,216,.03)"><td style="padding:5px 8px;border:1px solid var(--border)">Домашняя сеть</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;font-weight:700;color:#f97316">220 В</td><td style="padding:5px 8px;border:1px solid var(--border)">бытовые приборы</td></tr>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">ЛЭП (высоковольтные)</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;font-weight:700;color:#dc2626">110 000 В</td><td style="padding:5px 8px;border:1px solid var(--border)">передача эл. энергии</td></tr>
|
||
<tr style="background:rgba(29,78,216,.03)"><td style="padding:5px 8px;border:1px solid var(--border)">Молния</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;font-weight:700;color:#dc2626">~10⁹ В</td><td style="padding:5px 8px;border:1px solid var(--border)">природный разряд</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>$A = qU$: чем больше $q$ или $U$ — тем больше работа.</li>
|
||
<li>«Высокое напряжение» ≠ большая работа: работа зависит ещё и от величины переносимого заряда.</li>
|
||
<li>Напряжение ≥ 36 В при контакте с влажной кожей опасно для жизни!</li>
|
||
<li>Смысл надписи «9 В» на батарейке: при переносе 1 Кл совершается работа 9 Дж.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Работа электрического поля $A = qU$</div>
|
||
<div class="idiag">
|
||
<h3>🔋 Меняй U и q — наблюдай работу и яркость лампы</h3>
|
||
<canvas id="cv18" style="width:100%;height:180px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:180px">
|
||
<span class="slider-lbl">$U$:</span>
|
||
<input type="range" id="sl18U" min="1" max="220" value="12" style="flex:1" oninput="lbl18U.textContent=this.value+' В';upd18();">
|
||
<span class="slider-val"><span id="lbl18U">12 В</span></span>
|
||
</div>
|
||
<div class="slider-row" style="flex:1;min-width:180px">
|
||
<span class="slider-lbl">$q$:</span>
|
||
<input type="range" id="sl18q" min="0.1" max="10" step="0.1" value="1" style="flex:1" oninput="lbl18q.textContent=(+this.value).toFixed(1)+' Кл';upd18();">
|
||
<span class="slider-val"><span id="lbl18q">1.0 Кл</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="idiag-result" id="res18">$A = qU = 1{,}0 \times 12 = 12$ Дж</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §18</div>
|
||
<ul class="key-points-list">
|
||
<li><b>1 вольт</b> — напряжение, при котором перенос заряда 1 Кл совершает работу 1 Дж: 1 В = 1 Дж/Кл.</li>
|
||
<li>Формула работы: $A = qU$ — чем больше заряд или напряжение, тем больше работа.</li>
|
||
<li>Безопасное напряжение: ≤ 36 В (сухое помещение), ≤ 12 В (ванна). 220 В в розетке — смертельно опасны!</li>
|
||
<li>Запись «9 В» на батарейке означает: при переносе 1 Кл совершается работа 9 Дж.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §19 -->
|
||
<div class="content" id="tab-ref19">
|
||
<div class="para-hero ph-19">
|
||
<div class="ph-label">§19 · Физика 8 кл</div>
|
||
<h2>Электрический ток. Источники тока</h2>
|
||
<div class="ph-desc">Электрический ток — направленное движение заряженных частиц. Источник тока поддерживает напряжение.</div>
|
||
<div class="ph-tags"><span class="ph-tag">→ направленное движение</span><span class="ph-tag">🔋 источник тока</span><span class="ph-tag">⚡ виды источников</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-battery-three-quarters"></i> §19. Электрический ток. Источники тока</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Электрический ток</h3>
|
||
<div class="main-f" style="font-size:.85rem">направленное движение заряженных частиц</div>
|
||
<p>В отличие от хаотического теплового движения, ток — это <b>упорядоченное</b> движение в одном направлении.</p>
|
||
<p><b>В металлах</b>: движутся электроны. <b>В растворах</b>: движутся ионы. <b>В газах</b>: движутся ионы и электроны.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Условия существования тока</h3>
|
||
<div class="main-f" style="font-size:.85rem">проводник + источник тока</div>
|
||
<ol style="font-size:.83rem;color:var(--muted);padding-left:18px;line-height:1.9;margin-top:6px">
|
||
<li><b>Свободные заряженные частицы</b> (среда — проводник)</li>
|
||
<li><b>Электрическое напряжение</b> (источник тока создаёт и поддерживает поле)</li>
|
||
</ol>
|
||
<p style="margin-top:8px">В источнике тока другой вид энергии → <b>электрическая</b>.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>🔋 Виды источников тока</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:.8rem">
|
||
<thead><tr style="background:rgba(29,78,216,.08)"><th style="padding:6px 8px;border:1px solid var(--border);text-align:left">Источник</th><th style="padding:6px 8px;border:1px solid var(--border)">Тип энергии</th><th style="padding:6px 8px;text-align:left;border:1px solid var(--border)">Пример</th></tr></thead>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">🔋 Гальванический элемент</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center">химическая</td><td style="padding:5px 8px;border:1px solid var(--border)">батарейка AA</td></tr>
|
||
<tr style="background:rgba(29,78,216,.03)"><td style="padding:5px 8px;border:1px solid var(--border)">🔋 Аккумулятор</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center">химическая (перезар.)</td><td style="padding:5px 8px;border:1px solid var(--border)">автомобиль, смартфон</td></tr>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">⚙️ Генератор</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center">механическая</td><td style="padding:5px 8px;border:1px solid var(--border)">электростанция, велосипед</td></tr>
|
||
<tr style="background:rgba(29,78,216,.03)"><td style="padding:5px 8px;border:1px solid var(--border)">☀️ Солнечная батарея</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center">световая</td><td style="padding:5px 8px;border:1px solid var(--border)">калькулятор, спутник</td></tr>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">🌡️ Термоэлемент</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center">тепловая</td><td style="padding:5px 8px;border:1px solid var(--border)">термопара</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Ток — <b>направленное</b> движение зарядов. Хаотическое тепловое движение — это не ток!</li>
|
||
<li>Без источника тока ток в проводнике будет кратковременным (быстро исчезнет).</li>
|
||
<li>В любом источнике тока: чужой вид энергии → <b>электрическая</b>. «Из ничего» не бывает.</li>
|
||
<li>Аккумулятор ≠ батарейка: аккумулятор <b>перезаряжается</b>.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="life-grid">
|
||
<div class="life-item"><div class="li-icon">📱</div><div class="li-title">Смартфон</div><div class="li-desc">Аккумулятор → ток → дисплей, процессор, антенна</div></div>
|
||
<div class="life-item"><div class="li-icon">🚗</div><div class="li-title">Автомобиль</div><div class="li-desc">Аккумулятор запускает стартер; генератор заряжает аккумулятор при езде</div></div>
|
||
<div class="life-item"><div class="li-icon">☀️</div><div class="li-title">Солнечная панель</div><div class="li-desc">Фотоны выбивают электроны в кремнии → электрический ток</div></div>
|
||
<div class="life-item"><div class="li-icon">🏭</div><div class="li-title">Электростанция</div><div class="li-desc">Пар вращает турбину → генератор создаёт ток для всей страны</div></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Электрический ток в цепи</div>
|
||
<div class="idiag">
|
||
<h3>⚡ Направление тока и движение электронов</h3>
|
||
<canvas id="cv19" style="width:100%;height:220px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<button class="btn btn-pri" id="btn19key" onclick="toggle19()">🔑 Замкнуть цепь</button>
|
||
<select id="sel19src" onchange="upd19src()" style="padding:6px 10px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option>🔋 Батарейка (1,5 В)</option>
|
||
<option>🔋 Аккумулятор (12 В)</option>
|
||
<option>⚙️ Генератор</option>
|
||
<option>☀️ Солнечная батарея</option>
|
||
</select>
|
||
</div>
|
||
<p style="font-size:.78rem;color:var(--muted);margin-top:8px">Синие точки — электроны (движутся от «−» к «+»). Жёлтая стрелка — традиционное направление тока (от «+» к «−»).</p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §19</div>
|
||
<ul class="key-points-list">
|
||
<li>Электрический ток — <b>направленное</b> движение заряженных частиц (хаотическое тепловое движение — не ток).</li>
|
||
<li>Для существования тока нужны два условия: <b>свободные заряды</b> (проводник) и <b>источник напряжения</b>.</li>
|
||
<li>В источнике тока любой другой вид энергии преобразуется в электрическую (химическая → в батарейке, механическая → в генераторе).</li>
|
||
<li>Аккумулятор отличается от батарейки тем, что его можно <b>перезарядить</b>.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §20 -->
|
||
<div class="content" id="tab-ref20">
|
||
<div class="para-hero ph-20">
|
||
<div class="ph-label">§20 · Физика 8 кл</div>
|
||
<h2>Сила и направление электрического тока</h2>
|
||
<div class="ph-formula">$I = q/t$</div>
|
||
<div class="ph-desc">Сила тока $I = q/t$ [А]. Направление тока: от «+» к «−» во внешней цепи.</div>
|
||
<div class="ph-tags"><span class="ph-tag">$I = q/t$ [А]</span><span class="ph-tag">1 А = 1 Кл/с</span><span class="ph-tag">→ от + к − снаружи</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-tachometer-alt"></i> §20. Сила и направление электрического тока</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Сила тока</h3>
|
||
<div class="main-f">$I = q/t$</div>
|
||
<p>Сила тока — физическая величина, равная <b>заряду</b>, прошедшему через поперечное сечение проводника <b>за единицу времени</b>.</p>
|
||
<p>$I$ [А]; $q$ [Кл]; $t$ [с]</p>
|
||
<p>Откуда: $q = It$ — заряд через сечение за время $t$.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Единица и направление</h3>
|
||
<div class="main-f">1 А = 1 Кл / 1 с</div>
|
||
<p><b>Ампер</b> (А) — основная единица СИ для силы тока. 1 мА = $10^{-3}$ А.</p>
|
||
<p><b>Направление тока</b> (по договорённости): от «+» к «−» во внешней цепи — совпадает с движением положительных зарядов.</p>
|
||
<p>В металлах электроны движутся <em>в обратном направлении</em>.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📊 Типичные значения силы тока</h3>
|
||
<svg width="100%" viewBox="0 0 300 110" style="display:block">
|
||
<line x1="20" y1="85" x2="285" y2="85" stroke="var(--border)" stroke-width="1.5"/>
|
||
<rect x="22" y="72" width="8" height="13" rx="2" fill="#22c55e"/>
|
||
<text x="26" y="68" font-size="7" fill="#22c55e" font-family="sans-serif" text-anchor="middle">LED</text>
|
||
<text x="26" y="100" font-size="6.5" fill="#94a3b8" font-family="sans-serif" text-anchor="middle">0,05А</text>
|
||
<rect x="60" y="65" width="12" height="20" rx="2" fill="#f97316"/>
|
||
<text x="66" y="61" font-size="7" fill="#f97316" font-family="sans-serif" text-anchor="middle">Утюг</text>
|
||
<text x="66" y="100" font-size="6.5" fill="#94a3b8" font-family="sans-serif" text-anchor="middle">3А</text>
|
||
<rect x="108" y="57" width="14" height="28" rx="2" fill="#ef4444"/>
|
||
<text x="115" y="53" font-size="7" fill="#ef4444" font-family="sans-serif" text-anchor="middle">Чайник</text>
|
||
<text x="115" y="100" font-size="6.5" fill="#94a3b8" font-family="sans-serif" text-anchor="middle">9А</text>
|
||
<rect x="170" y="30" width="22" height="55" rx="2" fill="#dc2626"/>
|
||
<text x="181" y="26" font-size="7" fill="#dc2626" font-family="sans-serif" text-anchor="middle">Стартер</text>
|
||
<text x="181" y="100" font-size="6.5" fill="#94a3b8" font-family="sans-serif" text-anchor="middle">200-300А</text>
|
||
<rect x="255" y="10" width="22" height="75" rx="2" fill="#7c3aed"/>
|
||
<text x="266" y="7" font-size="7" fill="#7c3aed" font-family="sans-serif" text-anchor="middle">Молния</text>
|
||
<text x="266" y="100" font-size="6.5" fill="#94a3b8" font-family="sans-serif" text-anchor="middle">30000А</text>
|
||
<text x="20" y="109" font-size="6.5" fill="#64748b" font-family="sans-serif">0</text>
|
||
<text x="283" y="109" font-size="6.5" fill="#64748b" font-family="sans-serif">I, А (лог. масштаб)</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>$I = q/t$ — сила тока = заряд ÷ время. Больший заряд за то же время → больший ток.</li>
|
||
<li>1 Кл = 1 А × 1 с — отсюда определение кулона через ток!</li>
|
||
<li>Направление тока <b>противоположно</b> движению электронов (в металлах).</li>
|
||
<li>Мощный ток (свыше 0,1 А через тело человека) — смертельно опасен!</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Сила тока $I = q/t$</div>
|
||
<div class="idiag">
|
||
<h3>📊 Поток электронов в проводнике</h3>
|
||
<canvas id="cv20" style="width:100%;height:160px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:200px">
|
||
<span class="slider-lbl">Сила тока $I$:</span>
|
||
<input type="range" id="sl20I" min="0" max="5" step="0.1" value="1" style="flex:1" oninput="lbl20I.textContent=(+this.value).toFixed(1)+' А';upd20();">
|
||
<span class="slider-val"><span id="lbl20I">1.0 А</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="idiag-result" id="res20">$N = I/e = 1{,}0/(1{,}6 \times 10^{-19}) \approx 6{,}25 \times 10^{18}$ электронов/с</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §20</div>
|
||
<ul class="key-points-list">
|
||
<li>Сила тока: $I = q/t$ — заряд, проходящий через сечение проводника за единицу времени. Единица: ампер (А).</li>
|
||
<li>1 А = 1 Кл/с; откуда: 1 Кл = 1 А × 1 с (определение кулона через ток).</li>
|
||
<li>Направление тока по договорённости — от «+» к «−» во внешней цепи; в металлах электроны движутся в <b>противоположном</b> направлении.</li>
|
||
<li>Ток свыше 0,1 А через тело человека — смертельно опасен!</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §21 -->
|
||
<div class="content" id="tab-ref21">
|
||
<div class="para-hero ph-21">
|
||
<div class="ph-label">§21 · Физика 8 кл</div>
|
||
<h2>Электрическая цепь. Измерение силы тока и напряжения</h2>
|
||
<div class="ph-desc">Амперметр — последовательно (в разрыв). Вольтметр — параллельно. Соблюдать полярность.</div>
|
||
<div class="ph-tags"><span class="ph-tag">Ⓐ последовательно</span><span class="ph-tag">Ⓥ параллельно</span><span class="ph-tag">⚡ соблюдать полярность</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-circle-nodes"></i> §21. Электрическая цепь. Измерение силы тока и напряжения</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Звенья электрической цепи</h3>
|
||
<div class="main-f" style="font-size:.82rem">источник + нагрузка + провода + ключ</div>
|
||
<ul style="font-size:.83rem;color:var(--muted);line-height:1.9;padding-left:16px;margin-top:6px">
|
||
<li><b>Источник тока</b> — создаёт и поддерживает напряжение</li>
|
||
<li><b>Нагрузка (потребитель)</b> — лампа, двигатель, нагреватель</li>
|
||
<li><b>Провода</b> — соединяют звенья</li>
|
||
<li><b>Ключ (выключатель)</b> — замыкает/размыкает цепь</li>
|
||
</ul>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Измерительные приборы</h3>
|
||
<div class="main-f" style="font-size:.82rem">Ⓐ последовательно · Ⓥ параллельно</div>
|
||
<p><b>Амперметр (A)</b> — измеряет силу тока. Включается последовательно (в разрыв цепи). Имеет малое сопротивление.</p>
|
||
<p><b>Вольтметр (V)</b> — измеряет напряжение. Включается параллельно нужному участку. Имеет большое сопротивление.</p>
|
||
<p>⚠️ Оба прибора: соблюдать <b>полярность</b> («+» к «+» источника)!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag-2col">
|
||
<div class="idiag">
|
||
<h3>⚡ Условные обозначения на схемах</h3>
|
||
<svg width="100%" viewBox="0 0 200 140" style="display:block">
|
||
<line x1="10" y1="15" x2="35" y2="15" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<line x1="35" y1="10" x2="35" y2="20" stroke="#94a3b8" stroke-width="2"/>
|
||
<line x1="38" y1="7" x2="38" y2="23" stroke="#94a3b8" stroke-width="3"/>
|
||
<line x1="38" y1="15" x2="55" y2="15" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<text x="34" y="8" font-size="7" fill="#94a3b8" font-family="sans-serif">−</text>
|
||
<text x="40" y="8" font-size="7" fill="#94a3b8" font-family="sans-serif">+</text>
|
||
<text x="30" y="32" text-anchor="middle" font-size="8" fill="#64748b" font-family="sans-serif">источник тока</text>
|
||
<line x1="10" y1="55" x2="25" y2="55" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<circle cx="25" cy="55" r="2" fill="#94a3b8"/>
|
||
<line x1="27" y1="55" x2="42" y2="47" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<circle cx="43" cy="55" r="2" fill="#94a3b8"/>
|
||
<line x1="43" y1="55" x2="55" y2="55" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<text x="30" y="72" text-anchor="middle" font-size="8" fill="#64748b" font-family="sans-serif">ключ (разомкн.)</text>
|
||
<line x1="10" y1="95" x2="25" y2="95" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<circle cx="35" cy="95" r="10" fill="none" stroke="#fbbf24" stroke-width="1.5"/>
|
||
<line x1="29" y1="89" x2="41" y2="101" stroke="#fbbf24" stroke-width="1.5"/>
|
||
<line x1="41" y1="89" x2="29" y2="101" stroke="#fbbf24" stroke-width="1.5"/>
|
||
<line x1="45" y1="95" x2="55" y2="95" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<text x="30" y="115" text-anchor="middle" font-size="8" fill="#64748b" font-family="sans-serif">лампа</text>
|
||
<line x1="100" y1="15" x2="115" y2="15" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<circle cx="125" cy="15" r="10" fill="none" stroke="#22c55e" stroke-width="1.5"/>
|
||
<text x="125" y="19" text-anchor="middle" font-size="9" fill="#22c55e" font-family="sans-serif" font-weight="bold">A</text>
|
||
<line x1="135" y1="15" x2="150" y2="15" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<text x="125" y="35" text-anchor="middle" font-size="8" fill="#64748b" font-family="sans-serif">амперметр</text>
|
||
<text x="125" y="45" text-anchor="middle" font-size="7" fill="#22c55e" font-family="sans-serif">(последовательно)</text>
|
||
<line x1="100" y1="75" x2="115" y2="75" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<circle cx="125" cy="75" r="10" fill="none" stroke="#f97316" stroke-width="1.5"/>
|
||
<text x="125" y="79" text-anchor="middle" font-size="9" fill="#f97316" font-family="sans-serif" font-weight="bold">V</text>
|
||
<line x1="135" y1="75" x2="150" y2="75" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<text x="125" y="95" text-anchor="middle" font-size="8" fill="#64748b" font-family="sans-serif">вольтметр</text>
|
||
<text x="125" y="105" text-anchor="middle" font-size="7" fill="#f97316" font-family="sans-serif">(параллельно)</text>
|
||
<line x1="100" y1="125" x2="110" y2="125" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<rect x="110" y="120" width="25" height="10" rx="2" fill="none" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<line x1="135" y1="125" x2="150" y2="125" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<text x="125" y="140" text-anchor="middle" font-size="8" fill="#64748b" font-family="sans-serif">резистор</text>
|
||
</svg>
|
||
</div>
|
||
<div class="idiag">
|
||
<h3>💡 Схема простейшей цепи</h3>
|
||
<svg width="100%" viewBox="0 0 200 160" style="display:block">
|
||
<line x1="30" y1="30" x2="170" y2="30" stroke="#94a3b8" stroke-width="2"/>
|
||
<line x1="170" y1="30" x2="170" y2="130" stroke="#94a3b8" stroke-width="2"/>
|
||
<line x1="170" y1="130" x2="30" y2="130" stroke="#94a3b8" stroke-width="2"/>
|
||
<line x1="30" y1="130" x2="30" y2="30" stroke="#94a3b8" stroke-width="2"/>
|
||
<line x1="30" y1="65" x2="30" y2="95" stroke="#94a3b8" stroke-width="1"/>
|
||
<line x1="24" y1="70" x2="36" y2="70" stroke="#94a3b8" stroke-width="2.5"/>
|
||
<line x1="26" y1="78" x2="34" y2="78" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<text x="14" y="68" font-size="7" fill="#fbbf24" font-family="sans-serif">+</text>
|
||
<text x="14" y="81" font-size="7" fill="#94a3b8" font-family="sans-serif">−</text>
|
||
<text x="30" y="145" text-anchor="middle" font-size="8" fill="#64748b" font-family="sans-serif">источник</text>
|
||
<circle cx="80" cy="30" r="2.5" fill="#94a3b8"/>
|
||
<line x1="82" y1="30" x2="97" y2="22" stroke="#22c55e" stroke-width="2"/>
|
||
<circle cx="100" cy="30" r="2.5" fill="#94a3b8"/>
|
||
<text x="90" y="17" text-anchor="middle" font-size="7" fill="#22c55e" font-family="sans-serif">К</text>
|
||
<circle cx="140" cy="30" r="8" fill="none" stroke="#22c55e" stroke-width="1.5"/>
|
||
<text x="140" y="34" text-anchor="middle" font-size="8" fill="#22c55e" font-family="sans-serif" font-weight="bold">A</text>
|
||
<circle cx="170" cy="80" r="10" fill="none" stroke="#fbbf24" stroke-width="1.5"/>
|
||
<line x1="164" y1="74" x2="176" y2="86" stroke="#fbbf24" stroke-width="1.5"/>
|
||
<line x1="176" y1="74" x2="164" y2="86" stroke="#fbbf24" stroke-width="1.5"/>
|
||
<line x1="150" y1="90" x2="150" y2="115" stroke="#f97316" stroke-width="1" stroke-dasharray="3,2"/>
|
||
<line x1="150" y1="115" x2="190" y2="115" stroke="#f97316" stroke-width="1" stroke-dasharray="3,2"/>
|
||
<line x1="190" y1="115" x2="190" y2="70" stroke="#f97316" stroke-width="1" stroke-dasharray="3,2"/>
|
||
<line x1="190" y1="70" x2="175" y2="70" stroke="#f97316" stroke-width="1" stroke-dasharray="3,2"/>
|
||
<circle cx="170" cy="115" r="7" fill="none" stroke="#f97316" stroke-width="1.5"/>
|
||
<text x="170" y="119" text-anchor="middle" font-size="7" fill="#f97316" font-family="sans-serif" font-weight="bold">V</text>
|
||
<polygon points="100,27 93,23 93,31" fill="#fbbf24" opacity=".5"/>
|
||
<text x="100" y="15" text-anchor="middle" font-size="6.5" fill="#fbbf24" font-family="sans-serif">→ ток</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li><b>Амперметр</b> — последовательно (в разрыв), малое R, соблюдать полярность.</li>
|
||
<li><b>Вольтметр</b> — параллельно участку, большое R, соблюдать полярность.</li>
|
||
<li>Нельзя превышать предел измерений прибора!</li>
|
||
<li>Амперметр, включённый параллельно — это фактически короткое замыкание.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Электрическая цепь с амперметром и вольтметром</div>
|
||
<div class="idiag">
|
||
<h3>🔌 Замкни цепь и следи за показаниями приборов</h3>
|
||
<canvas id="cv21" style="width:100%;height:280px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<button class="btn btn-pri" id="btn21key" onclick="toggle21()">🔑 Замкнуть ключ</button>
|
||
<div class="slider-row" style="flex:1;min-width:180px">
|
||
<span class="slider-lbl">$U$ источника:</span>
|
||
<input type="range" id="sl21U" min="1" max="12" value="6" style="flex:1" oninput="lbl21U.textContent=this.value+' В';upd21();">
|
||
<span class="slider-val"><span id="lbl21U">6 В</span></span>
|
||
</div>
|
||
<div class="slider-row" style="flex:1;min-width:180px">
|
||
<span class="slider-lbl">$R$ нагрузки:</span>
|
||
<input type="range" id="sl21R" min="2" max="24" value="6" style="flex:1" oninput="lbl21R.textContent=this.value+' Ом';upd21();">
|
||
<span class="slider-val"><span id="lbl21R">6 Ом</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="idiag-result" id="res21">Цепь разомкнута: $I = 0$, $U_\text{нагр} = 0$</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §21</div>
|
||
<ul class="key-points-list">
|
||
<li>Электрическая цепь: источник + нагрузка + провода + ключ. Ток идёт только в <b>замкнутой</b> цепи.</li>
|
||
<li><b>Амперметр</b> (А) включается <b>последовательно</b> (в разрыв цепи), имеет малое сопротивление.</li>
|
||
<li><b>Вольтметр</b> (V) включается <b>параллельно</b> измеряемому участку, имеет большое сопротивление.</li>
|
||
<li>Оба прибора: соблюдать полярность («+» прибора к «+» источника) и не превышать предел измерений!</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §22 -->
|
||
<div class="content" id="tab-ref22">
|
||
<div class="para-hero ph-22">
|
||
<div class="ph-label">§22 · Физика 8 кл</div>
|
||
<h2>Связь силы тока и напряжения. Закон Ома</h2>
|
||
<div class="ph-formula">$I = U/R$</div>
|
||
<div class="ph-desc">Сила тока прямо пропорциональна напряжению и обратно пропорциональна сопротивлению.</div>
|
||
<div class="ph-tags"><span class="ph-tag">$I = U/R$ [А]</span><span class="ph-tag">$R = U/I$ [Ом]</span><span class="ph-tag">📈 ВАХ — прямая</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-wave-square"></i> §22. Закон Ома для участка цепи</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Закон Ома (1826)</h3>
|
||
<div class="main-f">$I = U/R$</div>
|
||
<p>Сила тока прямо пропорциональна напряжению и обратно пропорциональна сопротивлению участка цепи.</p>
|
||
<p>$R = U/I$ — сопротивление проводника. $U = IR$ — напряжение на участке.</p>
|
||
<p>Единица: $1\ \text{Ом} = 1\ \text{В}/\text{А}$</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Сопротивление R</h3>
|
||
<div class="main-f">$R = U/I$</div>
|
||
<p>Сопротивление — мера противодействия проводника движению зарядов. Зависит от материала, размеров, температуры.</p>
|
||
<p><b>Резисторы</b> — элементы с заданным сопротивлением.</p>
|
||
<p>⚠️ <b>Короткое замыкание</b>: R→0 → I→∞ → пожар!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📈 Вольт-амперная характеристика (ВАХ)</h3>
|
||
<svg width="100%" viewBox="0 0 260 130" style="display:block">
|
||
<line x1="30" y1="110" x2="245" y2="110" stroke="var(--border)" stroke-width="1.5"/>
|
||
<line x1="30" y1="10" x2="30" y2="110" stroke="var(--border)" stroke-width="1.5"/>
|
||
<polygon points="245,110 237,106 237,114" fill="var(--border)"/>
|
||
<polygon points="30,10 26,18 34,18" fill="var(--border)"/>
|
||
<text x="250" y="114" font-size="9" fill="#64748b" font-family="sans-serif">U, В</text>
|
||
<text x="20" y="9" font-size="9" fill="#64748b" font-family="sans-serif">I</text>
|
||
<line x1="30" y1="110" x2="220" y2="20" stroke="#1d4ed8" stroke-width="2.5"/>
|
||
<text x="165" y="18" font-size="8.5" fill="#1d4ed8" font-family="sans-serif">R₁ малое → крутая линия</text>
|
||
<line x1="30" y1="110" x2="220" y2="70" stroke="#6366f1" stroke-width="2" opacity=".7"/>
|
||
<text x="195" y="68" font-size="8" fill="#6366f1" font-family="sans-serif">R₂ большое</text>
|
||
<text x="27" y="123" font-size="8" fill="#64748b" font-family="sans-serif">0</text>
|
||
<text x="10" y="114" font-size="7" fill="#94a3b8" font-family="sans-serif">I=0</text>
|
||
<text x="60" y="95" font-size="7.5" fill="#94a3b8" font-family="sans-serif">tg α = 1/R</text>
|
||
</svg>
|
||
<p style="font-size:.8rem;color:var(--muted)">Угол наклона ВАХ: больший наклон = меньшее сопротивление. Прямая через начало координат = закон Ома выполняется (омический проводник).</p>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>$I = U/R$ — ток растёт при росте $U$ и уменьшается при росте $R$.</li>
|
||
<li>Сопротивление проводника — <b>его свойство</b>: не зависит от тока и напряжения (для омических проводников).</li>
|
||
<li>Короткое замыкание (КЗ): $R \approx 0$ → ток очень большой → нагрев → пожар. Защита — предохранители!</li>
|
||
<li>ВАХ резистора — прямая линия. Уклон = 1/R.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="life-grid">
|
||
<div class="life-item"><div class="li-icon">💡</div><div class="li-title">Нить накала лампы</div><div class="li-desc">$R = 440\ \text{Ом}$ при 220 В → $I = 0{,}5\ \text{А}$; $P = 110\ \text{Вт}$</div></div>
|
||
<div class="life-item"><div class="li-icon">🔌</div><div class="li-title">Удлинитель</div><div class="li-desc">Малое R проводов → небольшое напряжение теряется в самом проводе</div></div>
|
||
<div class="life-item"><div class="li-icon">⚡</div><div class="li-title">Предохранитель</div><div class="li-desc">Плавкий металл с низкой t_пл: при КЗ → ток велик → плавится → цепь разрывается</div></div>
|
||
<div class="life-item"><div class="li-icon">🎛️</div><div class="li-title">Потенциометр</div><div class="li-desc">Переменный резистор — регулятор громкости, яркости, скорости мотора</div></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Закон Ома (виртуальная лаборатория)</div>
|
||
<div class="idiag">
|
||
<h3>🧪 Виртуальная лаборатория: $I = U/R$ с приборами</h3>
|
||
<canvas id="cv22" style="width:100%;height:300px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:200px">
|
||
<span class="slider-lbl">🔋 U:</span>
|
||
<input type="range" id="sl22U" min="0" max="24" step="0.5" value="12" style="flex:1" oninput="lbl22U.textContent=this.value+' В';upd22();">
|
||
<span class="slider-val"><span id="lbl22U">12 В</span></span>
|
||
</div>
|
||
<div class="slider-row" style="flex:1;min-width:200px">
|
||
<span class="slider-lbl">⚙️ R:</span>
|
||
<input type="range" id="sl22R" min="1" max="50" value="6" style="flex:1" oninput="lbl22R.textContent=this.value+' Ом';upd22();">
|
||
<span class="slider-val"><span id="lbl22R">6 Ом</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="ctrl-row" style="margin-top:8px;gap:8px">
|
||
<span class="val-chip" id="chip22I">A: 0.00 А</span>
|
||
<span class="val-chip" id="chip22V">V: 0.0 В</span>
|
||
<span class="val-chip" id="chip22P">P: 0.0 Вт</span>
|
||
</div>
|
||
<div class="idiag-result" id="res22">$I = U/R = 12/6 = 2{,}00$ А</div>
|
||
<p class="cv-cap"><i class="fas fa-info-circle"></i> Амперметр (A) подключён последовательно — показывает ток I. Вольтметр (V) параллельно резистору — показывает напряжение U на нём. Меняй U и R слайдерами, наблюдай за стрелками!</p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §22</div>
|
||
<ul class="key-points-list">
|
||
<li>Закон Ома: $I = U/R$ — ток прямо пропорционален напряжению и обратно пропорционален сопротивлению.</li>
|
||
<li>Сопротивление $R = U/I$ — свойство проводника, не зависит от тока и напряжения (для омических проводников).</li>
|
||
<li>ВАХ резистора — прямая через начало координат; угол наклона $\tan\alpha = 1/R$.</li>
|
||
<li>Короткое замыкание (КЗ): $R \to 0$ → ток очень большой → нагрев → пожар. Защита — предохранители!</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §23 -->
|
||
<div class="content" id="tab-ref23">
|
||
<div class="para-hero ph-23">
|
||
<div class="ph-label">§23 · Физика 8 кл</div>
|
||
<h2>Единица сопротивления. Расчёт сопротивления</h2>
|
||
<div class="ph-formula">$R = \rho l/S$</div>
|
||
<div class="ph-desc">Сопротивление зависит от материала, длины и площади сечения проводника.</div>
|
||
<div class="ph-tags"><span class="ph-tag">$R = \rho l/S$</span><span class="ph-tag">$[\rho]$ = Ом·мм²/м</span><span class="ph-tag">🔬 сверхпроводимость</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-ruler"></i> §23. Единица сопротивления. Расчёт сопротивления</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Формула сопротивления проводника</h3>
|
||
<div class="main-f">$R = \rho l/S$</div>
|
||
<p>$\rho$ — удельное сопротивление вещества [Ом·мм²/м]</p>
|
||
<p>$l$ — длина проводника [м]</p>
|
||
<p>$S$ — площадь поперечного сечения [мм²]</p>
|
||
<p>↑$l$ → ↑$R$; ↑$S$ → ↓$R$</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Удельное сопротивление ρ</h3>
|
||
<div class="main-f" style="font-size:.82rem">R проводника l=1м, S=1мм²</div>
|
||
<table style="width:100%;font-size:.78rem;border-collapse:collapse;margin-top:6px">
|
||
<tr><td style="padding:3px">Серебро</td><td style="padding:3px;font-weight:700">0,016</td><td style="padding:3px">Медь</td><td style="padding:3px;font-weight:700">0,017</td></tr>
|
||
<tr><td>Алюминий</td><td style="font-weight:700">0,028</td><td>Железо</td><td style="font-weight:700">0,10</td></tr>
|
||
<tr><td>Нихром</td><td style="font-weight:700">1,10</td><td>Константан</td><td style="font-weight:700">0,50</td></tr>
|
||
</table>
|
||
<p style="font-size:.75rem;color:var(--muted);margin-top:4px">Единица ρ: Ом·мм²/м</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📊 Визуализация зависимостей сопротивления</h3>
|
||
<svg width="100%" viewBox="0 0 300 100" style="display:block">
|
||
<text x="60" y="12" text-anchor="middle" font-size="8.5" fill="#94a3b8" font-family="sans-serif" font-weight="bold">R зависит от l</text>
|
||
<rect x="10" y="20" width="30" height="15" rx="3" fill="#1d4ed8" opacity=".7"/>
|
||
<text x="25" y="50" text-anchor="middle" font-size="7" fill="#94a3b8" font-family="sans-serif">l = 1м</text>
|
||
<text x="25" y="60" text-anchor="middle" font-size="8" fill="#1d4ed8" font-family="sans-serif" font-weight="bold">R</text>
|
||
<rect x="60" y="20" width="80" height="15" rx="3" fill="#1d4ed8" opacity=".7"/>
|
||
<text x="100" y="50" text-anchor="middle" font-size="7" fill="#94a3b8" font-family="sans-serif">l = 4м</text>
|
||
<text x="100" y="60" text-anchor="middle" font-size="8" fill="#1d4ed8" font-family="sans-serif" font-weight="bold">4R</text>
|
||
<text x="60" y="80" text-anchor="middle" font-size="7.5" fill="#6366f1" font-family="sans-serif">R ∝ l (в 4 раза длиннее → R в 4 раза больше)</text>
|
||
<text x="230" y="12" text-anchor="middle" font-size="8.5" fill="#94a3b8" font-family="sans-serif" font-weight="bold">R зависит от S</text>
|
||
<rect x="165" y="28" width="30" height="5" rx="2" fill="#0891b2" opacity=".8"/>
|
||
<text x="180" y="48" text-anchor="middle" font-size="7" fill="#94a3b8" font-family="sans-serif">S малое</text>
|
||
<text x="180" y="58" text-anchor="middle" font-size="8" fill="#0891b2" font-family="sans-serif" font-weight="bold">R большое</text>
|
||
<rect x="215" y="22" width="30" height="17" rx="2" fill="#0891b2" opacity=".8"/>
|
||
<text x="230" y="48" text-anchor="middle" font-size="7" fill="#94a3b8" font-family="sans-serif">S большое</text>
|
||
<text x="230" y="58" text-anchor="middle" font-size="8" fill="#0891b2" font-family="sans-serif" font-weight="bold">R малое</text>
|
||
<text x="210" y="80" text-anchor="middle" font-size="7.5" fill="#0369a1" font-family="sans-serif">R ∝ 1/S (шире провод → меньше сопротивление)</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="insight-box">
|
||
<div class="insight-title"><i class="fas fa-lightbulb"></i> Сверхпроводимость</div>
|
||
<p>При очень низких температурах (−269°C для Hg) сопротивление некоторых металлов падает до нуля! Ток в сверхпроводящем кольце течёт годами без потерь. Применение: сверхмощные магниты в МРТ и ускорителях частиц, сверхпроводящие кабели для передачи электроэнергии без потерь.</p>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>$R = \rho l/S$: длиннее → больше сопротивление; толще → меньше сопротивление.</li>
|
||
<li>Удельное сопротивление $\rho$ — свойство вещества (не конкретного проводника).</li>
|
||
<li>Нихром и константан — специальные сплавы с высоким $\rho$: нагревательные элементы, реостаты.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Калькулятор $R = \rho l/S$</div>
|
||
<div class="idiag">
|
||
<h3>📐 Меняй параметры — наблюдай сопротивление</h3>
|
||
<canvas id="cv23" style="width:100%;height:150px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<select id="sel23mat" onchange="upd23()" style="padding:6px 10px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="0.017">🟤 Медь (ρ=0,017)</option>
|
||
<option value="0.028">⚙️ Алюминий (ρ=0,028)</option>
|
||
<option value="0.10">🔩 Железо (ρ=0,10)</option>
|
||
<option value="0.50">🔵 Константан (ρ=0,50)</option>
|
||
<option value="1.10">🌡️ Нихром (ρ=1,10)</option>
|
||
</select>
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">$l$:</span>
|
||
<input type="range" id="sl23l" min="0.1" max="10" step="0.1" value="1" style="flex:1" oninput="lbl23l.textContent=(+this.value).toFixed(1)+' м';upd23();">
|
||
<span class="slider-val"><span id="lbl23l">1.0 м</span></span>
|
||
</div>
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">$S$:</span>
|
||
<input type="range" id="sl23S" min="0.1" max="5" step="0.1" value="1" style="flex:1" oninput="lbl23S.textContent=(+this.value).toFixed(1)+' мм²';upd23();">
|
||
<span class="slider-val"><span id="lbl23S">1.0 мм²</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="idiag-result" id="res23">$R = 0{,}017$ Ом</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §23</div>
|
||
<ul class="key-points-list">
|
||
<li>Сопротивление проводника: $R = \rho l/S$ — зависит от материала ($\rho$), длины ($l$) и площади сечения ($S$).</li>
|
||
<li>Длиннее провод → больше $R$; толще провод (больше $S$) → меньше $R$.</li>
|
||
<li>Удельное сопротивление $\rho$ — свойство <b>вещества</b>: для меди $\rho = 0{,}017$ Ом·мм²/м, для нихрома $\rho = 1{,}10$.</li>
|
||
<li>Сверхпроводимость: при очень низких температурах сопротивление некоторых металлов падает до нуля.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §24 -->
|
||
<div class="content" id="tab-ref24">
|
||
<div class="para-hero ph-24">
|
||
<div class="ph-label">§24 · Физика 8 кл</div>
|
||
<h2>Последовательное соединение. Реостат</h2>
|
||
<div class="ph-desc">При последовательном: I одинаков, U и R складываются. Реостат — переменный резистор.</div>
|
||
<div class="ph-tags"><span class="ph-tag">$I_1 = I_2 = I$</span><span class="ph-tag">$U = U_1+U_2$</span><span class="ph-tag">$R = R_1+R_2$</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-link"></i> §24. Последовательное соединение. Реостат</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Законы последовательного соединения</h3>
|
||
<div class="main-f" style="font-size:.82rem">$I_1 = I_2 = I$ · $U = U_1 + U_2$ · $R = R_1 + R_2$</div>
|
||
<p><b>Ток одинаков</b> на всех участках (через один участок за одно время проходит одинаковый заряд).</p>
|
||
<p><b>Напряжения складываются</b>: $U_i = IR_i$; чем больше $R$ — тем больше доля напряжения.</p>
|
||
<p><b>Сопротивления складываются</b>: для N одинаковых $R = NR_1$.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Реостат</h3>
|
||
<div class="main-f" style="font-size:.85rem">переменный резистор</div>
|
||
<p>Реостат — устройство для плавного изменения сопротивления в цепи (и следовательно, тока).</p>
|
||
<p>Обмотка из проволоки с высоким $\rho$ (нихром), ползунок выбирает рабочую длину $l$.</p>
|
||
<p>Применение: регуляторы яркости, скорости двигателей, зарядные устройства.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📌 Схема последовательного соединения</h3>
|
||
<svg width="100%" viewBox="0 0 280 80" style="display:block">
|
||
<line x1="10" y1="40" x2="60" y2="40" stroke="#475569" stroke-width="2"/>
|
||
<line x1="100" y1="40" x2="140" y2="40" stroke="#475569" stroke-width="2"/>
|
||
<line x1="180" y1="40" x2="220" y2="40" stroke="#475569" stroke-width="2"/>
|
||
<line x1="260" y1="40" x2="280" y2="40" stroke="#475569" stroke-width="2"/>
|
||
<rect x="60" y="32" width="40" height="16" rx="3" fill="none" stroke="#1d4ed8" stroke-width="2"/>
|
||
<text x="80" y="44" text-anchor="middle" font-size="9" fill="#1d4ed8" font-family="sans-serif" font-weight="bold">R₁</text>
|
||
<rect x="140" y="32" width="40" height="16" rx="3" fill="none" stroke="#6366f1" stroke-width="2"/>
|
||
<text x="160" y="44" text-anchor="middle" font-size="9" fill="#6366f1" font-family="sans-serif" font-weight="bold">R₂</text>
|
||
<line x1="220" y1="35" x2="220" y2="45" stroke="#94a3b8" stroke-width="2"/>
|
||
<line x1="225" y1="32" x2="225" y2="48" stroke="#94a3b8" stroke-width="3"/>
|
||
<text x="222" y="28" font-size="7" fill="#94a3b8" font-family="sans-serif">−</text>
|
||
<text x="227" y="28" font-size="7" fill="#fbbf24" font-family="sans-serif">+</text>
|
||
<polygon points="35,37 25,33 25,43" fill="#fbbf24" opacity=".7"/>
|
||
<text x="35" y="30" font-size="7.5" fill="#fbbf24" font-family="sans-serif">I</text>
|
||
<polygon points="118,37 108,33 108,43" fill="#fbbf24" opacity=".7"/>
|
||
<text x="118" y="30" font-size="7.5" fill="#fbbf24" font-family="sans-serif">I</text>
|
||
<text x="80" y="68" text-anchor="middle" font-size="7.5" fill="#1d4ed8" font-family="sans-serif">U₁ = IR₁</text>
|
||
<text x="160" y="68" text-anchor="middle" font-size="7.5" fill="#6366f1" font-family="sans-serif">U₂ = IR₂</text>
|
||
<text x="240" y="70" font-size="7.5" fill="#94a3b8" font-family="sans-serif">U=U₁+U₂</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Ток одинаков во всей последовательной цепи — это следствие закона сохранения заряда.</li>
|
||
<li>Напряжение делится <b>пропорционально сопротивлениям</b>: $U_1/U_2 = R_1/R_2$.</li>
|
||
<li>Новогодние лампочки в гирлянде — последовательное соединение. Если одна сгорела — все гаснут!</li>
|
||
<li>Реостат включают последовательно с нагрузкой для регулировки тока.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="life-grid">
|
||
<div class="life-item"><div class="li-icon">🎄</div><div class="li-title">Гирлянда</div><div class="li-desc">Лампочки последовательно: перегорела одна — гаснет вся гирлянда</div></div>
|
||
<div class="life-item"><div class="li-icon">🎛️</div><div class="li-title">Реостат</div><div class="li-desc">Последовательно с нагрузкой: двигает ползунок → меняет R → меняет I</div></div>
|
||
<div class="life-item"><div class="li-icon">🔋</div><div class="li-title">Батарейки «в ряд»</div><div class="li-desc">Батарейки последовательно: напряжения складываются (1,5+1,5=3 В)</div></div>
|
||
<div class="life-item"><div class="li-icon">💡</div><div class="li-title">Делитель напряжения</div><div class="li-desc">Два резистора последовательно делят напряжение пропорционально R</div></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Последовательная цепь</div>
|
||
<div class="idiag">
|
||
<h3>🔗 Меняй резисторы — наблюдай U₁, U₂, I</h3>
|
||
<canvas id="cv24" style="width:100%;height:200px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">$U$:</span>
|
||
<input type="range" id="sl24U" min="1" max="12" value="6" style="flex:1" oninput="lbl24U.textContent=this.value+' В';upd24();">
|
||
<span class="slider-val"><span id="lbl24U">6 В</span></span>
|
||
</div>
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">$R_1$:</span>
|
||
<input type="range" id="sl24R1" min="1" max="50" value="10" style="flex:1" oninput="lbl24R1.textContent=this.value+' Ом';upd24();">
|
||
<span class="slider-val"><span id="lbl24R1">10 Ом</span></span>
|
||
</div>
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">$R_2$:</span>
|
||
<input type="range" id="sl24R2" min="1" max="50" value="10" style="flex:1" oninput="lbl24R2.textContent=this.value+' Ом';upd24();">
|
||
<span class="slider-val"><span id="lbl24R2">10 Ом</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="idiag-result" id="res24">$R = 20$ Ом; $I = 0{,}30$ А; $U_1 = U_2 = 3{,}0$ В</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §24</div>
|
||
<ul class="key-points-list">
|
||
<li>При последовательном соединении ток одинаков: $I_1 = I_2 = I$ — следствие закона сохранения заряда.</li>
|
||
<li>Напряжения складываются: $U = U_1 + U_2$; они делятся пропорционально сопротивлениям.</li>
|
||
<li>Суммарное сопротивление: $R = R_1 + R_2$ — всегда больше каждого из слагаемых.</li>
|
||
<li>Реостат — переменный резистор, включается последовательно для регулировки тока в цепи.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §25 -->
|
||
<div class="content" id="tab-ref25">
|
||
<div class="para-hero ph-25">
|
||
<div class="ph-label">§25 · Физика 8 кл</div>
|
||
<h2>Параллельное соединение проводников</h2>
|
||
<div class="ph-desc">При параллельном: U одинаково, токи складываются, R меньше наименьшего.</div>
|
||
<div class="ph-tags"><span class="ph-tag">$U_1 = U_2 = U$</span><span class="ph-tag">$I = I_1+I_2$</span><span class="ph-tag">$R < R_{min}$</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-code-branch"></i> §25. Параллельное соединение проводников</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Законы параллельного соединения</h3>
|
||
<div class="main-f" style="font-size:.82rem">$U_1 = U_2 = U$ · $I = I_1 + I_2$ · $\dfrac{1}{R} = \dfrac{1}{R_1} + \dfrac{1}{R_2}$</div>
|
||
<p><b>Напряжение одинаково</b> на всех параллельных ветвях (подключены к одним точкам).</p>
|
||
<p><b>Токи складываются</b>: $I_i = U/R_i$; через меньший $R$ — больший ток.</p>
|
||
<p><b>Общее R меньше</b> любого из параллельных: $R < R_{min}$.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Частные случаи</h3>
|
||
<div class="main-f" style="font-size:.85rem">$R = \dfrac{R_1 R_2}{R_1 + R_2}$</div>
|
||
<p>Для двух резисторов: $R = R_1 R_2 / (R_1 + R_2)$.</p>
|
||
<p>Для N одинаковых: $R = R_1 / N$.</p>
|
||
<p>Параллельное соединение <b>увеличивает суммарный ток</b> при том же напряжении.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📌 Схема параллельного соединения</h3>
|
||
<svg width="100%" viewBox="0 0 280 110" style="display:block">
|
||
<line x1="30" y1="15" x2="30" y2="95" stroke="#fbbf24" stroke-width="2.5"/>
|
||
<line x1="220" y1="15" x2="220" y2="95" stroke="#fbbf24" stroke-width="2.5"/>
|
||
<line x1="30" y1="30" x2="80" y2="30" stroke="#475569" stroke-width="2"/>
|
||
<rect x="80" y="22" width="50" height="16" rx="3" fill="none" stroke="#1d4ed8" stroke-width="2"/>
|
||
<text x="105" y="34" text-anchor="middle" font-size="9" fill="#1d4ed8" font-family="sans-serif" font-weight="bold">R₁</text>
|
||
<line x1="130" y1="30" x2="220" y2="30" stroke="#475569" stroke-width="2"/>
|
||
<polygon points="55,27 45,23 45,31" fill="#1d4ed8" opacity=".7"/>
|
||
<text x="60" y="22" font-size="7" fill="#1d4ed8" font-family="sans-serif">I₁=U/R₁</text>
|
||
<line x1="30" y1="80" x2="80" y2="80" stroke="#475569" stroke-width="2"/>
|
||
<rect x="80" y="72" width="50" height="16" rx="3" fill="none" stroke="#6366f1" stroke-width="2"/>
|
||
<text x="105" y="84" text-anchor="middle" font-size="9" fill="#6366f1" font-family="sans-serif" font-weight="bold">R₂</text>
|
||
<line x1="130" y1="80" x2="220" y2="80" stroke="#475569" stroke-width="2"/>
|
||
<polygon points="55,77 45,73 45,81" fill="#6366f1" opacity=".7"/>
|
||
<text x="60" y="71" font-size="7" fill="#6366f1" font-family="sans-serif">I₂=U/R₂</text>
|
||
<line x1="250" y1="30" x2="250" y2="80" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<line x1="244" y1="40" x2="256" y2="40" stroke="#94a3b8" stroke-width="2.5"/>
|
||
<line x1="247" y1="55" x2="253" y2="55" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<line x1="220" y1="30" x2="250" y2="30" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<line x1="220" y1="80" x2="250" y2="80" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<text x="258" y="38" font-size="7" fill="#fbbf24" font-family="sans-serif">+</text>
|
||
<text x="258" y="57" font-size="7" fill="#94a3b8" font-family="sans-serif">−</text>
|
||
<text x="20" y="60" font-size="7.5" fill="#fbbf24" font-family="sans-serif" text-anchor="middle" transform="rotate(-90,20,55)">I=I₁+I₂</text>
|
||
<text x="105" y="105" text-anchor="middle" font-size="7.5" fill="#94a3b8" font-family="sans-serif">U₁ = U₂ = U</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Параллельное соединение: $R < R_{min}$. Чем больше ветвей — тем меньше общее сопротивление.</li>
|
||
<li>Ток делится обратно пропорционально сопротивлениям: через меньший $R$ идёт больший ток.</li>
|
||
<li>В квартирной сети — <b>параллельное соединение</b>: каждый прибор получает 220 В независимо от других.</li>
|
||
<li>При добавлении параллельной ветви: общий ток растёт, напряжение — не меняется.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="life-grid">
|
||
<div class="life-item"><div class="li-icon">🏠</div><div class="li-title">Квартирная проводка</div><div class="li-desc">Все розетки — параллельно: каждый прибор получает 220 В, работает независимо</div></div>
|
||
<div class="life-item"><div class="li-icon">🚗</div><div class="li-title">Электрика автомобиля</div><div class="li-desc">Всё параллельно аккумулятору: включаешь свет — другие потребители продолжают работать</div></div>
|
||
<div class="life-item"><div class="li-icon">🔋</div><div class="li-title">Батарейки «параллельно»</div><div class="li-desc">Параллельно: U то же, но ёмкость растёт — дольше работают</div></div>
|
||
<div class="life-item"><div class="li-icon">💻</div><div class="li-title">USB-хаб</div><div class="li-desc">Все USB-порты параллельно: каждое устройство получает 5 В независимо</div></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Параллельная цепь</div>
|
||
<div class="idiag">
|
||
<h3>⚡ Меняй резисторы — наблюдай I₁, I₂ и общий ток</h3>
|
||
<canvas id="cv25" style="width:100%;height:220px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">$U$:</span>
|
||
<input type="range" id="sl25U" min="1" max="12" value="12" style="flex:1" oninput="lbl25U.textContent=this.value+' В';upd25();">
|
||
<span class="slider-val"><span id="lbl25U">12 В</span></span>
|
||
</div>
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">$R_1$:</span>
|
||
<input type="range" id="sl25R1" min="1" max="50" value="6" style="flex:1" oninput="lbl25R1.textContent=this.value+' Ом';upd25();">
|
||
<span class="slider-val"><span id="lbl25R1">6 Ом</span></span>
|
||
</div>
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">$R_2$:</span>
|
||
<input type="range" id="sl25R2" min="1" max="50" value="12" style="flex:1" oninput="lbl25R2.textContent=this.value+' Ом';upd25();">
|
||
<span class="slider-val"><span id="lbl25R2">12 Ом</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="idiag-result" id="res25">$I_1 = 2{,}0$ А; $I_2 = 1{,}0$ А; $I = 3{,}0$ А; $R = 4{,}0$ Ом</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §25</div>
|
||
<ul class="key-points-list">
|
||
<li>При параллельном соединении напряжение одинаково: $U_1 = U_2 = U$ — ветви подключены к одним и тем же точкам.</li>
|
||
<li>Токи складываются: $I = I_1 + I_2$; через меньший $R$ идёт больший ток.</li>
|
||
<li>Суммарное сопротивление меньше любого из параллельных: $\frac{1}{R} = \frac{1}{R_1} + \frac{1}{R_2}$, $R < R_{min}$.</li>
|
||
<li>Квартирная проводка — параллельное соединение: каждый прибор получает 220 В независимо от других.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §26 -->
|
||
<div class="content" id="tab-ref26">
|
||
<div class="para-hero ph-26">
|
||
<div class="ph-label">§26 · Физика 8 кл</div>
|
||
<h2>Работа и мощность электрического тока. Закон Джоуля—Ленца</h2>
|
||
<div class="ph-formula">$Q = I^2Rt$</div>
|
||
<div class="ph-desc">$A = IUt$. $P = IU$. $Q = I^2Rt$ — теплота, выделяемая в проводнике.</div>
|
||
<div class="ph-tags"><span class="ph-tag">$A = IUt$</span><span class="ph-tag">$P = IU$</span><span class="ph-tag">$Q = I^2Rt$</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-fire-flame-curved"></i> §26. Работа и мощность электрического тока. Закон Джоуля—Ленца</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Работа и мощность тока</h3>
|
||
<div class="main-f">$A = IUt$ $P = IU$</div>
|
||
<p>$A = IUt = I^2Rt = U^2t/R$ [Дж]</p>
|
||
<p>$P = IU = I^2R = U^2/R$ [Вт]</p>
|
||
<p>1 Вт = 1 Дж/с; 1 кВт·ч = $3{,}6 \times 10^6$ Дж</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Закон Джоуля—Ленца</h3>
|
||
<div class="main-f">$Q = I^2Rt$</div>
|
||
<p>Количество теплоты, выделяемое в проводнике с током, пропорционально квадрату тока, сопротивлению и времени.</p>
|
||
<p>Назван в честь Д. П. Джоуля и Э. X. Ленца (1841).</p>
|
||
<p>Применение: нагреватели, лампы накаливания.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>💡 Потребляемая мощность бытовых приборов</h3>
|
||
<svg width="100%" viewBox="0 0 300 90" style="display:block">
|
||
<line x1="20" y1="70" x2="285" y2="70" stroke="var(--border)" stroke-width="1.5"/>
|
||
<text x="285" y="75" font-size="7.5" fill="#64748b" font-family="sans-serif">Вт</text>
|
||
<rect x="22" y="57" width="7" height="13" rx="2" fill="#22c55e"/>
|
||
<text x="25" y="53" font-size="6.5" fill="#22c55e" font-family="sans-serif" text-anchor="middle">LED</text>
|
||
<text x="25" y="83" font-size="6.5" fill="#94a3b8" font-family="sans-serif" text-anchor="middle">10</text>
|
||
<rect x="55" y="50" width="14" height="20" rx="2" fill="#fbbf24"/>
|
||
<text x="62" y="46" font-size="6.5" fill="#fbbf24" font-family="sans-serif" text-anchor="middle">Лампа</text>
|
||
<text x="62" y="83" font-size="6.5" fill="#94a3b8" font-family="sans-serif" text-anchor="middle">60</text>
|
||
<rect x="95" y="44" width="18" height="26" rx="2" fill="#3b82f6"/>
|
||
<text x="104" y="40" font-size="6.5" fill="#3b82f6" font-family="sans-serif" text-anchor="middle">Холод.</text>
|
||
<text x="104" y="83" font-size="6.5" fill="#94a3b8" font-family="sans-serif" text-anchor="middle">150</text>
|
||
<rect x="140" y="30" width="22" height="40" rx="2" fill="#f97316"/>
|
||
<text x="151" y="26" font-size="6.5" fill="#f97316" font-family="sans-serif" text-anchor="middle">Утюг</text>
|
||
<text x="151" y="83" font-size="6.5" fill="#94a3b8" font-family="sans-serif" text-anchor="middle">1500</text>
|
||
<rect x="185" y="22" width="25" height="48" rx="2" fill="#ef4444"/>
|
||
<text x="197" y="18" font-size="6.5" fill="#ef4444" font-family="sans-serif" text-anchor="middle">Чайник</text>
|
||
<text x="197" y="83" font-size="6.5" fill="#94a3b8" font-family="sans-serif" text-anchor="middle">2000</text>
|
||
<rect x="232" y="12" width="28" height="58" rx="2" fill="#dc2626"/>
|
||
<text x="246" y="8" font-size="6.5" fill="#dc2626" font-family="sans-serif" text-anchor="middle">Стир.машина</text>
|
||
<text x="246" y="83" font-size="6.5" fill="#94a3b8" font-family="sans-serif" text-anchor="middle">2500</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>$A = IUt$: чем больше ток, напряжение или время — тем больше работа.</li>
|
||
<li>$Q = I^2Rt$: тепло пропорционально <b>квадрату тока</b>! Удвоение тока → тепла в 4 раза больше.</li>
|
||
<li>1 кВт·ч = $3{,}6$ МДж — единица электроэнергии на электросчётчике.</li>
|
||
<li>КПД электроприбора = $A_{\text{полезная}} / A_{\text{затраченная}}$. У нагревателей ≈ 99%; у ламп накаливания — ≈ 5%.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Закон Джоуля-Ленца</div>
|
||
<div class="idiag">
|
||
<h3>🌡️ Нагрев спирали: $Q = I^2Rt$ — крути ток и наблюдай</h3>
|
||
<canvas id="cv26" style="width:100%;height:260px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">⚡ I:</span>
|
||
<input type="range" id="sl26I" min="0.1" max="10" step="0.1" value="3" style="flex:1" oninput="lbl26I.textContent=(+this.value).toFixed(1)+' А';upd26();">
|
||
<span class="slider-val"><span id="lbl26I">3.0 А</span></span>
|
||
</div>
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">⚙️ R:</span>
|
||
<input type="range" id="sl26R" min="1" max="50" value="10" style="flex:1" oninput="lbl26R.textContent=this.value+' Ом';upd26();">
|
||
<span class="slider-val"><span id="lbl26R">10 Ом</span></span>
|
||
</div>
|
||
<button class="btn btn-pri" onclick="start26timer()">▶ Старт t</button>
|
||
<button class="btn btn-ghost" onclick="reset26timer()">↺ Сброс t</button>
|
||
</div>
|
||
<div class="ctrl-row" style="margin-top:8px;gap:8px">
|
||
<span class="val-chip" id="chip26P">P = 0 Вт</span>
|
||
<span class="val-chip" id="chip26Q">Q = 0 Дж</span>
|
||
<span class="val-chip" id="chip26T">t = 0 c</span>
|
||
<span class="val-chip" id="chip26Temp">θ = 20 °C</span>
|
||
</div>
|
||
<div class="idiag-result" id="res26">$P = I^2R = 90$ Вт; $Q = I^2Rt$ — нажми «Старт t»</div>
|
||
<p class="cv-cap"><i class="fas fa-info-circle"></i> Тепло, выделяемое за время t: $Q = I^2Rt$. Удвоить ток — тепла в 4 раза больше! Включи таймер и смотри, как нагревается спираль (термометр справа).</p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §26</div>
|
||
<ul class="key-points-list">
|
||
<li>Мощность тока: $P = IU = I^2R = U^2/R$ [Вт] — энергия, потребляемая за единицу времени.</li>
|
||
<li>Работа тока: $A = IUt = I^2Rt$ [Дж] — вся работа может переходить в тепло.</li>
|
||
<li>Закон Джоуля-Ленца: $Q = I^2Rt$ — тепло пропорционально <b>квадрату тока</b>; удвоение тока даёт тепла в 4 раза больше!</li>
|
||
<li>1 кВт·ч = $3{,}6 \times 10^6$ Дж — единица на электросчётчике; $A_\text{кВт·ч} = P[\text{кВт}] \times t[\text{ч}]$.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §27 -->
|
||
<div class="content" id="tab-ref27">
|
||
<div class="para-hero ph-27">
|
||
<div class="ph-label">§27 · Физика 8 кл</div>
|
||
<h2>Использование и экономия электроэнергии. Безопасность</h2>
|
||
<div class="ph-desc">Предохранители и автоматы защищают цепь. Заземление обеспечивает безопасность.</div>
|
||
<div class="ph-tags"><span class="ph-tag">⚠️ КЗ → предохранитель</span><span class="ph-tag">🔧 автоматический выключатель</span><span class="ph-tag">💡 экономия</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-shield-halved"></i> §27. Использование и экономия электроэнергии. Безопасность</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Учёт электроэнергии</h3>
|
||
<div class="main-f">1 кВт·ч = $3{,}6$ МДж</div>
|
||
<p><b>Киловатт-час</b> — практическая единица электроэнергии (на счётчике).</p>
|
||
<p>$A_\text{кВт·ч} = P\text{[кВт]} \times t\text{[ч]}$</p>
|
||
<p>Стоимость = $A_\text{кВт·ч} \times \text{тариф}$</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Защита от КЗ</h3>
|
||
<div class="main-f" style="font-size:.85rem">предохранитель · автомат</div>
|
||
<p><b>Плавкий предохранитель</b>: при токе выше номинала нить плавится → цепь разрывается.</p>
|
||
<p><b>Автоматический выключатель</b>: при КЗ или перегрузке выключается. Можно включить снова.</p>
|
||
<p>⚠️ Нельзя заменять предохранитель «жучком» (толстым проводом)!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>💡 Сравнение типов ламп (мощность при одинаковой яркости)</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:.8rem">
|
||
<thead><tr style="background:rgba(29,78,216,.08)"><th style="padding:6px 8px;border:1px solid var(--border);text-align:left">Тип лампы</th><th style="padding:6px 8px;border:1px solid var(--border)">Мощность</th><th style="padding:6px 8px;border:1px solid var(--border)">Срок службы</th><th style="padding:6px 8px;text-align:left;border:1px solid var(--border)">КПД</th></tr></thead>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">💡 Накаливания</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;font-weight:700;color:#dc2626">60 Вт</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center">~1000 ч</td><td style="padding:5px 8px;border:1px solid var(--border);color:#dc2626">~5% (свет)</td></tr>
|
||
<tr style="background:rgba(29,78,216,.03)"><td style="padding:5px 8px;border:1px solid var(--border)">🔵 Люминесцентная</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;font-weight:700;color:#f97316">14 Вт</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center">~10000 ч</td><td style="padding:5px 8px;border:1px solid var(--border);color:#f97316">~20%</td></tr>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">🟢 Светодиодная (LED)</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;font-weight:700;color:#059669">10 Вт</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center">~50000 ч</td><td style="padding:5px 8px;border:1px solid var(--border);color:#059669">~50%</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни! Правила безопасности</div>
|
||
<ul>
|
||
<li>Никогда не трогайте оголённые провода под напряжением!</li>
|
||
<li>Не перегружайте розетки — общий ток не должен превышать 16 А.</li>
|
||
<li>Заземление корпуса прибора — защита от пробоя изоляции на корпус.</li>
|
||
<li>Безопасное напряжение: ≤ 36 В (в сухом помещении), ≤ 12 В (в ванной).</li>
|
||
<li>LED-лампа экономит 6× по сравнению с лампой накаливания при той же яркости.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Виртуальный счётчик электроэнергии</div>
|
||
<div class="idiag">
|
||
<h3>🏠 Включай приборы — следи за мощностью и расходом</h3>
|
||
<canvas id="cv27" style="width:100%;height:240px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<label style="font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:7px;cursor:pointer"><input type="checkbox" id="chk27lamp" onchange="upd27()" checked> 💡 Лампа накал. (60 Вт)</label>
|
||
<label style="font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:7px;cursor:pointer"><input type="checkbox" id="chk27led" onchange="upd27()"> 🟢 LED-лампа (10 Вт)</label>
|
||
<label style="font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:7px;cursor:pointer"><input type="checkbox" id="chk27kettle" onchange="upd27()"> ☕ Чайник (2000 Вт)</label>
|
||
<label style="font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:7px;cursor:pointer"><input type="checkbox" id="chk27fridge" onchange="upd27()" checked> 🧊 Холодильник (150 Вт)</label>
|
||
<label style="font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:7px;cursor:pointer"><input type="checkbox" id="chk27tv" onchange="upd27()"> 📺 ТВ (120 Вт)</label>
|
||
</div>
|
||
<div class="idiag-result" id="res27">Суммарная мощность: 210 Вт | За 8 ч: 1,68 кВт·ч</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §27</div>
|
||
<ul class="key-points-list">
|
||
<li>Учёт электроэнергии: счётчик считает кВт·ч; стоимость = количество кВт·ч × тариф.</li>
|
||
<li>Плавкий предохранитель разрывает цепь при токе выше номинала; автомат можно включить снова.</li>
|
||
<li>Нельзя заменять предохранитель «жучком» — это прямой путь к пожару!</li>
|
||
<li>LED-лампа потребляет в 6 раз меньше энергии, чем лампа накаливания при той же яркости.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §28 -->
|
||
<div class="content" id="tab-ref28">
|
||
<div class="para-hero ph-28">
|
||
<div class="ph-label">§28 · Физика 8 кл</div>
|
||
<h2>Постоянные магниты</h2>
|
||
<div class="ph-desc">Каждый магнит имеет полюса N и S. Одноимённые отталкиваются, разноимённые — притягиваются.</div>
|
||
<div class="ph-tags"><span class="ph-tag">N и S полюса</span><span class="ph-tag">↔ одноимённые отталкиваются</span><span class="ph-tag">🧭 компас</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-magnet"></i> §28. Постоянные магниты</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Свойства магнитов</h3>
|
||
<div class="main-f" style="font-size:.85rem">N и S полюса · одноимённые ↔ отталкиваются</div>
|
||
<p>Каждый магнит имеет два полюса: <b>северный (N)</b> и <b>южный (S)</b>. Нейтральная зона — в середине.</p>
|
||
<p>Нельзя получить монополь: при разрезании каждая часть снова имеет N и S.</p>
|
||
<p>Компас: северный конец стрелки притягивается к южному полюсу другого магнита.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Магнитное поле Земли</h3>
|
||
<div class="main-f" style="font-size:.85rem">Земля — гигантский магнит</div>
|
||
<p>Географический Северный полюс Земли соответствует <b>магнитному Южному</b> (именно поэтому северный конец компаса тянется к нему).</p>
|
||
<p>Магнитный полюс смещён от географического на несколько градусов — <b>магнитное склонение</b>.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag-2col">
|
||
<div class="idiag">
|
||
<h3>🧲 Взаимодействие полюсов</h3>
|
||
<svg width="100%" viewBox="0 0 200 110" style="display:block">
|
||
<text x="50" y="12" text-anchor="middle" font-size="8.5" fill="#22c55e" font-family="sans-serif" font-weight="bold">N ←→ S притяжение</text>
|
||
<rect x="10" y="20" width="35" height="22" rx="4" fill="rgba(59,130,246,.3)" stroke="#3b82f6" stroke-width="1.5"/>
|
||
<text x="27" y="35" text-anchor="middle" font-size="9" fill="#3b82f6" font-family="sans-serif" font-weight="bold">N</text>
|
||
<rect x="55" y="20" width="35" height="22" rx="4" fill="rgba(239,68,68,.3)" stroke="#ef4444" stroke-width="1.5"/>
|
||
<text x="72" y="35" text-anchor="middle" font-size="9" fill="#ef4444" font-family="sans-serif" font-weight="bold">S</text>
|
||
<line x1="45" y1="31" x2="55" y2="31" stroke="#22c55e" stroke-width="2"/>
|
||
<polygon points="55,31 48,27 48,35" fill="#22c55e"/>
|
||
<polygon points="45,31 52,27 52,35" fill="#22c55e"/>
|
||
<text x="150" y="12" text-anchor="middle" font-size="8.5" fill="#ef4444" font-family="sans-serif" font-weight="bold">N ←→ N отталкивание</text>
|
||
<rect x="110" y="20" width="35" height="22" rx="4" fill="rgba(59,130,246,.3)" stroke="#3b82f6" stroke-width="1.5"/>
|
||
<text x="127" y="35" text-anchor="middle" font-size="9" fill="#3b82f6" font-family="sans-serif" font-weight="bold">N</text>
|
||
<rect x="155" y="20" width="35" height="22" rx="4" fill="rgba(59,130,246,.3)" stroke="#3b82f6" stroke-width="1.5"/>
|
||
<text x="172" y="35" text-anchor="middle" font-size="9" fill="#3b82f6" font-family="sans-serif" font-weight="bold">N</text>
|
||
<line x1="145" y1="31" x2="110" y2="31" stroke="#ef4444" stroke-width="1.5"/>
|
||
<polygon points="110,31 120,27 120,35" fill="#ef4444"/>
|
||
<line x1="155" y1="31" x2="190" y2="31" stroke="#ef4444" stroke-width="1.5"/>
|
||
<polygon points="190,31 180,27 180,35" fill="#ef4444"/>
|
||
<text x="100" y="62" text-anchor="middle" font-size="8.5" fill="#fbbf24" font-family="sans-serif" font-weight="bold">Разрезать → два новых магнита</text>
|
||
<rect x="10" y="70" width="60" height="18" rx="3" fill="none" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<text x="20" y="83" font-size="8" fill="#3b82f6" font-family="sans-serif" font-weight="bold">N</text>
|
||
<text x="60" y="83" font-size="8" fill="#ef4444" font-family="sans-serif" font-weight="bold">S</text>
|
||
<line x1="40" y1="68" x2="40" y2="90" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="4,2"/>
|
||
<polygon points="100,79 95,70 105,70" fill="#fbbf24"/>
|
||
<rect x="115" y="70" width="30" height="18" rx="3" fill="none" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<text x="118" y="83" font-size="7" fill="#3b82f6" font-family="sans-serif" font-weight="bold">N</text>
|
||
<text x="135" y="83" font-size="7" fill="#ef4444" font-family="sans-serif" font-weight="bold">S</text>
|
||
<rect x="152" y="70" width="30" height="18" rx="3" fill="none" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<text x="155" y="83" font-size="7" fill="#3b82f6" font-family="sans-serif" font-weight="bold">N</text>
|
||
<text x="172" y="83" font-size="7" fill="#ef4444" font-family="sans-serif" font-weight="bold">S</text>
|
||
</svg>
|
||
</div>
|
||
<div class="idiag">
|
||
<h3>🧭 Компас и магнитное поле Земли</h3>
|
||
<svg width="100%" viewBox="0 0 200 110" style="display:block">
|
||
<circle cx="100" cy="55" r="40" fill="rgba(59,130,246,.1)" stroke="#3b82f6" stroke-width="1.5"/>
|
||
<text x="100" y="59" text-anchor="middle" font-size="10" fill="#3b82f6" font-family="sans-serif">🌍</text>
|
||
<text x="100" y="18" text-anchor="middle" font-size="8" fill="#ef4444" font-family="sans-serif" font-weight="bold">S (маг.) = Сев. гео.</text>
|
||
<text x="100" y="102" text-anchor="middle" font-size="8" fill="#3b82f6" font-family="sans-serif" font-weight="bold">N (маг.) = Юж. гео.</text>
|
||
<path d="M100,15 Q148,55 100,95" stroke="#94a3b8" stroke-width="1" fill="none" stroke-dasharray="3,2" opacity=".6"/>
|
||
<path d="M100,15 Q52,55 100,95" stroke="#94a3b8" stroke-width="1" fill="none" stroke-dasharray="3,2" opacity=".6"/>
|
||
<circle cx="160" cy="40" r="12" fill="#1e293b" stroke="#94a3b8" stroke-width="1.5"/>
|
||
<line x1="160" y1="33" x2="160" y2="47" stroke="#94a3b8" stroke-width="1" opacity=".4"/>
|
||
<line x1="153" y1="40" x2="167" y2="40" stroke="#94a3b8" stroke-width="1" opacity=".4"/>
|
||
<polygon points="160,29 157,40 163,40" fill="#3b82f6"/>
|
||
<polygon points="160,51 157,40 163,40" fill="#ef4444"/>
|
||
<text x="160" y="26" text-anchor="middle" font-size="7" fill="#3b82f6" font-family="sans-serif">N</text>
|
||
<text x="160" y="59" text-anchor="middle" font-size="7" fill="#ef4444" font-family="sans-serif">S</text>
|
||
<text x="160" y="68" text-anchor="middle" font-size="7" fill="#94a3b8" font-family="sans-serif">компас</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Магнитных монополей не существует — каждый кусок магнита снова имеет N и S.</li>
|
||
<li>Северный конец стрелки компаса притягивается к южному полюсу магнита.</li>
|
||
<li>Магнитные полюса Земли не совпадают с географическими — магнитное склонение!</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Взаимодействие магнитов</div>
|
||
<div class="idiag">
|
||
<h3>🧲 Силовые линии и взаимодействие полюсов</h3>
|
||
<canvas id="cv28" style="width:100%;height:280px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<select id="sel28mode" onchange="startAnim28()" style="padding:6px 10px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="NS">N–S (разноимённые · притяжение)</option>
|
||
<option value="NN">N–N (одноимённые · отталкивание)</option>
|
||
<option value="SS">S–S (одноимённые · отталкивание)</option>
|
||
</select>
|
||
<label style="font-size:.82rem;display:flex;align-items:center;gap:6px;cursor:pointer">
|
||
<input type="checkbox" id="chk28compass" onchange="startAnim28()" checked> 🧭 Компас
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §28</div>
|
||
<ul class="key-points-list">
|
||
<li>Каждый магнит имеет два полюса: северный (N) и южный (S); магнитных монополей не существует.</li>
|
||
<li>Одноимённые полюса отталкиваются; разноимённые — притягиваются.</li>
|
||
<li>При разрезании магнита получаются два новых магнита с N и S — монополь невозможен.</li>
|
||
<li>Географический Северный полюс Земли соответствует <b>магнитному Южному</b> — поэтому северный конец стрелки компаса тянется к нему.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §29 -->
|
||
<div class="content" id="tab-ref29">
|
||
<div class="para-hero ph-29">
|
||
<div class="ph-label">§29 · Физика 8 кл</div>
|
||
<h2>Магнитное поле</h2>
|
||
<div class="ph-desc">Магнитное поле изображается силовыми линиями. Выходят из N, входят в S.</div>
|
||
<div class="ph-tags"><span class="ph-tag">→ из N к S</span><span class="ph-tag">🧭 силовые линии</span><span class="ph-tag">🔬 железные опилки</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-arrows-to-dot"></i> §29. Магнитное поле</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Магнитное поле</h3>
|
||
<div class="main-f" style="font-size:.85rem">особая форма материи · создаётся магнитами и токами</div>
|
||
<p>Магнитное поле существует в пространстве вокруг магнитов и проводников с током. Оно действует на другие магниты и движущиеся заряды.</p>
|
||
<p>Силовые линии: <b>выходят из N</b>, <b>входят в S</b>. Гуще линии = сильнее поле.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Однородное магнитное поле</h3>
|
||
<div class="main-f" style="font-size:.85rem">параллельные, равноотстоящие линии</div>
|
||
<p>Реализуется в середине зазора между близкими разноимёнными полюсами.</p>
|
||
<p>Маленькие компасы в поле поворачиваются вдоль силовых линий.</p>
|
||
<p>Железные опилки выстраиваются вдоль линий поля.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Линии поля: из N → в S снаружи магнита; внутри — из S в N.</li>
|
||
<li>Силовые линии никогда <b>не пересекаются</b>.</li>
|
||
<li>Чем ближе к полюсу — тем гуще линии, тем сильнее поле.</li>
|
||
<li>Одноимённые полюса: между ними линии «расходятся» (поле ослабевает до нуля в середине).</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Магнитные силовые линии</div>
|
||
<div class="idiag">
|
||
<h3>🧭 Выбери конфигурацию — наблюдай поле</h3>
|
||
<canvas id="cv29" style="width:100%;height:290px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<select id="sel29shape" onchange="startAnim29()" style="padding:6px 10px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="dipole">Полосовой магнит N–S</option>
|
||
<option value="horseshoe">Подковообразный магнит</option>
|
||
<option value="ns_close">Два близких разноимённых N·S (однородное поле)</option>
|
||
<option value="nn_close">Два близких одноимённых N·N</option>
|
||
</select>
|
||
<label style="font-size:.82rem;display:flex;align-items:center;gap:6px;cursor:pointer">
|
||
<input type="checkbox" id="chk29needles" onchange="startAnim29()" checked> 🧭 Компасы
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §29</div>
|
||
<ul class="key-points-list">
|
||
<li>Магнитное поле — особая форма материи, создаваемая магнитами и проводниками с током.</li>
|
||
<li>Силовые линии выходят из N и входят в S снаружи магнита; никогда не пересекаются.</li>
|
||
<li>Чем ближе к полюсу — тем гуще линии, тем <b>сильнее</b> поле.</li>
|
||
<li>Однородное поле (параллельные равноотстоящие линии) создаётся в зазоре между близкими разноимёнными полюсами.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §30 -->
|
||
<div class="content" id="tab-ref30">
|
||
<div class="para-hero ph-30">
|
||
<div class="ph-label">§30 · Физика 8 кл</div>
|
||
<h2>Магнитное поле тока</h2>
|
||
<div class="ph-desc">Электрический ток создаёт магнитное поле (опыт Эрстеда). Правило буравчика.</div>
|
||
<div class="ph-tags"><span class="ph-tag">⚡ ток → поле</span><span class="ph-tag">🔩 правило буравчика</span><span class="ph-tag">🔬 Эрстед (1820)</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-circle-notch"></i> §30. Магнитное поле тока</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Опыт Эрстеда (1820)</h3>
|
||
<div class="main-f" style="font-size:.85rem">ток → магнитное поле</div>
|
||
<p>Ханс Эрстед обнаружил: при прохождении тока через проводник <b>стрелка компаса отклоняется</b>. Электричество и магнетизм связаны!</p>
|
||
<p>Поле прямого проводника — <b>концентрические окружности</b> вокруг проводника.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Правило буравчика</h3>
|
||
<div class="main-f" style="font-size:.85rem">поступательно → ток; вращение → поле</div>
|
||
<p>Если буравчик (правый) вращать и ввинчивать в направлении тока, то <b>направление вращения рукоятки</b> совпадает с направлением линий магнитного поля.</p>
|
||
<p>При реверсе тока — все линии меняют направление.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag-2col">
|
||
<div class="idiag">
|
||
<h3>🔩 Правило буравчика — визуализация</h3>
|
||
<svg width="100%" viewBox="0 0 200 120" style="display:block">
|
||
<rect x="85" y="5" width="10" height="110" rx="3" fill="#475569" stroke="#64748b" stroke-width="1"/>
|
||
<polygon points="90,105 85,90 95,90" fill="#fbbf24"/>
|
||
<text x="105" y="110" font-size="8" fill="#fbbf24" font-family="sans-serif">ток ↓</text>
|
||
<circle cx="90" cy="60" r="20" fill="none" stroke="rgba(59,130,246,.5)" stroke-width="1.5" stroke-dasharray="3,2"/>
|
||
<circle cx="90" cy="60" r="35" fill="none" stroke="rgba(59,130,246,.3)" stroke-width="1.5" stroke-dasharray="3,2"/>
|
||
<polygon points="90,40 85,47 88,47" fill="#3b82f6" opacity=".8"/>
|
||
<polygon points="90,80 95,73 92,73" fill="#3b82f6" opacity=".8"/>
|
||
<circle cx="55" cy="60" r="7" fill="#1e293b" stroke="#94a3b8" stroke-width="1"/>
|
||
<line x1="55" y1="53" x2="55" y2="67" stroke="#ef4444" stroke-width="1.5" transform="rotate(90,55,60)"/>
|
||
<text x="45" y="78" font-size="7" fill="#94a3b8" font-family="sans-serif">компас</text>
|
||
<circle cx="125" cy="60" r="7" fill="#1e293b" stroke="#94a3b8" stroke-width="1"/>
|
||
<line x1="125" y1="53" x2="125" y2="67" stroke="#ef4444" stroke-width="1.5" transform="rotate(270,125,60)"/>
|
||
<text x="8" y="20" font-size="7.5" fill="#94a3b8" font-family="sans-serif">↓ tok → ↻ pole (clock.)</text>
|
||
</svg>
|
||
</div>
|
||
<div class="idiag">
|
||
<h3>📍 Вид вдоль проводника</h3>
|
||
<svg width="100%" viewBox="0 0 200 120" style="display:block">
|
||
<circle cx="60" cy="60" r="16" fill="#1e293b" stroke="#475569" stroke-width="2"/>
|
||
<line x1="50" y1="50" x2="70" y2="70" stroke="#ef4444" stroke-width="2"/>
|
||
<line x1="70" y1="50" x2="50" y2="70" stroke="#ef4444" stroke-width="2"/>
|
||
<text x="60" y="85" text-anchor="middle" font-size="7.5" fill="#ef4444" font-family="sans-serif">× ток от нас</text>
|
||
<circle cx="60" cy="60" r="28" fill="none" stroke="rgba(59,130,246,.6)" stroke-width="1.5"/>
|
||
<polygon points="60,32 55,40 65,40" fill="#3b82f6" opacity=".8"/>
|
||
<text x="25" y="50" font-size="7" fill="#3b82f6" font-family="sans-serif">↻ по часовой</text>
|
||
<circle cx="150" cy="60" r="16" fill="#1e293b" stroke="#475569" stroke-width="2"/>
|
||
<circle cx="150" cy="60" r="4" fill="#22c55e"/>
|
||
<text x="150" y="85" text-anchor="middle" font-size="7.5" fill="#22c55e" font-family="sans-serif">· ток к нам</text>
|
||
<circle cx="150" cy="60" r="28" fill="none" stroke="rgba(34,197,94,.5)" stroke-width="1.5"/>
|
||
<polygon points="150,88 155,80 145,80" fill="#22c55e" opacity=".8"/>
|
||
<text x="155" y="40" font-size="7" fill="#22c55e" font-family="sans-serif">↺ против ч.</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Ток создаёт магнитное поле — связь электричества и магнетизма!</li>
|
||
<li>Правило буравчика: поступательно = ток, вращение = линии поля.</li>
|
||
<li>При реверсе тока — все силовые линии меняют направление на противоположное.</li>
|
||
<li>Гипотеза Ампера: постоянные магниты — это результат токов внутри атомов.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Опыт Эрстеда</div>
|
||
<div class="idiag">
|
||
<h3>🔩 Магнитное поле прямого проводника с током</h3>
|
||
<canvas id="cv30" style="width:100%;height:270px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:200px">
|
||
<span class="slider-lbl">Сила тока $I$:</span>
|
||
<input type="range" id="sl30I" min="0" max="5" step="0.5" value="2" style="flex:1" oninput="lbl30I.textContent=(+this.value).toFixed(1)+' А';startAnim30();">
|
||
<span class="slider-val"><span id="lbl30I">2.0 А</span></span>
|
||
</div>
|
||
<button class="btn btn-ghost" onclick="reverse30()">↩ Реверс тока</button>
|
||
<label style="font-size:.82rem;display:flex;align-items:center;gap:6px;cursor:pointer">
|
||
<input type="checkbox" id="chk30compass" checked onchange="startAnim30()"> 🧭 Компасы
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §30</div>
|
||
<ul class="key-points-list">
|
||
<li>Опыт Эрстеда (1820): ток в проводнике отклоняет стрелку компаса — электричество и магнетизм взаимосвязаны!</li>
|
||
<li>Поле прямого проводника — концентрические окружности вокруг проводника.</li>
|
||
<li>Правило буравчика: поступательное движение = направление тока; вращение рукоятки = направление линий поля.</li>
|
||
<li>При реверсе тока все силовые линии меняют направление на противоположное.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §31 -->
|
||
<div class="content" id="tab-ref31">
|
||
<div class="para-hero ph-31">
|
||
<div class="ph-label">§31 · Физика 8 кл</div>
|
||
<h2>Магнитное поле катушки с током. Электромагнит</h2>
|
||
<div class="ph-desc">Катушка с током — электромагнит. Поле усиливается сердечником. Применение: реле, краны.</div>
|
||
<div class="ph-tags"><span class="ph-tag">N витков × I</span><span class="ph-tag">🔩 железный сердечник</span><span class="ph-tag">⚙️ реле, краны</span></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-coil"></i> §31. Магнитное поле катушки с током. Электромагнит</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Катушка с током = электромагнит</h3>
|
||
<div class="main-f" style="font-size:.85rem">поля витков складываются → сильное поле</div>
|
||
<p>Каждый виток создаёт поле. В центре катушки поля от всех витков направлены одинаково → <b>суммируются</b>.</p>
|
||
<p>Поле катушки похоже на поле полосового магнита: один конец = N, другой = S.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Как усилить поле электромагнита</h3>
|
||
<div class="main-f" style="font-size:.85rem">↑N · ↑I · железный сердечник</div>
|
||
<ol style="font-size:.83rem;color:var(--muted);padding-left:18px;line-height:1.9;margin-top:6px">
|
||
<li>Увеличить число витков $N$</li>
|
||
<li>Увеличить ток $I$</li>
|
||
<li>Вставить <b>железный сердечник</b> (намагничивается → поле резко растёт)</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>⚙️ Применение электромагнитов</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:.8rem">
|
||
<thead><tr style="background:rgba(29,78,216,.08)"><th style="padding:6px 8px;border:1px solid var(--border);text-align:left">Устройство</th><th style="padding:6px 8px;text-align:left;border:1px solid var(--border)">Принцип работы</th></tr></thead>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">⚙️ Реле</td><td style="padding:5px 8px;border:1px solid var(--border)">Электромагнит притягивает якорь → замыкает/размыкает контакты</td></tr>
|
||
<tr style="background:rgba(29,78,216,.03)"><td style="padding:5px 8px;border:1px solid var(--border)">🏗️ Подъёмный кран</td><td style="padding:5px 8px;border:1px solid var(--border)">Огромный электромагнит поднимает стальной лом; выключить ток → груз падает</td></tr>
|
||
<tr><td style="padding:5px 8px;border:1px solid var(--border)">🏥 МРТ (MRI)</td><td style="padding:5px 8px;border:1px solid var(--border)">Сверхпроводящие катушки создают мощное поле 1–3 Тл для диагностики</td></tr>
|
||
<tr style="background:rgba(29,78,216,.03)"><td style="padding:5px 8px;border:1px solid var(--border)">🔔 Электрический звонок</td><td style="padding:5px 8px;border:1px solid var(--border)">Электромагнит притягивает молоточек → удар → размыкает цепь → отпускает → снова</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Правило правой руки для катушки: пальцы → ток в витках; большой → N-полюс.</li>
|
||
<li>Электромагнит управляем: вкл. ток = намагничен; выкл. = размагничен. Это его главное преимущество.</li>
|
||
<li>Железный сердечник резко усиливает поле (сталь намагничивается сильнее, чем воздух).</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Электромагнит</div>
|
||
<div class="idiag">
|
||
<h3>🔌 Катушка с током — выбери режим</h3>
|
||
<canvas id="cv31" style="width:100%;height:290px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">Витков $N$:</span>
|
||
<input type="range" id="sl31N" min="1" max="20" value="5" style="flex:1" oninput="lbl31N.textContent=this.value;startAnim31();">
|
||
<span class="slider-val"><span id="lbl31N">5</span></span>
|
||
</div>
|
||
<div class="slider-row" style="flex:1;min-width:160px">
|
||
<span class="slider-lbl">Ток $I$:</span>
|
||
<input type="range" id="sl31I" min="0" max="5" step="0.5" value="2" style="flex:1" oninput="lbl31I.textContent=(+this.value).toFixed(1)+' А';startAnim31();">
|
||
<span class="slider-val"><span id="lbl31I">2.0 А</span></span>
|
||
</div>
|
||
<label style="font-size:.82rem;display:flex;align-items:center;gap:6px;cursor:pointer">
|
||
<input type="checkbox" id="chk31core" onchange="startAnim31()"> 🔩 Железный сердечник
|
||
</label>
|
||
</div>
|
||
<div class="ctrl-row" style="margin-top:6px">
|
||
<select id="sel31scene" onchange="startAnim31()" style="padding:6px 10px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="coil">Катушка (силовые линии)</option>
|
||
<option value="relay">Электромагнитное реле</option>
|
||
<option value="crane">Подъёмный электромагнит</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §31</div>
|
||
<ul class="key-points-list">
|
||
<li>Катушка с током (соленоид) создаёт поле, похожее на поле полосового магнита: один конец N, другой S.</li>
|
||
<li>Поле катушки усиливается: увеличением числа витков $N$, увеличением тока $I$, вставкой железного сердечника.</li>
|
||
<li>Главное преимущество электромагнита: управляемость — включил ток → намагничен, выключил → нет.</li>
|
||
<li>Правило правой руки для катушки: пальцы указывают направление тока в витках, большой палец — на N-полюс.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ЗАДАЧИ -->
|
||
<div class="content" id="tab-tasks">
|
||
<div class="para-pills">
|
||
<button class="para-pill active" data-para="p12" onclick="setParaTab('p12')">§12</button>
|
||
<button class="para-pill" data-para="p13" onclick="setParaTab('p13')">§13</button>
|
||
<button class="para-pill" data-para="p14" onclick="setParaTab('p14')">§14</button>
|
||
<button class="para-pill" data-para="p15" onclick="setParaTab('p15')">§15</button>
|
||
<button class="para-pill" data-para="p16" onclick="setParaTab('p16')">§16</button>
|
||
<button class="para-pill" data-para="p17" onclick="setParaTab('p17')">§17</button>
|
||
<button class="para-pill" data-para="p18" onclick="setParaTab('p18')">§18</button>
|
||
<button class="para-pill" data-para="p19" onclick="setParaTab('p19')">§19</button>
|
||
<button class="para-pill" data-para="p20" onclick="setParaTab('p20')">§20</button>
|
||
<button class="para-pill" data-para="p21" onclick="setParaTab('p21')">§21</button>
|
||
<button class="para-pill" data-para="p22" onclick="setParaTab('p22')">§22</button>
|
||
<button class="para-pill" data-para="p23" onclick="setParaTab('p23')">§23</button>
|
||
<button class="para-pill" data-para="p24" onclick="setParaTab('p24')">§24</button>
|
||
<button class="para-pill" data-para="p25" onclick="setParaTab('p25')">§25</button>
|
||
<button class="para-pill" data-para="p26" onclick="setParaTab('p26')">§26</button>
|
||
<button class="para-pill" data-para="p27" onclick="setParaTab('p27')">§27</button>
|
||
<button class="para-pill" data-para="p28" onclick="setParaTab('p28')">§28</button>
|
||
<button class="para-pill" data-para="p29" onclick="setParaTab('p29')">§29</button>
|
||
<button class="para-pill" data-para="p30" onclick="setParaTab('p30')">§30</button>
|
||
<button class="para-pill" data-para="p31" onclick="setParaTab('p31')">§31</button>
|
||
<button class="para-pill" data-para="hard" onclick="setParaTab('hard')">⚡ Сложные</button>
|
||
</div>
|
||
|
||
<!-- ptab-p12 -->
|
||
<div id="ptab-p12" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp12">0</span></div><div class="chip chip-tot"><span id="curp12">0</span> / <span id="maxp12">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p12')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp12" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp12"></div>
|
||
<div id="taskAreap12"></div>
|
||
<div class="feedback" id="fbp12"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp12" onclick="nextTask('p12')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump12"><h2>§12 — готово!</h2><div class="big-score" id="sumScorep12">0/0</div><div class="sum-grade" id="sumGradep12"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p12')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p13')">→ §13</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p13 -->
|
||
<div id="ptab-p13" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp13">0</span></div><div class="chip chip-tot"><span id="curp13">0</span> / <span id="maxp13">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p13')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp13" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp13"></div>
|
||
<div id="taskAreap13"></div>
|
||
<div class="feedback" id="fbp13"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp13" onclick="nextTask('p13')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump13"><h2>§13 — готово!</h2><div class="big-score" id="sumScorep13">0/0</div><div class="sum-grade" id="sumGradep13"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p13')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p14')">→ §14</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p14 -->
|
||
<div id="ptab-p14" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp14">0</span></div><div class="chip chip-tot"><span id="curp14">0</span> / <span id="maxp14">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p14')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp14" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp14"></div>
|
||
<div id="taskAreap14"></div>
|
||
<div class="feedback" id="fbp14"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp14" onclick="nextTask('p14')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump14"><h2>§14 — готово!</h2><div class="big-score" id="sumScorep14">0/0</div><div class="sum-grade" id="sumGradep14"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p14')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p15')">→ §15</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p15 -->
|
||
<div id="ptab-p15" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp15">0</span></div><div class="chip chip-tot"><span id="curp15">0</span> / <span id="maxp15">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p15')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp15" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp15"></div>
|
||
<div id="taskAreap15"></div>
|
||
<div class="feedback" id="fbp15"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp15" onclick="nextTask('p15')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump15"><h2>§15 — готово!</h2><div class="big-score" id="sumScorep15">0/0</div><div class="sum-grade" id="sumGradep15"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p15')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p16')">→ §16</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p16 -->
|
||
<div id="ptab-p16" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp16">0</span></div><div class="chip chip-tot"><span id="curp16">0</span> / <span id="maxp16">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p16')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp16" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp16"></div>
|
||
<div id="taskAreap16"></div>
|
||
<div class="feedback" id="fbp16"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp16" onclick="nextTask('p16')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump16"><h2>§16 — готово!</h2><div class="big-score" id="sumScorep16">0/0</div><div class="sum-grade" id="sumGradep16"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p16')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p17')">→ §17</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p17 -->
|
||
<div id="ptab-p17" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp17">0</span></div><div class="chip chip-tot"><span id="curp17">0</span> / <span id="maxp17">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p17')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp17" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp17"></div>
|
||
<div id="taskAreap17"></div>
|
||
<div class="feedback" id="fbp17"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp17" onclick="nextTask('p17')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump17"><h2>§17 — готово!</h2><div class="big-score" id="sumScorep17">0/0</div><div class="sum-grade" id="sumGradep17"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p17')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p18')">→ §18</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p18 -->
|
||
<div id="ptab-p18" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp18">0</span></div><div class="chip chip-tot"><span id="curp18">0</span> / <span id="maxp18">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p18')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp18" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp18"></div>
|
||
<div id="taskAreap18"></div>
|
||
<div class="feedback" id="fbp18"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp18" onclick="nextTask('p18')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump18"><h2>§18 — готово!</h2><div class="big-score" id="sumScorep18">0/0</div><div class="sum-grade" id="sumGradep18"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p18')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p19')">→ §19</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p19 -->
|
||
<div id="ptab-p19" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp19">0</span></div><div class="chip chip-tot"><span id="curp19">0</span> / <span id="maxp19">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p19')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp19" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp19"></div>
|
||
<div id="taskAreap19"></div>
|
||
<div class="feedback" id="fbp19"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp19" onclick="nextTask('p19')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump19"><h2>§19 — готово!</h2><div class="big-score" id="sumScorep19">0/0</div><div class="sum-grade" id="sumGradep19"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p19')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p20')">→ §20</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p20 -->
|
||
<div id="ptab-p20" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp20">0</span></div><div class="chip chip-tot"><span id="curp20">0</span> / <span id="maxp20">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p20')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp20" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp20"></div>
|
||
<div id="taskAreap20"></div>
|
||
<div class="feedback" id="fbp20"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp20" onclick="nextTask('p20')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump20"><h2>§20 — готово!</h2><div class="big-score" id="sumScorep20">0/0</div><div class="sum-grade" id="sumGradep20"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p20')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p21')">→ §21</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p21 -->
|
||
<div id="ptab-p21" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp21">0</span></div><div class="chip chip-tot"><span id="curp21">0</span> / <span id="maxp21">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p21')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp21" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp21"></div>
|
||
<div id="taskAreap21"></div>
|
||
<div class="feedback" id="fbp21"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp21" onclick="nextTask('p21')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump21"><h2>§21 — готово!</h2><div class="big-score" id="sumScorep21">0/0</div><div class="sum-grade" id="sumGradep21"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p21')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p22')">→ §22</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p22 -->
|
||
<div id="ptab-p22" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp22">0</span></div><div class="chip chip-tot"><span id="curp22">0</span> / <span id="maxp22">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p22')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp22" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp22"></div>
|
||
<div id="taskAreap22"></div>
|
||
<div class="feedback" id="fbp22"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp22" onclick="nextTask('p22')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump22"><h2>§22 — готово!</h2><div class="big-score" id="sumScorep22">0/0</div><div class="sum-grade" id="sumGradep22"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p22')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p23')">→ §23</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p23 -->
|
||
<div id="ptab-p23" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp23">0</span></div><div class="chip chip-tot"><span id="curp23">0</span> / <span id="maxp23">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p23')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp23" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp23"></div>
|
||
<div id="taskAreap23"></div>
|
||
<div class="feedback" id="fbp23"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp23" onclick="nextTask('p23')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump23"><h2>§23 — готово!</h2><div class="big-score" id="sumScorep23">0/0</div><div class="sum-grade" id="sumGradep23"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p23')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p24')">→ §24</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p24 -->
|
||
<div id="ptab-p24" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp24">0</span></div><div class="chip chip-tot"><span id="curp24">0</span> / <span id="maxp24">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p24')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp24" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp24"></div>
|
||
<div id="taskAreap24"></div>
|
||
<div class="feedback" id="fbp24"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp24" onclick="nextTask('p24')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump24"><h2>§24 — готово!</h2><div class="big-score" id="sumScorep24">0/0</div><div class="sum-grade" id="sumGradep24"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p24')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p25')">→ §25</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p25 -->
|
||
<div id="ptab-p25" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp25">0</span></div><div class="chip chip-tot"><span id="curp25">0</span> / <span id="maxp25">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p25')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp25" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp25"></div>
|
||
<div id="taskAreap25"></div>
|
||
<div class="feedback" id="fbp25"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp25" onclick="nextTask('p25')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump25"><h2>§25 — готово!</h2><div class="big-score" id="sumScorep25">0/0</div><div class="sum-grade" id="sumGradep25"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p25')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p26')">→ §26</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p26 -->
|
||
<div id="ptab-p26" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp26">0</span></div><div class="chip chip-tot"><span id="curp26">0</span> / <span id="maxp26">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p26')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp26" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp26"></div>
|
||
<div id="taskAreap26"></div>
|
||
<div class="feedback" id="fbp26"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp26" onclick="nextTask('p26')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump26"><h2>§26 — готово!</h2><div class="big-score" id="sumScorep26">0/0</div><div class="sum-grade" id="sumGradep26"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p26')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p27')">→ §27</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p27 -->
|
||
<div id="ptab-p27" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp27">0</span></div><div class="chip chip-tot"><span id="curp27">0</span> / <span id="maxp27">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p27')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp27" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp27"></div>
|
||
<div id="taskAreap27"></div>
|
||
<div class="feedback" id="fbp27"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp27" onclick="nextTask('p27')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump27"><h2>§27 — готово!</h2><div class="big-score" id="sumScorep27">0/0</div><div class="sum-grade" id="sumGradep27"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p27')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p28')">→ §28</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p28 -->
|
||
<div id="ptab-p28" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp28">0</span></div><div class="chip chip-tot"><span id="curp28">0</span> / <span id="maxp28">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p28')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp28" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp28"></div>
|
||
<div id="taskAreap28"></div>
|
||
<div class="feedback" id="fbp28"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp28" onclick="nextTask('p28')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump28"><h2>§28 — готово!</h2><div class="big-score" id="sumScorep28">0/0</div><div class="sum-grade" id="sumGradep28"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p28')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p29')">→ §29</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p29 -->
|
||
<div id="ptab-p29" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp29">0</span></div><div class="chip chip-tot"><span id="curp29">0</span> / <span id="maxp29">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p29')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp29" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp29"></div>
|
||
<div id="taskAreap29"></div>
|
||
<div class="feedback" id="fbp29"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp29" onclick="nextTask('p29')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump29"><h2>§29 — готово!</h2><div class="big-score" id="sumScorep29">0/0</div><div class="sum-grade" id="sumGradep29"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p29')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p30')">→ §30</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p30 -->
|
||
<div id="ptab-p30" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp30">0</span></div><div class="chip chip-tot"><span id="curp30">0</span> / <span id="maxp30">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p30')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp30" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp30"></div>
|
||
<div id="taskAreap30"></div>
|
||
<div class="feedback" id="fbp30"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp30" onclick="nextTask('p30')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump30"><h2>§30 — готово!</h2><div class="big-score" id="sumScorep30">0/0</div><div class="sum-grade" id="sumGradep30"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p30')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p31')">→ §31</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-p31 -->
|
||
<div id="ptab-p31" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp31">0</span></div><div class="chip chip-tot"><span id="curp31">0</span> / <span id="maxp31">0</span></div><button class="btn btn-ghost" onclick="resetTasks('p31')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp31" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp31"></div>
|
||
<div id="taskAreap31"></div>
|
||
<div class="feedback" id="fbp31"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp31" onclick="nextTask('p31')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sump31"><h2>§31 — готово!</h2><div class="big-score" id="sumScorep31">0/0</div><div class="sum-grade" id="sumGradep31"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p31')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('hard')">→ §hard</button></div></div>
|
||
</div>
|
||
|
||
<!-- ptab-hard -->
|
||
<div id="ptab-hard" style="display:none">
|
||
<div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okhard">0</span></div><div class="chip chip-tot"><span id="curhard">0</span> / <span id="maxhard">0</span></div><button class="btn btn-ghost" onclick="resetTasks('hard')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="proghard" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotshard"></div>
|
||
<div id="taskAreahard"></div>
|
||
<div class="feedback" id="fbhard"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnhard" onclick="nextTask('hard')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div>
|
||
<div class="summary" id="sumhard"><h2>Сложные — готово!</h2><div class="big-score" id="sumScorehard">0/0</div><div class="sum-grade" id="sumGradehard"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('hard')"><i class="fas fa-rotate-right"></i> Ещё раз</button></div></div>
|
||
</div>
|
||
|
||
</div><!-- /tab-tasks -->
|
||
</div><!-- /content-area -->
|
||
</main><!-- /main-col -->
|
||
</div><!-- /page-layout -->
|
||
|
||
<script>
|
||
// ═══════════════════════════════════════
|
||
// ВКЛАДКИ СПРАВОЧНИКА
|
||
// ═══════════════════════════════════════
|
||
function switchRefTab(tab) {
|
||
document.querySelectorAll('.ref-tab-btn').forEach(function(b) { b.classList.remove('active'); });
|
||
document.querySelectorAll('.ref-tab-content').forEach(function(c) { c.classList.remove('active'); });
|
||
var btn = document.querySelector('.ref-tab-btn[onclick*="' + tab + '"]');
|
||
var cnt = document.getElementById('reftab-' + tab);
|
||
if (btn) btn.classList.add('active');
|
||
if (cnt) {
|
||
cnt.classList.add('active');
|
||
// Рендерим KaTeX при первом открытии Шпаргалки
|
||
if (tab === 'cheat' && !cnt.dataset.katexDone) {
|
||
cnt.dataset.katexDone = '1';
|
||
if (window.renderMathInElement) {
|
||
renderMathInElement(cnt, {delimiters:[{left:'$',right:'$',display:false},{left:'$$',right:'$$',display:true}]});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
window.switchRefTab = switchRefTab;
|
||
|
||
// ═══════════════════════════════════════
|
||
// ДАННЫЕ ЗАДАЧ
|
||
// ═══════════════════════════════════════
|
||
var TASKS_P12 = [
|
||
{q:"Что происходит при электризации трением?",opts:["Электризуется только натираемое тело","Оба тела заряжаются разноимёнными зарядами","Трение уничтожает заряды","Зависит от скорости трения"],a:1,ex:"При трении электризуются оба тела, получая разноимённые заряды. Трение лишь увеличивает площадь соприкосновения для перехода электронов."},
|
||
{q:"Как взаимодействуют два отрицательно заряженных тела?",opts:["Притягиваются","Отталкиваются","Не взаимодействуют","Зависит от их массы"],a:1,ex:"Одноимённые заряды (оба отрицательные) отталкиваются. Разноимённые — притягиваются."},
|
||
{q:"Для чего служит электроскоп?",opts:["Для измерения напряжения","Для обнаружения и сравнения электрических зарядов","Для измерения силы тока","Для зарядки тел"],a:1,ex:"Электроскоп обнаруживает заряд: одноимённо заряженные листочки отталкиваются. Чем больше заряд — тем шире расходятся."},
|
||
{q:"Заряженная палочка поднесена к шарику на шёлковой нити — шарик притянулся. Что можно сказать о заряде шарика?",opts:["Шарик заряжен одноимённо","Шарик незаряжен или заряжен разноимённо — притяжение в обоих случаях","Шарик обязательно заряжен разноимённо","Шарик тяжелее палочки"],a:1,ex:"Притяжение возможно: 1) при разноимённом заряде; 2) если шарик незаряжен (электризация через влияние)."}
|
||
];
|
||
var TASKS_P13 = [
|
||
{q:"Почему при надевании шерстяного свитера он прилипает к рубашке?",opts:["Из-за клейкости шерсти","Электризация трением: оба тела получают разноимённые заряды и притягиваются","Из-за статического тока","Шерсть намагничена"],a:1,ex:"Электризация трением: свитер и рубашка приобретают разноимённые заряды и притягиваются."},
|
||
{q:"Коснуться пальцем шарика заряженного электроскопа — заряд исчезает. Почему?",opts:["Заряд поглощается пальцем навсегда","Тело человека — проводник; заряд утекает через руку в землю","Заряд нейтрализуется теплом пальца","Заряд становится невидимым"],a:1,ex:"Тело человека — проводник, соединённый с Землёй. Заряд уходит в Землю."},
|
||
{q:"Два проводящих шара с зарядами +q и -q соединили проводником. Что произойдёт?",opts:["Оба останутся заряженными","Оба станут нейтральными","Весь заряд перейдёт на один шар","Заряды увеличатся"],a:1,ex:"+q + (-q) = 0. Электроны перейдут с отрицательного на положительный — оба нейтральны."},
|
||
{q:"Почему на прядильных производствах поддерживают высокую влажность воздуха?",opts:["Для смачивания тканей","Влажный воздух — проводник; заряды стекают, предотвращая накопление статики","Для снижения температуры","Для вентиляции"],a:1,ex:"Влажный воздух проводит ток. Накапливающиеся заряды быстро утекают в атмосферу, предотвращая искры."}
|
||
];
|
||
var TASKS_P14 = [
|
||
{q:"Чем объясняется перераспределение зарядов в проводнике при поднесении заряженного тела?",opts:["Перераспределение невозможно","Свободные электроны в проводнике смещаются под действием поля внешнего заряда","Нейтральные атомы перемещаются","Происходит химическая реакция"],a:1,ex:"Свободные электроны в проводнике реагируют на внешнее электрическое поле: перераспределяются по объёму проводника."},
|
||
{q:"Лёгкая незаряженная гильза притянулась к отрицательной палочке, коснулась её и тут же оттолкнулась. Почему?",opts:["Гильза зарядилась отрицательно и теперь отталкивается","Сила превратилась в отталкивание из-за удара","Гильза нейтрализовала палочку","Температура изменилась"],a:0,ex:"До касания: притяжение из-за индуцированных зарядов. При касании: часть отрицательного заряда перешла на гильзу — теперь оба отрицательны → отталкивание."},
|
||
{q:"Почему незаряженные тела притягиваются к заряженной палочке?",opts:["Они тоже заряжены","Электризация через влияние: ближняя сторона получает разноимённый заряд — притяжение сильнее отталкивания","Из-за гравитации","Из-за магнитных свойств"],a:1,ex:"Индуцированные заряды: ближняя сторона разноимённа (притяжение сильнее, т.к. ближе), дальняя одноимённа (отталкивание слабее). Итог — притяжение."}
|
||
];
|
||
var TASKS_P15 = [
|
||
{q:"Выразите в кулонах заряд $q = 0{,}12$ мКл.",opts:["$1{,}2 \times 10^{-4}$ Кл","$1{,}2 \times 10^{-2}$ Кл","$0{,}12$ Кл","$1{,}2 \times 10^{-7}$ Кл"],a:0,ex:"1 мКл = $10^{-3}$ Кл; $0{,}12 \times 10^{-3} = 1{,}2 \times 10^{-4}$ Кл."},
|
||
{q:"Расчёска получила заряд $q = 6{,}4 \times 10^{-11}$ Кл. Сколько электронов перешло? $e = 1{,}6 \times 10^{-19}$ Кл.",hint:"$N = |q|/e$",unit:"электронов",a:400,ex:"$N = 6{,}4 \times 10^{-11} / 1{,}6 \times 10^{-19} = 400$ электронов."},
|
||
{q:"Эбонитовая палочка: $q = -736$ нКл. Сколько элементарных зарядов? $e = 1{,}6 \times 10^{-19}$ Кл.",hint:"$N = |q|/e$; $q = 7{,}36 \times 10^{-7}$ Кл",unit:"×10¹²",a:4.6,ex:"$N = 7{,}36 \times 10^{-7} / 1{,}6 \times 10^{-19} = 4{,}6 \times 10^{12}$."},
|
||
{q:"При электризации масса шарика уменьшилась на $2{,}73 \times 10^{-27}$ кг. Какой заряд? $m_e = 9{,}1 \times 10^{-31}$ кг.",hint:"$N = \Delta m/m_e$; $q = eN$",unit:"×10⁻¹⁶ Кл",a:4.8,ex:"$N = 3000$ электронов; $q = 1{,}6 \times 10^{-19} \times 3000 = 4{,}8 \times 10^{-16}$ Кл (положительный)."}
|
||
];
|
||
var TASKS_P16 = [
|
||
{q:"Где в атоме сосредоточен положительный заряд?",opts:["Равномерно по всему атому","В ядре — там находятся протоны","На электронных оболочках","В нейтронах"],a:1,ex:"Ядро атома содержит протоны (+). Размер ядра в $10^4$-$10^5$ раз меньше атома (опыт Резерфорда)."},
|
||
{q:"Ядро нейтрального атома азота: 7 протонов. Сколько электронов?",hint:"Нейтральный атом: $N_e = N_p$",unit:"электронов",a:7,ex:"У нейтрального атома $N_e = N_p = 7$."},
|
||
{q:"Атом меди потерял 2 электрона. Что образовалось?",opts:["Анион $\text{Cu}^{2-}$","Катион $\text{Cu}^{2+}$, заряд $+2e$","Нейтральный атом","Нейтрон"],a:1,ex:"Потеря 2 электронов → протонов больше → катион $\text{Cu}^{2+}$ с зарядом $+2e$."},
|
||
{q:"Атом хлора присоединил один электрон. Что образовалось?",opts:["Катион $\text{Cl}^+$","Анион $\text{Cl}^-$, заряд $-e$","Нейтральный атом","Протон"],a:1,ex:"Лишний электрон → электронов больше → анион $\text{Cl}^-$ с зарядом $-e$."}
|
||
];
|
||
var TASKS_P17 = [
|
||
{q:"Что является источником электрического поля?",opts:["Любое движущееся тело","Заряженное тело (частица с электрическим зарядом)","Только проводники с током","Только магниты"],a:1,ex:"Электрическое поле создаётся заряженными телами. Оно существует вокруг заряда и действует на любой внесённый заряд."},
|
||
{q:"Чем подтверждается реальность электрического поля?",opts:["Его можно увидеть","Его действием на внесённый заряд — на него действует сила","Поле создаёт тепло","Поле изменяет массу тел"],a:1,ex:"Поле действует на внесённый заряд с силой — это объективное доказательство его существования."},
|
||
{q:"Что характеризует электрическое напряжение между двумя точками?",opts:["Силу поля в точке","Работу поля при переносе единичного заряда: $U = A/q$","Количество поля","Скорость поля"],a:1,ex:"$U = A/q$ — работа на единицу заряда. Единица: 1 В = 1 Дж/Кл."},
|
||
{q:"Верно ли, что $U_{AC} = U_{AB} + U_{BC}$?",opts:["Нет","Да: работа по пути A→C = A→B + B→C","Только если B между A и C","Нет, надо умножать"],a:1,ex:"Работа из A в C = работа A→B + работа B→C, поэтому $U_{AC} = U_{AB} + U_{BC}$."}
|
||
];
|
||
var TASKS_P18 = [
|
||
{q:"При перемещении $q = 2$ нКл совершена работа $A = 8$ нДж. Определите напряжение.",hint:"$U = A/q$",unit:"В",a:4,ex:"$U = 8 \times 10^{-9} / 2 \times 10^{-9} = 4$ В"},
|
||
{q:"При перемещении $q = 5{,}0$ Кл совершена работа $A = 150$ Дж. Напряжение?",hint:"$U = A/q$",unit:"В",a:30,ex:"$U = 150/5 = 30$ В"},
|
||
{q:"Определите работу при переносе $q = 3{,}0$ Кл при $U = 40$ В.",hint:"$A = qU$",unit:"Дж",a:120,ex:"$A = 3{,}0 \times 40 = 120$ Дж"},
|
||
{q:"В электронных часах $q = 17$ мКл, $A = 0{,}26$ Дж. Напряжение?",hint:"$U = A/q$",unit:"В",a:15.3,ex:"$U = 0{,}26 / (17 \times 10^{-3}) = 15{,}3$ В"},
|
||
{q:"Силы поля совершили $A_1 = 120$ Дж и $A_2 = 360$ Дж при одинаковом заряде. Во сколько раз отличаются напряжения?",hint:"$U_2/U_1 = A_2/A_1$",unit:"раза",a:3,ex:"$U_2/U_1 = 360/120 = 3$."}
|
||
];
|
||
var TASKS_P19 = [
|
||
{q:"Что называют электрическим током?",opts:["Накопление зарядов на поверхности","Направленное движение заряженных частиц","Хаотическое движение молекул","Перенос вещества"],a:1,ex:"Электрический ток — направленное движение заряженных частиц. Ключевое слово: «направленное»."},
|
||
{q:"Каковы два необходимых условия существования тока?",opts:["Высокая T и P","Свободные заряженные частицы + электрическое напряжение","Только высокое напряжение","Только свободные заряды"],a:1,ex:"1) Свободные заряженные частицы (проводник). 2) Электрическое поле (напряжение) для направленного движения."},
|
||
{q:"Что такое источник тока?",opts:["Прибор для измерения тока","Устройство, преобразующее энергию в электрическую и создающее напряжение","Тело с большим зарядом","Устройство для хранения тока"],a:1,ex:"Источник тока создаёт напряжение, преобразуя другой вид энергии в электрическую (батарейка, генератор, солнечная батарея)."}
|
||
];
|
||
var TASKS_P20 = [
|
||
{q:"Через сечение проводника за $t = 5{,}0$ мин проходит $q = 90$ Кл. Определите силу тока.",hint:"$I = q/t$; $t = 300$ с",unit:"А",a:0.3,ex:"$I = 90/300 = 0{,}3$ А"},
|
||
{q:"За какое время пройдёт $q = 300$ Кл при $I = 0{,}50$ А?",hint:"$t = q/I$",unit:"с",a:600,ex:"$t = 300/0{,}5 = 600$ с"},
|
||
{q:"Какой заряд пройдёт через спираль утюга за $t = 10$ мин при $I = 3{,}0$ А?",hint:"$q = It$; $t = 600$ с",unit:"Кл",a:1800,ex:"$q = 3{,}0 \times 600 = 1800$ Кл"},
|
||
{q:"Что принято за направление электрического тока?",opts:["Направление движения электронов","Направление движения положительных зарядов (от + к − во внешней цепи)","От большего к меньшему сопротивлению","Зависит от типа проводника"],a:1,ex:"По договорённости: ток течёт от + к − через внешнюю цепь. Электроны движутся в обратном направлении."}
|
||
];
|
||
var TASKS_P21 = [
|
||
{q:"Как правильно включить амперметр?",opts:["Параллельно потребителю","Последовательно (в разрыв цепи), соблюдая полярность","Параллельно источнику","Последовательно, без полярности"],a:1,ex:"Амперметр — последовательно. Он должен пропускать весь ток. Клемму + → к + источника."},
|
||
{q:"Как правильно включить вольтметр?",opts:["Последовательно","Параллельно измеряемому участку (без разрыва цепи)","В разрыв","Последовательно с источником"],a:1,ex:"Вольтметр — параллельно. Сопротивление вольтметра очень велико — он почти не влияет на ток."},
|
||
{q:"Какой заряд пройдёт за $t = 2{,}0$ мин при $I = 75$ А?",hint:"$q = It$; $t = 120$ с",unit:"Кл",a:9000,ex:"$q = 75 \times 120 = 9000$ Кл"},
|
||
{q:"Сила тока при $N = 1{,}0 \times 10^{18}$ электронах за $t = 1{,}0$ с?",hint:"$q = Ne$; $I = q/t$",unit:"А",a:0.16,ex:"$q = 10^{18} \times 1{,}6 \times 10^{-19} = 0{,}16$ Кл; $I = 0{,}16$ А"}
|
||
];
|
||
var TASKS_P22 = [
|
||
{q:"Как формулируется закон Ома?",opts:["I прямо пропорционален R","$I = U/R$: I прямо пропорционален U и обратно R","U прямо пропорционально R","R не зависит от I"],a:1,ex:"Закон Ома (1826): $I = U/R$. Чем больше U — тем больше I. Чем больше R — тем меньше I."},
|
||
{q:"Проводник $R = 40$ Ом, $I = 0{,}30$ А. Определите напряжение.",hint:"$U = IR$",unit:"В",a:12,ex:"$U = 0{,}30 \times 40 = 12$ В"},
|
||
{q:"Лампочка: $U = 220$ В, $I = 0{,}50$ А. Определите сопротивление.",hint:"$R = U/I$",unit:"Ом",a:440,ex:"$R = 220/0{,}5 = 440$ Ом"},
|
||
{q:"Спираль плитки: $U = 220$ В, $R = 80$ Ом. Определите ток.",hint:"$I = U/R$",unit:"А",a:2.75,ex:"$I = 220/80 = 2{,}75$ А"},
|
||
{q:"Участок: $I = 75$ мА, $U = 0{,}12$ кВ. Определите R.",hint:"$R = U/I$; $I = 0{,}075$ А, $U = 120$ В",unit:"Ом",a:1600,ex:"$R = 120/0{,}075 = 1600$ Ом"}
|
||
];
|
||
var TASKS_P23 = [
|
||
{q:"Что означает $\rho_\text{константана} = 0{,}50$ Ом·мм²/м?",opts:["Константан длиной 0,50 м имеет R=1 Ом","Проводник из константана l=1 м, S=1 мм² имеет R=0,50 Ом","Константан плохо проводит ток","Константан нагревается до 0,50°C"],a:1,ex:"Удельное сопротивление — это R проводника l=1 м, S=1 мм². По формуле $R = \rho l/S$."},
|
||
{q:"Алюминиевый проводник $l = 1{,}0$ м, $S = 1{,}0$ мм². R? $\rho = 0{,}028$ Ом·мм²/м.",hint:"$R = \rho l/S$",unit:"Ом",a:0.028,ex:"$R = 0{,}028 \times 1{,}0/1{,}0 = 0{,}028$ Ом"},
|
||
{q:"Медная проволока: $S = 0{,}765$ мм², $R = 1{,}60$ Ом. Длина? $\rho = 0{,}017$ Ом·мм²/м.",hint:"$l = RS/\rho$",unit:"м",a:72,ex:"$l = 1{,}60 \times 0{,}765/0{,}017 = 72{,}0$ м"},
|
||
{q:"У какого из двух мотков алюминиевой проволоки больше R, если длина одного в 4 раза больше, сечения равны?",opts:["У более короткого","У более длинного: $R \propto l$ при одинаковых $\rho$ и $S$","Одинаковое","Зависит от T"],a:1,ex:"$R = \rho l/S$. При одинаковых $\rho, S$: $R_2/R_1 = l_2/l_1 = 4$."}
|
||
];
|
||
var TASKS_P24 = [
|
||
{q:"При последовательном соединении сила тока в элементах...",opts:["Разная в каждом","Одинакова: $I_1 = I_2 = I$","Больше в элементе с меньшим R","Зависит от порядка"],a:1,ex:"При последовательном соединении через все элементы проходит одинаковый заряд за одно время → $I = I_1 = I_2$."},
|
||
{q:"$R_1 = 3{,}5$ Ом, $R_2 = 10$ Ом, последовательно. Определите R.",hint:"$R = R_1 + R_2$",unit:"Ом",a:13.5,ex:"$R = 3{,}5 + 10 = 13{,}5$ Ом"},
|
||
{q:"Последовательно: $R_1 = 4{,}0$ Ом, $R_2 = 10$ Ом; $U_1 = 28$ В. Напряжение на всём участке?",hint:"$I = U_1/R_1$; $U = I(R_1+R_2)$",unit:"В",a:98,ex:"$I = 28/4 = 7$ А; $U = 7 \times 14 = 98$ В"},
|
||
{q:"4 лампочки по $U_1 = 3{,}0$ В соединены последовательно. При каком U сети можно включить гирлянду?",hint:"$U = N \times U_1$",unit:"В",a:12,ex:"$U = 4 \times 3{,}0 = 12$ В"}
|
||
];
|
||
var TASKS_P25 = [
|
||
{q:"При параллельном соединении напряжение на элементах...",opts:["Разное","Одинаково: $U_1 = U_2 = U$","Больше на элементе с большим R","Зависит от порядка"],a:1,ex:"Параллельно подключённые элементы присоединены к одним точкам → одинаковое напряжение."},
|
||
{q:"$R_1 = 6{,}0$ Ом, $R_2 = 12$ Ом параллельно. R?",hint:"$R = R_1 R_2/(R_1+R_2)$",unit:"Ом",a:4,ex:"$R = 6 \times 12/18 = 4$ Ом. Параллельное соединение: $R < R_{min}$."},
|
||
{q:"$R_1 = 6$ Ом, $R_2 = 4$ Ом параллельно, $U = 12$ В. Ток в неразветвлённой части?",hint:"$I_1 = U/R_1$; $I_2 = U/R_2$; $I = I_1+I_2$",unit:"А",a:5,ex:"$I_1 = 2$ А; $I_2 = 3$ А; $I = 5$ А"},
|
||
{q:"Почему в квартирной сети используют параллельное соединение?",opts:["Дешевле","Каждый прибор работает при одинаковом напряжении 220 В независимо от других","Безопаснее","Меньше ток"],a:1,ex:"Параллельно: одинаковое U на каждом приборе (220 В). Можно включать/выключать независимо."}
|
||
];
|
||
var TASKS_P26 = [
|
||
{q:"Нагреватель: $R = 20$ Ом, $I = 5{,}0$ А, $t = 2{,}0$ мин. Теплота?",hint:"$Q = I^2Rt$; $t = 120$ с",unit:"кДж",a:60,ex:"$Q = 25 \times 20 \times 120 = 60\,000$ Дж = 60 кДж"},
|
||
{q:"Лампочка: $U = 220$ В, $R = 968$ Ом. Мощность?",hint:"$P = U^2/R$",unit:"Вт",a:50,ex:"$P = 220^2/968 = 50$ Вт"},
|
||
{q:"Электрочайник $P = 2{,}0$ кВт, $U = 220$ В. Ток?",hint:"$I = P/U$",unit:"А",a:9.09,tol:0.02,ex:"$I = 2000/220 \approx 9{,}09$ А"},
|
||
{q:"Нагреватель $U = 120$ В, $I = 2{,}0$ А, $t = 10$ мин. Q?",hint:"$Q = IUt$; $t = 600$ с",unit:"кДж",a:144,ex:"$Q = 2{,}0 \times 120 \times 600 = 144\,000$ Дж = 144 кДж"}
|
||
];
|
||
var TASKS_P27 = [
|
||
{q:"Что произойдёт при коротком замыкании?",opts:["Ток упадёт до нуля","Ток резко возрастёт, провода могут перегреться → пожар","Напряжение исчезнет","Ничего особенного"],a:1,ex:"КЗ: $R \to 0$ → $I = U/R \to \infty$. Реальный ток очень большой → быстрый нагрев → пожар. Защита: предохранители."},
|
||
{q:"Светодиодная лампа 10 Вт и лампа накаливания 60 Вт дают одинаковую яркость. Во сколько раз светодиодная экономичнее?",hint:"$P_2/P_1$",unit:"раза",a:6,ex:"$60/10 = 6$ раз. Светодиодная потребляет в 6 раз меньше."},
|
||
{q:"Почему провода заземления нужно присоединять к корпусам приборов?",opts:["Для красоты","При пробое изоляции заряд стечёт в землю, не ударив человека","Для улучшения проводимости","Только для телевизоров"],a:1,ex:"Заземление создаёт путь с малым R → ток идёт в землю. Также срабатывает автоматический выключатель."}
|
||
];
|
||
var TASKS_P28 = [
|
||
{q:"Как взаимодействуют одноимённые полюса магнитов?",opts:["Притягиваются","Отталкиваются","Не взаимодействуют","Зависит от расстояния"],a:1,ex:"Одноимённые полюса (N–N, S–S) отталкиваются. Разноимённые (N–S) — притягиваются."},
|
||
{q:"Что произойдёт, если разрезать постоянный магнит пополам?",opts:["Получится два магнита: один с полюсом N, другой с S","Каждая половина снова станет магнитом с двумя полюсами N и S","Магниты размагнитятся","Полюса исчезнут"],a:1,ex:"Магнитные полюса неотделимы. Каждый кусок — снова замкнутый магнит с N и S. 'Магнитных монополей' не существует."},
|
||
{q:"Как экспериментально обнаружить полюса магнита?",opts:["По цвету металла","Поднести компас: северный полюс стрелки притягивается к южному полюсу магнита","Нагреть магнит","По форме"],a:1,ex:"Компас лучший индикатор: северный полюс стрелки (+) притягивается к южному полюсу магнита (−)."},
|
||
{q:"Что такое нейтральная зона магнита?",opts:["Место безопасного хранения","Область между полюсами, где магнитное действие минимально","Зона, где магнит не притягивает железо","Место для подписи маркером"],a:1,ex:"Нейтральная зона — средняя часть между полюсами. Там магнитное поле наименее выражено."}
|
||
];
|
||
var TASKS_P29 = [
|
||
{q:"Что такое линии магнитного поля?",opts:["Реальные нити","Воображаемые линии, наглядно изображающие поле; касательная к ним совпадает с направлением поля","Траектории опилок","Линии поверхности магнита"],a:1,ex:"Линии поля — вспомогательный инструмент. Направление поля в точке = направление ориентации N-полюса стрелки."},
|
||
{q:"Из какого полюса выходят линии магнитного поля?",opts:["Из S","Из N — входят в S снаружи магнита","Из обоих","Линии не выходят"],a:1,ex:"По договорённости: линии выходят из N, входят в S снаружи магнита. Внутри магнита — от S к N."},
|
||
{q:"Чем характеризуется плотность силовых линий?",opts:["Цветом поля","Интенсивностью поля: чем гуще линии — тем сильнее поле","Направлением","Температурой"],a:1,ex:"Гуще линии = сильнее поле. У полюсов — густые, вдали — редкие."},
|
||
{q:"Где поле однородно (линии параллельны и равноотстоящие)?",opts:["Вблизи одного полюса","В середине зазора между близкими разноимёнными полюсами","Вокруг прямого проводника","На конце магнита"],a:1,ex:"Однородное поле: силовые линии параллельны. Реализуется в середине зазора между близкими разноимёнными полюсами."}
|
||
];
|
||
var TASKS_P30 = [
|
||
{q:"Кто первым обнаружил магнитное поле тока?",opts:["Ампер","Эрстед (1820) — стрелка компаса отклонялась при прохождении тока","Фарадей","Ом"],a:1,ex:"Ханс Кристиан Эрстед в 1820 г. случайно заметил: при включении тока стрелка компаса отклоняется. Связь электричества и магнетизма!"},
|
||
{q:"Как определить направление линий поля вокруг прямого проводника с током?",opts:["По направлению тока","Правило буравчика: поступательно — как ток; вращение рукоятки — направление линий поля","Правило правой руки (другое)","По закону Ома"],a:1,ex:"Буравчик вращается → направление силовых линий (охватывают проводник окружностями)."},
|
||
{q:"Что произойдёт с магнитным полем при реверсе тока?",opts:["Поле исчезнет","Направление силовых линий изменится на противоположное","Интенсивность уменьшится","Ничего"],a:1,ex:"Реверс тока → правило буравчика даёт противоположное вращение → все линии меняют направление."}
|
||
];
|
||
var TASKS_P31 = [
|
||
{q:"Чем катушка с током отличается от прямого проводника по магнитному полю?",opts:["Ничем","Катушка усиливает поле: поля от витков складываются в одном направлении","Катушка уменьшает поле","Поле перпендикулярно току"],a:1,ex:"Каждый виток создаёт поле. В центре катушки поля от витков направлены одинаково и складываются."},
|
||
{q:"Как определить N-полюс электромагнита (катушки с током)?",opts:["По материалу сердечника","Правило правой руки для катушки: пальцы — в направлении тока в витках; большой палец — к N-полюсу","По цвету проводов","По закону Ома"],a:1,ex:"Охватить катушку правой рукой: пальцы → направление тока, большой палец → северный полюс N."},
|
||
{q:"Как усилить магнитное поле катушки?",opts:["Уменьшить витки","Увеличить витки, увеличить ток или вставить железный сердечник","Увеличить R обмотки","Уменьшить ток"],a:1,ex:"Три способа: 1) больше витков; 2) больше ток; 3) железный сердечник (намагничивается и резко усиливает поле)."},
|
||
{q:"Главное отличие электромагнита от постоянного магнита?",opts:["Электромагнит тяжелее","Электромагнит управляемый: вкл. ток → намагничен; выкл. → размагничен","Электромагнит слабее","Нет отличий"],a:1,ex:"Можно включать и выключать — главное преимущество. Подъёмные краны, реле, MRI — везде нужно управляемое поле."}
|
||
];
|
||
var TASKS_HARD = [
|
||
{para:"§15",q:"Расчёска получила $q = 6{,}4 \times 10^{-11}$ Кл потерей электронов. На сколько изменилась масса? $m_e = 9{,}1 \times 10^{-31}$ кг.",hint:"$N = q/e$; $\Delta m = Nm_e$",unit:"×10⁻²⁸ кг",a:3.64,ex:"$N = 400$ электронов; $\Delta m = 400 \times 9{,}1 \times 10^{-31} = 3{,}64 \times 10^{-28}$ кг. Ничтожно мало!"},
|
||
{para:"§18",q:"Электроприбор: $U = 220$ В, за 1 мин перемещается $q = 0{,}16$ кКл. Мощность?",hint:"$A = qU$; $P = A/t$",unit:"Вт",a:587,ex:"$A = 160 \times 220 = 35200$ Дж; $P = 35200/60 \approx 587$ Вт"},
|
||
{para:"§20",q:"По проводнику $I = 1{,}2$ А, $t = 1{,}0$ ч. Масса электронов? $m_e = 9{,}1 \times 10^{-31}$ кг.",hint:"$q = It$; $N = q/e$; $m = Nm_e$",unit:"×10⁻⁸ кг",a:2.46,ex:"$q = 4320$ Кл; $N = 2{,}7 \times 10^{22}$; $m \approx 2{,}46 \times 10^{-8}$ кг"},
|
||
{para:"§22",q:"Проволока $l = 0{,}80$ км, $R = 4{,}8$ Ом, $I = 9{,}0$ мА. Напряжение на участке $l_1 = 50$ м?",hint:"$R_1 = R \cdot l_1/l$; $U_1 = IR_1$",unit:"мВ",a:2.7,ex:"$R_1 = 4{,}8 \times 50/800 = 0{,}30$ Ом; $U_1 = 0{,}009 \times 0{,}30 = 2{,}7$ мВ"},
|
||
{para:"§26",q:"Проводник $R = 4{,}0$ Ом, $U = 12$ В, $t = 5{,}0$ мин. Теплота?",hint:"$I = U/R$; $Q = I^2Rt$",unit:"кДж",a:10.8,ex:"$I = 3$ А; $Q = 9 \times 4 \times 300 = 10800$ Дж = 10,8 кДж"},
|
||
{para:"§25",q:"$R_1 = 30$ Ом, $R_2 = 60$ Ом параллельно, $U = 120$ В. Общий ток?",hint:"$I_1 = U/R_1$; $I_2 = U/R_2$; $I = I_1+I_2$",unit:"А",a:6,ex:"$I_1 = 4$ А; $I_2 = 2$ А; $I = 6$ А"},
|
||
{para:"§23",q:"Реостат: нихром $l = 50$ м, $S = 1{,}0$ мм², $I = 2{,}5$ А. Напряжение? $\rho = 1{,}10$ Ом·мм²/м.",hint:"$R = \rho l/S$; $U = IR$",unit:"В",a:137.5,ex:"$R = 1{,}10 \times 50/1 = 55$ Ом; $U = 2{,}5 \times 55 = 137{,}5$ В"}
|
||
];
|
||
|
||
// ═══════════════════════════════════════
|
||
// ПУЛЫ И СОСТОЯНИЯ
|
||
// ═══════════════════════════════════════
|
||
var POOLS = {
|
||
p12:TASKS_P12, p13:TASKS_P13, p14:TASKS_P14, p15:TASKS_P15, p16:TASKS_P16,
|
||
p17:TASKS_P17, p18:TASKS_P18, p19:TASKS_P19, p20:TASKS_P20, p21:TASKS_P21,
|
||
p22:TASKS_P22, p23:TASKS_P23, p24:TASKS_P24, p25:TASKS_P25, p26:TASKS_P26,
|
||
p27:TASKS_P27, p28:TASKS_P28, p29:TASKS_P29, p30:TASKS_P30, p31:TASKS_P31,
|
||
hard:TASKS_HARD
|
||
};
|
||
|
||
function mkState(pool) {
|
||
return {idx:0, answered:false, results:Array(pool.length).fill(null), selections:Array(pool.length).fill(null)};
|
||
}
|
||
|
||
var STATE = {
|
||
p12:mkState(TASKS_P12), p13:mkState(TASKS_P13), p14:mkState(TASKS_P14),
|
||
p15:mkState(TASKS_P15), p16:mkState(TASKS_P16), p17:mkState(TASKS_P17),
|
||
p18:mkState(TASKS_P18), p19:mkState(TASKS_P19), p20:mkState(TASKS_P20),
|
||
p21:mkState(TASKS_P21), p22:mkState(TASKS_P22), p23:mkState(TASKS_P23),
|
||
p24:mkState(TASKS_P24), p25:mkState(TASKS_P25), p26:mkState(TASKS_P26),
|
||
p27:mkState(TASKS_P27), p28:mkState(TASKS_P28), p29:mkState(TASKS_P29),
|
||
p30:mkState(TASKS_P30), p31:mkState(TASKS_P31), hard:mkState(TASKS_HARD)
|
||
};
|
||
|
||
// ═══════════════════════════════════════
|
||
// KaTeX рендеринг
|
||
// ═══════════════════════════════════════
|
||
function doRender(el) {
|
||
if (!window.renderMathInElement) return;
|
||
renderMathInElement(el, {
|
||
delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}],
|
||
throwOnError:false
|
||
});
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// ПЕРЕКЛЮЧАТЕЛЬ ПАРАГРАФОВ
|
||
// ═══════════════════════════════════════
|
||
function setParaTab(para) {
|
||
['p12','p13','p14','p15','p16','p17','p18','p19','p20','p21','p22','p23','p24','p25','p26','p27','p28','p29','p30','p31','hard'].forEach(function(p) {
|
||
var el = document.getElementById('ptab-'+p);
|
||
if (el) el.style.display = (p===para) ? 'block' : 'none';
|
||
document.querySelectorAll('.para-pill[data-para="'+p+'"]').forEach(function(b) {
|
||
b.classList.toggle('active', p===para);
|
||
});
|
||
});
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// НАВИГАЦИЯ
|
||
// ═══════════════════════════════════════
|
||
function renderNav(sec) {
|
||
var pool = POOLS[sec], s = STATE[sec];
|
||
var el = document.getElementById('navDots'+sec);
|
||
if (!el) return;
|
||
el.innerHTML = pool.map(function(_, i) {
|
||
var cls = 'nav-dot';
|
||
if (i===s.idx) cls += ' nd-cur';
|
||
else if (s.results[i]===true) cls += ' nd-ok';
|
||
else if (s.results[i]===false) cls += ' nd-fail';
|
||
return '<button class="'+cls+'" onclick="goToTask(\''+sec+'\','+i+')" title="Задача '+(i+1)+'">'+(i+1)+'</button>';
|
||
}).join('');
|
||
}
|
||
|
||
function goToTask(sec, idx) {
|
||
var s = STATE[sec];
|
||
s.idx = idx;
|
||
s.answered = s.results[idx]!==null;
|
||
renderTask(sec);
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// ОТРИСОВКА ЗАДАЧИ
|
||
// ═══════════════════════════════════════
|
||
function renderTask(sec) {
|
||
var pool = POOLS[sec], s = STATE[sec];
|
||
var area = document.getElementById('taskArea'+sec);
|
||
var fb = document.getElementById('fb'+sec);
|
||
document.getElementById('sum'+sec).classList.remove('show');
|
||
|
||
var q = pool[s.idx];
|
||
var done = s.results[s.idx]!==null;
|
||
s.answered = done;
|
||
var isMcq = !!q.opts;
|
||
|
||
// Бейдж параграфа для раздела hard
|
||
var paraBadge = q.para ? '<span style="display:inline-flex;align-items:center;padding:2px 8px;background:rgba(29,78,216,.12);color:var(--pri);border-radius:6px;font-size:.68rem;font-weight:800;margin-left:7px">'+q.para+'</span>' : '';
|
||
|
||
if (isMcq) {
|
||
var selIdx = s.selections[s.idx];
|
||
area.innerHTML = '<div class="task-card">' +
|
||
'<div class="task-num">Задача '+(s.idx+1)+' из '+pool.length+' · Тест'+paraBadge+'</div>' +
|
||
'<div class="task-text">'+q.q+'</div>' +
|
||
'<div class="mcq-opts">' +
|
||
q.opts.map(function(opt, i) {
|
||
var cls = 'opt-btn';
|
||
if (done) {
|
||
if (i===q.a) cls += ' mcq-cor';
|
||
else if (i===selIdx) cls += ' mcq-wrong';
|
||
}
|
||
return '<button class="'+cls+'" id="mcqOpt'+sec+'_'+i+'" '+
|
||
'onclick="'+(done?'':'selectMcq(\''+sec+'\','+i+')')+'" '+
|
||
(done?'disabled':'')+'>'+
|
||
'<span style="font-weight:800;margin-right:6px">'+String.fromCharCode(65+i)+'.</span>'+opt+
|
||
'</button>';
|
||
}).join('') +
|
||
'</div></div>';
|
||
} else {
|
||
area.innerHTML = '<div class="task-card">' +
|
||
'<div class="task-num">Задача '+(s.idx+1)+' из '+pool.length+paraBadge+'</div>' +
|
||
'<div class="task-text">'+q.q+'</div>' +
|
||
'<div class="task-hint"><i class="fas fa-lightbulb"></i><span>'+q.hint+'</span></div>' +
|
||
'<div class="ans-row">' +
|
||
'<label style="font-weight:700;font-size:.88rem">Ответ:</label>' +
|
||
'<input class="ans-inp" type="text" id="ainp'+sec+'" placeholder="?" autocomplete="off"' +
|
||
(done?' disabled style="border-color:var(--'+(s.results[s.idx]?'ok':'fail')+')"':'')+'>'+
|
||
'<span class="unit-lbl">'+q.unit+'</span>' +
|
||
(done?'':'<button class="btn btn-pri" onclick="checkNum(\''+sec+'\')"><i class="fas fa-check"></i> Проверить</button>') +
|
||
'</div></div>';
|
||
}
|
||
|
||
if (done) {
|
||
var ok = s.results[s.idx];
|
||
fb.className = 'feedback show '+(ok?'fb-ok':'fb-fail');
|
||
if (isMcq) {
|
||
fb.innerHTML = ok
|
||
? '✓ Верно! '+(q.ex||'')
|
||
: '✗ Неверно. Правильный ответ: <strong>'+q.opts[q.a]+'</strong> '+(q.ex||'');
|
||
} else {
|
||
fb.innerHTML = ok
|
||
? '✓ Верно! '+q.ex
|
||
: '✗ Неверно. Правильный ответ: <strong>'+q.a+' '+q.unit+'</strong> '+q.ex;
|
||
}
|
||
document.getElementById('nextBtn'+sec).style.display = 'inline-flex';
|
||
doRender(fb);
|
||
} else {
|
||
fb.className = 'feedback';
|
||
document.getElementById('nextBtn'+sec).style.display = 'none';
|
||
}
|
||
|
||
updateScoreBar(sec);
|
||
renderNav(sec);
|
||
doRender(area);
|
||
|
||
if (!done && !isMcq) {
|
||
var inp = document.getElementById('ainp'+sec);
|
||
setTimeout(function(){ if(inp) inp.focus(); }, 80);
|
||
if (inp) inp.addEventListener('keydown', function(e){ if(e.key==='Enter') checkNum(sec); });
|
||
}
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// ПРОВЕРКА MCQ
|
||
// ═══════════════════════════════════════
|
||
function selectMcq(sec, i) {
|
||
var s = STATE[sec];
|
||
if (s.answered) return;
|
||
var pool = POOLS[sec], q = pool[s.idx];
|
||
var ok = (i===q.a);
|
||
s.results[s.idx] = ok;
|
||
s.selections[s.idx] = i;
|
||
s.answered = true;
|
||
updateScoreBar(sec);
|
||
renderNav(sec);
|
||
|
||
q.opts.forEach(function(_, j) {
|
||
var btn = document.getElementById('mcqOpt'+sec+'_'+j);
|
||
if (!btn) return;
|
||
btn.disabled = true;
|
||
if (j===q.a) btn.classList.add('mcq-cor');
|
||
else if (j===i && !ok) btn.classList.add('mcq-wrong');
|
||
});
|
||
|
||
var fb = document.getElementById('fb'+sec);
|
||
fb.className = 'feedback show '+(ok?'fb-ok':'fb-fail');
|
||
fb.innerHTML = ok
|
||
? '✓ Верно! '+(q.ex||'')
|
||
: '✗ Неверно. Правильный ответ: <strong>'+q.opts[q.a]+'</strong> '+(q.ex||'');
|
||
doRender(fb);
|
||
document.getElementById('nextBtn'+sec).style.display = 'inline-flex';
|
||
|
||
if (s.results.every(function(r){ return r!==null; })) {
|
||
setTimeout(function(){ showSummary(sec); }, 2200);
|
||
}
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// ПРОВЕРКА ЧИСЛОВЫХ
|
||
// ═══════════════════════════════════════
|
||
function checkNum(sec) {
|
||
var s = STATE[sec];
|
||
if (s.answered) return;
|
||
var pool = POOLS[sec], q = pool[s.idx];
|
||
var inp = document.getElementById('ainp'+sec);
|
||
var fb = document.getElementById('fb'+sec);
|
||
var val = inp.value.trim().replace(',','.');
|
||
var num = parseFloat(val);
|
||
|
||
if (!val || isNaN(num)) {
|
||
fb.className = 'feedback show fb-fail';
|
||
fb.innerHTML = 'Введите числовой ответ!';
|
||
return;
|
||
}
|
||
|
||
s.answered = true;
|
||
var tol = (q.tol !== undefined) ? q.tol : 0.03;
|
||
var ok = (q.a===0) ? (Math.abs(num)<0.05) : (Math.abs((num-q.a)/q.a)<tol);
|
||
s.results[s.idx] = ok;
|
||
updateScoreBar(sec);
|
||
renderNav(sec);
|
||
|
||
inp.disabled = true;
|
||
inp.style.borderColor = ok ? 'var(--ok)' : 'var(--fail)';
|
||
|
||
fb.className = 'feedback show '+(ok?'fb-ok':'fb-fail');
|
||
fb.innerHTML = ok
|
||
? '✓ Верно! '+q.ex
|
||
: '✗ Неверно. Правильный ответ: <strong>'+q.a+' '+q.unit+'</strong> '+q.ex;
|
||
doRender(fb);
|
||
document.getElementById('nextBtn'+sec).style.display = 'inline-flex';
|
||
|
||
if (s.results.every(function(r){ return r!==null; })) {
|
||
setTimeout(function(){ showSummary(sec); }, 2200);
|
||
}
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// СЛЕДУЮЩАЯ / СБРОС
|
||
// ═══════════════════════════════════════
|
||
function nextTask(sec) {
|
||
var pool = POOLS[sec], s = STATE[sec];
|
||
var next = -1;
|
||
for (var i=s.idx+1; i<pool.length; i++) {
|
||
if (s.results[i]===null) { next=i; break; }
|
||
}
|
||
if (next===-1) {
|
||
for (var j=0; j<s.idx; j++) {
|
||
if (s.results[j]===null) { next=j; break; }
|
||
}
|
||
}
|
||
if (next===-1) { showSummary(sec); return; }
|
||
s.idx = next;
|
||
s.answered = false;
|
||
renderTask(sec);
|
||
}
|
||
|
||
function resetTasks(sec) {
|
||
STATE[sec] = mkState(POOLS[sec]);
|
||
document.getElementById('sum'+sec).classList.remove('show');
|
||
renderTask(sec);
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// SCORE BAR
|
||
// ═══════════════════════════════════════
|
||
function updateScoreBar(sec) {
|
||
var pool = POOLS[sec], s = STATE[sec];
|
||
var okCnt = s.results.filter(function(r){ return r===true; }).length;
|
||
var doneCnt = s.results.filter(function(r){ return r!==null; }).length;
|
||
document.getElementById('ok'+sec).textContent = okCnt;
|
||
document.getElementById('cur'+sec).textContent = doneCnt;
|
||
document.getElementById('max'+sec).textContent = pool.length;
|
||
document.getElementById('prog'+sec).style.width = (doneCnt/pool.length*100)+'%';
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// SUMMARY
|
||
// ═══════════════════════════════════════
|
||
function showSummary(sec) {
|
||
var pool = POOLS[sec], s = STATE[sec];
|
||
document.getElementById('prog'+sec).style.width = '100%';
|
||
document.getElementById('sum'+sec).classList.add('show');
|
||
var okCnt = s.results.filter(function(r){ return r===true; }).length;
|
||
document.getElementById('sumScore'+sec).textContent = okCnt+' / '+pool.length;
|
||
var p = okCnt/pool.length;
|
||
document.getElementById('sumGrade'+sec).textContent =
|
||
p>=.9 ? 'Отлично — тема освоена!' :
|
||
p>=.75 ? 'Хорошо! Разбери пропущенные задачи.' :
|
||
p>=.5 ? 'Неплохо. Повтори формулы и попробуй ещё раз.' :
|
||
'Прочитай теорию и реши снова.';
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// ИНТЕРАКТИВЫ §12-§16
|
||
// ═══════════════════════════════════════
|
||
|
||
// ═══ §12: Электризация и взаимодействие ═══
|
||
var ch12rubbed = false, ch12approaching = false, ch12same = false, ch12dist = 1.0;
|
||
var anim12Id = null;
|
||
|
||
function rub12() {
|
||
ch12rubbed = true; ch12approaching = false; ch12dist = 1.0;
|
||
startAnim12();
|
||
}
|
||
function approach12(diff) {
|
||
if (!ch12rubbed) { alert('Сначала потри палочки!'); return; }
|
||
ch12approaching = true; ch12same = !diff; ch12dist = 1.0;
|
||
startAnim12();
|
||
}
|
||
function reset12() {
|
||
ch12rubbed = false; ch12approaching = false; ch12dist = 1.0;
|
||
if (anim12Id) { cancelAnimationFrame(anim12Id); anim12Id = null; }
|
||
draw12static();
|
||
}
|
||
function upd12() { draw12static(); }
|
||
|
||
function startAnim12() {
|
||
var cv = document.getElementById('cv12');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim12Id) { cancelAnimationFrame(anim12Id); anim12Id = null; }
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 260;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
|
||
var t = 0;
|
||
function frame() {
|
||
ctx.clearRect(0, 0, W, H);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
t += 0.03;
|
||
if (ch12approaching && ch12dist > 0.25) ch12dist -= 0.012;
|
||
draw12scene(ctx, W, H, t);
|
||
anim12Id = requestAnimationFrame(frame);
|
||
}
|
||
anim12Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
function draw12static() {
|
||
var cv = document.getElementById('cv12');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 260;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
draw12scene(ctx, W, H, 0);
|
||
}
|
||
|
||
function draw12scene(ctx, W, H, t) {
|
||
var mid = W / 2;
|
||
var s1x = ch12approaching ? mid - 70 - (ch12same ? 0 : ch12dist * 60) : mid - 110;
|
||
var s1y = H / 2;
|
||
ctx.fillStyle = ch12rubbed ? '#f97316' : '#94a3b8';
|
||
ctx.fillRect(s1x - 40, s1y - 8, 80, 16);
|
||
ctx.fillStyle = '#64748b'; ctx.font = '10px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('Стекло', s1x, s1y + 26);
|
||
if (ch12rubbed) {
|
||
var sign1 = ch12same ? '-' : '+';
|
||
ctx.fillStyle = sign1 === '+' ? '#ef4444' : '#3b82f6';
|
||
ctx.font = 'bold 12px sans-serif';
|
||
for (var i = -3; i <= 3; i++) ctx.fillText(sign1, s1x + i * 10, s1y - 14);
|
||
}
|
||
var s2x = ch12approaching ? mid + 70 + ch12dist * 60 : mid + 110;
|
||
ctx.fillStyle = ch12rubbed ? '#8b5cf6' : '#94a3b8';
|
||
ctx.fillRect(s2x - 40, s1y - 8, 80, 16);
|
||
ctx.fillStyle = '#64748b'; ctx.font = '10px sans-serif';
|
||
ctx.fillText('Эбонит', s2x, s1y + 26);
|
||
if (ch12rubbed) {
|
||
ctx.fillStyle = '#3b82f6'; ctx.font = 'bold 12px sans-serif';
|
||
for (var i = -3; i <= 3; i++) ctx.fillText('-', s2x + i * 10, s1y - 14);
|
||
}
|
||
if (ch12approaching) {
|
||
var color = ch12same ? '#ef4444' : '#22c55e';
|
||
var label = ch12same ? '↔ ОТТАЛКИВАЮТСЯ' : '↔ ПРИТЯГИВАЮТСЯ';
|
||
ctx.strokeStyle = color; ctx.lineWidth = 2;
|
||
ctx.beginPath(); ctx.moveTo(s1x + 42, s1y); ctx.lineTo(s2x - 42, s1y); ctx.stroke();
|
||
ctx.fillStyle = color; ctx.font = 'bold 11px sans-serif';
|
||
ctx.fillText(label, mid, s1y - 42);
|
||
}
|
||
var ex = W - 55, ey = H / 2 - 10;
|
||
ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 1.5;
|
||
ctx.beginPath(); ctx.ellipse(ex, ey, 35, 42, 0, 0, Math.PI * 2); ctx.stroke();
|
||
ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 2.5;
|
||
ctx.beginPath(); ctx.moveTo(ex, ey - 55); ctx.lineTo(ex, ey + 5); ctx.stroke();
|
||
ctx.fillStyle = ch12rubbed ? '#ef4444' : '#94a3b8';
|
||
ctx.beginPath(); ctx.arc(ex, ey - 57, 7, 0, Math.PI * 2); ctx.fill();
|
||
var leafAngle = 0;
|
||
if (ch12rubbed && ch12approaching) leafAngle = Math.min(35, (1 - ch12dist) * 45 + 10) * Math.PI / 180;
|
||
else if (ch12rubbed) leafAngle = 5 * Math.PI / 180;
|
||
var lx1 = ex + Math.sin(-leafAngle) * 28, ly1 = ey + 5 + Math.cos(leafAngle) * 28;
|
||
var lx2 = ex + Math.sin(leafAngle) * 28, ly2 = ey + 5 + Math.cos(leafAngle) * 28;
|
||
ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 2;
|
||
ctx.beginPath(); ctx.moveTo(ex, ey + 5); ctx.lineTo(lx1, ly1); ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(ex, ey + 5); ctx.lineTo(lx2, ly2); ctx.stroke();
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('Электроскоп', ex, H - 8);
|
||
if (!ch12rubbed) { ctx.fillText('Незаряжен', mid, H - 8); }
|
||
else {
|
||
ctx.fillStyle = '#fbbf24';
|
||
ctx.fillText(ch12approaching
|
||
? (ch12same ? 'Одноимённые → отталкивание' : 'Разноимённые → притяжение')
|
||
: 'Потёрты! Приближай палочки', mid, H - 8);
|
||
}
|
||
}
|
||
|
||
// ═══ §13: Проводники и диэлектрики ═══
|
||
var ch13state = 0, ch13anim = null, ch13progress = 0;
|
||
|
||
function connect13() {
|
||
var sel = document.getElementById('sel13mat');
|
||
var isCond = sel && +sel.value === 1;
|
||
ch13state = 1; ch13progress = 0;
|
||
startAnim13(isCond);
|
||
}
|
||
function reset13() {
|
||
ch13state = 0; ch13progress = 0;
|
||
if (ch13anim) { cancelAnimationFrame(ch13anim); ch13anim = null; }
|
||
upd13();
|
||
}
|
||
function upd13() {
|
||
var cv = document.getElementById('cv13');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 240;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
draw13(ctx, W, H, false, 0);
|
||
}
|
||
|
||
function startAnim13(isCond) {
|
||
var cv = document.getElementById('cv13');
|
||
if (!cv) return;
|
||
if (ch13anim) { cancelAnimationFrame(ch13anim); ch13anim = null; }
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 240;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
var electrons = [];
|
||
function frame() {
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
ch13progress = Math.min(1, ch13progress + 0.02);
|
||
if (isCond && ch13progress < 0.9 && Math.random() < 0.3)
|
||
electrons.push({ x: W * 0.35, y: H / 2 + (Math.random() - 0.5) * 20, vx: 1.5, alpha: 1 });
|
||
electrons.forEach(function(e) { e.x += e.vx; e.alpha = Math.max(0, e.alpha - 0.02); });
|
||
electrons = electrons.filter(function(e) { return e.alpha > 0 && e.x < W * 0.65; });
|
||
draw13(ctx, W, H, isCond, ch13progress);
|
||
electrons.forEach(function(e) {
|
||
ctx.globalAlpha = e.alpha;
|
||
ctx.fillStyle = '#3b82f6';
|
||
ctx.beginPath(); ctx.arc(e.x, e.y, 3, 0, Math.PI * 2); ctx.fill();
|
||
ctx.globalAlpha = 1;
|
||
});
|
||
if (ch13progress < 1) ch13anim = requestAnimationFrame(frame);
|
||
else { ch13state = 2; ch13anim = null; }
|
||
}
|
||
ch13anim = requestAnimationFrame(frame);
|
||
}
|
||
|
||
function draw13(ctx, W, H, isCond, progress) {
|
||
var e1x = W * 0.2, e2x = W * 0.8, ey = H / 2;
|
||
function drawScope(cx, charged, label) {
|
||
ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 1.5;
|
||
ctx.beginPath(); ctx.ellipse(cx, ey, 30, 35, 0, 0, Math.PI * 2); ctx.stroke();
|
||
ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 2.5;
|
||
ctx.beginPath(); ctx.moveTo(cx, ey - 45); ctx.lineTo(cx, ey + 5); ctx.stroke();
|
||
ctx.fillStyle = charged ? '#ef4444' : '#94a3b8';
|
||
ctx.beginPath(); ctx.arc(cx, ey - 47, 6, 0, Math.PI * 2); ctx.fill();
|
||
if (charged) {
|
||
ctx.fillStyle = '#fff'; ctx.font = 'bold 7px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('−', cx, ey - 45);
|
||
}
|
||
var angle = charged ? 0.35 : 0.02;
|
||
ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 2;
|
||
ctx.beginPath(); ctx.moveTo(cx, ey + 5);
|
||
ctx.lineTo(cx - Math.sin(angle) * 25, ey + 5 + Math.cos(angle) * 25); ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(cx, ey + 5);
|
||
ctx.lineTo(cx + Math.sin(angle) * 25, ey + 5 + Math.cos(angle) * 25); ctx.stroke();
|
||
ctx.fillStyle = '#64748b'; ctx.font = '9px sans-serif';
|
||
ctx.fillText(label, cx, H - 10);
|
||
}
|
||
var e2charged = isCond && progress > 0.5;
|
||
drawScope(e1x, true, 'Заряжен (−)');
|
||
drawScope(e2x, e2charged, e2charged ? 'Получил заряд!' : 'Незаряжен');
|
||
var sel = document.getElementById('sel13mat');
|
||
var matName = sel ? sel.options[sel.selectedIndex].text.split('(')[0].trim() : 'Материал';
|
||
ctx.strokeStyle = isCond ? '#22c55e' : '#ef4444'; ctx.lineWidth = isCond ? 3 : 2;
|
||
if (!isCond) ctx.setLineDash([6, 4]);
|
||
ctx.beginPath(); ctx.moveTo(e1x + 32, ey - 47); ctx.lineTo(e2x - 32, ey - 47); ctx.stroke();
|
||
ctx.setLineDash([]);
|
||
ctx.fillStyle = isCond ? '#22c55e' : '#ef4444'; ctx.font = '9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText(matName, W / 2, ey - 57);
|
||
if (progress > 0.5) {
|
||
ctx.fillStyle = isCond ? '#22c55e' : '#f97316'; ctx.font = 'bold 11px sans-serif';
|
||
ctx.fillText(isCond ? '✓ Заряд перешёл — проводник!' : '✗ Заряд не перешёл — диэлектрик!', W / 2, H - 28);
|
||
}
|
||
}
|
||
|
||
// ═══ §14: Электризация через влияние (Pro Max) ═══
|
||
var sl14dval = 80;
|
||
var anim14Id = null;
|
||
var electrons14 = null;
|
||
var target14d = 80; // целевое положение слайдера для плавных анимаций "поднести/убрать"
|
||
|
||
function initElectrons14(){
|
||
electrons14 = [];
|
||
for (var i = 0; i < 14; i++){
|
||
electrons14.push({ x: 0.1 + Math.random()*0.8, y: 0.2 + Math.random()*0.6, vx: 0, vy: 0 });
|
||
}
|
||
}
|
||
function approach14(){
|
||
target14d = 12;
|
||
var sl = document.getElementById('sl14d'); if(sl) sl.value = 12;
|
||
}
|
||
function reset14(){
|
||
target14d = 80;
|
||
var sl = document.getElementById('sl14d'); if(sl) sl.value = 80;
|
||
}
|
||
|
||
function upd14() {
|
||
var cv = document.getElementById('cv14');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (!electrons14) initElectrons14();
|
||
if (anim14Id) { cancelAnimationFrame(anim14Id); anim14Id = null; }
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 260;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
|
||
function frame(now){
|
||
var W2 = cv.offsetWidth, H2 = cv.offsetHeight || 260;
|
||
if (W2 !== W){ W = W2; cv.width = Math.round(W*dpr); cv.height = Math.round(H2*dpr); ctx.setTransform(dpr,0,0,dpr,0,0); }
|
||
H = H2;
|
||
// плавное приближение sl14dval к target14d
|
||
sl14dval += (target14d - sl14dval) * 0.12;
|
||
var sl = document.getElementById('sl14d');
|
||
if (sl && Math.abs(+sl.value - sl14dval) > 0.5) sl.value = Math.round(sl14dval);
|
||
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
// фоновая сетка
|
||
ctx.strokeStyle = 'rgba(148,163,184,.04)'; ctx.lineWidth = 1;
|
||
for (var gx = 20; gx < W; gx += 30){ ctx.beginPath(); ctx.moveTo(gx,0); ctx.lineTo(gx,H); ctx.stroke(); }
|
||
|
||
var d = sl14dval / 100;
|
||
var lbl = document.getElementById('lbl14d');
|
||
if (lbl) lbl.textContent = d < 0.25 ? '🔥 очень близко' : d < 0.5 ? 'близко' : d < 0.75 ? 'среднее' : 'далеко';
|
||
var sel = document.getElementById('sel14sign');
|
||
var sign = sel ? +sel.value : 1;
|
||
var cx = W/2, cy = H/2 - 10;
|
||
|
||
// Проводник (металлический брусок) с градиентом
|
||
var condX = cx - 90, condY = cy - 30, condW = 180, condH = 60;
|
||
var mgrd = ctx.createLinearGradient(condX, condY, condX, condY + condH);
|
||
mgrd.addColorStop(0, 'rgba(148,163,184,.35)');
|
||
mgrd.addColorStop(0.5,'rgba(203,213,225,.5)');
|
||
mgrd.addColorStop(1, 'rgba(100,116,139,.4)');
|
||
ctx.fillStyle = mgrd;
|
||
ctx.fillRect(condX, condY, condW, condH);
|
||
ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 2; ctx.strokeRect(condX, condY, condW, condH);
|
||
ctx.fillStyle = '#cbd5e1'; ctx.font = 'bold 10px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('Проводник (металл)', cx, condY + condH + 14);
|
||
|
||
var influence = Math.max(0, 1 - d * 1.25);
|
||
// Силовое влияние палочки: электроны притягиваются к + (или отталкиваются от −)
|
||
// sign>0 (+ палочка) → электроны идут влево; sign<0 (− палочка) → электроны идут вправо
|
||
var pullDir = sign > 0 ? -1 : 1; // направление дрейфа
|
||
var pull = influence * 0.0035 * pullDir; // ускорение
|
||
|
||
// Анимация электронов внутри проводника
|
||
var leftCount = 0, rightCount = 0;
|
||
electrons14.forEach(function(e){
|
||
e.vx += pull;
|
||
e.vx *= 0.85;
|
||
e.vy *= 0.85;
|
||
e.vy += (Math.random() - 0.5) * 0.0015; // лёгкое броуновское
|
||
e.x += e.vx;
|
||
e.y += e.vy;
|
||
// мягкие стенки
|
||
if (e.x < 0.06){ e.x = 0.06; e.vx = -e.vx*0.4; }
|
||
if (e.x > 0.94){ e.x = 0.94; e.vx = -e.vx*0.4; }
|
||
if (e.y < 0.12){ e.y = 0.12; e.vy = -e.vy*0.4; }
|
||
if (e.y > 0.88){ e.y = 0.88; e.vy = -e.vy*0.4; }
|
||
// отрисовка
|
||
var ex = condX + e.x * condW;
|
||
var ey = condY + e.y * condH;
|
||
ctx.fillStyle = 'rgba(59,130,246,.9)'; ctx.shadowColor = '#3b82f6'; ctx.shadowBlur = 6;
|
||
ctx.beginPath(); ctx.arc(ex, ey, 3.5, 0, Math.PI*2); ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
ctx.fillStyle = '#dbeafe'; ctx.font = 'bold 7px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('−', ex, ey + 2);
|
||
if (e.x < 0.5) leftCount++; else rightCount++;
|
||
});
|
||
|
||
// Метки заряда на боковых гранях проводника (избыток/недостаток)
|
||
var balance = 7; // равновесное число электронов в каждой половине (всего 14)
|
||
var leftExcess = leftCount - balance; // >0: избыток e- слева → "−" сильнее
|
||
var rightExcess = rightCount - balance; // >0: избыток e- справа → "−" сильнее
|
||
// Левая грань
|
||
var leftSign = leftExcess > 0 ? '−' : leftExcess < 0 ? '+' : '·';
|
||
var leftCol = leftExcess > 0 ? '#3b82f6' : leftExcess < 0 ? '#ef4444' : '#64748b';
|
||
ctx.fillStyle = leftCol; ctx.font = 'bold 11px sans-serif'; ctx.textAlign = 'center';
|
||
for (var k = 0; k < 4; k++) ctx.fillText(leftSign, condX - 8, condY + 14 + k*14);
|
||
// Правая грань
|
||
var rightSign = rightExcess > 0 ? '−' : rightExcess < 0 ? '+' : '·';
|
||
var rightCol = rightExcess > 0 ? '#3b82f6' : rightExcess < 0 ? '#ef4444' : '#64748b';
|
||
ctx.fillStyle = rightCol;
|
||
for (var k = 0; k < 4; k++) ctx.fillText(rightSign, condX + condW + 8, condY + 14 + k*14);
|
||
|
||
// Палочка
|
||
var stickX = condX - 30 - d * 100;
|
||
var stickW = 70, stickH = 22;
|
||
var sgrd = ctx.createLinearGradient(stickX - stickW, cy - stickH/2, stickX, cy + stickH/2);
|
||
if (sign > 0){ sgrd.addColorStop(0,'#fca5a5'); sgrd.addColorStop(1,'#dc2626'); }
|
||
else { sgrd.addColorStop(0,'#93c5fd'); sgrd.addColorStop(1,'#1d4ed8'); }
|
||
ctx.fillStyle = sgrd; ctx.fillRect(stickX - stickW, cy - stickH/2, stickW, stickH);
|
||
ctx.strokeStyle = sign > 0 ? '#ef4444' : '#3b82f6'; ctx.lineWidth = 1.5;
|
||
ctx.strokeRect(stickX - stickW, cy - stickH/2, stickW, stickH);
|
||
ctx.fillStyle = '#fff'; ctx.font = 'bold 11px sans-serif'; ctx.textAlign = 'center';
|
||
var symb = sign > 0 ? '+' : '−';
|
||
for (var i = 0; i < 5; i++) ctx.fillText(symb, stickX - stickW + 8 + i*14, cy + 4);
|
||
ctx.fillStyle = sign > 0 ? '#fca5a5' : '#93c5fd'; ctx.font = '9px sans-serif';
|
||
ctx.fillText((sign > 0 ? '+' : '−') + ' заряж. палочка', stickX - stickW/2, cy + stickH/2 + 14);
|
||
|
||
// Силовые линии поля от палочки к проводнику (когда близко)
|
||
if (influence > 0.05){
|
||
ctx.strokeStyle = 'rgba(251,191,36,' + (influence * 0.6).toFixed(2) + ')';
|
||
ctx.lineWidth = 1.2; ctx.setLineDash([4, 3]);
|
||
for (var ln = 0; ln < 4; ln++){
|
||
var y0 = cy - 14 + ln * 10;
|
||
ctx.beginPath();
|
||
ctx.moveTo(stickX + 2, y0);
|
||
ctx.lineTo(condX - 2, y0);
|
||
ctx.stroke();
|
||
}
|
||
ctx.setLineDash([]);
|
||
// стрелочки направления
|
||
ctx.fillStyle = 'rgba(251,191,36,' + (influence * 0.8).toFixed(2) + ')';
|
||
ctx.font = 'bold 9px sans-serif'; ctx.textAlign = 'center';
|
||
var arrowDir = sign > 0 ? '→' : '→'; // поле направлено от + к −, для отображения тока электронов:
|
||
// подпись e- движение
|
||
ctx.fillStyle = 'rgba(147,197,253,0.9)';
|
||
ctx.fillText('e⁻ дрейф ' + (sign > 0 ? '←' : '→'), (stickX + condX)/2, cy - 22);
|
||
}
|
||
|
||
// Чипы (обновляем DOM)
|
||
var chipL = document.getElementById('chip14L');
|
||
var chipR = document.getElementById('chip14R');
|
||
var chipF = document.getElementById('chip14F');
|
||
if (chipL) chipL.textContent = 'Левая: ' + (leftExcess > 0 ? '−' + leftExcess : leftExcess < 0 ? '+' + (-leftExcess) : '0') + ' e';
|
||
if (chipR) chipR.textContent = 'Правая: ' + (rightExcess > 0 ? '−' + rightExcess : rightExcess < 0 ? '+' + (-rightExcess) : '0') + ' e';
|
||
if (chipF) chipF.textContent = 'Влияние: ' + Math.round(influence * 100) + '%';
|
||
|
||
anim14Id = requestAnimationFrame(frame);
|
||
}
|
||
anim14Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ §15: Элементарный заряд q=eN ═══
|
||
var sl15Nval = 0;
|
||
|
||
function upd15() {
|
||
var cv = document.getElementById('cv15');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 180;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
var N = sl15Nval || 0;
|
||
var e = 1.6e-19;
|
||
ctx.fillStyle = 'rgba(239,68,68,.15)'; ctx.fillRect(20, 30, 100, 80);
|
||
ctx.strokeStyle = '#ef4444'; ctx.lineWidth = 1.5; ctx.strokeRect(20, 30, 100, 80);
|
||
ctx.fillStyle = '#ef4444'; ctx.font = 'bold 9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('Тело 1', 70, 20);
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '8px sans-serif';
|
||
ctx.fillText('Потеряло ' + N + ' e⁻', 70, 120);
|
||
ctx.fillStyle = 'rgba(59,130,246,.15)'; ctx.fillRect(W - 120, 30, 100, 80);
|
||
ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 1.5; ctx.strokeRect(W - 120, 30, 100, 80);
|
||
ctx.fillStyle = '#3b82f6'; ctx.font = 'bold 9px sans-serif';
|
||
ctx.fillText('Тело 2', W - 70, 20);
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '8px sans-serif';
|
||
ctx.fillText('Получило ' + N + ' e⁻', W - 70, 120);
|
||
if (N > 0) {
|
||
var eCount = Math.min(N / 100, 15);
|
||
for (var i = 0; i < eCount; i++) {
|
||
var ex2 = 130 + (i / eCount) * (W - 250);
|
||
var ey2 = 60 + Math.sin(i * 1.2) * 15;
|
||
ctx.fillStyle = '#3b82f6'; ctx.beginPath(); ctx.arc(ex2, ey2, 3, 0, Math.PI * 2); ctx.fill();
|
||
ctx.fillStyle = '#93c5fd'; ctx.font = '7px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('e⁻', ex2, ey2 - 6);
|
||
}
|
||
ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 1.5;
|
||
ctx.beginPath(); ctx.moveTo(122, 70); ctx.lineTo(W - 122, 70); ctx.stroke();
|
||
ctx.fillStyle = '#3b82f6'; ctx.font = 'bold 8px sans-serif';
|
||
ctx.fillText('→ ' + N + ' электронов', W / 2, 65);
|
||
}
|
||
var qStr = N === 0 ? '0' : (N * e).toExponential(2);
|
||
var res = document.getElementById('res15');
|
||
if (res) {
|
||
res.innerHTML = '$q = e \\times ' + N + ' = ' + qStr + '$ Кл' +
|
||
(N > 0 ? ' | Тело 1: <b>+' + qStr + '</b> Кл Тело 2: <b>−' + qStr + '</b> Кл' : '');
|
||
if (window.doRender) doRender(res);
|
||
}
|
||
}
|
||
|
||
// ═══ §16: Модель атома и ионы ═══
|
||
var atom16state = { protons: 6, electrons: 6, name: 'C' };
|
||
var anim16Id = null;
|
||
|
||
function reset16() {
|
||
var sel = document.getElementById('sel16elem');
|
||
if (sel) {
|
||
var parts = sel.value.split(',');
|
||
atom16state.protons = +parts[0];
|
||
atom16state.electrons = +parts[1];
|
||
atom16state.name = sel.options[sel.selectedIndex].text.split(' ')[0];
|
||
}
|
||
if (anim16Id) { cancelAnimationFrame(anim16Id); anim16Id = null; }
|
||
startAnim16();
|
||
}
|
||
function ionize16(delta) {
|
||
atom16state.electrons = Math.max(0, Math.min(atom16state.protons + 3, atom16state.electrons + delta));
|
||
if (!anim16Id) startAnim16();
|
||
updateRes16();
|
||
}
|
||
function updateRes16() {
|
||
var res = document.getElementById('res16');
|
||
if (!res) return;
|
||
var p = atom16state.protons, e = atom16state.electrons;
|
||
var charge = p - e;
|
||
var type = charge === 0 ? 'Нейтральный атом' : charge > 0 ? 'Катион (+' + charge + ')' : 'Анион (' + charge + ')';
|
||
res.textContent = type + ': ' + p + ' протонов, ' + e + ' электронов — заряд ' + (charge > 0 ? '+' : '') + charge + 'e';
|
||
}
|
||
function startAnim16() {
|
||
var cv = document.getElementById('cv16');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim16Id) { cancelAnimationFrame(anim16Id); anim16Id = null; }
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 240;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
var t0 = performance.now();
|
||
function frame(now) {
|
||
ctx.clearRect(0, 0, W, H);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
var t = (now - t0) / 1000;
|
||
var cx = W / 2, cy = H / 2;
|
||
var p = atom16state.protons, e = atom16state.electrons;
|
||
var nucR = 18 + Math.min(p, 8);
|
||
var grd = ctx.createRadialGradient(cx, cy, 0, cx, cy, nucR);
|
||
grd.addColorStop(0, '#fca5a5'); grd.addColorStop(1, '#dc2626');
|
||
ctx.fillStyle = grd;
|
||
ctx.beginPath(); ctx.arc(cx, cy, nucR, 0, Math.PI * 2); ctx.fill();
|
||
ctx.fillStyle = '#fff'; ctx.font = 'bold 9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText(atom16state.name, cx, cy + 4);
|
||
var shells = [2, 8, 8, 2];
|
||
var remainE = e, shell = 0;
|
||
while (remainE > 0 && shell < 4) {
|
||
var count = Math.min(remainE, shells[shell]);
|
||
var r = nucR + 25 + shell * 28;
|
||
ctx.strokeStyle = 'rgba(148,163,184,.2)'; ctx.lineWidth = 1;
|
||
ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.stroke();
|
||
for (var i = 0; i < count; i++) {
|
||
var angle = t * (1.5 - shell * 0.3) + (i / count) * Math.PI * 2;
|
||
var ex2 = cx + Math.cos(angle) * r, ey2 = cy + Math.sin(angle) * r;
|
||
ctx.fillStyle = '#3b82f6'; ctx.shadowColor = '#3b82f6'; ctx.shadowBlur = 5;
|
||
ctx.beginPath(); ctx.arc(ex2, ey2, 4, 0, Math.PI * 2); ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
ctx.fillStyle = '#93c5fd'; ctx.font = '7px sans-serif';
|
||
ctx.fillText('e⁻', ex2, ey2 - 7);
|
||
}
|
||
remainE -= count; shell++;
|
||
}
|
||
var charge = p - e;
|
||
var color = charge === 0 ? '#94a3b8' : charge > 0 ? '#ef4444' : '#3b82f6';
|
||
var label = charge === 0 ? 'Нейтральный атом'
|
||
: charge > 0 ? 'Катион ' + atom16state.name + '+'.repeat(charge)
|
||
: 'Анион ' + atom16state.name + '-'.repeat(-charge);
|
||
ctx.fillStyle = color; ctx.font = 'bold 11px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText(label, cx, H - 12);
|
||
updateRes16();
|
||
anim16Id = requestAnimationFrame(frame);
|
||
}
|
||
anim16Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ Заглушки §17-§31 (не изменены) ═══
|
||
var anim17Id=null,anim19Id=null,anim20Id=null,anim22Id=null;
|
||
var anim28Id=null,anim29Id=null,anim30Id=null,anim31Id=null;
|
||
// ═══ §17: Силовые линии электрического поля (Pro Max) ═══
|
||
var probe17 = { x: 0.65, y: 0.35 }; // относительные координаты
|
||
var probe17Init = false;
|
||
var anim17DragId = null;
|
||
var dragging17 = false;
|
||
|
||
function upd17() {
|
||
var cv = document.getElementById('cv17');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim17Id) { cancelAnimationFrame(anim17Id); anim17Id = null; }
|
||
if (!probe17Init) {
|
||
probe17Init = true;
|
||
// mouse / touch обработка
|
||
cv.addEventListener('mousedown', function(ev){
|
||
var rect = cv.getBoundingClientRect();
|
||
var mx = (ev.clientX - rect.left) / rect.width;
|
||
var my = (ev.clientY - rect.top) / rect.height;
|
||
// если клик возле пробного заряда (или включён showProbe) — начать drag
|
||
var dx = mx - probe17.x, dy = my - probe17.y;
|
||
if (Math.hypot(dx*rect.width, dy*rect.height) < 30 || true){
|
||
dragging17 = true;
|
||
probe17.x = mx; probe17.y = my;
|
||
}
|
||
});
|
||
cv.addEventListener('mousemove', function(ev){
|
||
if (!dragging17) return;
|
||
var rect = cv.getBoundingClientRect();
|
||
probe17.x = Math.max(0.02, Math.min(0.98, (ev.clientX - rect.left) / rect.width));
|
||
probe17.y = Math.max(0.05, Math.min(0.95, (ev.clientY - rect.top) / rect.height));
|
||
});
|
||
window.addEventListener('mouseup', function(){ dragging17 = false; });
|
||
cv.addEventListener('touchstart', function(ev){
|
||
if (!ev.touches[0]) return;
|
||
var rect = cv.getBoundingClientRect();
|
||
probe17.x = (ev.touches[0].clientX - rect.left) / rect.width;
|
||
probe17.y = (ev.touches[0].clientY - rect.top) / rect.height;
|
||
dragging17 = true;
|
||
ev.preventDefault();
|
||
}, {passive:false});
|
||
cv.addEventListener('touchmove', function(ev){
|
||
if (!dragging17 || !ev.touches[0]) return;
|
||
var rect = cv.getBoundingClientRect();
|
||
probe17.x = Math.max(0.02, Math.min(0.98, (ev.touches[0].clientX - rect.left) / rect.width));
|
||
probe17.y = Math.max(0.05, Math.min(0.95, (ev.touches[0].clientY - rect.top) / rect.height));
|
||
ev.preventDefault();
|
||
}, {passive:false});
|
||
cv.addEventListener('touchend', function(){ dragging17 = false; });
|
||
}
|
||
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 300;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
|
||
var flowOffset = 0;
|
||
function frame(now){
|
||
var W2 = cv.offsetWidth, H2 = cv.offsetHeight || 300;
|
||
if (W2 !== W){ W = W2; H = H2; cv.width = Math.round(W*dpr); cv.height = Math.round(H*dpr); ctx.setTransform(dpr,0,0,dpr,0,0); }
|
||
H = H2;
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
|
||
var sel = document.getElementById('sel17mode');
|
||
var mode = sel ? sel.value : 'dipole';
|
||
var showProbe = document.getElementById('chk17probe') && document.getElementById('chk17probe').checked;
|
||
var flowOn = document.getElementById('chk17flow') && document.getElementById('chk17flow').checked;
|
||
|
||
var charges = [];
|
||
if (mode === 'single_pos') charges = [{x: W/2, y: H/2, q: 1}];
|
||
else if (mode === 'single_neg') charges = [{x: W/2, y: H/2, q: -1}];
|
||
else if (mode === 'dipole') charges = [{x: W/3, y: H/2, q: 1}, {x: 2*W/3, y: H/2, q: -1}];
|
||
else if (mode === 'same_pos') charges = [{x: W/3, y: H/2, q: 1}, {x: 2*W/3, y: H/2, q: 1}];
|
||
else charges = [{x: W*0.30, y: H*0.32, q: 1}, {x: W*0.70, y: H*0.32, q: -1}, {x: W*0.30, y: H*0.68, q: -1}, {x: W*0.70, y: H*0.68, q: 1}];
|
||
|
||
// Силовые линии (вычисляем линию точками для анимации потока)
|
||
var nLines = 14;
|
||
var allLines = [];
|
||
function tracePositive(ch){
|
||
for (var i = 0; i < nLines; i++) {
|
||
var angle = (i / nLines) * Math.PI * 2;
|
||
var x = ch.x + Math.cos(angle) * 20;
|
||
var y = ch.y + Math.sin(angle) * 20;
|
||
var pts = [{x:x, y:y}];
|
||
for (var step = 0; step < 220; step++) {
|
||
var fx = 0, fy = 0;
|
||
charges.forEach(function(c) {
|
||
var dx = x - c.x, dy = y - c.y;
|
||
var r2 = dx*dx + dy*dy;
|
||
if (r2 < 9) return;
|
||
var f = c.q / r2;
|
||
fx += f * dx / Math.sqrt(r2);
|
||
fy += f * dy / Math.sqrt(r2);
|
||
});
|
||
var len = Math.sqrt(fx*fx + fy*fy);
|
||
if (len < 1e-6) break;
|
||
x += fx/len * 3; y += fy/len * 3;
|
||
pts.push({x:x, y:y});
|
||
if (x < -10 || x > W+10 || y < -10 || y > H+10) break;
|
||
var nearNeg = charges.some(function(c) { return c.q < 0 && Math.hypot(x-c.x, y-c.y) < 18; });
|
||
if (nearNeg) break;
|
||
}
|
||
allLines.push(pts);
|
||
}
|
||
}
|
||
function traceNegativeOnly(ch){
|
||
// если есть только отрицательные — рисуем линии вокруг с обратным шагом
|
||
for (var i = 0; i < nLines; i++) {
|
||
var angle = (i / nLines) * Math.PI * 2;
|
||
var x = ch.x + Math.cos(angle) * 70;
|
||
var y = ch.y + Math.sin(angle) * 70;
|
||
var pts = [{x:x, y:y}];
|
||
for (var step = 0; step < 220; step++) {
|
||
var fx = 0, fy = 0;
|
||
charges.forEach(function(c) {
|
||
var dx = x - c.x, dy = y - c.y;
|
||
var r2 = dx*dx + dy*dy;
|
||
if (r2 < 9) return;
|
||
var f = c.q / r2;
|
||
fx += f * dx / Math.sqrt(r2);
|
||
fy += f * dy / Math.sqrt(r2);
|
||
});
|
||
var len = Math.sqrt(fx*fx + fy*fy);
|
||
if (len < 1e-6) break;
|
||
x += fx/len * 3; y += fy/len * 3;
|
||
pts.push({x:x, y:y});
|
||
if (Math.hypot(x - ch.x, y - ch.y) < 22) break;
|
||
if (x < -10 || x > W+10 || y < -10 || y > H+10) break;
|
||
}
|
||
allLines.push(pts);
|
||
}
|
||
}
|
||
var hasPos = charges.some(function(c){return c.q>0;});
|
||
if (hasPos) charges.forEach(function(c){ if (c.q>0) tracePositive(c); });
|
||
else charges.forEach(function(c){ if (c.q<0) traceNegativeOnly(c); });
|
||
|
||
// Отрисовка линий (бледных)
|
||
ctx.strokeStyle = 'rgba(147,197,253,.35)'; ctx.lineWidth = 1.4;
|
||
allLines.forEach(function(pts){
|
||
ctx.beginPath();
|
||
pts.forEach(function(p, idx){ if (idx===0) ctx.moveTo(p.x, p.y); else ctx.lineTo(p.x, p.y); });
|
||
ctx.stroke();
|
||
});
|
||
|
||
// Анимированный поток - яркие точки бегут по линиям
|
||
if (flowOn) {
|
||
flowOffset = (flowOffset + 0.4) % 12;
|
||
allLines.forEach(function(pts){
|
||
for (var t = 0; t < pts.length; t += 12){
|
||
var idx = Math.floor((t + flowOffset) % pts.length);
|
||
var p = pts[idx]; if (!p) continue;
|
||
ctx.fillStyle = 'rgba(252,211,77,0.85)';
|
||
ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI*2); ctx.fill();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Заряды
|
||
charges.forEach(function(ch) {
|
||
var grd = ctx.createRadialGradient(ch.x, ch.y, 0, ch.x, ch.y, 22);
|
||
if (ch.q > 0) { grd.addColorStop(0, 'rgba(254,202,202,1)'); grd.addColorStop(1, 'rgba(220,38,38,.2)'); }
|
||
else { grd.addColorStop(0, 'rgba(191,219,254,1)'); grd.addColorStop(1, 'rgba(37,99,235,.2)'); }
|
||
ctx.fillStyle = grd;
|
||
ctx.shadowColor = ch.q > 0 ? '#ef4444' : '#3b82f6'; ctx.shadowBlur = 12;
|
||
ctx.beginPath(); ctx.arc(ch.x, ch.y, 22, 0, Math.PI * 2); ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
ctx.fillStyle = '#fff'; ctx.font = 'bold 20px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText(ch.q > 0 ? '+' : '−', ch.x, ch.y + 7);
|
||
});
|
||
|
||
// Пробный заряд
|
||
var px = probe17.x * W, py = probe17.y * H;
|
||
var fx = 0, fy = 0;
|
||
charges.forEach(function(c) {
|
||
var dx = px - c.x, dy = py - c.y;
|
||
var r = Math.sqrt(dx*dx+dy*dy);
|
||
if (r < 1) return;
|
||
fx += c.q * dx / (r*r*r); fy += c.q * dy / (r*r*r);
|
||
});
|
||
var flen = Math.sqrt(fx*fx+fy*fy);
|
||
|
||
if (showProbe) {
|
||
// вектор силы
|
||
if (flen > 0) {
|
||
var scale = Math.min(60, 200 * Math.sqrt(flen));
|
||
var ax = px + fx/flen * scale, ay = py + fy/flen * scale;
|
||
ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 2.5;
|
||
ctx.beginPath(); ctx.moveTo(px, py); ctx.lineTo(ax, ay); ctx.stroke();
|
||
var ang = Math.atan2(ay-py, ax-px);
|
||
ctx.fillStyle = '#fbbf24';
|
||
ctx.beginPath();
|
||
ctx.moveTo(ax, ay);
|
||
ctx.lineTo(ax - 10*Math.cos(ang-0.4), ay - 10*Math.sin(ang-0.4));
|
||
ctx.lineTo(ax - 10*Math.cos(ang+0.4), ay - 10*Math.sin(ang+0.4));
|
||
ctx.fill();
|
||
}
|
||
// сам заряд (жёлтый кружок)
|
||
ctx.fillStyle = '#fbbf24'; ctx.shadowColor = '#fbbf24'; ctx.shadowBlur = 8;
|
||
ctx.beginPath(); ctx.arc(px, py, 10, 0, Math.PI * 2); ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
ctx.strokeStyle = '#92400e'; ctx.lineWidth = 1.5; ctx.stroke();
|
||
ctx.fillStyle = '#1c1917'; ctx.font = 'bold 11px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('+', px, py + 4);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = '9px sans-serif';
|
||
ctx.fillText('пробный q', px, py + 24);
|
||
}
|
||
|
||
// Чипы
|
||
var chipF = document.getElementById('chip17F');
|
||
var chipE = document.getElementById('chip17E');
|
||
var chipD = document.getElementById('chip17dir');
|
||
var Fmag = flen * 1000; // условные у.е.
|
||
var Emag = Fmag; // F = qE; при q=1 у.е. F=E
|
||
if (chipF) chipF.textContent = '|F| ≈ ' + (Fmag < 0.01 ? '0' : Fmag < 1 ? Fmag.toFixed(2) : Fmag.toFixed(1)) + ' у.е.';
|
||
if (chipE) chipE.textContent = 'E ≈ ' + (Emag < 0.01 ? '0' : Emag < 1 ? Emag.toFixed(2) : Emag.toFixed(1)) + ' у.е.';
|
||
if (chipD) {
|
||
var deg = Math.round(Math.atan2(fy, fx) * 180 / Math.PI);
|
||
chipD.textContent = flen > 1e-4 ? ('направление: ' + (deg >= 0 ? '+' : '') + deg + '°') : 'направление: —';
|
||
}
|
||
|
||
anim17Id = requestAnimationFrame(frame);
|
||
}
|
||
anim17Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ §18: A = qU ═══
|
||
function upd18() {
|
||
var cv = document.getElementById('cv18');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 180;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
|
||
var U = parseFloat((document.getElementById('sl18U') || {}).value) || 12;
|
||
var q = parseFloat((document.getElementById('sl18q') || {}).value) || 1;
|
||
var A = q * U;
|
||
|
||
ctx.fillStyle = '#374151'; ctx.fillRect(20, H/2-30, 60, 60);
|
||
ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 1.5; ctx.strokeRect(20, H/2-30, 60, 60);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText(U + ' В', 50, H/2+5);
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '8px sans-serif';
|
||
ctx.fillText('Источник', 50, H/2+18);
|
||
|
||
var bright = Math.min(1, A / 500);
|
||
var lampX = W - 80, lampY = H/2;
|
||
if (bright > 0.05) {
|
||
var grd = ctx.createRadialGradient(lampX, lampY, 0, lampX, lampY, 40*bright+10);
|
||
grd.addColorStop(0, 'rgba(253,224,71,' + (bright*0.8) + ')');
|
||
grd.addColorStop(1, 'transparent');
|
||
ctx.fillStyle = grd;
|
||
ctx.beginPath(); ctx.arc(lampX, lampY, 40*bright+10, 0, Math.PI*2); ctx.fill();
|
||
}
|
||
ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 2;
|
||
ctx.beginPath(); ctx.arc(lampX, lampY, 18, 0, Math.PI*2); ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(lampX-10, lampY-10); ctx.lineTo(lampX+10, lampY+10); ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(lampX+10, lampY-10); ctx.lineTo(lampX-10, lampY+10); ctx.stroke();
|
||
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 2;
|
||
ctx.beginPath(); ctx.moveTo(80, H/2-15); ctx.lineTo(W-98, H/2-15); ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(80, H/2+15); ctx.lineTo(W-98, H/2+15); ctx.stroke();
|
||
|
||
var nDots = Math.min(8, Math.round(q * 2 + 1));
|
||
for (var i = 0; i < nDots; i++) {
|
||
var t2 = (Date.now()/1500 + i/nDots) % 1;
|
||
var dotX = 80 + t2 * (W - 178);
|
||
ctx.fillStyle = 'rgba(99,102,241,0.8)';
|
||
ctx.beginPath(); ctx.arc(dotX, H/2-15, 3, 0, Math.PI*2); ctx.fill();
|
||
}
|
||
|
||
var barW = Math.min(W-40, A / 1000 * (W-40));
|
||
ctx.fillStyle = 'rgba(99,102,241,.15)'; ctx.fillRect(20, H-28, W-40, 16);
|
||
ctx.fillStyle = 'rgba(99,102,241,.8)'; ctx.fillRect(20, H-28, Math.min(W-40, barW), 16);
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = '9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('A = ' + (A >= 1000 ? (A/1000).toFixed(1) + ' кДж' : A.toFixed(1) + ' Дж'), W/2, H-16);
|
||
|
||
var res = document.getElementById('res18');
|
||
if (res) res.textContent = 'A = qU = ' + q.toFixed(1) + ' x ' + U + ' = ' + A.toFixed(1) + ' Дж';
|
||
anim18Id = requestAnimationFrame(upd18);
|
||
}
|
||
|
||
var anim18Id = null;
|
||
function startAnim18() {
|
||
var cv = document.getElementById('cv18');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
anim18Id = requestAnimationFrame(upd18);
|
||
}
|
||
|
||
// ═══ §19: Электрический ток в цепи ═══
|
||
var anim19Id = null, key19 = false, src19label = 'Батарейка (1,5 В)';
|
||
function toggle19() {
|
||
key19 = !key19;
|
||
var btn = document.getElementById('btn19key');
|
||
if (btn) btn.textContent = key19 ? '🔑 Разомкнуть цепь' : '🔑 Замкнуть цепь';
|
||
if (key19) startAnim19(); else { if (anim19Id) { cancelAnimationFrame(anim19Id); anim19Id = null; } draw19frame(false); }
|
||
}
|
||
function upd19src() {
|
||
var sel = document.getElementById('sel19src');
|
||
if (sel) src19label = sel.options[sel.selectedIndex].text;
|
||
}
|
||
|
||
function startAnim19() {
|
||
var cv = document.getElementById('cv19');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim19Id) { cancelAnimationFrame(anim19Id); anim19Id = null; }
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 220;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
var electrons = [];
|
||
for (var i = 0; i < 12; i++) electrons.push({ pos: i / 12, speed: 0.005 + Math.random() * 0.002 });
|
||
function frame() {
|
||
draw19frame(true, ctx, W, H, electrons);
|
||
electrons.forEach(function(e) { e.pos = (e.pos + e.speed) % 1; });
|
||
anim19Id = requestAnimationFrame(frame);
|
||
}
|
||
anim19Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
function draw19frame(closed, ctx2, W2, H2, electrons) {
|
||
var cv = document.getElementById('cv19');
|
||
if (!cv) return;
|
||
var dpr = window.devicePixelRatio || 1;
|
||
if (!ctx2) {
|
||
W2 = cv.offsetWidth; H2 = cv.offsetHeight || 220;
|
||
cv.width = Math.round(W2*dpr); cv.height = Math.round(H2*dpr);
|
||
ctx2 = cv.getContext('2d');
|
||
ctx2.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
}
|
||
var ctx = ctx2, W = W2, H = H2;
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
|
||
var pad = 30, cw = W - pad*2, ch = H - pad*2;
|
||
var path = [{x:pad,y:pad},{x:pad+cw,y:pad},{x:pad+cw,y:pad+ch},{x:pad,y:pad+ch}];
|
||
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 3;
|
||
ctx.beginPath();
|
||
ctx.moveTo(path[0].x, path[0].y);
|
||
path.forEach(function(p) { ctx.lineTo(p.x, p.y); });
|
||
ctx.closePath(); ctx.stroke();
|
||
|
||
var sx = pad, sy = H/2;
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(sx-15, sy-25, 30, 50);
|
||
ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 1.5; ctx.strokeRect(sx-15, sy-25, 30, 50);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 8px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('+', sx, sy-8); ctx.fillStyle = '#94a3b8';
|
||
ctx.fillText('-', sx, sy+14);
|
||
ctx.font = '7px sans-serif'; ctx.fillText(src19label.split(' ')[0], sx, sy+36);
|
||
|
||
var lx = pad+cw, ly = H/2;
|
||
if (closed) {
|
||
var grd = ctx.createRadialGradient(lx, ly, 0, lx, ly, 30);
|
||
grd.addColorStop(0, 'rgba(253,224,71,.6)'); grd.addColorStop(1, 'transparent');
|
||
ctx.fillStyle = grd; ctx.beginPath(); ctx.arc(lx, ly, 30, 0, Math.PI*2); ctx.fill();
|
||
}
|
||
ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 2;
|
||
ctx.beginPath(); ctx.arc(lx, ly, 14, 0, Math.PI*2); ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(lx-8, ly-8); ctx.lineTo(lx+8, ly+8); ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(lx+8, ly-8); ctx.lineTo(lx-8, ly+8); ctx.stroke();
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '7px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('Лампа', lx, ly+26);
|
||
|
||
var kx = W/2, ky = pad;
|
||
ctx.fillStyle = '#475569'; ctx.beginPath(); ctx.arc(kx-12, ky, 4, 0, Math.PI*2); ctx.fill();
|
||
ctx.fillStyle = '#475569'; ctx.beginPath(); ctx.arc(kx+12, ky, 4, 0, Math.PI*2); ctx.fill();
|
||
ctx.strokeStyle = closed ? '#22c55e' : '#f97316'; ctx.lineWidth = 2.5;
|
||
ctx.beginPath(); ctx.moveTo(kx-12, ky); ctx.lineTo(kx+12, closed ? ky : ky-12); ctx.stroke();
|
||
ctx.fillStyle = closed ? '#22c55e' : '#f97316'; ctx.font = '8px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText(closed ? 'Замкнут' : 'Разомкнут', kx, ky-16);
|
||
|
||
if (closed) {
|
||
ctx.fillStyle = 'rgba(251,191,36,.7)'; ctx.font = 'bold 11px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('→', W/2, pad - 12);
|
||
ctx.fillText('↓', pad+cw+18, H/2);
|
||
ctx.fillText('←', W/2, pad+ch+18);
|
||
ctx.fillText('↑', pad-18, H/2);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = '8px sans-serif';
|
||
ctx.fillText('→ ток (от + к -)', W/2, pad-22);
|
||
}
|
||
|
||
if (closed && electrons) {
|
||
var loop = [{x:pad,y:pad},{x:pad+cw,y:pad},{x:pad+cw,y:pad+ch},{x:pad,y:pad+ch},{x:pad,y:pad}];
|
||
var totalLen = 0;
|
||
var segs = [];
|
||
for (var i = 0; i < loop.length-1; i++) {
|
||
var dx = loop[i+1].x - loop[i].x, dy = loop[i+1].y - loop[i].y;
|
||
var len = Math.sqrt(dx*dx+dy*dy);
|
||
segs.push({x0:loop[i].x, y0:loop[i].y, dx:dx/len, dy:dy/len, len:len, start:totalLen});
|
||
totalLen += len;
|
||
}
|
||
electrons.forEach(function(e) {
|
||
var dist = (1 - e.pos) * totalLen;
|
||
var seg = null;
|
||
for (var s = 0; s < segs.length; s++) {
|
||
if (dist >= segs[s].start && dist < segs[s].start + segs[s].len) { seg = segs[s]; break; }
|
||
}
|
||
if (!seg) return;
|
||
var t = dist - seg.start;
|
||
var ex = seg.x0 + seg.dx * t, ey = seg.y0 + seg.dy * t;
|
||
ctx.fillStyle = '#3b82f6';
|
||
ctx.beginPath(); ctx.arc(ex, ey, 4, 0, Math.PI*2); ctx.fill();
|
||
ctx.fillStyle = '#93c5fd'; ctx.font = '6px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('e-', ex, ey-7);
|
||
});
|
||
}
|
||
|
||
if (!closed) {
|
||
ctx.fillStyle = '#64748b'; ctx.font = '11px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('Цепь разомкнута — тока нет', W/2, H/2 + 5);
|
||
}
|
||
}
|
||
|
||
// ═══ §20: Сила тока ═══
|
||
var anim20Id = null;
|
||
function upd20() {
|
||
if (anim20Id) { cancelAnimationFrame(anim20Id); anim20Id = null; }
|
||
startAnim20();
|
||
}
|
||
|
||
function startAnim20() {
|
||
var cv = document.getElementById('cv20');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim20Id) { cancelAnimationFrame(anim20Id); anim20Id = null; }
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 160;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
|
||
var electrons20 = [];
|
||
for (var i = 0; i < 20; i++) electrons20.push({ x: Math.random() * W, y: H/2 + (Math.random()-0.5)*40 });
|
||
|
||
function frame() {
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
var I = parseFloat((document.getElementById('sl20I') || {}).value) || 1;
|
||
|
||
ctx.fillStyle = 'rgba(71,85,105,.3)'; ctx.fillRect(0, H/2-22, W, 44);
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 1; ctx.strokeRect(0, H/2-22, W, 44);
|
||
|
||
var nE = Math.round(I * 4);
|
||
electrons20.forEach(function(e, idx) {
|
||
if (idx >= nE) return;
|
||
e.x -= I * 1.5;
|
||
if (e.x < -5) { e.x = W + 5; e.y = H/2 + (Math.random()-0.5)*36; }
|
||
ctx.fillStyle = 'rgba(59,130,246,.85)';
|
||
ctx.beginPath(); ctx.arc(e.x, e.y, 3.5, 0, Math.PI*2); ctx.fill();
|
||
ctx.fillStyle = '#93c5fd'; ctx.font = '7px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('e-', e.x, e.y-6);
|
||
});
|
||
|
||
var arrY = H/2 + 35;
|
||
ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 2;
|
||
ctx.beginPath(); ctx.moveTo(20, arrY); ctx.lineTo(W-20, arrY); ctx.stroke();
|
||
ctx.fillStyle = '#fbbf24';
|
||
ctx.beginPath(); ctx.moveTo(W-18, arrY); ctx.lineTo(W-28, arrY-5); ctx.lineTo(W-28, arrY+5); ctx.closePath(); ctx.fill();
|
||
ctx.font = '8px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('→ ток I', W/2, arrY - 6);
|
||
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = 'bold 11px sans-serif'; ctx.textAlign = 'left';
|
||
ctx.fillText('I = ' + I.toFixed(1) + ' А', 10, 20);
|
||
|
||
var N_per_sec = (I / 1.6e-19).toExponential(2);
|
||
var res = document.getElementById('res20');
|
||
if (res) res.textContent = 'N = I/e = ' + I.toFixed(1) + '/(1.6 x 10^-19) ≈ ' + N_per_sec + ' электронов/с';
|
||
|
||
anim20Id = requestAnimationFrame(frame);
|
||
}
|
||
anim20Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ §21: Электрическая цепь с амперметром ═══
|
||
var key21 = false, anim21Id = null;
|
||
function toggle21() {
|
||
key21 = !key21;
|
||
var btn = document.getElementById('btn21key');
|
||
if (btn) btn.textContent = key21 ? '🔑 Разомкнуть ключ' : '🔑 Замкнуть ключ';
|
||
if (key21) startAnim21(); else { if(anim21Id){cancelAnimationFrame(anim21Id);anim21Id=null;} draw21(false); }
|
||
}
|
||
function upd21() { if (key21) { if(anim21Id){cancelAnimationFrame(anim21Id);anim21Id=null;} startAnim21(); } else draw21(false); }
|
||
|
||
function startAnim21() {
|
||
var cv = document.getElementById('cv21');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim21Id) { cancelAnimationFrame(anim21Id); anim21Id = null; }
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 280;
|
||
cv.width = Math.round(W*dpr); cv.height = Math.round(H*dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
var ePos = 0;
|
||
function frame() {
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
ePos = (ePos + 0.005) % 1;
|
||
draw21core(ctx, W, H, true, ePos);
|
||
anim21Id = requestAnimationFrame(frame);
|
||
}
|
||
anim21Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
function draw21(closed) {
|
||
var cv = document.getElementById('cv21');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 280;
|
||
cv.width = Math.round(W*dpr); cv.height = Math.round(H*dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
draw21core(ctx, W, H, closed, 0);
|
||
}
|
||
|
||
function draw21core(ctx, W, H, closed, ePos) {
|
||
var U = parseFloat((document.getElementById('sl21U')||{}).value)||6;
|
||
var R = parseFloat((document.getElementById('sl21R')||{}).value)||6;
|
||
var I = closed ? U/R : 0;
|
||
|
||
var pad = 35, cw = W-pad*2, ch = H-pad*2-20;
|
||
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 2.5;
|
||
ctx.beginPath();
|
||
ctx.moveTo(pad, pad); ctx.lineTo(pad+cw, pad);
|
||
ctx.lineTo(pad+cw, pad+ch); ctx.lineTo(pad, pad+ch); ctx.lineTo(pad, pad);
|
||
ctx.stroke();
|
||
|
||
var srcY = pad + ch/2;
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(pad-18, srcY-28, 36, 56);
|
||
ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 1.5; ctx.strokeRect(pad-18, srcY-28, 36, 56);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 10px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('+', pad, srcY-10);
|
||
ctx.fillStyle = '#94a3b8'; ctx.fillText('-', pad, srcY+14);
|
||
ctx.font = '8px sans-serif'; ctx.fillText(U+'В', pad, srcY+30);
|
||
|
||
var amX = W/2, amY = pad;
|
||
ctx.beginPath(); ctx.arc(amX, amY, 14, 0, Math.PI*2);
|
||
ctx.fillStyle = '#0f2027'; ctx.fill();
|
||
ctx.strokeStyle = '#22c55e'; ctx.lineWidth = 2; ctx.stroke();
|
||
ctx.fillStyle = '#22c55e'; ctx.font = 'bold 11px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('A', amX, amY+4);
|
||
if (closed) {
|
||
ctx.fillStyle = '#86efac'; ctx.font = 'bold 8px sans-serif';
|
||
ctx.fillText(I.toFixed(2)+'А', amX, amY-18);
|
||
}
|
||
|
||
var lx = pad+cw, ly = pad + ch/2;
|
||
if (closed && I > 0) {
|
||
var bright = Math.min(1, I * R / 50);
|
||
var grd = ctx.createRadialGradient(lx, ly, 0, lx, ly, 28*bright+8);
|
||
grd.addColorStop(0, 'rgba(253,224,71,' + (bright*0.7) + ')');
|
||
grd.addColorStop(1, 'transparent');
|
||
ctx.fillStyle = grd; ctx.beginPath(); ctx.arc(lx, ly, 28*bright+8, 0, Math.PI*2); ctx.fill();
|
||
}
|
||
ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 2;
|
||
ctx.beginPath(); ctx.arc(lx, ly, 14, 0, Math.PI*2); ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(lx-8, ly-8); ctx.lineTo(lx+8, ly+8); ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(lx+8, ly-8); ctx.lineTo(lx-8, ly+8); ctx.stroke();
|
||
|
||
var vmX = pad+cw+30, vmY = ly;
|
||
ctx.strokeStyle = 'rgba(249,115,22,.6)'; ctx.lineWidth = 1.5; ctx.setLineDash([5,3]);
|
||
ctx.beginPath();
|
||
ctx.moveTo(lx, ly-14); ctx.lineTo(vmX, ly-45); ctx.lineTo(vmX, ly-14); ctx.stroke();
|
||
ctx.beginPath();
|
||
ctx.moveTo(lx, ly+14); ctx.lineTo(vmX, ly+45); ctx.lineTo(vmX, ly+14); ctx.stroke();
|
||
ctx.setLineDash([]);
|
||
ctx.beginPath(); ctx.arc(vmX, vmY, 12, 0, Math.PI*2);
|
||
ctx.fillStyle = '#0f2027'; ctx.fill();
|
||
ctx.strokeStyle = '#f97316'; ctx.lineWidth = 1.5; ctx.stroke();
|
||
ctx.fillStyle = '#f97316'; ctx.font = 'bold 10px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('V', vmX, vmY+4);
|
||
if (closed) {
|
||
ctx.fillStyle = '#fed7aa'; ctx.font = 'bold 8px sans-serif';
|
||
ctx.fillText(U.toFixed(1)+'В', vmX, vmY-18);
|
||
}
|
||
|
||
var kx = W/2, ky = pad+ch;
|
||
ctx.fillStyle = '#475569'; ctx.beginPath(); ctx.arc(kx-14, ky, 3.5, 0, Math.PI*2); ctx.fill();
|
||
ctx.fillStyle = '#475569'; ctx.beginPath(); ctx.arc(kx+14, ky, 3.5, 0, Math.PI*2); ctx.fill();
|
||
ctx.strokeStyle = closed ? '#22c55e' : '#f97316'; ctx.lineWidth = 2.5;
|
||
ctx.beginPath(); ctx.moveTo(kx-14, ky); ctx.lineTo(kx+14, closed ? ky : ky-14); ctx.stroke();
|
||
ctx.fillStyle = closed ? '#22c55e' : '#f97316'; ctx.font = '8px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText(closed ? 'Замкнут' : 'Разомкнут', kx, ky+18);
|
||
|
||
if (closed) {
|
||
var loop = [{x:pad,y:pad},{x:pad+cw,y:pad},{x:pad+cw,y:pad+ch},{x:pad,y:pad+ch}];
|
||
var totalLen = 0;
|
||
var segs = [];
|
||
for (var i = 0; i < loop.length; i++) {
|
||
var nx = loop[(i+1)%loop.length];
|
||
var dx = nx.x - loop[i].x, dy = nx.y - loop[i].y;
|
||
var len = Math.sqrt(dx*dx+dy*dy);
|
||
segs.push({x0:loop[i].x, y0:loop[i].y, dx:dx/len, dy:dy/len, len:len, start:totalLen});
|
||
totalLen += len;
|
||
}
|
||
var nE = Math.min(10, Math.round(I * 2 + 2));
|
||
for (var j = 0; j < nE; j++) {
|
||
var dist = ((1 - ePos - j/nE) % 1 + 1) % 1 * totalLen;
|
||
var seg = null;
|
||
for (var s = 0; s < segs.length; s++) {
|
||
if (dist >= segs[s].start && dist < segs[s].start + segs[s].len) { seg = segs[s]; break; }
|
||
}
|
||
if (!seg) continue;
|
||
var t = dist - seg.start;
|
||
var ex = seg.x0 + seg.dx * t, ey = seg.y0 + seg.dy * t;
|
||
ctx.fillStyle = 'rgba(59,130,246,.85)';
|
||
ctx.beginPath(); ctx.arc(ex, ey, 4, 0, Math.PI*2); ctx.fill();
|
||
}
|
||
}
|
||
|
||
var res = document.getElementById('res21');
|
||
if (res) {
|
||
if (closed) res.textContent = 'I = U/R = ' + U + '/' + R + ' = ' + I.toFixed(2) + ' А; U нагр = ' + U + ' В';
|
||
else res.textContent = 'Цепь разомкнута: I = 0, U нагр = 0';
|
||
}
|
||
}
|
||
// ═══ §22: Закон Ома (Pro Max — виртуальная лаборатория) ═══
|
||
var needle22A = 0, needle22V = 0; // плавно анимируемые стрелки
|
||
var flow22 = 0; // фазовый сдвиг потока электронов
|
||
var anim22Frame = null;
|
||
|
||
function drawMeter22(ctx, cx, cy, R0, value, maxV, label, color, unit){
|
||
// Стрелочный прибор: полукруг сверху
|
||
ctx.fillStyle = '#f8fafc';
|
||
ctx.beginPath(); ctx.arc(cx, cy, R0, 0, Math.PI*2); ctx.fill();
|
||
ctx.strokeStyle = color; ctx.lineWidth = 2.5;
|
||
ctx.stroke();
|
||
// шкала-дуга
|
||
ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 1.2;
|
||
ctx.beginPath(); ctx.arc(cx, cy + 5, R0 - 8, Math.PI + 0.3, 2*Math.PI - 0.3); ctx.stroke();
|
||
// деления
|
||
for (var t = 0; t <= 5; t++){
|
||
var ang = Math.PI + 0.3 + (t/5) * (Math.PI - 0.6);
|
||
var x1 = cx + Math.cos(ang) * (R0 - 8);
|
||
var y1 = (cy + 5) + Math.sin(ang) * (R0 - 8);
|
||
var x2 = cx + Math.cos(ang) * (R0 - 14);
|
||
var y2 = (cy + 5) + Math.sin(ang) * (R0 - 14);
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 1.2;
|
||
ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
|
||
}
|
||
// стрелка
|
||
var frac = Math.max(0, Math.min(1, value / maxV));
|
||
var angN = Math.PI + 0.3 + frac * (Math.PI - 0.6);
|
||
var nx = cx + Math.cos(angN) * (R0 - 10);
|
||
var ny = (cy + 5) + Math.sin(angN) * (R0 - 10);
|
||
ctx.strokeStyle = '#dc2626'; ctx.lineWidth = 2.2;
|
||
ctx.beginPath(); ctx.moveTo(cx, cy + 5); ctx.lineTo(nx, ny); ctx.stroke();
|
||
ctx.fillStyle = '#1e293b';
|
||
ctx.beginPath(); ctx.arc(cx, cy + 5, 3, 0, Math.PI*2); ctx.fill();
|
||
// буква в центре сверху
|
||
ctx.fillStyle = color; ctx.font = 'bold 14px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText(label, cx, cy - R0/2 + 4);
|
||
// цифровое значение снизу
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 10px monospace';
|
||
ctx.fillText(value.toFixed(2) + ' ' + unit, cx, cy + R0 + 12);
|
||
}
|
||
|
||
function upd22() {
|
||
var cv = document.getElementById('cv22');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim22Id) { cancelAnimationFrame(anim22Id); anim22Id = null; }
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 300;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
|
||
function frame(){
|
||
var W2 = cv.offsetWidth, H2 = cv.offsetHeight || 300;
|
||
if (W2 !== W){ W = W2; H = H2; cv.width = Math.round(W*dpr); cv.height = Math.round(H*dpr); ctx.setTransform(dpr,0,0,dpr,0,0); }
|
||
H = H2;
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
|
||
var U = parseFloat((document.getElementById('sl22U') || {}).value) || 12;
|
||
var R = parseFloat((document.getElementById('sl22R') || {}).value) || 6;
|
||
var I = U / R;
|
||
var P = U * I;
|
||
|
||
// плавное движение стрелок
|
||
needle22A += (I - needle22A) * 0.12;
|
||
needle22V += (U - needle22V) * 0.12;
|
||
|
||
// === Геометрия схемы (прямоугольный контур) ===
|
||
var padX = 60, padY = 50;
|
||
var rectX = padX, rectY = padY, rectW = W - padX*2, rectH = H - padY*2 - 30;
|
||
// фон схемы (светлая подложка)
|
||
ctx.fillStyle = 'rgba(30,41,59,.4)'; ctx.fillRect(rectX-6, rectY-6, rectW+12, rectH+12);
|
||
ctx.strokeStyle = '#1e293b'; ctx.lineWidth = 1; ctx.strokeRect(rectX-6, rectY-6, rectW+12, rectH+12);
|
||
|
||
// провода (контур)
|
||
ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3;
|
||
ctx.beginPath();
|
||
ctx.moveTo(rectX, rectY); ctx.lineTo(rectX + rectW, rectY); // верх
|
||
ctx.lineTo(rectX + rectW, rectY + rectH); // правая
|
||
ctx.lineTo(rectX, rectY + rectH); ctx.lineTo(rectX, rectY); // низ + левая
|
||
ctx.stroke();
|
||
|
||
// === Батарея (слева на вертикальном проводе) ===
|
||
var batCY = rectY + rectH/2;
|
||
ctx.fillStyle = '#0f172a';
|
||
ctx.fillRect(rectX - 12, batCY - 24, 24, 48); // фон чтобы перекрыть провод
|
||
// длинная черта (+) — снизу
|
||
ctx.strokeStyle = '#ef4444'; ctx.lineWidth = 3;
|
||
ctx.beginPath(); ctx.moveTo(rectX - 14, batCY + 6); ctx.lineTo(rectX + 14, batCY + 6); ctx.stroke();
|
||
// короткая черта (-) — сверху
|
||
ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 3;
|
||
ctx.beginPath(); ctx.moveTo(rectX - 8, batCY - 6); ctx.lineTo(rectX + 8, batCY - 6); ctx.stroke();
|
||
ctx.fillStyle = '#ef4444'; ctx.font = 'bold 11px sans-serif'; ctx.textAlign = 'right';
|
||
ctx.fillText('+', rectX - 18, batCY + 10);
|
||
ctx.fillStyle = '#3b82f6'; ctx.textAlign = 'right';
|
||
ctx.fillText('−', rectX - 18, batCY - 2);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 10px monospace'; ctx.textAlign = 'left';
|
||
ctx.fillText(U.toFixed(1) + ' В', rectX + 16, batCY + 3);
|
||
|
||
// === Резистор (на верхнем проводе по центру) ===
|
||
var resCX = rectX + rectW * 0.55, resCY = rectY;
|
||
ctx.fillStyle = '#0f172a';
|
||
ctx.fillRect(resCX - 35, resCY - 11, 70, 22);
|
||
ctx.strokeStyle = '#1d4ed8'; ctx.lineWidth = 2.5;
|
||
ctx.strokeRect(resCX - 32, resCY - 9, 64, 18);
|
||
// зигзаг внутри резистора
|
||
ctx.strokeStyle = '#60a5fa'; ctx.lineWidth = 1.5;
|
||
ctx.beginPath();
|
||
ctx.moveTo(resCX - 28, resCY);
|
||
for (var z = 0; z < 8; z++){
|
||
ctx.lineTo(resCX - 24 + z*7, resCY + (z%2===0 ? -6 : 6));
|
||
}
|
||
ctx.lineTo(resCX + 28, resCY);
|
||
ctx.stroke();
|
||
ctx.fillStyle = '#60a5fa'; ctx.font = 'bold 9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('R = ' + R + ' Ом', resCX, resCY - 16);
|
||
|
||
// === Амперметр (на верхнем проводе слева) ===
|
||
var ampCX = rectX + rectW * 0.22, ampCY = rectY;
|
||
ctx.fillStyle = '#0f172a';
|
||
ctx.fillRect(ampCX - 28, ampCY - 28, 56, 56);
|
||
drawMeter22(ctx, ampCX, ampCY, 24, needle22A, Math.max(8, U / 1.5), 'A', '#22c55e', 'А');
|
||
|
||
// === Вольтметр (параллельно резистору, выводы вверх к проводу) ===
|
||
var voltCX = resCX, voltCY = rectY - 60;
|
||
// выводы вольтметра
|
||
ctx.strokeStyle = '#64748b'; ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
ctx.moveTo(voltCX - 30, voltCY + 22); ctx.lineTo(resCX - 30, resCY - 9);
|
||
ctx.moveTo(voltCX + 30, voltCY + 22); ctx.lineTo(resCX + 30, resCY - 9);
|
||
ctx.stroke();
|
||
drawMeter22(ctx, voltCX, voltCY, 22, needle22V, 26, 'V', '#f97316', 'В');
|
||
|
||
// === Поток электронов по проводам (от − батареи против часовой) ===
|
||
if (I > 0.01){
|
||
flow22 = (flow22 + Math.min(I * 0.6, 3)) % 60;
|
||
// путь идёт: батарея верх (rectX, batCY-6) → верхний-левый → верх-вправо → правый-вверх → правая вниз → низ влево → батарея низ (-)
|
||
// упрощённо: бегаем по периметру против часовой
|
||
// точки на пути:
|
||
var perim = [
|
||
{x: rectX, y: batCY - 6}, // верх батареи (−)
|
||
{x: rectX, y: rectY}, // левый верхний угол
|
||
{x: rectX + rectW, y: rectY}, // правый верхний
|
||
{x: rectX + rectW, y: rectY + rectH}, // правый нижний
|
||
{x: rectX, y: rectY + rectH}, // левый нижний
|
||
{x: rectX, y: batCY + 6} // низ батареи (+)
|
||
];
|
||
// длины сегментов
|
||
var lens = [];
|
||
var total = 0;
|
||
for (var s = 0; s < perim.length - 1; s++){
|
||
var dx = perim[s+1].x - perim[s].x, dy = perim[s+1].y - perim[s].y;
|
||
var l = Math.hypot(dx, dy);
|
||
lens.push(l); total += l;
|
||
}
|
||
var nDots = 16;
|
||
for (var d2 = 0; d2 < nDots; d2++){
|
||
var t = ((d2/nDots) * total + flow22 * total/60) % total;
|
||
var acc = 0;
|
||
for (var s = 0; s < lens.length; s++){
|
||
if (t < acc + lens[s]){
|
||
var f = (t - acc) / lens[s];
|
||
var ex = perim[s].x + (perim[s+1].x - perim[s].x) * f;
|
||
var ey = perim[s].y + (perim[s+1].y - perim[s].y) * f;
|
||
ctx.fillStyle = 'rgba(96,165,250,.9)'; ctx.shadowColor = '#3b82f6'; ctx.shadowBlur = 5;
|
||
ctx.beginPath(); ctx.arc(ex, ey, 2.8, 0, Math.PI*2); ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
break;
|
||
}
|
||
acc += lens[s];
|
||
}
|
||
}
|
||
}
|
||
|
||
// === Формула крупно внизу ===
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 13px monospace'; ctx.textAlign = 'center';
|
||
ctx.fillText('I = U/R = ' + U.toFixed(1) + '/' + R + ' = ' + I.toFixed(2) + ' А',
|
||
W/2, H - 12);
|
||
|
||
// Чипы
|
||
var chipI = document.getElementById('chip22I');
|
||
var chipV = document.getElementById('chip22V');
|
||
var chipP = document.getElementById('chip22P');
|
||
if (chipI) chipI.textContent = 'A: ' + I.toFixed(2) + ' А';
|
||
if (chipV) chipV.textContent = 'V: ' + U.toFixed(1) + ' В';
|
||
if (chipP) chipP.textContent = 'P: ' + P.toFixed(1) + ' Вт';
|
||
|
||
var res = document.getElementById('res22');
|
||
if (res) res.innerHTML = '$I = U/R = ' + U + '/' + R + ' = ' + I.toFixed(2) + '$ А | $P = UI = ' + P.toFixed(1) + '$ Вт';
|
||
if (window.doRender && res) doRender(res);
|
||
|
||
anim22Id = requestAnimationFrame(frame);
|
||
}
|
||
anim22Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ §23: R = ρl/S ═══
|
||
function upd23() {
|
||
var cv = document.getElementById('cv23');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 150;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
|
||
var sel = document.getElementById('sel23mat');
|
||
var rho = sel ? parseFloat(sel.value) : 0.017;
|
||
var matName = sel ? sel.options[sel.selectedIndex].text.split(' ')[0] : 'Медь';
|
||
var l = parseFloat((document.getElementById('sl23l') || {}).value) || 1;
|
||
var S = parseFloat((document.getElementById('sl23S') || {}).value) || 1;
|
||
var R = (rho * l / S);
|
||
var Rstr = R < 1 ? R.toFixed(4) : R < 10 ? R.toFixed(3) : R.toFixed(2);
|
||
|
||
var wireH = Math.max(8, Math.min(40, S * 10));
|
||
var wireW = Math.min(W - 80, l * 25 + 30);
|
||
var wx = 30, wy = H / 2 - wireH / 2;
|
||
|
||
var heatColor = Math.min(1, rho / 1.1);
|
||
var wgrd = ctx.createLinearGradient(wx, wy, wx + wireW, wy);
|
||
wgrd.addColorStop(0, 'rgba(59,130,246,' + (0.3 + heatColor * 0.5) + ')');
|
||
wgrd.addColorStop(1, 'rgba(' + Math.round(30 + heatColor * 200) + ',' + Math.round(130 - heatColor * 100) + ',' + Math.round(246 - heatColor * 200) + ',0.8)');
|
||
ctx.fillStyle = wgrd;
|
||
ctx.fillRect(wx, wy, wireW, wireH);
|
||
ctx.strokeStyle = '#64748b'; ctx.lineWidth = 1.5;
|
||
ctx.strokeRect(wx, wy, wireW, wireH);
|
||
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('← l = ' + l.toFixed(1) + ' м →', wx + wireW / 2, H - 18);
|
||
ctx.textAlign = 'left';
|
||
ctx.fillText('S = ' + S.toFixed(1) + ' мм²', wx + wireW + 8, H / 2 + 4);
|
||
ctx.fillText(matName, wx + wireW + 8, H / 2 + 16);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 9px sans-serif';
|
||
ctx.fillText('R = ' + Rstr + ' Ом', wx + wireW + 8, H / 2 - 8);
|
||
|
||
var res = document.getElementById('res23');
|
||
if (res) res.innerHTML = '$R = \\rho l/S = ' + rho + ' \\times ' + l.toFixed(1) + '/' + S.toFixed(1) + ' = ' + Rstr + '$ Ом';
|
||
if (window.doRender && res) doRender(res);
|
||
}
|
||
|
||
// ═══ §24: Последовательное соединение ═══
|
||
function upd24() {
|
||
var cv = document.getElementById('cv24');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 200;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
|
||
var U = parseFloat((document.getElementById('sl24U') || {}).value) || 6;
|
||
var R1 = parseFloat((document.getElementById('sl24R1') || {}).value) || 10;
|
||
var R2 = parseFloat((document.getElementById('sl24R2') || {}).value) || 10;
|
||
var R = R1 + R2;
|
||
var I = U / R;
|
||
var U1 = I * R1, U2 = I * R2;
|
||
|
||
var pad = 25, cw = W - pad * 2, ch = H - pad * 2 - 20;
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
ctx.moveTo(pad, pad); ctx.lineTo(pad + cw, pad);
|
||
ctx.lineTo(pad + cw, pad + ch); ctx.lineTo(pad, pad + ch); ctx.lineTo(pad, pad);
|
||
ctx.stroke();
|
||
|
||
var srcY = pad + ch / 2;
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(pad - 14, srcY - 22, 28, 44);
|
||
ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 1.5; ctx.strokeRect(pad - 14, srcY - 22, 28, 44);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText(U + 'В', pad, srcY + 5);
|
||
|
||
var r1x = pad + cw * 0.25, r1y = pad;
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(r1x - 25, r1y - 10, 50, 20);
|
||
ctx.strokeStyle = '#1d4ed8'; ctx.lineWidth = 2; ctx.strokeRect(r1x - 25, r1y - 10, 50, 20);
|
||
ctx.fillStyle = '#1d4ed8'; ctx.font = 'bold 9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('R₁=' + R1, r1x, r1y + 4);
|
||
var barMaxW = 60;
|
||
var b1W = (U1 / U) * barMaxW;
|
||
ctx.fillStyle = 'rgba(29,78,216,.3)'; ctx.fillRect(r1x - 30, r1y + 14, barMaxW, 8);
|
||
ctx.fillStyle = '#3b82f6'; ctx.fillRect(r1x - 30, r1y + 14, b1W, 8);
|
||
ctx.fillStyle = '#93c5fd'; ctx.font = '8px sans-serif';
|
||
ctx.fillText('U₁=' + U1.toFixed(2) + 'В', r1x, r1y + 30);
|
||
|
||
var r2x = pad + cw * 0.7, r2y = pad;
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(r2x - 25, r2y - 10, 50, 20);
|
||
ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 2; ctx.strokeRect(r2x - 25, r2y - 10, 50, 20);
|
||
ctx.fillStyle = '#6366f1'; ctx.font = 'bold 9px sans-serif';
|
||
ctx.fillText('R₂=' + R2, r2x, r2y + 4);
|
||
var b2W = (U2 / U) * barMaxW;
|
||
ctx.fillStyle = 'rgba(99,102,241,.3)'; ctx.fillRect(r2x - 30, r2y + 14, barMaxW, 8);
|
||
ctx.fillStyle = '#6366f1'; ctx.fillRect(r2x - 30, r2y + 14, b2W, 8);
|
||
ctx.fillStyle = '#a5b4fc'; ctx.font = '8px sans-serif';
|
||
ctx.fillText('U₂=' + U2.toFixed(2) + 'В', r2x, r2y + 30);
|
||
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = '9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('I = ' + I.toFixed(3) + ' А', pad + cw / 2, pad + ch + 20);
|
||
|
||
var res = document.getElementById('res24');
|
||
if (res) res.innerHTML = '$R = ' + R + '$ Ом; $I = ' + I.toFixed(3) + '$ А; $U_1 = ' + U1.toFixed(2) + '$ В; $U_2 = ' + U2.toFixed(2) + '$ В';
|
||
if (window.doRender && res) doRender(res);
|
||
}
|
||
|
||
// ═══ §25: Параллельное соединение ═══
|
||
function upd25() {
|
||
var cv = document.getElementById('cv25');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 220;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
|
||
var U = parseFloat((document.getElementById('sl25U') || {}).value) || 12;
|
||
var R1 = parseFloat((document.getElementById('sl25R1') || {}).value) || 6;
|
||
var R2 = parseFloat((document.getElementById('sl25R2') || {}).value) || 12;
|
||
var I1 = U / R1, I2 = U / R2, I = I1 + I2;
|
||
var R = U / I;
|
||
|
||
var pad = 30, busH = H - pad * 2;
|
||
ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 3;
|
||
ctx.beginPath(); ctx.moveTo(pad, pad); ctx.lineTo(pad, pad + busH); ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(W - pad, pad); ctx.lineTo(W - pad, pad + busH); ctx.stroke();
|
||
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(pad - 15, H / 2 - 20, 30, 40);
|
||
ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 1.5; ctx.strokeRect(pad - 15, H / 2 - 20, 30, 40);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText(U + 'В', pad, H / 2 + 4);
|
||
|
||
var branchY = [pad + busH * 0.25, pad + busH * 0.7];
|
||
var R_arr = [R1, R2], I_arr = [I1, I2];
|
||
var cols = ['#1d4ed8', '#6366f1'];
|
||
|
||
branchY.forEach(function(by, idx) {
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 2;
|
||
ctx.beginPath(); ctx.moveTo(pad + 2, by); ctx.lineTo(W - pad - 2, by); ctx.stroke();
|
||
var rx = W / 2;
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(rx - 28, by - 10, 56, 20);
|
||
ctx.strokeStyle = cols[idx]; ctx.lineWidth = 2; ctx.strokeRect(rx - 28, by - 10, 56, 20);
|
||
ctx.fillStyle = cols[idx]; ctx.font = 'bold 9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('R' + (idx + 1) + '=' + R_arr[idx] + 'Ом', rx, by + 4);
|
||
var flowW = Math.min(4, I_arr[idx] * 1.5) + 1;
|
||
ctx.strokeStyle = cols[idx]; ctx.lineWidth = flowW; ctx.globalAlpha = 0.5;
|
||
ctx.beginPath(); ctx.moveTo(pad + 35, by); ctx.lineTo(rx - 30, by); ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(rx + 30, by); ctx.lineTo(W - pad - 35, by); ctx.stroke();
|
||
ctx.globalAlpha = 1;
|
||
ctx.fillStyle = cols[idx]; ctx.font = '8px sans-serif';
|
||
ctx.fillText('I' + (idx + 1) + '=' + I_arr[idx].toFixed(2) + 'А', rx, by - 16);
|
||
});
|
||
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 9px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('I = ' + I.toFixed(2) + ' А', pad, pad - 10);
|
||
ctx.fillText('R = ' + R.toFixed(2) + ' Ом', W / 2, H - 10);
|
||
|
||
var res = document.getElementById('res25');
|
||
if (res) res.innerHTML = '$I_1 = ' + I1.toFixed(2) + '$ А; $I_2 = ' + I2.toFixed(2) + '$ А; $I = ' + I.toFixed(2) + '$ А; $R = ' + R.toFixed(2) + '$ Ом';
|
||
if (window.doRender && res) doRender(res);
|
||
}
|
||
|
||
// ═══ §26: Закон Джоуля-Ленца (Pro Max) ═══
|
||
var timer26 = { t: 0, Q: 0, running: false, last: 0, temp: 20 };
|
||
var anim26Id = null;
|
||
|
||
function start26timer(){
|
||
timer26.running = true;
|
||
timer26.last = performance.now();
|
||
}
|
||
function reset26timer(){
|
||
timer26.running = false;
|
||
timer26.t = 0; timer26.Q = 0; timer26.temp = 20;
|
||
}
|
||
|
||
function upd26() {
|
||
var cv = document.getElementById('cv26');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim26Id) { cancelAnimationFrame(anim26Id); anim26Id = null; }
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 260;
|
||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
var flowPhase26 = 0;
|
||
|
||
function frame(now){
|
||
var W2 = cv.offsetWidth, H2 = cv.offsetHeight || 260;
|
||
if (W2 !== W){ W = W2; H = H2; cv.width = Math.round(W*dpr); cv.height = Math.round(H*dpr); ctx.setTransform(dpr,0,0,dpr,0,0); }
|
||
H = H2;
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
|
||
var I = parseFloat((document.getElementById('sl26I') || {}).value) || 3;
|
||
var R = parseFloat((document.getElementById('sl26R') || {}).value) || 10;
|
||
var P = I * I * R;
|
||
var U = I * R;
|
||
|
||
// таймер
|
||
if (timer26.running){
|
||
var dt = (now - timer26.last) / 1000;
|
||
timer26.last = now;
|
||
timer26.t += dt;
|
||
timer26.Q += P * dt;
|
||
// упрощённая модель температуры: dT = P*dt / C - охлаждение
|
||
var C = 25; // удельная "ёмкость" сцены
|
||
timer26.temp += (P/C - (timer26.temp - 20) * 0.04) * dt;
|
||
} else {
|
||
timer26.last = now;
|
||
}
|
||
|
||
var heat = Math.min(1, P / 400);
|
||
var tempK = Math.min(1, (timer26.temp - 20) / 800);
|
||
var glow = Math.max(heat * 0.4, tempK);
|
||
|
||
// === Спираль (нагреватель) ===
|
||
var spX = W * 0.45, spY = H * 0.55;
|
||
var sw = 130;
|
||
// ореол тепла
|
||
if (glow > 0.05){
|
||
var grd = ctx.createRadialGradient(spX, spY, 0, spX, spY, 90 * glow + 20);
|
||
var rCol = Math.round(255);
|
||
var gCol = Math.round(220 - glow * 180);
|
||
var bCol = Math.round(50 - glow * 50);
|
||
grd.addColorStop(0, 'rgba(' + rCol + ',' + gCol + ',' + bCol + ',' + (glow * 0.65).toFixed(2) + ')');
|
||
grd.addColorStop(1, 'transparent');
|
||
ctx.fillStyle = grd;
|
||
ctx.beginPath(); ctx.arc(spX, spY, 90 * glow + 20, 0, Math.PI * 2); ctx.fill();
|
||
}
|
||
var spiralColor = glow < 0.15 ? '#94a3b8' : glow < 0.4 ? '#f97316' : glow < 0.75 ? '#ef4444' : '#fde047';
|
||
// зигзаг спирали
|
||
ctx.strokeStyle = spiralColor; ctx.lineWidth = 4;
|
||
ctx.shadowColor = spiralColor; ctx.shadowBlur = glow * 15;
|
||
ctx.beginPath();
|
||
var steps = 10;
|
||
for (var s = 0; s <= steps; s++){
|
||
var sx = spX - sw/2 + s * (sw / steps);
|
||
var sy = spY + (s % 2 === 0 ? -10 : 10);
|
||
if (s === 0) ctx.moveTo(sx, spY); else ctx.lineTo(sx, sy);
|
||
}
|
||
ctx.lineTo(spX + sw/2, spY);
|
||
ctx.stroke();
|
||
ctx.shadowBlur = 0;
|
||
|
||
// подводящие провода
|
||
ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3;
|
||
ctx.beginPath();
|
||
ctx.moveTo(30, spY); ctx.lineTo(spX - sw/2, spY);
|
||
ctx.moveTo(spX + sw/2, spY); ctx.lineTo(W - 80, spY);
|
||
ctx.stroke();
|
||
|
||
// батарея слева
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(20, spY - 22, 22, 44);
|
||
ctx.strokeStyle = '#ef4444'; ctx.lineWidth = 3;
|
||
ctx.beginPath(); ctx.moveTo(14, spY + 6); ctx.lineTo(46, spY + 6); ctx.stroke();
|
||
ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 3;
|
||
ctx.beginPath(); ctx.moveTo(22, spY - 6); ctx.lineTo(38, spY - 6); ctx.stroke();
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 9px monospace'; ctx.textAlign = 'center';
|
||
ctx.fillText(U.toFixed(1) + 'В', 30, spY + 22);
|
||
|
||
// поток электронов
|
||
if (I > 0.05){
|
||
flowPhase26 = (flowPhase26 + Math.min(I * 0.4, 2)) % 30;
|
||
var pathLen = (W - 110) + sw + 20;
|
||
var nDots = Math.round(Math.min(20, I * 2 + 4));
|
||
for (var di = 0; di < nDots; di++){
|
||
var t = ((di / nDots) * pathLen + flowPhase26 * pathLen / 30) % pathLen;
|
||
var ex, ey;
|
||
if (t < (spX - sw/2 - 50)){ ex = 50 + t; ey = spY - 8; }
|
||
else if (t < (spX - sw/2 - 50) + sw + 20){ ex = spX - sw/2 + (t - (spX - sw/2 - 50)); ey = spY - 4; }
|
||
else { var rem = t - ((spX - sw/2 - 50) + sw + 20); ex = spX + sw/2 + rem; ey = spY - 8; }
|
||
ctx.fillStyle = 'rgba(96,165,250,.9)';
|
||
ctx.beginPath(); ctx.arc(ex, ey, 2.5, 0, Math.PI*2); ctx.fill();
|
||
}
|
||
}
|
||
|
||
// === Термометр справа ===
|
||
var tmX = W - 50, tmY0 = 40, tmH = H - 90;
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(tmX - 8, tmY0, 16, tmH);
|
||
ctx.strokeStyle = '#64748b'; ctx.lineWidth = 1.2; ctx.strokeRect(tmX - 8, tmY0, 16, tmH);
|
||
// bulb
|
||
ctx.fillStyle = '#1e293b';
|
||
ctx.beginPath(); ctx.arc(tmX, tmY0 + tmH + 8, 14, 0, Math.PI*2); ctx.fill();
|
||
ctx.strokeStyle = '#64748b'; ctx.stroke();
|
||
// заполнение
|
||
var tFrac = Math.max(0, Math.min(1, (timer26.temp - 20) / 800));
|
||
var fillCol = tFrac < 0.3 ? '#3b82f6' : tFrac < 0.6 ? '#f97316' : '#ef4444';
|
||
var fillH = tFrac * (tmH - 4);
|
||
ctx.fillStyle = fillCol; ctx.fillRect(tmX - 6, tmY0 + tmH - 2 - fillH, 12, fillH);
|
||
ctx.beginPath(); ctx.arc(tmX, tmY0 + tmH + 8, 12, 0, Math.PI*2); ctx.fill();
|
||
// деления
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 1;
|
||
for (var k = 0; k <= 4; k++){
|
||
var y = tmY0 + 4 + k * (tmH - 8) / 4;
|
||
ctx.beginPath(); ctx.moveTo(tmX + 8, y); ctx.lineTo(tmX + 12, y); ctx.stroke();
|
||
}
|
||
ctx.fillStyle = '#cbd5e1'; ctx.font = '8px sans-serif'; ctx.textAlign = 'center';
|
||
ctx.fillText('°C', tmX, tmY0 - 6);
|
||
ctx.font = 'bold 10px monospace';
|
||
ctx.fillStyle = fillCol;
|
||
ctx.fillText(Math.round(timer26.temp), tmX, tmY0 + tmH + 32);
|
||
|
||
// === Информационные подписи ===
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = 'bold 11px monospace'; ctx.textAlign = 'left';
|
||
ctx.fillText('P = I²R = ' + I.toFixed(1) + '² × ' + R + ' = ' + P.toFixed(1) + ' Вт', 20, 20);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 11px monospace';
|
||
ctx.fillText('Q = P·t = ' + timer26.Q.toFixed(0) + ' Дж', 20, 38);
|
||
|
||
// подсказка-сравнение (I×2 → Q×4)
|
||
if (I > 1){
|
||
ctx.fillStyle = 'rgba(251,191,36,0.55)'; ctx.font = '9px sans-serif';
|
||
ctx.fillText('×2 ток → ×4 тепла', 20, H - 14);
|
||
}
|
||
|
||
// Чипы
|
||
var c1 = document.getElementById('chip26P');
|
||
var c2 = document.getElementById('chip26Q');
|
||
var c3 = document.getElementById('chip26T');
|
||
var c4 = document.getElementById('chip26Temp');
|
||
if (c1) c1.textContent = 'P = ' + P.toFixed(1) + ' Вт';
|
||
if (c2) c2.textContent = 'Q = ' + timer26.Q.toFixed(0) + ' Дж';
|
||
if (c3) c3.textContent = 't = ' + timer26.t.toFixed(1) + ' с';
|
||
if (c4) c4.textContent = 'θ = ' + Math.round(timer26.temp) + ' °C';
|
||
|
||
var res = document.getElementById('res26');
|
||
if (res) res.innerHTML = '$P = I^2R = ' + I.toFixed(1) + '^2 \\times ' + R + ' = ' + P.toFixed(1) + '$ Вт; $Q = ' + P.toFixed(1) + 't = ' + timer26.Q.toFixed(0) + '$ Дж за ' + timer26.t.toFixed(1) + ' с';
|
||
if (window.doRender && res) doRender(res);
|
||
|
||
anim26Id = requestAnimationFrame(frame);
|
||
}
|
||
anim26Id = requestAnimationFrame(frame);
|
||
}
|
||
// ═══ §27: Счётчик электроэнергии ═══
|
||
function upd27() {
|
||
var cv = document.getElementById('cv27');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
var dpr = window.devicePixelRatio || 1;
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || 240;
|
||
cv.width = Math.round(W*dpr); cv.height = Math.round(H*dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr,0,0,dpr,0,0);
|
||
ctx.fillStyle='#0f172a'; ctx.fillRect(0,0,W,H);
|
||
|
||
var devices=[
|
||
{id:'chk27lamp',name:'Лампа накал.',p:60,color:'#fbbf24'},
|
||
{id:'chk27led',name:'LED-лампа',p:10,color:'#22c55e'},
|
||
{id:'chk27kettle',name:'Чайник',p:2000,color:'#ef4444'},
|
||
{id:'chk27fridge',name:'Холодильник',p:150,color:'#3b82f6'},
|
||
{id:'chk27tv',name:'ТВ',p:120,color:'#8b5cf6'}
|
||
];
|
||
var totalP=0, active=[];
|
||
devices.forEach(function(d){
|
||
var el=document.getElementById(d.id);
|
||
if(el&&el.checked){totalP+=d.p;active.push(d);}
|
||
});
|
||
var maxP=5000;
|
||
var barH=30, barY=20, barMax=W-80;
|
||
ctx.fillStyle='rgba(29,78,216,.1)'; ctx.fillRect(30,barY,barMax,barH);
|
||
var fillW=Math.min(barMax,(totalP/maxP)*barMax);
|
||
var barColor=totalP>3500?'#ef4444':totalP>2000?'#f97316':'#3b82f6';
|
||
ctx.fillStyle=barColor; ctx.fillRect(30,barY,fillW,barH);
|
||
ctx.strokeStyle='#475569'; ctx.lineWidth=1.5; ctx.strokeRect(30,barY,barMax,barH);
|
||
var fuseX=30+(3520/maxP)*barMax;
|
||
ctx.strokeStyle='#ef4444'; ctx.lineWidth=2; ctx.setLineDash([4,3]);
|
||
ctx.beginPath(); ctx.moveTo(fuseX,barY-5); ctx.lineTo(fuseX,barY+barH+5); ctx.stroke();
|
||
ctx.setLineDash([]);
|
||
ctx.fillStyle='#ef4444'; ctx.font='8px sans-serif'; ctx.textAlign='center';
|
||
ctx.fillText('⚡ предохр. 16А',fuseX,barY-8);
|
||
|
||
ctx.fillStyle=barColor; ctx.font='bold 12px sans-serif'; ctx.textAlign='left';
|
||
ctx.fillText(totalP+' Вт',30+fillW+5,barY+20);
|
||
if(totalP>3520){
|
||
ctx.fillStyle='#ef4444'; ctx.font='bold 11px sans-serif';
|
||
ctx.fillText('⚠️ ПЕРЕГРУЗКА! Предохранитель сработает',30,barY+50);
|
||
}
|
||
|
||
var gx=30, gy=80, gw=(W-60)/5, gh=80;
|
||
devices.forEach(function(d,i){
|
||
var on=document.getElementById(d.id)&&document.getElementById(d.id).checked;
|
||
ctx.fillStyle=on?d.color+'33':'rgba(30,41,59,0.5)';
|
||
ctx.fillRect(gx+i*gw+3,gy,gw-6,gh);
|
||
ctx.strokeStyle=on?d.color:'#475569'; ctx.lineWidth=on?2:1;
|
||
ctx.strokeRect(gx+i*gw+3,gy,gw-6,gh);
|
||
if(on){
|
||
var grd=ctx.createRadialGradient(gx+i*gw+gw/2,gy+gh/3,0,gx+i*gw+gw/2,gy+gh/3,gw/2);
|
||
grd.addColorStop(0,'rgba(255,255,200,0.3)'); grd.addColorStop(1,'transparent');
|
||
ctx.fillStyle=grd; ctx.fillRect(gx+i*gw+3,gy,gw-6,gh);
|
||
}
|
||
ctx.fillStyle=on?d.color:'#475569'; ctx.font='8px sans-serif'; ctx.textAlign='center';
|
||
ctx.fillText(d.name,gx+i*gw+gw/2,gy+gh+12);
|
||
ctx.fillText(d.p+'Вт',gx+i*gw+gw/2,gy+gh/2+5);
|
||
ctx.fillText(on?'ВКЛ':'ВЫКЛ',gx+i*gw+gw/2,gy+gh/2+18);
|
||
});
|
||
|
||
var kwh=(totalP*8/1000).toFixed(2);
|
||
ctx.fillStyle='#e2e8f0'; ctx.font='10px sans-serif'; ctx.textAlign='center';
|
||
ctx.fillText('За 8 ч: '+kwh+' кВт·ч = '+(kwh*3600000/1000000).toFixed(2)+' МДж',W/2,H-8);
|
||
|
||
var res=document.getElementById('res27');
|
||
if(res) res.textContent='Мощность: '+totalP+' Вт | За 8 ч: '+kwh+' кВт·ч'+(totalP>3520?' | ⚠️ ПЕРЕГРУЗКА':'');
|
||
}
|
||
|
||
// ═══ §28: Постоянные магниты ═══
|
||
var anim28Id=null, dir28=1;
|
||
function startAnim28(){
|
||
var cv=document.getElementById('cv28');
|
||
if(!cv||cv.offsetWidth===0) return;
|
||
if(anim28Id){cancelAnimationFrame(anim28Id);anim28Id=null;}
|
||
var dpr=window.devicePixelRatio||1;
|
||
var W=cv.offsetWidth,H=cv.offsetHeight||280;
|
||
cv.width=Math.round(W*dpr);cv.height=Math.round(H*dpr);
|
||
var ctx=cv.getContext('2d');ctx.setTransform(dpr,0,0,dpr,0,0);
|
||
var sel=document.getElementById('sel28mode');
|
||
var mode=sel?sel.value:'NS';
|
||
var showCompass=document.getElementById('chk28compass')&&document.getElementById('chk28compass').checked;
|
||
var t=0;
|
||
function frame(){
|
||
ctx.fillStyle='#0f172a';ctx.fillRect(0,0,W,H);
|
||
t+=0.02;
|
||
var cx=W/2,cy=H/2;
|
||
var charges=[];
|
||
var d=70;
|
||
if(mode==='NS') charges=[{x:cx-d,y:cy,q:1,lbl:'N'},{x:cx+d,y:cy,q:-1,lbl:'S'}];
|
||
else if(mode==='NN') charges=[{x:cx-d,y:cy,q:1,lbl:'N'},{x:cx+d,y:cy,q:1,lbl:'N'}];
|
||
else charges=[{x:cx-d,y:cy,q:-1,lbl:'S'},{x:cx+d,y:cy,q:-1,lbl:'S'}];
|
||
|
||
charges.forEach(function(ch){
|
||
if(ch.q<=0) return;
|
||
for(var i=0;i<12;i++){
|
||
var ang=(i/12)*Math.PI*2;
|
||
var x=ch.x+Math.cos(ang)*18,y=ch.y+Math.sin(ang)*18;
|
||
ctx.beginPath();ctx.moveTo(x,y);
|
||
for(var s=0;s<200;s++){
|
||
var fx=0,fy=0;
|
||
charges.forEach(function(c){
|
||
var dx=x-c.x,dy=y-c.y,r2=dx*dx+dy*dy;
|
||
if(r2<9) return;
|
||
var f=c.q/r2;fx+=f*dx/Math.sqrt(r2);fy+=f*dy/Math.sqrt(r2);
|
||
});
|
||
var len=Math.sqrt(fx*fx+fy*fy);if(len<1e-6)break;
|
||
x+=fx/len*3;y+=fy/len*3;ctx.lineTo(x,y);
|
||
if(x<5||x>W-5||y<5||y>H-5)break;
|
||
if(charges.some(function(c){return c.q<0&&Math.hypot(x-c.x,y-c.y)<16;}))break;
|
||
}
|
||
ctx.strokeStyle='rgba(147,197,253,0.4)';ctx.lineWidth=1.5;ctx.stroke();
|
||
}
|
||
});
|
||
|
||
charges.forEach(function(ch){
|
||
var col=ch.q>0?'#3b82f6':'#ef4444';
|
||
var grd=ctx.createRadialGradient(ch.x,ch.y,0,ch.x,ch.y,22);
|
||
grd.addColorStop(0,col+'99');grd.addColorStop(1,col+'33');
|
||
ctx.fillStyle=grd;
|
||
ctx.fillRect(ch.x-22,ch.y-18,44,36);
|
||
ctx.strokeStyle=col;ctx.lineWidth=2;ctx.strokeRect(ch.x-22,ch.y-18,44,36);
|
||
ctx.fillStyle='#fff';ctx.font='bold 14px sans-serif';ctx.textAlign='center';
|
||
ctx.fillText(ch.lbl,ch.x,ch.y+6);
|
||
});
|
||
|
||
if(showCompass){
|
||
var positions=[[cx,cy-70],[cx,cy+70],[cx-110,cy],[cx+110,cy],[cx-80,cy-50],[cx+80,cy-50],[cx-80,cy+50],[cx+80,cy+50]];
|
||
positions.forEach(function(pos){
|
||
var bx=pos[0],by=pos[1];
|
||
var fx=0,fy=0;
|
||
charges.forEach(function(c){
|
||
var dx=bx-c.x,dy=by-c.y,r2=dx*dx+dy*dy;
|
||
if(r2<100)return;
|
||
var f=c.q/(r2);fx+=f*dx/Math.sqrt(r2);fy+=f*dy/Math.sqrt(r2);
|
||
});
|
||
var angle=Math.atan2(fy,fx);
|
||
ctx.save();ctx.translate(bx,by);ctx.rotate(angle);
|
||
ctx.beginPath();ctx.arc(0,0,7,0,Math.PI*2);
|
||
ctx.strokeStyle='#475569';ctx.lineWidth=1;ctx.fillStyle='#1e293b';ctx.fill();ctx.stroke();
|
||
ctx.fillStyle='#3b82f6';ctx.beginPath();ctx.moveTo(0,-7);ctx.lineTo(-2.5,0);ctx.lineTo(2.5,0);ctx.fill();
|
||
ctx.fillStyle='#ef4444';ctx.beginPath();ctx.moveTo(0,7);ctx.lineTo(-2.5,0);ctx.lineTo(2.5,0);ctx.fill();
|
||
ctx.restore();
|
||
});
|
||
}
|
||
|
||
var f1=charges[0],f2=charges[1];
|
||
var dx=f2.x-f1.x,dy=f2.y-f1.y,dist=Math.sqrt(dx*dx+dy*dy);
|
||
var attract=f1.q*f2.q<0;
|
||
var arrowColor=attract?'#22c55e':'#ef4444';
|
||
var dir=attract?1:-1;
|
||
ctx.strokeStyle=arrowColor;ctx.lineWidth=2;
|
||
var ax1=f1.x+dir*dx/dist*28,ay1=f1.y+dir*dy/dist*28;
|
||
ctx.beginPath();ctx.moveTo(f1.x+dir*dx/dist*22,f1.y+dir*dy/dist*22);ctx.lineTo(ax1,ay1);ctx.stroke();
|
||
ctx.fillStyle=arrowColor;ctx.beginPath();ctx.arc(ax1,ay1,3.5,0,Math.PI*2);ctx.fill();
|
||
var ax2=f2.x-dir*dx/dist*28,ay2=f2.y-dir*dy/dist*28;
|
||
ctx.beginPath();ctx.moveTo(f2.x-dir*dx/dist*22,f2.y-dir*dy/dist*22);ctx.lineTo(ax2,ay2);ctx.stroke();
|
||
ctx.beginPath();ctx.arc(ax2,ay2,3.5,0,Math.PI*2);ctx.fill();
|
||
ctx.fillStyle=arrowColor;ctx.font='bold 10px sans-serif';ctx.textAlign='center';
|
||
ctx.fillText(attract?'← ПРИТЯЖЕНИЕ →':'→ ОТТАЛКИВАНИЕ ←',cx,H-12);
|
||
|
||
anim28Id=requestAnimationFrame(frame);
|
||
}
|
||
anim28Id=requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ §29: Силовые линии магнитного поля ═══
|
||
var anim29Id=null;
|
||
function startAnim29(){
|
||
var cv=document.getElementById('cv29');
|
||
if(!cv||cv.offsetWidth===0) return;
|
||
if(anim29Id){cancelAnimationFrame(anim29Id);anim29Id=null;}
|
||
var dpr=window.devicePixelRatio||1;
|
||
var W=cv.offsetWidth,H=cv.offsetHeight||290;
|
||
cv.width=Math.round(W*dpr);cv.height=Math.round(H*dpr);
|
||
var ctx=cv.getContext('2d');ctx.setTransform(dpr,0,0,dpr,0,0);
|
||
var sel=document.getElementById('sel29shape');
|
||
var shape=sel?sel.value:'dipole';
|
||
var showNeedles=document.getElementById('chk29needles')&&document.getElementById('chk29needles').checked;
|
||
var t=0;
|
||
|
||
function getCharges(){
|
||
var cx=W/2,cy=H/2;
|
||
if(shape==='dipole') return [{x:cx-60,y:cy,q:1,lbl:'N'},{x:cx+60,y:cy,q:-1,lbl:'S'}];
|
||
if(shape==='horseshoe') return [{x:cx-50,y:cy-40,q:1,lbl:'N'},{x:cx+50,y:cy-40,q:-1,lbl:'S'}];
|
||
if(shape==='ns_close') return [{x:cx-30,y:cy,q:1,lbl:'N'},{x:cx+30,y:cy,q:-1,lbl:'S'}];
|
||
return [{x:cx-50,y:cy,q:1,lbl:'N'},{x:cx+50,y:cy,q:1,lbl:'N'}];
|
||
}
|
||
|
||
function frame(){
|
||
ctx.fillStyle='#0f172a';ctx.fillRect(0,0,W,H);
|
||
t+=0.01;
|
||
var charges=getCharges();
|
||
|
||
charges.forEach(function(ch){
|
||
if(ch.q<=0) return;
|
||
for(var i=0;i<16;i++){
|
||
var ang=(i/16)*Math.PI*2;
|
||
var x=ch.x+Math.cos(ang)*15,y=ch.y+Math.sin(ang)*15;
|
||
ctx.beginPath();ctx.moveTo(x,y);
|
||
for(var s=0;s<300;s++){
|
||
var fx=0,fy=0;
|
||
charges.forEach(function(c){
|
||
var dx=x-c.x,dy=y-c.y,r2=dx*dx+dy*dy;
|
||
if(r2<4) return;
|
||
var f=c.q/r2;fx+=f*dx/Math.sqrt(r2);fy+=f*dy/Math.sqrt(r2);
|
||
});
|
||
var len=Math.sqrt(fx*fx+fy*fy);if(len<1e-6)break;
|
||
x+=fx/len*2.5;y+=fy/len*2.5;ctx.lineTo(x,y);
|
||
if(x<2||x>W-2||y<2||y>H-2)break;
|
||
if(charges.some(function(c){return c.q<0&&Math.hypot(x-c.x,y-c.y)<14;}))break;
|
||
}
|
||
ctx.strokeStyle='rgba(147,197,253,0.45)';ctx.lineWidth=1.5;ctx.stroke();
|
||
}
|
||
});
|
||
|
||
charges.forEach(function(ch){
|
||
var col=ch.q>0?'#3b82f6':'#ef4444';
|
||
ctx.fillStyle=col+'44';ctx.fillRect(ch.x-20,ch.y-15,40,30);
|
||
ctx.strokeStyle=col;ctx.lineWidth=2;ctx.strokeRect(ch.x-20,ch.y-15,40,30);
|
||
ctx.fillStyle='#fff';ctx.font='bold 13px sans-serif';ctx.textAlign='center';
|
||
ctx.fillText(ch.lbl,ch.x,ch.y+5);
|
||
});
|
||
|
||
if(showNeedles){
|
||
var nx=Math.floor(W/50)+1,ny=Math.floor(H/50)+1;
|
||
for(var ix=0;ix<nx;ix++){for(var iy=0;iy<ny;iy++){
|
||
var bx=25+ix*50,by=25+iy*50;
|
||
var fx=0,fy=0;
|
||
charges.forEach(function(c){
|
||
var dx=bx-c.x,dy=by-c.y,r2=dx*dx+dy*dy;
|
||
if(r2<200)return;
|
||
var f=c.q/r2;fx+=f*dx/Math.sqrt(r2);fy+=f*dy/Math.sqrt(r2);
|
||
});
|
||
var angle=Math.atan2(fy,fx);
|
||
ctx.save();ctx.translate(bx,by);ctx.rotate(angle);
|
||
ctx.fillStyle='#3b82f6';ctx.beginPath();ctx.moveTo(0,-6);ctx.lineTo(-2,0);ctx.lineTo(2,0);ctx.fill();
|
||
ctx.fillStyle='#ef4444';ctx.beginPath();ctx.moveTo(0,6);ctx.lineTo(-2,0);ctx.lineTo(2,0);ctx.fill();
|
||
ctx.restore();
|
||
}}
|
||
}
|
||
|
||
anim29Id=requestAnimationFrame(frame);
|
||
}
|
||
anim29Id=requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ §30: Поле тока (Эрстед) ═══
|
||
var anim30Id=null, dir30=1;
|
||
function reverse30(){ dir30*=-1; startAnim30(); }
|
||
|
||
function startAnim30(){
|
||
var cv=document.getElementById('cv30');
|
||
if(!cv||cv.offsetWidth===0) return;
|
||
if(anim30Id){cancelAnimationFrame(anim30Id);anim30Id=null;}
|
||
var dpr=window.devicePixelRatio||1;
|
||
var W=cv.offsetWidth,H=cv.offsetHeight||270;
|
||
cv.width=Math.round(W*dpr);cv.height=Math.round(H*dpr);
|
||
var ctx=cv.getContext('2d');ctx.setTransform(dpr,0,0,dpr,0,0);
|
||
var showCompass=document.getElementById('chk30compass')&&document.getElementById('chk30compass').checked;
|
||
var I=parseFloat((document.getElementById('sl30I')||{}).value)||2;
|
||
var t=0;
|
||
|
||
function frame(){
|
||
ctx.fillStyle='#0f172a';ctx.fillRect(0,0,W,H);
|
||
t+=0.02;
|
||
var cx=W/2,cy=H/2;
|
||
|
||
var r=16;
|
||
ctx.fillStyle='#475569';ctx.beginPath();ctx.arc(cx,cy,r,0,Math.PI*2);ctx.fill();
|
||
ctx.strokeStyle='#94a3b8';ctx.lineWidth=2;ctx.stroke();
|
||
ctx.strokeStyle='#fbbf24';ctx.lineWidth=2.5;
|
||
if(dir30>0){
|
||
ctx.beginPath();ctx.moveTo(cx-8,cy-8);ctx.lineTo(cx+8,cy+8);ctx.stroke();
|
||
ctx.beginPath();ctx.moveTo(cx+8,cy-8);ctx.lineTo(cx-8,cy+8);ctx.stroke();
|
||
ctx.fillStyle='#fbbf24';ctx.font='8px sans-serif';ctx.textAlign='center';
|
||
ctx.fillText('× ток от нас',cx,cy+30);
|
||
} else {
|
||
ctx.fillStyle='#fbbf24';ctx.beginPath();ctx.arc(cx,cy,5,0,Math.PI*2);ctx.fill();
|
||
ctx.fillStyle='#fbbf24';ctx.font='8px sans-serif';ctx.textAlign='center';
|
||
ctx.fillText('· ток к нам',cx,cy+30);
|
||
}
|
||
|
||
var maxR=Math.min(W,H)*0.45;
|
||
for(var ri=1;ri<=4;ri++){
|
||
var linR=r+15*ri+I*5;
|
||
if(linR>maxR) break;
|
||
ctx.strokeStyle='rgba(59,130,246,'+(0.6-ri*0.1)+')';ctx.lineWidth=1.5;
|
||
ctx.beginPath();ctx.arc(cx,cy,linR,0,Math.PI*2);ctx.stroke();
|
||
var arrowAngle=t*dir30*1.5+ri*Math.PI/2;
|
||
var ax=cx+Math.cos(arrowAngle)*linR,ay=cy+Math.sin(arrowAngle)*linR;
|
||
var tang=arrowAngle+Math.PI/2*dir30;
|
||
ctx.fillStyle='rgba(59,130,246,0.9)';
|
||
ctx.save();ctx.translate(ax,ay);ctx.rotate(tang);
|
||
ctx.beginPath();ctx.moveTo(0,-6);ctx.lineTo(-3,3);ctx.lineTo(3,3);ctx.closePath();ctx.fill();
|
||
ctx.restore();
|
||
}
|
||
|
||
if(showCompass){
|
||
var positions=[[cx+80,cy],[cx-80,cy],[cx,cy+80],[cx,cy-80],[cx+56,cy+56],[cx-56,cy-56],[cx+56,cy-56],[cx-56,cy+56]];
|
||
positions.forEach(function(pos){
|
||
var bx=pos[0],by=pos[1];
|
||
var dx=bx-cx,dy=by-cy;
|
||
var angle=Math.atan2(dy,dx)+Math.PI/2*dir30;
|
||
ctx.save();ctx.translate(bx,by);ctx.rotate(angle);
|
||
ctx.beginPath();ctx.arc(0,0,7,0,Math.PI*2);
|
||
ctx.fillStyle='#1e293b';ctx.fill();ctx.strokeStyle='#475569';ctx.lineWidth=1;ctx.stroke();
|
||
ctx.fillStyle='#3b82f6';ctx.beginPath();ctx.moveTo(0,-7);ctx.lineTo(-2.5,0);ctx.lineTo(2.5,0);ctx.fill();
|
||
ctx.fillStyle='#ef4444';ctx.beginPath();ctx.moveTo(0,7);ctx.lineTo(-2.5,0);ctx.lineTo(2.5,0);ctx.fill();
|
||
ctx.restore();
|
||
});
|
||
}
|
||
|
||
ctx.fillStyle='#e2e8f0';ctx.font='9px sans-serif';ctx.textAlign='right';
|
||
ctx.fillText('I = '+I.toFixed(1)+' А '+(dir30>0?'↓ вниз':'↑ вверх'),W-10,H-10);
|
||
ctx.textAlign='center';
|
||
ctx.fillStyle='#64748b';ctx.font='9px sans-serif';
|
||
ctx.fillText(dir30>0?'Поле — по часовой ↻':'Поле — против часовой ↺',cx,H-24);
|
||
|
||
anim30Id=requestAnimationFrame(frame);
|
||
}
|
||
anim30Id=requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ §31: Электромагнит ═══
|
||
var anim31Id=null;
|
||
function startAnim31(){
|
||
var cv=document.getElementById('cv31');
|
||
if(!cv||cv.offsetWidth===0) return;
|
||
if(anim31Id){cancelAnimationFrame(anim31Id);anim31Id=null;}
|
||
var dpr=window.devicePixelRatio||1;
|
||
var W=cv.offsetWidth,H=cv.offsetHeight||290;
|
||
cv.width=Math.round(W*dpr);cv.height=Math.round(H*dpr);
|
||
var ctx=cv.getContext('2d');ctx.setTransform(dpr,0,0,dpr,0,0);
|
||
|
||
var N=parseInt((document.getElementById('sl31N')||{}).value)||5;
|
||
var I31=parseFloat((document.getElementById('sl31I')||{}).value)||2;
|
||
var core=document.getElementById('chk31core')&&document.getElementById('chk31core').checked;
|
||
var sel=document.getElementById('sel31scene');
|
||
var scene=sel?sel.value:'coil';
|
||
var power=N*I31*(core?3:1);
|
||
var t=0;
|
||
|
||
function frame(){
|
||
ctx.fillStyle='#0f172a';ctx.fillRect(0,0,W,H);
|
||
t+=0.025;
|
||
|
||
if(scene==='coil'){
|
||
var cx=W/2,cy=H/2;
|
||
if(core){
|
||
ctx.fillStyle='rgba(148,163,184,.3)';
|
||
ctx.fillRect(cx-70,cy-12,140,24);
|
||
ctx.strokeStyle='#94a3b8';ctx.lineWidth=1.5;ctx.strokeRect(cx-70,cy-12,140,24);
|
||
ctx.fillStyle='#94a3b8';ctx.font='8px sans-serif';ctx.textAlign='center';
|
||
ctx.fillText('Железный сердечник',cx,cy+20);
|
||
}
|
||
ctx.strokeStyle='#f97316';ctx.lineWidth=2.5;
|
||
var spacing=Math.max(4,Math.min(12,100/N));
|
||
for(var vi=0;vi<Math.min(N,16);vi++){
|
||
var vx=cx-60+vi*(120/Math.min(N,15));
|
||
ctx.beginPath();
|
||
ctx.ellipse(vx,cy,5,12+(core?3:0),0,0,Math.PI*2);
|
||
ctx.stroke();
|
||
}
|
||
var lines=3+Math.round(power/15);
|
||
for(var li=0;li<Math.min(lines,8);li++){
|
||
var ly=cy+(li-(Math.min(lines,8)/2-0.5))*18;
|
||
var ext=20+power*2;
|
||
var a='rgba(59,130,246,'+(0.5-Math.abs(ly-cy)/100)+')';
|
||
ctx.strokeStyle=a;ctx.lineWidth=1.5;
|
||
ctx.beginPath();
|
||
ctx.moveTo(cx-65,ly);ctx.lineTo(cx-65-ext,ly);
|
||
ctx.quadraticCurveTo(cx-65-ext-20,ly,cx-65-ext-20,cy);
|
||
ctx.quadraticCurveTo(cx-65-ext-20,cy-50,cx,cy-50-(power*0.5));
|
||
ctx.quadraticCurveTo(cx+65+ext+20,cy-50,cx+65+ext+20,cy);
|
||
ctx.quadraticCurveTo(cx+65+ext+20,ly,cx+65+ext,ly);
|
||
ctx.lineTo(cx+65,ly);
|
||
ctx.stroke();
|
||
var arrowX=cx-65-ext/2-Math.sin(t*2+li)*3;
|
||
ctx.fillStyle=a;
|
||
ctx.beginPath();ctx.moveTo(arrowX,ly-4);ctx.lineTo(arrowX-8,ly);ctx.lineTo(arrowX,ly+4);ctx.fill();
|
||
}
|
||
ctx.fillStyle='#3b82f6';ctx.font='bold 13px sans-serif';ctx.textAlign='center';
|
||
ctx.fillText('N',cx-70,cy+5);
|
||
ctx.fillStyle='#ef4444';ctx.fillText('S',cx+70,cy+5);
|
||
ctx.fillStyle='#fbbf24';ctx.font='9px sans-serif';
|
||
ctx.fillText('Мощность поля: '+power.toFixed(0)+' (N×I'+(core?'×3':'')+' = '+N+'×'+I31.toFixed(1)+(core?'×3':'')+' = '+power.toFixed(0)+')',cx,H-12);
|
||
|
||
} else if(scene==='relay'){
|
||
var cx=W/2,cy=H*0.4;
|
||
ctx.strokeStyle='#f97316';ctx.lineWidth=2.5;
|
||
for(var vi=0;vi<8;vi++){
|
||
var vx=cx-40+vi*11;
|
||
ctx.beginPath();ctx.ellipse(vx,cy,4,10,0,0,Math.PI*2);ctx.stroke();
|
||
}
|
||
if(core){ctx.fillStyle='rgba(148,163,184,.4)';ctx.fillRect(cx-42,cy-7,84,14);}
|
||
ctx.fillStyle='#64748b';ctx.font='9px sans-serif';ctx.textAlign='center';
|
||
ctx.fillText('Катушка электромагнита',cx,cy+25);
|
||
var attracted=I31>0;
|
||
var yakX=cx-50,yakY=attracted?cy-22:cy-35;
|
||
ctx.fillStyle=attracted?'rgba(239,68,68,.4)':'rgba(148,163,184,.3)';
|
||
ctx.fillRect(yakX,yakY,100,8);
|
||
ctx.strokeStyle=attracted?'#ef4444':'#94a3b8';ctx.lineWidth=2;
|
||
ctx.strokeRect(yakX,yakY,100,8);
|
||
ctx.fillStyle='#94a3b8';ctx.font='8px sans-serif';ctx.textAlign='center';
|
||
ctx.fillText(attracted?'Якорь притянут ↓ → контакт замкнут':'Якорь отпущен ↑ → контакт разомкнут',cx,yakY-10);
|
||
var contY=cy+40;
|
||
ctx.strokeStyle=attracted?'#22c55e':'#ef4444';ctx.lineWidth=2;
|
||
ctx.beginPath();ctx.moveTo(cx-30,contY);ctx.lineTo(cx-5,contY);ctx.stroke();
|
||
ctx.beginPath();ctx.moveTo(cx+5,contY+(attracted?0:15));ctx.lineTo(cx+30,contY+(attracted?0:15));ctx.stroke();
|
||
if(attracted){
|
||
ctx.beginPath();ctx.moveTo(cx-5,contY);ctx.lineTo(cx+5,contY);ctx.stroke();
|
||
ctx.fillStyle='#22c55e';ctx.font='9px sans-serif';ctx.fillText('Цепь замкнута!',cx,contY+20);
|
||
} else {
|
||
ctx.fillStyle='#ef4444';ctx.font='9px sans-serif';ctx.fillText('Цепь разомкнута',cx,contY+25);
|
||
}
|
||
|
||
} else {
|
||
var cx=W/2,cy=H*0.3;
|
||
var attracted=I31>0;
|
||
ctx.fillStyle='rgba(148,163,184,.3)';ctx.fillRect(cx-40,cy,80,25);
|
||
ctx.strokeStyle='#94a3b8';ctx.lineWidth=2;ctx.strokeRect(cx-40,cy,80,25);
|
||
if(I31>0){
|
||
var grd=ctx.createRadialGradient(cx,cy+12,0,cx,cy+12,30);
|
||
grd.addColorStop(0,'rgba(59,130,246,0.3)');grd.addColorStop(1,'transparent');
|
||
ctx.fillStyle=grd;ctx.beginPath();ctx.arc(cx,cy+12,30,0,Math.PI*2);ctx.fill();
|
||
}
|
||
ctx.fillStyle='#e2e8f0';ctx.font='8px sans-serif';ctx.textAlign='center';
|
||
ctx.fillText(I31>0?'⚡ ВКЛЮЧЁН':'○ ВЫКЛЮЧЕН',cx,cy+16);
|
||
var grY=attracted?cy+30:cy+80;
|
||
ctx.fillStyle=attracted?'#374151':'#4b5563';
|
||
ctx.fillRect(cx-25,grY,50,30);
|
||
ctx.strokeStyle='#9ca3af';ctx.lineWidth=2;ctx.strokeRect(cx-25,grY,50,30);
|
||
ctx.fillStyle='#94a3b8';ctx.font='8px sans-serif';
|
||
ctx.fillText('Стальной',cx,grY+13);
|
||
ctx.fillText('груз',cx,grY+24);
|
||
if(!attracted){
|
||
ctx.fillStyle='#64748b';ctx.font='9px sans-serif';
|
||
ctx.fillText('↓ падает (ток выключен)',cx,grY+50);
|
||
}
|
||
}
|
||
|
||
anim31Id=requestAnimationFrame(frame);
|
||
}
|
||
anim31Id=requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// ИНИЦИАЛИЗАЦИЯ
|
||
// ═══════════════════════════════════════
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// тема
|
||
if (localStorage.getItem('phys8_e_theme')==='dark') document.documentElement.classList.add('dark');
|
||
document.getElementById('themeBtn').onclick = function() {
|
||
document.documentElement.classList.toggle('dark');
|
||
localStorage.setItem('phys8_e_theme', document.documentElement.classList.contains('dark')?'dark':'light');
|
||
};
|
||
|
||
// ── Маппинг таб → группа ──
|
||
var tabToGroup = {
|
||
'ref12':'es','ref13':'es','ref14':'es','ref15':'es','ref16':'es',
|
||
'ref17':'et','ref18':'et','ref19':'et','ref20':'et','ref21':'et',
|
||
'ref22':'om','ref23':'om','ref24':'om','ref25':'om','ref26':'om','ref27':'om',
|
||
'ref28':'mg','ref29':'mg','ref30':'mg','ref31':'mg',
|
||
'tasks':'tasks'
|
||
};
|
||
|
||
// ── Активация таба ──
|
||
function activateTab(tn){
|
||
// снимаем активность со всех табов и контента
|
||
document.querySelectorAll('.tab').forEach(function(t){ t.classList.remove('active'); });
|
||
document.querySelectorAll('.content').forEach(function(c){ c.classList.remove('active'); });
|
||
// показываем нужный контент
|
||
var cont = document.getElementById('tab-'+tn);
|
||
if (cont) cont.classList.add('active');
|
||
// ставим active на таб в сайдбаре
|
||
var tabEl = document.querySelector('.tab[data-tab="'+tn+'"]');
|
||
if (tabEl) tabEl.classList.add('active');
|
||
// переключаем ch-btn и sec-group
|
||
var grp = tabToGroup[tn] || 'es';
|
||
document.querySelectorAll('.ch-btn').forEach(function(b){ b.classList.remove('active'); });
|
||
document.querySelectorAll('.sec-group').forEach(function(g){ g.classList.remove('show'); });
|
||
var chBtn = document.querySelector('.ch-btn[data-ch="'+grp+'"]');
|
||
if (chBtn) chBtn.classList.add('active');
|
||
var secGrp = document.querySelector('.sec-group[data-chg="'+grp+'"]');
|
||
if (secGrp) secGrp.classList.add('show');
|
||
// scroll sidebar tab into view
|
||
if (tabEl) tabEl.scrollIntoView({block:'nearest'});
|
||
// запуск интерактива при переключении таба
|
||
var tabFns = {
|
||
'ref12': function(){ setTimeout(function(){ draw12static(); }, 60); },
|
||
'ref13': function(){ setTimeout(upd13, 60); },
|
||
'ref14': function(){ setTimeout(upd14, 60); },
|
||
'ref15': function(){ setTimeout(upd15, 60); },
|
||
'ref16': function(){ setTimeout(function(){ if(!anim16Id) startAnim16(); }, 60); },
|
||
'ref17': function(){ setTimeout(upd17, 60); },
|
||
'ref18': function(){ setTimeout(function(){ if(!anim18Id) startAnim18(); }, 60); },
|
||
'ref19': function(){ setTimeout(function(){ draw19frame(key19); }, 60); },
|
||
'ref20': function(){ setTimeout(function(){ if(!anim20Id) startAnim20(); }, 60); },
|
||
'ref21': function(){ setTimeout(function(){ if(key21) startAnim21(); else draw21(false); }, 60); },
|
||
'ref22': function(){ setTimeout(upd22, 60); },
|
||
'ref23': function(){ setTimeout(upd23, 60); },
|
||
'ref24': function(){ setTimeout(upd24, 60); },
|
||
'ref25': function(){ setTimeout(upd25, 60); },
|
||
'ref26': function(){ setTimeout(upd26, 60); },
|
||
'ref27': function(){ setTimeout(upd27, 60); },
|
||
'ref28': function(){ setTimeout(function(){ startAnim28(); }, 60); },
|
||
'ref29': function(){ setTimeout(function(){ startAnim29(); }, 60); },
|
||
'ref30': function(){ setTimeout(function(){ startAnim30(); }, 60); },
|
||
'ref31': function(){ setTimeout(function(){ startAnim31(); }, 60); }
|
||
};
|
||
if (tabFns[tn]) tabFns[tn]();
|
||
// scroll main-col to top
|
||
var mc = document.querySelector('.main-col');
|
||
if (mc) mc.scrollTop = 0;
|
||
}
|
||
|
||
// ── Клики по табам в сайдбаре ──
|
||
document.querySelectorAll('.tab[data-tab]').forEach(function(tab) {
|
||
tab.onclick = function(e) {
|
||
e.stopPropagation();
|
||
activateTab(this.dataset.tab);
|
||
};
|
||
});
|
||
|
||
// ── Клики по ch-btn (разделам) ──
|
||
document.querySelectorAll('.ch-btn[data-ch]').forEach(function(btn) {
|
||
btn.onclick = function() {
|
||
var ch = this.dataset.ch;
|
||
// показываем sec-group
|
||
document.querySelectorAll('.ch-btn').forEach(function(b){ b.classList.remove('active'); });
|
||
document.querySelectorAll('.sec-group').forEach(function(g){ g.classList.remove('show'); });
|
||
this.classList.add('active');
|
||
var sg = document.querySelector('.sec-group[data-chg="'+ch+'"]');
|
||
if (sg) sg.classList.add('show');
|
||
// активируем первый таб этой группы
|
||
if (sg) {
|
||
var firstTab = sg.querySelector('.tab[data-tab]');
|
||
if (firstTab) activateTab(firstTab.dataset.tab);
|
||
}
|
||
};
|
||
});
|
||
|
||
// ── refPanel popup ──
|
||
var refRendered = false;
|
||
document.getElementById('refToggle').onclick = function() {
|
||
var rp = document.getElementById('refPanel');
|
||
rp.classList.toggle('show');
|
||
if (!refRendered && rp.classList.contains('show')) {
|
||
refRendered = true;
|
||
if (window.renderMathInElement) renderMathInElement(rp, {
|
||
delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}],
|
||
throwOnError:false
|
||
});
|
||
}
|
||
};
|
||
// Закрыть по клику снаружи
|
||
document.addEventListener('click', function(e){
|
||
var rp = document.getElementById('refPanel');
|
||
var toggle = document.getElementById('refToggle');
|
||
if (rp.classList.contains('show') && !rp.contains(e.target) && !toggle.contains(e.target)){
|
||
rp.classList.remove('show');
|
||
}
|
||
});
|
||
|
||
// ── задачи — инит ──
|
||
['p12','p13','p14','p15','p16','p17','p18','p19','p20','p21','p22','p23','p24','p25','p26','p27','p28','p29','p30','p31','hard'].forEach(function(sec) {
|
||
renderTask(sec);
|
||
});
|
||
setParaTab('p12');
|
||
|
||
// KaTeX
|
||
if (window.renderMathInElement) {
|
||
renderMathInElement(document.body, {
|
||
delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}],
|
||
throwOnError:false
|
||
});
|
||
}
|
||
|
||
// §12: инициализация интерактивов (активный таб при загрузке)
|
||
setTimeout(function(){ draw12static(); }, 150);
|
||
setTimeout(upd17, 200);
|
||
setTimeout(upd22, 200);
|
||
setTimeout(upd23, 200);
|
||
setTimeout(upd24, 200);
|
||
setTimeout(upd25, 200);
|
||
setTimeout(upd26, 200);
|
||
|
||
// ═══════════ PRO MAX UPGRADE ИНИЦИАЛИЗАЦИЯ ═══════════
|
||
initProMaxUpgrade();
|
||
});
|
||
|
||
// ═══════════════════════════════════════
|
||
// PRO MAX UPGRADE: инфра motion + UX
|
||
// ═══════════════════════════════════════
|
||
function initProMaxUpgrade(){
|
||
// 0. Авто-инжекция ph-glow и ph-badge в каждый hero
|
||
document.querySelectorAll('.para-hero').forEach(function(hero, i){
|
||
if(!hero.querySelector('.ph-glow')){
|
||
var g = document.createElement('span');
|
||
g.className = 'ph-glow';
|
||
hero.appendChild(g);
|
||
}
|
||
if(!hero.querySelector('.ph-badge')){
|
||
var n = '';
|
||
hero.classList.forEach(function(c){ var m=/^ph-(\d+)$/.exec(c); if(m) n='§'+m[1]; });
|
||
if(!n) n='§'+(i+1);
|
||
var b = document.createElement('div');
|
||
b.className = 'ph-badge';
|
||
b.innerHTML = '<i class="fas fa-bookmark" style="font-size:.6rem;margin-right:4px"></i>'+n;
|
||
hero.appendChild(b);
|
||
}
|
||
});
|
||
|
||
// 1. IntersectionObserver — fade-up для секций при скролле
|
||
try{
|
||
var io = new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){
|
||
if(e.isIntersecting){ e.target.classList.add('is-in'); io.unobserve(e.target); }
|
||
});
|
||
},{threshold:.12,rootMargin:'0px 0px -40px 0px'});
|
||
document.querySelectorAll('.content > *').forEach(function(el){
|
||
if(el.classList.contains('para-hero')) return;
|
||
el.classList.add('fx-rise');
|
||
io.observe(el);
|
||
});
|
||
document.querySelectorAll('.formula-grid, .life-grid, .idiag-2col').forEach(function(el){
|
||
el.classList.add('fx-stagger');
|
||
io.observe(el);
|
||
});
|
||
}catch(_){/* no-op */}
|
||
|
||
// 2. Mousemove параллакс на ::after шар у hero
|
||
document.querySelectorAll('.para-hero').forEach(function(hero){
|
||
hero.addEventListener('mousemove', function(e){
|
||
var r = hero.getBoundingClientRect();
|
||
var dx = (e.clientX - r.left - r.width/2) / r.width;
|
||
var dy = (e.clientY - r.top - r.height/2) / r.height;
|
||
hero.style.setProperty('--phx', (dx*12).toFixed(2)+'px');
|
||
hero.style.setProperty('--phy', (dy*8).toFixed(2)+'px');
|
||
});
|
||
});
|
||
|
||
// 3. Карточки формул: glow-курсор
|
||
document.querySelectorAll('.fcard').forEach(function(card){
|
||
card.addEventListener('mousemove', function(e){
|
||
var r = card.getBoundingClientRect();
|
||
card.style.setProperty('--mx', ((e.clientX-r.left)/r.width*100)+'%');
|
||
card.style.setProperty('--my', ((e.clientY-r.top)/r.height*100)+'%');
|
||
});
|
||
});
|
||
|
||
// 4. Ripple на всех кнопках
|
||
document.addEventListener('click', function(e){
|
||
var btn = e.target.closest('.btn, .para-pill, .opt-btn');
|
||
if(!btn) return;
|
||
var r = btn.getBoundingClientRect();
|
||
btn.style.setProperty('--rx', ((e.clientX-r.left)/r.width*100)+'%');
|
||
btn.style.setProperty('--ry', ((e.clientY-r.top)/r.height*100)+'%');
|
||
btn.classList.remove('is-ripple');
|
||
void btn.offsetWidth;
|
||
btn.classList.add('is-ripple');
|
||
setTimeout(function(){ btn.classList.remove('is-ripple'); }, 600);
|
||
});
|
||
}
|
||
|
||
// no-op stubs для совместимости
|
||
function buildMiniToc(){}
|
||
function markMiniTocActive(){}
|
||
function updateChapterProgress(){}
|
||
|
||
// ═══ B1. setupCanvas — утилита для новых интерактивов ═══
|
||
function setupCanvas(id, opts){
|
||
opts = opts || {};
|
||
var cv = document.getElementById(id);
|
||
if(!cv) return null;
|
||
var dpr = Math.min(window.devicePixelRatio||1, 2);
|
||
function resize(){
|
||
var W = cv.offsetWidth, H = cv.offsetHeight || (opts.height||220);
|
||
cv.width = Math.round(W*dpr); cv.height = Math.round(H*dpr);
|
||
var ctx = cv.getContext('2d');
|
||
ctx.setTransform(dpr,0,0,dpr,0,0);
|
||
return {ctx:ctx, W:W, H:H};
|
||
}
|
||
var rid = null, paused = false, lastFrame = 0;
|
||
var io = null;
|
||
if(opts.draw){
|
||
var loop = function(now){
|
||
if(paused){ rid=null; return; }
|
||
var dt = lastFrame ? (now-lastFrame)/1000 : 0.016;
|
||
lastFrame = now;
|
||
var dims = resize();
|
||
opts.draw(dims.ctx, dims.W, dims.H, dt, now);
|
||
rid = requestAnimationFrame(loop);
|
||
};
|
||
// auto-pause when off-screen
|
||
try{
|
||
io = new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){
|
||
if(e.isIntersecting){
|
||
if(!rid){ paused=false; lastFrame=0; rid=requestAnimationFrame(loop); }
|
||
} else {
|
||
paused=true; if(rid){cancelAnimationFrame(rid); rid=null;}
|
||
}
|
||
});
|
||
},{threshold:.05});
|
||
io.observe(cv);
|
||
}catch(_){}
|
||
// initial
|
||
paused=false; lastFrame=0; rid=requestAnimationFrame(loop);
|
||
} else if(opts.onResize){
|
||
var dims = resize();
|
||
opts.onResize(dims.ctx, dims.W, dims.H);
|
||
}
|
||
window.addEventListener('resize', function(){ if(opts.onResize){ var d=resize(); opts.onResize(d.ctx,d.W,d.H);} });
|
||
return {
|
||
canvas:cv,
|
||
stop:function(){ paused=true; if(rid){cancelAnimationFrame(rid); rid=null;} if(io)io.disconnect(); }
|
||
};
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|