feat(chemistry7): Phase 3 Волна 1 — Глава 3, §18 + §19 + §20 + ЛО3

§18 Водород — элемент и простое вещество (паспорт + модель H2),
§19 Химические свойства водорода (горение → вода, восстановление CuO → Cu),
§20 Понятие о кислотах (индикаторы лакмус/метилоранж + таблица кислот),
ЛО3 Действие кислот на индикаторы. chem7_ch3_widgets.js. Тест: 13/13 pass.

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

backend/tests/chemistry7-page.test.js

@@ -25,6 +25,7 @@ function buildPage(file) {
     '/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/chem7_ch3_widgets.js': readF('frontend/js/chem7_ch3_widgets.js'),
     '/js/chem8_engine.js': readF('frontend/js/chem8_engine.js')
   };
   html = html
@@ -162,6 +163,19 @@ test('ch2 Волна 2: §16 + §17 + ПР2 + финал главы монтир
   assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
 });
 
+test('ch3 Волна 1: §18 + §19 + §20 + ЛО3 монтируются', async () => {
+  const { doc, errors } = await loadDom('chemistry_7_ch3.html');
+  assert.ok(doc.querySelector('#p18-card svg'), 'паспорт водорода §18');
+  doc.defaultView.goTo('p19'); await wait(100);
+  assert.ok(doc.querySelector('#p19-rx #p19-pick'), 'реакции водорода §19');
+  doc.defaultView.goTo('p20'); await wait(100);
+  assert.ok(doc.querySelector('#p20-ind #p20-ind-ind'), 'индикаторы §20');
+  assert.ok(doc.querySelector('#p20-acids table'), 'таблица кислот §20');
+  doc.defaultView.goTo('lo3'); await wait(100);
+  assert.ok(doc.querySelector('#lo3-ind #lo3-ind-ind'), 'индикаторы ЛО3');
+  assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
+});
+
 /* ── Хаб: каталог глав + финал курса ── */
 function buildHub() {
   let html = readF('frontend/textbooks/chemistry_7_hub.html');

frontend/js/chem7_ch3_widgets.js

@@ -0,0 +1,172 @@
+/* chem7_ch3_widgets.js — интерактивы главы 3 «Водород» (Химия 7).
+ * Монтируются движком chem8_engine.js: window.CHEM8_WIDGETS[id].
+ * Используют window.Chem8 (chem8_svg.js): chemEq, formula.
+ * Без эмоджи; 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); }
+  function fml(s){ return C().formula ? C().formula(s) : s; }
+  var COL = { H:'#cbd5e1', O:'#ef4444' };
+  function molSvg(atoms){
+    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+='<circle cx="'+x+'" cy="30" r="15" 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>'; x+=24; });
+    return '<svg viewBox="0 0 '+(x+10)+' 60" width="100%" style="max-width:'+(x+10)+'px;height:auto">'+svg+'</svg>';
+  }
+
+  /* §18 — модель H₂ + паспорт водорода */
+  function mount_p18() {
+    var m = $('p18-card'); if (!m || m._built) return; m._built = 1;
+    m.innerHTML = molSvg([['H',2]])
+      + '<div class="out ok"><b>Водород</b><br>Элемент: символ H, $Z=1$, $A_r=1$ — самый лёгкий элемент.<br>'
+      + 'Простое вещество: молекула $H_2$ — самый лёгкий газ, без цвета и запаха, легче воздуха, мало растворим в воде.<br>'
+      + 'В природе: в составе воды, многих веществ; во Вселенной — самый распространённый элемент.</div>';
+    if (W.chem8RenderMath) try { W.chem8RenderMath(m); } catch(e){}
+  }
+
+  /* §19 — реакции водорода: горение и восстановление */
+  var RX = [
+    { name:'Горение водорода в кислороде', eq:'2H2 + O2 = 2H2O', note:'Водород горит, образуя воду. Смесь водорода с воздухом — «гремучий газ», взрывается!' },
+    { name:'Восстановление оксида меди(II)', eq:'H2 + CuO = Cu + H2O', note:'Водород отнимает кислород у оксида: чёрный CuO превращается в красную медь. Водород здесь — восстановитель.' }
+  ];
+  function mount_p19() {
+    var m = $('p19-rx'); if (!m || m._built) return; m._built = 1;
+    var idx = 0;
+    function render(){
+      var r = RX[idx];
+      var swatch = idx===1 ? '<div style="margin-top:6px"><span style="display:inline-block;width:46px;height:20px;background:#1f2937;border-radius:4px;vertical-align:middle"></span> CuO (чёрный) &rarr; <span style="display:inline-block;width:46px;height:20px;background:#b45309;border-radius:4px;vertical-align:middle"></span> Cu (красный)</div>' : '';
+      m.innerHTML = '<div class="fld"><label>Реакция</label><select id="p19-pick">'
+        + RX.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(r.eq) + '</div><div style="font-size:.86rem;color:var(--muted);margin-top:6px">' + esc(r.note) + '</div>' + swatch + '</div>';
+      $('p19-pick').addEventListener('change', function(e){ idx=+e.target.value; m._built=0; render(); });
+    }
+    render();
+  }
+
+  /* индикаторы */
+  var ACIDS = [
+    { f:'HCl',   name:'соляная',  res:'Cl',  resName:'хлорид',  resVal:1 },
+    { f:'H2SO4', name:'серная',   res:'SO4', resName:'сульфат', resVal:2 },
+    { f:'HNO3',  name:'азотная',  res:'NO3', resName:'нитрат',  resVal:1 },
+    { f:'H2CO3', name:'угольная', res:'CO3', resName:'карбонат',resVal:2 }
+  ];
+  var INDIC = {
+    'Лакмус':     { neutral:['#7c3aed','фиолетовый'], acid:['#dc2626','красный'] },
+    'Метилоранж': { neutral:['#f59e0b','оранжевый'],  acid:['#e11d48','розово-красный'] }
+  };
+  function indicatorWidget(mountId, withAcidPick) {
+    var m = $(mountId); if (!m || m._built) return; m._built = 1;
+    var ind = 'Лакмус', acid = 0;
+    function strip(color){ return '<div style="width:120px;height:34px;border-radius:8px;border:1.5px solid var(--border);background:'+color+';display:inline-block;vertical-align:middle"></div>'; }
+    function render(){
+      var a = ACIDS[acid], col = INDIC[ind];
+      m.innerHTML = '<div class="fld"><label>Индикатор</label><select id="'+mountId+'-ind">'
+          + Object.keys(INDIC).map(function(k){ return '<option'+(k===ind?' selected':'')+'>'+k+'</option>'; }).join('') + '</select>'
+          + (withAcidPick ? '<label>Кислота</label><select id="'+mountId+'-acid">' + ACIDS.map(function(x,i){ return '<option value="'+i+'"'+(i===acid?' selected':'')+'>'+fml(x.f)+' ('+x.name+')</option>'; }).join('') + '</select>' : '') + '</div>'
+        + '<div class="out ok" style="margin-top:8px">В нейтральной среде: ' + strip(col.neutral[0]) + ' <b>'+col.neutral[1]+'</b><br>'
+          + 'В кислоте' + (withAcidPick?(' ('+fml(a.f)+')'):'') + ': ' + strip(col.acid[0]) + ' <b>'+col.acid[1]+'</b></div>';
+      $(mountId+'-ind').addEventListener('change', function(e){ ind=e.target.value; m._built=0; render(); });
+      if (withAcidPick) $(mountId+'-acid').addEventListener('change', function(e){ acid=+e.target.value; m._built=0; render(); });
+    }
+    render();
+  }
+  function mount_p20() {
+    indicatorWidget('p20-ind', true);
+    var t = $('p20-acids'); if (t && !t._built) { t._built = 1;
+      t.innerHTML = '<table style="width:100%;border-collapse:collapse;font-size:.9rem"><tr style="background:var(--pri-soft)"><th style="padding:6px;text-align:left">Кислота</th><th style="padding:6px;text-align:left">Название</th><th style="padding:6px;text-align:left">Остаток</th></tr>'
+        + ACIDS.map(function(a){ return '<tr><td style="padding:6px;border-top:1px solid var(--border)">'+fml(a.f)+'</td><td style="padding:6px;border-top:1px solid var(--border)">'+a.name+'</td><td style="padding:6px;border-top:1px solid var(--border)">'+fml(a.res)+' ('+a.resName+')</td></tr>'; }).join('') + '</table>';
+    }
+  }
+  function mount_lo3() { indicatorWidget('lo3-ind', false); }
+
+  /* §21 — ряд активности металлов */
+  var ROW = ['K','Ca','Na','Mg','Al','Zn','Fe','Ni','Sn','Pb','H','Cu','Hg','Ag','Pt','Au'];
+  function mount_p21() {
+    var m = $('p21-act'); if (!m || m._built) return; m._built = 1;
+    var hIdx = ROW.indexOf('H');
+    m.innerHTML = '<div style="display:flex;flex-wrap:wrap;gap:4px">'
+      + ROW.map(function(el,i){ var isH=el==='H'; return '<button class="act-cell" data-i="'+i+'" style="padding:6px 9px;border-radius:7px;border:1.5px solid '+(isH?'#dc2626':'var(--border)')+';background:'+(isH?'#fee2e2':'var(--card)')+';color:var(--text);font-weight:700;cursor:'+(isH?'default':'pointer')+'">'+(isH?'H₂':el)+'</button>'; }).join('') + '</div>'
+      + '<div style="font-size:.8rem;color:var(--muted);margin-top:4px">Слева активность убывает вправо. Граница — водород H₂.</div>'
+      + '<div class="out" id="p21-act-out" style="margin-top:8px">Кликни по металлу — узнаешь, вытесняет ли он водород из кислоты.</div>';
+    var out = $('p21-act-out');
+    m.querySelectorAll('.act-cell').forEach(function(b){
+      b.addEventListener('click', function(){
+        var i=+b.dataset.i, el=ROW[i]; if(el==='H'){ out.className='out'; out.innerHTML='<b>Водород H₂</b> — граница ряда активности.'; return; }
+        out.className='out ok';
+        if(i<hIdx){
+          var extra = (i<=2) ? ' <span style="color:#dc2626">Внимание: очень активный металл — с кислотами реагирует бурно (для получения водорода используют Zn, Fe).</span>' : '';
+          out.innerHTML = '<b>'+el+'</b> стоит левее H₂ → <b>вытесняет водород</b> из соляной и серной кислот: образуются соль и $H_2\\uparrow$.'+extra;
+        } else {
+          out.innerHTML = '<b>'+el+'</b> стоит правее H₂ → водород из кислот <b>не вытесняет</b> (например, медь и серебро с этими кислотами не реагируют).';
+        }
+        if (W.chem8RenderMath) try { W.chem8RenderMath(out); } catch(e){}
+      });
+    });
+  }
+
+  /* ЛО4 — взаимодействие кислот с металлами */
+  var L4M = [ ['Zn','цинк',1], ['Fe','железо',1], ['Mg','магний',1], ['Cu','медь',0] ];
+  var L4A = [ ['HCl','соляная'], ['H2SO4','серная'] ];
+  function mount_lo4() {
+    var m = $('lo4-rx'); if (!m || m._built) return; m._built = 1;
+    var mi=0, ai=0;
+    var EQ = { 'Zn|HCl':'Zn + 2HCl = ZnCl2 + H2^', 'Zn|H2SO4':'Zn + H2SO4 = ZnSO4 + H2^',
+      'Fe|HCl':'Fe + 2HCl = FeCl2 + H2^', 'Fe|H2SO4':'Fe + H2SO4 = FeSO4 + H2^',
+      'Mg|HCl':'Mg + 2HCl = MgCl2 + H2^', 'Mg|H2SO4':'Mg + H2SO4 = MgSO4 + H2^' };
+    function render(){
+      m.innerHTML = '<div class="fld"><label>Металл</label><select id="lo4-m">'+L4M.map(function(x,i){return '<option value="'+i+'"'+(i===mi?' selected':'')+'>'+x[1]+' ('+x[0]+')</option>';}).join('')+'</select>'
+        + '<label>Кислота</label><select id="lo4-a">'+L4A.map(function(x,i){return '<option value="'+i+'"'+(i===ai?' selected':'')+'>'+fml(x[0])+'</option>';}).join('')+'</select>'
+        + '<button class="btn primary" id="lo4-go">Провести опыт</button></div><div class="out" id="lo4-out" style="margin-top:8px">Выбери металл и кислоту.</div>';
+      $('lo4-m').addEventListener('change',function(e){mi=+e.target.value;m._built=0;render();});
+      $('lo4-a').addEventListener('change',function(e){ai=+e.target.value;m._built=0;render();});
+      $('lo4-go').addEventListener('click',function(){
+        var met=L4M[mi], ac=L4A[ai], out=$('lo4-out');
+        if(!met[2]){ out.className='out bad'; out.innerHTML='<b>'+met[1]+'</b> стоит правее H₂ в ряду активности — реакция <b>не идёт</b>, пузырьки не выделяются.'; return; }
+        out.className='out ok';
+        out.innerHTML='Наблюдаем <b>выделение пузырьков газа</b> (водород $H_2\\uparrow$). Металл вытесняет водород из кислоты:<div style="font-size:1.05rem;margin-top:6px">'+ceq(EQ[met[0]+'|'+ac[0]])+'</div>';
+        if (W.chem8RenderMath) try { W.chem8RenderMath(out); } catch(e){}
+      });
+    }
+    render();
+  }
+
+  /* §22 — конструктор солей (металл + кислотный остаток) */
+  var SM = [ ['Na',1], ['K',1], ['Ca',2], ['Mg',2], ['Zn',2], ['Al',3] ];
+  var SR = [ ['Cl',1,'хлорид'], ['NO3',1,'нитрат'], ['SO4',2,'сульфат'], ['CO3',2,'карбонат'] ];
+  function mount_p22() {
+    var m = $('p22-salt'); if (!m || m._built) return; m._built = 1;
+    function render(){
+      m.innerHTML = '<div class="fld"><label>Металл</label><select id="p22-m">'+SM.map(function(x,i){return '<option value="'+i+'"'+(x[0]==='Ca'?' selected':'')+'>'+x[0]+' ('+rom(x[1])+')</option>';}).join('')+'</select>'
+        + '<label>Остаток</label><select id="p22-r">'+SR.map(function(x,i){return '<option value="'+i+'">'+fml(x[0])+' ('+x[2]+', '+rom(x[1])+')</option>';}).join('')+'</select></div><div class="out" id="p22-out"></div>';
+      $('p22-m').addEventListener('change',upd); $('p22-r').addEventListener('change',upd); upd();
+    }
+    function rom(n){ return ['','I','II','III'][n]; }
+    function upd(){
+      var me=SM[+$('p22-m').value], re=SR[+$('p22-r').value];
+      var lcm=me[1]*re[1]/gcd(me[1],re[1]), x=lcm/me[1], y=lcm/re[1];
+      var poly=/[0-9]/.test(re[0]);
+      var raw = me[0] + (x>1?x:'') + (poly && y>1 ? '('+re[0]+')'+y : re[0] + (y>1?y:''));
+      var out=$('p22-out'); out.className='out ok';
+      out.innerHTML='<span class="bd">Валентности: '+me[0]+' = '+rom(me[1])+', остаток '+fml(re[0])+' = '+rom(re[1])+'<br>Формула соли ('+re[2]+'а): <b style="font-size:1.15rem">'+fml(raw)+'</b></span>';
+    }
+    render();
+  }
+
+  /* ПР3 — чистота водорода («гремучий газ») */
+  function mount_pr3() {
+    var m = $('pr3-test'); if (!m || m._built) return; m._built = 1;
+    m.innerHTML = '<div class="fld"><button class="btn primary" id="pr3-mix">Поджечь смесь H₂ с воздухом</button><button class="btn" id="pr3-pure">Поджечь чистый H₂</button></div><div class="out" id="pr3-out" style="margin-top:8px">Чтобы проверить чистоту водорода, его поджигают.</div>';
+    $('pr3-mix').addEventListener('click',function(){ var o=$('pr3-out'); o.className='out bad'; o.innerHTML='Смесь водорода с воздухом — «<b>гремучий газ</b>» — взрывается с резким <b>хлопком</b>. Значит, водород собран нечисто.'; });
+    $('pr3-pure').addEventListener('click',function(){ var o=$('pr3-out'); o.className='out ok'; o.innerHTML='Чистый водород горит <b>спокойно</b>, почти без звука. Значит, газ собран чисто.'; });
+  }
+
+  W.CHEM8_WIDGETS = Object.assign(W.CHEM8_WIDGETS || {}, {
+    p18: mount_p18, p19: mount_p19, p20: mount_p20, lo3: mount_lo3,
+    p21: mount_p21, lo4: mount_lo4, p22: mount_p22, pr3: mount_pr3
+  });
+  W.FLAG_MOUNTS = Object.assign(W.FLAG_MOUNTS || {}, {});
+})(window);

