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'ом.
4519 lines
302 KiB
HTML
4519 lines
302 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:#fef2f2; --pri-100:#fee2e2; --pri-200:#fecaca; --pri-300:#fca5a5;
|
||
--pri-400:#f87171; --pri-500:#ef4444; --pri-600:#dc2626; --pri-700:#b91c1c;
|
||
--pri-800:#991b1b; --pri-900:#7f1d1d;
|
||
--acc-300:#fdba74; --acc-400:#fb923c; --acc-500:#f97316; --acc-600:#ea580c; --acc-700:#c2410c;
|
||
--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:#fff7ed; --card:#fff;
|
||
--surface-1:#ffffff; --surface-2:#fff7ed; --surface-3:#ffedd5;
|
||
--text:#1c1917; --muted:#78716c; --border:#e7e5e4;
|
||
--glass-bg:rgba(255,255,255,.65); --glass-border:rgba(255,255,255,.4);
|
||
|
||
/* Тени и свечение */
|
||
--sh:0 2px 10px rgba(220,38,38,.07);
|
||
--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(220,38,38,.25);
|
||
--shadow-pop:0 8px 22px rgba(220,38,38,.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:#1c0a00; --card:#2c1a0e;
|
||
--surface-1:#2c1a0e; --surface-2:#3a2114; --surface-3:#4a2a1a;
|
||
--text:#fafaf9; --muted:#a8a29e; --border:#44403c;
|
||
--glass-bg:rgba(44,26,14,.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(248,113,113,.35);
|
||
--shadow-pop:0 8px 22px rgba(220,38,38,.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}
|
||
|
||
/* ═══════════ FLOATING BUTTONS ═══════════ */
|
||
.theme-btn{position:fixed;top:12px;right:12px;z-index:80;width:38px;height:38px;border-radius:10px;
|
||
background:var(--card);border:1px solid var(--border);cursor:pointer;display:grid;place-items:center;
|
||
font-size:1rem;box-shadow:var(--sh);color:var(--text);transition:.2s}
|
||
.theme-btn:hover{transform:rotate(-12deg) scale(1.06)}
|
||
.theme-btn:active{transform:rotate(8deg) scale(.94)}
|
||
|
||
/* ═══════════ REF TOGGLE & POPUP ═══════════ */
|
||
.ref-toggle{position:fixed;bottom:16px;right:16px;z-index:70;width:46px;height:46px;
|
||
border-radius:13px;background:var(--pri);color:#fff;border:none;cursor:pointer;
|
||
display:grid;place-items:center;font-size:1.1rem;
|
||
box-shadow:0 6px 18px rgba(220,38,38,.4),0 0 0 4px rgba(220,38,38,.08);transition:.2s}
|
||
.ref-toggle:hover{transform:scale(1.06) rotate(-4deg);box-shadow:0 10px 26px rgba(220,38,38,.55),0 0 0 6px rgba(220,38,38,.12)}
|
||
.ref-panel{position:fixed;bottom:72px;right:16px;z-index:65;width:300px;max-height:72vh;
|
||
overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:16px;
|
||
padding:16px 18px;box-shadow:0 8px 30px rgba(0,0,0,.15);display:none;font-size:.8rem;
|
||
line-height:1.85;scrollbar-width:thin}
|
||
.ref-panel.show{display:block;animation:pop .2s ease}
|
||
.ref-panel h3{font-size:.84rem;font-weight:700;color:var(--pri);margin:12px 0 4px}
|
||
.ref-panel h3:first-child{margin-top:0}
|
||
.ref-panel .rf{background:rgba(220,38,38,.06);border-radius:8px;padding:6px 10px;margin:3px 0;text-align:center}
|
||
|
||
/* ═══════════ ШАПКА (hdr) ═══════════ */
|
||
.hdr{background:linear-gradient(135deg,#7f1d1d 0%,#dc2626 55%,#ea580c 100%);color:#fff;
|
||
padding:22px 20px 18px;text-align:center}
|
||
.hdr h1{font-size:1.4rem;font-weight:900;display:flex;align-items:center;justify-content:center;gap:10px}
|
||
.hdr p{font-size:.82rem;opacity:.87;margin-top:5px}
|
||
|
||
/* ═══════════ PAGE LAYOUT: sidebar + main ═══════════ */
|
||
.page-layout{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 80px);overflow:hidden}
|
||
.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;
|
||
background:var(--card);border-right:1px solid var(--border);scrollbar-width:thin}
|
||
html.dark .sidebar{background:var(--surface-1);border-right-color:var(--border)}
|
||
.sidebar::-webkit-scrollbar{width:3px}
|
||
.sidebar::-webkit-scrollbar-thumb{background:rgba(220,38,38,.2);border-radius:99px}
|
||
.main-col{min-width:0;overflow-y:auto;overflow-x:hidden;padding:0}
|
||
|
||
/* ── Sidebar brand ── */
|
||
.sb-brand{display:flex;align-items:center;gap:10px;padding:16px 14px 14px;
|
||
border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(220,38,38,.06),rgba(249,115,22,.04))}
|
||
html.dark .sb-brand{background:rgba(220,38,38,.08)}
|
||
.sb-logo{width:30px;height:30px;color:var(--pri);flex-shrink:0}
|
||
.sb-title{display:block;font-size:.9rem;font-weight:900;color:var(--text);letter-spacing:-.02em;line-height:1.1}
|
||
.sb-sub{display:block;font-size:.55rem;color:var(--muted);margin-top:2px;letter-spacing:.04em;text-transform:uppercase}
|
||
|
||
/* ── Sidebar nav ── */
|
||
.sb-nav{padding:10px 8px 18px;display:flex;flex-direction:column;gap:2px}
|
||
.ch-btn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;
|
||
border:none;border-left:2.5px solid transparent;border-radius:0 7px 7px 0;background:transparent;
|
||
font-family:'Outfit',system-ui,sans-serif;font-size:.74rem;font-weight:700;color:var(--muted);
|
||
cursor:pointer;text-align:left;transition:.18s;white-space:nowrap}
|
||
.ch-btn:hover{background:rgba(220,38,38,.07);border-left-color:rgba(220,38,38,.25);color:var(--text)}
|
||
.ch-btn.active{background:rgba(220,38,38,.1);border-left-color:var(--pri);color:var(--pri)}
|
||
html.dark .ch-btn:hover{background:rgba(220,38,38,.12)}
|
||
html.dark .ch-btn.active{background:rgba(220,38,38,.18);color:#f87171}
|
||
.ch-icon{width:14px;height:14px;flex-shrink:0;opacity:.5;transition:opacity .15s,color .15s}
|
||
.ch-btn:hover .ch-icon{opacity:.8}
|
||
.ch-btn.active .ch-icon{opacity:1;color:var(--pri)}
|
||
html.dark .ch-btn.active .ch-icon{color:#f87171}
|
||
.ch-num{font-family:monospace;font-size:.64rem;color:rgba(220,38,38,.5);min-width:26px;flex-shrink:0;transition:color .15s}
|
||
.ch-btn.active .ch-num{color:rgba(220,38,38,.75)}
|
||
html.dark .ch-btn.active .ch-num{color:rgba(248,113,113,.7)}
|
||
.ch-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
|
||
.ch-count{font-family:monospace;font-size:.5rem;background:rgba(220,38,38,.1);color:rgba(180,60,30,.7);
|
||
border-radius:4px;padding:1px 5px;flex-shrink:0;line-height:1.6}
|
||
.ch-btn.active .ch-count{background:rgba(220,38,38,.18);color:var(--pri)}
|
||
html.dark .ch-count{background:rgba(220,38,38,.15);color:rgba(248,113,113,.6)}
|
||
.sb-divider{height:1px;background:var(--border);margin:6px 10px}
|
||
|
||
/* ═══════════ КОНТЕНТ ═══════════ */
|
||
.content-area{max-width:820px;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}}
|
||
|
||
/* ═══════════ ТАБЫ (legacy — скрыть) ═══════════ */
|
||
.tab-wrap{display:none!important}
|
||
#miniToc{display:none!important}
|
||
.chapter-prog{display:none!important}
|
||
.top-bar{display:none!important}
|
||
.tab{padding:7px 13px;border:2px solid var(--border);border-radius:9px;font-size:.73rem;font-weight:700;
|
||
cursor:pointer;white-space:nowrap;background:var(--card);color:var(--muted);transition:.16s;flex-shrink:0}
|
||
.tab:hover{border-color:var(--pri);color:var(--pri)}
|
||
.tab.active{background:var(--pri);color:#fff;border-color:var(--pri)}
|
||
|
||
/* ═══════════ АДАПТИВНОСТЬ ═══════════ */
|
||
@media(max-width:768px){
|
||
.page-layout{grid-template-columns:1fr;overflow:visible}
|
||
.sidebar{position:static;height:auto;overflow-y:visible;border-right:none;
|
||
border-bottom:1px solid var(--border)}
|
||
.sidebar .sb-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:6px 8px;gap:2px;
|
||
scrollbar-width:none}
|
||
.sidebar .sb-nav::-webkit-scrollbar{display:none}
|
||
.sidebar .ch-btn{border-left:none!important;border-bottom:2.5px solid transparent;
|
||
border-radius:0;padding:9px 12px;white-space:nowrap;width:auto;flex-shrink:0}
|
||
.sidebar .ch-btn:hover{border-bottom-color:rgba(220,38,38,.3);background:rgba(220,38,38,.05)}
|
||
.sidebar .ch-btn.active{border-left:none!important;border-bottom-color:var(--pri)!important;
|
||
background:transparent;color:var(--pri)}
|
||
.sidebar .ch-num,.sidebar .ch-count,.sidebar .ch-icon{display:none}
|
||
.hdr h1{font-size:1.1rem}
|
||
}
|
||
|
||
/* ═══════════ 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-1{background:linear-gradient(135deg,#dc2626,#f97316)}
|
||
.ph-2{background:linear-gradient(135deg,#ea580c,#fbbf24)}
|
||
.ph-3{background:linear-gradient(135deg,#d97706,#fef08a);color:#1c1917}
|
||
.ph-4{background:linear-gradient(135deg,#0891b2,#67e8f9);color:#1c1917}
|
||
.ph-5{background:linear-gradient(135deg,#ca8a04,#fde047);color:#1c1917}
|
||
.ph-6{background:linear-gradient(135deg,#16a34a,#86efac);color:#1c1917}
|
||
.ph-7{background:linear-gradient(135deg,#b45309,#fb923c)}
|
||
.ph-8{background:linear-gradient(135deg,#1d4ed8,#93c5fd)}
|
||
.ph-9{background:linear-gradient(135deg,#4f46e5,#a5b4fc)}
|
||
.ph-10{background:linear-gradient(135deg,#0284c7,#7dd3fc)}
|
||
.ph-11{background:linear-gradient(135deg,#7c3aed,#c4b5fd)}
|
||
|
||
/* ═══════════ ТЕОРИЯ ═══════════ */
|
||
.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(220,38,38,.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(220,38,38,.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(220,38,38,.06);border-radius:8px;margin:8px 0}
|
||
html.dark .formula-box .main-f{background:rgba(220,38,38,.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(220,38,38,.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(220,38,38,.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}
|
||
|
||
/* ═══════════ СПРАВОЧНИК (таблицы в popup) ═══════════ */
|
||
.ref-tbl{width:100%;border-collapse:collapse;font-size:.78rem;margin:4px 0 10px}
|
||
.ref-tbl td,.ref-tbl th{padding:4px 8px;border:1px solid var(--border)}
|
||
.ref-tbl tr:nth-child(odd) td{background:rgba(220,38,38,.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(220,38,38,.1)}
|
||
.fcard.highlight{border-color:var(--pri);background:linear-gradient(135deg,rgba(220,38,38,.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(220,38,38,.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(220,38,38,.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(220,38,38,.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(220,38,38,.06),rgba(220,38,38,.03));border:2px solid rgba(220,38,38,.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(220,38,38,.4);background:rgba(220,38,38,.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(220,38,38,.07),rgba(249,115,22,.04));border:2px solid rgba(220,38,38,.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(249,115,22,.08),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(220,38,38,.06),transparent 55%),var(--bg);min-height:100vh}
|
||
html.dark body{background:radial-gradient(1200px 600px at 80% -10%,rgba(220,38,38,.18),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(249,115,22,.10),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-3 h2,.ph-4 h2,.ph-5 h2,.ph-6 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(220,38,38,.08)}
|
||
|
||
/* ── A2. Para-hero v2: SVG-узор + параллакс + glow ── */
|
||
.para-hero{box-shadow:var(--shadow-lg),0 0 50px rgba(220,38,38,.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-3 .ph-badge,.ph-4 .ph-badge,.ph-5 .ph-badge,.ph-6 .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(220,38,38,.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(220,38,38,.3)}
|
||
.btn-pri:hover{box-shadow:0 6px 20px rgba(220,38,38,.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 ── */
|
||
.tab{transition:transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background var(--dur-2) var(--ease),color var(--dur-2) var(--ease);position:relative}
|
||
.tab:hover{transform:translateY(-1px)}
|
||
.tab.active{box-shadow:0 4px 14px rgba(220,38,38,.32)}
|
||
.tab.active::after{content:'';position:absolute;left:50%;bottom:-9px;width:6px;height:6px;background:var(--pri);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 8px var(--pri)}
|
||
|
||
/* 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(220,38,38,.3)}
|
||
|
||
/* ── Nav-dots v2: пульс активного ── */
|
||
|
||
/* ═══════════ KEY POINTS (ГЛАВНОЕ) ═══════════ */
|
||
.key-points{background:rgba(220,38,38,.08);border-left:4px solid var(--pri);padding:16px;margin:24px 0;border-radius:8px}
|
||
html.dark .key-points{background:rgba(220,38,38,.12)}
|
||
.key-points-title{font-weight:800;font-size:.9rem;color:var(--pri);margin-bottom:12px;display:flex;align-items:center;gap:7px}
|
||
.key-points-list{list-style:none;padding:0;margin:0}
|
||
.key-points-list li{font-size:.88rem;color:var(--text);line-height:1.6;padding-left:24px;position:relative;margin-bottom:8px}
|
||
.key-points-list li::before{content:'✓';position:absolute;left:0;color:var(--pri);font-weight:800}
|
||
|
||
/* ═══════════ REF-PANEL TABS ═══════════ */
|
||
.ref-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px}
|
||
.ref-tab-btn{flex:1;padding:10px 12px;border:none;background:transparent;cursor:pointer;font-size:.76rem;font-weight:700;color:var(--muted);transition:.18s;border-bottom:2px solid transparent;margin-bottom:-2px}
|
||
.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 в ref-panel */
|
||
.ref-formula-table{width:100%;font-size:.75rem;margin:8px 0;border-collapse:collapse;max-height:65vh;overflow-y:auto}
|
||
.ref-formula-table th,.ref-formula-table td{padding:8px 10px;border:1px solid var(--border);text-align:left}
|
||
.ref-formula-table th{background:rgba(220,38,38,.08);font-weight:700;color:var(--pri);position:sticky;top:0;z-index:1}
|
||
.ref-formula-table tr:nth-child(odd) td{background:rgba(220,38,38,.04)}
|
||
.ref-formula-table tr:nth-child(even) td{background:var(--card)}
|
||
|
||
/* Mobile: formulas as accordion */
|
||
@media(max-width:768px){
|
||
.ref-formula-table{max-height:none}
|
||
}
|
||
.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(220,38,38,.18),0 4px 12px rgba(220,38,38,.3);animation:dotPulse 2.4s ease-in-out infinite}
|
||
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 4px rgba(220,38,38,.18),0 4px 12px rgba(220,38,38,.3)}50%{box-shadow:0 0 0 7px rgba(220,38,38,.08),0 4px 14px rgba(220,38,38,.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(220,38,38,.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(220,38,38,.1);color:var(--pri-700);font-weight:800;font-family:monospace;font-size:.78rem;border:1px solid rgba(220,38,38,.2);transition:all var(--dur-1) var(--ease)}
|
||
html.dark .val-chip{color:var(--pri-300);background:rgba(220,38,38,.18);border-color:rgba(220,38,38,.3)}
|
||
|
||
/* ── mini-TOC — не используется в новом layout ── */
|
||
#miniToc{display:none!important}
|
||
|
||
/* ── chapter-prog — не используется в новом layout ── */
|
||
.chapter-prog{display:none!important}
|
||
.top-bar{display:none!important}
|
||
|
||
/* ── Скролл — плавный ── */
|
||
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}
|
||
|
||
/* ── Wide layout: content-area без отступа (sidebar в grid) ── */
|
||
@media(min-width:1180px){
|
||
.content-area{padding-left:0}
|
||
}
|
||
|
||
/* ── 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)}
|
||
|
||
/* ── Tab v2: совместимость с активным ch-btn ── */
|
||
.ch-btn.active{box-shadow:none}
|
||
/* Ref-toggle глоу */
|
||
.ref-toggle{transition:transform var(--dur-2) var(--ease-bounce),box-shadow var(--dur-2) var(--ease)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Floating buttons -->
|
||
<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-fire"></i></button>
|
||
|
||
<!-- Справочник: popup-карточка -->
|
||
<div class="ref-panel" id="refPanel">
|
||
<!-- Вкладки -->
|
||
<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 class="rf">$Q = cm\Delta t$ — §6 нагрев</div>
|
||
<div class="rf">$Q = qm$ — §7 сгорание</div>
|
||
<div class="rf">$Q = \lambda m$ — §9 плавление</div>
|
||
<div class="rf">$Q = Lm$ — §11 кипение</div>
|
||
<div class="rf">$Q_{\text{отд}} = Q_{\text{погл}}$ — тепловой баланс</div>
|
||
<h3>Уд. теплоёмкость <i>c</i>, Дж/(кг·°C)</h3>
|
||
<table class="ref-tbl">
|
||
<tr><td>Вода</td><td><b>4200</b></td><td>Алюминий</td><td>900</td></tr>
|
||
<tr><td>Лёд</td><td>2090</td><td>Железо/сталь</td><td>460</td></tr>
|
||
<tr><td>Стекло</td><td>840</td><td>Медь</td><td>385</td></tr>
|
||
<tr><td>Серебро</td><td>235</td><td>Свинец</td><td>128</td></tr>
|
||
</table>
|
||
<h3>Уд. теплота сгорания <i>q</i>, МДж/кг</h3>
|
||
<table class="ref-tbl">
|
||
<tr><td>Водород</td><td><b>120</b></td><td>Бензин</td><td>47</td></tr>
|
||
<tr><td>Газ природный</td><td>44</td><td>Дизель</td><td>43</td></tr>
|
||
<tr><td>Кокс</td><td>30</td><td>Уголь кам.</td><td>27</td></tr>
|
||
<tr><td>Торф</td><td>19</td><td>Дрова</td><td>10</td></tr>
|
||
</table>
|
||
<h3>Теплота плавления <i>λ</i>, кДж/кг · t<sub>пл</sub>, °C</h3>
|
||
<table class="ref-tbl">
|
||
<tr><td>Вода (лёд)</td><td><b>333</b></td><td>0°C</td></tr>
|
||
<tr><td>Алюминий</td><td>390</td><td>660°C</td></tr>
|
||
<tr><td>Железо</td><td>270</td><td>1539°C</td></tr>
|
||
<tr><td>Медь</td><td>205</td><td>1084°C</td></tr>
|
||
<tr><td>Серебро</td><td>88</td><td>962°C</td></tr>
|
||
<tr><td>Свинец</td><td>25</td><td>327°C</td></tr>
|
||
</table>
|
||
<h3>Теплота парообразования <i>L</i>, кДж/кг · t<sub>кип</sub>, °C</h3>
|
||
<table class="ref-tbl">
|
||
<tr><td>Вода</td><td><b>2260</b></td><td>100°C</td></tr>
|
||
<tr><td>Спирт этил.</td><td>857</td><td>78°C</td></tr>
|
||
<tr><td>Ацетон</td><td>520</td><td>56°C</td></tr>
|
||
<tr><td>Ртуть</td><td>285</td><td>357°C</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="ref-formula-table">
|
||
<thead>
|
||
<tr><th>§</th><th>Формула</th><th>Описание</th><th>Единицы</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>§6</td><td>$Q = cm\Delta t$</td><td>Количество теплоты при нагреве/охлаждении</td><td>Дж</td></tr>
|
||
<tr><td>§6</td><td>$Q_{\text{отд}} = Q_{\text{погл}}$</td><td>Тепловой баланс (изолированная система)</td><td>Дж</td></tr>
|
||
<tr><td>§6</td><td>$c = \frac{Q}{m\Delta t}$</td><td>Удельная теплоёмкость</td><td>Дж/(кг·°C)</td></tr>
|
||
<tr><td>§7</td><td>$Q = qm$</td><td>Теплота при полном сгорании топлива</td><td>Дж</td></tr>
|
||
<tr><td>§7</td><td>$\eta = \frac{Q_\text{п}}{Q_\text{з}}\cdot100\%$</td><td>КПД нагревательного устройства</td><td>%</td></tr>
|
||
<tr><td>§9</td><td>$Q = \lambda m$</td><td>Теплота плавления/кристаллизации</td><td>Дж</td></tr>
|
||
<tr><td>§11</td><td>$Q = Lm$</td><td>Теплота парообразования/конденсации</td><td>Дж</td></tr>
|
||
<tr><td>§1–11</td><td>$\Delta U = Q + A$</td><td>Изменение внутренней энергии</td><td>Дж</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div style="margin-top:10px">
|
||
<h3>Удельные теплоёмкости <i>c</i>, Дж/(кг·°C)</h3>
|
||
<table class="ref-tbl">
|
||
<tr><td>Вода</td><td><b>4200</b></td><td>Алюминий</td><td>900</td></tr>
|
||
<tr><td>Лёд</td><td>2090</td><td>Железо</td><td>460</td></tr>
|
||
<tr><td>Медь</td><td>385</td><td>Свинец</td><td>128</td></tr>
|
||
</table>
|
||
<h3>Теплота плавления λ, кДж/кг</h3>
|
||
<table class="ref-tbl">
|
||
<tr><td>Лёд</td><td><b>333</b></td><td>Алюминий</td><td>390</td></tr>
|
||
<tr><td>Железо</td><td>270</td><td>Медь</td><td>205</td></tr>
|
||
</table>
|
||
<h3>Теплота парообразования L, кДж/кг</h3>
|
||
<table class="ref-tbl">
|
||
<tr><td>Вода</td><td><b>2260</b></td><td>Спирт</td><td>857</td></tr>
|
||
<tr><td>Ацетон</td><td>520</td><td>Ртуть</td><td>285</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Вкладка: Задачи -->
|
||
<div class="ref-tab-content" id="reftab-tasks">
|
||
<div style="font-size:.72rem;color:var(--muted);margin-bottom:10px">Быстрый переход к задачам параграфа</div>
|
||
<div style="display:flex;flex-direction:column;gap:4px">
|
||
<button class="btn btn-ghost" onclick="switchTab('tasks');setParaTab('p1');document.getElementById('refPanel').classList.remove('show')" style="font-size:.72rem;text-align:left;padding:7px 10px">§1 Внутренняя энергия</button>
|
||
<button class="btn btn-ghost" onclick="switchTab('tasks');setParaTab('p2');document.getElementById('refPanel').classList.remove('show')" style="font-size:.72rem;text-align:left;padding:7px 10px">§2 Способы изменения U</button>
|
||
<button class="btn btn-ghost" onclick="switchTab('tasks');setParaTab('p3');document.getElementById('refPanel').classList.remove('show')" style="font-size:.72rem;text-align:left;padding:7px 10px">§3 Теплопроводность</button>
|
||
<button class="btn btn-ghost" onclick="switchTab('tasks');setParaTab('p4');document.getElementById('refPanel').classList.remove('show')" style="font-size:.72rem;text-align:left;padding:7px 10px">§4 Конвекция</button>
|
||
<button class="btn btn-ghost" onclick="switchTab('tasks');setParaTab('p5');document.getElementById('refPanel').classList.remove('show')" style="font-size:.72rem;text-align:left;padding:7px 10px">§5 Излучение</button>
|
||
<button class="btn btn-ghost" onclick="switchTab('tasks');setParaTab('p6');document.getElementById('refPanel').classList.remove('show')" style="font-size:.72rem;text-align:left;padding:7px 10px">§6 Удельная теплоёмкость</button>
|
||
<button class="btn btn-ghost" onclick="switchTab('tasks');setParaTab('p7');document.getElementById('refPanel').classList.remove('show')" style="font-size:.72rem;text-align:left;padding:7px 10px">§7 Горение</button>
|
||
<button class="btn btn-ghost" onclick="switchTab('tasks');setParaTab('p8');document.getElementById('refPanel').classList.remove('show')" style="font-size:.72rem;text-align:left;padding:7px 10px">§8 Плавление</button>
|
||
<button class="btn btn-ghost" onclick="switchTab('tasks');setParaTab('p9');document.getElementById('refPanel').classList.remove('show')" style="font-size:.72rem;text-align:left;padding:7px 10px">§9 Теплота плавления</button>
|
||
<button class="btn btn-ghost" onclick="switchTab('tasks');setParaTab('p10');document.getElementById('refPanel').classList.remove('show')" style="font-size:.72rem;text-align:left;padding:7px 10px">§10 Испарение</button>
|
||
<button class="btn btn-ghost" onclick="switchTab('tasks');setParaTab('p11');document.getElementById('refPanel').classList.remove('show')" style="font-size:.72rem;text-align:left;padding:7px 10px">§11 Кипение</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Шапка -->
|
||
<div class="hdr">
|
||
<h1><i class="fas fa-fire"></i> Физика 8 — Тепловые явления</h1>
|
||
<p>Внутренняя энергия · Теплопередача · Тепловые расчёты · Фазовые переходы</p>
|
||
</div>
|
||
|
||
<!-- Двухколоночный layout -->
|
||
<div class="page-layout">
|
||
|
||
<!-- Боковая панель -->
|
||
<aside class="sidebar">
|
||
<div class="sb-brand">
|
||
<svg class="sb-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 2C8 8 5 11 5 15a7 7 0 0014 0c0-4-3-7-7-13z"/>
|
||
<path d="M9 15c0-2 1.5-3.5 3-5 1.5 1.5 3 3 3 5a3 3 0 01-6 0z" fill="currentColor" opacity=".3"/>
|
||
</svg>
|
||
<div>
|
||
<span class="sb-title">Физика 8</span>
|
||
<span class="sb-sub">Тепловые явления</span>
|
||
</div>
|
||
</div>
|
||
<nav class="sb-nav">
|
||
<button class="ch-btn active" data-tab="ref1">
|
||
|
||
<svg class="ch-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="10" cy="10" r="3" fill="currentColor" opacity=".3"/><path d="M10 4v2M10 14v2M4 10h2M14 10h2"/></svg>
|
||
<span class="ch-num">§1</span>
|
||
<span class="ch-label">Внутренняя энергия</span>
|
||
<span class="ch-count">7</span>
|
||
</button>
|
||
<button class="ch-btn" data-tab="ref2">
|
||
|
||
<svg class="ch-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 16l4-8 4 8"/><path d="M14 8c1.5 0 3 1 3 4s-1.5 4-3 4"/></svg>
|
||
<span class="ch-num">§2</span>
|
||
<span class="ch-label">Изменение энергии</span>
|
||
<span class="ch-count">6</span>
|
||
</button>
|
||
<button class="ch-btn" data-tab="ref3">
|
||
|
||
<svg class="ch-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 10h14"/><circle cx="6" cy="10" r="2.5"/><circle cx="14" cy="10" r="2.5"/></svg>
|
||
<span class="ch-num">§3</span>
|
||
<span class="ch-label">Теплопроводность</span>
|
||
<span class="ch-count">6</span>
|
||
</button>
|
||
<button class="ch-btn" data-tab="ref4">
|
||
|
||
<svg class="ch-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M10 16V8"/><path d="M6 12l4-8 4 8"/><path d="M5 17h10"/></svg>
|
||
<span class="ch-num">§4</span>
|
||
<span class="ch-label">Конвекция</span>
|
||
<span class="ch-count">5</span>
|
||
</button>
|
||
<button class="ch-btn" data-tab="ref5">
|
||
|
||
<svg class="ch-icon" 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 3v1.5M10 15.5V17M3 10h1.5M15.5 10H17M5.6 5.6l1 1M13.4 13.4l1 1M14.4 5.6l-1 1M6.6 13.4l-1 1"/></svg>
|
||
<span class="ch-num">§5</span>
|
||
<span class="ch-label">Излучение</span>
|
||
<span class="ch-count">5</span>
|
||
</button>
|
||
<div class="sb-divider"></div>
|
||
<button class="ch-btn" data-tab="ref6">
|
||
|
||
<svg class="ch-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><rect x="3" y="12" width="14" height="5" rx="2"/><path d="M7 12V7a3 3 0 016 0v5"/></svg>
|
||
<span class="ch-num">§6</span>
|
||
<span class="ch-label">Удельная теплоёмкость</span>
|
||
<span class="ch-count">8</span>
|
||
</button>
|
||
<button class="ch-btn" data-tab="ref7">
|
||
|
||
<svg class="ch-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M10 17V6"/><path d="M6 10c0-3 4-7 4-7s4 4 4 7a4 4 0 01-8 0z" fill="currentColor" opacity=".25"/></svg>
|
||
<span class="ch-num">§7</span>
|
||
<span class="ch-label">Теплота сгорания</span>
|
||
<span class="ch-count">6</span>
|
||
</button>
|
||
<button class="ch-btn" data-tab="ref8">
|
||
|
||
<svg class="ch-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 10 Q7 4 10 10 Q13 16 16 10"/><path d="M4 14h12"/></svg>
|
||
<span class="ch-num">§8</span>
|
||
<span class="ch-label">Плавление</span>
|
||
<span class="ch-count">6</span>
|
||
</button>
|
||
<button class="ch-btn" data-tab="ref9">
|
||
|
||
<svg class="ch-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M10 17a5 5 0 000-10"/><path d="M10 7V3M7 4.5l3-2 3 2"/></svg>
|
||
<span class="ch-num">§9</span>
|
||
<span class="ch-label">Теплота плавления</span>
|
||
<span class="ch-count">6</span>
|
||
</button>
|
||
<div class="sb-divider"></div>
|
||
<button class="ch-btn" data-tab="ref10">
|
||
|
||
<svg class="ch-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 14 Q8 6 12 10 Q16 14 18 8"/><circle cx="12" cy="10" r="1.5" fill="currentColor"/></svg>
|
||
<span class="ch-num">§10</span>
|
||
<span class="ch-label">Испарение</span>
|
||
<span class="ch-count">5</span>
|
||
</button>
|
||
<button class="ch-btn" data-tab="ref11">
|
||
|
||
<svg class="ch-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 15 Q7 8 10 12 Q13 8 15 15"/><path d="M3 17h14"/><path d="M10 8V4"/></svg>
|
||
<span class="ch-num">§11</span>
|
||
<span class="ch-label">Кипение</span>
|
||
<span class="ch-count">7</span>
|
||
</button>
|
||
<div class="sb-divider"></div>
|
||
<button class="ch-btn" data-tab="tasks">
|
||
<svg class="ch-icon" 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 class="ch-num" style="font-size:.85rem">📝</span>
|
||
<span class="ch-label">Задачи</span>
|
||
</button>
|
||
</nav>
|
||
</aside><!-- /.sidebar -->
|
||
|
||
<!-- Главная колонка -->
|
||
<main class="main-col">
|
||
<div class="content-area">
|
||
|
||
<!-- §1 -->
|
||
<div class="content active" id="tab-ref1">
|
||
<div class="para-hero ph-1">
|
||
<div class="ph-label">§1 · Физика 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">🌡 зависит от T и агр. состояния</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-atom"></i> §1. Внутренняя энергия тела</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">температура · вещество · агрегатное состояние</div>
|
||
<p>↑ Температура → растёт скорость молекул → растёт внутренняя энергия.</p>
|
||
<p>Тв.→жид.→газ → растёт (даже при той же температуре!).</p>
|
||
<p><b>Не зависит</b> от скорости и высоты тела как целого.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="idiag-2col">
|
||
<div class="idiag">
|
||
<h3>📌 Три агрегатных состояния</h3>
|
||
<svg width="100%" viewBox="0 0 200 90" style="display:block">
|
||
<text x="30" y="12" font-size="8" text-anchor="middle" fill="#64748b" font-family="sans-serif">Твёрдое</text>
|
||
<circle cx="16" cy="30" r="5" fill="#93c5fd" stroke="#1d4ed8" stroke-width="1"/>
|
||
<circle cx="30" cy="30" r="5" fill="#93c5fd" stroke="#1d4ed8" stroke-width="1"/>
|
||
<circle cx="44" cy="30" r="5" fill="#93c5fd" stroke="#1d4ed8" stroke-width="1"/>
|
||
<circle cx="16" cy="44" r="5" fill="#93c5fd" stroke="#1d4ed8" stroke-width="1"/>
|
||
<circle cx="30" cy="44" r="5" fill="#93c5fd" stroke="#1d4ed8" stroke-width="1"/>
|
||
<circle cx="44" cy="44" r="5" fill="#93c5fd" stroke="#1d4ed8" stroke-width="1"/>
|
||
<line x1="16" y1="30" x2="44" y2="30" stroke="#93c5fd" stroke-width="1"/>
|
||
<line x1="16" y1="44" x2="44" y2="44" stroke="#93c5fd" stroke-width="1"/>
|
||
<line x1="16" y1="30" x2="16" y2="44" stroke="#93c5fd" stroke-width="1"/>
|
||
<line x1="30" y1="30" x2="30" y2="44" stroke="#93c5fd" stroke-width="1"/>
|
||
<line x1="44" y1="30" x2="44" y2="44" stroke="#93c5fd" stroke-width="1"/>
|
||
<text x="30" y="70" font-size="7" text-anchor="middle" fill="#1d4ed8" font-family="sans-serif">низкая</text>
|
||
<text x="100" y="12" font-size="8" text-anchor="middle" fill="#64748b" font-family="sans-serif">Жидкое</text>
|
||
<circle cx="88" cy="30" r="5" fill="#6ee7b7" stroke="#059669" stroke-width="1"/>
|
||
<circle cx="104" cy="28" r="5" fill="#6ee7b7" stroke="#059669" stroke-width="1"/>
|
||
<circle cx="116" cy="35" r="5" fill="#6ee7b7" stroke="#059669" stroke-width="1"/>
|
||
<circle cx="92" cy="45" r="5" fill="#6ee7b7" stroke="#059669" stroke-width="1"/>
|
||
<circle cx="108" cy="43" r="5" fill="#6ee7b7" stroke="#059669" stroke-width="1"/>
|
||
<text x="100" y="70" font-size="7" text-anchor="middle" fill="#059669" font-family="sans-serif">средняя</text>
|
||
<text x="170" y="12" font-size="8" text-anchor="middle" fill="#64748b" font-family="sans-serif">Газ</text>
|
||
<circle cx="155" cy="25" r="4" fill="#fca5a5" stroke="#dc2626" stroke-width="1"/>
|
||
<circle cx="175" cy="40" r="4" fill="#fca5a5" stroke="#dc2626" stroke-width="1"/>
|
||
<circle cx="162" cy="50" r="4" fill="#fca5a5" stroke="#dc2626" stroke-width="1"/>
|
||
<circle cx="183" cy="25" r="4" fill="#fca5a5" stroke="#dc2626" stroke-width="1"/>
|
||
<text x="170" y="70" font-size="7" text-anchor="middle" fill="#dc2626" font-family="sans-serif">высокая</text>
|
||
</svg>
|
||
</div>
|
||
<div class="idiag">
|
||
<h3>💡 Пример</h3>
|
||
<p style="font-size:.84rem;line-height:1.75">Камень, лежащий на земле, <b>не имеет</b> механической энергии ($v=0$, $h=0$).<br>Но его молекулы всё равно движутся и взаимодействуют — <b>внутренняя энергия есть всегда</b>.</p>
|
||
<p style="font-size:.84rem;line-height:1.75;margin-top:8px">При нагреве воды её молекулы движутся быстрее — внутренняя энергия растёт. При охлаждении — молекулы замедляются, внутренняя энергия уменьшается.</p>
|
||
</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>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="mistakes-box">
|
||
<div class="mistakes-box-title"><i class="fas fa-triangle-exclamation"></i> Частые ошибки</div>
|
||
<ul>
|
||
<li>Путают «тело не имеет механической энергии» с «внутренняя энергия = 0».</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">v=0, h=0 — нет механической, но молекулы движутся → внутренняя энергия есть</div></div>
|
||
<div class="life-item"><div class="li-icon">🧊</div><div class="li-title">Лёд при -10°C</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">Высокая 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="student-box">
|
||
<div class="student-box-title">💬 Объяснение простыми словами</div>
|
||
<p>Представь, что молекулы — крошечные шарики, которые <b>никогда не стоят на месте</b>. Они прыгают, вращаются, сталкиваются — даже в самом холодном веществе. Сумма всей их энергии и есть <b>внутренняя энергия тела</b>.</p>
|
||
<p>Нагрел тело — молекулы разогнались → внутренняя энергия выросла. Охладил — замедлились → уменьшилась. Но никогда не стала нулём!</p>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Молекулярное движение</div>
|
||
<div class="idiag">
|
||
<h3>🎚️ Меняй температуру и агрегатное состояние</h3>
|
||
<canvas id="cv1" style="width:100%;height:220px;border-radius:12px;background:#1e1b4b;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:200px">
|
||
<span class="slider-lbl">🌡 Температура:</span>
|
||
<input type="range" id="sl1T" min="0" max="200" value="20" style="flex:1;min-width:100px" oninput="lbl1T.textContent=this.value;sl1Tval=+this.value;upd1ChipE();">
|
||
<span class="slider-val"><span id="lbl1T">20</span>°C</span>
|
||
</div>
|
||
<div style="display:flex;gap:8px">
|
||
<button class="btn btn-ghost" id="btn1solid" onclick="setState1('solid')">🔷 Твёрдое</button>
|
||
<button class="btn btn-ghost" id="btn1liq" onclick="setState1('liquid')">💧 Жидкое</button>
|
||
<button class="btn btn-ghost" id="btn1gas" onclick="setState1('gas')">💨 Газ</button>
|
||
</div>
|
||
</div>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center">
|
||
<span class="slider-lbl">🧪 Вещество:</span>
|
||
<button class="btn btn-ghost" id="btn1subH2O" onclick="setSubst1('H2O')" style="font-size:.72rem;padding:6px 11px">💧 H₂O</button>
|
||
<button class="btn btn-ghost" id="btn1subFe" onclick="setSubst1('Fe')" style="font-size:.72rem;padding:6px 11px">⚙️ Fe</button>
|
||
<button class="btn btn-ghost" id="btn1subAr" onclick="setSubst1('Ar')" style="font-size:.72rem;padding:6px 11px">⚛️ Ar</button>
|
||
<span style="margin-left:auto;font-size:.72rem;color:var(--muted)"><span class="val-chip" id="chipKE1">⟨Eₖ⟩ ~ 0</span></span>
|
||
</div>
|
||
<p style="font-size:.78rem;color:var(--muted);margin-top:8px">Цвет атомов отражает их скорость по Максвелл-Больцману: синие — медленные, красные — быстрые. В газе работают упругие столкновения. Каждое вещество имеет свою массу и температуры фазовых переходов — попробуй сравнить!</p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §1</div>
|
||
<ul class="key-points-list">
|
||
<li>Внутренняя энергия — сумма кинетической и потенциальной энергий всех молекул тела, она есть всегда (даже у холодного тела).</li>
|
||
<li>Внутренняя энергия растёт при нагреве и при переходе тв.→жид.→газ (даже при той же температуре).</li>
|
||
<li>Внутренняя энергия не зависит от скорости и высоты тела как целого — это не то же самое, что механическая энергия.</li>
|
||
<li>Единица внутренней энергии — джоуль (Дж).</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §2 -->
|
||
<div class="content" id="tab-ref2">
|
||
<div class="para-hero ph-2">
|
||
<div class="ph-label">§2 · Физика 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">⚡ Q — количество теплоты, Дж</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-bolt"></i> §2. Способы изменения внутренней энергии</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>1. Совершение механической работы</h3>
|
||
<div class="main-f" style="font-size:.85rem">трение · сжатие · удар</div>
|
||
<p>Трение (пиление, сверление), сжатие газа поршнем, удар — внутренняя энергия тела увеличивается.</p>
|
||
<p>Молекулы разгоняются → температура растёт.</p>
|
||
<p><b>Пример:</b> натирание рук, нагрев воздуха в насосе при накачивании шины.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>2. Теплопередача (теплообмен)</h3>
|
||
<div class="main-f" style="font-size:.85rem">передача без работы</div>
|
||
<p>Изменение внутренней энергии тела без совершения механической работы.</p>
|
||
<p><b>Количество теплоты Q</b> — величина, равная изменению внутренней энергии при теплообмене. Единица: <b>Дж</b>.</p>
|
||
<p><b>Пример:</b> нагрев воды в чайнике, охлаждение тела в холодильнике.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li><b>Работа:</b> молекулы разгоняются внешней силой → T растёт.</li>
|
||
<li><b>Теплообмен:</b> быстрые молекулы передают энергию медленным при контакте.</li>
|
||
<li>Оба способа изменяют внутреннюю энергию — результат одинаков, пути разные.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📊 Два способа изменения внутренней энергии</h3>
|
||
<svg viewBox="0 0 320 130" width="100%" style="display:block;margin:4px 0">
|
||
<!-- Блок 1: Работа -->
|
||
<rect x="4" y="8" width="148" height="114" rx="12" fill="rgba(220,38,38,.06)" stroke="rgba(220,38,38,.35)" stroke-width="1.5"/>
|
||
<text x="78" y="25" text-anchor="middle" font-size="9.5" font-weight="bold" fill="#dc2626" font-family="sans-serif">Механическая работа</text>
|
||
<rect x="20" y="55" width="60" height="36" rx="5" fill="rgba(220,38,38,.15)" stroke="#dc2626" stroke-width="1.5"/>
|
||
<text x="50" y="77" text-anchor="middle" font-size="8" fill="#dc2626" font-family="sans-serif">Газ</text>
|
||
<rect x="16" y="48" width="68" height="9" rx="3" fill="#dc2626"/>
|
||
<text x="52" y="44" text-anchor="middle" font-size="7" fill="#dc2626" font-family="sans-serif">↓ поршень давит</text>
|
||
<text x="100" y="62" font-size="7.5" fill="#64748b" font-family="sans-serif">• трение</text>
|
||
<text x="100" y="74" font-size="7.5" fill="#64748b" font-family="sans-serif">• сжатие газа</text>
|
||
<text x="100" y="86" font-size="7.5" fill="#64748b" font-family="sans-serif">• удар</text>
|
||
<text x="78" y="112" text-anchor="middle" font-size="7" fill="#dc2626" font-family="sans-serif">внешняя сила → молекулы↑</text>
|
||
<!-- Блок 2: Теплообмен -->
|
||
<rect x="168" y="8" width="148" height="114" rx="12" fill="rgba(14,165,233,.06)" stroke="rgba(14,165,233,.4)" stroke-width="1.5"/>
|
||
<text x="242" y="25" text-anchor="middle" font-size="9.5" font-weight="bold" fill="#0369a1" font-family="sans-serif">Теплопередача</text>
|
||
<circle cx="200" cy="73" r="22" fill="rgba(239,68,68,.12)" stroke="#ef4444" stroke-width="1.5"/>
|
||
<text x="200" y="77" text-anchor="middle" font-size="7.5" fill="#ef4444" font-family="sans-serif">горячее</text>
|
||
<line x1="225" y1="73" x2="248" y2="73" stroke="#f97316" stroke-width="2"/>
|
||
<polygon points="249,73 244,70 244,76" fill="#f97316"/>
|
||
<circle cx="268" cy="73" r="18" fill="rgba(59,130,246,.12)" stroke="#3b82f6" stroke-width="1.5"/>
|
||
<text x="268" y="77" text-anchor="middle" font-size="7.5" fill="#3b82f6" font-family="sans-serif">холод.</text>
|
||
<text x="242" y="112" text-anchor="middle" font-size="7" fill="#0369a1" font-family="sans-serif">без внешней силы · Q = Дж</text>
|
||
</svg>
|
||
</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>🔨 Работа vs 🌡 Теплообмен</h3>
|
||
<canvas id="cv2" style="width:100%;height:220px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center">
|
||
<button class="btn btn-pri" id="btn2work" onclick="startWork2()">🔨 Сжать газ (работа)</button>
|
||
<button class="btn btn-ghost" id="btn2heat" onclick="startHeat2()">🌡 Нагреть снаружи (теплообмен)</button>
|
||
<button class="btn btn-ghost" onclick="reset2()">↺ Сброс</button>
|
||
</div>
|
||
<p style="font-size:.78rem;color:var(--muted);margin-top:8px">Слева — сжатие поршнем (механическая работа). Справа — нагрев стенки (теплопередача). Оба способа увеличивают внутреннюю энергию газа.</p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §2</div>
|
||
<ul class="key-points-list">
|
||
<li>Изменить внутреннюю энергию можно двумя способами: совершив механическую работу или через теплопередачу.</li>
|
||
<li>Механическая работа: трение, сжатие, удар — молекулы разгоняются внешней силой.</li>
|
||
<li>Теплопередача: быстрые молекулы передают энергию медленным при контакте — без приложения внешней силы.</li>
|
||
<li>Количество теплоты Q — величина изменения внутренней энергии при теплообмене; единица — Дж.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §3 -->
|
||
<div class="content" id="tab-ref3">
|
||
<div class="para-hero ph-3">
|
||
<div class="ph-label">§3 · Физика 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-fire-flame-curved"></i> §3. Теплопроводность</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Механизм</h3>
|
||
<div class="main-f">столкновения молекул</div>
|
||
<p>Тепло передаётся через столкновения молекул от горячих к холодным участкам. <b>Перенос вещества не происходит.</b></p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Сравнение материалов</h3>
|
||
<div class="main-f">Металлы ≫ Стекло ≫ Дерево ≫ Газы</div>
|
||
<p>Металлы: свободные электроны переносят энергию быстро. Газы: молекулы редко сталкиваются → плохие проводники.</p>
|
||
<p>В <b>вакууме</b> теплопроводность невозможна.</p>
|
||
</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> (молекулы редко сталкиваются). Воздух — теплоизолятор.</li>
|
||
<li>Процесс продолжается до <b>выравнивания температур</b> по всему телу.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📊 Сравнение теплопроводности материалов</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:.8rem">
|
||
<thead><tr style="background:rgba(220,38,38,.08)"><th style="padding:6px 8px;text-align:left;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;color:#dc2626;font-weight:700">★★★★★</td><td style="padding:5px 8px;border:1px solid var(--border)">Радиаторы, кастрюли</td></tr>
|
||
<tr style="background:rgba(220,38,38,.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;color:#dc2626;font-weight:700">★★★★☆</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;color:#0369a1;font-weight:700">★★☆☆☆</td><td style="padding:5px 8px;border:1px solid var(--border)">Ручки посуды, мебель</td></tr>
|
||
<tr style="background:rgba(220,38,38,.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;color:#059669;font-weight:700">★☆☆☆☆</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;color:#059669;font-weight:700">✗ нет</td><td style="padding:5px 8px;border:1px solid var(--border)">Термос (двойные стенки)</td></tr>
|
||
</table>
|
||
</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="cv3" style="width:100%;height:180px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:200px">
|
||
<span class="slider-lbl">Материал:</span>
|
||
<select id="sel3mat" onchange="upd3()" style="padding:6px 10px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text);font-size:.85rem">
|
||
<option value="0.95">🟤 Медь (высокая)</option>
|
||
<option value="0.6">⚙️ Алюминий (хорошая)</option>
|
||
<option value="0.3">🔩 Сталь (средняя)</option>
|
||
<option value="0.08">🪵 Дерево (низкая)</option>
|
||
<option value="0.02">🫧 Воздух (очень низкая)</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-pri" onclick="runAnim3()">▶ Запустить нагрев</button>
|
||
<button class="btn btn-ghost" onclick="resetAnim3()">↺ Сброс</button>
|
||
</div>
|
||
<p style="font-size:.78rem;color:var(--muted);margin-top:8px">Левый конец стержня нагревается (красный). Тепловая волна распространяется вправо. Скорость зависит от материала.</p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §3</div>
|
||
<ul class="key-points-list">
|
||
<li>Теплопроводность — передача тепла от молекулы к молекуле без переноса вещества (через столкновения).</li>
|
||
<li>Металлы — лучшие проводники (свободные электроны), газы — плохие (молекулы редко сталкиваются).</li>
|
||
<li>В вакууме теплопроводность невозможна — нет молекул.</li>
|
||
<li>Теплообмен идёт до выравнивания температур по всему телу.</li>
|
||
<li>Практика: металлическая ложка нагревается в чае, деревянная ручка остаётся холодной.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §4 -->
|
||
<div class="content" id="tab-ref4">
|
||
<div class="para-hero ph-4">
|
||
<div class="ph-label">§4 · Физика 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-water"></i> §4. Конвекция</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Механизм конвекции</h3>
|
||
<div class="main-f">нагрев → ↑плотность↓ → поток</div>
|
||
<p>Нагретые слои жидкости/газа становятся <b>менее плотными</b> → поднимаются вверх. Холодные — опускаются вниз.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Виды конвекции</h3>
|
||
<div class="main-f">естественная / принудительная</div>
|
||
<p><b>Естественная:</b> от разности плотностей (батарея, бриз).</p>
|
||
<p><b>Принудительная:</b> насос, вентилятор.</p>
|
||
<p>В <b>твёрдых телах</b> — невозможна.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Тёплые слои — <b>вверх</b>, холодные — <b>вниз</b> → циркуляция.</li>
|
||
<li>В твёрдых телах конвекции нет — молекулы не могут свободно перемещаться.</li>
|
||
<li>Примеры: батарея отопления, морские бризы, конвекция в кипящей воде.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>🌀 Схема конвекционного потока</h3>
|
||
<svg viewBox="0 0 280 130" width="100%" style="display:block">
|
||
<!-- Container -->
|
||
<rect x="20" y="10" width="240" height="100" rx="8" fill="rgba(8,145,178,.06)" stroke="#0891b2" stroke-width="1.5"/>
|
||
<!-- Hot bottom -->
|
||
<rect x="20" y="100" width="240" height="10" rx="0" fill="rgba(239,68,68,.4)"/>
|
||
<text x="140" y="122" text-anchor="middle" font-size="8" fill="#dc2626" font-family="sans-serif">🔥 Нагреватель</text>
|
||
<!-- Upward hot flow (left) -->
|
||
<line x1="60" y1="95" x2="60" y2="25" stroke="#ef4444" stroke-width="2" stroke-dasharray="4,2"/>
|
||
<polygon points="60,22 56,30 64,30" fill="#ef4444"/>
|
||
<text x="40" y="55" font-size="7.5" fill="#ef4444" font-family="sans-serif">горячее</text>
|
||
<text x="40" y="65" font-size="7.5" fill="#ef4444" font-family="sans-serif">подним.</text>
|
||
<!-- Top horizontal -->
|
||
<line x1="60" y1="25" x2="220" y2="25" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4,2"/>
|
||
<polygon points="223,25 216,22 216,28" fill="#94a3b8"/>
|
||
<!-- Downward cold flow (right) -->
|
||
<line x1="220" y1="25" x2="220" y2="95" stroke="#3b82f6" stroke-width="2" stroke-dasharray="4,2"/>
|
||
<polygon points="220,97 216,89 224,89" fill="#3b82f6"/>
|
||
<text x="230" y="55" font-size="7.5" fill="#3b82f6" font-family="sans-serif">холодное</text>
|
||
<text x="230" y="65" font-size="7.5" fill="#3b82f6" font-family="sans-serif">опускается</text>
|
||
<!-- Bottom horizontal -->
|
||
<line x1="220" y1="95" x2="60" y2="95" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4,2"/>
|
||
<polygon points="57,95 64,92 64,98" fill="#94a3b8"/>
|
||
<!-- Center label -->
|
||
<text x="140" y="60" text-anchor="middle" font-size="8.5" fill="#0891b2" font-family="sans-serif" font-weight="bold">циркуляция</text>
|
||
<circle cx="140" cy="70" r="4" fill="#0891b2" opacity="0.4"/>
|
||
</svg>
|
||
</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>
|
||
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px">
|
||
<button class="btn btn-ghost" id="btn4mCond" onclick="setMode4('cond')" style="font-size:.74rem;padding:7px 12px">📏 Теплопроводность</button>
|
||
<button class="btn btn-ghost" id="btn4mConv" onclick="setMode4('conv')" style="font-size:.74rem;padding:7px 12px">🌪️ Конвекция</button>
|
||
<button class="btn btn-ghost" id="btn4mRad" onclick="setMode4('rad')" style="font-size:.74rem;padding:7px 12px">📡 Излучение</button>
|
||
</div>
|
||
<canvas id="cv4" style="width:100%;height:260px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:200px">
|
||
<span class="slider-lbl">🔥 Мощность:</span>
|
||
<input type="range" id="sl4p" min="10" max="100" value="50" style="flex:1;min-width:100px" oninput="lbl4p.textContent=this.value;sl4pval=+this.value;">
|
||
<span class="slider-val"><span id="lbl4p">50</span>%</span>
|
||
</div>
|
||
<span class="val-chip" id="chip4info">конвекция · 50%</span>
|
||
</div>
|
||
<p class="cv-cap" id="cap4"><i class="fas fa-info-circle"></i><span>Нагретые частицы (красные) у дна поднимаются вверх, охлаждаются и опускаются — циркуляция переносит тепло вместе с веществом.</span></p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §4</div>
|
||
<ul class="key-points-list">
|
||
<li>Конвекция — теплопередача потоками жидкости или газа: тёплые слои поднимаются, холодные опускаются.</li>
|
||
<li>В твёрдых телах конвекция невозможна — молекулы не могут свободно перемещаться.</li>
|
||
<li>Естественная конвекция — за счёт разности плотностей; принудительная — насос или вентилятор.</li>
|
||
<li>Примеры: батарея отопления, морской бриз, кипение воды в кастрюле.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §5 -->
|
||
<div class="content" id="tab-ref5">
|
||
<div class="para-hero ph-5">
|
||
<div class="ph-label">§5 · Физика 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-sun"></i> §5. Излучение</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Тепловое излучение</h3>
|
||
<div class="main-f">ЭМ-волны → вакуум ✓</div>
|
||
<p>Любое тело с T > 0 К испускает электромагнитные волны. <b>Не требует среды</b> — работает в вакууме.</p>
|
||
<p>Чем выше T — тем интенсивнее излучение.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Поглощение и отражение</h3>
|
||
<div class="main-f">⚫ поглощает ≫ ⚪ отражает</div>
|
||
<p><b>Тёмные матовые:</b> лучший поглотитель и излучатель.</p>
|
||
<p><b>Светлые блестящие:</b> хуже поглощают, лучше отражают.</p>
|
||
<p>Примеры: термос, солнечный нагрев Земли, тепловизор.</p>
|
||
</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>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📊 Поглощение и излучение разных поверхностей</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:.8rem">
|
||
<thead><tr style="background:rgba(220,38,38,.08)"><th style="padding:6px 8px;text-align:left;border:1px solid var(--border)">Поверхность</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;color:#dc2626;font-weight:700">★★★★★</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;color:#dc2626;font-weight:700">★★★★★</td><td style="padding:5px 8px;border:1px solid var(--border)">Солнечные коллекторы</td></tr>
|
||
<tr style="background:rgba(220,38,38,.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;color:#0369a1;font-weight:700">★★☆☆☆</td><td style="padding:5px 8px;border:1px solid var(--border);text-align:center;color:#0369a1;font-weight:700">★★☆☆☆</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;color:#059669;font-weight:700">★☆☆☆☆</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)">Термос, скафандр</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="insight-box">
|
||
<div class="insight-title"><i class="fas fa-lightbulb"></i> Интересный факт</div>
|
||
<p>Тепловизор «видит» именно тепловое излучение. Именно поэтому в темноте можно обнаружить тёплый предмет — он сам светится в инфракрасном диапазоне. Тело человека излучает так же, как электрическая плитка мощностью около 100 Вт!</p>
|
||
</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="cv5" style="width:100%;height:240px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center">
|
||
<div class="slider-row" style="flex:1;min-width:200px">
|
||
<span class="slider-lbl">🌡 T источника:</span>
|
||
<input type="range" id="sl5T" min="100" max="1000" value="500" style="flex:1;min-width:100px" oninput="lbl5T.textContent=this.value;sl5Tval=+this.value;upd5();">
|
||
<span class="slider-val"><span id="lbl5T">500</span>°C</span>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:.78rem;color:var(--muted);margin-top:8px">Источник тепла слева испускает волны. Три поверхности (чёрная / серая / серебристая) поглощают их с разной эффективностью и нагреваются.</p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §5</div>
|
||
<ul class="key-points-list">
|
||
<li>Излучение — передача тепла электромагнитными волнами, не требует вещества — работает в вакууме.</li>
|
||
<li>Любое тело с температурой выше 0 К испускает тепловое излучение; чем выше T, тем интенсивнее.</li>
|
||
<li>Тёмная матовая поверхность — лучший поглотитель и излучатель; светлая блестящая — хуже поглощает, лучше отражает.</li>
|
||
<li>Тело нагревается, если поглощает больше, чем излучает; охлаждается — если наоборот.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §6 -->
|
||
<div class="content" id="tab-ref6">
|
||
<div class="para-hero ph-6">
|
||
<div class="ph-label">§6 · Физика 8 кл</div>
|
||
<h2>Расчёт количества теплоты. Удельная теплоёмкость</h2>
|
||
<div class="ph-formula">$Q = cm\Delta t$</div>
|
||
<div class="ph-desc">Количество теплоты прямо пропорционально массе и изменению температуры. Коэффициент c зависит от вещества.</div>
|
||
<div class="ph-tags">
|
||
<span class="ph-tag">📐 [c] = Дж/(кг·°C)</span>
|
||
<span class="ph-tag">💧 c(воды) = 4200</span>
|
||
<span class="ph-tag">⚖️ тепловой баланс</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-calculator"></i> §6. Удельная теплоёмкость</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Основная формула</h3>
|
||
<div class="main-f">$Q = cm(t_2 - t_1)$</div>
|
||
<p>$c$ — удельная теплоёмкость [Дж/(кг·°C)], $m$ — масса [кг], $\Delta t$ — изменение температуры [°C].</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Тепловой баланс</h3>
|
||
<div class="main-f">$Q_{\text{отд}} = Q_{\text{погл}}$</div>
|
||
<p>$Q \propto m$ и $Q \propto \Delta t$. Вода: $c = 4200$ — самая большая среди обычных жидкостей.</p>
|
||
<p>Тепловой баланс: отданная теплота = поглощённой.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>$c$ — свойство <b>вещества</b>, не тела. У воды оно наибольшее.</li>
|
||
<li>При остывании $Q$ отрицательное (или пишут $Q = cm(t_1 - t_2)$).</li>
|
||
<li>Тепловой баланс работает только в <b>изолированной</b> системе.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📐 Пример решения: тепловой баланс</h3>
|
||
<p style="font-size:.83rem;font-weight:600;margin-bottom:10px">Задача: В стакан воды $m_2 = 2{,}0$ кг при $t_1 = 20$°C бросили стальной брусок $m_1 = 1{,}0$ кг при $t_2 = 95$°C. Найти установившуюся температуру.</p>
|
||
<ol class="sol-steps">
|
||
<li><span class="step-n">1</span><span>Записываем тепловой баланс: $Q_\text{отд} = Q_\text{погл}$<br>Теплота, отданная бруском = теплота, поглощённой водой</span></li>
|
||
<li><span class="step-n">2</span><span>$Q_\text{бр} = c_\text{ст} \cdot m_1 \cdot (t_2 - t) = 460 \times 1{,}0 \times (95 - t)$</span></li>
|
||
<li><span class="step-n">3</span><span>$Q_\text{вода} = c_\text{в} \cdot m_2 \cdot (t - t_1) = 4200 \times 2{,}0 \times (t - 20)$</span></li>
|
||
<li><span class="step-n">4</span><span>Приравниваем: $460(95-t) = 8400(t-20)$<br>$43700 - 460t = 8400t - 168000$<br>$211700 = 8860t$ → $t \approx 23{,}9$°C</span></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="insight-box">
|
||
<div class="insight-title"><i class="fas fa-lightbulb"></i> Почему вода «особенная»?</div>
|
||
<p>Удельная теплоёмкость воды $c = 4200$ Дж/(кг·°C) — одна из самых высоких. Это значит, что для нагрева 1 кг воды на 1°C нужно <b>в 10 раз больше теплоты</b>, чем для нагрева 1 кг железа. Поэтому море медленно нагревается летом и медленно остывает зимой — оно «хранит» тепло!</p>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Калориметр Pro Max</div>
|
||
<div class="idiag">
|
||
<h3>⚖️ Смешай два тела разных веществ</h3>
|
||
<canvas id="cv6" style="width:100%;height:220px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;align-items:flex-start">
|
||
<div style="display:flex;flex-direction:column;gap:6px;flex:1;min-width:200px;padding:10px;background:rgba(239,68,68,.06);border-radius:10px;border:1px solid rgba(239,68,68,.2)">
|
||
<div style="font-weight:700;color:#dc2626;font-size:.78rem;margin-bottom:4px">🔥 Горячее тело</div>
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">Вещество:</span>
|
||
<select id="sel6mat1" onchange="upd6()" style="flex:1;padding:5px 8px;border-radius:7px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-size:.8rem">
|
||
<option value="4200">💧 Вода (4200)</option>
|
||
<option value="460">⚙️ Железо (460)</option>
|
||
<option value="2100">🛢️ Масло (2100)</option>
|
||
<option value="900">⚪ Алюминий (900)</option>
|
||
<option value="385">🟫 Медь (385)</option>
|
||
</select>
|
||
</div>
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">m₁, кг:</span>
|
||
<input type="range" id="sl6m1" min="0.1" max="3" step="0.1" value="1" style="flex:1" oninput="lbl6m1.textContent=this.value;upd6();">
|
||
<span class="slider-val"><span id="lbl6m1">1</span></span>
|
||
</div>
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">T₁:</span>
|
||
<input type="range" id="sl6t1" min="40" max="100" value="80" style="flex:1" oninput="lbl6t1.textContent=this.value;upd6();">
|
||
<span class="slider-val"><span id="lbl6t1">80</span>°C</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:6px;flex:1;min-width:200px;padding:10px;background:rgba(59,130,246,.06);border-radius:10px;border:1px solid rgba(59,130,246,.2)">
|
||
<div style="font-weight:700;color:#2563eb;font-size:.78rem;margin-bottom:4px">❄️ Холодное тело</div>
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">Вещество:</span>
|
||
<select id="sel6mat2" onchange="upd6()" style="flex:1;padding:5px 8px;border-radius:7px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-size:.8rem">
|
||
<option value="4200">💧 Вода (4200)</option>
|
||
<option value="460">⚙️ Железо (460)</option>
|
||
<option value="2100">🛢️ Масло (2100)</option>
|
||
<option value="900">⚪ Алюминий (900)</option>
|
||
<option value="385">🟫 Медь (385)</option>
|
||
</select>
|
||
</div>
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">m₂, кг:</span>
|
||
<input type="range" id="sl6m2" min="0.1" max="3" step="0.1" value="1" style="flex:1" oninput="lbl6m2.textContent=this.value;upd6();">
|
||
<span class="slider-val"><span id="lbl6m2">1</span></span>
|
||
</div>
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">T₂:</span>
|
||
<input type="range" id="sl6t2" min="0" max="40" value="20" style="flex:1" oninput="lbl6t2.textContent=this.value;upd6();">
|
||
<span class="slider-val"><span id="lbl6t2">20</span>°C</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="cv6result" class="idiag-result" style="text-align:left;font-size:.83rem;line-height:1.7">T_смеси: —</div>
|
||
<p class="cv-cap"><i class="fas fa-info-circle"></i><span>Уравнение теплового баланса: $c_1 m_1 (T_1 - T) = c_2 m_2 (T - T_2)$. Поэкспериментируй с разными веществами — увидишь, как масло остывает медленнее воды, а металлы — намного быстрее.</span></p>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §6</div>
|
||
<ul class="key-points-list">
|
||
<li>Количество теплоты при нагреве/охлаждении: $Q = cm\Delta t$, где $c$ — удельная теплоёмкость [Дж/(кг·°C)].</li>
|
||
<li>Удельная теплоёмкость — свойство вещества: у воды $c = 4200$ — самое высокое из обычных жидкостей.</li>
|
||
<li>Тепловой баланс: $Q_\text{отд} = Q_\text{погл}$ — работает только в изолированной системе.</li>
|
||
<li>При остывании $\Delta t$ отрицательное — Q получается отрицательным или записывают $Q = cm(t_1 - t_2)$.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §7 -->
|
||
<div class="content" id="tab-ref7">
|
||
<div class="para-hero ph-7">
|
||
<div class="ph-label">§7 · Физика 8 кл</div>
|
||
<h2>Горение. Удельная теплота сгорания топлива</h2>
|
||
<div class="ph-formula">$Q = qm$</div>
|
||
<div class="ph-desc">При полном сгорании топлива выделяется $Q = qm$. Удельная теплота сгорания $q$ зависит только от вида топлива.</div>
|
||
<div class="ph-tags">
|
||
<span class="ph-tag">📐 [q] = МДж/кг</span>
|
||
<span class="ph-tag">💨 H₂: q = 120 МДж/кг</span>
|
||
<span class="ph-tag">🌍 экология</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-fire"></i> §7. Удельная теплота сгорания</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Основная формула</h3>
|
||
<div class="main-f">$Q = qm$</div>
|
||
<p>$q$ — удельная теплота сгорания [МДж/кг], $m$ — масса топлива [кг].</p>
|
||
<p>Выделяется при <b>полном</b> сгорании.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Значения q, МДж/кг</h3>
|
||
<ul>
|
||
<li>Дрова: 10</li>
|
||
<li>Торф: 19 | Уголь: 27</li>
|
||
<li>Бензин: 47 | Газ: 44</li>
|
||
<li>Водород: <b>120</b> — рекорд</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>$q$ — свойство <b>топлива</b>, не зависит от массы.</li>
|
||
<li>Водород — самый энергоёмкий, но взрывоопасный. Бензин — наиболее распространён.</li>
|
||
<li>КПД реальной печи всегда меньше 100% — часть теплоты теряется.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📊 Удельная теплота сгорания топлив</h3>
|
||
<svg viewBox="0 0 300 140" width="100%" style="display:block">
|
||
<!-- Bars -->
|
||
<text x="4" y="13" font-size="7.5" fill="#64748b" font-family="sans-serif">МДж/кг</text>
|
||
<!-- Водород 120 -->
|
||
<rect x="70" y="10" width="216" height="14" rx="3" fill="#ef4444"/>
|
||
<text x="68" y="21" text-anchor="end" font-size="7.5" fill="var(--text)" font-family="sans-serif">Водород</text>
|
||
<text x="291" y="21" font-size="7.5" fill="#ef4444" font-weight="bold" font-family="sans-serif">120</text>
|
||
<!-- Бензин 47 -->
|
||
<rect x="70" y="30" width="84.6" height="14" rx="3" fill="#f97316"/>
|
||
<text x="68" y="41" text-anchor="end" font-size="7.5" fill="var(--text)" font-family="sans-serif">Бензин</text>
|
||
<text x="159" y="41" font-size="7.5" fill="#f97316" font-weight="bold" font-family="sans-serif">47</text>
|
||
<!-- Газ 44 -->
|
||
<rect x="70" y="50" width="79.2" height="14" rx="3" fill="#f97316" opacity=".8"/>
|
||
<text x="68" y="61" text-anchor="end" font-size="7.5" fill="var(--text)" font-family="sans-serif">Природный газ</text>
|
||
<text x="154" y="61" font-size="7.5" fill="#ea580c" font-weight="bold" font-family="sans-serif">44</text>
|
||
<!-- Уголь 27 -->
|
||
<rect x="70" y="70" width="48.6" height="14" rx="3" fill="#78716c"/>
|
||
<text x="68" y="81" text-anchor="end" font-size="7.5" fill="var(--text)" font-family="sans-serif">Уголь кам.</text>
|
||
<text x="123" y="81" font-size="7.5" fill="#78716c" font-weight="bold" font-family="sans-serif">27</text>
|
||
<!-- Торф 19 -->
|
||
<rect x="70" y="90" width="34.2" height="14" rx="3" fill="#a16207" opacity=".8"/>
|
||
<text x="68" y="101" text-anchor="end" font-size="7.5" fill="var(--text)" font-family="sans-serif">Торф</text>
|
||
<text x="109" y="101" font-size="7.5" fill="#a16207" font-weight="bold" font-family="sans-serif">19</text>
|
||
<!-- Дрова 10 -->
|
||
<rect x="70" y="110" width="18" height="14" rx="3" fill="#92400e" opacity=".8"/>
|
||
<text x="68" y="121" text-anchor="end" font-size="7.5" fill="var(--text)" font-family="sans-serif">Дрова</text>
|
||
<text x="93" y="121" font-size="7.5" fill="#92400e" font-weight="bold" font-family="sans-serif">10</text>
|
||
<!-- Scale -->
|
||
<line x1="70" y1="128" x2="290" y2="128" stroke="var(--border)" stroke-width="1"/>
|
||
<text x="70" y="137" font-size="6.5" fill="#94a3b8" font-family="sans-serif">0</text>
|
||
<text x="160" y="137" font-size="6.5" fill="#94a3b8" font-family="sans-serif">50</text>
|
||
<text x="286" y="137" font-size="6.5" fill="#94a3b8" font-family="sans-serif">120</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="insight-box">
|
||
<div class="insight-title"><i class="fas fa-lightbulb"></i> Водород — топливо будущего</div>
|
||
<p>Водород имеет $q = 120$ МДж/кг — в 2,5 раза эффективнее бензина и в 12 раз — дров. При сгорании водорода образуется только <b>вода</b>, никакого CO₂. Именно поэтому водородные двигатели и топливные элементы — одно из ключевых направлений зелёной энергетики.</p>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Виртуальная печь</div>
|
||
<div class="idiag">
|
||
<h3>🔥 Выбери топливо и рассчитай теплоту</h3>
|
||
<canvas id="cv7" style="width:100%;height:200px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center">
|
||
<div style="flex:1;min-width:180px">
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">Масса топлива:</span>
|
||
<input type="range" id="sl7m" min="0.1" max="10" step="0.1" value="2" style="flex:1;margin-top:4px" oninput="lbl7m.textContent=this.value;upd7();">
|
||
<span class="slider-val"><span id="lbl7m">2</span> кг</span>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1;min-width:180px">
|
||
<select id="sel7fuel" onchange="upd7()" style="width:100%;margin-top:4px;padding:6px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="10">🪵 Дрова (10 МДж/кг)</option>
|
||
<option value="19">🟫 Торф (19 МДж/кг)</option>
|
||
<option value="27" selected>⚫ Уголь (27 МДж/кг)</option>
|
||
<option value="44">🔵 Газ природный (44 МДж/кг)</option>
|
||
<option value="47">🟡 Бензин (47 МДж/кг)</option>
|
||
<option value="120">💨 Водород (120 МДж/кг)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div id="cv7result" class="idiag-result">Q = —</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §7</div>
|
||
<ul class="key-points-list">
|
||
<li>При полном сгорании топлива выделяется теплота $Q = qm$, где $q$ — удельная теплота сгорания [МДж/кг].</li>
|
||
<li>$q$ — свойство вида топлива, не зависит от его массы.</li>
|
||
<li>Водород — рекорд ($q = 120$ МДж/кг), бензин — 47, дрова — 10 МДж/кг.</li>
|
||
<li>КПД реальной печи всегда меньше 100% — часть теплоты теряется на нагрев окружения.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §8 -->
|
||
<div class="content" id="tab-ref8">
|
||
<div class="para-hero ph-8">
|
||
<div class="ph-label">§8 · Физика 8 кл</div>
|
||
<h2>Плавление и кристаллизация</h2>
|
||
<div class="ph-desc">Плавление — переход тв.→жид. при $T_\text{пл} = \text{const}$. Кристаллизация — обратно. Температура постоянна, пока идёт переход, а внутренняя энергия меняется.</div>
|
||
<div class="ph-tags">
|
||
<span class="ph-tag">🌡 T = const при переходе</span>
|
||
<span class="ph-tag">❄ лёд: 0°C</span>
|
||
<span class="ph-tag">🔩 Fe: 1539°C</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-snowflake"></i> §8. Плавление и кристаллизация</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Плавление</h3>
|
||
<div class="main-f">тв. → жид., $T = \text{const}$</div>
|
||
<p>Вся теплота идёт на <b>разрушение кристаллической решётки</b>, а не на разгон молекул. Поэтому T не растёт во время плавления.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Температуры плавления</h3>
|
||
<ul>
|
||
<li>Лёд: 0°C</li>
|
||
<li>Свинец: 327°C | Al: 660°C</li>
|
||
<li>Медь: 1084°C | Fe: 1539°C</li>
|
||
<li>Вольфрам: 3387°C</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>При плавлении $T = \text{const}$, но $U$ растёт — энергия идёт на разрушение решётки.</li>
|
||
<li>Кристаллизация — <b>обратный</b> процесс при той же температуре.</li>
|
||
<li>Аморфные тела (стекло, смола) плавятся постепенно — у них нет чёткой $T_\text{пл}$.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📈 График нагрева вещества (T–t диаграмма)</h3>
|
||
<svg viewBox="0 0 280 140" width="100%" style="display:block">
|
||
<!-- Axes -->
|
||
<line x1="35" y1="10" x2="35" y2="120" stroke="var(--border)" stroke-width="1.5"/>
|
||
<line x1="35" y1="120" x2="270" y2="120" stroke="var(--border)" stroke-width="1.5"/>
|
||
<text x="18" y="70" font-size="7.5" fill="#64748b" font-family="sans-serif" transform="rotate(-90,18,70)">T, °C</text>
|
||
<text x="270" y="125" font-size="7.5" fill="#64748b" font-family="sans-serif">τ</text>
|
||
<!-- Graph line -->
|
||
<!-- AB: нагрев твёрдого (slope up) -->
|
||
<polyline points="40,110 80,75" stroke="#dc2626" stroke-width="2.5" fill="none"/>
|
||
<!-- BC: плавление (горизонталь) -->
|
||
<polyline points="80,75 130,75" stroke="#dc2626" stroke-width="2.5" fill="none"/>
|
||
<!-- CD: нагрев жидкого -->
|
||
<polyline points="130,75 175,40" stroke="#dc2626" stroke-width="2.5" fill="none"/>
|
||
<!-- DE: кипение (горизонталь) -->
|
||
<polyline points="175,40 225,40" stroke="#dc2626" stroke-width="2.5" fill="none"/>
|
||
<!-- EF: нагрев пара (optionally) -->
|
||
<polyline points="225,40 260,20" stroke="#dc2626" stroke-width="2.5" fill="none" stroke-dasharray="4,2" opacity=".5"/>
|
||
<!-- Labels for segments -->
|
||
<text x="57" y="100" font-size="7.5" fill="#64748b" font-family="sans-serif">A→B</text>
|
||
<text x="57" y="110" font-size="7" fill="#64748b" font-family="sans-serif">нагрев</text>
|
||
<text x="57" y="118" font-size="7" fill="#64748b" font-family="sans-serif">тв. тела</text>
|
||
<text x="98" y="70" font-size="7.5" fill="#0369a1" font-family="sans-serif" font-weight="bold">B→C</text>
|
||
<text x="90" y="80" font-size="7" fill="#0369a1" font-family="sans-serif">ПЛАВЛЕНИЕ</text>
|
||
<text x="90" y="89" font-size="7" fill="#0369a1" font-family="sans-serif">T = const</text>
|
||
<text x="152" y="62" font-size="7.5" fill="#64748b" font-family="sans-serif">C→D</text>
|
||
<text x="149" y="72" font-size="7" fill="#64748b" font-family="sans-serif">жидкость</text>
|
||
<text x="185" y="35" font-size="7.5" fill="#059669" font-family="sans-serif" font-weight="bold">D→E</text>
|
||
<text x="178" y="44" font-size="7" fill="#059669" font-family="sans-serif">КИПЕНИЕ</text>
|
||
<!-- T_пл line -->
|
||
<line x1="35" y1="75" x2="82" y2="75" stroke="#0369a1" stroke-width="1" stroke-dasharray="3,2" opacity=".7"/>
|
||
<text x="5" y="78" font-size="6.5" fill="#0369a1" font-family="sans-serif">t_пл</text>
|
||
<!-- T_кип line -->
|
||
<line x1="35" y1="40" x2="177" y2="40" stroke="#059669" stroke-width="1" stroke-dasharray="3,2" opacity=".7"/>
|
||
<text x="3" y="43" font-size="6.5" fill="#059669" font-family="sans-serif">t_кип</text>
|
||
<!-- Points -->
|
||
<circle cx="80" cy="75" r="3.5" fill="#0369a1"/>
|
||
<circle cx="130" cy="75" r="3.5" fill="#0369a1"/>
|
||
<circle cx="175" cy="40" r="3.5" fill="#059669"/>
|
||
<circle cx="225" cy="40" r="3.5" fill="#059669"/>
|
||
<text x="78" y="87" font-size="7" fill="#0369a1" font-family="sans-serif">B</text>
|
||
<text x="128" y="87" font-size="7" fill="#0369a1" font-family="sans-serif">C</text>
|
||
<text x="173" y="53" font-size="7" fill="#059669" font-family="sans-serif">D</text>
|
||
<text x="223" y="53" font-size="7" fill="#059669" font-family="sans-serif">E</text>
|
||
</svg>
|
||
</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">Металл плавят при $t_\text{пл}$ → заливают в форму → охлаждают → кристаллизация</div></div>
|
||
<div class="life-item"><div class="li-icon">🌡️</div><div class="li-title">Антифриз</div><div class="li-desc">Смесь с водой — $t_\text{пл}$ ниже 0°C, не замерзает в радиаторе зимой</div></div>
|
||
<div class="life-item"><div class="li-icon">🧊</div><div class="li-title">Лёд в стакане</div><div class="li-desc">При 0°C лёд тает, пока не расплавится весь — температура не растёт</div></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Кристаллическая решётка</div>
|
||
<div class="idiag">
|
||
<h3>❄️ Меняй температуру и наблюдай переход</h3>
|
||
<canvas id="cv8" style="width:100%;height:220px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center">
|
||
<div style="flex:1;min-width:200px">
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">🌡 Температура:</span>
|
||
<input type="range" id="sl8T" min="-50" max="150" value="0" style="flex:1;margin-top:4px" oninput="lbl8T.textContent=this.value;upd8();">
|
||
<span class="slider-val"><span id="lbl8T">0</span>°C</span>
|
||
</div>
|
||
<div style="font-size:.75rem;color:var(--muted);margin-top:4px">t_пл = <span id="lbl8Tpl">0</span>°C</div>
|
||
</div>
|
||
<div>
|
||
<select id="sel8sub" onchange="upd8()" style="padding:6px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="0">❄ Лёд (0°C)</option>
|
||
<option value="327">🔩 Свинец (327°C)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div id="cv8state" class="idiag-result">Состояние: Твёрдое</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §8</div>
|
||
<ul class="key-points-list">
|
||
<li>Плавление — переход тв.→жид. при постоянной температуре $T_\text{пл}$: вся теплота идёт на разрушение кристаллической решётки.</li>
|
||
<li>Кристаллизация — обратный процесс при той же $T_\text{пл}$ с выделением теплоты.</li>
|
||
<li>Аморфные тела (стекло, смола) не имеют чёткой $T_\text{пл}$ — плавятся постепенно.</li>
|
||
<li>На T–t графике плавление — горизонтальный участок: температура не меняется, пока идёт переход.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §9 -->
|
||
<div class="content" id="tab-ref9">
|
||
<div class="para-hero ph-9">
|
||
<div class="ph-label">§9 · Физика 8 кл</div>
|
||
<h2>Удельная теплота плавления и кристаллизации</h2>
|
||
<div class="ph-formula">$Q = \lambda m$</div>
|
||
<div class="ph-desc">Для плавления 1 кг вещества при $T_\text{пл}$ нужна теплота $\lambda$. При кристаллизации столько же выделяется. Идёт на разрушение кристаллической решётки.</div>
|
||
<div class="ph-tags">
|
||
<span class="ph-tag">📐 [λ] = кДж/кг</span>
|
||
<span class="ph-tag">❄ λ(лёд) = 333 кДж/кг</span>
|
||
<span class="ph-tag">🔩 λ(Al) = 390 кДж/кг</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-calculator"></i> §9. Удельная теплота плавления</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Основная формула</h3>
|
||
<div class="main-f">$Q = \lambda m$</div>
|
||
<p>$\lambda$ — удельная теплота плавления [кДж/кг], $m$ — масса [кг].</p>
|
||
<p>При кристаллизации выделяется <b>столько же</b>.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Значения λ, кДж/кг</h3>
|
||
<ul>
|
||
<li>Лёд: <b>333</b> | Свинец: 25</li>
|
||
<li>Серебро: 88 | Медь: 205</li>
|
||
<li>Железо: 270 | Алюминий: <b>390</b></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>$\lambda$ — теплота на <b>1 кг</b> при $T_\text{пл}$. На нагрев она не тратится!</li>
|
||
<li>При кристаллизации выделяется ровно столько же теплоты, сколько поглощалось при плавлении.</li>
|
||
<li>Лёд плавится при 0°C, но нужно ещё 333 кДж/кг — вот почему лёд хорошо охлаждает.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📊 Удельная теплота плавления λ (кДж/кг)</h3>
|
||
<svg viewBox="0 0 280 110" width="100%" style="display:block">
|
||
<!-- Aluminium 390 -->
|
||
<text x="65" y="20" text-anchor="end" font-size="7.5" fill="var(--text)" font-family="sans-serif">Алюминий</text>
|
||
<rect x="70" y="8" width="175.5" height="13" rx="3" fill="#6366f1"/>
|
||
<text x="250" y="19" font-size="7.5" fill="#6366f1" font-weight="bold" font-family="sans-serif">390</text>
|
||
<!-- Железо 270 -->
|
||
<text x="65" y="40" text-anchor="end" font-size="7.5" fill="var(--text)" font-family="sans-serif">Железо</text>
|
||
<rect x="70" y="28" width="121.5" height="13" rx="3" fill="#0369a1"/>
|
||
<text x="196" y="39" font-size="7.5" fill="#0369a1" font-weight="bold" font-family="sans-serif">270</text>
|
||
<!-- Вода 333 -->
|
||
<text x="65" y="60" text-anchor="end" font-size="7.5" fill="var(--text)" font-family="sans-serif">Лёд→вода</text>
|
||
<rect x="70" y="48" width="149.85" height="13" rx="3" fill="#0891b2"/>
|
||
<text x="225" y="59" font-size="7.5" fill="#0891b2" font-weight="bold" font-family="sans-serif">333</text>
|
||
<!-- Медь 205 -->
|
||
<text x="65" y="80" text-anchor="end" font-size="7.5" fill="var(--text)" font-family="sans-serif">Медь</text>
|
||
<rect x="70" y="68" width="92.25" height="13" rx="3" fill="#b45309"/>
|
||
<text x="167" y="79" font-size="7.5" fill="#b45309" font-weight="bold" font-family="sans-serif">205</text>
|
||
<!-- Свинец 25 -->
|
||
<text x="65" y="100" text-anchor="end" font-size="7.5" fill="var(--text)" font-family="sans-serif">Свинец</text>
|
||
<rect x="70" y="88" width="11.25" height="13" rx="3" fill="#78716c"/>
|
||
<text x="86" y="99" font-size="7.5" fill="#78716c" font-weight="bold" font-family="sans-serif">25</text>
|
||
<!-- Scale -->
|
||
<line x1="70" y1="104" x2="250" y2="104" stroke="var(--border)" stroke-width="1"/>
|
||
<text x="70" y="110" font-size="6" fill="#94a3b8" font-family="sans-serif">0</text>
|
||
<text x="242" y="110" font-size="6" fill="#94a3b8" font-family="sans-serif">390</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="insight-box">
|
||
<div class="insight-title"><i class="fas fa-lightbulb"></i> Почему лёд «тает» медленно?</div>
|
||
<p>Для плавления 1 кг льда нужно <b>333 000 Дж</b> — такое же количество теплоты, которое нужно, чтобы нагреть ту же воду от 0°C до 79°C. Вся эта энергия идёт не на нагрев, а на разрушение кристаллической решётки. Именно поэтому айсберги тают очень медленно — они как «термостат» для полярных морей!</p>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Плавление + график T(t)</div>
|
||
<div class="idiag">
|
||
<h3>🔥 Наблюдай горизонтальный участок графика</h3>
|
||
<canvas id="cv9" style="width:100%;height:240px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center">
|
||
<div style="flex:1;min-width:180px">
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">Масса m:</span>
|
||
<input type="range" id="sl9m" min="0.1" max="5" step="0.1" value="1" style="flex:1;margin-top:4px" oninput="lbl9m.textContent=this.value;upd9();">
|
||
<span class="slider-val"><span id="lbl9m">1</span> кг</span>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1;min-width:180px">
|
||
<select id="sel9sub" onchange="upd9()" style="width:100%;padding:6px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="333">❄ Лёд (λ=333 кДж/кг)</option>
|
||
<option value="270">⚙️ Железо (λ=270 кДж/кг)</option>
|
||
<option value="390">🔩 Алюминий (λ=390 кДж/кг)</option>
|
||
<option value="205">🟤 Медь (λ=205 кДж/кг)</option>
|
||
<option value="88">⚪ Серебро (λ=88 кДж/кг)</option>
|
||
<option value="25">🔵 Свинец (λ=25 кДж/кг)</option>
|
||
</select>
|
||
</div>
|
||
<div style="display:flex;gap:8px">
|
||
<button class="btn btn-pri" onclick="anim9('melt')">🔥 Плавить</button>
|
||
<button class="btn btn-ghost" onclick="anim9('freeze')">❄ Заморозить</button>
|
||
</div>
|
||
</div>
|
||
<div id="cv9result" class="idiag-result">Q = —</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §9</div>
|
||
<ul class="key-points-list">
|
||
<li>Удельная теплота плавления: $Q = \lambda m$, где $\lambda$ — количество теплоты на плавление 1 кг при $T_\text{пл}$.</li>
|
||
<li>При кристаллизации выделяется ровно столько же теплоты, сколько поглощалось при плавлении.</li>
|
||
<li>$\lambda$ льда = 333 кДж/кг — поэтому для таяния льда нужно много теплоты (почему лёд хорошо охлаждает).</li>
|
||
<li>$\lambda$ идёт на разрушение кристаллической решётки, а не на нагрев вещества.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §10 -->
|
||
<div class="content" id="tab-ref10">
|
||
<div class="para-hero ph-10">
|
||
<div class="ph-label">§10 · Физика 8 кл</div>
|
||
<h2>Испарение жидкостей. Факторы</h2>
|
||
<div class="ph-desc">Испарение — переход жид.→пар с поверхности при любой T. Охлаждает жидкость. Скорость зависит от температуры, площади, ветра и рода жидкости.</div>
|
||
<div class="ph-tags">
|
||
<span class="ph-tag">🌡 при любой T</span>
|
||
<span class="ph-tag">❄ охлаждает жидкость</span>
|
||
<span class="ph-tag">💨 ветер ускоряет</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-cloud"></i> §10. Испарение жидкостей</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Механизм испарения</h3>
|
||
<div class="main-f">жид. → пар (с поверхности)</div>
|
||
<p>Быстрые молекулы с поверхности преодолевают силы притяжения → вылетают. Оставшиеся медленнее → жидкость <b>охлаждается</b>.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>4 фактора скорости</h3>
|
||
<ul>
|
||
<li>Температура↑ → быстрее</li>
|
||
<li>Площадь поверхности↑ → быстрее</li>
|
||
<li>Ветер → быстрее (уносит пар)</li>
|
||
<li>Род жидкости: ацетон ≫ вода ≫ масло</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>Испарение идёт при <b>любой температуре</b> — не только при 100°C.</li>
|
||
<li>Испарение <b>охлаждает</b> жидкость — быстрые молекулы уходят, медленные остаются.</li>
|
||
<li>Конденсация — обратный процесс: пар → жидкость.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📊 Факторы, влияющие на скорость испарения</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:.8rem">
|
||
<thead><tr style="background:rgba(220,38,38,.08)"><th style="padding:6px 8px;text-align:left;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">↑T → ↑испарение</td><td style="padding:5px 8px;border:1px solid var(--border)">Больше молекул с энергией ≥ E_отрыва</td></tr>
|
||
<tr style="background:rgba(220,38,38,.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">↑S → ↑испарение</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(220,38,38,.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>
|
||
</table>
|
||
</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">Испарение непрерывно охлаждает поверхность воды — T остаётся ниже кипения</div></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Испарение молекул</div>
|
||
<div class="idiag">
|
||
<h3>💧 Наблюдай испарение при разных условиях</h3>
|
||
<canvas id="cv10" style="width:100%;height:240px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center">
|
||
<div style="flex:1;min-width:180px">
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">🌡 Температура:</span>
|
||
<input type="range" id="sl10T" min="0" max="100" value="40" style="flex:1;margin-top:4px" oninput="lbl10T.textContent=this.value;sl10Tval=+this.value;">
|
||
<span class="slider-val"><span id="lbl10T">40</span>°C</span>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1;min-width:180px">
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">📐 Ширина:</span>
|
||
<input type="range" id="sl10W" min="1" max="3" step="0.5" value="2" style="flex:1;margin-top:4px" oninput="sl10Wval=+this.value;">
|
||
</div>
|
||
</div>
|
||
<label style="display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;cursor:pointer">
|
||
<input type="checkbox" id="chk10wind" onchange="wind10=this.checked"> 💨 Ветер
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §10</div>
|
||
<ul class="key-points-list">
|
||
<li>Испарение — переход жид.→пар с поверхности при любой температуре (не только при 100°C).</li>
|
||
<li>Испарение охлаждает жидкость: быстрые молекулы уходят, оставшиеся движутся медленнее.</li>
|
||
<li>Скорость испарения растёт с повышением T, увеличением площади поверхности, наличием ветра и зависит от рода жидкости.</li>
|
||
<li>Конденсация — обратный процесс: пар переходит в жидкость с выделением теплоты.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §11 -->
|
||
<div class="content" id="tab-ref11">
|
||
<div class="para-hero ph-11">
|
||
<div class="ph-label">§11 · Физика 8 кл</div>
|
||
<h2>Кипение. Удельная теплота парообразования</h2>
|
||
<div class="ph-formula">$Q = Lm$</div>
|
||
<div class="ph-desc">Кипение — парообразование по всему объёму при $T_\text{кип} = \text{const}$. $L$ — теплота для превращения 1 кг жидкости в пар. $T_\text{кип}$ зависит от давления.</div>
|
||
<div class="ph-tags">
|
||
<span class="ph-tag">💧→💨 весь объём</span>
|
||
<span class="ph-tag">📐 [L] = МДж/кг</span>
|
||
<span class="ph-tag">💧 L(воды) = 2,26 МДж/кг</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-temperature-high"></i> §11. Кипение и теплота парообразования</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Кипение</h3>
|
||
<div class="main-f">$Q = Lm$, $T = \text{const}$</div>
|
||
<p>Парообразование по всему <b>объёму</b> при $T_\text{кип}$. Вся теплота идёт на испарение, а не на нагрев.</p>
|
||
<p>$L$ — удельная теплота парообразования [кДж/кг].</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Значения $L$ и $T_\text{кип}$</h3>
|
||
<ul>
|
||
<li>Вода: 100°C, L = 2260 кДж/кг</li>
|
||
<li>Спирт: 78°C, L = 857 кДж/кг</li>
|
||
<li>Эфир: 35°C, L = 352 кДж/кг</li>
|
||
</ul>
|
||
<p>С ростом давления $T_\text{кип}$ <b>повышается</b> (скороварка). С уменьшением — понижается (горы).</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="remember-box">
|
||
<div class="remember-box-title"><i class="fas fa-exclamation-circle"></i> Запомни!</div>
|
||
<ul>
|
||
<li>При кипении $T = \text{const}$ — вся теплота идёт на превращение жидкости в пар.</li>
|
||
<li>$T_\text{кип}$ зависит от <b>давления</b>: больше давление → выше $T_\text{кип}$.</li>
|
||
<li>Конденсация — обратный процесс: выделяется столько же теплоты $Lm$.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="idiag">
|
||
<h3>📈 Температура кипения воды vs давление</h3>
|
||
<svg viewBox="0 0 280 120" width="100%" style="display:block">
|
||
<!-- Axes -->
|
||
<line x1="45" y1="10" x2="45" y2="100" stroke="var(--border)" stroke-width="1.5"/>
|
||
<line x1="45" y1="100" x2="265" y2="100" stroke="var(--border)" stroke-width="1.5"/>
|
||
<text x="8" y="60" font-size="7" fill="#64748b" font-family="sans-serif" transform="rotate(-90,8,60)">T_кип, °C</text>
|
||
<text x="260" y="107" font-size="7" fill="#64748b" font-family="sans-serif">P</text>
|
||
<!-- Curve (exponential-like) -->
|
||
<polyline points="55,90 85,82 115,75 145,68 175,60 205,50 235,38" stroke="#0891b2" stroke-width="2.5" fill="none"/>
|
||
<!-- Key points -->
|
||
<!-- P=0.3 atm → ~70°C (горы) -->
|
||
<circle cx="85" cy="82" r="4" fill="#059669"/>
|
||
<text x="62" y="95" font-size="6.5" fill="#059669" font-family="sans-serif">0,3 атм</text>
|
||
<text x="62" y="103" font-size="6.5" fill="#059669" font-family="sans-serif">≈70°C</text>
|
||
<text x="56" y="112" font-size="6" fill="#94a3b8" font-family="sans-serif">⛰️ горы</text>
|
||
<!-- P=1 atm → 100°C (normal) -->
|
||
<circle cx="145" cy="68" r="4" fill="#0369a1"/>
|
||
<text x="136" y="82" font-size="6.5" fill="#0369a1" font-family="sans-serif">1 атм</text>
|
||
<text x="134" y="91" font-size="6.5" fill="#0369a1" font-family="sans-serif">100°C</text>
|
||
<text x="132" y="100" font-size="6" fill="#94a3b8" font-family="sans-serif">🌊 уровень моря</text>
|
||
<!-- P=2 atm → ~120°C (скороварка) -->
|
||
<circle cx="205" cy="50" r="4" fill="#dc2626"/>
|
||
<text x="210" y="45" font-size="6.5" fill="#dc2626" font-family="sans-serif">2 атм</text>
|
||
<text x="210" y="54" font-size="6.5" fill="#dc2626" font-family="sans-serif">≈120°C</text>
|
||
<text x="205" y="63" font-size="6" fill="#94a3b8" font-family="sans-serif">🥘 скороварка</text>
|
||
<!-- Labels -->
|
||
<text x="50" y="9" font-size="6.5" fill="#94a3b8" font-family="sans-serif">70</text>
|
||
<text x="50" y="69" font-size="6.5" fill="#94a3b8" font-family="sans-serif">100</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="life-grid">
|
||
<div class="life-item"><div class="li-icon">🥘</div><div class="li-title">Скороварка</div><div class="li-desc">P > 1 атм → $t_\text{кип}$ > 100°C → еда готовится быстрее при высокой T</div></div>
|
||
<div class="life-item"><div class="li-icon">⛰️</div><div class="li-title">На вершине горы</div><div class="li-desc">P < 1 атм → вода кипит при ~70°C → суп варится дольше, чем у моря</div></div>
|
||
<div class="life-item"><div class="li-icon">💉</div><div class="li-title">Стерилизация</div><div class="li-desc">Автоклав — P = 2 атм, $t_\text{кип} = 120$°C → убивает все микробы</div></div>
|
||
<div class="life-item"><div class="li-icon">☕</div><div class="li-title">Идеальный чай</div><div class="li-desc">Заваривают при 80-90°C, не 100°C — кипяток разрушает витамины и аромат</div></div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-play-circle"></i> Интерактив — Кипящая жидкость</div>
|
||
<div class="idiag">
|
||
<h3>🫧 Меняй давление и жидкость</h3>
|
||
<canvas id="cv11" style="width:100%;height:260px;border-radius:12px;background:#0f172a;display:block"></canvas>
|
||
<div class="ctrl-row" style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center">
|
||
<div style="flex:1;min-width:180px">
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">🔘 Давление:</span>
|
||
<input type="range" id="sl11P" min="0.3" max="2" step="0.1" value="1" style="flex:1;margin-top:4px" oninput="upd11P(this.value);">
|
||
<span class="slider-val"><span id="lbl11P">1</span> атм</span>
|
||
</div>
|
||
<div style="font-size:.75rem;color:var(--muted);margin-top:4px">t_кип = <span id="lbl11Tkip">100</span>°C</div>
|
||
</div>
|
||
<div style="flex:1;min-width:180px">
|
||
<select id="sel11liq" onchange="upd11liq()" style="width:100%;padding:6px;border-radius:8px;border:2px solid var(--border);background:var(--card);color:var(--text)">
|
||
<option value="100,2260">💧 Вода (100°C, L=2260)</option>
|
||
<option value="78,857">🍺 Спирт (78°C, L=857)</option>
|
||
<option value="35,352">🌿 Эфир (35°C, L=352)</option>
|
||
</select>
|
||
</div>
|
||
<div style="flex:1;min-width:180px">
|
||
<div class="slider-row">
|
||
<span class="slider-lbl">Масса m:</span>
|
||
<input type="range" id="sl11m" min="0.1" max="5" step="0.1" value="1" style="flex:1;margin-top:4px" oninput="lbl11m.textContent=this.value;upd11Q();">
|
||
<span class="slider-val"><span id="lbl11m">1</span> кг</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="cv11result" class="idiag-result">Q = —</div>
|
||
</div>
|
||
|
||
<div class="key-points">
|
||
<div class="key-points-title">🔑 Главное в §11</div>
|
||
<ul class="key-points-list">
|
||
<li>Кипение — парообразование по всему объёму жидкости при постоянной $T_\text{кип}$.</li>
|
||
<li>Теплота парообразования: $Q = Lm$, где $L$ — удельная теплота парообразования [кДж/кг].</li>
|
||
<li>$T_\text{кип}$ зависит от давления: больше давление → выше $T_\text{кип}$ (скороварка), меньше → ниже (горы).</li>
|
||
<li>Конденсация — обратный процесс; выделяется столько же теплоты $Lm$.</li>
|
||
<li>$L$ воды = 2260 кДж/кг — очень высокое значение, поэтому пар несёт огромное количество теплоты.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ЗАДАЧИ -->
|
||
<div class="content" id="tab-tasks">
|
||
<div class="para-pills">
|
||
<button class="para-pill active" data-para="p1" onclick="setParaTab('p1')">§1 Внутренняя энергия</button>
|
||
<button class="para-pill" data-para="p2" onclick="setParaTab('p2')">§2 Способы изменения U</button>
|
||
<button class="para-pill" data-para="p3" onclick="setParaTab('p3')">§3 Теплопроводность</button>
|
||
<button class="para-pill" data-para="p4" onclick="setParaTab('p4')">§4 Конвекция</button>
|
||
<button class="para-pill" data-para="p5" onclick="setParaTab('p5')">§5 Излучение</button>
|
||
<button class="para-pill" data-para="p6" onclick="setParaTab('p6')">§6 Удельная теплоёмкость</button>
|
||
<button class="para-pill" data-para="p7" onclick="setParaTab('p7')">§7 Горение</button>
|
||
<button class="para-pill" data-para="p8" onclick="setParaTab('p8')">§8 Плавление</button>
|
||
<button class="para-pill" data-para="p9" onclick="setParaTab('p9')">§9 Теплота плавления</button>
|
||
<button class="para-pill" data-para="p10" onclick="setParaTab('p10')">§10 Испарение</button>
|
||
<button class="para-pill" data-para="p11" onclick="setParaTab('p11')">§11 Кипение</button>
|
||
<button class="para-pill" data-para="hard" onclick="setParaTab('hard')">⚡ Сложные</button>
|
||
</div>
|
||
|
||
<!-- ptab-p1 -->
|
||
<div id="ptab-p1">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp1">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp1">0</span> / <span id="maxp1">0</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p1')" 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="progp1" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp1"></div>
|
||
<div id="taskAreap1"></div>
|
||
<div class="feedback" id="fbp1"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp1" onclick="nextTask('p1')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump1">
|
||
<h2>§1 — готово!</h2>
|
||
<div class="big-score" id="sumScorep1">0/4</div>
|
||
<div class="sum-grade" id="sumGradep1"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p1')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p2')">→ §2</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ptab-p2 -->
|
||
<div id="ptab-p2">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp2">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp2">0</span> / <span id="maxp2">0</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p2')" 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="progp2" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp2"></div>
|
||
<div id="taskAreap2"></div>
|
||
<div class="feedback" id="fbp2"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp2" onclick="nextTask('p2')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump2">
|
||
<h2>§2 — готово!</h2>
|
||
<div class="big-score" id="sumScorep2">0/4</div>
|
||
<div class="sum-grade" id="sumGradep2"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p2')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p3')">→ §3</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ptab-p3 -->
|
||
<div id="ptab-p3">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp3">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp3">0</span> / <span id="maxp3">0</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p3')" 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="progp3" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp3"></div>
|
||
<div id="taskAreap3"></div>
|
||
<div class="feedback" id="fbp3"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp3" onclick="nextTask('p3')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump3">
|
||
<h2>§3 — готово!</h2>
|
||
<div class="big-score" id="sumScorep3">0/7</div>
|
||
<div class="sum-grade" id="sumGradep3"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p3')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p4')">→ §4</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ptab-p4 -->
|
||
<div id="ptab-p4">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp4">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp4">0</span> / <span id="maxp4">0</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p4')" 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="progp4" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp4"></div>
|
||
<div id="taskAreap4"></div>
|
||
<div class="feedback" id="fbp4"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp4" onclick="nextTask('p4')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump4">
|
||
<h2>§4 — готово!</h2>
|
||
<div class="big-score" id="sumScorep4">0/4</div>
|
||
<div class="sum-grade" id="sumGradep4"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p4')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p5')">→ §5</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ptab-p5 -->
|
||
<div id="ptab-p5">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp5">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp5">0</span> / <span id="maxp5">0</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p5')" 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="progp5" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp5"></div>
|
||
<div id="taskAreap5"></div>
|
||
<div class="feedback" id="fbp5"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp5" onclick="nextTask('p5')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump5">
|
||
<h2>§5 — готово!</h2>
|
||
<div class="big-score" id="sumScorep5">0/11</div>
|
||
<div class="sum-grade" id="sumGradep5"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p5')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p6')">→ §6</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ptab-p6 -->
|
||
<div id="ptab-p6">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp6">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp6">0</span> / <span id="maxp6">0</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p6')" 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="progp6" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp6"></div>
|
||
<div id="taskAreap6"></div>
|
||
<div class="feedback" id="fbp6"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp6" onclick="nextTask('p6')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump6">
|
||
<h2>§6 — готово!</h2>
|
||
<div class="big-score" id="sumScorep6">0/5</div>
|
||
<div class="sum-grade" id="sumGradep6"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p6')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p7')">→ §7</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ptab-p7 -->
|
||
<div id="ptab-p7">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp7">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp7">0</span> / <span id="maxp7">0</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p7')" 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="progp7" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp7"></div>
|
||
<div id="taskAreap7"></div>
|
||
<div class="feedback" id="fbp7"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp7" onclick="nextTask('p7')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump7">
|
||
<h2>§7 — готово!</h2>
|
||
<div class="big-score" id="sumScorep7">0/6</div>
|
||
<div class="sum-grade" id="sumGradep7"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p7')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p8')">→ §8</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ptab-p8 -->
|
||
<div id="ptab-p8">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp8">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp8">0</span> / <span id="maxp8">0</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p8')" 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="progp8" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp8"></div>
|
||
<div id="taskAreap8"></div>
|
||
<div class="feedback" id="fbp8"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp8" onclick="nextTask('p8')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump8">
|
||
<h2>§8 — готово!</h2>
|
||
<div class="big-score" id="sumScorep8">0/7</div>
|
||
<div class="sum-grade" id="sumGradep8"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p8')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p9')">→ §9</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ptab-p9 -->
|
||
<div id="ptab-p9">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp9">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp9">0</span> / <span id="maxp9">0</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p9')" 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="progp9" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp9"></div>
|
||
<div id="taskAreap9"></div>
|
||
<div class="feedback" id="fbp9"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp9" onclick="nextTask('p9')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump9">
|
||
<h2>§9 — готово!</h2>
|
||
<div class="big-score" id="sumScorep9">0/7</div>
|
||
<div class="sum-grade" id="sumGradep9"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p9')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p10')">→ §10</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ptab-p10 -->
|
||
<div id="ptab-p10">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp10">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp10">0</span> / <span id="maxp10">0</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p10')" 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="progp10" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp10"></div>
|
||
<div id="taskAreap10"></div>
|
||
<div class="feedback" id="fbp10"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp10" onclick="nextTask('p10')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump10">
|
||
<h2>§10 — готово!</h2>
|
||
<div class="big-score" id="sumScorep10">0/8</div>
|
||
<div class="sum-grade" id="sumGradep10"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p10')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p11')">→ §11</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ptab-p11 -->
|
||
<div id="ptab-p11">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp11">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp11">0</span> / <span id="maxp11">0</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p11')" 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="progp11" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp11"></div>
|
||
<div id="taskAreap11"></div>
|
||
<div class="feedback" id="fbp11"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp11" onclick="nextTask('p11')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump11">
|
||
<h2>§11 — готово!</h2>
|
||
<div class="big-score" id="sumScorep11">0/9</div>
|
||
<div class="sum-grade" id="sumGradep11"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p11')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('hard')">→ ⚡ Сложные</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ptab-hard -->
|
||
<div id="ptab-hard">
|
||
<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/8</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>
|
||
// ═══════════════════════════════════════
|
||
// ДАННЫЕ ЗАДАЧ
|
||
// ═══════════════════════════════════════
|
||
var TASKS_P1 = [
|
||
{q:"Может ли тело обладать внутренней энергией, не имея механической?",opts:["Нет, это невозможно","Да, например покоящийся камень на уровне земли","Только в газообразном состоянии","Только при абсолютном нуле"],a:1,ex:"Покоящееся тело на нулевом уровне не имеет механической энергии, но молекулы в нём всегда движутся — внутренняя энергия всегда не равна нулю."},
|
||
{q:"Одинаковы ли внутренние энергии 1 кг золота в твёрдом и расплавленном состояниях при одинаковой температуре?",opts:["Да, температура одинакова","Нет, у расплавленного больше — разрушена кристаллическая решётка","Нет, у твёрдого больше","Зависит от давления"],a:1,ex:"При плавлении разрушается кристаллическая решётка — растёт потенциальная энергия молекул. Внутренняя энергия расплавленного тела больше при той же температуре."},
|
||
{q:"Равны ли внутренние энергии воздуха в двух одинаковых колбах, опущенных в воду разной температуры?",opts:["Да, объём и масса одинаковы","Нет, у более горячей колбы внутренняя энергия больше","Нет, у холодной больше","Зависит от давления"],a:1,ex:"Чем выше температура, тем быстрее движутся молекулы и тем больше их кинетическая энергия и внутренняя энергия воздуха в колбе."},
|
||
{q:"Из каких составляющих складывается внутренняя энергия воздуха?",opts:["Только кинетическая энергия молекул","Только потенциальная энергия молекул","Кинетическая + потенциальная энергии молекул","Механическая и тепловая энергии тела"],a:2,ex:"Внутренняя энергия = кинетическая энергия хаотического движения + потенциальная энергия взаимодействия молекул."},
|
||
{q:"Внутренняя энергия газа в баллоне $U_1 = 480$ кДж. После охлаждения она стала $U_2 = 25{,}0$ кДж. На сколько уменьшилась внутренняя энергия газа?",hint:"$|\\Delta U| = U_1 - U_2$",unit:"кДж",a:455,ex:"$|\\Delta U| = 480 - 25 = 455$ кДж. Газ отдал теплоту окружающей среде — его внутренняя энергия уменьшилась."},
|
||
{q:"Газ с внутренней энергией $U_1 = 840$ Дж сжали поршнем. Его внутренняя энергия стала $U_2 = 3{,}60$ кДж. Определите изменение внутренней энергии газа.",hint:"$\\Delta U = U_2 - U_1$",unit:"Дж",a:2760,ex:"$\\Delta U = 3600 - 840 = 2760$ Дж. Внутренняя энергия выросла: механическая работа поршня перешла во внутреннюю энергию газа."},
|
||
{q:"Два стальных кирпича одинаковой массы лежат на столе. В каком случае их внутренние энергии могут стать одинаковыми?",opts:["Они всегда одинаковы, т.к. массы равны","При нагреве одного до температуры другого","Только если их расплавить","Никогда — внутренняя энергия зависит от положения"],a:1,ex:"Внутренние энергии двух тел из одного вещества одинаковой массы равны, если они имеют одинаковую температуру. Нагрей более холодный — и они сравняются."}
|
||
];
|
||
|
||
var TASKS_P2 = [
|
||
{q:"Каким способом изменяется внутренняя энергия свечи при горении?",opts:["Механической работой","Теплопередачей","Не изменяется","Оба способа"],a:1,ex:"Химическая энергия переходит во внутреннюю энергию продуктов горения — это теплообмен."},
|
||
{q:"Как изменяется внутренняя энергия пакета молока в холодильнике?",opts:["Увеличивается — холодильник работает","Уменьшается путём теплопередачи","Не изменяется","Увеличивается из-за давления"],a:1,ex:"Тепло передаётся от молока к холодному воздуху холодильника (теплопередача). Внутренняя энергия молока уменьшается."},
|
||
{q:"Цилиндр натёрли сукном (A=1 Дж). Другой цилиндр подняли (A=1 Дж). У которого больше выросла внутренняя энергия?",opts:["У обоих одинаково","У первого (трение): его U выросла на 1 Дж; у второго U не изменилась","У второго (подъём) U выросла больше","Ни у одного U не изменилась"],a:1,ex:"При трении работа превращается в тепло (рост U). При подъёме работа идёт на механическую потенциальную энергию — U тела не меняется."},
|
||
{q:"Изменилась ли внутренняя энергия эспандера при его растяжении?",opts:["Нет, форма не влияет на U","Да, увеличилась: выросла потенциальная энергия взаимодействия молекул","Да, уменьшилась","Только если растяжение сопровождается нагревом"],a:1,ex:"Молекулы резины удаляются — растёт потенциальная энергия их взаимодействия. Это механический способ изменения внутренней энергии."},
|
||
{q:"Газ в закрытом баллоне получил при теплопередаче $\\Delta U = 20$ кДж. Чему равно количество теплоты, полученное газом?",hint:"В закрытом баллоне объём не меняется, работа не совершается: $Q = \\Delta U$",unit:"кДж",a:20,ex:"При постоянном объёме вся теплота идёт на увеличение внутренней энергии: $Q = \\Delta U = 20$ кДж."},
|
||
{q:"Два металлических цилиндра: первый натёрли куском сукна (совершена работа $A_1 = 1$ Дж), второй подняли на некоторую высоту (совершена работа $A_2 = 1$ Дж). Одинаково ли изменилась их внутренняя энергия?",opts:["Да — работы равны, значит изменения одинаковы","Нет: у первого внутренняя энергия выросла, у второго — не изменилась (работа → механическая потенциальная)","Нет: у обоих внутренняя энергия не изменилась","Нет: у второго внутренняя энергия выросла больше"],a:1,ex:"При трении вся механическая работа превращается во внутреннюю энергию (нагрев). При подъёме тела работа идёт на увеличение механической потенциальной энергии тела — внутренняя энергия не меняется."}
|
||
];
|
||
|
||
var TASKS_P3 = [
|
||
{q:"Почему посуда для приготовления пищи делается из стали или чугуна?",opts:["Металлы дешевле дерева","Металлы имеют высокую теплопроводность — быстро передают тепло еде","Металлы имеют низкую теплопроводность","Дерево плавится"],a:1,ex:"Высокая теплопроводность металлов обеспечивает быстрый и равномерный нагрев содержимого."},
|
||
{q:"В Якутии устанавливают пятикамерные стеклопакеты. Почему?",opts:["Прочнее","Больше воздушных прослоёк — лучше теплоизоляция (воздух плохо проводит тепло)","Дешевле","Лучше пропускают свет"],a:1,ex:"Воздух — плохой проводник тепла. Больше прослоёк → меньше теплопотери в суровые морозы."},
|
||
{q:"Верно ли «Шуба греет человека»? Кто на самом деле греет?",opts:["Да, шуба выделяет тепло","Нет, греет сам человек; шуба замедляет потери тепла (плохая теплопроводность)","Греет окружающий воздух","Оба одинаково"],a:1,ex:"Шуба — теплоизолятор (воздух в меху плохо проводит тепло). Тепло выделяет организм; шуба лишь замедляет его потери."},
|
||
{q:"Почему медицинский термометр держат под мышкой не менее 5–7 мин?",opts:["Ртуть долго расширяется","Теплопроводность тела невысокая — нужно время для выравнивания температур","Для дезинфекции","Для калибровки шкалы"],a:1,ex:"Теплопроводность кожи и мышц сравнительно низка. До выравнивания температуры нужно 5–7 минут."},
|
||
{q:"Почему стальные ножницы кажутся холоднее деревянного карандаша в той же комнате?",opts:["Ножницы тяжелее","Металл быстро отводит тепло от руки (высокая теплопроводность)","Карандаш нагрет","Ножницы испаряют влагу"],a:1,ex:"Ножницы из металла быстро отводят тепло от тёплой руки. Карандаш (дерево) с низкой теплопроводностью отводит тепло медленнее — кажется теплее."},
|
||
{q:"Одинакова ли теплопроводность пенопласта $\\rho_1 = 20$ кг/м³ и $\\rho_2 = 50$ кг/м³?",opts:["Да","Нет, у $\\rho_2 = 50$ теплопроводность выше (меньше воздуха)","Нет, у $\\rho_1 = 20$ теплопроводность выше","Зависит от температуры"],a:1,ex:"В более плотном пенопласте меньше воздушных пустот. Воздух — плохой теплопроводник, поэтому более плотный пенопласт чуть хуже изолирует."},
|
||
{q:"Зачем из термоса выкачивают воздух между стенками?",opts:["Уменьшить вес","Вакуум устраняет теплопроводность и конвекцию — минимизирует все виды теплопередачи","Вакуум отражает тепло","Создаёт давление для сохранения тепла"],a:1,ex:"Без газовых молекул нет теплопроводности. Без вещества нет конвекции. Вместе с отражающими стенками это минимизирует теплопотери."}
|
||
];
|
||
|
||
var TASKS_P4 = [
|
||
{q:"Почему конвекция невозможна в твёрдых телах?",opts:["Они слишком плотные","Молекулы твёрдого тела удерживаются в узлах решётки — не могут свободно перемещаться","Они не нагреваются","Нет теплопроводности"],a:1,ex:"При конвекции перемещаются сами объёмы вещества. В твёрдых телах молекулы только колеблются на своих местах."},
|
||
{q:"Какую роль играет конвекция при обогреве комнаты батареей?",opts:["Никакую","Горячий воздух от батареи поднимается, холодный опускается — вся комната нагревается","Батарея греет только излучением","Теплопроводность стен передаёт тепло"],a:1,ex:"Нагретый воздух у батареи поднимается, холодный опускается, занимая его место. Конвекционный поток охватывает всю комнату."},
|
||
{q:"Охлаждение комнаты через форточку — конвекция или теплопроводность?",opts:["Теплопроводность через стекло","Конвекция: холодный воздух тяжелее и опускается с форточки","Только излучение","Диффузия молекул"],a:1,ex:"Холодный воздух с улицы плотнее тёплого. Он поступает через форточку вниз — это конвекция."},
|
||
{q:"Чем конвекция отличается от теплопроводности?",opts:["Конвекция — только в газах, теплопроводность — только в металлах","При конвекции перемещается само вещество; при теплопроводности — только энергия через столкновения","Конвекция при высоких T","Конвекция не требует контакта"],a:1,ex:"Теплопроводность: энергия передаётся от молекулы к молекуле без переноса вещества. Конвекция: перемещаются нагретые объёмы вещества."}
|
||
];
|
||
|
||
var TASKS_P5 = [
|
||
{q:"Почему форточки делают в верхней части окна?",opts:["Удобнее открывать","Тёплый воздух скапливается вверху; верхняя форточка обеспечивает вентиляцию","Нижняя форточка опасна","Традиция"],a:1,ex:"Тёплый воздух легче и поднимается вверх. Верхняя форточка эффективно вентилирует комнату."},
|
||
{q:"Как быстрее охладить бутылку: поставить на лёд или обложить льдом сверху?",opts:["Одинаково","Поставить на лёд","Обложить сверху — холодный воздух опускается вниз и охлаждает бутылку","Погрузить в воду"],a:2,ex:"Холодный воздух тяжелее тёплого. Если лёд сверху, охлаждённый воздух опускается вниз, огибая бутылку."},
|
||
{q:"Почему подвал — самое холодное место в доме зимой?",opts:["Нет солнечного света","Холодный воздух плотнее и опускается вниз по конвекции","Земля забирает тепло","Нет источников тепла"],a:1,ex:"Холодный воздух плотнее тёплого и по конвекции скапливается внизу здания — в подвале."},
|
||
{q:"В каком кофейнике одинаковый объём воды закипит быстрее: тёмном матовом или блестящем светлом?",opts:["В блестящем","В тёмном матовом — тёмная поверхность лучше поглощает тепловое излучение","Одинаково","В большем"],a:1,ex:"Тёмная матовая поверхность лучше поглощает тепловое излучение конфорки."},
|
||
{q:"Почему снег в городе тает быстрее, чем в лесу?",opts:["В городе теплее из-за людей","Тёмные поверхности города поглощают больше солнечного излучения и нагревают воздух","В лесу деревья защищают снег","Сильнее ветер"],a:1,ex:"Асфальт и крыши тёмные — поглощают больше солнечного тепла. В лесу снег в тени деревьев."},
|
||
{q:"Почему поверхность цилиндров мотоцикла делают ребристой?",opts:["Красиво","Рёбра увеличивают площадь поверхности и улучшают теплообмен с воздухом","Рёбра придают жёсткость","Легче крепить двигатель"],a:1,ex:"Рёбра значительно увеличивают площадь охлаждения. Чем больше площадь — тем больше тепла передаётся воздуху."},
|
||
{q:"Вагон-рефрижератор снаружи окрашен в светлый цвет. Почему?",opts:["Обозначение типа","Светлые цвета меньше поглощают солнечное излучение — внутри прохладнее","Светлая краска дешевле","Защита от коррозии"],a:1,ex:"Светлые поверхности хуже поглощают тепловое излучение Солнца — внутри дольше сохраняется холод."},
|
||
{q:"Кто прав — Маша (чёрная одежда лучше) или Дима (светлая лучше) в жаркую погоду?",opts:["Маша — чёрная и излучает больше","Дима — светлая отражает солнечное излучение, тело меньше нагревается","Оба правы","Цвет одежды не важен"],a:1,ex:"На солнце главное — отразить излучение. Светлая одежда отражает его лучше, не давая телу нагреться."},
|
||
{q:"При горении свечи верхняя часть парафина расплавлена. Какие виды теплопередачи задействованы?",opts:["Только теплопроводность","Только конвекция","Только излучение","Теплопроводность парафина + излучение от пламени"],a:3,ex:"От пламени к парафину — излучение. Внутри парафина тепло распространяется теплопроводностью."},
|
||
{q:"Каким видом теплопередачи объясняется понижение уровня воды в озере в жаркий день?",opts:["Конвекцией","Теплопроводностью через дно","Излучением Солнца — испарение воды","Теплопроводностью через берег"],a:2,ex:"Солнечное излучение нагревает поверхность воды, вызывая испарение. Уровень понижается."},
|
||
{q:"Каким видом теплопередачи объясняется остывание воды в озере в прохладную ночь?",opts:["Конвекцией воздуха","Излучением тепла в ночное небо","Теплопроводностью через дно","Испарением воды"],a:1,ex:"Ночью вода излучает тепловую энергию в сторону более холодного неба — поверхность охлаждается."}
|
||
];
|
||
|
||
var TASKS_P6 = [
|
||
{q:"Чайная ложка получила $Q = 690$ Дж и нагрелась на $\\Delta t = 75$°C. Сколько теплоты выделится при её остывании на те же 75°C?",hint:"$Q$ при нагреве = $Q$ при охлаждении на ту же $\\Delta t$",unit:"Дж",a:690,ex:"$Q = cm\\Delta t$. При нагреве и охлаждении на одинаковую $\\Delta t$ значение $Q$ одинаково. Ответ: 690 Дж."},
|
||
{q:"Сколько теплоты нужно для нагрева 1 л воды от $t_1 = 15$°C до кипения (100°C)? $c = 4200$ Дж/(кг·°C), $m = 1$ кг.",hint:"$Q = cm(t_2 - t_1)$; $\\Delta t = 100 - 15 = 85$°C",unit:"кДж",a:357,ex:"$Q = 4200 \\times 1 \\times 85 = 357\\,000$ Дж = 357 кДж"},
|
||
{q:"Из какого металла статуэтка $m = 200$ г, если нагрев на $\\Delta t = 10$°C потребовал $Q = 500$ Дж?",opts:["Алюминий ($c = 900$ Дж/(кг·°C))","Серебро ($c \\approx 235$ Дж/(кг·°C))","Железо ($c = 460$ Дж/(кг·°C))","Медь ($c = 385$ Дж/(кг·°C))"],a:1,ex:"$c = Q/(m\\Delta t) = 500/(0{,}2 \\times 10) = 250$ Дж/(кг·°C). Ближайшее к таблице — серебро ($c = 235$ Дж/(кг·°C))."},
|
||
{q:"Воду $m_1 = 300$ г при $t_1 = 80$°C смешали с водой $m_2 = 200$ г при $t_2 = 20$°C. Найдите температуру смеси.",hint:"$Q_\\text{отд} = Q_\\text{погл}$; $cm_1(t_1 - t) = cm_2(t - t_2)$",unit:"°C",a:56,ex:"$0{,}3(80 - t) = 0{,}2(t - 20)$; $24 - 0{,}3t = 0{,}2t - 4$; $28 = 0{,}5t$; $t = 56$°C"},
|
||
{q:"Сколько теплоты выделит медная деталь $m = 0{,}5$ кг при охлаждении от 300°C до 20°C? $c(\\text{Cu}) = 385$ Дж/(кг·°C).",hint:"$Q = cm\\Delta t$; $\\Delta t = 280$°C",unit:"кДж",a:53.9,ex:"$Q = 385 \\times 0{,}5 \\times 280 = 53\\,900$ Дж $\\approx 53{,}9$ кДж"},
|
||
{q:"Какое количество теплоты поглощается при нагреве стальной детали $m = 10{,}0$ кг от $t_1 = 100$°C до $t_2 = 150$°C? $c_\\text{ст} = 460$ Дж/(кг·°C).",hint:"$Q = cm\\Delta t$",unit:"кДж",a:230,ex:"$Q = 460 \\times 10 \\times 50 = 230\\,000$ Дж = 230 кДж"},
|
||
{q:"Сколько теплоты выделяется при охлаждении воды объёмом $V = 200$ мл от $t_1 = 90{,}0$°C до $t_2 = 30{,}0$°C?",hint:"$m = \\rho V = 0{,}200$ кг; $Q = cm\\Delta t$",unit:"кДж",a:50.4,ex:"$Q = 4200 \\times 0{,}200 \\times 60 = 50\\,400$ Дж = 50,4 кДж"},
|
||
{q:"Найдите удельную теплоёмкость чугуна, если при охлаждении чугунной детали $m = 20{,}0$ кг от 130°C до 80°C выделилось $Q = 0{,}550$ МДж.",hint:"$c = Q / (m \\cdot \\Delta t)$",unit:"Дж/(кг·°C)",a:550,ex:"$c = 550\\,000 / (20 \\times 50) = 550$ Дж/(кг·°C)"},
|
||
{q:"До какой температуры нагреется кусочек олова $m = 10$ г при начальной температуре $t_1 = 20$°C, если ему сообщили $Q = 57$ Дж? $c_\\text{Sn} = 230$ Дж/(кг·°C).",hint:"$t_2 = t_1 + Q/(cm)$",unit:"°C",a:44.8,ex:"$\\Delta t = 57/(230 \\times 0{,}01) = 24{,}8$°C; $t_2 = 20 + 24{,}8 \\approx 45$°C"},
|
||
{q:"На сколько нагреется стальная плита $m_2 = 10$ кг, если молот $m_1 = 600$ кг падает с $h = 5{,}0$ м и 40% его механической энергии идёт на нагрев плиты? $c_\\text{ст} = 460$ Дж/(кг·°C).",hint:"$Q = 0{,}4 \\cdot m_1 g h$; $\\Delta t = Q/(c \\cdot m_2)$",unit:"°C",a:2.6,ex:"$Q = 0{,}4 \\times 600 \\times 10 \\times 5 = 12\\,000$ Дж; $\\Delta t = 12000/(460 \\times 10) \\approx 2{,}6$°C"},
|
||
{q:"С какой высоты должен упасть свинцовый шарик, чтобы его температура выросла на $\\Delta t = 1{,}0$°C? 60% механической энергии → нагрев. $c_\\text{Pb} = 128$ Дж/(кг·°C).",hint:"$0{,}6 \\cdot mgh = cm\\Delta t$ → $h = c\\Delta t/(0{,}6g)$",unit:"м",a:21.3,ex:"$h = 128 \\times 1{,}0 / (0{,}6 \\times 10) = 21{,}3$ м"},
|
||
{q:"Три кирпича одинаковой массы: два при $t_1 = 20$°C и один при $t_2 = 80$°C. Найдите установившуюся температуру (потерями пренебречь).",hint:"$cm(t_2 - T) = 2cm(T - t_1)$",unit:"°C",a:40,ex:"$80-T = 2(T-20)$; $80-T = 2T-40$; $3T = 120$; $T = 40$°C"},
|
||
{q:"На сколько изменилась температура воды объёмом $V = 5{,}0$ л, если она выделила $Q = 0{,}21$ МДж?",hint:"$\\Delta t = Q/(cm)$; $m = \\rho V = 5$ кг",unit:"°C",a:10,ex:"$\\Delta t = 210\\,000/(4200 \\times 5) = 10$°C. Температура понизилась на 10°C."}
|
||
];
|
||
|
||
var TASKS_P7 = [
|
||
{q:"Сколько теплоты выделится при сгорании каменного угля $m = 10$ кг? $q = 27$ МДж/кг.",hint:"$Q = qm$",unit:"МДж",a:270,ex:"$Q = 27 \\times 10 = 270$ МДж"},
|
||
{q:"Что выделит больше тепла: дрова $m_1 = 14{,}5$ кг или торф $m_2 = 8{,}0$ кг? ($q_\\text{дров} = 10$, $q_\\text{торфа} = 19$ МДж/кг)",opts:["Дрова: $Q = 145$ МДж $>$ $Q_\\text{торфа} = 152$ МДж","Торф: $Q = 152$ МДж $>$ $Q_\\text{дров} = 145$ МДж","Одинаково","Зависит от влажности"],a:1,ex:"$Q(\\text{дрова}) = 10 \\times 14{,}5 = 145$ МДж; $Q(\\text{торф}) = 19 \\times 8 = 152$ МДж. Торф на 7 МДж больше."},
|
||
{q:"При сгорании $m = 50$ кг выделилось $Q = 750$ МДж. Какое это топливо? ($q = Q/m$)",opts:["Дрова ($q = 10$ МДж/кг)","Торф ($q \\approx 15$ МДж/кг)","Бензин ($q = 47$ МДж/кг)","Природный газ ($q = 44$ МДж/кг)"],a:1,ex:"$q = Q/m = 750/50 = 15$ МДж/кг. Ближайшее к таблице — торф (19 МДж/кг). Вероятно, влажный торф."},
|
||
{q:"1 л бензина ($\\rho = 710$ кг/м³, $q = 47$ МДж/кг) и 1 л керосина ($\\rho = 800$ кг/м³, $q = 44$ МДж/кг). Что выделит больше тепла?",opts:["Бензин: $Q \\approx 33{,}4$ МДж","Керосин: $Q = 35{,}2$ МДж — больше","Одинаково","Зависит от горелки"],a:1,ex:"$m_\\text{б} = 0{,}71$ кг; $Q_\\text{б} = 47 \\times 0{,}71 \\approx 33{,}4$ МДж; $m_\\text{к} = 0{,}80$ кг; $Q_\\text{к} = 44 \\times 0{,}8 = 35{,}2$ МДж."},
|
||
{q:"Во сколько раз водород ($q = 120$ МДж/кг) эффективнее бензина ($q = 47$ МДж/кг)?",hint:"$k = q_{H_2} / q_\\text{бенз}$",unit:"раза",a:2.55,ex:"$k = 120 / 47 \\approx 2{,}55$. Водород почти в 2,5 раза эффективнее и экологически чище."},
|
||
{q:"Сколько дров ($q = 10$ МДж/кг) нужно сжечь, чтобы нагреть воду $m = 50$ кг от 20 до 100°C при КПД 50%? $c = 4200$ Дж/(кг·°C).",hint:"$Q_\\text{пол} = cm\\Delta t$; $m_\\text{дров} = Q_\\text{пол} / (q \\cdot \\eta)$",unit:"кг",a:3.36,ex:"$Q = 4200 \\times 50 \\times 80 = 16{,}8$ МДж; $m = 16{,}8 / (10 \\times 0{,}5) = 3{,}36$ кг"},
|
||
{q:"Какое количество теплоты выделяется при полном сгорании керосина $m = 0{,}50$ кг? $q_\\text{кер} = 44$ МДж/кг.",hint:"$Q = qm$",unit:"МДж",a:22,ex:"$Q = 44 \\times 0{,}50 = 22$ МДж"},
|
||
{q:"При полном сгорании $m = 0{,}25$ кг некоторого топлива выделилось $Q = 10$ МДж. Какое это топливо?",opts:["Дрова ($q = 10$ МДж/кг)","Торф ($q = 19$ МДж/кг)","Мазут ($q \\approx 40$ МДж/кг)","Бензин ($q = 47$ МДж/кг)"],a:2,ex:"$q = Q/m = 10/0{,}25 = 40$ МДж/кг — мазут ($q \\approx 40$ МДж/кг)."},
|
||
{q:"При сгорании $m = 280$ г некоего топлива выделяется теплота, достаточная для нагрева $V = 20$ л воды от 0 до 100°C (КПД = 100%). Какое это топливо?",opts:["Торф ($q = 19$ МДж/кг)","Кокс ($q = 30$ МДж/кг)","Бензин ($q = 47$ МДж/кг)","Природный газ ($q = 44$ МДж/кг)"],a:1,ex:"$Q = 4200 \\times 20 \\times 100 = 8{,}4$ МДж; $q = Q/m = 8{,}4/0{,}28 = 30$ МДж/кг — кокс."},
|
||
{q:"При полном сгорании $m = 1{,}0$ кг торфа вся теплота идёт на нагрев стальной заготовки $m_\\text{ст} = 10$ кг от $t_1 = 20$°C. До какой температуры нагреется заготовка? $q_\\text{торф} = 19$ МДж/кг, $c_\\text{ст} = 460$ Дж/(кг·°C).",hint:"$qm_\\text{торф} = c_\\text{ст} m_\\text{ст}(t_2 - t_1)$",unit:"°C",a:4150,ex:"$\\Delta t = 19\\times10^6/(460\\times10) = 4130$°C; $t_2 = 20 + 4130 = 4150$°C — температура выше точки плавления стали (1500°C), значит КПД реальной печи не 100%."}
|
||
];
|
||
|
||
var TASKS_P8 = [
|
||
{q:"Что такое плавление и кристаллизация?",opts:["Плавление тв.→жид.; кристаллизация жид.→тв.","Плавление жид.→газ; кристаллизация газ→жид.","Одно и то же","Плавление тв.→газ"],a:0,ex:"Плавление — переход тв. в жид. состояние при $T_\\text{пл}$. Кристаллизация — обратный процесс."},
|
||
{q:"Почему температура вещества при плавлении не меняется?",opts:["Плавление идёт очень быстро","Вся энергия идёт на разрушение кристаллической решётки, а не на разгон молекул","Температура не может расти быстрее","Плавление экзотермично"],a:1,ex:"При плавлении теплота тратится на разрушение кристаллической решётки (рост потенциальной энергии), а не на ускорение молекул. Кинетическая энергия не растёт — $T = \\text{const}$."},
|
||
{q:"Можно ли расплавить гвоздь, посыпав на него лёд при 0°C?",opts:["Да, лёд поглощает тепло из гвоздя","Нет — 0°C намного ниже $t_\\text{пл}$ железа (1539°C)","Да, при таянии выделяется тепло","Нет, железо тяжелее льда"],a:1,ex:"Температура плавления железа 1539°C. Лёд при 0°C будет поглощать тепло от гвоздя, а не давать его."},
|
||
{q:"В каком состоянии находится свинец при $t = 330$°C? $t_\\text{пл}$(Pb) = 327°C.",opts:["Твёрдом","Жидком — $t > t_\\text{пл}$","Газообразном","Переходном"],a:1,ex:"330°C > 327°C ($t_\\text{пл}$ свинца) → свинец в жидком состоянии."},
|
||
{q:"Принесли лёд при −5°C в сарай при 0°C. Будет ли таять?",opts:["Да, сразу начнёт","Лёд нагреется до 0°C, затем начнётся медленное плавление (если есть приток тепла)","Нет — лёд не тает при 0°C","Зависит от размера"],a:1,ex:"Лёд холоднее воздуха сарая → поглощает тепло, нагревается до 0°C. При $t_\\text{сарая} = 0$°C плавление идёт очень медленно."},
|
||
{q:"Как изменяется внутренняя энергия при плавлении кристаллического тела?",opts:["Уменьшается","Не изменяется","Увеличивается — за счёт потенциальной энергии молекул","Сначала растёт, потом уменьшается"],a:2,ex:"При плавлении разрушается кристаллическая решётка. Потенциальная энергия молекул растёт — внутренняя энергия увеличивается."},
|
||
{q:"Почему верхняя часть парафиновой свечи расплавлена, а нижняя — твёрдая?",opts:["Парафин плавится только от огня","Теплопроводность парафина низкая — тепло не доходит до низа","Нижнюю часть охлаждает воздух","Нижняя часть другого состава"],a:1,ex:"Теплопроводность парафина невысока. Пламя нагревает область у фитиля выше $t_\\text{пл}$, но внизу температура падает ниже $t_\\text{пл}$."}
|
||
];
|
||
|
||
var TASKS_P9 = [
|
||
{q:"Что выделит больше тепла при кристаллизации 1 кг: медь ($\\lambda=205$ кДж/кг) или алюминий ($\\lambda=390$ кДж/кг)?",opts:["Медь","Алюминий — в 390/205 ≈ 1,9 раза больше","Одинаково","Зависит от температуры"],a:1,ex:"$Q(\\text{Cu}) = 205$ кДж; $Q(\\text{Al}) = 390$ кДж. Алюминий выделяет в ≈1,9 раза больше теплоты при кристаллизации."},
|
||
{q:"На сколько увеличится внутренняя энергия серебра $m = 2$ кг при плавлении? $\\lambda(\\text{Ag}) = 88$ кДж/кг.",hint:"$\\Delta U = Q = \\lambda m$",unit:"кДж",a:176,ex:"$\\Delta U = 88 \\times 2 = 176$ кДж. Вся теплота плавления идёт на увеличение потенциальной энергии молекул."},
|
||
{q:"Сколько теплоты нужно, чтобы расплавить золото $V = 60$ см³ при $t_\\text{пл}$? $\\rho = 19\\,300$ кг/м³, $\\lambda = 67$ кДж/кг.",hint:"$m = \\rho V$; $Q = \\lambda m$",unit:"кДж",a:77.5,ex:"$m = 19300 \\times 60 \\cdot 10^{-6} = 1{,}158$ кг; $Q = 67 \\times 1{,}158 \\approx 77{,}5$ кДж"},
|
||
{q:"Сколько теплоты нужно, чтобы расплавить лёд $m = 3$ кг при $t = 0$°C? $\\lambda = 333$ кДж/кг.",hint:"$Q = \\lambda m$",unit:"кДж",a:999,ex:"$Q = 333 \\times 3 = 999$ кДж"},
|
||
{q:"Сколько теплоты нужно для льда $m = 3$ кг при $t = -10$°C? $c_\\text{льда} = 2090$ Дж/(кг·°C), $\\lambda = 333$ кДж/кг.",hint:"$Q = cm \\cdot 10 + \\lambda m$ (нагрев до 0°C + плавление)",unit:"кДж",a:1062,ex:"$Q_1 = 2090 \\times 3 \\times 10 = 62{,}7$ кДж; $Q_2 = 999$ кДж; $Q = 1061{,}7 \\approx 1062$ кДж"},
|
||
{q:"Что означает $\\lambda(\\text{олова}) = 60\\,300$ Дж/кг?",opts:["Олово плавится при 60 300°C","Для плавления 1 кг олова при $t_\\text{пл}$ нужно 60 300 Дж теплоты","При кристаллизации 1 г олова выделяется 60 300 Дж","Масса олова при плавлении"],a:1,ex:"Удельная теплота плавления $\\lambda = 60\\,300$ Дж/кг означает: для перехода 1 кг олова из твёрдого в жидкое при $t_\\text{пл}$ необходимо $60\\,300$ Дж."},
|
||
{q:"Сколько кДж теплоты нужно для плавления серебра $m = 500$ г? $\\lambda(\\text{Ag}) = 88$ кДж/кг.",hint:"$Q = \\lambda m$",unit:"кДж",a:44,ex:"$Q = 88 \\times 0{,}5 = 44$ кДж"},
|
||
{q:"Какое количество теплоты выделяется при кристаллизации жидкого кислорода $m = 2{,}0$ кг при $t = -219$°C? $\\lambda_{O_2} = 13{,}8$ кДж/кг.",hint:"$Q = \\lambda m$",unit:"кДж",a:27.6,ex:"$Q = 13{,}8 \\times 2{,}0 = 27{,}6$ кДж. При кристаллизации выделяется столько же, сколько поглощается при плавлении."},
|
||
{q:"Определите плотность льда при $t = 0{,}0$°C, если для плавления $V = 1{,}00$ дм³ льда требуется $Q = 301{,}5$ кДж. $\\lambda = 333$ кДж/кг.",hint:"$m = Q/\\lambda$; $\\rho = m/V$",unit:"кг/м³",a:905,ex:"$m = 301500/333000 = 0{,}905$ кг; $\\rho = 0{,}905/10^{-3} = 905$ кг/м³. Лёд легче воды — поэтому плавает!"},
|
||
{q:"В калориметр со льдом при $t_1 = 0{,}0$°C влили воду $m_2 = 0{,}50$ кг при $t_2 = 30$°C. Лёд полностью растаял, $T = 0{,}0$°C. Найдите массу льда.",hint:"Всё тепло воды → плавление льда: $cm_2 t_2 = \\lambda m_1$",unit:"кг",a:0.189,ex:"$m_1 = 4200 \\times 0{,}5 \\times 30 / 333000 = 0{,}189$ кг"},
|
||
{q:"Калориметр: лёд $m_1 = 0{,}10$ кг при $0$°C + вода $m_2 = 0{,}50$ кг при $t_2 = 70$°C. Найдите конечную температуру.",hint:"Проверь: тепла достаточно для плавления? Затем $Q_\\text{ост} = c(m_1+m_2)T$",unit:"°C",a:45,ex:"$Q_\\text{воды} = 4200 \\times 0{,}5 \\times 70 = 147\\,000$ Дж; $Q_\\text{пл} = 333\\,000 \\times 0{,}1 = 33\\,300$ Дж; $Q_\\text{ост} = 113\\,700$ Дж; $T = 113700/(4200 \\times 0{,}6) \\approx 45$°C"},
|
||
{q:"В калориметр: снег $m_1 = 100$ г при $0$°C + железная гиря $m_2 = 200$ г при $t_2 = 100$°C. Сколько снега растает? $c_\\text{Fe} = 460$ Дж/(кг·°C), $\\lambda = 333$ кДж/кг.",hint:"$Q_\\text{гири} = c_{Fe}m_2 \\cdot 100$; $m_\\text{расплавленного} = Q_\\text{гири}/\\lambda$",unit:"г",a:27.6,ex:"$Q = 460 \\times 0{,}2 \\times 100 = 9200$ Дж; $m = 9200/333000 \\approx 0{,}0276$ кг = 27,6 г — лишь четверть снега растает."}
|
||
];
|
||
|
||
var TASKS_P10 = [
|
||
{q:"В каком флаконе духи сохраняются дольше — с узким или широким горлышком?",opts:["С широким","С узким — меньше площадь испарения","Одинаково","С широким — лучше циркуляция"],a:1,ex:"Скорость испарения зависит от площади поверхности. Узкое горлышко уменьшает площадь → медленнее испарение."},
|
||
{q:"Почему бельё сохнет быстрее при ветре?",opts:["Ветер нагревает бельё","Ветер удаляет насыщенный пар — испарение ускоряется","Ветер давит на бельё","Ветер охлаждает воду"],a:1,ex:"Ветер уносит насыщенный пар и заменяет его ненасыщенным воздухом → давление пара над поверхностью падает → испарение ускоряется."},
|
||
{q:"Почему мокрая тряпка охлаждает сосуд в жару?",opts:["Тряпка отражает излучение","При испарении воды поглощается тепло тела/сосуда","Тряпка плохо проводит тепло","Создаёт давление"],a:1,ex:"Испарение — эндотермический процесс. Нужная энергия поглощается из сосуда и воды. Сосуд охлаждается."},
|
||
{q:"Будет ли испаряться вода из стакана при t = −2°C?",opts:["Нет — при отрицательной температуре испарение невозможно","Да — испарение идёт при любой температуре, только медленнее","Нет — вода замёрзнет","Только при ветре"],a:1,ex:"Испарение происходит при любой температуре выше абсолютного нуля. При −2°C очень медленно."},
|
||
{q:"Нарушится ли равновесие весов, если на одну чашу поставить ацетон, на другую — воду?",opts:["Нет","Да — чаша с ацетоном поднимется (ацетон испаряется быстрее, масса уменьшается)","Да — поднимется чаша с водой","Зависит от объёма"],a:1,ex:"Ацетон испаряется намного быстрее воды. Масса ацетона уменьшается быстрее — его чаша поднимается."},
|
||
{q:"Почему купальщик ощущает холод, выходя из воды?",opts:["Воздух холоднее воды","Вода испаряется с кожи и поглощает тепло тела","Мокрая кожа лучше проводит тепло","Мокрая одежда тяжелее"],a:1,ex:"Вода на коже испаряется — при испарении поглощается тепло. Источник тепла — тело, поэтому человек ощущает охлаждение."},
|
||
{q:"Почему вспотевшему человеку вредно выходить на холодный воздух?",opts:["Холодный воздух вреден напрямую","На холоде пот испаряется быстрее, резко охлаждая тело","Пот замерзает","Влажная кожа хуже защищает"],a:1,ex:"На холодном воздухе испарение пота резко ускоряется. Интенсивное охлаждение тела может привести к болезни."},
|
||
{q:"Какое значение для человека имеет потоотделение?",opts:["Выводит токсины","Регулирует температуру тела: испарение пота охлаждает кожу при перегреве","Увлажняет кожу","Защищает от ультрафиолета"],a:1,ex:"Испарение пота — главный механизм терморегуляции организма. Предотвращает перегрев в жару."}
|
||
];
|
||
|
||
var TASKS_P11 = [
|
||
{q:"Как разделить смесь воды и спирта?",opts:["Фильтрованием","Дистилляцией — нагреть до $t_\\text{кип}$ спирта (78°C), он испаряется первым","Охлаждением","Центрифугированием"],a:1,ex:"Дистилляция: нагреваем до 78°C — спирт кипит первым. Его пар конденсируют отдельно."},
|
||
{q:"Где мясо сварится быстрее: у подножия Эвереста или на вершине (~31 кПа)?",opts:["На вершине","У подножия — давление больше, $t_\\text{кип}$ воды выше (~100°C > ~70°C)","Одинаково","На вершине — мясо сохнет"],a:1,ex:"На вершине давление ~31 кПа → $t_\\text{кип} \\approx 70$°C. При 70°C мясо варится намного медленнее."},
|
||
{q:"Сколько теплоты нужно, чтобы превратить воду $m = 2$ кг при 100°C в пар? $L = 2260$ кДж/кг.",hint:"$Q = Lm$",unit:"кДж",a:4520,ex:"$Q = 2260 \\times 2 = 4520$ кДж"},
|
||
{q:"Почему ожог паром при 100°C опаснее ожога водой при 100°C?",opts:["Пар горячее воды","При конденсации пара выделяется дополнительная теплота $L \\approx 2260$ кДж/кг","Пар проникает в поры","Пар содержит активные молекулы"],a:1,ex:"Пар, конденсируясь на коже, выделяет теплоту $L$. Суммарно кожа получает намного больше тепла от пара, чем от воды той же массы."},
|
||
{q:"Скороварка готовит быстрее. Почему?",opts:["Давление уплотняет пищу","Повышенное давление поднимает $t_\\text{кип}$ воды выше 100°C","Лучше проводит тепло","Меньше воздуха"],a:1,ex:"В скороварке давление выше атмосферного → $t_\\text{кип}$ воды > 100°C → еда готовится при более высокой температуре."},
|
||
{q:"Что происходит на горизонтальном участке графика $T(t)$ при нагреве воды?",opts:["Нагрев жидкости","Кипение — $T = \\text{const}$, вся теплота идёт на парообразование","Конденсация пара","Плавление льда"],a:1,ex:"При кипении $T = \\text{const}$ (100°C для воды). Вся теплота идёт на разрыв межмолекулярных связей, а не на разгон молекул."},
|
||
{q:"Сколько теплоты выделится при конденсации пара $m = 0{,}1$ кг при 100°C? $L = 2260$ кДж/кг.",hint:"$Q = Lm$ (выделяется)",unit:"кДж",a:226,ex:"$Q = 2260 \\times 0{,}1 = 226$ кДж. При конденсации выделяется столько же, сколько затрачивается на испарение той же массы."},
|
||
{q:"Что такое удельная теплота парообразования $L$?",opts:["Количество теплоты для нагрева 1 кг на 1°C","Количество теплоты для превращения 1 кг жидкости в пар при $t_\\text{кип}$","Температура кипения","Давление кипения"],a:1,ex:"$L$ — удельная теплота парообразования: количество теплоты для превращения 1 кг жидкости в пар при $t_\\text{кип}$. Единица: Дж/кг."},
|
||
{q:"Сколько теплоты нужно для превращения льда $m = 200$ г при 0°C в пар при 100°C? $\\lambda=333$ кДж/кг, $c=4200$ Дж/(кг·°C), $L=2260$ кДж/кг.",hint:"$Q = \\lambda m + cm \\cdot 100 + Lm$",unit:"кДж",a:602.6,ex:"$Q_1 = 333 \\times 0{,}2 = 66{,}6$ кДж; $Q_2 = 4200 \\times 0{,}2 \\times 100 = 84$ кДж; $Q_3 = 2260 \\times 0{,}2 = 452$ кДж; $Q = 602{,}6$ кДж"},
|
||
{q:"Какое количество теплоты нужно передать ацетону $m = 2{,}0$ кг при температуре кипения, чтобы перевести его в пар? $L_\\text{ацетона} = 520$ кДж/кг.",hint:"$Q = Lm$",unit:"кДж",a:1040,ex:"$Q = 520 \\times 2{,}0 = 1040$ кДж"},
|
||
{q:"Вычислите удельную теплоту парообразования жидкого азота, если $m = 4{,}0$ г азота при переходе в пар при $t_\\text{кип}$ поглощает $Q = 804$ Дж.",hint:"$L = Q/m$",unit:"кДж/кг",a:201,ex:"$L = 804/0{,}004 = 201\\,000$ Дж/кг = 201 кДж/кг"},
|
||
{q:"Какую массу водяного пара при $t = 100$°C надо впустить в $V = 1{,}0$ л воды при $t_1 = 20$°C, чтобы конечная температура стала 100°C?",hint:"$Lm_\\text{пара} = cm_\\text{воды}(100-20)$",unit:"г",a:149,ex:"$m_\\text{пара} = 4200 \\times 1 \\times 80 / 2\\,260\\,000 \\approx 0{,}149$ кг = 149 г"},
|
||
{q:"В калориметр с кипящей водой (100°C) бросили медный шар $m = 0{,}50$ кг при $t = 500$°C. Определите массу испарившейся воды. $c_\\text{Cu} = 385$ Дж/(кг·°C), $L = 2260$ кДж/кг.",hint:"$c_\\text{Cu}m(500-100) = Lm_\\text{пара}$",unit:"г",a:34,ex:"$Q = 385 \\times 0{,}5 \\times 400 = 77\\,000$ Дж; $m_\\text{пара} = 77000/2260000 \\approx 0{,}034$ кг = 34 г"},
|
||
{q:"Какую массу воды при $t_\\text{кип} = 100$°C можно испарить, затратив столько же теплоты, сколько нужно для плавления льда $m_1 = 1{,}0$ кг при 0°C? $\\lambda=333$ кДж/кг, $L=2260$ кДж/кг.",hint:"$\\lambda m_1 = Lm_2$",unit:"г",a:147,ex:"$Q = 333\\,000$ Дж; $m_2 = 333000/2260000 \\approx 0{,}147$ кг = 147 г"},
|
||
{q:"В каком процессе поглощается больше теплоты: при плавлении льда $m_1 = 10$ кг или при испарении воды $m_2 = 1{,}0$ кг при 100°C? $\\lambda=333$ кДж/кг, $L=2260$ кДж/кг.",opts:["Плавление льда поглощает больше: $Q_1 = 3330$ кДж $> Q_2 = 2260$ кДж","Испарение воды поглощает больше: $Q_2 = 2260$ кДж $> Q_1 = 333$ кДж","Плавление льда: $Q_1 = 333$ кДж; испарение воды: $Q_2 = 2260$ кДж — испарение больше","Одинаково"],a:0,ex:"$Q_1 = \\lambda m_1 = 333 \\times 10 = 3330$ кДж; $Q_2 = L m_2 = 2260 \\times 1 = 2260$ кДж. Плавление $10$ кг льда требует больше энергии."}
|
||
];
|
||
|
||
var TASKS_HARD = [
|
||
{para:"§6",q:"Смешали воду $m_1 = 0{,}5$ кг при 80°C и $m_2 = 0{,}3$ кг при 10°C. Температура смеси?",hint:"$cm_1(t_1-t)=cm_2(t-t_2)$",unit:"°C",a:53.75,ex:"$0{,}5(80-t)=0{,}3(t-10)$; $40-0{,}5t=0{,}3t-3$; $43=0{,}8t$; $t \\approx 53{,}75$°C"},
|
||
{para:"§7",q:"Тепловоз сжигает 400 кг дизельного топлива ($q=43$ МДж/кг) за 1 час. Мощность двигателя при КПД=25%?",hint:"$P = qm\\eta / t$",unit:"кВт",a:1194,ex:"$Q=43\\times10^6\\times400\\times0{,}25=4{,}3\\times10^9$ Дж; $P=4{,}3\\times10^9/3600\\approx 1194$ кВт"},
|
||
{para:"§9",q:"Серебро $m = 500$ г нагрели от 20°C до $t_\\text{пл} = 962$°C и расплавили. Суммарная теплота? $c=235$, $\\lambda=88$ кДж/кг.",hint:"$Q = cm\\Delta t + \\lambda m$",unit:"кДж",a:154.5,ex:"$Q_1=235\\times0{,}5\\times942=110{,}7$ кДж; $Q_2=88\\times0{,}5=44$ кДж; $Q\\approx154{,}7$ кДж"},
|
||
{para:"§6",q:"Из какого металла деталь $m=400$ г, если при $\\Delta t=50$°C поглощает $Q=18\\,400$ Дж?",opts:["Алюминий ($c=900$)","Железо ($c=460$)","Медь ($c=385$)","Свинец ($c=128$)"],a:0,ex:"$c=Q/(m\\Delta t)=18400/(0{,}4\\times50)=920$ Дж/(кг·°C). Ближайшее — алюминий ($c=900$ Дж/(кг·°C))."},
|
||
{para:"§11",q:"Пар $m=100$ г при 100°C конденсировался и остыл до 20°C. Сколько теплоты выделилось? $L=2260$, $c=4200$.",hint:"$Q = Lm + cm\\Delta t$",unit:"кДж",a:259.6,ex:"$Q_1=2260\\times0{,}1=226$ кДж; $Q_2=4200\\times0{,}1\\times80=33{,}6$ кДж; $Q=259{,}6$ кДж"},
|
||
{para:"§9",q:"Сколько льда при 0°C расплавит 1 кг воды, охлаждаясь от 80°C до 0°C? $c=4200$ Дж/(кг·°C), $\\lambda=333\\,000$ Дж/кг.",hint:"$Q_\\text{воды} = \\lambda \\cdot m_\\text{льда}$",unit:"г",a:1009,ex:"$Q=4200\\times1\\times80=336\\,000$ Дж; $m_\\text{льда}=336000/333000\\approx1{,}009$ кг $\\approx1009$ г"},
|
||
{para:"§8",q:"На каких участках графика нагрева вещества (AB, BC, CD, DE) температура не меняется?",opts:["AB","BC и DE","CD","Только AB"],a:1,ex:"На участках BC (плавление) и DE (кипение) $T = \\text{const}$, т.к. вся теплота идёт на фазовый переход."},
|
||
{para:"§7",q:"Сколько дров ($q=10$ МДж/кг) нужно для нагрева 50 кг воды от 20 до 100°C при КПД=60%? $c=4200$ Дж/(кг·°C).",hint:"$m = Q_\\text{пол}/(q\\eta)$; $Q_\\text{пол}=cm\\Delta t$",unit:"кг",a:2.8,ex:"$Q=4200\\times50\\times80=16{,}8$ МДж; $m=16{,}8/(10\\times0{,}6)=2{,}8$ кг"},
|
||
{para:"§6",q:"Молот $m_1=600$ кг падает с $h=5{,}0$ м на стальную плиту $m_2=10$ кг. 40% механической энергии → нагрев плиты. $c_\\text{ст}=460$ Дж/(кг·°C). Найдите $\\Delta t$ плиты.",hint:"$Q=0{,}4 m_1 g h$; $\\Delta t = Q/(c m_2)$",unit:"°C",a:2.6,ex:"$Q=0{,}4\\times600\\times10\\times5=12\\,000$ Дж; $\\Delta t=12000/(460\\times10)\\approx2{,}6$°C"},
|
||
{para:"§6",q:"С какой высоты должен упасть свинцовый шарик, чтобы его температура выросла на $\\Delta t=1{,}0$°C? 60% механической → теплота. $c_\\text{Pb}=128$ Дж/(кг·°C).",hint:"$0{,}6 mgh=cm\\Delta t$ → $m$ сокращается",unit:"м",a:21.3,ex:"$h=c\\Delta t/(0{,}6g)=128\\times1/(0{,}6\\times10)=21{,}3$ м"},
|
||
{para:"§9",q:"Нагретую железную болванку $m_\\text{Fe}=2{,}0$ кг поставили на лёд при $t_x=-10$°C. Под болванкой расплавилось $m_\\text{л}=150$ г льда. До какой температуры была нагрета болванка? $c_\\text{Fe}=460$, $c_\\text{л}=2100$ Дж/(кг·°C), $\\lambda=333$ кДж/кг.",hint:"$c_\\text{Fe}m_\\text{Fe}(t_\\text{ж}-0) = c_\\text{л}m_\\text{л}(0-t_x)+\\lambda m_\\text{л}$",unit:"°C",a:58,ex:"$460\\times2\\times t_\\text{ж} = 2100\\times0{,}15\\times10+333000\\times0{,}15 = 3150+49950=53100$; $t_\\text{ж}=53100/920\\approx58$°C"},
|
||
{para:"§7",q:"При смешивании бурого ($m_\\text{б}=2m_\\text{к}$, $q_\\text{б}=15$ МДж/кг) и каменного ($q_\\text{к}=27$ МДж/кг) угля выделилось $Q=78{,}2$ МДж. Найдите массу каменного угля.",hint:"$Q=q_\\text{б}\\cdot2m_\\text{к}+q_\\text{к}\\cdot m_\\text{к}=(2q_\\text{б}+q_\\text{к})m_\\text{к}$",unit:"кг",a:1.37,ex:"$(30+27)m_\\text{к}=78{,}2$; $m_\\text{к}=78{,}2/57\\approx1{,}37$ кг; $m_\\text{б}=2{,}74$ кг"},
|
||
{para:"§11",q:"Пар $m_2=100$ г при $t_2=100$°C конденсировался и охладился до $T=15$°C в калориметре, растопив при этом лёд при $t_1=-10$°C. Найдите массу льда. $c_\\text{л}=2090$, $c_\\text{в}=4200$ Дж/(кг·°C), $\\lambda=333$, $L=2260$ кДж/кг.",hint:"$Q_\\text{пара}=Lm_2+c_\\text{в}m_2\\cdot85$; $Q_\\text{льда}=c_\\text{л}m_1\\cdot10+\\lambda m_1+c_\\text{в}m_1\\cdot15$",unit:"г",a:73,ex:"$Q_\\text{пара}=2260\\times0{,}1+4200\\times0{,}1\\times85=226+357=583$ кДж ... $Q_\\text{льда}=(2090\\times10+333000+4200\\times15)\\times m_1=(20900+333000+63000)m_1=416900m_1$; $m_1=583000/416900\\approx0{,}073$ кг=73 г",tol:0.05},
|
||
{para:"§9",q:"Найдите объём воды при $t=20$°C, при кристаллизации которой выделяется столько же теплоты, сколько при полном сгорании бензина $m=1{,}0$ кг. $q_\\text{б}=47$ МДж/кг, $\\lambda_\\text{воды}=333$ кДж/кг.",hint:"$qm_\\text{б}=\\lambda m_\\text{воды}$; $V=m/\\rho$",unit:"л",a:141,ex:"$Q=47\\times10^6$ Дж; $m_\\text{воды}=47\\times10^6/333000\\approx141$ кг; $V=141/1000\\times1000=141$ л"},
|
||
{para:"§11",q:"Электрочайник нагревает воду от $t_1=70$°C до $t_2=80$°C за $\\tau_1=3{,}0$ мин, а охлаждается от 80°C до 70°C за $\\tau_2=9{,}0$ мин. Какая часть теплоты, выделяемой спиралью, рассеивается в среду?",hint:"$P_\\text{рассеяния}/P_\\text{спирали} = \\tau_1/\\tau_2$",unit:"%",a:33.3,ex:"При нагреве: $P_\\text{сп}-P_\\text{расс}=cm\\Delta t/\\tau_1$. При охлаждении: $P_\\text{расс}=cm\\Delta t/\\tau_2$. Отношение: $P_\\text{расс}/P_\\text{сп}=\\tau_1/(\\tau_1+\\tau_2)=3/9=1/3\\approx33{,}3\\%$",tol:0.05}
|
||
];
|
||
|
||
// ═══════════════════════════════════════
|
||
// ПУЛЫ И СОСТОЯНИЯ
|
||
// ═══════════════════════════════════════
|
||
var POOLS = {
|
||
p1:TASKS_P1, p2:TASKS_P2, p3:TASKS_P3, p4:TASKS_P4, p5:TASKS_P5,
|
||
p6:TASKS_P6, p7:TASKS_P7, p8:TASKS_P8, p9:TASKS_P9, p10:TASKS_P10,
|
||
p11:TASKS_P11, 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 = {
|
||
p1:mkState(TASKS_P1), p2:mkState(TASKS_P2), p3:mkState(TASKS_P3),
|
||
p4:mkState(TASKS_P4), p5:mkState(TASKS_P5), p6:mkState(TASKS_P6),
|
||
p7:mkState(TASKS_P7), p8:mkState(TASKS_P8), p9:mkState(TASKS_P9),
|
||
p10:mkState(TASKS_P10), p11:mkState(TASKS_P11), 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) {
|
||
['p1','p2','p3','p4','p5','p6','p7','p8','p9','p10','p11','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(220,38,38,.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 ? 'Неплохо. Повтори формулы и попробуй ещё раз.' :
|
||
'Прочитай теорию и реши снова.';
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// ЗАГЛУШКИ ИНТЕРАКТИВОВ
|
||
// ═══════════════════════════════════════
|
||
var anim1Id=null, anim4Id=null, anim5Id=null, anim10Id=null, anim11Id=null;
|
||
|
||
// ═══ §1: Молекулярное движение Pro Max (RAF) ═══
|
||
// Maxwell-Boltzmann распределение + упругие столкновения + переключение веществ
|
||
var sl1Tval = 20, state1 = 'solid', subst1 = 'H2O';
|
||
var atoms1 = [];
|
||
var SUBST1 = {
|
||
H2O: { name:'H₂O', mass:1.0, radius:4.5, tmelt:0, tboil:100, color:'#60a5fa' },
|
||
Fe: { name:'Fe', mass:3.1, radius:5.5, tmelt:1539, tboil:2862, color:'#a8a29e' },
|
||
Ar: { name:'Ar', mass:1.5, radius:4.0, tmelt:-189, tboil:-186, color:'#c4b5fd' }
|
||
};
|
||
|
||
function setState1(s) {
|
||
state1 = s;
|
||
['solid','liq','gas'].forEach(function(k,i){
|
||
var ids = ['btn1solid','btn1liq','btn1gas'];
|
||
var states = ['solid','liquid','gas'];
|
||
var btn = document.getElementById(ids[i]);
|
||
if(btn){ btn.style.background = s===states[i]?'var(--pri)':''; btn.style.color = s===states[i]?'#fff':''; }
|
||
});
|
||
startAnim1();
|
||
}
|
||
|
||
function setSubst1(name){
|
||
subst1 = name;
|
||
['H2O','Fe','Ar'].forEach(function(k){
|
||
var btn = document.getElementById('btn1sub'+k);
|
||
if(btn){ btn.style.background = subst1===k?'var(--pri)':''; btn.style.color = subst1===k?'#fff':''; }
|
||
});
|
||
// Авто-предложение состояния по T и вещества
|
||
var T = sl1Tval, sp = SUBST1[subst1];
|
||
if(T < sp.tmelt) setState1('solid');
|
||
else if(T < sp.tboil) setState1('liquid');
|
||
else setState1('gas');
|
||
upd1ChipE();
|
||
}
|
||
|
||
function upd1ChipE(){
|
||
var ch = document.getElementById('chipKE1');
|
||
if(!ch) return;
|
||
var T = (sl1Tval||20)+273; // в Кельвинах
|
||
var sp = SUBST1[subst1];
|
||
// ⟨Eₖ⟩ ∝ T (в условных единицах для наглядности)
|
||
var ke = (T*0.012).toFixed(1);
|
||
ch.textContent = '⟨Eₖ⟩ ~ '+ke+' усл.ед · m='+sp.mass.toFixed(1);
|
||
}
|
||
|
||
// Maxwell-Boltzmann: вернуть скорость для частицы при данной T
|
||
function mbSpeed(T, mass){
|
||
// Box-Muller для нормально распределённой компоненты
|
||
function gauss(){
|
||
var u=Math.random(), v=Math.random();
|
||
return Math.sqrt(-2*Math.log(u||0.001))*Math.cos(2*Math.PI*v);
|
||
}
|
||
// σ = sqrt(kT/m) — три компоненты, берём 2 (плоскость)
|
||
var sigma = Math.sqrt(Math.max(20,T+50)/mass)*0.18;
|
||
return { vx: gauss()*sigma, vy: gauss()*sigma };
|
||
}
|
||
|
||
function startAnim1() {
|
||
var cv = document.getElementById('cv1');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim1Id) { cancelAnimationFrame(anim1Id); anim1Id = null; }
|
||
var dpr = Math.min(window.devicePixelRatio||1, 2);
|
||
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 cols = 12, rows = 8, n = cols * rows;
|
||
var sp = SUBST1[subst1];
|
||
if (!atoms1.length || atoms1.length !== n) {
|
||
atoms1 = [];
|
||
for (var i = 0; i < n; i++) {
|
||
var c = i % cols, r = Math.floor(i / cols);
|
||
var mb = mbSpeed(sl1Tval, sp.mass);
|
||
atoms1.push({
|
||
bx: (c + 0.5) * W / cols,
|
||
by: (r + 0.5) * H / rows,
|
||
ox: 0, oy: 0,
|
||
vx: mb.vx, vy: mb.vy,
|
||
phase: Math.random() * Math.PI * 2
|
||
});
|
||
}
|
||
}
|
||
|
||
var t0 = performance.now();
|
||
function frame(now) {
|
||
// фоновая заливка (мягкая, в тон canvas)
|
||
ctx.fillStyle = '#1e1b4b';
|
||
ctx.fillRect(0,0,W,H);
|
||
|
||
var T = (sl1Tval || 20);
|
||
var spLocal = SUBST1[subst1];
|
||
var R = spLocal.radius;
|
||
var amp = state1 === 'gas' ? 0 : state1 === 'liquid' ? T / 100 * 7 + 1 : T / 100 * 3 + 0.5;
|
||
var spd = T / 100 * (state1 === 'gas' ? 3 : 0.5) + 0.2;
|
||
var dt = Math.min(0.04, (now - t0) / 1000); t0 = now;
|
||
|
||
// Гистограмма скоростей в углу
|
||
var hist = new Array(8).fill(0);
|
||
var maxV = 0;
|
||
for(var k=0;k<n;k++){ var v=Math.hypot(atoms1[k].vx,atoms1[k].vy); if(v>maxV) maxV=v; }
|
||
|
||
// Расчёт положений + упругие столкновения для газа
|
||
if(state1==='gas'){
|
||
// адаптация скоростей к новой T (мягкая)
|
||
var targetSigma = Math.sqrt(Math.max(20,T+50)/spLocal.mass)*0.18;
|
||
for(var i=0;i<n;i++){
|
||
var a = atoms1[i];
|
||
// плавный пересчёт абсолютной скорости
|
||
var cur = Math.hypot(a.vx, a.vy)||0.001;
|
||
var want = Math.abs(targetSigma)*1.4;
|
||
var sc = 1 + (want-cur)*0.02/cur;
|
||
a.vx *= sc; a.vy *= sc;
|
||
a.ox += a.vx * 60 * dt;
|
||
a.oy += a.vy * 60 * dt;
|
||
var ax = a.bx + a.ox, ay = a.by + a.oy;
|
||
if (ax < R || ax > W - R) { a.vx *= -1; a.ox += a.vx*2*dt*60; }
|
||
if (ay < R || ay > H - R) { a.vy *= -1; a.oy += a.vy*2*dt*60; }
|
||
}
|
||
// Упругие столкновения O(n²) — для 96 частиц вполне ОК
|
||
for(var i=0;i<n;i++){
|
||
for(var j=i+1;j<n;j++){
|
||
var a=atoms1[i], b=atoms1[j];
|
||
var ax=a.bx+a.ox, ay=a.by+a.oy, bx=b.bx+b.ox, by=b.by+b.oy;
|
||
var dx=bx-ax, dy=by-ay, d2=dx*dx+dy*dy;
|
||
var minD = R*2;
|
||
if(d2 < minD*minD && d2 > 0.01){
|
||
var d = Math.sqrt(d2);
|
||
var nx = dx/d, ny = dy/d;
|
||
// относительная скорость по нормали
|
||
var dvx=b.vx-a.vx, dvy=b.vy-a.vy;
|
||
var p = dvx*nx + dvy*ny;
|
||
if(p<0){
|
||
// обмен импульсами (равные массы для простоты визуала)
|
||
a.vx += p*nx; a.vy += p*ny;
|
||
b.vx -= p*nx; b.vy -= p*ny;
|
||
// раздвинуть, чтобы не залипали
|
||
var overlap = (minD-d)/2;
|
||
a.ox -= nx*overlap; a.oy -= ny*overlap;
|
||
b.ox += nx*overlap; b.oy += ny*overlap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Отрисовка
|
||
for (var i = 0; i < n; i++) {
|
||
var a = atoms1[i];
|
||
var x,y;
|
||
if (state1 === 'gas') {
|
||
x = a.bx + a.ox; y = a.by + a.oy;
|
||
} else {
|
||
var ph = (now / 200 + a.phase);
|
||
a.ox = Math.sin(ph * 1.3) * amp * (0.8 + 0.4 * Math.sin(i));
|
||
a.oy = Math.cos(ph * 1.1) * amp * (0.8 + 0.4 * Math.cos(i));
|
||
if (state1 === 'liquid') {
|
||
a.bx += (Math.random() - 0.5) * 0.3;
|
||
a.by += (Math.random() - 0.5) * 0.3;
|
||
a.bx = Math.max(R+2, Math.min(W-R-2, a.bx));
|
||
a.by = Math.max(R+2, Math.min(H-R-2, a.by));
|
||
}
|
||
x = a.bx + a.ox; y = a.by + a.oy;
|
||
}
|
||
|
||
// Цвет по индивидуальной скорости (Maxwell-Boltzmann визуально)
|
||
var v = Math.hypot(a.vx, a.vy);
|
||
var vNorm = maxV>0 ? Math.min(1, v/(maxV*0.7)) : 0;
|
||
var Tfrac = Math.min(1, T / 200);
|
||
var frac = state1==='gas' ? vNorm : Tfrac;
|
||
|
||
// гистограмма
|
||
hist[Math.min(7,Math.floor(vNorm*8))]++;
|
||
|
||
var r = Math.round(frac * 230 + (1 - frac) * 60);
|
||
var g = Math.round(Math.sin(frac * Math.PI) * 80 + 50);
|
||
var b = Math.round((1 - frac) * 230 + frac * 50);
|
||
|
||
// связи (твёрдое) — кристаллическая решётка
|
||
if (state1 === 'solid' && i % cols < cols - 1) {
|
||
var j = i + 1, nb = atoms1[j];
|
||
ctx.strokeStyle = 'rgba(148,163,184,0.28)';
|
||
ctx.lineWidth = 1.2;
|
||
ctx.beginPath(); ctx.moveTo(x, y);
|
||
ctx.lineTo(nb.bx + nb.ox, nb.by + nb.oy); ctx.stroke();
|
||
}
|
||
|
||
ctx.shadowColor = 'rgb(' + r + ',' + g + ',' + b + ')';
|
||
ctx.shadowBlur = frac * 10 + 3;
|
||
ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
|
||
ctx.beginPath(); ctx.arc(x, y, state1==='gas'? R*0.6 : R, 0, Math.PI*2); ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
}
|
||
|
||
// Maxwell-Boltzmann гистограмма в правом верхнем углу
|
||
if(state1==='gas' && W>240){
|
||
var hx = W - 110, hy = 8, hw = 100, hh = 50;
|
||
ctx.fillStyle = 'rgba(15,23,42,0.7)';
|
||
ctx.fillRect(hx-4, hy-4, hw+8, hh+18);
|
||
ctx.fillStyle = '#cbd5e1';
|
||
ctx.font = '9px system-ui';
|
||
ctx.fillText('распределение скоростей', hx, hy+9);
|
||
var maxH = Math.max.apply(null, hist)||1;
|
||
var bw = hw/hist.length;
|
||
for(var bi=0;bi<hist.length;bi++){
|
||
var bh = hist[bi]/maxH*(hh-12);
|
||
var biFrac = bi/hist.length;
|
||
ctx.fillStyle = 'hsla('+Math.round((1-biFrac)*240)+',80%,60%,0.85)';
|
||
ctx.fillRect(hx + bi*bw + 1, hy+12+(hh-12-bh), bw-2, bh);
|
||
}
|
||
}
|
||
|
||
// Метка вещества и состояния
|
||
ctx.fillStyle = 'rgba(255,255,255,0.55)';
|
||
ctx.font = 'bold 11px system-ui';
|
||
ctx.fillText(spLocal.name + ' · ' + (state1==='solid'?'твёрдое':state1==='liquid'?'жидкое':'газ'), 10, 16);
|
||
|
||
anim1Id = requestAnimationFrame(frame);
|
||
}
|
||
anim1Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ §2: Два способа нагрева ═══
|
||
var anim2Id = null, mode2 = null, piston2y = 0.8, temp2 = 0.1;
|
||
var mols2 = [];
|
||
|
||
function initMols2(W, H) {
|
||
mols2 = [];
|
||
for (var i = 0; i < 40; i++) {
|
||
mols2.push({
|
||
x: 20 + Math.random() * (W / 2 - 40),
|
||
y: 30 + Math.random() * (H - 60),
|
||
vx: (Math.random() - 0.5) * 2,
|
||
vy: (Math.random() - 0.5) * 2
|
||
});
|
||
}
|
||
}
|
||
|
||
function startWork2() {
|
||
mode2 = 'work'; piston2y = 0.8; temp2 = 0.1;
|
||
runAnim2();
|
||
}
|
||
function startHeat2() {
|
||
mode2 = 'heat'; piston2y = 0.8; temp2 = 0.1;
|
||
runAnim2();
|
||
}
|
||
function reset2() {
|
||
if (anim2Id) { cancelAnimationFrame(anim2Id); anim2Id = null; }
|
||
mode2 = null; piston2y = 0.8; temp2 = 0.1; mols2 = [];
|
||
upd2();
|
||
}
|
||
|
||
function upd2() {
|
||
var cv = document.getElementById('cv2');
|
||
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 lW = W / 2 - 5;
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 2;
|
||
ctx.strokeRect(10, 20, lW - 20, H - 40);
|
||
var py = 20 + (H - 40) * piston2y;
|
||
ctx.fillStyle = '#94a3b8'; ctx.fillRect(10, py, lW - 20, 8);
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = '11px system-ui';
|
||
ctx.fillText('Сжатие (работа)', 15, 15);
|
||
|
||
if (!mols2.length) initMols2(W, H);
|
||
for (var mi = 0; mi < mols2.length; mi++) {
|
||
var m = mols2[mi];
|
||
if (m.x < 10 || m.x > lW - 12) m.vx *= -1;
|
||
if (m.y < 25 || m.y > py - 5) m.vy *= -1;
|
||
m.x += m.vx * (1 + temp2 * 3); m.y += m.vy * (1 + temp2 * 3);
|
||
var frac = Math.min(1, temp2);
|
||
ctx.fillStyle = 'rgb(' + Math.round(40 + frac * 190) + ',' + Math.round(100 - frac * 70) + ',220)';
|
||
ctx.beginPath(); ctx.arc(m.x, m.y, 4, 0, Math.PI * 2); ctx.fill();
|
||
}
|
||
|
||
var rx = W / 2 + 5;
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 2;
|
||
ctx.strokeRect(rx, 20, lW - 20, H - 40);
|
||
var wallAlpha = temp2;
|
||
ctx.fillStyle = 'rgba(239,68,68,' + Math.min(1, wallAlpha + 0.1) + ')';
|
||
ctx.fillRect(rx, 20, 8, H - 40);
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = '11px system-ui';
|
||
ctx.fillText('Теплообмен', rx + 12, 15);
|
||
|
||
ctx.fillStyle = 'rgba(148,163,184,0.7)';
|
||
for (var k = 0; k < 20; k++) {
|
||
var mx = rx + 15 + (k % 5) * 20, my = 40 + Math.floor(k / 5) * 35;
|
||
var spd2 = 1 + temp2 * 3;
|
||
ctx.beginPath(); ctx.arc(mx + Math.sin(Date.now() / 300 + k) * spd2, my + Math.cos(Date.now() / 250 + k) * spd2, 4, 0, Math.PI * 2); ctx.fill();
|
||
}
|
||
|
||
var drawTherm = function(x, y, val, lbl) {
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(x, y, 14, 80);
|
||
var fh = Math.min(78, val * 78);
|
||
ctx.fillStyle = 'rgba(239,68,68,0.9)'; ctx.fillRect(x + 1, y + 79 - fh, 12, fh);
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = '10px system-ui';
|
||
ctx.fillText(lbl, x - 5, y + 95);
|
||
ctx.fillText(Math.round(val * 100) + '°', x, y - 4);
|
||
};
|
||
drawTherm(lW - 15, H / 2 - 40, temp2, 'T');
|
||
drawTherm(W - 25, H / 2 - 40, temp2, 'T');
|
||
}
|
||
|
||
function runAnim2() {
|
||
if (anim2Id) { cancelAnimationFrame(anim2Id); anim2Id = null; }
|
||
var cv = document.getElementById('cv2');
|
||
if (!cv) 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);
|
||
if (!mols2.length) initMols2(W, H);
|
||
|
||
function frame() {
|
||
if (mode2 === 'work' && piston2y > 0.2) piston2y -= 0.003;
|
||
if (temp2 < 0.95) temp2 += 0.004;
|
||
upd2Draw(ctx, W, H);
|
||
anim2Id = requestAnimationFrame(frame);
|
||
if (temp2 >= 0.95 && (mode2 !== 'work' || piston2y <= 0.2)) {
|
||
cancelAnimationFrame(anim2Id); anim2Id = null;
|
||
}
|
||
}
|
||
anim2Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
function upd2Draw(ctx, W, H) {
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
var lW = W / 2 - 5;
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 2;
|
||
ctx.strokeRect(10, 20, lW - 20, H - 40);
|
||
var py = 20 + (H - 40) * piston2y;
|
||
ctx.fillStyle = '#94a3b8'; ctx.fillRect(10, py, lW - 20, 8);
|
||
ctx.fillStyle = '#cbd5e1'; ctx.font = '11px system-ui'; ctx.fillText('Сжатие', 15, 15);
|
||
|
||
for (var mi = 0; mi < mols2.length; mi++) {
|
||
var m = mols2[mi];
|
||
if (m.x < 12 || m.x > lW - 14) m.vx *= -1;
|
||
if (m.y < 25 || m.y > py - 6) m.vy *= -1;
|
||
m.x += m.vx * (1 + temp2 * 4); m.y += m.vy * (1 + temp2 * 4);
|
||
m.x = Math.max(12, Math.min(lW - 14, m.x));
|
||
m.y = Math.max(25, Math.min(py - 6, m.y));
|
||
var f = Math.min(1, temp2 * 1.2);
|
||
ctx.fillStyle = 'rgb(' + Math.round(40 + f * 200) + ',' + Math.round(140 - f * 90) + ',' + Math.round(220 - f * 180) + ')';
|
||
ctx.beginPath(); ctx.arc(m.x, m.y, 4, 0, Math.PI * 2); ctx.fill();
|
||
}
|
||
|
||
var rx = W / 2 + 5;
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 2;
|
||
ctx.strokeRect(rx, 20, lW - 20, H - 40);
|
||
var wa = Math.min(1, temp2 * 1.5);
|
||
ctx.fillStyle = 'rgba(239,68,68,' + (0.1 + wa * 0.8) + ')';
|
||
ctx.fillRect(rx, 20, 10, H - 40);
|
||
ctx.fillStyle = '#cbd5e1'; ctx.font = '11px system-ui'; ctx.fillText('Теплообмен', rx + 14, 15);
|
||
|
||
var now = Date.now();
|
||
for (var k = 0; k < 20; k++) {
|
||
var mx2 = rx + 18 + (k % 5) * ((lW - 40) / 5);
|
||
var my2 = 40 + Math.floor(k / 5) * Math.floor((H - 70) / 4);
|
||
var spd3 = 1 + temp2 * 4;
|
||
var f2 = Math.min(1, temp2);
|
||
ctx.fillStyle = 'rgb(' + Math.round(40 + f2 * 200) + ',' + Math.round(140 - f2 * 90) + ',' + Math.round(220 - f2 * 180) + ')';
|
||
ctx.beginPath(); ctx.arc(mx2 + Math.sin(now / 250 + k) * spd3, my2 + Math.cos(now / 210 + k) * spd3, 4, 0, Math.PI * 2); ctx.fill();
|
||
}
|
||
|
||
[{ x: lW - 20, y: H / 2 - 45 }, { x: W - 28, y: H / 2 - 45 }].forEach(function(pos) {
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(pos.x, pos.y, 14, 80);
|
||
var fh = Math.min(78, temp2 * 78);
|
||
ctx.fillStyle = 'rgba(239,68,68,.85)'; ctx.fillRect(pos.x + 1, pos.y + 79 - fh, 12, fh);
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = '10px system-ui';
|
||
ctx.fillText(Math.round(temp2 * 100) + '°', pos.x - 2, pos.y - 5);
|
||
});
|
||
}
|
||
|
||
// ═══ §3: Тепловая волна в стержне ═══
|
||
var anim3Id = null, rod3Heat = new Array(40).fill(0);
|
||
rod3Heat[0] = 1;
|
||
|
||
function upd3() {
|
||
if (anim3Id) return;
|
||
drawRod3();
|
||
}
|
||
|
||
function drawRod3() {
|
||
var cv = document.getElementById('cv3');
|
||
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 = rod3Heat.length, rw = (W - 40) / n, rh = 50, ry = H / 2 - rh / 2;
|
||
|
||
for (var i = 0; i < n; i++) {
|
||
var v = rod3Heat[i];
|
||
var r = Math.round(v * 220 + (1 - v) * 40);
|
||
var g = Math.round((1 - Math.abs(v * 2 - 1)) * 80 + 20);
|
||
var b = Math.round((1 - v) * 200 + v * 30);
|
||
ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
|
||
ctx.fillRect(20 + i * rw, ry, rw - 1, rh);
|
||
}
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = '12px system-ui';
|
||
ctx.fillText('🔥 100°C', 15, ry - 8);
|
||
ctx.fillText('❄ 20°C', W - 70, ry - 8);
|
||
|
||
for (var i = 0; i < n; i++) {
|
||
var v = rod3Heat[i];
|
||
var ax = 20 + i * rw + rw / 2;
|
||
var ay = ry + rh / 2 + Math.sin(Date.now() / 150 + i * 0.8) * (v * 10 + 1);
|
||
var r2 = Math.round(v * 220 + 40), b2 = Math.round((1 - v) * 200 + 30);
|
||
ctx.fillStyle = 'rgb(' + r2 + ',120,' + b2 + ')';
|
||
ctx.beginPath(); ctx.arc(ax, ay, 4, 0, Math.PI * 2); ctx.fill();
|
||
}
|
||
|
||
ctx.strokeStyle = 'rgba(251,191,36,0.7)'; ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
for (var i = 0; i < n; i++) {
|
||
var gx = 20 + i * rw + rw / 2;
|
||
var gy = H - 20 - rod3Heat[i] * 35;
|
||
i === 0 ? ctx.moveTo(gx, gy) : ctx.lineTo(gx, gy);
|
||
}
|
||
ctx.stroke();
|
||
ctx.fillStyle = 'rgba(251,191,36,0.5)'; ctx.font = '9px system-ui'; ctx.fillText('T(x)', 20, H - 5);
|
||
}
|
||
|
||
function runAnim3() {
|
||
if (anim3Id) { cancelAnimationFrame(anim3Id); anim3Id = null; }
|
||
rod3Heat = new Array(40).fill(0); rod3Heat[0] = 1;
|
||
var sel = document.getElementById('sel3mat');
|
||
var speed = sel ? parseFloat(sel.value) : 0.5;
|
||
|
||
function frame() {
|
||
var newHeat = rod3Heat.slice();
|
||
for (var i = 1; i < rod3Heat.length; i++) {
|
||
newHeat[i] += (rod3Heat[i - 1] - rod3Heat[i]) * speed * 0.08;
|
||
newHeat[i] = Math.max(0, Math.min(1, newHeat[i]));
|
||
}
|
||
newHeat[0] = 1;
|
||
rod3Heat = newHeat;
|
||
drawRod3();
|
||
if (rod3Heat[rod3Heat.length - 1] < 0.95) {
|
||
anim3Id = requestAnimationFrame(frame);
|
||
} else {
|
||
anim3Id = null;
|
||
}
|
||
}
|
||
anim3Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
function resetAnim3() {
|
||
if (anim3Id) { cancelAnimationFrame(anim3Id); anim3Id = null; }
|
||
rod3Heat = new Array(40).fill(0); rod3Heat[0] = 1;
|
||
drawRod3();
|
||
}
|
||
|
||
// ═══ §4: Три вида теплопередачи Pro Max (RAF) ═══
|
||
var sl4pval = 50, mode4 = 'conv';
|
||
var particles4 = [];
|
||
var rodTemp4 = null; // массив сегментов стержня для теплопроводности
|
||
var photons4 = []; // фотоны для излучения
|
||
|
||
function setMode4(m){
|
||
mode4 = m;
|
||
['cond','conv','rad'].forEach(function(k){
|
||
var btn = document.getElementById('btn4m'+(k==='cond'?'Cond':k==='conv'?'Conv':'Rad'));
|
||
if(btn){ btn.style.background = mode4===k?'var(--pri)':''; btn.style.color = mode4===k?'#fff':''; }
|
||
});
|
||
var cap = document.getElementById('cap4');
|
||
if(cap){
|
||
var span = cap.querySelector('span');
|
||
if(span){
|
||
span.textContent = m==='cond' ? 'Тепло передаётся вдоль стержня без перемещения вещества — соседние молекулы передают энергию столкновениями. Металлы — отличные проводники, дерево/воздух — плохие.' :
|
||
m==='conv' ? 'Нагретые частицы (красные) у дна поднимаются вверх, охлаждаются и опускаются — циркуляция переносит тепло вместе с веществом.' :
|
||
'Горячее тело испускает электромагнитные волны. Они доходят даже через вакуум. Тёмные поверхности поглощают лучше, белые — отражают.';
|
||
}
|
||
}
|
||
var chip = document.getElementById('chip4info');
|
||
if(chip) chip.textContent = (m==='cond'?'теплопроводность':m==='conv'?'конвекция':'излучение')+' · '+sl4pval+'%';
|
||
// сброс состояний
|
||
rodTemp4 = null; photons4 = [];
|
||
particles4 = [];
|
||
}
|
||
|
||
function startAnim4() {
|
||
var cv = document.getElementById('cv4');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim4Id) { cancelAnimationFrame(anim4Id); anim4Id = null; }
|
||
var dpr = Math.min(window.devicePixelRatio||1, 2);
|
||
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);
|
||
|
||
// подготовка по режиму
|
||
if(mode4==='cond' && !rodTemp4){
|
||
rodTemp4 = new Array(60).fill(0);
|
||
}
|
||
if(mode4==='conv' && !particles4.length){
|
||
for (var i = 0; i < 60; i++) {
|
||
particles4.push({
|
||
x: 20 + Math.random() * (W - 40),
|
||
y: 30 + Math.random() * (H - 60),
|
||
temp: Math.random(),
|
||
vx: (Math.random() - 0.5) * 0.5,
|
||
vy: (Math.random() - 0.5) * 0.5
|
||
});
|
||
}
|
||
}
|
||
|
||
var tPrev = performance.now();
|
||
|
||
function frame(now) {
|
||
var dt = Math.min(0.05, (now-tPrev)/1000); tPrev = now;
|
||
var pwr = (sl4pval || 50) / 100;
|
||
|
||
// ───── ОБЩИЙ ФОН ─────
|
||
ctx.fillStyle = '#0f172a';
|
||
ctx.fillRect(0,0,W,H);
|
||
|
||
var chip = document.getElementById('chip4info');
|
||
if(chip) chip.textContent = (mode4==='cond'?'теплопроводность':mode4==='conv'?'конвекция':'излучение')+' · '+sl4pval+'%';
|
||
|
||
if(mode4==='conv'){
|
||
// ───── КОНВЕКЦИЯ ─────
|
||
var grd = ctx.createLinearGradient(0, H - 20, 0, H);
|
||
grd.addColorStop(0, 'rgba(234,88,12,' + pwr + ')');
|
||
grd.addColorStop(1, 'rgba(239,68,68,' + pwr * 0.5 + ')');
|
||
ctx.fillStyle = grd; ctx.fillRect(0, H - 18, W, 18);
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = '10px system-ui'; ctx.fillText('🔥 Нагреватель', 10, H - 5);
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 2;
|
||
ctx.strokeRect(5, 5, W - 10, H - 20);
|
||
|
||
for (var i = 0; i < particles4.length; i++) {
|
||
var p = particles4[i];
|
||
if (p.y > H - 40) p.temp = Math.min(1, p.temp + pwr * 0.04);
|
||
if (p.y < 30) p.temp = Math.max(0, p.temp - 0.03);
|
||
p.vy += (p.temp - 0.5) * (-pwr * 0.3);
|
||
p.vx += (Math.random() - 0.5) * 0.1;
|
||
p.vx *= 0.95; p.vy *= 0.92;
|
||
p.x += p.vx; p.y += p.vy;
|
||
if (p.x < 10) { p.x = 10; p.vx = Math.abs(p.vx); }
|
||
if (p.x > W - 10) { p.x = W - 10; p.vx = -Math.abs(p.vx); }
|
||
if (p.y < 8) { p.y = 8; p.vy = Math.abs(p.vy) * 0.5; }
|
||
if (p.y > H - 22) { p.y = H - 22; p.vy = -Math.abs(p.vy) * 0.5; }
|
||
var t = p.temp;
|
||
var pr = Math.round(t * 220 + (1 - t) * 50);
|
||
var pg = Math.round((1 - Math.abs(t * 2 - 1)) * 100 + 20);
|
||
var pb = Math.round((1 - t) * 220 + t * 40);
|
||
ctx.shadowColor = 'rgb(' + pr + ',' + pg + ',' + pb + ')';
|
||
ctx.shadowBlur = 4;
|
||
ctx.fillStyle = 'rgb(' + pr + ',' + pg + ',' + pb + ')';
|
||
ctx.beginPath(); ctx.arc(p.x, p.y, 5, 0, Math.PI * 2); ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
}
|
||
} else if(mode4==='cond'){
|
||
// ───── ТЕПЛОПРОВОДНОСТЬ ─────
|
||
// Стержень: левый конец нагревается, тепло диффундирует вправо
|
||
var rodY = H/2, rodH = 50, rodMargin = 50;
|
||
var segW = (W - rodMargin*2) / rodTemp4.length;
|
||
// источник
|
||
rodTemp4[0] = Math.min(1, rodTemp4[0] + pwr * dt * 1.5);
|
||
// диффузия (1D heat equation)
|
||
var alpha = 0.18;
|
||
var next = rodTemp4.slice();
|
||
for(var i=1;i<rodTemp4.length-1;i++){
|
||
next[i] = rodTemp4[i] + alpha * (rodTemp4[i-1] - 2*rodTemp4[i] + rodTemp4[i+1]);
|
||
}
|
||
next[next.length-1] = rodTemp4[next.length-2]*0.98; // лёгкие потери на правом конце
|
||
rodTemp4 = next;
|
||
|
||
// огонь слева
|
||
var gGrd = ctx.createRadialGradient(rodMargin-10, rodY, 5, rodMargin-10, rodY, 28);
|
||
gGrd.addColorStop(0,'rgba(255,180,0,'+(pwr*0.9)+')');
|
||
gGrd.addColorStop(1,'rgba(255,80,0,0)');
|
||
ctx.fillStyle = gGrd;
|
||
ctx.fillRect(rodMargin-40, rodY-30, 40, 60);
|
||
ctx.fillStyle='#e2e8f0'; ctx.font='10px system-ui';
|
||
ctx.fillText('🔥', rodMargin-22, rodY+5);
|
||
|
||
// стержень
|
||
for(var i=0;i<rodTemp4.length;i++){
|
||
var t = rodTemp4[i];
|
||
var pr = Math.round(t * 230 + (1 - t) * 80);
|
||
var pg = Math.round((1 - Math.abs(t * 2 - 1)) * 80 + 40);
|
||
var pb = Math.round((1 - t) * 200 + t * 30);
|
||
ctx.fillStyle = 'rgb('+pr+','+pg+','+pb+')';
|
||
ctx.fillRect(rodMargin + i*segW, rodY-rodH/2, segW+0.5, rodH);
|
||
}
|
||
// обводка
|
||
ctx.strokeStyle='#475569'; ctx.lineWidth=2;
|
||
ctx.strokeRect(rodMargin, rodY-rodH/2, W-rodMargin*2, rodH);
|
||
|
||
// термометры
|
||
[0.0, 0.5, 1.0].forEach(function(frac){
|
||
var x = rodMargin + (rodTemp4.length-1)*segW*frac;
|
||
var idx = Math.round(frac*(rodTemp4.length-1));
|
||
var T = Math.round(rodTemp4[idx]*200);
|
||
ctx.fillStyle = 'rgba(15,23,42,0.85)';
|
||
ctx.fillRect(x-22, rodY-rodH/2-22, 44, 16);
|
||
ctx.fillStyle = '#fbbf24';
|
||
ctx.font='bold 11px monospace';
|
||
ctx.textAlign='center';
|
||
ctx.fillText(T+'°', x, rodY-rodH/2-10);
|
||
ctx.textAlign='left';
|
||
// указатель
|
||
ctx.strokeStyle='#fbbf24'; ctx.lineWidth=1;
|
||
ctx.beginPath(); ctx.moveTo(x, rodY-rodH/2-6); ctx.lineTo(x, rodY-rodH/2); ctx.stroke();
|
||
});
|
||
|
||
ctx.fillStyle='#94a3b8'; ctx.font='10px system-ui';
|
||
ctx.fillText('Молекулы передают энергию столкновениями →', 10, H-10);
|
||
} else if(mode4==='rad'){
|
||
// ───── ИЗЛУЧЕНИЕ ─────
|
||
// Слева — горячий источник (Солнце/лампа), справа — 3 поверхности (чёрная/серая/белая)
|
||
var srcX = 60, srcY = H/2, srcR = 28;
|
||
var grd2 = ctx.createRadialGradient(srcX, srcY, 4, srcX, srcY, srcR*1.5);
|
||
grd2.addColorStop(0,'rgba(255,240,200,1)');
|
||
grd2.addColorStop(0.4,'rgba(255,160,80,'+(0.4+pwr*0.4)+')');
|
||
grd2.addColorStop(1,'rgba(255,60,0,0)');
|
||
ctx.fillStyle = grd2;
|
||
ctx.fillRect(0, srcY-srcR*2, srcX+srcR*2, srcR*4);
|
||
ctx.fillStyle='rgba(255,200,80,1)';
|
||
ctx.beginPath(); ctx.arc(srcX, srcY, srcR*0.5+pwr*5, 0, Math.PI*2); ctx.fill();
|
||
ctx.fillStyle='#fff'; ctx.font='10px system-ui';
|
||
ctx.fillText('☀️ источник', srcX-30, srcY-srcR-4);
|
||
|
||
// 3 поверхности справа
|
||
var sx = W-100, sH = 50, gap = 16;
|
||
var surfs = [
|
||
{name:'чёрная', absorb:0.95, col:'#0f172a', tempK:'tBlack'},
|
||
{name:'серая', absorb:0.55, col:'#94a3b8', tempK:'tGray'},
|
||
{name:'белая', absorb:0.10, col:'#f1f5f9', tempK:'tWhite'}
|
||
];
|
||
window._surf4 = window._surf4 || {tBlack:20,tGray:20,tWhite:20};
|
||
for(var si=0;si<3;si++){
|
||
var s = surfs[si];
|
||
var sy = 22 + si*(sH+gap);
|
||
ctx.fillStyle = s.col;
|
||
ctx.fillRect(sx, sy, 70, sH);
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth=1.5; ctx.strokeRect(sx, sy, 70, sH);
|
||
// нагрев
|
||
window._surf4[s.tempK] = Math.min(120, window._surf4[s.tempK] + pwr*s.absorb*dt*8);
|
||
// охлаждение
|
||
window._surf4[s.tempK] = Math.max(20, window._surf4[s.tempK] - dt*0.8);
|
||
// glow по нагреву
|
||
var glow = (window._surf4[s.tempK]-20)/100;
|
||
if(glow>0.05){
|
||
ctx.shadowColor='rgba(255,80,0,'+(glow*0.7)+')';
|
||
ctx.shadowBlur=glow*22;
|
||
ctx.fillStyle = 'rgba(255,60,0,'+(glow*0.5)+')';
|
||
ctx.fillRect(sx, sy, 70, sH);
|
||
ctx.shadowBlur=0;
|
||
}
|
||
// температура
|
||
ctx.fillStyle = si===2?'#1c1917':'#fff';
|
||
ctx.font='bold 12px monospace';
|
||
ctx.textAlign='center';
|
||
ctx.fillText(Math.round(window._surf4[s.tempK])+'°C', sx+35, sy+sH/2+4);
|
||
ctx.textAlign='left';
|
||
// подпись
|
||
ctx.fillStyle='#cbd5e1'; ctx.font='10px system-ui';
|
||
ctx.fillText(s.name, sx+78, sy+sH/2+4);
|
||
}
|
||
|
||
// ЭМ-волны (лучи)
|
||
var nRays = 14;
|
||
for(var ri=0;ri<nRays;ri++){
|
||
var ty = 22 + (ri/(nRays-1))*(H-44);
|
||
var dist = ((now/8 + ri*22) % 200);
|
||
var rayX = srcX + 8 + dist;
|
||
if(rayX > sx) continue;
|
||
var op = pwr * (1 - dist/200) * 0.8;
|
||
// волнообразная линия
|
||
ctx.strokeStyle = 'rgba(255,200,100,'+op+')';
|
||
ctx.lineWidth = 2.2;
|
||
ctx.beginPath();
|
||
for(var rx=rayX; rx<rayX+18; rx+=2){
|
||
var ry = ty + Math.sin((rx-rayX)*0.6 + ri)*2.5;
|
||
if(rx===rayX) ctx.moveTo(rx, ry);
|
||
else ctx.lineTo(rx, ry);
|
||
}
|
||
ctx.stroke();
|
||
}
|
||
|
||
ctx.fillStyle='#94a3b8'; ctx.font='10px system-ui';
|
||
ctx.fillText('ЭМ-волны → поверхности с разной поглощающей способностью', 10, H-8);
|
||
}
|
||
|
||
anim4Id = requestAnimationFrame(frame);
|
||
}
|
||
anim4Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ §5: Излучение от источника ═══
|
||
var sl5Tval = 500;
|
||
var surf5temps = [0, 0, 0];
|
||
var surf5absorb = [0.95, 0.6, 0.15];
|
||
|
||
function upd5() { /* метка обновляется через oninput */ }
|
||
|
||
function startAnim5() {
|
||
var cv = document.getElementById('cv5');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim5Id) { cancelAnimationFrame(anim5Id); anim5Id = null; }
|
||
surf5temps = [0, 0, 0];
|
||
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 waves = [];
|
||
|
||
function spawnWave() {
|
||
waves.push({ r: 5, alpha: 1 });
|
||
}
|
||
var waveTimer = 0;
|
||
|
||
function frame(now) {
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
var T = sl5Tval || 500;
|
||
var srcX = 60, srcY = H / 2;
|
||
var intensity = T / 1000;
|
||
|
||
var srcR = 8 + intensity * 8;
|
||
var grd = ctx.createRadialGradient(srcX, srcY, 0, srcX, srcY, srcR * 2);
|
||
grd.addColorStop(0, 'rgba(255,255,200,1)');
|
||
grd.addColorStop(0.3, 'rgba(255,160,40,0.8)');
|
||
grd.addColorStop(1, 'transparent');
|
||
ctx.fillStyle = grd;
|
||
ctx.beginPath(); ctx.arc(srcX, srcY, srcR * 2, 0, Math.PI * 2); ctx.fill();
|
||
ctx.fillStyle = '#fffde7';
|
||
ctx.beginPath(); ctx.arc(srcX, srcY, srcR, 0, Math.PI * 2); ctx.fill();
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '10px system-ui';
|
||
ctx.fillText(T + '°C', srcX - 15, srcY + srcR + 14);
|
||
|
||
waveTimer += 16;
|
||
if (waveTimer > Math.max(80, 300 - intensity * 250)) {
|
||
spawnWave(); waveTimer = 0;
|
||
}
|
||
for (var i = waves.length - 1; i >= 0; i--) {
|
||
var w = waves[i];
|
||
w.r += 3 + intensity * 4; w.alpha -= 0.015;
|
||
if (w.alpha <= 0) { waves.splice(i, 1); continue; }
|
||
var wclr = 'rgba(255,' + Math.round(100 + intensity * 100) + ',0,' + (w.alpha * 0.5) + ')';
|
||
ctx.strokeStyle = wclr; ctx.lineWidth = 1.5;
|
||
ctx.beginPath(); ctx.arc(srcX, srcY, w.r, -Math.PI / 2, Math.PI / 2); ctx.stroke();
|
||
}
|
||
|
||
var surfX = W - 90, surfH = 45, surfGap = (H - 40) / 3;
|
||
var names = ['Чёрная', 'Серая', 'Серебристая'];
|
||
var colors = ['#1e1e1e', '#6b7280', '#e2e8f0'];
|
||
var textColors = ['#e2e8f0', '#e2e8f0', '#1c1917'];
|
||
|
||
for (var s = 0; s < 3; s++) {
|
||
var sy = 20 + s * surfGap;
|
||
var abs = surf5absorb[s];
|
||
surf5temps[s] = Math.min(1, surf5temps[s] + intensity * abs * 0.003);
|
||
var temp = surf5temps[s];
|
||
|
||
var heat = temp * intensity;
|
||
ctx.fillStyle = colors[s];
|
||
ctx.fillRect(surfX, sy, 55, surfH);
|
||
if (heat > 0.05) {
|
||
ctx.fillStyle = 'rgba(239,68,68,' + heat * 0.4 + ')';
|
||
ctx.fillRect(surfX, sy, 55, surfH);
|
||
}
|
||
ctx.fillStyle = textColors[s]; ctx.font = '10px system-ui';
|
||
ctx.fillText(names[s], surfX + 2, sy + 14);
|
||
ctx.fillText(Math.round(abs * 100) + '%', surfX + 2, sy + 26);
|
||
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(surfX + 60, sy, 12, surfH);
|
||
var bh = Math.min(surfH - 2, temp * (surfH - 2));
|
||
ctx.fillStyle = 'rgba(239,68,68,0.9)';
|
||
ctx.fillRect(surfX + 61, sy + (surfH - 2) - bh, 10, bh);
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '9px system-ui';
|
||
ctx.fillText(Math.round(temp * 100) + '°', surfX + 58, sy + surfH + 12);
|
||
}
|
||
|
||
anim5Id = requestAnimationFrame(frame);
|
||
}
|
||
anim5Id = requestAnimationFrame(frame);
|
||
}
|
||
// ═══ §6: Калориметр Pro Max (с разными c) ═══
|
||
var MAT6 = {
|
||
'4200':{name:'вода', emoji:'💧', col:'#3b82f6'},
|
||
'460': {name:'железо',emoji:'⚙️', col:'#94a3b8'},
|
||
'2100':{name:'масло', emoji:'🛢️',col:'#a16207'},
|
||
'900': {name:'алюминий',emoji:'⚪',col:'#cbd5e1'},
|
||
'385': {name:'медь', emoji:'🟫', col:'#c2410c'}
|
||
};
|
||
|
||
function upd6() {
|
||
var cv = document.getElementById('cv6');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
var dpr = Math.min(window.devicePixelRatio||1, 2);
|
||
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 m1 = parseFloat(document.getElementById('sl6m1').value) || 1;
|
||
var t1 = parseFloat(document.getElementById('sl6t1').value) || 80;
|
||
var m2 = parseFloat(document.getElementById('sl6m2').value) || 1;
|
||
var t2 = parseFloat(document.getElementById('sl6t2').value) || 20;
|
||
var s1 = document.getElementById('sel6mat1');
|
||
var s2 = document.getElementById('sel6mat2');
|
||
var c1 = s1 ? parseFloat(s1.value) : 4200;
|
||
var c2 = s2 ? parseFloat(s2.value) : 4200;
|
||
var mat1 = MAT6[String(c1)]||MAT6['4200'];
|
||
var mat2 = MAT6[String(c2)]||MAT6['4200'];
|
||
|
||
// Реальный тепловой баланс с разными c
|
||
var tmix = (c1*m1*t1 + c2*m2*t2) / (c1*m1 + c2*m2);
|
||
|
||
// Два сосуда
|
||
var pad = 20, bH = H - 70, bW = W / 2 - pad * 2;
|
||
|
||
// Горячий
|
||
ctx.fillStyle = 'rgba(239,68,68,0.10)'; ctx.fillRect(pad, pad, bW, bH);
|
||
ctx.strokeStyle = '#ef4444'; ctx.lineWidth = 2; ctx.strokeRect(pad, pad, bW, bH);
|
||
var fillH1 = Math.min(bH - 6, (m1 / 3) * (bH - 6));
|
||
// окрашиваем по веществу
|
||
var fillCol1 = mat1.col;
|
||
// оттенок по T (более горячий — ярче)
|
||
ctx.fillStyle = fillCol1;
|
||
ctx.globalAlpha = 0.4 + (t1/100)*0.4;
|
||
ctx.fillRect(pad + 3, pad + bH - fillH1 - 3, bW - 6, fillH1);
|
||
ctx.globalAlpha = 1;
|
||
// лейблы
|
||
ctx.fillStyle = '#fca5a5'; ctx.font = 'bold 11px system-ui';
|
||
ctx.fillText('🔥 '+mat1.emoji+' '+mat1.name, pad + 5, pad + 14);
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = '11px system-ui';
|
||
ctx.fillText(t1+'°C · '+m1.toFixed(1)+' кг', pad + 5, pad+bH+15);
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '10px system-ui';
|
||
ctx.fillText('c = '+c1+' Дж/(кг·°C)', pad + 5, pad+bH+28);
|
||
|
||
// Холодный
|
||
var rx = W / 2 + pad;
|
||
ctx.fillStyle = 'rgba(59,130,246,0.08)'; ctx.fillRect(rx, pad, bW, bH);
|
||
ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 2; ctx.strokeRect(rx, pad, bW, bH);
|
||
var fillH2 = Math.min(bH - 6, (m2 / 3) * (bH - 6));
|
||
ctx.fillStyle = mat2.col;
|
||
ctx.globalAlpha = 0.4 + (t2/100)*0.4;
|
||
ctx.fillRect(rx + 3, pad + bH - fillH2 - 3, bW - 6, fillH2);
|
||
ctx.globalAlpha = 1;
|
||
ctx.fillStyle = '#93c5fd'; ctx.font = 'bold 11px system-ui';
|
||
ctx.fillText('❄️ '+mat2.emoji+' '+mat2.name, rx + 5, pad + 14);
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = '11px system-ui';
|
||
ctx.fillText(t2+'°C · '+m2.toFixed(1)+' кг', rx + 5, pad+bH+15);
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '10px system-ui';
|
||
ctx.fillText('c = '+c2+' Дж/(кг·°C)', rx + 5, pad+bH+28);
|
||
|
||
// Шкала температуры справа от каждого
|
||
function drawTherm(x,y,h,T){
|
||
ctx.strokeStyle='#475569'; ctx.lineWidth=1;
|
||
ctx.strokeRect(x, y, 6, h);
|
||
var fillH = (T/100)*h;
|
||
ctx.fillStyle = 'rgba(239,68,68,'+(0.3+T/100*0.6)+')';
|
||
ctx.fillRect(x+1, y+h-fillH+1, 4, fillH-2);
|
||
}
|
||
drawTherm(pad+bW-12, pad+8, bH-16, t1);
|
||
drawTherm(rx+bW-12, pad+8, bH-16, t2);
|
||
|
||
// Стрелка смешивания + точка результата
|
||
ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
ctx.moveTo(pad + bW + 4, H/2 - 15); ctx.lineTo(rx - 4, H/2 - 15);
|
||
ctx.stroke();
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 18px system-ui';
|
||
ctx.textAlign='center';
|
||
ctx.fillText('⇄', W/2, H/2-10);
|
||
// Результат смеси в центре
|
||
var tFrac = (tmix-t2)/(t1-t2 + 0.001);
|
||
ctx.fillStyle = 'rgba(15,23,42,0.9)';
|
||
ctx.fillRect(W/2-40, H/2+6, 80, 26);
|
||
ctx.fillStyle = 'rgb('+Math.round(60+tFrac*180)+',130,'+Math.round(220-tFrac*150)+')';
|
||
ctx.font='bold 16px monospace';
|
||
ctx.fillText(tmix.toFixed(1)+'°C', W/2, H/2+24);
|
||
ctx.fillStyle='#cbd5e1'; ctx.font='9px system-ui';
|
||
ctx.fillText('T смеси', W/2, H/2+40);
|
||
ctx.textAlign='left';
|
||
|
||
// Результат текстом
|
||
var res = document.getElementById('cv6result');
|
||
if (res) {
|
||
var Q1 = c1*m1*(t1-tmix);
|
||
var Q2 = c2*m2*(tmix-t2);
|
||
res.innerHTML =
|
||
'<div style="font-size:.82rem;line-height:1.8">' +
|
||
'<div><b style="color:var(--pri)">T смеси = '+tmix.toFixed(2)+'°C</b></div>' +
|
||
'<div style="color:var(--muted);font-family:monospace;font-size:.78rem">'+
|
||
'c₁m₁(T₁−T) = '+c1+'·'+m1.toFixed(1)+'·('+t1+'−'+tmix.toFixed(1)+') = <b>'+(Q1/1000).toFixed(1)+' кДж</b> отдаёт' +
|
||
'</div>'+
|
||
'<div style="color:var(--muted);font-family:monospace;font-size:.78rem">'+
|
||
'c₂m₂(T−T₂) = '+c2+'·'+m2.toFixed(1)+'·('+tmix.toFixed(1)+'−'+t2+') = <b>'+(Q2/1000).toFixed(1)+' кДж</b> получает' +
|
||
'</div>'+
|
||
'<div style="margin-top:4px;color:var(--ok);font-size:.74rem">✓ баланс: '+(Q1/1000).toFixed(2)+' ≈ '+(Q2/1000).toFixed(2)+' кДж</div>' +
|
||
'</div>';
|
||
if (window.doRender) doRender(res);
|
||
}
|
||
}
|
||
|
||
// ═══ §7: Виртуальная печь ═══
|
||
var anim7Id = null, fuel7 = 1.0; // 1.0 = полный, 0 = пустой
|
||
|
||
function upd7() {
|
||
if (!anim7Id) drawFurnace7();
|
||
var m = parseFloat(document.getElementById('sl7m').value) || 2;
|
||
var sel = document.getElementById('sel7fuel');
|
||
var q = sel ? parseFloat(sel.value) : 27;
|
||
var Q = (q * m).toFixed(1);
|
||
var res = document.getElementById('cv7result');
|
||
if (res) res.innerHTML = 'Q = q · m = ' + q + ' × ' + m + ' = <b>' + Q + ' МДж</b>';
|
||
}
|
||
|
||
function drawFurnace7() {
|
||
var cv = document.getElementById('cv7');
|
||
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 sel = document.getElementById('sel7fuel');
|
||
var q = sel ? parseFloat(sel.value) : 27;
|
||
var intensity = Math.min(1, q / 120);
|
||
|
||
// печь
|
||
ctx.fillStyle = '#292524'; ctx.fillRect(W / 2 - 60, H - 80, 120, 70);
|
||
ctx.strokeStyle = '#78716c'; ctx.lineWidth = 2;
|
||
ctx.strokeRect(W / 2 - 60, H - 80, 120, 70);
|
||
|
||
// топливо
|
||
var fuelH = fuel7 * 30;
|
||
ctx.fillStyle = '#451a03'; ctx.fillRect(W / 2 - 50, H - 20 - fuelH, 100, fuelH);
|
||
|
||
// пламя (несколько языков)
|
||
var now = Date.now();
|
||
for (var fl = 0; fl < 3 + Math.round(intensity * 4); fl++) {
|
||
var fx = W / 2 - 30 + fl * 15 + Math.sin(now / 200 + fl) * 8;
|
||
var fh = 40 + intensity * 60 + Math.sin(now / 150 + fl * 1.2) * 15;
|
||
var fy = H - 80 - fh;
|
||
var grd = ctx.createLinearGradient(fx, H - 80, fx, fy);
|
||
grd.addColorStop(0, 'rgba(239,68,68,0.9)');
|
||
grd.addColorStop(0.5, 'rgba(251,146,60,0.7)');
|
||
grd.addColorStop(1, 'rgba(253,224,71,0)');
|
||
ctx.fillStyle = grd;
|
||
ctx.beginPath();
|
||
ctx.moveTo(fx - 8, H - 80);
|
||
ctx.quadraticCurveTo(fx + Math.sin(now / 100 + fl) * 12, fy + fh / 2, fx, fy);
|
||
ctx.quadraticCurveTo(fx + 6, fy + fh / 2, fx + 8, H - 80);
|
||
ctx.fill();
|
||
}
|
||
|
||
// Q-бар
|
||
var m = parseFloat((document.getElementById('sl7m') || {}).value) || 2;
|
||
var Q = q * m;
|
||
var qMax = 120 * 10; // max = водород 10кг
|
||
var qFrac = Math.min(1, Q / qMax);
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(W - 60, 20, 20, H - 40);
|
||
ctx.fillStyle = 'rgba(251,146,60,0.9)'; ctx.fillRect(W - 59, 20 + (H - 40) * (1 - qFrac), 18, (H - 40) * qFrac);
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = '10px system-ui'; ctx.fillText('Q', W - 56, 15);
|
||
ctx.fillText(Q.toFixed(0) + 'МДж', W - 78, H - 20);
|
||
}
|
||
|
||
// ═══ §8: Кристаллическая решётка ═══
|
||
var anim8Id = null;
|
||
var lattice8 = []; // {x, y, ox, oy, phase}
|
||
|
||
function initLattice8(W, H) {
|
||
lattice8 = [];
|
||
var cols = 10, rows = 8;
|
||
for (var r = 0; r < rows; r++) {
|
||
for (var c = 0; c < cols; c++) {
|
||
lattice8.push({
|
||
bx: 20 + (c + 0.5) * (W - 40) / cols,
|
||
by: 20 + (r + 0.5) * (H - 40) / rows,
|
||
ox: 0, oy: 0,
|
||
phase: Math.random() * Math.PI * 2,
|
||
vx: (Math.random() - 0.5) * 2,
|
||
vy: (Math.random() - 0.5) * 2
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
function upd8() {
|
||
var cv = document.getElementById('cv8');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim8Id) { cancelAnimationFrame(anim8Id); anim8Id = 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);
|
||
if (!lattice8.length) initLattice8(W, H);
|
||
|
||
var Tval = parseFloat(document.getElementById('sl8T').value) || 0;
|
||
var sel = document.getElementById('sel8sub');
|
||
var Tpl = sel ? parseFloat(sel.value) : 0;
|
||
var lbl = document.getElementById('lbl8Tpl');
|
||
if (lbl) lbl.textContent = Tpl;
|
||
|
||
// Изменяем диапазон слайдера при смене вещества
|
||
var sl = document.getElementById('sl8T');
|
||
if (sel && sel.value == '327') {
|
||
if (sl && sl.max != '500') { sl.min = 200; sl.max = 500; }
|
||
} else {
|
||
if (sl && sl.max != '150') { sl.min = -50; sl.max = 150; }
|
||
}
|
||
|
||
var state = Tval < Tpl ? 'solid' : Tval < Tpl + 30 ? 'melting' : 'liquid';
|
||
var stateEl = document.getElementById('cv8state');
|
||
if (stateEl) {
|
||
var stateNames = {solid:'❄️ Твёрдое (кристаллическая решётка)', melting:'🔥 Плавление (T = const = ' + Tpl + '°C)', liquid:'💧 Жидкое'};
|
||
stateEl.textContent = 'Состояние: ' + (stateNames[state] || state);
|
||
}
|
||
|
||
var amp = state === 'solid' ? Math.max(0.5, (Tval - Tpl + 60) / 60 * 3) :
|
||
state === 'melting' ? 6 : 8;
|
||
|
||
function frame() {
|
||
ctx.clearRect(0, 0, W, H);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
var cols = 10, now = Date.now();
|
||
var n = lattice8.length;
|
||
|
||
for (var i = 0; i < n; i++) {
|
||
var a = lattice8[i];
|
||
if (state === 'liquid') {
|
||
a.bx += a.vx * 0.3; a.by += a.vy * 0.3;
|
||
a.ox = Math.sin(now / 180 + a.phase) * amp;
|
||
a.oy = Math.cos(now / 200 + a.phase) * amp;
|
||
if (a.bx < 10 || a.bx > W - 10) a.vx *= -1;
|
||
if (a.by < 10 || a.by > H - 10) a.vy *= -1;
|
||
} else {
|
||
a.ox = Math.sin(now / 200 + a.phase) * amp;
|
||
a.oy = Math.cos(now / 230 + a.phase) * amp;
|
||
if (state === 'melting') {
|
||
a.bx += (Math.random() - 0.5) * 0.5;
|
||
a.by += (Math.random() - 0.5) * 0.5;
|
||
}
|
||
}
|
||
var x = a.bx + a.ox, y = a.by + a.oy;
|
||
|
||
// Связи (решётка) — только для solid
|
||
if (state === 'solid' && i % cols < cols - 1) {
|
||
var j = i + 1, nb = lattice8[j];
|
||
ctx.strokeStyle = 'rgba(100,150,200,0.3)'; ctx.lineWidth = 1;
|
||
ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(nb.bx + nb.ox, nb.by + nb.oy); ctx.stroke();
|
||
}
|
||
if (state === 'solid' && i + cols < n) {
|
||
var k = i + cols, nb2 = lattice8[k];
|
||
ctx.strokeStyle = 'rgba(100,150,200,0.3)'; ctx.lineWidth = 1;
|
||
ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(nb2.bx + nb2.ox, nb2.by + nb2.oy); ctx.stroke();
|
||
}
|
||
|
||
var normT = Math.min(1, Math.max(0, (Tval - Tpl + 60) / 120));
|
||
if (state === 'melting') normT = 0.7;
|
||
if (state === 'liquid') normT = 1;
|
||
var cr = Math.round(normT * 220 + (1 - normT) * 40);
|
||
var cg = Math.round((1 - Math.abs(normT * 2 - 1)) * 80 + 30);
|
||
var cb = Math.round((1 - normT) * 220 + normT * 40);
|
||
ctx.shadowColor = 'rgb(' + cr + ',' + cg + ',' + cb + ')';
|
||
ctx.shadowBlur = state === 'liquid' ? 6 : 3;
|
||
ctx.fillStyle = 'rgb(' + cr + ',' + cg + ',' + cb + ')';
|
||
ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
}
|
||
anim8Id = requestAnimationFrame(frame);
|
||
}
|
||
anim8Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ §9: Плавление + график T(t) Pro Max ═══
|
||
var anim9Id = null, melt9progress = 0, melt9dir = 0;
|
||
// история температуры для графика T(t)
|
||
var melt9history = []; // {t,T,phase}
|
||
var melt9time = 0;
|
||
// Tпл для каждого вещества (по таблице): индекс → температура
|
||
var TPL9 = {333:0, 270:1539, 390:660, 205:1084, 88:962, 25:327};
|
||
|
||
function upd9() {
|
||
var m = parseFloat(document.getElementById('sl9m').value) || 1;
|
||
var sel = document.getElementById('sel9sub');
|
||
var lam = sel ? parseFloat(sel.value) : 333;
|
||
var Q = (lam * m).toFixed(1);
|
||
var res = document.getElementById('cv9result');
|
||
if (res) res.innerHTML = 'Q = λ · m = ' + lam + ' × ' + m.toFixed(1) + ' = <b>' + Q + ' кДж</b>';
|
||
drawMelt9();
|
||
}
|
||
|
||
function anim9(mode) {
|
||
if (anim9Id) { cancelAnimationFrame(anim9Id); anim9Id = null; }
|
||
melt9dir = mode === 'melt' ? 1 : -1;
|
||
// сброс истории при новой анимации
|
||
if(mode==='melt' && melt9progress===0){ melt9history=[]; melt9time=0; }
|
||
if(mode==='freeze' && melt9progress===1){ melt9history=[]; melt9time=0; }
|
||
var last = performance.now();
|
||
function frame(now){
|
||
var dt = Math.min(0.05,(now-last)/1000); last = now;
|
||
melt9time += dt;
|
||
// прогресс
|
||
var prev = melt9progress;
|
||
melt9progress = Math.max(0, Math.min(1, melt9progress + melt9dir * dt * 0.5));
|
||
// вычисляем "виртуальную" температуру
|
||
var sel = document.getElementById('sel9sub');
|
||
var lam = sel ? parseFloat(sel.value) : 333;
|
||
var Tpl = TPL9[lam] !== undefined ? TPL9[lam] : 0;
|
||
// 3 фазы: 0..0.2 — нагрев до Tпл, 0.2..0.8 — плавление (T=Tпл), 0.8..1 — нагрев выше
|
||
var T, phase;
|
||
var p = melt9progress;
|
||
if(p < 0.2){ T = Tpl - 30 + p/0.2 * 30; phase='solid_heat'; }
|
||
else if(p < 0.8){ T = Tpl; phase='melt'; }
|
||
else { T = Tpl + (p-0.8)/0.2 * 40; phase='liq_heat'; }
|
||
melt9history.push({t:melt9time, T:T, phase:phase});
|
||
if(melt9history.length > 250) melt9history.shift();
|
||
drawMelt9();
|
||
if (melt9progress > 0 && melt9progress < 1) anim9Id = requestAnimationFrame(frame);
|
||
else anim9Id = null;
|
||
}
|
||
anim9Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
function drawMelt9() {
|
||
var cv = document.getElementById('cv9');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
var dpr = Math.min(window.devicePixelRatio||1, 2);
|
||
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 m = parseFloat((document.getElementById('sl9m') || {}).value) || 1;
|
||
var sel = document.getElementById('sel9sub');
|
||
var lam = sel ? parseFloat(sel.value) : 333;
|
||
var Tpl = TPL9[lam] !== undefined ? TPL9[lam] : 0;
|
||
var p = melt9progress;
|
||
|
||
// ───── ЛЕВАЯ ЗОНА: блок ─────
|
||
var leftW = W * 0.42;
|
||
var bx = leftW/2 - 50, by = 30, bw = 100, bh = 140;
|
||
|
||
// подпись зоны
|
||
ctx.fillStyle = '#cbd5e1'; ctx.font = 'bold 11px system-ui';
|
||
ctx.fillText('Вещество', 8, 16);
|
||
|
||
var solidH = bh * (1 - p);
|
||
var liqH = bh * p;
|
||
|
||
if (solidH > 2) {
|
||
// решётка
|
||
ctx.fillStyle = 'rgba(147,197,253,0.45)';
|
||
ctx.fillRect(bx, by, bw, solidH);
|
||
ctx.strokeStyle = 'rgba(147,197,253,0.7)'; ctx.lineWidth = 1;
|
||
for (var rx = 0; rx < 5; rx++) for (var ry = 0; ry < Math.ceil(solidH / 14); ry++) {
|
||
ctx.strokeRect(bx + rx * 20, by + ry * 14, 20, 14);
|
||
}
|
||
}
|
||
if (liqH > 2) {
|
||
ctx.fillStyle = 'rgba(59,130,246,0.6)';
|
||
ctx.fillRect(bx - p * 10, by + solidH, bw + p * 20, liqH);
|
||
ctx.fillStyle = 'rgba(96,165,250,0.4)';
|
||
ctx.beginPath(); ctx.ellipse(bx + bw / 2, by + solidH + liqH / 2, (bw / 2 + p * 10), liqH / 2, 0, 0, Math.PI * 2); ctx.fill();
|
||
}
|
||
|
||
// термометр (слева от блока)
|
||
ctx.strokeStyle = '#475569'; ctx.lineWidth = 1.5;
|
||
ctx.strokeRect(8, by, 12, bh);
|
||
var Tcur = melt9history.length ? melt9history[melt9history.length-1].T : (Tpl-30);
|
||
var Tmin = Tpl-30, Tmax = Tpl+40;
|
||
var thFrac = Math.max(0, Math.min(1, (Tcur-Tmin)/(Tmax-Tmin)));
|
||
ctx.fillStyle = 'rgba(239,68,68,'+(0.4+thFrac*0.5)+')';
|
||
ctx.fillRect(9, by+bh - thFrac*bh+1, 10, thFrac*bh-2);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font='bold 10px monospace';
|
||
ctx.fillText(Math.round(Tcur)+'°', 4, by-4);
|
||
|
||
// Q бар (справа от блока)
|
||
var Q = lam * m;
|
||
var qMax = 390 * 5;
|
||
var qFrac = Math.min(1, (Q * p) / qMax);
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(leftW - 28, by, 14, bh);
|
||
ctx.fillStyle = 'rgba(251,146,60,0.9)';
|
||
ctx.fillRect(leftW - 27, by+bh - bh*qFrac+1, 12, bh*qFrac-2);
|
||
ctx.fillStyle = '#cbd5e1'; ctx.font = '9px system-ui';
|
||
ctx.fillText('Q', leftW - 24, by-4);
|
||
ctx.fillText(Math.round(Q*p)+'кДж', leftW-60, by+bh+12);
|
||
|
||
// Метка состояния
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '10px system-ui';
|
||
var label = p === 0 ? '❄ Твёрдое' : p === 1 ? '💧 Жидкое' : (p<0.2 ? '❄ Нагрев' : p<0.8 ? '🔥 Плавление T=const' : '💧 Нагрев');
|
||
ctx.fillText(label, 8, H - 12);
|
||
|
||
// ───── ПРАВАЯ ЗОНА: график T(t) ─────
|
||
var gx = leftW + 14, gy = 24, gw = W - leftW - 28, gh = H - 50;
|
||
// фон
|
||
ctx.fillStyle = 'rgba(15,23,42,0.6)';
|
||
ctx.fillRect(gx, gy, gw, gh);
|
||
ctx.strokeStyle = '#334155'; ctx.lineWidth = 1;
|
||
ctx.strokeRect(gx, gy, gw, gh);
|
||
// подпись
|
||
ctx.fillStyle = '#cbd5e1'; ctx.font='bold 11px system-ui';
|
||
ctx.fillText('График T(t)', gx, 16);
|
||
// оси
|
||
ctx.fillStyle = '#94a3b8'; ctx.font='9px system-ui';
|
||
ctx.fillText('T,°C', gx-4, gy-4);
|
||
ctx.fillText('t →', gx+gw-18, gy+gh+12);
|
||
// линия Tпл
|
||
var yTpl = gy + gh - ((Tpl-Tmin)/(Tmax-Tmin))*gh;
|
||
ctx.setLineDash([4,3]); ctx.strokeStyle='rgba(251,191,36,0.7)'; ctx.lineWidth=1;
|
||
ctx.beginPath(); ctx.moveTo(gx,yTpl); ctx.lineTo(gx+gw,yTpl); ctx.stroke();
|
||
ctx.setLineDash([]);
|
||
ctx.fillStyle = '#fbbf24'; ctx.font='bold 9px monospace';
|
||
ctx.fillText('Tпл='+Tpl+'°', gx+gw-58, yTpl-3);
|
||
|
||
// график
|
||
if(melt9history.length > 1){
|
||
var tMin = melt9history[0].t, tMax = melt9history[melt9history.length-1].t;
|
||
var tRange = Math.max(1, tMax-tMin);
|
||
ctx.lineWidth = 2;
|
||
ctx.strokeStyle = '#f59e0b';
|
||
ctx.beginPath();
|
||
melt9history.forEach(function(h, i){
|
||
var x = gx + (h.t - tMin)/tRange * gw;
|
||
var y = gy + gh - ((h.T-Tmin)/(Tmax-Tmin))*gh;
|
||
// цвет фазы
|
||
if(i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
|
||
});
|
||
ctx.stroke();
|
||
// точки фаз
|
||
melt9history.forEach(function(h, i){
|
||
if(i % 8 !== 0 && i!==melt9history.length-1) return;
|
||
var x = gx + (h.t - tMin)/tRange * gw;
|
||
var y = gy + gh - ((h.T-Tmin)/(Tmax-Tmin))*gh;
|
||
var col = h.phase==='melt' ? '#fbbf24' : h.phase==='solid_heat' ? '#60a5fa' : '#ef4444';
|
||
ctx.fillStyle = col;
|
||
ctx.beginPath(); ctx.arc(x,y,2.2,0,Math.PI*2); ctx.fill();
|
||
});
|
||
// подсветка текущей точки
|
||
var last = melt9history[melt9history.length-1];
|
||
var lx = gx + (last.t-tMin)/tRange * gw;
|
||
var ly = gy + gh - ((last.T-Tmin)/(Tmax-Tmin))*gh;
|
||
ctx.fillStyle='#fff';
|
||
ctx.shadowColor='#fbbf24'; ctx.shadowBlur=10;
|
||
ctx.beginPath(); ctx.arc(lx,ly,4,0,Math.PI*2); ctx.fill();
|
||
ctx.shadowBlur=0;
|
||
} else {
|
||
ctx.fillStyle = '#475569'; ctx.font='10px system-ui';
|
||
ctx.fillText('Нажми "Плавить" для начала', gx+10, gy+gh/2);
|
||
}
|
||
|
||
// легенда фаз
|
||
ctx.font = '8px system-ui';
|
||
var legY = H-8;
|
||
ctx.fillStyle='#60a5fa'; ctx.beginPath(); ctx.arc(gx+4, legY-2, 2.5, 0, Math.PI*2); ctx.fill();
|
||
ctx.fillStyle='#cbd5e1'; ctx.fillText('нагрев тв.', gx+10, legY);
|
||
ctx.fillStyle='#fbbf24'; ctx.beginPath(); ctx.arc(gx+62, legY-2, 2.5, 0, Math.PI*2); ctx.fill();
|
||
ctx.fillStyle='#cbd5e1'; ctx.fillText('плавление', gx+68, legY);
|
||
ctx.fillStyle='#ef4444'; ctx.beginPath(); ctx.arc(gx+118, legY-2, 2.5, 0, Math.PI*2); ctx.fill();
|
||
ctx.fillStyle='#cbd5e1'; ctx.fillText('нагрев жид.', gx+124, legY);
|
||
}
|
||
|
||
// ═══ §10: Испарение молекул (RAF) ═══
|
||
var anim10Id = null, sl10Tval = 40, sl10Wval = 2, wind10 = false;
|
||
var liqMols10 = [], vapMols10 = [];
|
||
var liqTemp10 = 40;
|
||
|
||
function initLiq10(W, H) {
|
||
liqMols10 = [];
|
||
var cW = W * sl10Wval / 3;
|
||
var lh = H * 0.55, ly = H - lh - 30;
|
||
for (var i = 0; i < 80; i++) {
|
||
liqMols10.push({
|
||
x: (W - cW) / 2 + 5 + Math.random() * (cW - 10),
|
||
y: ly + 5 + Math.random() * (lh - 10),
|
||
vx: (Math.random() - 0.5) * 1.5,
|
||
vy: (Math.random() - 0.5) * 1.5,
|
||
energy: Math.random()
|
||
});
|
||
}
|
||
vapMols10 = [];
|
||
}
|
||
|
||
function startAnim10() {
|
||
var cv = document.getElementById('cv10');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim10Id) { cancelAnimationFrame(anim10Id); anim10Id = 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);
|
||
liqTemp10 = sl10Tval || 40;
|
||
if (!liqMols10.length) initLiq10(W, H);
|
||
|
||
function frame() {
|
||
ctx.clearRect(0, 0, W, H);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
|
||
var T = sl10Tval || 40;
|
||
var cW = W * Math.min(3, sl10Wval || 2) / 3;
|
||
var cx = (W - cW) / 2;
|
||
var lh = H * 0.5, ly = H - lh - 30;
|
||
|
||
// контейнер
|
||
ctx.strokeStyle = '#64748b'; ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
ctx.moveTo(cx, ly); ctx.lineTo(cx, H - 30); ctx.lineTo(cx + cW, H - 30); ctx.lineTo(cx + cW, ly);
|
||
ctx.stroke();
|
||
|
||
// жидкость
|
||
ctx.fillStyle = 'rgba(59,130,246,0.2)'; ctx.fillRect(cx + 1, ly, cW - 2, lh);
|
||
|
||
// термометр и охлаждение
|
||
liqTemp10 = Math.max(0, liqTemp10 - (T < liqTemp10 ? 0 : 0) - vapMols10.filter(function(v){return v.evap;}).length * 0.02);
|
||
|
||
// жидкие молекулы
|
||
var escThresh = 0.5 + T / 200;
|
||
for (var i = liqMols10.length - 1; i >= 0; i--) {
|
||
var m = liqMols10[i];
|
||
m.energy = Math.min(1, m.energy + (T / 100 - 0.3) * 0.01 + Math.random() * 0.01);
|
||
m.vx += (Math.random() - 0.5) * 0.2; m.vy += (Math.random() - 0.5) * 0.2;
|
||
m.vx *= 0.95; m.vy *= 0.95;
|
||
m.x += m.vx; m.y += m.vy;
|
||
if (m.x < cx + 4) { m.x = cx + 4; m.vx = Math.abs(m.vx); }
|
||
if (m.x > cx + cW - 4) { m.x = cx + cW - 4; m.vx = -Math.abs(m.vx); }
|
||
if (m.y > H - 33) { m.y = H - 33; m.vy = -Math.abs(m.vy); }
|
||
if (m.y < ly + 2) m.vy = Math.abs(m.vy);
|
||
|
||
// Испарение — если у поверхности с высокой энергией
|
||
if (m.y < ly + 15 && m.energy > escThresh) {
|
||
vapMols10.push({ x: m.x, y: ly - 5, vx: (Math.random() - 0.5) * 1.5, vy: -1 - Math.random() * 1.5, alpha: 1, evap: true });
|
||
liqMols10.splice(i, 1);
|
||
liqTemp10 = Math.max(0, liqTemp10 - 0.5);
|
||
continue;
|
||
}
|
||
|
||
var e = m.energy;
|
||
ctx.fillStyle = 'rgb(' + Math.round(40 + e * 190) + ',120,' + Math.round(220 - e * 170) + ')';
|
||
ctx.beginPath(); ctx.arc(m.x, m.y, 3.5, 0, Math.PI * 2); ctx.fill();
|
||
}
|
||
|
||
// пары
|
||
for (var i = vapMols10.length - 1; i >= 0; i--) {
|
||
var v = vapMols10[i];
|
||
if (wind10) v.vx += 0.08;
|
||
v.x += v.vx; v.y += v.vy;
|
||
v.alpha -= 0.008;
|
||
if (v.alpha <= 0 || v.y < 0 || v.x < 0 || v.x > W) { vapMols10.splice(i, 1); continue; }
|
||
ctx.globalAlpha = v.alpha * 0.7;
|
||
ctx.fillStyle = '#93c5fd';
|
||
ctx.beginPath(); ctx.arc(v.x, v.y, 2.5, 0, Math.PI * 2); ctx.fill();
|
||
ctx.globalAlpha = 1;
|
||
}
|
||
|
||
// ветер
|
||
if (wind10) {
|
||
ctx.strokeStyle = 'rgba(148,163,184,0.4)'; ctx.lineWidth = 1;
|
||
var wnow = Date.now();
|
||
for (var wl = 0; wl < 3; wl++) {
|
||
var wy = ly - 15 - wl * 12 + Math.sin(wnow / 300 + wl) * 5;
|
||
ctx.beginPath(); ctx.moveTo(cx, wy); ctx.lineTo(cx + cW, wy); ctx.stroke();
|
||
}
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '11px system-ui'; ctx.fillText('→ ветер', cx + cW - 55, ly - 25);
|
||
}
|
||
|
||
// термометр
|
||
ctx.fillStyle = '#1e293b'; ctx.fillRect(20, 20, 12, H - 60);
|
||
var lth = Math.min(H - 62, liqTemp10 / 100 * (H - 62));
|
||
ctx.fillStyle = 'rgba(239,68,68,0.85)'; ctx.fillRect(21, 20 + (H - 62) - lth, 10, lth);
|
||
ctx.fillStyle = '#e2e8f0'; ctx.font = '10px system-ui';
|
||
ctx.fillText(Math.round(liqTemp10) + '°', 14, 15);
|
||
ctx.fillText('T жидк', 4, H - 35);
|
||
|
||
// Новые молекулы рождаются
|
||
if (liqMols10.length < 80) {
|
||
var cW2 = cW, cx2 = cx;
|
||
liqMols10.push({
|
||
x: cx2 + 5 + Math.random() * (cW2 - 10),
|
||
y: H - 33 - Math.random() * lh * 0.8,
|
||
vx: (Math.random() - 0.5), vy: (Math.random() - 0.5),
|
||
energy: Math.random() * 0.3
|
||
});
|
||
}
|
||
|
||
anim10Id = requestAnimationFrame(frame);
|
||
}
|
||
anim10Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══ §11: Кипение (RAF) ═══
|
||
var anim11Id = null;
|
||
var bubbles11 = [], liq11base = 100, liq11L = 2260;
|
||
|
||
function upd11P(val) {
|
||
var P = parseFloat(val) || 1;
|
||
document.getElementById('lbl11P').textContent = P.toFixed(1);
|
||
// T_кип = 100 + 30*(P-1) (линейное приближение для воды)
|
||
var Tkip = Math.round(liq11base + 30 * (P - 1));
|
||
document.getElementById('lbl11Tkip').textContent = Tkip;
|
||
upd11Q();
|
||
}
|
||
|
||
function upd11liq() {
|
||
var sel = document.getElementById('sel11liq');
|
||
if (!sel) return;
|
||
var parts = sel.value.split(',');
|
||
liq11base = parseFloat(parts[0]) || 100;
|
||
liq11L = parseFloat(parts[1]) || 2260;
|
||
var P = parseFloat(document.getElementById('sl11P').value) || 1;
|
||
upd11P(P);
|
||
}
|
||
|
||
function upd11Q() {
|
||
var m = parseFloat(document.getElementById('sl11m').value) || 1;
|
||
var Q = (liq11L * m / 1000).toFixed(2);
|
||
var res = document.getElementById('cv11result');
|
||
if (res) res.innerHTML = 'Q = L · m = ' + (liq11L / 1000).toFixed(3) + ' МДж/кг × ' + m.toFixed(1) + ' кг = <b>' + Q + ' МДж</b>';
|
||
}
|
||
|
||
function startAnim11() {
|
||
var cv = document.getElementById('cv11');
|
||
if (!cv || cv.offsetWidth === 0) return;
|
||
if (anim11Id) { cancelAnimationFrame(anim11Id); anim11Id = null; }
|
||
bubbles11 = [];
|
||
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 bubTimer = 0;
|
||
|
||
function frame() {
|
||
ctx.clearRect(0, 0, W, H);
|
||
ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, W, H);
|
||
|
||
var liqTop = H * 0.15, liqBot = H - 50;
|
||
var liqH = liqBot - liqTop;
|
||
|
||
// жидкость
|
||
var lgrd = ctx.createLinearGradient(0, liqTop, 0, liqBot);
|
||
lgrd.addColorStop(0, 'rgba(186,230,253,0.15)');
|
||
lgrd.addColorStop(1, 'rgba(59,130,246,0.25)');
|
||
ctx.fillStyle = lgrd; ctx.fillRect(20, liqTop, W - 40, liqH);
|
||
ctx.strokeStyle = '#38bdf8'; ctx.lineWidth = 1.5;
|
||
ctx.strokeRect(20, liqTop, W - 40, liqH);
|
||
|
||
// пламя снизу
|
||
var now = Date.now();
|
||
for (var fl = 0; fl < 5; fl++) {
|
||
var fx = 30 + fl * (W - 60) / 4 + Math.sin(now / 200 + fl) * 8;
|
||
var fh = 25 + Math.sin(now / 130 + fl * 0.7) * 10;
|
||
var fgrd = ctx.createLinearGradient(fx, liqBot, fx, liqBot + fh);
|
||
fgrd.addColorStop(0, 'rgba(251,146,60,0.9)');
|
||
fgrd.addColorStop(1, 'rgba(239,68,68,0)');
|
||
ctx.fillStyle = fgrd;
|
||
ctx.beginPath(); ctx.ellipse(fx, liqBot + fh / 2, 10, fh / 2, 0, 0, Math.PI * 2); ctx.fill();
|
||
}
|
||
ctx.fillStyle = '#94a3b8'; ctx.font = '10px system-ui'; ctx.fillText('🔥 Нагреватель', 20, H - 5);
|
||
|
||
// T метка
|
||
var Tsl = document.getElementById('sl11P');
|
||
var P = Tsl ? parseFloat(Tsl.value) : 1;
|
||
var Tkip = Math.round(liq11base + 30 * (P - 1));
|
||
ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 11px system-ui';
|
||
ctx.fillText('T = ' + Tkip + '°C = const', W / 2 - 50, liqTop + 20);
|
||
|
||
// Пузырьки
|
||
bubTimer += 16;
|
||
if (bubTimer > 350) {
|
||
var nx = 30 + Math.random() * (W - 60);
|
||
bubbles11.push({ x: nx, y: liqBot - 8, r: 2 + Math.random() * 3 });
|
||
bubTimer = 0;
|
||
}
|
||
for (var i = bubbles11.length - 1; i >= 0; i--) {
|
||
var b = bubbles11[i];
|
||
b.r += 0.3; b.y -= 1.5;
|
||
b.x += Math.sin(now / 200 + i) * 0.5;
|
||
ctx.strokeStyle = 'rgba(186,230,253,0.7)'; ctx.lineWidth = 1.5;
|
||
ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2); ctx.stroke();
|
||
if (b.y < liqTop + 5) {
|
||
// Лопнуть: брызги
|
||
for (var sp = 0; sp < 4; sp++) {
|
||
ctx.strokeStyle = 'rgba(186,230,253,0.4)'; ctx.lineWidth = 1;
|
||
ctx.beginPath(); ctx.moveTo(b.x, b.y);
|
||
ctx.lineTo(b.x + Math.cos(sp * Math.PI / 2) * 8, b.y + Math.sin(sp * Math.PI / 2) * 8);
|
||
ctx.stroke();
|
||
}
|
||
bubbles11.splice(i, 1);
|
||
}
|
||
}
|
||
|
||
// пар над поверхностью
|
||
ctx.fillStyle = 'rgba(186,230,253,0.08)';
|
||
for (var pv = 0; pv < 8; pv++) {
|
||
ctx.beginPath(); ctx.ellipse(30 + pv * (W - 60) / 7, liqTop - 10 - Math.sin(now / 300 + pv) * 8, 6, 4, 0, 0, Math.PI * 2); ctx.fill();
|
||
}
|
||
|
||
anim11Id = requestAnimationFrame(frame);
|
||
}
|
||
anim11Id = requestAnimationFrame(frame);
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// ИНИЦИАЛИЗАЦИЯ
|
||
// ═══════════════════════════════════════
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// тема
|
||
if (localStorage.getItem('phys8_t_theme')==='dark') document.documentElement.classList.add('dark');
|
||
document.getElementById('themeBtn').onclick = function() {
|
||
document.documentElement.classList.toggle('dark');
|
||
localStorage.setItem('phys8_t_theme', document.documentElement.classList.contains('dark')?'dark':'light');
|
||
};
|
||
|
||
// sidebar ch-btn nav
|
||
function switchTab(tn) {
|
||
document.querySelectorAll('.ch-btn').forEach(function(b){ b.classList.remove('active'); });
|
||
document.querySelectorAll('.content').forEach(function(c){ c.classList.remove('active'); });
|
||
var btn = document.querySelector('.ch-btn[data-tab="'+tn+'"]');
|
||
if (btn) btn.classList.add('active');
|
||
var cont = document.getElementById('tab-'+tn);
|
||
if (cont) cont.classList.add('active');
|
||
if (tn==='ref1') setTimeout(startAnim1, 60);
|
||
if (tn==='ref4') setTimeout(startAnim4, 60);
|
||
if (tn==='ref5') setTimeout(startAnim5, 60);
|
||
if (tn==='ref6') setTimeout(upd6, 60);
|
||
if (tn==='ref7') setTimeout(upd7, 60);
|
||
if (tn==='ref8') setTimeout(function(){ var cv8el = document.getElementById('cv8'); if (cv8el && !lattice8.length) initLattice8(cv8el.offsetWidth, 220); upd8(); }, 60);
|
||
if (tn==='ref9') setTimeout(function(){ drawMelt9(); upd9(); }, 60);
|
||
if (tn==='ref10') setTimeout(startAnim10, 60);
|
||
if (tn==='ref11') setTimeout(startAnim11, 60);
|
||
// на мобильном: прокрутить sidebar к активной кнопке
|
||
if (btn && window.innerWidth <= 768) btn.scrollIntoView({block:'nearest',inline:'center',behavior:'smooth'});
|
||
}
|
||
document.querySelectorAll('.ch-btn').forEach(function(btn) {
|
||
btn.onclick = function() { switchTab(this.dataset.tab); };
|
||
});
|
||
// совместимость: старые .tab тоже работают (используются в buildMiniToc и др.)
|
||
document.querySelectorAll('.tab').forEach(function(tab) {
|
||
tab.onclick = function() { switchTab(this.dataset.tab); };
|
||
});
|
||
|
||
// переключение вкладок ref-panel
|
||
window.switchRefTab = function(name) {
|
||
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*="\''+name+'\'"]');
|
||
if (btn) btn.classList.add('active');
|
||
var cont = document.getElementById('reftab-'+name);
|
||
if (cont) cont.classList.add('active');
|
||
// render KaTeX в шпаргалке при первом открытии
|
||
if (name === 'cheat' && cont && !cont.dataset.katexDone) {
|
||
cont.dataset.katexDone = '1';
|
||
if (window.renderMathInElement) renderMathInElement(cont, {
|
||
delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}],
|
||
throwOnError:false
|
||
});
|
||
}
|
||
};
|
||
|
||
// refPanel — popup toggle
|
||
var refRendered = false;
|
||
document.getElementById('refToggle').onclick = function(e) {
|
||
e.stopPropagation();
|
||
var panel = document.getElementById('refPanel');
|
||
panel.classList.toggle('show');
|
||
if (!refRendered && panel.classList.contains('show')) {
|
||
refRendered = true;
|
||
if (window.renderMathInElement) renderMathInElement(panel, {
|
||
delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}],
|
||
throwOnError:false
|
||
});
|
||
}
|
||
};
|
||
document.addEventListener('click', function(e) {
|
||
var panel = document.getElementById('refPanel');
|
||
var toggle = document.getElementById('refToggle');
|
||
if (panel && panel.classList.contains('show') && !panel.contains(e.target) && e.target !== toggle) {
|
||
panel.classList.remove('show');
|
||
}
|
||
});
|
||
|
||
// задачи — инит
|
||
['p1','p2','p3','p4','p5','p6','p7','p8','p9','p10','p11','hard'].forEach(function(sec) {
|
||
renderTask(sec);
|
||
});
|
||
setParaTab('p1');
|
||
|
||
// KaTeX
|
||
if (window.renderMathInElement) {
|
||
renderMathInElement(document.body, {
|
||
delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}],
|
||
throwOnError:false
|
||
});
|
||
}
|
||
|
||
// первоначальный запуск анимации §1
|
||
setTimeout(startAnim1, 200);
|
||
setTimeout(drawRod3, 300);
|
||
setTimeout(upd6, 100);
|
||
setTimeout(upd7, 100);
|
||
setTimeout(function(){ drawMelt9(); upd9(); }, 100);
|
||
setTimeout(upd11Q, 100);
|
||
setTimeout(startAnim11, 400);
|
||
|
||
// ═══════════ 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')){
|
||
// определить номер § из class ph-N
|
||
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){
|
||
// не трогаем para-hero — у него своя анимация
|
||
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, .tab, .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');
|
||
// reflow
|
||
void btn.offsetWidth;
|
||
btn.classList.add('is-ripple');
|
||
setTimeout(function(){ btn.classList.remove('is-ripple'); }, 600);
|
||
});
|
||
|
||
// 5. Mini-TOC — no-op (убран в новом layout)
|
||
// buildMiniToc(); — не нужен
|
||
|
||
// 6. Chapter progress — no-op (убран в новом layout)
|
||
// updateChapterProgress(); — не нужен
|
||
}
|
||
|
||
function buildMiniToc(){ /* no-op — mini-TOC убран */ }
|
||
function markMiniTocActive(target){ /* no-op */ }
|
||
function updateChapterProgress(){ /* no-op — chapter-prog убран */ }
|
||
|
||
// ═══ 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>
|