From ed97b6d90bcd0194a5214822e4b63eb3d6b9b8d4 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Sat, 30 May 2026 11:00:40 +0300 Subject: [PATCH] =?UTF-8?q?feat(phys7=20ch2):=20Phase=202=20=D1=86=D0=B5?= =?UTF-8?q?=D0=BB=D0=B8=D0=BA=D0=BE=D0=BC=20=E2=80=94=20=C2=A7=C2=A78-13?= =?UTF-8?q?=20+=20=D1=84=D0=B8=D0=BD=D0=B0=D0=BB=20=C2=AB=D0=97=D0=BD?= =?UTF-8?q?=D0=B0=D1=82=D0=BE=D0=BA=20=D0=B2=D0=B5=D1=89=D0=B5=D1=81=D1=82?= =?UTF-8?q?=D0=B2=D0=B0=C2=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Полная глава 2 «Строение вещества» в одном файле (1195 строк, 7 экспортов). §8 Дискретное строение: - 3 карточки (молекулы и атомы / шкала размеров от 1 м до ядра / доказательства) - IV-1 СИМ: визуальная шкала размеров (8 объектов с цветными барами) - IV-2 СИМ: конструктор молекул H₂O/CO₂/O₂/N₂/CH4/NaCl с SVG-схемами и описаниями - IV-3 DnD: 8 объектов по 3 корзинам (атом/молекула/тело) - IV-4 ТРН: 5 вопросов §9 Тепловое движение. Диффузия: - 3 карточки (хаотическое движение / диффузия и её скорость / примеры) - IV-1 СИМ: анимированная диффузия 60 частиц (20 чернил + 40 воды), slider T → ускорение броуновского движения, кнопка «Сброс», requestAnimationFrame - IV-2 КВИЗ: 3 вопроса о диффузии и броун. движении - IV-3 DnD: 6 примеров → 3 скорости (быстро газ / средне жидк / медленно тверд) - IV-4 ТРН: 5 вопросов §10 Взаимодействие частиц: - 3 карточки (отталкивание/равновесие/притяжение / зачем знать / опыт со свинцом) - IV-1 СИМ: интерактивный график F(r) (Леннард-Джонс-подобная кривая), slider положения → автоматическое определение «отталкивание / равновесие / притяжение / силы малы» - IV-2 КВИЗ: 4 вопроса - IV-3 DnD: 6 ситуаций по 4 корзинам - IV-4 ТРН: 4 вопроса §11 Три состояния — ГЛАВНЫЙ ВИЗУАЛ ГЛАВЫ 2: - 3 карточки (таблица состояний / поведение молекул / вода во всех 3 состояниях) - IV-1 СИМ: переключатель solid/liquid/gas с 3 разными режимами анимации 50 частиц: solid — крист. решётка 10×5 + дрожание; liquid — отскоки + гравитация к дну + плоский уровень; gas — свободное хаотическое движение по всему объёму - IV-2 КВИЗ: 4 вопроса о свойствах - IV-3 DnD: 9 веществ → 3 состояния - IV-4 ТРН: 5 вопросов §12 Тепловое расширение: - 3 карточки (почему / где важно / аномалия воды) - IV-1 СИМ: стержень со slider ΔT (0..200°C), цвет по температуре (HSL 240→0), пунктир базовой длины, индикатор Δl - IV-2 СИМ: биметаллическая пластина с slider ΔT (-50..100°C), изгиб ±30° - IV-3 DnD: 6 веществ → 3 уровня расширения - IV-4 ТРН: 5 вопросов §13 Температура. Термометры: - 3 карточки (T и тепловое движение / шкала Цельсия / 4 вида термометров) - IV-1 СИМ: виртуальный термометр SVG (-50..150 °C), столбик меняет цвет по температуре, шкала с делениями, указатель-стрелка, контекстная подсказка (мороз/комфорт/жарко/кипяток...) + конвертер в Кельвины - IV-2 КАЛЬК: slider t°C → T(K) = t + 273.15, упоминание абс. нуля - IV-3 DnD: 6 температур → 3 диапазона - IV-4 ТРН: 5 вопросов (включая °C↔K) ФИНАЛ ГЛАВЫ 2 (5 боссов + ачивка «Знаток вещества» +50 XP): 1. Молекула vs волос: во сколько раз меньше (10⁶) 2. Диффузия в горячей воде (/T_2$ через Кельвины) 3. Сжатие газа в шприце (20/50 = 40%) 4. Удлинение рельса при ΔT=60°C (18 мм) 5. 27 °C → 300.2 K Все интерактивы wireDnd/wireQuiz/слайдеры/симы привязаны. parse-check, smoke-test (7 экспортов) пройдены. --- frontend/js/phys7_ch2_widgets.js | 1195 ++++++++++++++++++++++++++++++ 1 file changed, 1195 insertions(+) create mode 100644 frontend/js/phys7_ch2_widgets.js diff --git a/frontend/js/phys7_ch2_widgets.js b/frontend/js/phys7_ch2_widgets.js new file mode 100644 index 0000000..7ab36a9 --- /dev/null +++ b/frontend/js/phys7_ch2_widgets.js @@ -0,0 +1,1195 @@ +// Физика 7 · Глава 2 «Строение вещества» · виджеты §§8–13 + финал (Wave 1+2+3). +// Экспорт: window.PHYS7_CH2_WIDGETS = { p8, p9, p10, p11, p12, p13, final2 }. +// Палитра главы — violet (#7c3aed). + +(function(){ +'use strict'; + +const ACCENT = '#7c3aed'; +const ACCENT_D = '#5b21b6'; +const ACCENT_SOFT = '#ede9fe'; + +function renderMath(root){ + if(window.renderMathInElement){ + try{ + window.renderMathInElement(root, { + delimiters: [{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}], + throwOnError: false + }); + }catch(e){} + } +} + +function makeCard(kind, title, badge, body){ + const colorByKind = { theory:ACCENT, rule:'#dc2626', example:'#10b981' }; + const labelByKind = { theory:'Теория', rule:'Правило', example:'Пример' }; + const c = colorByKind[kind] || ACCENT; + return '
' + + '
' + + '' + labelByKind[kind] + '' + + '' + (badge||'') + '' + + '' + title + '' + + '
' + + '
' + body + '
' + + '
'; +} + +function wgWrap(id, badge, title, hint, body){ + return '
' + + '
' + + '' + badge + '' + + '' + title + '' + + '
' + + (hint ? '
' + hint + '
' : '') + + body + + '
'; +} + +function readButton(pid){ + return '
'; +} + +function wireReadBtn(pid){ + const btn = document.querySelector('.ph7-read-btn[data-pid="' + pid + '"]'); + if(!btn) return; + const KEY = 'physics7_ch2_read_' + pid; + if(localStorage.getItem(KEY) === '1'){ + btn.innerHTML = ' Прочитано'; + btn.disabled = true; btn.style.background = '#94a3b8'; btn.style.cursor = 'default'; + return; + } + btn.addEventListener('click', function(){ + if(localStorage.getItem(KEY) === '1') return; + localStorage.setItem(KEY, '1'); + if(typeof window.bumpProgress === 'function') window.bumpProgress(pid, 30); + if(typeof window.addXp === 'function') window.addXp(10, 'read-' + pid); + btn.innerHTML = ' Прочитано'; + btn.disabled = true; btn.style.background = '#94a3b8'; btn.style.cursor = 'default'; + }); +} + +function wireDnd(host, items){ + const root = document.getElementById(host); + if(!root) return; + const checkBtn = root.querySelector('.dnd-check'); + const fb = root.querySelector('.dnd-fb'); + let placed = {}; + let armed = null; + root.querySelectorAll('.dnd-chip').forEach(chip => chip.addEventListener('click', () => { + if(armed === chip){ armed.classList.remove('armed'); armed.style.boxShadow = ''; armed = null; return; } + if(armed){ armed.classList.remove('armed'); armed.style.boxShadow = ''; } + armed = chip; + chip.classList.add('armed'); + chip.style.boxShadow = '0 0 0 3px rgba(124,58,237,.3)'; + })); + root.querySelectorAll('.drop-box').forEach(box => box.addEventListener('click', () => { + if(!armed) return; + const cat = box.dataset.cat; + const id = armed.dataset.id; + placed[id] = cat; + const inner = box.querySelector('.drop-items'); + const clone = armed.cloneNode(true); + clone.classList.remove('armed'); clone.classList.add('placed'); + clone.style.background = ACCENT_SOFT; clone.style.borderColor = ACCENT; clone.style.boxShadow = ''; + clone.addEventListener('click', e => { + e.stopPropagation(); + delete placed[id]; + clone.remove(); + armed = null; + const orig = root.querySelector('.dnd-chip[data-id="' + id + '"]:not(.placed)'); + if(orig) orig.style.display = ''; + }); + inner.appendChild(clone); + armed.style.display = 'none'; + armed.classList.remove('armed'); armed.style.boxShadow = ''; + armed = null; + })); + if(checkBtn) checkBtn.addEventListener('click', () => { + const total = items.length; + let correct = 0; + items.forEach(it => { if(placed[it.id] === it.cat) correct++; }); + fb.style.display = 'block'; + if(correct === total){ + fb.style.background = '#d1fae5'; fb.style.color = '#065f46'; fb.style.borderLeft = '4px solid #10b981'; + fb.innerHTML = '✓ Идеально! Все ' + total + ' карточек на своих местах.'; + if(typeof window.addXp === 'function') window.addXp(15, 'dnd-' + host); + } else { + fb.style.background = '#fee2e2'; fb.style.color = '#7f1d1d'; fb.style.borderLeft = '4px solid #dc2626'; + fb.innerHTML = '✗ Правильно: ' + correct + '/' + total + '. Попробуй ещё раз.'; + } + }); +} + +function dndPool(host, items, cats){ + const chips = items.map(it => '').join(''); + const boxes = cats.map(c => '
' + c.label + '
').join(''); + return '
' + + '
Кликни по карточке, потом — на корзину. Чтобы вернуть: кликни по карточке в корзине.
' + + '
' + chips + '
' + + '
' + boxes + '
' + + '
' + + '' + + '
'; +} + +function quizQuestion(host, idx, q, opts, correctIdx, explain){ + const optsHtml = opts.map((o,i) => '').join(''); + return '
' + + '
' + (idx+1) + '. ' + q + '
' + + '
' + optsHtml + '
' + + '' + + '
'; +} + +function wireQuiz(host, onAllCorrect){ + const root = document.getElementById(host); + if(!root) return; + const all = root.querySelectorAll('.qz-q'); + const done = new Set(); + all.forEach(qDiv => { + const opts = qDiv.querySelectorAll('.qz-opt'); + const correct = +qDiv.querySelector('.qz-opts').dataset.correct; + const explain = qDiv.querySelector('.qz-opts').dataset.explain; + const fb = qDiv.querySelector('.qz-fb'); + opts.forEach(o => o.addEventListener('click', () => { + if(done.has(qDiv)) return; + const i = +o.dataset.i; + opts.forEach(x => x.disabled = true); + if(i === correct){ + o.style.background = '#d1fae5'; o.style.borderColor = '#10b981'; o.style.color = '#065f46'; + fb.style.display = 'block'; fb.style.background = '#d1fae5'; fb.style.color = '#065f46'; fb.style.borderLeft = '4px solid #10b981'; + fb.innerHTML = '✓ Верно!' + (explain ? ' ' + explain : ''); + done.add(qDiv); + if(done.size === all.length && typeof onAllCorrect === 'function') onAllCorrect(); + } else { + o.style.background = '#fee2e2'; o.style.borderColor = '#dc2626'; o.style.color = '#7f1d1d'; + opts[correct].style.background = '#d1fae5'; opts[correct].style.borderColor = '#10b981'; opts[correct].style.color = '#065f46'; + fb.style.display = 'block'; fb.style.background = '#fee2e2'; fb.style.color = '#7f1d1d'; fb.style.borderLeft = '4px solid #dc2626'; + fb.innerHTML = '✗ Неверно. Правильно: «' + opts[correct].textContent + '».' + (explain ? ' ' + explain : ''); + done.add(qDiv); + } + })); + }); +} + +/* ========================================================== */ +/* §8 — Дискретное строение вещества */ +/* ========================================================== */ +function add_p8(){ + const body = document.getElementById('p8-body'); + if(!body) return; + let h = ''; + + h += makeCard('theory', 'Из чего состоит вещество', '§ 8.1', + 'Все вещества состоят из мельчайших частиц — молекул и атомов. ' + + 'Они так малы, что не видны даже в обычный микроскоп. Между частицами есть промежутки. ' + + 'Молекула — это наименьшая частица вещества, сохраняющая его химические свойства. ' + + 'Молекулы состоят из атомов.'); + + h += makeCard('rule', 'Размеры частиц', '§ 8.2', + 'Типичный диаметр молекулы — около $10^{-10}$ м. Сравни:' + + '' + + '' + + [['Зерно мака','1 мм $= 10^{-3}$ м'],['Толщина волоса','$\\approx 10^{-4}$ м'],['Бактерия','$\\approx 10^{-6}$ м'],['Молекула','$\\approx 10^{-10}$ м'],['Атом','$\\approx 10^{-10}$ м'],['Ядро атома','$\\approx 10^{-15}$ м']].map(([nm, sz]) => + '').join('') + + '
ОбъектРазмер
' + nm + '' + sz + '
'); + + h += makeCard('example', 'Доказательства дискретности', '§ 8.3', + '
    ' + + '
  1. Сжимаемость газов — при сдавливании поршнем объём уменьшается → есть пустоты между молекулами.
    2. ' + + '
  2. Растворение сахара в воде — молекулы сахара заполняют промежутки между молекулами воды; уровень почти не поднимается.
    3. ' + + '
  3. Расширение тел при нагреве — увеличиваются промежутки между частицами.
    4. ' + + '
