feat(chemistry7): Phase 2 Волна 1 — Глава 2, §13 + ЛО2 + §14 + §15

§13 Воздух как смесь газов (интерактивная диаграмма состава),
ЛО2 Сборка приборов и собирание газов (выбор способа собирания),
§14 Кислород — элемент и простое вещество (переключатель O/O2/O3 + модели),
§15 Химические свойства кислорода (симулятор горения C/S/P/Fe/Mg → оксид).
chem7_ch2_widgets.js. Тест: 11/11 pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

backend/tests/chemistry7-page.test.js

@@ -24,6 +24,7 @@ function buildPage(file) {
     '/js/chem8_svg.js': readF('frontend/js/chem8_svg.js'),
     '/js/chem7_svg.js': readF('frontend/js/chem7_svg.js'),
     '/js/chem7_ch1_widgets.js': readF('frontend/js/chem7_ch1_widgets.js'),
+    '/js/chem7_ch2_widgets.js': readF('frontend/js/chem7_ch2_widgets.js'),
     '/js/chem8_engine.js': readF('frontend/js/chem8_engine.js')
   };
   html = html
@@ -133,6 +134,20 @@ test('ch1: переход к §9 и финалу строит без ошибо
   assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
 });
 
+test('ch2 Волна 1: интерактивы §13 + ЛО2 + §14 + §15 монтируются', async () => {
+  const { doc, errors } = await loadDom('chemistry_7_ch2.html');
+  assert.ok(doc.querySelector('#p13-air .air-seg'), 'диаграмма состава воздуха §13');
+  doc.defaultView.goTo('lo2'); await wait(100);
+  assert.ok(doc.querySelector('#lo2-coll #lo2-pick'), 'выбор собирания газа ЛО2');
+  doc.defaultView.goTo('p14'); await wait(100);
+  assert.ok(doc.querySelector('#p14-tog #p14-o2'), 'переключатель элемент/вещество §14');
+  doc.defaultView.goTo('p15'); await wait(100);
+  assert.ok(doc.querySelector('#p15-burn #p15-go'), 'симулятор горения §15');
+  doc.defaultView.goTo('p15'); doc.getElementById('p15-go').dispatchEvent(new doc.defaultView.Event('click', { bubbles: true }));
+  assert.match(doc.querySelector('#p15-out').textContent, /оксид/, 'горение даёт оксид');
+  assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
+});
+
 /* ── Хаб: каталог глав + финал курса ── */
 function buildHub() {
   let html = readF('frontend/textbooks/chemistry_7_hub.html');

frontend/js/chem7_ch2_widgets.js

@@ -0,0 +1,192 @@
+/* chem7_ch2_widgets.js — интерактивы главы 2 «Кислород» (Химия 7).
+ * Монтируются движком chem8_engine.js: window.CHEM8_WIDGETS[id] / window.FLAG_MOUNTS[id].
+ * Используют window.Chem8 (chem8_svg.js): chemEq, formula, molarMass, arOf.
+ * Без эмоджи; KaTeX-рендер — через window.chem8RenderMath.
+ */
+(function (W) {
+  'use strict';
+  function C() { return W.Chem8 || {}; }
+  function $(id) { return document.getElementById(id); }
+  function esc(s){ return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  function gcd(a, b) { return b ? gcd(b, a % b) : a; }
+  function ceq(src, opts){ return C().chemEq ? C().chemEq(src, opts || {}) : esc(src); }
+
+  var COL = { H:'#cbd5e1', O:'#ef4444', N:'#3b82f6', C:'#334155', S:'#eab308', P:'#f97316', Fe:'#b45309', Mg:'#22c55e', Cu:'#ea580c' };
+  function ball(el, x, r){
+    return '<circle cx="'+x+'" cy="30" r="'+r+'" fill="'+(COL[el]||'#94a3b8')+'" stroke="rgba(0,0,0,.25)"/>'
+      + '<text x="'+x+'" y="35" text-anchor="middle" font-size="12" font-weight="700" fill="#fff">'+el+'</text>';
+  }
+  function molSvg(atoms){ // atoms: [['O',2]]
+    var list=[]; atoms.forEach(function(p){ for(var i=0;i<p[1];i++) list.push(p[0]); });
+    var x=22, svg=''; list.forEach(function(el){ x+=16; svg+=ball(el,x,15); x+=24; });
+    return '<svg viewBox="0 0 '+(x+10)+' 60" width="100%" style="max-width:'+(x+10)+'px;height:auto">'+svg+'</svg>';
+  }
+
+  /* §13 — состав воздуха (стопочная полоса с кликом) */
+  var AIR = [
+    { g:'Азот N₂', p:78, c:'#3b82f6', note:'не поддерживает горение и дыхание' },
+    { g:'Кислород O₂', p:21, c:'#ef4444', note:'нужен для дыхания и горения' },
+    { g:'Другие газы (Ar, CO₂…)', p:1, c:'#94a3b8', note:'аргон, углекислый газ и др. — около 1 %' }
+  ];
+  function mount_p13() {
+    var m = $('p13-air'); if (!m || m._built) return; m._built = 1;
+    var bar = AIR.map(function (a, i) {
+      return '<div class="air-seg" data-i="' + i + '" style="width:' + a.p + '%;background:' + a.c + ';height:46px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.82rem;cursor:pointer;border-right:2px solid var(--card)">' + a.p + '%</div>';
+    }).join('');
+    m.innerHTML = '<div style="display:flex;border-radius:9px;overflow:hidden;border:1.5px solid var(--border)">' + bar + '</div>'
+      + '<div class="out" id="p13-air-out" style="margin-top:8px">Кликни по части диаграммы, чтобы узнать о газе.</div>';
+    var out = $('p13-air-out');
+    m.querySelectorAll('.air-seg').forEach(function (s) {
+      s.addEventListener('click', function () {
+        var a = AIR[+s.dataset.i]; out.className = 'out ok';
+        out.innerHTML = '<b>' + esc(a.g) + '</b> — около ' + a.p + ' % воздуха. ' + esc(a.note) + '.';
+      });
+    });
+  }
+
+  /* ЛО2 — выбор способа собирания газа */
+  var GASES = [
+    { g:'Кислород O₂', heavier:true, ways:['вытеснением воды', 'в сосуд отверстием вверх (тяжелее воздуха)'] },
+    { g:'Водород H₂', heavier:false, ways:['вытеснением воды', 'в сосуд отверстием вниз (легче воздуха)'] },
+    { g:'Углекислый газ CO₂', heavier:true, ways:['в сосуд отверстием вверх (тяжелее воздуха)'] }
+  ];
+  function mount_lo2() {
+    var m = $('lo2-coll'); if (!m || m._built) return; m._built = 1;
+    var idx = 0;
+    function render(){
+      var g = GASES[idx];
+      m.innerHTML = '<div class="fld"><label>Газ</label><select id="lo2-pick">'
+        + GASES.map(function(x,i){ return '<option value="'+i+'"'+(i===idx?' selected':'')+'>'+esc(x.g)+'</option>'; }).join('') + '</select></div>'
+        + '<div class="out ok" style="margin-top:6px"><b>' + esc(g.g) + '</b> ' + (g.heavier?'тяжелее':'легче') + ' воздуха.<br>Способы собирания:<br>'
+        + g.ways.map(function(w){ return '&#10003; ' + esc(w); }).join('<br>') + '</div>';
+      $('lo2-pick').addEventListener('change', function(e){ idx=+e.target.value; m._built=0; render(); });
+    }
+    render();
+  }
+
+  /* §14 — кислород: элемент или простое вещество + модели O₂ / O₃ */
+  function mount_p14() {
+    var m = $('p14-tog'); if (!m || m._built) return; m._built = 1;
+    var mode = 'el';
+    function render(){
+      m.innerHTML = '<div class="fld"><button class="btn'+(mode==='el'?' primary':'')+'" id="p14-el">Элемент O</button>'
+        + '<button class="btn'+(mode==='o2'?' primary':'')+'" id="p14-o2">Простое вещество O₂</button>'
+        + '<button class="btn'+(mode==='o3'?' primary':'')+'" id="p14-o3">Озон O₃</button></div>'
+        + '<div class="out" style="margin-top:8px">' + (
+          mode==='el' ? '<b>Кислород — химический элемент</b> (символ O, Z = 8, A_r = 16). Так говорят, когда речь о <i>атомах</i> кислорода в составе веществ (например, в воде H₂O).'
+        : mode==='o2' ? '<b>Кислород — простое вещество</b> O₂: молекула из двух атомов. Газ без цвета и запаха, немного тяжелее воздуха.' + molSvg([['O',2]])
+        : '<b>Озон</b> O₃: молекула из трёх атомов кислорода — другое простое вещество того же элемента.' + molSvg([['O',3]])
+        ) + '</div>';
+      $('p14-el').addEventListener('click',function(){mode='el';m._built=0;render();});
+      $('p14-o2').addEventListener('click',function(){mode='o2';m._built=0;render();});
+      $('p14-o3').addEventListener('click',function(){mode='o3';m._built=0;render();});
+    }
+    render();
+  }
+
+  /* §15 — симулятор горения: вещество + O₂ → оксид */
+  var FUELS = [
+    { el:'C',  name:'углерод',  eq:'C + O2 = CO2',        note:'горит с образованием углекислого газа' },
+    { el:'S',  name:'сера',     eq:'S + O2 = SO2',        note:'горит синим пламенем, резкий запах' },
+    { el:'P',  name:'фосфор',   eq:'4P + 5O2 = 2P2O5',    note:'горит ярко, белый дым' },
+    { el:'Fe', name:'железо',   eq:'3Fe + 2O2 = Fe3O4',   note:'горит, разбрасывая искры' },
+    { el:'Mg', name:'магний',   eq:'2Mg + O2 = 2MgO',     note:'ослепительно яркое пламя' }
+  ];
+  function flame(){
+    return '<svg viewBox="0 0 60 70" width="56" height="66" style="vertical-align:middle"><path d="M30 8 C40 26 48 34 38 52 C46 46 46 60 30 64 C14 60 14 46 22 52 C12 34 22 26 30 8 Z" fill="#f97316"/><path d="M30 22 C36 34 40 40 33 52 C39 48 38 58 30 60 C22 58 22 50 26 52 C20 40 26 34 30 22 Z" fill="#fde047"/></svg>';
+  }
+  function mount_p15() {
+    var m = $('p15-burn'); if (!m || m._built) return; m._built = 1;
+    var idx = 0;
+    function render(){
+      var f = FUELS[idx];
+      m.innerHTML = '<div class="fld"><label>Вещество</label><select id="p15-pick">'
+        + FUELS.map(function(x,i){ return '<option value="'+i+'"'+(i===idx?' selected':'')+'>'+esc(x.name)+' ('+x.el+')</option>'; }).join('') + '</select>'
+        + '<button class="btn primary" id="p15-go">Поджечь в кислороде</button></div>'
+        + '<div class="out" id="p15-out" style="margin-top:8px">Выбери вещество и подожги его в кислороде.</div>';
+      $('p15-pick').addEventListener('change', function(e){ idx=+e.target.value; m._built=0; render(); });
+      $('p15-go').addEventListener('click', function(){
+        var out = $('p15-out'); out.className='out ok';
+        out.innerHTML = flame() + ' <b>' + esc(f.name[0].toUpperCase()+f.name.slice(1)) + ' горит в кислороде:</b> ' + esc(f.note) + '.<br>'
+          + '<div style="margin-top:6px;font-size:1.05rem">' + ceq(f.eq) + '</div>'
+          + '<div style="font-size:.84rem;color:var(--muted);margin-top:4px">Продукт — <b>оксид</b> (соединение элемента с кислородом).</div>';
+      });
+    }
+    render();
+  }
+
+  /* §16 — конструктор оксида (элемент + валентность, кислород II) + классификатор */
+  var OXEL = [ ['Na',1], ['Ca',2], ['Mg',2], ['Cu',2], ['Zn',2], ['Al',3], ['C',4], ['S',4], ['P',5] ];
+  function mount_p16() {
+    var b = $('p16-bld');
+    if (b && !b._built) { b._built = 1;
+      b.innerHTML = '<div class="fld"><label>Элемент</label><select id="p16-el">'
+        + OXEL.map(function(e,i){ return '<option value="'+i+'"'+(e[0]==='Al'?' selected':'')+'>'+e[0]+' (валентность '+rom(e[1])+')</option>'; }).join('')
+        + '</select> + кислород (O, II)</div><div class="out" id="p16-out"></div>';
+      function rom(n){ return ['','I','II','III','IV','V'][n]; }
+      function upd(){
+        var e = OXEL[+$('p16-el').value], lcm = e[1]*2/gcd(e[1],2), ix=lcm/e[1], iy=lcm/2;
+        var raw = e[0] + (ix>1?ix:'') + 'O' + (iy>1?iy:'');
+        var out=$('p16-out'); out.className='out ok';
+        out.innerHTML = '<span class="bd">Валентности: '+e[0]+' = '+rom(e[1])+', O = II; НОК = '+lcm+'<br>Формула оксида: <b style="font-size:1.15rem">'+(C().formula?C().formula(raw):raw)+'</b></span>';
+      }
+      $('p16-el').addEventListener('change',upd); upd();
+    }
+    var cl = $('p16-cls');
+    if (cl && W.Chem7Classify) W.Chem7Classify(cl);
+  }
+
+  /* §17 — схема получения кислорода + роль катализатора */
+  var PROD = [
+    { name:'Разложение перманганата калия (при нагревании)', eq:'2KMnO4 = K2MnO4 + MnO2 + O2^', cond:'t°', note:'Реакция разложения: из одного вещества — несколько. Идёт при нагревании.' },
+    { name:'Разложение пероксида водорода (катализатор MnO₂)', eq:'2H2O2 = 2H2O + O2^', cond:'MnO₂', note:'MnO₂ — катализатор: ускоряет реакцию, но сам в ней не расходуется.' }
+  ];
+  function mount_p17() {
+    var m = $('p17-prod'); if (!m || m._built) return; m._built = 1;
+    var idx = 0;
+    function render(){
+      var p = PROD[idx];
+      m.innerHTML = '<div class="fld"><label>Способ</label><select id="p17-pick">'
+        + PROD.map(function(x,i){ return '<option value="'+i+'"'+(i===idx?' selected':'')+'>'+esc(x.name)+'</option>'; }).join('') + '</select></div>'
+        + '<div class="out ok" style="margin-top:8px"><div style="font-size:1.05rem">' + ceq(p.eq, {cond:p.cond}) + '</div>'
+        + '<div style="font-size:.86rem;color:var(--muted);margin-top:6px">' + esc(p.note) + '</div></div>';
+      $('p17-pick').addEventListener('change', function(e){ idx=+e.target.value; m._built=0; render(); });
+    }
+    render();
+  }
+
+  /* ПР2 — проверка кислорода тлеющей лучинкой */
+  function mount_pr2() {
+    var m = $('pr2-test'); if (!m || m._built) return; m._built = 1;
+    m.innerHTML = '<button class="btn primary" id="pr2-go">Внести тлеющую лучинку в сосуд с газом</button><div class="out" id="pr2-out" style="margin-top:8px">Как доказать, что собранный газ — кислород?</div>';
+    $('pr2-go').addEventListener('click', function(){
+      var out=$('pr2-out'); out.className='out ok';
+      out.innerHTML = flame() + ' Тлеющая лучинка <b>ярко вспыхивает</b> — значит, газ поддерживает горение. Это <b>кислород</b>.';
+    });
+  }
+
+  /* классификатор «оксид / не оксид» (используется в §16) */
+  W.Chem7Classify = function(mount){
+    if (!mount || mount._built) return; mount._built = 1;
+    var items = [ {t:'CuO',ox:1}, {t:'NaCl',ox:0}, {t:'CO₂',ox:1}, {t:'H₂SO₄',ox:0}, {t:'Fe₂O₃',ox:1}, {t:'HCl',ox:0}, {t:'SO₂',ox:1}, {t:'CaO',ox:1} ];
+    var pool = items.map(function(_,i){return i;}), placed={}, sel=null;
+    function render(){
+      var chips = pool.map(function(i){ return '<button class="c7-chip" data-i="'+i+'" style="padding:7px 12px;border:1.5px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);font-weight:600;cursor:pointer;margin:3px">'+esc(items[i].t)+'</button>'; }).join('') || '<span style="color:var(--muted)">Готово.</span>';
+      var cols = [['Оксид',1],['Не оксид',0]].map(function(b){
+        var inb = Object.keys(placed).filter(function(k){return placed[k]===b[1];});
+        var cells = inb.map(function(k){ var ok=items[k].ox===b[1]; return '<div style="padding:5px 10px;margin:3px 0;border-radius:8px;color:#fff;font-weight:600;background:'+(ok?'#059669':'#dc2626')+'">'+esc(items[k].t)+(ok?' &#10003;':' &#10007;')+'</div>'; }).join('') || '<div style="color:var(--muted);font-size:.82rem">сюда…</div>';
+        return '<div class="c7-bucket" data-b="'+b[1]+'" style="flex:1;min-width:130px;border:1.5px dashed var(--border);border-radius:11px;padding:10px;background:var(--pri-soft)"><div style="font-weight:700;margin-bottom:6px">'+b[0]+'</div>'+cells+'</div>';
+      }).join('');
+      mount.innerHTML = '<div style="margin-bottom:10px">'+chips+'</div><div style="display:flex;gap:10px;flex-wrap:wrap">'+cols+'</div>';
+      mount.querySelectorAll('.c7-chip').forEach(function(b){ b.addEventListener('click',function(){ mount.querySelectorAll('.c7-chip').forEach(function(x){x.style.outline='';}); sel=+b.dataset.i; b.style.outline='2px solid var(--pri)'; }); });
+      mount.querySelectorAll('.c7-bucket').forEach(function(col){ col.addEventListener('click',function(){ if(sel==null)return; placed[sel]=+col.dataset.b; pool=pool.filter(function(x){return x!==sel;}); sel=null; render(); }); });
+    }
+    render();
+  };
+
+  W.CHEM8_WIDGETS = Object.assign(W.CHEM8_WIDGETS || {}, {
+    p13: mount_p13, lo2: mount_lo2, p14: mount_p14, p15: mount_p15,
+    p16: mount_p16, p17: mount_p17, pr2: mount_pr2
+  });
+  W.FLAG_MOUNTS = Object.assign(W.FLAG_MOUNTS || {}, {});
+})(window);

frontend/textbooks/chemistry_7_ch2.html

@@ -17,6 +17,7 @@
 <script src="/js/biochem-core.js" defer></script>
 <script src="/js/chem8_svg.js" defer></script>
 <script src="/js/chem7_svg.js" defer></script>
+<script src="/js/chem7_ch2_widgets.js" defer></script>
 <script src="/js/chem8_engine.js" defer></script>
 </head>
 <body>
@@ -88,11 +89,113 @@ window.PARAS = [
   {id:'final2', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
 ];
 
-window.ACH_LABELS = { start:'Начало главы 2!', final2_tasks:'Глава 2 пройдена!' };
-window.SIDEBARS = { p13:{ title:'Глава 2 · Химия 7', rows:[['Раздел','Кислород'],['§§','13–17'],['Лаб/ПР','ЛО 2 · ПР 2']] } };
-window.TIPS = [{ sec:'p13', html:'Глава наполняется содержанием по фазам. Сейчас доступны навигация по параграфам и отметка о прочтении (+10 XP).' }];
+window.ACH_LABELS = { start:'Начало главы 2!', p13_done:'§13 изучен!', lo2_done:'Лабораторный опыт 2 выполнен!',
+  p14_done:'§14 изучен!', p15_done:'§15 изучен!', final2_tasks:'Глава 2 пройдена!' };
+window.SIDEBARS = {
+  p13:{ title:'Шпаргалка §13', rows:[['Воздух','смесь газов'],['$N_2$','≈ 78 %'],['$O_2$','≈ 21 %']] },
+  lo2:{ title:'Лаб. опыт 2', rows:[['Прибор','пробирка + трубка'],['Собирание','воздуха или воды']] },
+  p14:{ title:'Шпаргалка §14', rows:[['Элемент','O, $Z=8$'],['Вещество','$O_2$'],['Озон','$O_3$']] },
+  p15:{ title:'Шпаргалка §15', rows:[['Горение','+ $O_2$'],['Продукт','оксид'],['Окисление','медленное и быстрое']] }
+};
+window.TIPS = [
+  { sec:'p13', html:'Воздух — <b>смесь</b> газов: примерно $78\\,\\%$ азота $N_2$ и $21\\,\\%$ кислорода $O_2$, около $1\\,\\%$ — другие газы.' },
+  { sec:'lo2', html:'Газ, который <b>тяжелее</b> воздуха (как $O_2$), собирают в сосуд отверстием <b>вверх</b>; <b>легче</b> воздуха ($H_2$) — отверстием вниз; нерастворимый — вытеснением воды.' },
+  { sec:'p14', html:'$O$ — <b>элемент</b> (атом в составе веществ). $O_2$ — <b>простое вещество</b>. Кислород $O_2$ и озон $O_3$ — разные простые вещества одного элемента.' },
+  { sec:'p15', html:'При горении вещество соединяется с кислородом — образуется <b>оксид</b>. Реакции с кислородом называют реакциями <b>окисления</b>.' }
+];
 
-/* Phase 0: заглушки-builder'ы из PARAS (теория и интерактивы добавляются в фазах 1–4). */
+window.POOLS = {
+  p13:[
+    {q:'Воздух — это…',opts:['Чистое вещество','Смесь газов','Простое вещество','Один газ — кислород'],a:1,ex:'Воздух — смесь нескольких газов.'},
+    {q:'Какова примерная объёмная доля кислорода в воздухе (%)?',hint:'около 21',unit:'%',a:21,ex:'Кислорода ≈ 21 %.'},
+    {q:'Какова примерная объёмная доля азота в воздухе (%)?',hint:'около 78',unit:'%',a:78,ex:'Азота ≈ 78 %.'},
+    {q:'Какой газ воздуха необходим для дыхания и горения?',opts:['Азот','Кислород','Углекислый газ','Аргон'],a:1,ex:'Кислород $O_2$.'}
+  ],
+  p14:[
+    {q:'Запись «$\\text{O}$» обозначает…',opts:['Химический элемент (атом)','Молекулу кислорода','Озон','Смесь'],a:0,ex:'O — символ химического элемента.'},
+    {q:'$\\text{O}_2$ — это…',opts:['Химический элемент','Простое вещество','Сложное вещество','Смесь'],a:1,ex:'Молекула из атомов одного элемента — простое вещество.'},
+    {q:'Чему равна относительная атомная масса кислорода $A_r(\\text{O})$?',hint:'из таблицы',unit:'',a:16,ex:'$A_r(\\text{O})=16$.'},
+    {q:'$\\text{O}_2$ и $\\text{O}_3$ — это…',opts:['Одно вещество','Разные простые вещества одного элемента','Сложные вещества','Смесь газов'],a:1,ex:'Кислород и озон — разные простые вещества элемента кислород.'}
+  ],
+  p15:[
+    {q:'Продукт горения простого вещества в кислороде — это…',opts:['Кислота','Оксид','Соль','Металл'],a:1,ex:'Образуется оксид — соединение с кислородом.'},
+    {q:'При горении серы в кислороде образуется…',opts:['$\\text{SO}_2$','$\\text{H}_2\\text{S}$','$\\text{S}$','$\\text{SO}_3$ только'],a:0,ex:'$S+O_2=SO_2$ (с резким запахом).'},
+    {q:'Реакция $\\text{C}+\\text{O}_2=\\text{CO}_2$ относится к реакциям…',opts:['Разложения','Соединения','Обмена','Замещения'],a:1,ex:'Из двух веществ одно — соединение.'},
+    {q:'В уравнении $2\\text{Mg}+\\text{O}_2=2\\text{MgO}$ коэффициент перед $\\text{MgO}$ равен…',hint:'смотри на оксид',unit:'',a:2,ex:'Коэффициент 2.'}
+  ]
+};
+
+function rememberBox(items){
+  return '<div class="remember-box"><div class="remember-box-title">'
+    +'<svg class="ic" viewBox="0 0 24 24" style="width:15px;height:15px"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> Запомни!</div><ul>'
+    +items.map(function(t){return '<li>'+t+'</li>';}).join('')+'</ul></div>';
+}
+function qList(items){
+  return '<div class="section-title">Вопросы и задания</div><ol class="q-list">'
+    +items.map(function(t){return '<li>'+t+'</li>';}).join('')+'</ol>';
+}
+function wgt(title, inner){
+  return '<div class="wgt"><div class="wgt-h"><svg class="ic" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/></svg> '+title+'</div>'+inner+'</div>';
+}
+
+function build_p13(){
+  document.getElementById('p13-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 13 · Химия 7</div><h2>Воздух как смесь газов</h2>'
+    +'<div class="ph-desc">Из каких газов состоит воздух и почему он так важен.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">смесь</span><span class="ph-tag">$N_2$</span><span class="ph-tag">$O_2$</span></div></div>'
+    +makeCard('theory','Состав воздуха','§13','<p>Воздух — это <b>смесь газов</b>. Основные из них: <b>азот</b> $\\text{N}_2$ (около 78 %) и <b>кислород</b> $\\text{O}_2$ (около 21 %). Ещё около 1 % приходится на другие газы — аргон, углекислый газ и др.</p>'
+      +'<div class="def-box">Воздух — <b>однородная</b> смесь: газы перемешаны равномерно. Именно кислород воздуха обеспечивает дыхание живых организмов и горение.</div>')
+    +wgt('Состав воздуха: кликни по части диаграммы','<div id="p13-air"></div>')
+    +rememberBox(['Воздух — смесь газов.','Азота ≈ 78 %, кислорода ≈ 21 %.','Кислород нужен для дыхания и горения.'])
+    +qList(['Из каких газов в основном состоит воздух?','Какова доля кислорода в воздухе?','Почему воздух называют смесью, а не чистым веществом?'])
+    +secNav(null,'lo2')+readButton('p13');
+  wireReadBtn('p13');
+}
+
+function build_lo2(){
+  document.getElementById('lo2-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">Лабораторный опыт 2</div><h2>Сборка простейших приборов для получения и собирания газов</h2>'
+    +'<div class="ph-desc">Научиться собирать прибор для получения газа и выбирать способ его собирания.</div></div>'
+    +makeCard('lab','Прибор и способы собирания',null,'<p>Простейший прибор: <b>пробирка с пробкой и газоотводной трубкой</b>. Газ из пробирки по трубке поступает в сосуд для собирания.</p>'
+      +'<ul><li><b>Вытеснением воздуха.</b> Газ <b>тяжелее</b> воздуха ($O_2$, $CO_2$) собирают в сосуд, держа его отверстием <b>вверх</b>; <b>легче</b> воздуха ($H_2$) — отверстием <b>вниз</b>.</li><li><b>Вытеснением воды.</b> Так собирают газы, мало растворимые в воде (например, кислород).</li></ul>'
+      +'<div class="note-safe"><svg viewBox="0 0 24 24"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg> Проверь герметичность прибора перед опытом; нагревай пробирку осторожно.</div>')
+    +wgt('Выбери способ собирания газа','<div id="lo2-coll"></div>')
+    +secNav('p13','p14')+readButton('lo2');
+  wireReadBtn('lo2');
+}
+
+function build_p14(){
+  document.getElementById('p14-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 14 · Химия 7</div><h2>Кислород как химический элемент и простое вещество</h2>'
+    +'<div class="ph-desc">Чем отличается элемент кислород от простого вещества кислород.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">$O$</span><span class="ph-tag">$O_2$</span><span class="ph-tag">$O_3$</span></div></div>'
+    +makeCard('theory','Элемент и простое вещество','§14','<p><b>Кислород как элемент</b> — это атомы O ($Z=8$, $A_r=16$). Они входят в состав очень многих веществ (воды $\\text{H}_2\\text{O}$, оксидов, песка $\\text{SiO}_2$). Кислород — самый распространённый элемент земной коры.</p>'
+      +'<div class="def-box"><b>Кислород как простое вещество</b> — это газ $\\text{O}_2$ (молекула из двух атомов). Элемент кислород образует и другое простое вещество — <b>озон</b> $\\text{O}_3$.</div>')
+    +makeCard('theory','Физические свойства кислорода','§14','<p>$\\text{O}_2$ — газ без цвета и запаха, немного тяжелее воздуха, мало растворим в воде. При сильном охлаждении превращается в голубоватую жидкость.</p>')
+    +wgt('Элемент O или простое вещество?','<div id="p14-tog"></div>')
+    +rememberBox(['Элемент кислород — атомы O в составе веществ.','Простое вещество — газ $O_2$.','Озон $O_3$ — другое простое вещество того же элемента.'])
+    +qList(['Когда говорят о кислороде-элементе, а когда — о простом веществе?','Назови физические свойства кислорода $O_2$.','Чем озон отличается от кислорода?'])
+    +secNav('lo2','p15')+readButton('p14');
+  wireReadBtn('p14');
+}
+
+function build_p15(){
+  document.getElementById('p15-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 15 · Химия 7</div><h2>Химические свойства кислорода</h2>'
+    +'<div class="ph-formula">вещество $+ \\text{O}_2 \\to$ оксид</div>'
+    +'<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>'
+    +makeCard('theory','Кислород — активное вещество','§15','<p>Кислород реагирует со многими простыми и сложными веществами. Реакции, идущие с выделением тепла и света, называют <b>горением</b>. Продукты горения простых веществ в кислороде — <b>оксиды</b>.</p>'
+      +'<div class="def-box"><b>Окисление</b> — реакция вещества с кислородом. Оно бывает быстрым (горение) и <b>медленным</b> (дыхание, гниение, ржавление железа).</div>')
+    +makeCard('example','Горение веществ в кислороде',null,'<ul><li>$\\text{C}+\\text{O}_2=\\text{CO}_2$</li><li>$\\text{S}+\\text{O}_2=\\text{SO}_2$ (резкий запах)</li><li>$4\\text{P}+5\\text{O}_2=2\\text{P}_2\\text{O}_5$</li><li>$3\\text{Fe}+2\\text{O}_2=\\text{Fe}_3\\text{O}_4$ (искры)</li></ul>')
+    +wgt('Симулятор горения в кислороде','<div id="p15-burn"></div>')
+    +rememberBox(['Горение — реакция с кислородом, идёт с выделением тепла и света.','Продукт горения простого вещества — оксид.','Окисление бывает быстрым (горение) и медленным.'])
+    +qList(['Что образуется при горении вещества в кислороде?','Приведи пример медленного окисления.','Запиши уравнение горения углерода.'])
+    +secNav('p14','p16')+readButton('p15');
+  wireReadBtn('p15');
+}
+
+/* заглушки для ещё не наполненных § (следующая волна) */
 (function(){
   var P = window.PARAS, B = {};
   function ph(p, prev, next){
@@ -102,7 +205,7 @@ window.TIPS = [{ sec:'p13', html:'Глава наполняется содерж
         '<div class="para-hero"><div class="ph-label">' + p.num + ' · Химия 7</div><h2>' + p.name + '</h2>'
         + '<div class="ph-desc">Содержание этого ' + (p.final ? 'раздела' : 'параграфа') + ' готовится.</div></div>'
         + makeCard('theory', p.name, p.num,
-            '<p>Скоро здесь появятся теория, наглядные SVG-схемы, молекулярные модели и интерактивные тренажёры по теме «' + p.name + '». Пока доступна навигация по главе' + (p.final ? '.' : ' и отметка о прочтении.') + '</p>')
+            '<p>Скоро здесь появятся теория, наглядные SVG-схемы и интерактивные тренажёры по теме «' + p.name + '». Пока доступна навигация по главе' + (p.final ? '.' : ' и отметка о прочтении.') + '</p>')
         + secNav(prev, next) + (p.final ? '' : readButton(p.id));
       if (!p.final) wireReadBtn(p.id);
     };
@@ -112,6 +215,12 @@ window.TIPS = [{ sec:'p13', html:'Глава наполняется содерж
   }
   window.BUILDERS = B;
 })();
+
+/* реальные builder'ы Волны 1 главы 2 */
+window.BUILDERS.p13 = build_p13;
+window.BUILDERS.lo2 = build_lo2;
+window.BUILDERS.p14 = build_p14;
+window.BUILDERS.p15 = build_p15;
 </script>
 
 </body>