feat(chemistry7): Phase 4 — Глава 4 «Вода» завершена (§§23–26 + ЛО5 + ПР4 + финал)

§23 Состав и свойства воды (разложение 2:1 + реакции воды),
§24 Основания (конструктор Me(OH)n + индикаторы щёлочи),
ЛО5 Действие щелочей на индикаторы,
§25 Реакция нейтрализации (анимация фенолфталеин малиновый → бесцветный),
ПР4 Реакция нейтрализации, §26 Охрана окружающей среды (экология-инфографика),
финал главы (6 боссов). chem7_ch4_widgets.js.

ВСЕ 26 параграфов курса «Химия 7» наполнены. Тесты chem7: 15/15 pass.

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

backend/tests/chemistry7-page.test.js

@@ -26,6 +26,7 @@ function buildPage(file) {
     '/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/chem7_ch4_widgets.js': readF('frontend/js/chem7_ch4_widgets.js'),
     '/js/chem8_engine.js': readF('frontend/js/chem8_engine.js')
   };
   html = html
@@ -191,6 +192,25 @@ test('ch3 Волна 2: §21 + ЛО4 + §22 + ПР3 + финал главы мо
   assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
 });
 
+test('ch4: вся глава 4 (§23–§26 + ЛО5 + ПР4 + финал) монтируется', async () => {
+  const { doc, errors } = await loadDom('chemistry_7_ch4.html');
+  assert.ok(doc.querySelector('#p23-water #p23-pick'), 'разложение/реакции воды §23');
+  doc.defaultView.goTo('p24'); await wait(100);
+  assert.ok(doc.querySelector('#p24-bld #p24-m'), 'конструктор оснований §24');
+  assert.ok(doc.querySelector('#p24-ind #p24-ind-sel'), 'индикаторы щёлочи §24');
+  doc.defaultView.goTo('lo5'); await wait(100);
+  assert.ok(doc.querySelector('#lo5-ind #lo5-ind-sel'), 'индикаторы ЛО5');
+  doc.defaultView.goTo('p25'); await wait(100);
+  assert.ok(doc.querySelector('#p25-neu #p25-neu-go'), 'нейтрализация §25');
+  doc.defaultView.goTo('pr4'); await wait(100);
+  assert.ok(doc.querySelector('#pr4-neu #pr4-neu-go'), 'нейтрализация ПР4');
+  doc.defaultView.goTo('p26'); await wait(100);
+  assert.ok(doc.querySelector('#p26-eco .eco-it'), 'экология §26');
+  doc.defaultView.goTo('final4'); await wait(120);
+  assert.ok(doc.querySelectorAll('#navDotsfinal4 .nav-dot').length >= 6, 'боссы финала главы 4');
+  assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
+});
+
 /* ── Хаб: каталог глав + финал курса ── */
 function buildHub() {
   let html = readF('frontend/textbooks/chemistry_7_hub.html');

frontend/js/chem7_ch4_widgets.js

@@ -0,0 +1,145 @@
+/* chem7_ch4_widgets.js — интерактивы главы 4 «Вода» (Химия 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; }
+  function strip(color){ return '<div style="width:120px;height:32px;border-radius:8px;border:1.5px solid var(--border);background:'+color+';display:inline-block;vertical-align:middle"></div>'; }
+
+  /* §23 — разложение воды (2:1) + реакции воды */
+  var WRX = [
+    { name:'Разложение электрическим током', eq:'2H2O = 2H2^ + O2^', cond:'эл. ток', note:'Вода разлагается на простые вещества: водорода получается вдвое больше по объёму, чем кислорода (2 : 1).' },
+    { name:'Реакция с натрием', eq:'2Na + 2H2O = 2NaOH + H2^', note:'Активные металлы реагируют с водой, образуя щёлочь и водород.' },
+    { name:'Реакция с оксидом кальция', eq:'CaO + H2O = Ca(OH)2', note:'Оксиды активных металлов с водой дают основания.' },
+    { name:'Реакция с углекислым газом', eq:'CO2 + H2O = H2CO3', note:'Оксиды неметаллов с водой дают кислоты.' }
+  ];
+  function decompSvg(){
+    // две перевёрнутые пробирки: H2 (заполнена на 2/2), O2 (на 1/2)
+    return '<svg viewBox="0 0 220 140" width="100%" style="max-width:240px">'
+      + '<rect x="40" y="20" width="34" height="90" rx="6" fill="#dbeafe" stroke="#93c5fd"/>'
+      + '<rect x="40" y="20" width="34" height="74" rx="6" fill="#bfdbfe"/>'
+      + '<text x="57" y="125" text-anchor="middle" font-size="13" font-weight="700" fill="#1d4ed8">H₂</text>'
+      + '<text x="57" y="58" text-anchor="middle" font-size="11" fill="#1e3a8a">2 V</text>'
+      + '<rect x="146" y="20" width="34" height="90" rx="6" fill="#fee2e2" stroke="#fca5a5"/>'
+      + '<rect x="146" y="65" width="34" height="45" rx="6" fill="#fecaca"/>'
+      + '<text x="163" y="125" text-anchor="middle" font-size="13" font-weight="700" fill="#b91c1c">O₂</text>'
+      + '<text x="163" y="90" text-anchor="middle" font-size="11" fill="#7f1d1d">1 V</text>'
+      + '<rect x="20" y="110" width="180" height="12" rx="4" fill="#60a5fa"/>'
+      + '</svg>';
+  }
+  function mount_p23() {
+    var m = $('p23-water'); if (!m || m._built) return; m._built = 1;
+    var idx = 0;
+    function render(){
+      var r = WRX[idx];
+      m.innerHTML = (idx===0 ? decompSvg() : '')
+        + '<div class="fld"><label>Реакция воды</label><select id="p23-pick">'
+        + WRX.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,{cond:r.cond})+'</div>'
+        + '<div style="font-size:.86rem;color:var(--muted);margin-top:6px">'+esc(r.note)+'</div></div>';
+      $('p23-pick').addEventListener('change', function(e){ idx=+e.target.value; m._built=0; render(); });
+    }
+    render();
+  }
+
+  /* индикаторы в щёлочи */
+  var ALK_IND = {
+    'Лакмус':       { neutral:['#7c3aed','фиолетовый'], alk:['#2563eb','синий'] },
+    'Фенолфталеин': { neutral:['#f3f4f6','бесцветный'], alk:['#db2777','малиновый'] },
+    'Метилоранж':   { neutral:['#f59e0b','оранжевый'],  alk:['#eab308','жёлтый'] }
+  };
+  function alkIndicator(mountId) {
+    var m = $(mountId); if (!m || m._built) return; m._built = 1;
+    var ind = 'Фенолфталеин';
+    function render(){
+      var c = ALK_IND[ind];
+      m.innerHTML = '<div class="fld"><label>Индикатор</label><select id="'+mountId+'-sel">'
+        + Object.keys(ALK_IND).map(function(k){ return '<option'+(k===ind?' selected':'')+'>'+k+'</option>'; }).join('') + '</select></div>'
+        + '<div class="out ok" style="margin-top:8px">В нейтральной среде: ' + strip(c.neutral[0]) + ' <b>'+c.neutral[1]+'</b><br>'
+        + 'В щёлочи: ' + strip(c.alk[0]) + ' <b>'+c.alk[1]+'</b></div>';
+      $(mountId+'-sel').addEventListener('change', function(e){ ind=e.target.value; m._built=0; render(); });
+    }
+    render();
+  }
+
+  /* §24 — конструктор оснований Me(OH)n + индикаторы */
+  var BM = [ ['Na',1], ['K',1], ['Ca',2], ['Mg',2], ['Cu',2], ['Al',3], ['Fe',3] ];
+  var SOLUBLE = { Na:1, K:1, Ca:1 };
+  function mount_p24() {
+    var b = $('p24-bld');
+    if (b && !b._built) { b._built = 1;
+      function rom(n){ return ['','I','II','III'][n]; }
+      b.innerHTML = '<div class="fld"><label>Металл</label><select id="p24-m">'
+        + BM.map(function(e,i){ return '<option value="'+i+'"'+(e[0]==='Na'?' selected':'')+'>'+e[0]+' ('+rom(e[1])+')</option>'; }).join('') + '</select> + гидроксогруппа OH (I)</div><div class="out" id="p24-out"></div>';
+      function upd(){
+        var e=BM[+$('p24-m').value], n=e[1];
+        var raw = e[0] + (n>1 ? '(OH)'+n : 'OH');
+        var sol = SOLUBLE[e[0]] ? 'щёлочь (растворимое основание)' : 'нерастворимое основание';
+        var out=$('p24-out'); out.className='out ok';
+        out.innerHTML='<span class="bd">Валентность '+e[0]+' = '+rom(n)+', OH = I → '+n+' группы OH<br>Формула основания: <b style="font-size:1.15rem">'+fml(raw)+'</b><br>Это '+sol+'.</span>';
+      }
+      $('p24-m').addEventListener('change',upd); upd();
+    }
+    alkIndicator('p24-ind');
+  }
+  function mount_lo5() { alkIndicator('lo5-ind'); }
+
+  /* §25 / ПР4 — нейтрализация (фенолфталеин малиновый → бесцветный) */
+  function mount_neutral(mountId) {
+    var m = $(mountId); if (!m || m._built) return; m._built = 1;
+    var done = false;
+    function beaker(color){ return '<svg viewBox="0 0 80 90" width="70" style="vertical-align:middle"><path d="M20 10 h40 v30 l14 38 a6 6 0 0 1-6 8 H12 a6 6 0 0 1-6-8 l14-38 Z" fill="none" stroke="var(--muted)" stroke-width="2"/><path d="M16 52 h48 l8 22 a4 4 0 0 1-4 5 H12 a4 4 0 0 1-4-5 Z" fill="'+color+'"/></svg>'; }
+    function render(){
+      m.innerHTML = '<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">' + beaker(done?'#f8fafc':'#db2777')
+        + '<div>'+(done
+            ? 'Раствор стал <b>бесцветным</b> — кислота нейтрализовала щёлочь. Реакция завершена.'
+            : 'В щёлочи с фенолфталеином раствор <b>малиновый</b>. Добавляй кислоту по каплям.')+'</div></div>'
+        + '<div class="fld" style="margin-top:8px"><button class="btn primary" id="'+mountId+'-go">'+(done?'Сбросить':'Добавить кислоту')+'</button></div>'
+        + (done ? '<div class="out ok" style="margin-top:8px"><div style="font-size:1.05rem">'+ceq('HCl + NaOH = NaCl + H2O')+'</div><div style="font-size:.84rem;color:var(--muted);margin-top:4px">Кислота + основание → соль + вода. Это реакция <b>нейтрализации</b>.</div></div>' : '');
+      $(mountId+'-go').addEventListener('click', function(){ done=!done; m._built=0; render(); });
+    }
+    render();
+  }
+  function mount_p25() { mount_neutral('p25-neu'); }
+  function mount_pr4() { mount_neutral('pr4-neu'); }
+
+  /* §26 — охрана воды и воздуха: источники загрязнения и способы охраны */
+  var ECO = {
+    'Источники загрязнения': [
+      ['Промышленные выбросы','Газы и пыль из труб заводов загрязняют воздух.'],
+      ['Сточные воды','Неочищенные стоки отравляют реки и озёра.'],
+      ['Нефть','Разливы нефти губят водные организмы.'],
+      ['Кислотные дожди','Оксиды серы и азота в воздухе образуют кислоты, выпадающие с дождём.']
+    ],
+    'Способы охраны и очистки': [
+      ['Очистные сооружения','Сточные воды очищают перед сбросом.'],
+      ['Фильтрование','На водопроводных станциях удаляют твёрдые частицы.'],
+      ['Хлорирование и озонирование','Обеззараживают питьевую воду.'],
+      ['Бережное отношение','Экономить воду и не загрязнять водоёмы.']
+    ]
+  };
+  function mount_p26() {
+    var m = $('p26-eco'); if (!m || m._built) return; m._built = 1;
+    var cols = Object.keys(ECO).map(function(title){
+      var items = ECO[title].map(function(it,i){ return '<button class="eco-it btn" data-t="'+esc(title)+'" data-i="'+i+'" style="display:block;width:100%;text-align:left;margin:4px 0">'+esc(it[0])+'</button>'; }).join('');
+      return '<div style="flex:1;min-width:200px"><div style="font-weight:700;margin-bottom:6px">'+esc(title)+'</div>'+items+'</div>';
+    }).join('');
+    m.innerHTML = '<div style="display:flex;gap:14px;flex-wrap:wrap">'+cols+'</div><div class="out" id="p26-eco-out" style="margin-top:8px">Кликни по пункту, чтобы узнать подробнее.</div>';
+    var out=$('p26-eco-out');
+    m.querySelectorAll('.eco-it').forEach(function(b){
+      b.addEventListener('click', function(){ var it=ECO[b.dataset.t][+b.dataset.i]; out.className='out ok'; out.innerHTML='<b>'+esc(it[0])+'.</b> '+esc(it[1]); });
+    });
+  }
+
+  W.CHEM8_WIDGETS = Object.assign(W.CHEM8_WIDGETS || {}, {
+    p23: mount_p23, p24: mount_p24, lo5: mount_lo5, p25: mount_p25, pr4: mount_pr4, p26: mount_p26
+  });
+  W.FLAG_MOUNTS = Object.assign(W.FLAG_MOUNTS || {}, {});
+})(window);