'); + + /* IV-1: визуал-масштабы */ + h += wgWrap('p8-iv1', 'СИМ', 'Шкала размеров', 'От огромного к крошечному (логарифмическая шкала).', + '
' + + [['1 м','Человек','#0284c7',1],['0,01 м','Монета','#10b981',0.85],['0,001 м','Зерно мака','#d97706',0.7],['10⁻⁴ м','Волос (толщина)','#dc2626',0.55],['10⁻⁶ м','Бактерия','#7c3aed',0.4],['10⁻⁸ м','Вирус','#0891b2',0.25],['10⁻¹⁰ м','Молекула','#92400e',0.12],['10⁻¹⁵ м','Ядро атома','#374151',0.05]].map(([sz, nm, col, w]) => + '
' + + '
' + sz + '
' + + '
' + + '
' + nm + '
' + + '
').join('') + + '
'); + + /* IV-2: конструктор молекулы */ + h += wgWrap('p8-iv2', 'СИМ', 'Конструктор молекулы', 'Выбери — увидь схему молекулы из атомов.', + '
' + + ['H2O','CO2','O2','N2','CH4','NaCl'].map(m => + '').join('') + + '
' + + '' + + '
'); + + /* IV-3: DnD */ + h += wgWrap('p8-iv3', 'DnD', 'Атом / молекула / тело', 'Распредели понятия по корзинам.', + dndPool('p8-dnd', [ + { id:'a1', cat:'atom', html:'Атом водорода H' }, + { id:'a2', cat:'atom', html:'Атом кислорода O' }, + { id:'a3', cat:'mol', html:'Молекула воды H₂O' }, + { id:'a4', cat:'mol', html:'Молекула CO₂' }, + { id:'a5', cat:'body', html:'Капля воды' }, + { id:'a6', cat:'body', html:'Резиновый мяч' }, + { id:'a7', cat:'atom', html:'Атом железа Fe' }, + { id:'a8', cat:'mol', html:'Молекула O₂' } + ], [ + { cat:'atom', label:'Атом' }, + { cat:'mol', label:'Молекула' }, + { cat:'body', label:'Тело' } + ])); + + /* IV-4: тренажёр */ + h += wgWrap('p8-iv4', 'ТРН', 'Тренажёр §8', '5 вопросов на закрепление.', + '
' + + quizQuestion('p8-tr', 0, 'Каков примерный диаметр молекулы воды?', ['$10^{-3}$ м','$10^{-6}$ м','$10^{-10}$ м','$10^{-15}$ м'], 2, 'Молекулы — порядка $10^{-10}$ м (десятая часть нанометра).') + + quizQuestion('p8-tr', 1, 'Что меньше: молекула или ядро атома?', ['Молекула','Ядро атома','Они одинаковые','Зависит от вещества'], 1, 'Ядро в $\\sim 10^5$ раз меньше атома.') + + quizQuestion('p8-tr', 2, 'Почему газы легко сжимаются?', ['Молекулы мягкие','Между молекулами большие промежутки','Газ не имеет молекул','Молекулы скользят'], 1) + + quizQuestion('p8-tr', 3, 'Молекула — это…', ['Видимая частица','Наименьшая частица, сохраняющая свойства вещества','Атом','Кристалл'], 1) + + quizQuestion('p8-tr', 4, 'Из чего состоят молекулы?', ['Из электронов','Из протонов','Из атомов','Из ядер'], 2) + + '
'); + + h += readButton('p8'); + body.innerHTML = h; + + // Wire molecule constructor + const molData = { + 'H2O': { atoms:[{x:160,y:65,r:18,c:'#dc2626',l:'O'},{x:120,y:90,r:11,c:'#fff',l:'H',stroke:'#94a3b8'},{x:200,y:90,r:11,c:'#fff',l:'H',stroke:'#94a3b8'}], bonds:[[0,1],[0,2]], desc:'H₂O (вода): 1 атом кислорода + 2 атома водорода под углом 104,5°.' }, + 'CO2': { atoms:[{x:160,y:65,r:14,c:'#0f172a',l:'C'},{x:100,y:65,r:18,c:'#dc2626',l:'O'},{x:220,y:65,r:18,c:'#dc2626',l:'O'}], bonds:[[0,1],[0,2]], desc:'CO₂ (углекислый газ): углерод между двумя кислородами, молекула линейная.' }, + 'O2': { atoms:[{x:120,y:65,r:18,c:'#dc2626',l:'O'},{x:200,y:65,r:18,c:'#dc2626',l:'O'}], bonds:[[0,1]], desc:'O₂ (кислород): два атома кислорода. Этим воздухом мы дышим.' }, + 'N2': { atoms:[{x:120,y:65,r:18,c:'#0891b2',l:'N'},{x:200,y:65,r:18,c:'#0891b2',l:'N'}], bonds:[[0,1]], desc:'N₂ (азот): два атома азота. 78 % воздуха — это N₂.' }, + 'CH4': { atoms:[{x:160,y:65,r:14,c:'#0f172a',l:'C'},{x:160,y:30,r:11,c:'#fff',l:'H',stroke:'#94a3b8'},{x:160,y:100,r:11,c:'#fff',l:'H',stroke:'#94a3b8'},{x:110,y:65,r:11,c:'#fff',l:'H',stroke:'#94a3b8'},{x:210,y:65,r:11,c:'#fff',l:'H',stroke:'#94a3b8'}], bonds:[[0,1],[0,2],[0,3],[0,4]], desc:'CH₄ (метан): углерод в центре, 4 водорода по углам тетраэдра. Природный газ.' }, + 'NaCl':{ atoms:[{x:130,y:65,r:18,c:'#7c3aed',l:'Na'},{x:200,y:65,r:18,c:'#10b981',l:'Cl'}], bonds:[[0,1]], desc:'NaCl (поваренная соль): натрий + хлор. В твёрдом виде образует кубическую решётку.' } + }; + function drawMol(m){ + const d = molData[m]; + let s = ''; + d.bonds.forEach(([i,j]) => { + s += ''; + }); + d.atoms.forEach(a => { + s += ''; + s += '' + a.l + ''; + }); + document.getElementById('p8-mol-svg').innerHTML = s; + document.getElementById('p8-mol-desc').textContent = d.desc; + } + body.querySelectorAll('.p8-mol').forEach(btn => btn.addEventListener('click', () => { + body.querySelectorAll('.p8-mol').forEach(b => { b.style.background = '#fff'; b.style.color = '#0f172a'; }); + btn.style.background = ACCENT; btn.style.color = '#fff'; + drawMol(btn.dataset.m); + })); + drawMol('H2O'); + body.querySelector('.p8-mol[data-m="H2O"]').style.background = ACCENT; + body.querySelector('.p8-mol[data-m="H2O"]').style.color = '#fff'; + + wireDnd('p8-dnd', [ + { id:'a1', cat:'atom' },{ id:'a2', cat:'atom' },{ id:'a3', cat:'mol' },{ id:'a4', cat:'mol' }, + { id:'a5', cat:'body' },{ id:'a6', cat:'body' },{ id:'a7', cat:'atom' },{ id:'a8', cat:'mol' } + ]); + wireQuiz('p8-tr-host', () => { if(window.addXp) window.addXp(15, 'tr-p8'); }); + wireReadBtn('p8'); + renderMath(body); +} + +/* ========================================================== */ +/* §9 — Тепловое движение частиц. Диффузия */ +/* ========================================================== */ +function add_p9(){ + const body = document.getElementById('p9-body'); + if(!body) return; + let h = ''; + + h += makeCard('theory', 'Молекулы вечно движутся', '§ 9.1', + 'Молекулы любого тела находятся в непрерывном беспорядочном (хаотическом) движении. ' + + 'Это движение называется тепловым: чем выше температура, тем быстрее движутся частицы.