frontend/textbooks/chemistry_7_ch3.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_ch3_widgets.js" defer></script>
 <script src="/js/chem8_engine.js" defer></script>
 </head>
 <body>
@@ -90,11 +91,114 @@ window.PARAS = [
   {id:'final3', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
 ];
 
-window.ACH_LABELS = { start:'Начало главы 3!', final3_tasks:'Глава 3 пройдена!' };
-window.SIDEBARS = { p18:{ title:'Глава 3 · Химия 7', rows:[['Раздел','Водород'],['§§','18–22'],['Лаб/ПР','ЛО 3,4 · ПР 3']] } };
-window.TIPS = [{ sec:'p18', html:'Глава наполняется содержанием по фазам. Сейчас доступны навигация по параграфам и отметка о прочтении (+10 XP).' }];
+window.ACH_LABELS = { start:'Начало главы 3!', p18_done:'§18 изучен!', p19_done:'§19 изучен!',
+  p20_done:'§20 изучен!', lo3_done:'Лабораторный опыт 3 выполнен!', final3_tasks:'Глава 3 пройдена!' };
+window.SIDEBARS = {
+  p18:{ title:'Шпаргалка §18', rows:[['$H$','элемент, $Z=1$'],['$H_2$','самый лёгкий газ'],['Вселенная','самый частый элемент']] },
+  p19:{ title:'Шпаргалка §19', rows:[['Горение','$+O_2 \\to H_2O$'],['Гремучий газ','$H_2$ + воздух'],['Восстановитель','отнимает O у оксида']] },
+  p20:{ title:'Шпаргалка §20', rows:[['Кислота','H + остаток'],['Примеры','$HCl$, $H_2SO_4$'],['Лакмус','в кислоте красный']] },
+  lo3:{ title:'Лаб. опыт 3', rows:[['Лакмус','красный'],['Метилоранж','розово-красный']] }
+};
+window.TIPS = [
+  { sec:'p18', html:'$H$ — самый лёгкий элемент ($A_r=1$). Простое вещество $H_2$ — самый лёгкий газ, легче воздуха. Во Вселенной водород — самый распространённый элемент.' },
+  { sec:'p19', html:'Водород горит в кислороде, образуя воду. С оксидами он ведёт себя как <b>восстановитель</b>: $H_2 + CuO = Cu + H_2O$.' },
+  { sec:'p20', html:'<b>Кислота</b> = атомы водорода + кислотный остаток. <b>Индикаторы</b> меняют цвет: лакмус в кислоте — красный, метилоранж — розово-красный.' },
+  { sec:'lo3', html:'В кислоте лакмус становится красным, а метилоранж — розово-красным. Так обнаруживают кислоту.' }
+];
 
-/* Phase 0: заглушки-builder'ы из PARAS (теория и интерактивы добавляются в фазах 1–4). */
+window.POOLS = {
+  p18:[
+    {q:'Водород — это самый…',opts:['Тяжёлый газ','Лёгкий газ','Активный металл','Ядовитый газ'],a:1,ex:'$H_2$ — самый лёгкий газ.'},
+    {q:'Чему равна относительная атомная масса водорода $A_r(\\text{H})$?',hint:'из таблицы',unit:'',a:1,ex:'$A_r(\\text{H})=1$.'},
+    {q:'$\\text{H}_2$ — это…',opts:['Химический элемент','Простое вещество','Сложное вещество','Смесь'],a:1,ex:'Молекула из двух атомов одного элемента — простое вещество.'},
+    {q:'Где водород встречается чаще всего?',opts:['В земной коре','Во Вселенной','В металлах','В песке'],a:1,ex:'Во Вселенной водород — самый распространённый элемент.'}
+  ],
+  p19:[
+    {q:'При горении водорода в кислороде образуется…',opts:['Углекислый газ','Вода','Оксид меди','Соль'],a:1,ex:'$2H_2+O_2=2H_2O$.'},
+    {q:'Смесь водорода с воздухом называют…',opts:['Угарным газом','Гремучим газом','Озоном','Сухим льдом'],a:1,ex:'Гремучий газ взрывоопасен.'},
+    {q:'В реакции $\\text{H}_2+\\text{CuO}=\\text{Cu}+\\text{H}_2\\text{O}$ водород является…',opts:['Окислителем','Восстановителем','Катализатором','Индикатором'],a:1,ex:'Водород отнимает кислород — восстановитель.'},
+    {q:'Коэффициент перед $\\text{H}_2\\text{O}$ в $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$?',hint:'',unit:'',a:2,ex:'2.'}
+  ],
+  p20:[
+    {q:'Из чего состоит кислота?',opts:['Из металла и кислорода','Из атомов водорода и кислотного остатка','Из двух металлов','Из воды и соли'],a:1,ex:'Кислота = водород + кислотный остаток.'},
+    {q:'Какого цвета становится лакмус в кислоте?',opts:['Синего','Красного','Зелёного','Жёлтого'],a:1,ex:'Лакмус в кислоте — красный.'},
+    {q:'Какова формула серной кислоты?',opts:['HCl','H₂SO₄','HNO₃','H₂CO₃'],a:1,ex:'Серная кислота — $H_2SO_4$.'},
+    {q:'Индикатор — это вещество, которое…',opts:['Ускоряет реакцию','Меняет цвет в кислоте или щёлочи','Растворяет металлы','Выделяет газ'],a:1,ex:'Индикаторы обнаруживают кислоты и щёлочи по изменению цвета.'}
+  ]
+};
+
+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_p18(){
+  document.getElementById('p18-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 18 · Химия 7</div><h2>Водород — химический элемент и простое вещество</h2>'
+    +'<div class="ph-formula">$\\text{H}_2$</div>'
+    +'<div class="ph-desc">Самый лёгкий элемент Вселенной и его простое вещество.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">$H$</span><span class="ph-tag">$H_2$</span></div></div>'
+    +makeCard('theory','Элемент и простое вещество','§18','<p><b>Водород как элемент</b> — атомы H ($Z=1$, $A_r=1$), самый лёгкий из всех элементов. Атомы водорода входят в состав воды и множества других веществ.</p>'
+      +'<div class="def-box"><b>Водород как простое вещество</b> — газ $\\text{H}_2$ (молекула из двух атомов). Это самый лёгкий газ, легче воздуха.</div>')
+    +makeCard('theory','Свойства и нахождение','§18','<p>$\\text{H}_2$ — газ без цвета и запаха, мало растворим в воде. В свободном виде на Земле водорода почти нет, но в составе веществ (особенно воды) его много. Во Вселенной водород — самый распространённый элемент.</p>')
+    +wgt('Паспорт водорода','<div id="p18-card"></div>')
+    +rememberBox(['$H$ — самый лёгкий элемент ($A_r=1$).','$H_2$ — самый лёгкий газ, легче воздуха.','Во Вселенной водород — самый распространённый элемент.'])
+    +qList(['Чем водород-элемент отличается от простого вещества $H_2$?','Назови физические свойства водорода.','Где на Земле находится водород?'])
+    +secNav(null,'p19')+readButton('p18');
+  wireReadBtn('p18');
+}
+
+function build_p19(){
+  document.getElementById('p19-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 19 · Химия 7</div><h2>Химические свойства водорода</h2>'
+    +'<div class="ph-formula">$2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$</div>'
+    +'<div class="ph-desc">Как водород горит и почему его называют восстановителем.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">горение</span><span class="ph-tag">восстановитель</span></div></div>'
+    +makeCard('theory','Горение водорода','§19','<p>Водород горит в кислороде, образуя воду: $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$. Смесь водорода с воздухом (или кислородом) — «<b>гремучий газ</b>» — взрывоопасна, поэтому перед поджиганием водород проверяют на чистоту.</p>')
+    +makeCard('theory','Водород — восстановитель','§19','<div class="def-box">Водород способен <b>отнимать кислород</b> у оксидов металлов: $\\text{H}_2+\\text{CuO}=\\text{Cu}+\\text{H}_2\\text{O}$. Чёрный оксид меди превращается в красную медь. Вещество, отнимающее кислород, называют <b>восстановителем</b>.</div>')
+    +wgt('Реакции водорода','<div id="p19-rx"></div>')
+    +rememberBox(['Водород горит в кислороде → образуется вода.','Смесь $H_2$ с воздухом — гремучий газ, взрывается.','Водород — восстановитель: отнимает кислород у оксидов.'])
+    +qList(['Запиши уравнение горения водорода.','Почему водород называют восстановителем?','Что такое гремучий газ?'])
+    +secNav('p18','p20')+readButton('p19');
+  wireReadBtn('p19');
+}
+
+function build_p20(){
+  document.getElementById('p20-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 20 · Химия 7</div><h2>Понятие о кислотах</h2>'
+    +'<div class="ph-desc">Что такое кислоты и как их обнаруживают индикаторами.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">кислота</span><span class="ph-tag">индикатор</span></div></div>'
+    +makeCard('theory','Состав кислот','§20','<div class="def-box"><b>Кислоты</b> — сложные вещества, в состав которых входят атомы <b>водорода</b> и <b>кислотный остаток</b>.</div>'
+      +'<p>Примеры: соляная $\\text{HCl}$, серная $\\text{H}_2\\text{SO}_4$, азотная $\\text{HNO}_3$, угольная $\\text{H}_2\\text{CO}_3$. Число атомов водорода в кислоте равно валентности кислотного остатка.</p>')
+    +makeCard('theory','Индикаторы','§20','<p><b>Индикаторы</b> — вещества, которые меняют свой цвет в присутствии кислоты. В кислоте <b>лакмус</b> становится красным, а <b>метилоранж</b> — розово-красным. Так кислоту можно обнаружить.</p>')
+    +wgt('Индикаторы в кислоте','<div id="p20-ind"></div>')
+    +wgt('Важнейшие кислоты и их остатки','<div id="p20-acids"></div>')
+    +rememberBox(['Кислота = атомы водорода + кислотный остаток.','Лакмус в кислоте — красный, метилоранж — розово-красный.','Индикаторы помогают обнаружить кислоту.'])
+    +qList(['Из чего состоят кислоты?','Как с помощью индикатора обнаружить кислоту?','Назови формулу и название двух кислот.'])
+    +secNav('p19','lo3')+readButton('p20');
+  wireReadBtn('p20');
+}
+
+function build_lo3(){
+  document.getElementById('lo3-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">Лабораторный опыт 3</div><h2>Действие кислот на индикаторы</h2>'
+    +'<div class="ph-desc">Научиться обнаруживать кислоту с помощью индикаторов.</div></div>'
+    +makeCard('lab','Ход работы',null,'<ol><li>В пробирку с раствором кислоты добавь несколько капель <b>лакмуса</b> — он станет красным.</li><li>В другую пробирку с кислотой добавь <b>метилоранж</b> — он станет розово-красным.</li><li>Сравни с окраской индикаторов в чистой воде.</li><li>Сделай вывод, как обнаружить кислоту.</li></ol>'
+      +'<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="lo3-ind"></div>')
+    +secNav('p20','p21')+readButton('lo3');
+  wireReadBtn('lo3');
+}
+
+/* заглушки для ещё не наполненных § (следующая волна) */
 (function(){
   var P = window.PARAS, B = {};
   function ph(p, prev, next){
@@ -104,7 +208,7 @@ window.TIPS = [{ sec:'p18', 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);
     };
@@ -114,6 +218,12 @@ window.TIPS = [{ sec:'p18', html:'Глава наполняется содерж
   }
   window.BUILDERS = B;
 })();
+
+/* реальные builder'ы Волны 1 главы 3 */
+window.BUILDERS.p18 = build_p18;
+window.BUILDERS.p19 = build_p19;
+window.BUILDERS.p20 = build_p20;
+window.BUILDERS.lo3 = build_lo3;
 </script>
 
 </body>