frontend/textbooks/chemistry_7_ch4.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_ch4_widgets.js" defer></script>
 <script src="/js/chem8_engine.js" defer></script>
 </head>
 <body>
@@ -86,30 +87,196 @@ window.PARAS = [
   {id:'final4', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
 ];
 
-window.ACH_LABELS = { start:'Начало главы 4!', final4_tasks:'Глава 4 пройдена!' };
-window.SIDEBARS = { p23:{ title:'Глава 4 · Химия 7', rows:[['Раздел','Вода'],['§§','23–26'],['Лаб/ПР','ЛО 5 · ПР 4']] } };
-window.TIPS = [{ sec:'p23', html:'Глава наполняется содержанием по фазам. Сейчас доступны навигация по параграфам и отметка о прочтении (+10 XP).' }];
+window.ACH_LABELS = { start:'Начало главы 4!', p23_done:'§23 изучен!', p24_done:'§24 изучен!',
+  lo5_done:'Лабораторный опыт 5 выполнен!', p25_done:'§25 изучен!', pr4_done:'Практическая работа 4 выполнена!',
+  p26_done:'§26 изучен!', final4_tasks:'Глава 4 пройдена! Вы — Хранитель воды!' };
+window.SIDEBARS = {
+  p23:{ title:'Шпаргалка §23', rows:[['Вода','$H_2O$'],['Разложение','$H_2:O_2=2:1$'],['$t_{кип}$','100 °C']] },
+  p24:{ title:'Шпаргалка §24', rows:[['Основание','Me + OH'],['Щёлочи','раствор.: NaOH, KOH'],['Фенолфталеин','в щёлочи малиновый']] },
+  lo5:{ title:'Лаб. опыт 5', rows:[['Лакмус','синий'],['Фенолфталеин','малиновый']] },
+  p25:{ title:'Шпаргалка §25', rows:[['Нейтрализация','кислота + основание'],['Продукты','соль + вода'],['Индикатор','показывает конец']] },
+  pr4:{ title:'Практическая 4', rows:[['Щёлочь + фенолфталеин','малиновый'],['+ кислота','до бесцветного']] },
+  p26:{ title:'Шпаргалка §26', rows:[['Загрязнение','стоки, выбросы'],['Очистка','фильтр, хлор, озон'],['Береги','воду и воздух']] },
+  final4:{ title:'Финал главы 4', rows:[['§§23–26','вода'],['Награда','ачивка + XP']] }
+};
+window.TIPS = [
+  { sec:'p23', html:'Вода $H_2O$ разлагается электрическим током на простые вещества: водорода по объёму в <b>2 раза больше</b>, чем кислорода.' },
+  { sec:'p24', html:'<b>Основание</b> = металл + гидроксогруппа OH. Растворимые основания (NaOH, KOH, $Ca(OH)_2$) называют <b>щёлочами</b>. В щёлочи фенолфталеин — малиновый, лакмус — синий.' },
+  { sec:'lo5', html:'В щёлочи лакмус становится синим, а фенолфталеин — малиновым. Так обнаруживают щёлочь.' },
+  { sec:'p25', html:'<b>Нейтрализация</b>: кислота + основание → соль + вода. Конец реакции виден по изменению цвета индикатора.' },
+  { sec:'pr4', html:'К щёлочи с фенолфталеином (малиновый) добавляют кислоту по каплям, пока раствор не станет бесцветным.' },
+  { sec:'p26', html:'Воду и воздух нужно беречь: очищать стоки, фильтровать и обеззараживать воду, не загрязнять водоёмы.' }
+];
 
-/* Phase 0: заглушки-builder'ы из PARAS (теория и интерактивы добавляются в фазах 1–4). */
+window.POOLS = {
+  p23:[
+    {q:'Какова формула воды?',opts:['HO','H₂O','H₂O₂','OH'],a:1,ex:'Вода — $H_2O$.'},
+    {q:'При разложении воды объём водорода во сколько раз больше объёма кислорода?',hint:'2 : 1',unit:'раза',a:2,ex:'$H_2:O_2=2:1$.'},
+    {q:'Что образуется при разложении воды электрическим током?',opts:['Водород и кислород','Только водород','Соль и вода','Углекислый газ'],a:0,ex:'$2H_2O=2H_2\\uparrow+O_2\\uparrow$.'},
+    {q:'Чему равна температура кипения воды (°C)?',hint:'при нормальных условиях',unit:'°C',a:100,ex:'100 °C.'}
+  ],
+  p24:[
+    {q:'Из чего состоит основание?',opts:['Из металла и кислотного остатка','Из металла и гидроксогруппы OH','Из водорода и остатка','Из двух неметаллов'],a:1,ex:'Основание = металл + OH.'},
+    {q:'Какого цвета фенолфталеин в щёлочи?',opts:['Бесцветный','Малиновый','Жёлтый','Синий'],a:1,ex:'В щёлочи фенолфталеин малиновый.'},
+    {q:'Какова формула гидроксида натрия?',opts:['NaOH','Na₂O','NaCl','NaH'],a:0,ex:'Гидроксид натрия — $NaOH$.'},
+    {q:'Растворимые в воде основания называют…',opts:['Кислотами','Щёлочами','Солями','Оксидами'],a:1,ex:'Растворимые основания — щёлочи.'}
+  ],
+  p25:[
+    {q:'Реакция кислоты с основанием называется реакцией…',opts:['Разложения','Нейтрализации','Замещения','Горения'],a:1,ex:'Кислота + основание → соль + вода — нейтрализация.'},
+    {q:'Продукты реакции $\\text{HCl}+\\text{NaOH}$ — это…',opts:['Соль и вода','Два газа','Металл и вода','Оксид и вода'],a:0,ex:'$HCl+NaOH=NaCl+H_2O$.'},
+    {q:'Сколько веществ образуется в реакции $\\text{HCl}+\\text{NaOH}=\\text{NaCl}+\\text{H}_2\\text{O}$?',hint:'соль и вода',unit:'',a:2,ex:'Соль и вода — 2 вещества.'},
+    {q:'Как узнать, что реакция нейтрализации завершилась?',opts:['По выделению газа','По изменению цвета индикатора','По осадку','Никак'],a:1,ex:'Индикатор меняет цвет в конце реакции.'}
+  ],
+  p26:[
+    {q:'Что загрязняет воду?',opts:['Чистый дождь','Неочищенные сточные воды','Снег','Лёд'],a:1,ex:'Сточные воды и выбросы загрязняют водоёмы.'},
+    {q:'Как очищают питьевую воду на водопроводных станциях?',opts:['Замораживанием','Фильтрованием и обработкой хлором или озоном','Кипячением навсегда','Никак'],a:1,ex:'Воду фильтруют и обеззараживают хлором или озоном.'},
+    {q:'Из-за чего возникают кислотные дожди?',opts:['Из-за выбросов оксидов серы и азота','Из-за чистого воздуха','Из-за воды','Из-за песка'],a:0,ex:'Оксиды в воздухе образуют кислоты.'},
+    {q:'Как беречь воду?',opts:['Лить без счёта','Экономить и не загрязнять','Сливать отходы в реку','Не пить'],a:1,ex:'Экономить воду и не загрязнять водоёмы.'}
+  ],
+  final4:[
+    {q:'Формула воды?',opts:['HO','H₂O','OH','H₂O₂'],a:1,ex:'$H_2O$.'},
+    {q:'При разложении воды $H_2:O_2$ по объёму = ? : 1. Чему равно первое число?',hint:'2:1',unit:'',a:2,ex:'2.'},
+    {q:'Основание состоит из…',opts:['Металла и OH','Водорода и остатка','Двух металлов','Металла и кислорода'],a:0,ex:'Металл + OH.'},
+    {q:'Фенолфталеин в щёлочи становится…',opts:['Бесцветным','Малиновым','Красным','Жёлтым'],a:1,ex:'Малиновый.'},
+    {q:'Продукты реакции нейтрализации — это…',opts:['Соль и вода','Два газа','Оксид и металл','Кислота и щёлочь'],a:0,ex:'Соль + вода.'},
+    {q:'Как обеззараживают питьевую воду?',opts:['Хлорированием или озонированием','Заморозкой','Подкислением','Ничем'],a:0,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_p23(){
+  document.getElementById('p23-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 23 · Химия 7</div><h2>Состав, физические и химические свойства воды</h2>'
+    +'<div class="ph-formula">$\\text{H}_2\\text{O}$</div>'
+    +'<div class="ph-desc">Самое важное вещество на Земле: его состав и превращения.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">$H_2O$</span><span class="ph-tag">разложение</span></div></div>'
+    +makeCard('theory','Состав и физические свойства','§23','<p>Вода — <b>сложное вещество</b> $\\text{H}_2\\text{O}$: молекула из двух атомов водорода и одного атома кислорода. Это жидкость без цвета, запаха и вкуса; замерзает при $0\\,^\\circ$C, кипит при $100\\,^\\circ$C.</p>')
+    +makeCard('theory','Химические свойства','§23','<ul><li>Разлагается электрическим током: $2\\text{H}_2\\text{O}=2\\text{H}_2\\uparrow+\\text{O}_2\\uparrow$ (водорода вдвое больше).</li><li>Реагирует с активными металлами: $2\\text{Na}+2\\text{H}_2\\text{O}=2\\text{NaOH}+\\text{H}_2\\uparrow$.</li><li>С оксидами металлов даёт основания: $\\text{CaO}+\\text{H}_2\\text{O}=\\text{Ca(OH)}_2$.</li><li>С оксидами неметаллов даёт кислоты: $\\text{CO}_2+\\text{H}_2\\text{O}=\\text{H}_2\\text{CO}_3$.</li></ul>')
+    +wgt('Разложение воды и реакции воды','<div id="p23-water"></div>')
+    +rememberBox(['Вода $H_2O$ — сложное вещество.','При разложении $H_2:O_2=2:1$ по объёму.','Вода реагирует с активными металлами и с оксидами.'])
+    +qList(['Каков состав молекулы воды?','Что образуется при разложении воды током?','Что получится при реакции $CO_2$ с водой?'])
+    +secNav(null,'p24')+readButton('p23');
+  wireReadBtn('p23');
+}
+
+function build_p24(){
+  document.getElementById('p24-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 24 · Химия 7</div><h2>Основания как сложные вещества</h2>'
+    +'<div class="ph-formula">Me(OH)$_n$</div>'
+    +'<div class="ph-desc">Что такое основания и как их обнаруживают индикаторами.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">основание</span><span class="ph-tag">щёлочь</span></div></div>'
+    +makeCard('theory','Состав оснований','§24','<div class="def-box"><b>Основания</b> — сложные вещества, состоящие из атомов <b>металла</b> и одной или нескольких <b>гидроксогрупп</b> OH.</div>'
+      +'<p>Примеры: $\\text{NaOH}$, $\\text{KOH}$, $\\text{Ca(OH)}_2$, $\\text{Cu(OH)}_2$. Растворимые в воде основания называют <b>щёлочами</b> (NaOH, KOH, $Ca(OH)_2$), остальные — нерастворимые. Название: «гидроксид» + металл.</p>')
+    +makeCard('theory','Индикаторы в щёлочи','§24','<p>В щёлочи <b>лакмус</b> становится синим, <b>фенолфталеин</b> — малиновым, <b>метилоранж</b> — жёлтым. Так обнаруживают щёлочь.</p>')
+    +wgt('Конструктор основания','<div id="p24-bld"></div>')
+    +wgt('Индикаторы в щёлочи','<div id="p24-ind"></div>')
+    +rememberBox(['Основание = металл + группа OH.','Растворимые основания — щёлочи.','Фенолфталеин в щёлочи малиновый, лакмус — синий.'])
+    +qList(['Дай определение основания.','Составь формулу гидроксида кальция.','Как обнаружить щёлочь индикатором?'])
+    +secNav('p23','lo5')+readButton('p24');
+  wireReadBtn('p24');
+}
+
+function build_lo5(){
+  document.getElementById('lo5-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">Лабораторный опыт 5</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="lo5-ind"></div>')
+    +secNav('p24','p25')+readButton('lo5');
+  wireReadBtn('lo5');
+}
+
+function build_p25(){
+  document.getElementById('p25-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 25 · Химия 7</div><h2>Реакция нейтрализации</h2>'
+    +'<div class="ph-formula">кислота + основание $\\to$ соль + вода</div>'
+    +'<div class="ph-desc">Что происходит, когда смешивают кислоту и щёлочь.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">нейтрализация</span><span class="ph-tag">соль + вода</span></div></div>'
+    +makeCard('theory','Нейтрализация','§25','<div class="def-box"><b>Реакция нейтрализации</b> — реакция между кислотой и основанием, в результате которой образуются <b>соль и вода</b>.</div>'
+      +'<p>Например: $\\text{HCl}+\\text{NaOH}=\\text{NaCl}+\\text{H}_2\\text{O}$. За ходом реакции следят по индикатору: фенолфталеин в щёлочи малиновый, а когда вся щёлочь нейтрализована — раствор становится бесцветным.</p>')
+    +wgt('Анимация нейтрализации','<div id="p25-neu"></div>')
+    +rememberBox(['Кислота + основание → соль + вода.','Это реакция нейтрализации.','Конец реакции виден по изменению цвета индикатора.'])
+    +qList(['Какая реакция называется нейтрализацией?','Что образуется при реакции $HCl$ с $NaOH$?','Зачем при нейтрализации используют индикатор?'])
+    +secNav('lo5','pr4')+readButton('p25');
+  wireReadBtn('p25');
+}
+
+function build_pr4(){
+  document.getElementById('pr4-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">Практическая работа 4</div><h2>Реакция нейтрализации</h2>'
+    +'<div class="ph-desc">Провести нейтрализацию щёлочи кислотой и зафиксировать её конец по индикатору.</div></div>'
+    +makeCard('lab','Ход работы',null,'<ol><li>В стакан с раствором щёлочи добавь несколько капель <b>фенолфталеина</b> — раствор станет малиновым.</li><li>По каплям приливай кислоту, перемешивая, пока раствор не <b>обесцветится</b>.</li><li>Обесцвечивание означает, что щёлочь нейтрализована: $\\text{HCl}+\\text{NaOH}=\\text{NaCl}+\\text{H}_2\\text{O}$.</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="pr4-neu"></div>')
+    +secNav('p25','p26')+readButton('pr4');
+  wireReadBtn('pr4');
+}
+
+function build_p26(){
+  document.getElementById('p26-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 26 · Химия 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','Загрязнение и охрана','§26','<p>Вода и воздух — главные природные богатства. Их загрязняют промышленные выбросы, неочищенные сточные воды, разливы нефти. Оксиды серы и азота в воздухе вызывают <b>кислотные дожди</b>.</p>'
+      +'<div class="def-box">Чтобы беречь природу, сточные воды очищают на специальных сооружениях, питьевую воду фильтруют и обеззараживают хлором или озоном, а каждый человек должен экономить воду и не загрязнять водоёмы.</div>')
+    +wgt('Источники загрязнения и способы охраны','<div id="p26-eco"></div>')
+    +rememberBox(['Воду и воздух загрязняют выбросы и стоки.','Воду очищают фильтрованием и обеззараживанием.','Беречь природу — задача каждого человека.'])
+    +qList(['Что загрязняет воду и воздух?','Как очищают питьевую воду?','Что может сделать каждый, чтобы беречь воду?'])
+    +secNav('pr4','final4')+readButton('p26');
+  wireReadBtn('p26');
+}
+
+function build_final4(){
+  document.getElementById('final4-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">Финал главы 4</div><h2>Босс: вода</h2>'
+    +'<div class="ph-formula">$H_2O$ · основания · нейтрализация · экология</div>'
+    +'<div class="ph-desc">Шесть задач на всю главу. Реши все — получи звание «Хранитель воды».</div></div>'
+    +makeCard('rule','Шпаргалка главы 4',null,'<ul>'
+      +'<li>Вода $H_2O$ разлагается током: $H_2:O_2=2:1$; реагирует с металлами и оксидами.</li>'
+      +'<li>Основание = металл + OH; щёлочи — растворимые основания.</li>'
+      +'<li>Индикаторы в щёлочи: лакмус — синий, фенолфталеин — малиновый.</li>'
+      +'<li>Нейтрализация: кислота + основание → соль + вода.</li>'
+      +'<li>Воду и воздух надо беречь и очищать.</li></ul>')
+    +'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши задачи ниже — за каждую +5 XP, за полный разгром босса — звание и бонус. А затем проверь себя в финале всего курса на главной странице!</p>'
+    +secNav('p26',null);
+}
+
+/* placeholder-страховка (на случай нерасставленных override) */
 (function(){
   var P = window.PARAS, B = {};
   function ph(p, prev, next){
     return function(){
       var el = document.getElementById(p.id + '-body'); if (!el) return;
-      el.innerHTML =
-        '<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>')
+      el.innerHTML = '<div class="para-hero"><div class="ph-label">' + p.num + ' · Химия 7</div><h2>' + p.name + '</h2></div>'
+        + makeCard('theory', p.name, p.num, '<p>Содержание готовится.</p>')
         + secNav(prev, next) + (p.final ? '' : readButton(p.id));
       if (!p.final) wireReadBtn(p.id);
     };
   }
-  for (var i = 0; i < P.length; i++) {
-    B[P[i].id] = ph(P[i], i > 0 ? P[i-1].id : null, i < P.length-1 ? P[i+1].id : null);
-  }
+  for (var i = 0; i < P.length; i++) B[P[i].id] = ph(P[i], i > 0 ? P[i-1].id : null, i < P.length-1 ? P[i+1].id : null);
   window.BUILDERS = B;
 })();
+
+window.BUILDERS.p23 = build_p23;
+window.BUILDERS.p24 = build_p24;
+window.BUILDERS.lo5 = build_lo5;
+window.BUILDERS.p25 = build_p25;
+window.BUILDERS.pr4 = build_pr4;
+window.BUILDERS.p26 = build_p26;
+window.BUILDERS.final4 = build_final4;
 </script>
 
 </body>