' + + 'Доказательство — броуновское движение: мельчайшие частицы в воде (пыльца, тушь) непрерывно дёргаются под ударами молекул.'); + + h += makeCard('rule', 'Диффузия', '§ 9.2', + 'Диффузия — это самопроизвольное взаимное проникновение молекул одного вещества между молекулами другого.

' + + 'Скорость диффузии зависит от:' + + '
    ' + + '
  • температуры: выше $T$ → быстрее диффузия;
    • ' + + '
  • состояния вещества: в газах ⪢ в жидкостях ⪢ в твёрдых телах.
    • ' + + '
'); + + h += makeCard('example', 'Где мы видим диффузию', '§ 9.3', + '
    ' + + '
  • Запах духов или пищи распространяется по комнате — диффузия в воздухе.
    • ' + + '
  • Чай завариваеётся быстрее в горячей воде — молекулы чая активно перемешиваются.
    • ' + + '
  • Засолка огурцов идёт долго — диффузия в жидкости медленнее, чем в газе.
    • ' + + '
  • Сварка металлов на самом деле — диффузия атомов в твёрдом теле, очень медленная.
    • ' + + '
'); + + /* IV-1: симуляция диффузии (свой простой газ) */ + h += wgWrap('p9-iv1', 'СИМ', 'Диффузия чернил в воде', 'Меняй температуру — наблюдай, как ускоряется смешивание.', + '
' + + '' + + '
' + + '
' + + '' + + '
Синие молекулы — вода, тёмные — чернила. Видно, как чем теплее, тем быстрее они перемешиваются.
'); + + /* IV-2: квиз */ + h += wgWrap('p9-iv2', 'КВИЗ', 'Про диффузию', 'Выбери верное.', + '
' + + quizQuestion('p9-q', 0, 'В каком веществе диффузия идёт быстрее всего?', ['В твёрдом','В жидком','В газообразном','Одинаково'], 2, 'В газах молекулы движутся быстрее и расстояния между ними больше.') + + quizQuestion('p9-q', 1, 'Как ускорить заваривание чая?', ['Понизить температуру','Налить холодной воды','Налить горячей воды','Не размешивать'], 2) + + quizQuestion('p9-q', 2, 'Что доказывает броуновское движение?', ['Что молекулы покоятся','Что молекулы движутся','Что молекулы видны','Что молекул нет'], 1) + + '
'); + + /* IV-3: DnD скорости */ + h += wgWrap('p9-iv3', 'DnD', 'Где диффузия быстрее?', 'Распредели 6 ситуаций.', + dndPool('p9-dnd', [ + { id:'a1', cat:'fast', html:'Дым из костра в воздухе' }, + { id:'a2', cat:'fast', html:'Запах духов в комнате' }, + { id:'a3', cat:'med', html:'Сахар в горячем чае' }, + { id:'a4', cat:'med', html:'Раствор соли в воде' }, + { id:'a5', cat:'slow', html:'Сварка металлов' }, + { id:'a6', cat:'slow', html:'Свинцовая пломба со временем «врастает» в дерево' } + ], [ + { cat:'fast', label:'Быстро (газ)' }, + { cat:'med', label:'Средне (жидкость)' }, + { cat:'slow', label:'Медленно (твёрдое)' } + ])); + + /* IV-4: тренажёр */ + h += wgWrap('p9-iv4', 'ТРН', 'Тренажёр §9', '5 вопросов.', + '
' + + quizQuestion('p9-tr', 0, 'Тепловое движение — это…', ['Падение тел','Движение колеса','Хаотическое движение молекул','Движение звуковой волны'], 2) + + quizQuestion('p9-tr', 1, 'При нагревании средняя скорость молекул…', ['Не меняется','Увеличивается','Уменьшается','Становится нулевой'], 1) + + quizQuestion('p9-tr', 2, 'В каком случае диффузия пройдёт быстрее: в холодной или горячей воде?', ['В холодной','В горячей','Одинаково','Не зависит'], 1) + + quizQuestion('p9-tr', 3, 'Через сколько примерно времени запах из открытого флакона духов распространится по комнате?', ['Доли секунды','За минуту-две','За сутки','За месяц'], 1, 'Диффузия в газе — относительно быстрая, но мгновенной не бывает.') + + quizQuestion('p9-tr', 4, 'Броуновское движение — это движение…', ['Молекул','Атомов','Мельчайших видимых частиц под ударами молекул','Звуковых волн'], 2) + + '
'); + + h += readButton('p9'); + body.innerHTML = h; + + // Diffusion sim + const sim = (function(){ + const W = 360, H = 160; + const N = 60; + const parts = []; + function init(){ + parts.length = 0; + for(let i = 0; i < N; i++){ + const isInk = i < 20; + parts.push({ + x: isInk ? (40 + Math.random() * 60) : (Math.random() * W), + y: isInk ? (40 + Math.random() * 60) : (Math.random() * H), + vx: 0, vy: 0, + ink: isInk + }); + } + } + function step(T){ + const speed = 0.4 + T / 30; // px/frame + parts.forEach(p => { + p.vx += (Math.random() - 0.5) * speed * 0.6; + p.vy += (Math.random() - 0.5) * speed * 0.6; + p.vx *= 0.92; p.vy *= 0.92; + p.x += p.vx; p.y += p.vy; + if(p.x < 2){ p.x = 2; p.vx = -p.vx; } + if(p.x > W-2){ p.x = W-2; p.vx = -p.vx; } + if(p.y < 2){ p.y = 2; p.vy = -p.vy; } + if(p.y > H-2){ p.y = H-2; p.vy = -p.vy; } + }); + } + function render(){ + const svg = document.getElementById('p9-sim'); + if(!svg) return false; + let s = ''; + parts.forEach(p => { + const c = p.ink ? '#0f172a' : '#3b82f6'; + s += ''; + }); + svg.innerHTML = s; + return true; + } + return { init, step, render }; + })(); + let raf = 0; + function loop(){ + const T = +document.getElementById('p9-T-r').value; + sim.step(T); + if(!sim.render()){ cancelAnimationFrame(raf); return; } + raf = requestAnimationFrame(loop); + } + sim.init(); + raf = requestAnimationFrame(loop); + document.getElementById('p9-T-r').addEventListener('input', () => { + document.getElementById('p9-T').textContent = document.getElementById('p9-T-r').value; + }); + document.getElementById('p9-reset').addEventListener('click', () => { sim.init(); }); + + wireDnd('p9-dnd', [ + { id:'a1', cat:'fast' },{ id:'a2', cat:'fast' },{ id:'a3', cat:'med' },{ id:'a4', cat:'med' }, + { id:'a5', cat:'slow' },{ id:'a6', cat:'slow' } + ]); + wireQuiz('p9-q-host', () => { if(window.addXp) window.addXp(10, 'q-p9'); }); + wireQuiz('p9-tr-host', () => { if(window.addXp) window.addXp(15, 'tr-p9'); }); + wireReadBtn('p9'); + renderMath(body); +} + +/* ========================================================== */ +/* §10 — Взаимодействие частиц вещества */ +/* ========================================================== */ +function add_p10(){ + const body = document.getElementById('p10-body'); + if(!body) return; + let h = ''; + + h += makeCard('theory', 'Два вида сил между частицами', '§ 10.1', + 'Между молекулами одновременно действуют силы притяжения и силы отталкивания. ' + + 'Их интенсивность зависит от расстояния:' + + '
    ' + + '
  • на малом расстоянии (молекулы «прижаты») — преобладает отталкивание;
    • ' + + '
  • на равновесном расстоянии $r_0$ — силы уравновешиваются;
    • ' + + '
  • на большом расстоянии — преобладает притяжение;
    • ' + + '
  • на очень большом — силы пренебрежимо малы.
    • ' + + '
