'
+ 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-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)
+ '
'
+ 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', 'СИМ', 'Молекулы в трёх состояниях', 'Переключай состояние — смотри, как меняется поведение частиц.',
'
'
+ 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', 'СИМ', 'Биметаллическая пластина', 'Два металла расширяются по-разному — пластина гнётся.',
''
+ ''
+ '
'
+ 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 — теоретический предел холода.
'
+ 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 += '