'); + + h += makeCard('rule', 'Зачем нужно знать про эти силы', '§ 10.2', + 'Силы между молекулами объясняют:' + + '
    ' + + '
  • почему твёрдые тела сохраняют форму (сильное притяжение),
    • ' + + '
  • почему трудно растянуть стальной трос (надо преодолеть притяжение),
    • ' + + '
  • почему трудно сжать жидкость (молекулы уже близко — мешает отталкивание),
    • ' + + '
  • почему пружина возвращается в исходное положение — силы упругости имеют ту же природу.
    • ' + + '
'); + + h += makeCard('example', 'Опыт с свинцовыми цилиндрами', '§ 10.3', + 'Если две тщательно отшлифованные свинцовые поверхности сжать вместе, ' + + 'они «слипнутся» — их можно даже подвесить на крючок, и они не разойдутся. ' + + 'Причина — притяжение молекул на малом расстоянии. ' + + 'Через грязный или окисленный слой это не работает: молекулы не подходят достаточно близко.'); + + /* IV-1: график F(r) */ + h += wgWrap('p10-iv1', 'СИМ', 'График сил F(r) — притяжение и отталкивание', 'Двигай молекулу — увидь, какая сила преобладает.', + '
' + + '' + + '
'); + + /* IV-2: квиз */ + h += wgWrap('p10-iv2', 'КВИЗ', 'Силы взаимодействия', 'Выбери верное.', + '
' + + quizQuestion('p10-q', 0, 'На равновесном расстоянии $r_0$ молекулы…', ['Только притягиваются','Только отталкиваются','Притяжение и отталкивание равны','Не взаимодействуют'], 2) + + quizQuestion('p10-q', 1, 'Почему трудно сжать жидкость?', ['Молекул мало','Молекулы уже близко — мешает отталкивание','Жидкость не имеет молекул','Притяжение слишком сильно'], 1) + + quizQuestion('p10-q', 2, 'Почему пружина возвращается в исходную форму?', ['Из-за гравитации','Из-за сил между молекулами','Сама по себе','Из-за воздуха'], 1) + + quizQuestion('p10-q', 3, 'На очень большом расстоянии межмолекулярные силы…', ['Очень большие','Пренебрежимо малы','Отталкивают','Колеблются'], 1) + + '
'); + + /* IV-3: DnD */ + h += wgWrap('p10-iv3', 'DnD', 'Преобладает что?', 'Сопоставь расстояние и преобладающую силу.', + dndPool('p10-dnd', [ + { id:'a1', cat:'rep', html:'Молекулы прижаты вплотную' }, + { id:'a2', cat:'rep', html:'Жидкость сжимают поршнем' }, + { id:'a3', cat:'eq', html:'$r = r_0$ (равновесие)' }, + { id:'a4', cat:'attr', html:'Растягивание стального троса' }, + { id:'a5', cat:'attr', html:'Молекулы немного раздвинуты' }, + { id:'a6', cat:'zero', html:'$r \\gg r_0$ (далеко)' } + ], [ + { cat:'rep', label:'Отталкивание' }, + { cat:'eq', label:'Равновесие' }, + { cat:'attr', label:'Притяжение' }, + { cat:'zero', label:'Силы малы' } + ])); + + /* IV-4: тренажёр */ + h += wgWrap('p10-iv4', 'ТРН', 'Тренажёр §10', '4 вопроса.', + '
' + + quizQuestion('p10-tr', 0, 'Между молекулами действуют…', ['Только притяжение','Только отталкивание','И притяжение, и отталкивание','Никаких сил'], 2) + + quizQuestion('p10-tr', 1, 'Если молекулы оказались ближе $r_0$, то результирующая сила…', ['Отталкивает','Притягивает','Равна нулю','Не определена'], 0) + + quizQuestion('p10-tr', 2, 'Опыт со свинцовыми цилиндрами показывает…', ['Что вещество твёрдое','Что молекулы притягиваются на близком расстоянии','Что свинец тяжёлый','Что молекулы движутся'], 1) + + quizQuestion('p10-tr', 3, 'Силы упругости имеют ту же природу, что и…', ['Сила трения','Гравитация','Силы между молекулами','Электромагнитные волны'], 2) + + '
'); + + h += readButton('p10'); + body.innerHTML = h; + + function drawF(){ + const rRel = +document.getElementById('p10-r-r').value / 100; // r/r0 from 0.6 to 2.5 + document.getElementById('p10-r').textContent = rRel.toFixed(2); + const W = 380, H = 200, pad = 30; + // Чертим оси r (x) и F (y) + // F(r) модельная: F = a/r^13 - b/r^7 (Lennard-Jones-like), минимум в r=1. + function F(r){ return 12/Math.pow(r,13) - 12/Math.pow(r,7); } + let s = ''; + // Оси + s += ''; + s += ''; + s += 'r'; + s += 'F'; + // r=r0 + const r0X = pad + (W - 2*pad) * (1 - 0.6) / (2.5 - 0.6); + s += ''; + s += 'r₀'; + // Кривая F(r) + let path = ''; + for(let i = 0; i <= 60; i++){ + const r = 0.6 + (2.5 - 0.6) * i / 60; + const f = F(r); + const fClamped = Math.max(-2, Math.min(4, f)); + const x = pad + (W - 2*pad) * (r - 0.6) / (2.5 - 0.6); + const y = H/2 - fClamped * 18; + path += (i === 0 ? 'M' : 'L') + x.toFixed(1) + ' ' + y.toFixed(1) + ' '; + } + s += ''; + // Текущая точка + const curX = pad + (W - 2*pad) * (rRel - 0.6) / (2.5 - 0.6); + const curF = Math.max(-2, Math.min(4, F(rRel))); + const curY = H/2 - curF * 18; + s += ''; + s += ''; + // Подписи областей + s += 'отталкивание'; + s += 'притяжение'; + + document.getElementById('p10-svg').innerHTML = s; + + // Info + const fVal = F(rRel); + let label; + if(rRel < 0.95) label = 'Отталкивание (молекулы слишком близко).'; + else if(rRel < 1.05) label = 'Равновесие: силы уравновешены, $F \\approx 0$.'; + else if(rRel < 1.6) label = 'Притяжение (молекулы стремятся вернуться).'; + else label = 'Силы малы: молекулы почти не взаимодействуют.'; + document.getElementById('p10-info').innerHTML = '$r/r_0 = ' + rRel.toFixed(2) + '$  ·  ' + label; + renderMath(document.getElementById('p10-info')); + } + document.getElementById('p10-r-r').addEventListener('input', drawF); + drawF(); + + wireDnd('p10-dnd', [ + { id:'a1', cat:'rep' },{ id:'a2', cat:'rep' },{ id:'a3', cat:'eq' }, + { id:'a4', cat:'attr' },{ id:'a5', cat:'attr' },{ id:'a6', cat:'zero' } + ]); + wireQuiz('p10-q-host', () => { if(window.addXp) window.addXp(10, 'q-p10'); }); + wireQuiz('p10-tr-host', () => { if(window.addXp) window.addXp(15, 'tr-p10'); }); + wireReadBtn('p10'); + renderMath(body); +} + +/* ========================================================== */ +/* §11 — Газообразное, жидкое, твёрдое состояния */ +/* ГЛАВНЫЙ ВИЗУАЛ ГЛАВЫ 2: переключатель состояний с анимацией */ +/* ========================================================== */ +function add_p11(){ + const body = document.getElementById('p11-body'); + if(!body) return; + let h = ''; + + h += makeCard('theory', 'Три состояния — три поведения частиц', '§ 11.1', + 'Одно и то же вещество может находиться в трёх состояниях. Различие — в том, ' + + 'как расположены и движутся его молекулы:' + + '' + + '' + + '' + + '' + + '' + + '
СостояниеФормаОбъём
Твёрдоесохраняетсохраняет
Жидкоепринимает форму сосудасохраняет
Газообразноезаполняет весь сосудне сохраняет
'); + + h += makeCard('rule', 'Чем отличается поведение молекул', '§ 11.2', + '
    ' + + '
  • Твёрдое: молекулы в узлах кристаллической решётки; колеблются около положений равновесия. Притяжение сильное.
    • ' + + '
  • Жидкое: молекулы упакованы плотно, но «перескакивают» с места на место. Промежутки малы — несжимаема, но течёт.
    • ' + + '
  • Газообразное: молекулы летают почти свободно на больших расстояниях. Силы притяжения слабые. Газ занимает весь предоставленный объём.
    • ' + + '
'); + + h += makeCard('example', 'Вода — все три состояния', '§ 11.3', + 'Удивительно: одна и та же $\\text{H}_2\\text{O}$ существует во всех трёх состояниях:' + + '
    ' + + '
  • Лёд (твёрдое) — при $t < 0$ °C. Сохраняет форму, можно расколоть.
    • ' + + '
  • Вода (жидкое) — от $0$ до $100$ °C. Принимает форму сосуда.
    • ' + + '
  • Пар (газообразное) — при $t > 100$ °C. Заполняет всё пространство.
    • ' + + '
' + + 'Сами молекулы при переходе не меняются — меняется лишь характер их движения и расположения.'); + + /* IV-1: ГЛАВНЫЙ ВИЗУАЛ — переключатель 3 состояний с симуляцией МКТ */ + h += wgWrap('p11-iv1', 'СИМ', 'Молекулы в трёх состояниях', 'Переключай состояние — смотри, как меняется поведение частиц.', + '
' + + ['solid','liquid','gas'].map((st, i) => { + const labels = ['Твёрдое', 'Жидкое', 'Газ']; + const colors = ['#4f46e5', '#0891b2', '#94a3b8']; + return ''; + }).join('') + + '
' + + '' + + '
'); + + /* IV-2: квиз */ + h += wgWrap('p11-iv2', 'КВИЗ', 'Свойства состояний', '', + '
' + + quizQuestion('p11-q', 0, 'Какое состояние сохраняет и форму, и объём?', ['Твёрдое','Жидкое','Газообразное','Все три'], 0) + + quizQuestion('p11-q', 1, 'Газ занимает…', ['Только дно сосуда','Половину сосуда','Весь сосуд','Часть, равную массе'], 2) + + quizQuestion('p11-q', 2, 'Жидкость принимает форму…', ['Любую','Сосуда','Кубическую','Шарообразную'], 1) + + quizQuestion('p11-q', 3, 'В каком состоянии молекулы движутся быстрее всего?', ['В твёрдом','В жидком','В газообразном','Одинаково'], 2) + + '
'); + + /* IV-3: DnD */ + h += wgWrap('p11-iv3', 'DnD', 'Что в каком состоянии?', 'Распредели 9 примеров.', + dndPool('p11-dnd', [ + { id:'a1', cat:'sol', html:'Камень' }, + { id:'a2', cat:'sol', html:'Лёд' }, + { id:'a3', cat:'sol', html:'Железо' }, + { id:'a4', cat:'liq', html:'Молоко' }, + { id:'a5', cat:'liq', html:'Бензин' }, + { id:'a6', cat:'liq', html:'Расплавленный воск' }, + { id:'a7', cat:'gas', html:'Воздух' }, + { id:'a8', cat:'gas', html:'Водяной пар' }, + { id:'a9', cat:'gas', html:'Углекислый газ' } + ], [ + { cat:'sol', label:'Твёрдое' }, + { cat:'liq', label:'Жидкое' }, + { cat:'gas', label:'Газообразное' } + ])); + + /* IV-4: тренажёр */ + h += wgWrap('p11-iv4', 'ТРН', 'Тренажёр §11', '5 вопросов.', + '
' + + quizQuestion('p11-tr', 0, 'Можно ли сжать газ в 2 раза в плотно закрытом шприце?', ['Нет','Да, легко','Только при высокой температуре','Только при очень низкой'], 1) + + quizQuestion('p11-tr', 1, 'Жидкость практически не сжимается, потому что…', ['Молекул мало','Молекулы уже плотно упакованы','Жидкости лёгкие','Молекулы неподвижны'], 1) + + quizQuestion('p11-tr', 2, 'В каком состоянии вещества молекулы располагаются в строгом порядке (кристалл)?', ['Твёрдое','Жидкое','Газообразное','Ни в каком'], 0) + + quizQuestion('p11-tr', 3, 'При переходе из льда в воду молекулы $\\text{H}_2\\text{O}$…', ['Распадаются','Превращаются в другие','Остаются теми же, меняется лишь их движение','Исчезают'], 2) + + quizQuestion('p11-tr', 4, '$0{,}5$ л воды налили в банку $1$ л. Какой объём займёт вода?', ['0,5 л','1 л','0,75 л','Зависит от формы'], 0, 'Жидкость сохраняет свой объём — только форму она меняет.') + + '
'); + + h += readButton('p11'); + body.innerHTML = h; + + // Wire 3-state simulator + const st11 = (function(){ + const W = 360, H = 180, N = 50; + let state = 'solid'; + const parts = []; + for(let i = 0; i < N; i++) parts.push({ x:0, y:0, vx:0, vy:0, hx:0, hy:0 }); + function reset(){ + if(state === 'solid'){ + // Кристаллическая решётка 10×5 + for(let i = 0; i < N; i++){ + const r = Math.floor(i/10), c = i % 10; + parts[i].hx = 40 + c * 28; + parts[i].hy = 40 + r * 28; + parts[i].x = parts[i].hx; parts[i].y = parts[i].hy; + parts[i].vx = 0; parts[i].vy = 0; + } + } else if(state === 'liquid'){ + // Жидкость — занимает нижнюю половину + for(let i = 0; i < N; i++){ + parts[i].x = 20 + Math.random() * (W - 40); + parts[i].y = H/2 + Math.random() * (H/2 - 10); + parts[i].vx = (Math.random() - 0.5) * 1; + parts[i].vy = (Math.random() - 0.5) * 1; + } + } else { // gas + for(let i = 0; i < N; i++){ + parts[i].x = 10 + Math.random() * (W - 20); + parts[i].y = 10 + Math.random() * (H - 20); + const ang = Math.random() * Math.PI * 2; + parts[i].vx = Math.cos(ang) * 2.5; + parts[i].vy = Math.sin(ang) * 2.5; + } + } + } + function step(){ + if(state === 'solid'){ + for(let i = 0; i < N; i++){ + parts[i].x = parts[i].hx + (Math.random() - 0.5) * 3; + parts[i].y = parts[i].hy + (Math.random() - 0.5) * 3; + } + } else if(state === 'liquid'){ + for(let i = 0; i < N; i++){ + parts[i].vx += (Math.random() - 0.5) * 0.3; + parts[i].vy += (Math.random() - 0.5) * 0.3; + parts[i].vx *= 0.93; parts[i].vy *= 0.93; + parts[i].x += parts[i].vx; parts[i].y += parts[i].vy; + // Притяжение к дну (как жидкость) + parts[i].vy += 0.1; + if(parts[i].x < 6){ parts[i].x = 6; parts[i].vx = -parts[i].vx; } + if(parts[i].x > W-6){ parts[i].x = W-6; parts[i].vx = -parts[i].vx; } + if(parts[i].y < H/2 + 6){ parts[i].y = H/2 + 6; parts[i].vy = Math.abs(parts[i].vy)*0.5; } + if(parts[i].y > H-6){ parts[i].y = H-6; parts[i].vy = -Math.abs(parts[i].vy)*0.7; } + } + } else { + for(let i = 0; i < N; i++){ + parts[i].x += parts[i].vx; parts[i].y += parts[i].vy; + if(parts[i].x < 6){ parts[i].x = 6; parts[i].vx = -parts[i].vx; } + if(parts[i].x > W-6){ parts[i].x = W-6; parts[i].vx = -parts[i].vx; } + if(parts[i].y < 6){ parts[i].y = 6; parts[i].vy = -parts[i].vy; } + if(parts[i].y > H-6){ parts[i].y = H-6; parts[i].vy = -parts[i].vy; } + } + } + } + function render(){ + const svg = document.getElementById('p11-sim'); + if(!svg) return false; + let s = ''; + // Контур сосуда + s += ''; + // Уровень жидкости — линия + if(state === 'liquid'){ + s += ''; + } + const col = state === 'solid' ? '#4f46e5' : (state === 'liquid' ? '#0891b2' : '#64748b'); + parts.forEach(p => { + s += ''; + }); + svg.innerHTML = s; + return true; + } + return { + setState(st){ state = st; reset(); updateInfo(); }, + step, render, getState(){ return state; } + }; + })(); + function updateInfo(){ + const st = st11.getState(); + const descs = { + solid: 'Твёрдое: молекулы в узлах решётки, только колеблются. Форма и объём сохраняются.', + liquid: 'Жидкость: молекулы плотно упакованы и «перескакивают». Объём сохраняется, форма — нет.', + gas: 'Газ: молекулы летают свободно. Ни форма, ни объём не сохраняются — газ занимает весь сосуд.' + }; + document.getElementById('p11-info').innerHTML = descs[st]; + } + body.querySelectorAll('.p11-st').forEach(btn => btn.addEventListener('click', () => { + body.querySelectorAll('.p11-st').forEach(b => { b.style.background = '#fff'; b.style.color = b.style.borderColor; }); + btn.style.background = btn.style.borderColor; btn.style.color = '#fff'; + st11.setState(btn.dataset.st); + })); + st11.setState('solid'); + body.querySelector('.p11-st[data-st="solid"]').style.background = '#4f46e5'; + body.querySelector('.p11-st[data-st="solid"]').style.color = '#fff'; + let raf11 = 0; + function loop11(){ + st11.step(); + if(!st11.render()){ cancelAnimationFrame(raf11); return; } + raf11 = requestAnimationFrame(loop11); + } + raf11 = requestAnimationFrame(loop11); + + wireDnd('p11-dnd', [ + { id:'a1', cat:'sol' },{ id:'a2', cat:'sol' },{ id:'a3', cat:'sol' }, + { id:'a4', cat:'liq' },{ id:'a5', cat:'liq' },{ id:'a6', cat:'liq' }, + { id:'a7', cat:'gas' },{ id:'a8', cat:'gas' },{ id:'a9', cat:'gas' } + ]); + wireQuiz('p11-q-host', () => { if(window.addXp) window.addXp(10, 'q-p11'); }); + wireQuiz('p11-tr-host', () => { if(window.addXp) window.addXp(15, 'tr-p11'); }); + wireReadBtn('p11'); + renderMath(body); +} + +/* ========================================================== */ +/* §12 — Тепловое расширение */ +/* ========================================================== */ +function add_p12(){ + const body = document.getElementById('p12-body'); + if(!body) return; + let h = ''; + + h += makeCard('theory', 'Почему тела расширяются при нагреве', '§ 12.1', + 'При нагревании молекулы движутся быстрее и амплитуда их колебаний возрастает. ' + + 'Среднее расстояние между молекулами увеличивается — тело расширяется. ' + + 'При охлаждении наоборот: тело сжимается.

' + + 'Тепловое расширение есть у всех веществ — твёрдых, жидких и газообразных. ' + + 'Сильнее всех расширяются газы, меньше всех — твёрдые тела.'); + + h += makeCard('rule', 'Где это важно учитывать', '§ 12.2', + '
    ' + + '
  • Рельсы укладывают с зазорами — летом сталь удлиняется.
    • ' + + '
  • Мосты опирают через катки или прокладки — иначе бы трескались.
    • ' + + '
  • Провода ЛЭП летом провисают сильнее, чем зимой.
    • ' + + '
  • Биметаллическая пластина — два металла спаяны вместе, гнётся от температуры. Используется в утюгах и термостатах.
    • ' + + '
'); + + h += makeCard('example', 'Аномалия воды', '§ 12.3', + 'Большинство веществ при нагревании расширяются. Но у воды есть исключение: ' + + 'при $t$ от $0$ до $+4$ °C она сжимается, а только начиная с $+4$ °C — расширяется. ' + + 'Поэтому самая плотная вода — при $+4$ °C; она опускается на дно водоёма. ' + + 'Это спасает жизнь в озёрах зимой: лёд плавает сверху, а под ним вода с $+4$ °C, где могут жить рыбы.'); + + /* IV-1: расширение стержня + биметалла */ + h += wgWrap('p12-iv1', 'СИМ', 'Тепловое расширение стержня', 'Меняй температуру — наблюдай длину.', + '
' + + '' + + '
'); + + /* IV-2: биметалл */ + h += wgWrap('p12-iv2', 'СИМ', 'Биметаллическая пластина', 'Два металла расширяются по-разному — пластина гнётся.', + '
' + + '' + + '
Жёлтый слой — латунь (сильнее расширяется), серый — сталь. Принцип термостата.
'); + + /* IV-3: DnD */ + h += wgWrap('p12-iv3', 'DnD', 'Кто сильнее расширяется?', 'Расставь по убыванию теплового расширения.', + dndPool('p12-dnd', [ + { id:'a1', cat:'gas', html:'Воздух в шарике' }, + { id:'a2', cat:'gas', html:'Гелий в баллоне' }, + { id:'a3', cat:'liq', html:'Спирт в термометре' }, + { id:'a4', cat:'liq', html:'Ртуть в термометре' }, + { id:'a5', cat:'sol', html:'Железный рельс' }, + { id:'a6', cat:'sol', html:'Кварцевое стекло' } + ], [ + { cat:'gas', label:'Сильно (газ)' }, + { cat:'liq', label:'Средне (жидкость)' }, + { cat:'sol', label:'Слабо (твёрдое)' } + ])); + + /* IV-4: тренажёр */ + h += wgWrap('p12-iv4', 'ТРН', 'Тренажёр §12', '5 вопросов.', + '
' + + quizQuestion('p12-tr', 0, 'Почему между рельсами оставляют зазоры?', ['Для экономии металла','Чтобы рельсы могли расширяться летом','Для прохода животных','Не оставляют, это миф'], 1) + + quizQuestion('p12-tr', 1, 'При охлаждении тело…', ['Расширяется','Сжимается','Не меняется','Может то и другое'], 1) + + quizQuestion('p12-tr', 2, 'У какой воды максимальная плотность?', ['При 0 °C','При +4 °C','При +100 °C','Не зависит от t'], 1, 'Это уникальная аномалия воды — спасает водоёмы зимой.') + + quizQuestion('p12-tr', 3, 'Биметаллическая пластина при нагревании…', ['Не изменяется','Гнётся в одну сторону','Гнётся в случайную сторону','Распадается'], 1, 'Один металл расширяется сильнее, и пластина изгибается.') + + quizQuestion('p12-tr', 4, 'Что сильнее расширяется при $\\Delta T = 50$ °C?', ['Стальной стержень','Воздушный шарик','Кварц','Лёд'], 1, 'Газы расширяются в сотни раз сильнее твёрдых тел.') + + '
'); + + h += readButton('p12'); + body.innerHTML = h; + + // §12 IV-1 + function drawRod(){ + const dT = +document.getElementById('p12-T-r').value; + document.getElementById('p12-T').textContent = dT; + const W = 380, baseLen = 200, alpha = 12e-6; // сталь + const dl = baseLen * alpha * dT * 200; // визуально усилено + const len = baseLen + dl; + const y = 60, h = 22; + const x = 30; + // Цвет = функция температуры (0..200 → синий → красный) + const hue = 240 - 240 * Math.min(1, dT / 200); + const col = 'hsl(' + hue + ',70%,55%)'; + let s = ''; + // Базовая длина — пунктир + s += ''; + // Реальный стержень + s += ''; + // Подписи + s += 'базовая длина (при 0 °C)'; + if(Math.abs(dl) > 1){ + s += ''; + s += 'Δl = ' + dl.toFixed(1) + ' px'; + } + document.getElementById('p12-svg').innerHTML = s; + const realDl = (baseLen * alpha * dT * 100).toFixed(3); // реалистично в мм для l0=1 м + document.getElementById('p12-info').innerHTML = 'Сталь, $l_0 = 1$ м, нагрев на $\\Delta T = ' + dT + '$ °C: реально удлинится примерно на $' + (alpha * 1000 * dT).toFixed(3) + '$ мм (масштаб усилен).'; + renderMath(document.getElementById('p12-info')); + } + document.getElementById('p12-T-r').addEventListener('input', drawRod); + drawRod(); + + // §12 IV-2 биметалл + function drawBimet(){ + const dT = +document.getElementById('p12b-T-r').value; + document.getElementById('p12b-T').textContent = dT; + const ang = Math.max(-30, Math.min(30, -dT * 0.3)); + const cx = 140, cy = 50; + let s = ''; + // Опора + s += ''; + // Пластина с поворотом + s += ''; + s += ''; + s += ''; + s += 'Δt = ' + dT + ' °C'; + s += ''; + // Подписи цветов + s += ''; + s += 'латунь (сильнее расширяется)'; + s += ''; + s += 'сталь'; + document.getElementById('p12b-svg').innerHTML = s; + } + document.getElementById('p12b-T-r').addEventListener('input', drawBimet); + drawBimet(); + + wireDnd('p12-dnd', [ + { id:'a1', cat:'gas' },{ id:'a2', cat:'gas' },{ id:'a3', cat:'liq' }, + { id:'a4', cat:'liq' },{ id:'a5', cat:'sol' },{ id:'a6', cat:'sol' } + ]); + wireQuiz('p12-tr-host', () => { if(window.addXp) window.addXp(15, 'tr-p12'); }); + wireReadBtn('p12'); + renderMath(body); +} + +/* ========================================================== */ +/* §13 — Температура. Термометры */ +/* ========================================================== */ +function add_p13(){ + const body = document.getElementById('p13-body'); + if(!body) return; + let h = ''; + + h += makeCard('theory', 'Что такое температура', '§ 13.1', + 'Температура — физическая величина, которая характеризует степень нагретости тела. ' + + 'Чем быстрее в среднем движутся молекулы — тем выше температура.

' + + 'Обозначается $t$ (или $T$), измеряется в градусах Цельсия ($°C$). ' + + 'В физике также используют Кельвины ($K$); связь: $T = t + 273{,}15$.'); + + h += makeCard('rule', 'Шкала Цельсия', '§ 13.2', + 'Шкала строится по двум опорным точкам:' + + '
    ' + + '
  • $0$ °C — температура таяния льда (при нормальном давлении);
    • ' + + '
  • $100$ °C — температура кипения чистой воды (при нормальном давлении).
    • ' + + '
' + + 'Промежуток разбит на $100$ равных частей — отсюда «градус Цельсия».'); + + h += makeCard('example', 'Виды термометров', '§ 13.3', + '
    ' + + '
  • Жидкостный (спирт, ртуть) — расширение жидкости в капилляре. От $-40$ до $+50$ °C — бытовой; до $+300$ °C — ртутный лабораторный.
    • ' + + '
  • Биметаллический — стрелка двигается за счёт изгиба пластины. На печках, духовках.
    • ' + + '
  • Электронный — термопара или термистор + дисплей. От $-200$ до $+1000$ °C.
    • ' + + '
  • Инфракрасный (пирометр) — измеряет тепловое излучение без контакта. До тысяч °C.
    • ' + + '
'); + + /* IV-1: виртуальный термометр */ + h += wgWrap('p13-iv1', 'СИМ', 'Виртуальный термометр', 'Двигай слайдер — наблюдай столбик и сравнивай с реальными ситуациями.', + '
' + + '
' + + '' + + '
' + + '
'); + + /* IV-2: конвертер °C ↔ K */ + h += wgWrap('p13-iv2', 'КАЛЬК', 'Конвертер °C ↔ K', 'Кельвин и Цельсий — две шкалы для одной температуры.', + '
' + + '' + + '
' + + '$T = t + 273{,}15 = $ 298,15 K' + + '
Абсолютный нуль: $T = 0$ K $= -273{,}15$ °C — теоретический предел холода.
' + + '
' + + '
'); + + /* IV-3: DnD температуры */ + h += wgWrap('p13-iv3', 'DnD', 'Соотнеси температуру и объект', '', + dndPool('p13-dnd', [ + { id:'a1', cat:'cold', html:'$-180$ °C' }, + { id:'a2', cat:'cold', html:'$-15$ °C' }, + { id:'a3', cat:'room', html:'$+20$ °C' }, + { id:'a4', cat:'room', html:'$+37$ °C' }, + { id:'a5', cat:'hot', html:'$+100$ °C' }, + { id:'a6', cat:'hot', html:'$+1500$ °C' } + ], [ + { cat:'cold', label:'Холод (морозильник / жидкий азот)' }, + { cat:'room', label:'Норма (комната / тело человека)' }, + { cat:'hot', label:'Горячо (кипяток / расплав металла)' } + ])); + + /* IV-4: тренажёр */ + h += wgWrap('p13-iv4', 'ТРН', 'Тренажёр §13', '5 вопросов.', + '
' + + quizQuestion('p13-tr', 0, 'Температура $t = 0$ °C соответствует…', ['Таянию льда','Кипению воды','Замерзанию ртути','Абсолютному нулю'], 0) + + quizQuestion('p13-tr', 1, 'Сколько Кельвинов в $0$ °C?', ['0','100','273,15','373,15'], 2, '$T = 0 + 273{,}15 = 273{,}15$ K.') + + quizQuestion('p13-tr', 2, 'В каком термометре используется расширение жидкости?', ['Биметаллическом','Электронном','Жидкостном (спиртовом/ртутном)','Инфракрасном'], 2) + + quizQuestion('p13-tr', 3, 'Тело человека: $36{,}6$ °C $= ?$ K', ['36,6','273,15','309,75','310'], 2, '$T = 36{,}6 + 273{,}15 \\approx 309{,}75$ K.') + + quizQuestion('p13-tr', 4, 'Может ли быть температура $-300$ °C?', ['Да','Нет, ниже -273,15 °C ничего не бывает','Только в космосе','Только в опытах'], 1) + + '
'); + + h += readButton('p13'); + body.innerHTML = h; + + // §13 IV-1 thermometer + function drawTherm(){ + const t = +document.getElementById('p13-t-r').value; + document.getElementById('p13-t').textContent = t; + const W = 100, H = 220; + const xC = 50, tubeTop = 20, tubeBot = 180, tubeW = 14; + const minT = -50, maxT = 150; + const frac = Math.max(0, Math.min(1, (t - minT) / (maxT - minT))); + const colTop = tubeBot - (tubeBot - tubeTop) * frac; + // Резервуар + const bulbR = 18; + const bulbY = 196; + let s = ''; + s += ''; + s += ''; + // Столбик + const hue = 240 - 240 * frac; + const col = 'hsl(' + hue + ',75%,50%)'; + s += ''; + s += ''; + // Шкала + for(let T = minT; T <= maxT; T += 10){ + const y = tubeBot - (tubeBot - tubeTop) * (T - minT) / (maxT - minT); + const isBig = T % 50 === 0 || T === 0 || T === 100; + s += ''; + if(isBig) s += '' + T + ''; + } + // Указатель текущей + const tY = tubeBot - (tubeBot - tubeTop) * (t - minT) / (maxT - minT); + s += ''; + s += '°C'; + document.getElementById('p13-svg').innerHTML = s; + // Info + let label; + if(t < -50) label = 'Очень холодно (вряд ли встретишь в природе на Земле).'; + else if(t < -30) label = 'Сильный мороз — Север, Сибирь зимой.'; + else if(t < 0) label = 'Минусовая температура — вода замерзает.'; + else if(t < 10) label = 'Прохладно — поздняя осень.'; + else if(t < 25) label = 'Комфортно — обычная комнатная температура.'; + else if(t < 37) label = 'Тепло — летний день.'; + else if(t < 60) label = 'Жарко — около температуры тела или горячая вода из крана.'; + else if(t < 100) label = 'Очень горячо — нельзя касаться, можно обжечься.'; + else if(t < 120) label = 'Кипяток / пар — кипящая вода.'; + else label = 'Очень горячо — выше точки кипения воды.'; + document.getElementById('p13-info').innerHTML = label + '
$T = t + 273{,}15 = ' + (t + 273.15).toFixed(2) + '$ K'; + renderMath(document.getElementById('p13-info')); + } + document.getElementById('p13-t-r').addEventListener('input', drawTherm); + drawTherm(); + + // §13 IV-2 converter + document.getElementById('p13c-c-r').addEventListener('input', () => { + const c = +document.getElementById('p13c-c-r').value; + document.getElementById('p13c-c').textContent = c; + document.getElementById('p13c-k').textContent = (c + 273.15).toFixed(2); + }); + + wireDnd('p13-dnd', [ + { id:'a1', cat:'cold' },{ id:'a2', cat:'cold' },{ id:'a3', cat:'room' }, + { id:'a4', cat:'room' },{ id:'a5', cat:'hot' },{ id:'a6', cat:'hot' } + ]); + wireQuiz('p13-tr-host', () => { if(window.addXp) window.addXp(15, 'tr-p13'); }); + wireReadBtn('p13'); + renderMath(body); +} + +/* ========================================================== */ +/* Финал главы 2 — 5 боссов + ачивка «Знаток вещества» */ +/* ========================================================== */ +function add_final2(){ + const body = document.getElementById('final2-body'); + if(!body) return; + let h = ''; + + h += '
' + + '
Финал главы 2: победи 5 боссов
' + + '
Реши все 5 задач — получишь ачивку «Знаток вещества» и +50 XP.
' + + '
' + + '
Побеждено: 0 / 5
' + + '
'; + + const bosses = [ + { n:1, tag:'§8', title:'Размер молекулы', + q:'Во сколько раз молекула воды ($\\sim 10^{-10}$ м) меньше толщины волоса ($\\sim 10^{-4}$ м)?', + hint:'$10^{-4} / 10^{-10} = 10^6$ — в миллион раз.', + ans:1000000, tol:50000, step:'1' }, + { n:2, tag:'§9', title:'Диффузия и температура', + q:'Стакан кипятка ($+95$ °C) и стакан воды из-под крана ($+10$ °C). В обоих растворяют одинаковую щепотку соли. Через сколько минут вода в первом будет соленее по всему объёму, если во втором — за $30$ мин? Считать, что скорость диффузии примерно $\\sim T$ (в Кельвинах). Ответ — приблизительно в минутах (округли до целого).', + hint:'$T_1 = 95+273 = 368$ K, $T_2 = 10+273 = 283$ K. Отношение $283/368 \\approx 0{,}77$. Время в горячей: $30 \\cdot 0{,}77 \\approx 23$ мин.', + ans:23, tol:2, step:'1' }, + { n:3, tag:'§11', title:'Газ в шприце', + q:'В шприце $V_1 = 50$ см³ воздуха. Поршнем сжали так, что объём стал $V_2 = 20$ см³. Какую часть от первоначального объёма занял газ (в процентах, округли до целого)?', + hint:'$V_2/V_1 \\cdot 100\\% = 20/50 \\cdot 100\\% = 40\\,\\%$.', + ans:40, tol:1, step:'1' }, + { n:4, tag:'§12', title:'Тепловое расширение рельса', + q:'Стальной рельс длиной $l_0 = 25$ м летом нагревается с зимних $-20$ °C до летних $+40$ °C ($\\Delta T = 60$ °C). Коэффициент линейного расширения стали $\\alpha = 12 \\cdot 10^{-6}$ 1/°C. На сколько мм он удлинится?', + hint:'$\\Delta l = l_0 \\alpha \\Delta T = 25 \\cdot 12 \\cdot 10^{-6} \\cdot 60 = 1{,}8 \\cdot 10^{-2}$ м $= 18$ мм.', + ans:18, tol:1, step:'0.1' }, + { n:5, tag:'§13', title:'Знаток вещества (термометр)', + q:'Термометр показывает $t = 27$ °C. Сколько это Кельвинов? Округли до десятых.', + hint:'$T = t + 273{,}15 = 27 + 273{,}15 = 300{,}2$ K (при округлении до десятых).', + ans:300.2, tol:0.2, step:'0.1' } + ]; + + const STATE_KEY = 'physics7_ch2_final_bosses'; + let solved = {}; + try{ solved = JSON.parse(localStorage.getItem(STATE_KEY) || '{}') || {}; }catch(e){} + + bosses.forEach(b => { + const isSolved = !!solved[b.n]; + h += '
' + + '
' + + '' + b.tag + '' + + 'Босс ' + b.n + '. ' + b.title + '' + + '
' + + '
' + b.q + '
' + + '
' + + '' + + '' + + '' + + '
' + + '' + + '
' + (isSolved ? '✓ Босс повержен! +20 XP.' : '') + '
' + + '
'; + }); + + h += ''; + + body.innerHTML = h; + renderMath(body); + + function updateBar(){ + const cnt = bosses.filter(b => solved[b.n]).length; + document.getElementById('ch2-fin-fill').style.width = (cnt * 100 / bosses.length) + '%'; + document.getElementById('ch2-fin-lab').textContent = 'Побеждено: ' + cnt + ' / ' + bosses.length; + if(cnt === bosses.length){ + document.getElementById('ch2-mastered').style.display = 'flex'; + const ACH_KEY = 'physics7_ch2_master'; + if(localStorage.getItem(ACH_KEY) !== '1'){ + localStorage.setItem(ACH_KEY, '1'); + if(window.addXp) window.addXp(50, 'ach-ch2-master'); + if(window.achievement) window.achievement('ch_done', 'Знаток вещества'); + } + } + } + updateBar(); + + body.querySelectorAll('.boss-hint').forEach(btn => btn.addEventListener('click', () => { + const n = btn.dataset.n; + const txt = body.querySelector('.boss-hint-txt[data-n="' + n + '"]'); + if(txt) txt.style.display = txt.style.display === 'none' ? 'block' : 'none'; + })); + body.querySelectorAll('.boss-go').forEach(btn => btn.addEventListener('click', () => { + const n = +btn.dataset.n; + const b = bosses.find(x => x.n === n); + const inp = body.querySelector('.boss-inp[data-n="' + n + '"]'); + const fb = body.querySelector('.boss-fb[data-n="' + n + '"]'); + const card = body.querySelector('[data-boss="' + n + '"]'); + const v = parseFloat((inp.value || '').replace(',', '.')); + if(isNaN(v)){ + fb.style.display = 'block'; + fb.style.background = '#fee2e2'; fb.style.color = '#7f1d1d'; fb.style.borderLeft = '4px solid #dc2626'; + fb.textContent = 'Введи число.'; + return; + } + if(Math.abs(v - b.ans) < b.tol){ + fb.style.display = 'block'; + fb.style.background = '#d1fae5'; fb.style.color = '#065f46'; fb.style.borderLeft = '4px solid #10b981'; + fb.innerHTML = '✓ Босс повержен! +20 XP.'; + card.style.border = '2px solid #10b981'; + card.style.boxShadow = '0 0 0 3px rgba(16,185,129,.16)'; + btn.disabled = true; inp.disabled = true; + if(!solved[n]){ + solved[n] = true; + try{ localStorage.setItem(STATE_KEY, JSON.stringify(solved)); }catch(e){} + if(window.addXp) window.addXp(20, 'boss-ch2-' + n); + updateBar(); + } + } else { + fb.style.display = 'block'; + fb.style.background = '#fee2e2'; fb.style.color = '#7f1d1d'; fb.style.borderLeft = '4px solid #dc2626'; + fb.textContent = 'Не то. Перепроверь решение.'; + } + })); + body.querySelectorAll('.boss-inp').forEach(inp => inp.addEventListener('keydown', e => { + if(e.key === 'Enter'){ e.preventDefault(); body.querySelector('.boss-go[data-n="' + inp.dataset.n + '"]').click(); } + })); +} + +window.PHYS7_CH2_WIDGETS = { + p8: add_p8, + p9: add_p9, + p10: add_p10, + p11: add_p11, + p12: add_p12, + p13: add_p13, + final2: add_final2 +}; + +})();