feat(chemistry7): Phase 1 Волна 4 — Глава 1 завершена (§§10–12 + ЛО1 + финал)

§10 Физические и химические явления (детектор признаков реакции),
ЛО1 Признаки реакций (опыты с признаками), §11 Закон сохранения массы
(весы сохранения массы), §12 Составление уравнений (балансировщик через
Chem8.equationBalancer), финал главы (6 интегрированных боссов + шпаргалка).

Глава 1 «Первоначальные химические понятия» наполнена полностью (12§).
Тесты: 10/10 chem7 pass; полный прогон 156/159 (3 — известный baseline Auth).

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

frontend/textbooks/chemistry_7_ch1.html

@@ -106,7 +106,9 @@ window.PARAS = [
 window.ACH_LABELS = { start:'Начало главы 1!', p1_done:'§1 изучен!', p2_done:'§2 изучен!',
   pr1_done:'Практическая работа 1 выполнена!', p3_done:'§3 изучен!',
   p4_done:'§4 изучен!', p5_done:'§5 изучен!', p6_done:'§6 изучен!',
-  p7_done:'§7 изучен!', p8_done:'§8 изучен!', p9_done:'§9 изучен!', final1_tasks:'Глава 1 пройдена!' };
+  p7_done:'§7 изучен!', p8_done:'§8 изучен!', p9_done:'§9 изучен!',
+  p10_done:'§10 изучен!', lo1_done:'Лабораторный опыт 1 выполнен!', p11_done:'§11 изучен!', p12_done:'§12 изучен!',
+  final1_tasks:'Глава 1 пройдена! Вы — Мастер первоначальных понятий!' };
 window.SIDEBARS = {
   p1:{ title:'Шпаргалка §1', rows:[['Вещество','то, из чего состоит тело'],['Тело','предмет из вещества'],['Свойства','цвет, запах, плотность, $t_{пл}$…']] },
   p2:{ title:'Шпаргалка §2', rows:[['Чистое','постоянный состав'],['Смесь','2+ вещества'],['Разделение','по различию свойств']] },
@@ -117,7 +119,12 @@ window.SIDEBARS = {
   p6:{ title:'Шпаргалка §6', rows:[['Сложное','разные элементы'],['Примеры','$H_2O$, $CO_2$, $NH_3$'],['Состав','можно разложить']] },
   p7:{ title:'Шпаргалка §7', rows:[['Индекс','число атомов'],['Коэффициент','число молекул'],['Состав','качеств. + количеств.']] },
   p8:{ title:'Шпаргалка §8', rows:[['$M_r$','$=\\sum A_r$'],['$M_r(H_2O)$','18'],['$M_r(H_2SO_4)$','98']] },
-  p9:{ title:'Шпаргалка §9', rows:[['Валентность','число связей'],['H — I, O — II',''],['Формула','по НОК валентностей']] }
+  p9:{ title:'Шпаргалка §9', rows:[['Валентность','число связей'],['H — I, O — II',''],['Формула','по НОК валентностей']] },
+  p10:{ title:'Шпаргалка §10', rows:[['Физическое','форма/состояние'],['Химическое','новые вещества'],['Признаки','цвет, газ, осадок, запах, тепло']] },
+  lo1:{ title:'Лаб. опыт 1', rows:[['Цель','наблюдать признаки реакций'],['Признак','новое вещество']] },
+  p11:{ title:'Шпаргалка §11', rows:[['Закон','масса сохраняется'],['$m$ реаг.','= $m$ прод.'],['Авторы','Ломоносов, Лавуазье']] },
+  p12:{ title:'Шпаргалка §12', rows:[['Уравнивают','коэффициентами'],['Индексы','не трогать'],['Баланс','атомы слева = справа']] },
+  final1:{ title:'Финал главы 1', rows:[['§§1–12','все понятия'],['Награда','ачивка + XP']] }
 };
 window.TIPS = [
   { sec:'p1', html:'Тело — это <b>предмет</b> (гвоздь, стакан), а вещество — <b>то, из чего</b> он сделан (железо, стекло). Из одного вещества можно сделать много тел.' },
@@ -129,7 +136,12 @@ window.TIPS = [
   { sec:'p6', html:'<b>Сложное</b> вещество образовано атомами <b>разных</b> элементов ($H_2O$ — водород и кислород) и может быть разложено на простые.' },
   { sec:'p7', html:'Индекс относится к атому/группе слева от него. В $H_2SO_4$: 2 атома H, 1 атом S, 4 атома O. Коэффициент (число перед формулой) — это число молекул.' },
   { sec:'p8', html:'$M_r$ — сумма $A_r$ всех атомов формулы. $M_r(\\text{CO}_2)=12+2\\cdot16=44$.' },
-  { sec:'p9', html:'Кислород в соединениях имеет валентность II, водород — I. Зная их, можно определить валентность другого элемента и составить формулу по НОК.' }
+  { sec:'p9', html:'Кислород в соединениях имеет валентность II, водород — I. Зная их, можно определить валентность другого элемента и составить формулу по НОК.' },
+  { sec:'p10', html:'Признаки химической реакции: изменение цвета, выделение газа, образование осадка, появление запаха, выделение или поглощение тепла и света.' },
+  { sec:'lo1', html:'Если после действия появились новые вещества (изменился цвет, выпал осадок, выделился газ) — произошла химическая реакция.' },
+  { sec:'p11', html:'Атомы в реакции не исчезают и не появляются, поэтому масса веществ <b>до</b> реакции равна массе <b>после</b> (М. В. Ломоносов, А. Лавуазье).' },
+  { sec:'p12', html:'Уравнивают реакцию только <b>коэффициентами</b> (числами перед формулами). Индексы внутри формул менять нельзя.' },
+  { sec:'final1', html:'Собери всё: вещество/смесь, атом/элемент, формула, $M_r$, валентность, признаки реакции, закон сохранения, уравнение.' }
 ];
 
 /* ── задачи (тренажёр) ── */
@@ -187,6 +199,32 @@ window.POOLS = {
     {q:'Какова валентность кислорода в соединениях?',hint:'постоянная',unit:'',a:2,ex:'Кислород почти всегда двухвалентен (II).'},
     {q:'Какова валентность хлора в молекуле $\\text{HCl}$?',hint:'равна числу атомов H',unit:'',a:1,ex:'Хлор соединён с 1 атомом H → валентность I.'},
     {q:'Какова формула оксида алюминия (Al — III, O — II)?',opts:['AlO','Al₂O₃','AlO₂','Al₃O₂'],a:1,ex:'НОК(3,2)=6 → индексы 2 и 3 → Al₂O₃.'}
+  ],
+  p10:[
+    {q:'Что НЕ является признаком химической реакции?',opts:['Изменение цвета','Выделение газа','Образование осадка','Изменение формы предмета'],a:3,ex:'Изменение формы — физическое изменение, не признак реакции.'},
+    {q:'Таяние льда — это явление…',opts:['Химическое','Физическое','Реакция','Горение'],a:1,ex:'Вода не превращается в другое вещество — физическое явление.'},
+    {q:'Ржавление железа — это явление…',opts:['Физическое','Химическое','Растворение','Плавление'],a:1,ex:'Образуется новое вещество (ржавчина) — химическое явление.'},
+    {q:'Появление резкого запаха при горении серы — это…',opts:['Признак химической реакции','Физическое изменение','Не имеет значения','Изменение формы'],a:0,ex:'Образовался новый газ — признак реакции.'}
+  ],
+  p11:[
+    {q:'Закон сохранения массы означает, что…',opts:['Масса всегда растёт','Масса реагентов равна массе продуктов','Атомы исчезают','Масса уменьшается'],a:1,ex:'Атомы не исчезают — масса сохраняется.'},
+    {q:'При реакции $4$ г водорода с $32$ г кислорода сколько граммов воды образуется?',hint:'$4+32$',unit:'г',a:36,ex:'$4+32=36$ г.'},
+    {q:'Сожгли $12$ г углерода, получили $44$ г $\\text{CO}_2$. Сколько граммов кислорода вступило?',hint:'$44-12$',unit:'г',a:32,ex:'$44-12=32$ г.'},
+    {q:'Кто открыл закон сохранения массы веществ?',opts:['Д. И. Менделеев','М. В. Ломоносов','И. Ньютон','Архимед'],a:1,ex:'М. В. Ломоносов (и позже А. Лавуазье).'}
+  ],
+  p12:[
+    {q:'В уравнении $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$ коэффициент перед $\\text{H}_2\\text{O}$ равен…',hint:'смотри на воду',unit:'',a:2,ex:'Коэффициент 2.'},
+    {q:'Что можно изменять при уравнивании реакции?',opts:['Только индексы','Только коэффициенты','И индексы, и коэффициенты','Ничего'],a:1,ex:'Уравнивают только коэффициентами.'},
+    {q:'В уравнении $3\\text{Fe}+2\\text{O}_2=\\text{Fe}_3\\text{O}_4$ коэффициент перед $\\text{Fe}$ равен…',hint:'железо слева',unit:'',a:3,ex:'Коэффициент 3.'},
+    {q:'Если в реакции 2 атома фосфора, сколько их должно быть в продуктах?',hint:'закон сохранения',unit:'',a:2,ex:'Столько же — атомы не исчезают.'}
+  ],
+  final1:[
+    {q:'$M_r(\\text{H}_2\\text{SO}_4)=?$',hint:'$2+32+64$',unit:'',a:98,ex:'$98$.'},
+    {q:'Валентность серы в $\\text{SO}_2$ (кислород — II)?',hint:'$2\\cdot\\text{II}$',unit:'',a:4,ex:'IV.'},
+    {q:'Коэффициент перед $\\text{H}_2$ в $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$?',hint:'',unit:'',a:2,ex:'2.'},
+    {q:'Сколько атомов кислорода в формуле $\\text{Fe}_3\\text{O}_4$?',hint:'индекс при O',unit:'',a:4,ex:'4.'},
+    {q:'$\\text{N}_2$ — простое или сложное вещество?',opts:['Простое','Сложное'],a:0,ex:'Один элемент — простое.'},
+    {q:'Сожгли $4$ г серы, получили $8$ г $\\text{SO}_2$. Сколько граммов кислорода вступило?',hint:'$8-4$',unit:'г',a:4,ex:'$8-4=4$ г.'}
   ]
 };
 
@@ -367,6 +405,82 @@ function build_p9(){
   wireReadBtn('p9');
 }
 
+function build_p10(){
+  document.getElementById('p10-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 10 · Химия 7</div><h2>Явления физические и химические. Признаки химических реакций</h2>'
+    +'<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','Физические и химические явления','§10','<p>При <b>физическом явлении</b> вещество не превращается в другое — меняются лишь форма, размеры или состояние (таяние льда, испарение воды, измельчение мела).</p>'
+      +'<div class="def-box">При <b>химическом явлении (реакции)</b> из одних веществ образуются <b>другие</b> вещества с новыми свойствами (горение, ржавление, скисание молока).</div>')
+    +makeCard('rule','Признаки химических реакций','§10','<p>О том, что произошла химическая реакция, судят по <b>признакам</b>:</p>'
+      +'<ul><li>изменение цвета;</li><li>выделение газа (пузырьки);</li><li>образование или растворение осадка;</li><li>появление запаха;</li><li>выделение или поглощение тепла и света.</li></ul>')
+    +makeCard('example','Нагревание малахита',null,'<p>Зелёный порошок малахита при нагревании чернеет (образуется $\\text{CuO}$) и выделяет газы. Видны сразу два признака — изменение цвета и выделение газа.</p>')
+    +wgt('Детектор признаков реакции','<div id="p10-signs"></div>')
+    +rememberBox(['Физическое явление — вещество остаётся тем же.','Химическая реакция — образуются новые вещества.','Признаки реакции: цвет, газ, осадок, запах, тепло/свет.'])
+    +qList(['Приведи примеры физического и химического явлений.','Какие признаки реакции наблюдаются при горении?','Почему ржавление железа — химическое явление?'])
+    +secNav('p9','lo1')+readButton('p10');
+  wireReadBtn('p10');
+}
+
+function build_lo1(){
+  document.getElementById('lo1-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">Лабораторный опыт 1</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="lo1-signs"></div>')
+    +secNav('p10','p11')+readButton('lo1');
+  wireReadBtn('lo1');
+}
+
+function build_p11(){
+  document.getElementById('p11-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 11 · Химия 7</div><h2>Закон сохранения массы веществ. Химические уравнения</h2>'
+    +'<div class="ph-formula">$m_{реагентов}=m_{продуктов}$</div>'
+    +'<div class="ph-desc">Почему масса веществ в реакции не меняется и как это записывают уравнением.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">закон сохранения</span><span class="ph-tag">уравнение</span></div></div>'
+    +makeCard('theory','Закон сохранения массы','§11','<div class="def-box"><b>Закон сохранения массы:</b> масса веществ, вступивших в реакцию, равна массе веществ, образовавшихся в результате реакции. Открыт М. В. Ломоносовым и подтверждён А. Лавуазье.</div>'
+      +'<p>Причина проста: атомы в реакции не исчезают и не появляются — они лишь по-новому соединяются. Поэтому их общее число (и масса) сохраняется.</p>')
+    +makeCard('example','Химическое уравнение',null,'<p>Реакцию записывают <b>уравнением</b>: слева — реагенты, справа — продукты. Например: $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$. Число атомов каждого элемента слева и справа одинаково.</p>')
+    +wgt('Весы сохранения массы','<div id="p11-bal"></div>')
+    +rememberBox(['Масса реагентов = масса продуктов.','Атомы лишь перегруппировываются, их число сохраняется.','Реакцию записывают химическим уравнением.'])
+    +qList(['Сформулируй закон сохранения массы.','Почему масса не изменяется в ходе реакции?','При сжигании 12 г угля в кислороде получили 44 г углекислого газа. Сколько кислорода вступило в реакцию?'])
+    +secNav('lo1','p12')+readButton('p11');
+  wireReadBtn('p11');
+}
+
+function build_p12(){
+  document.getElementById('p12-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 12 · Химия 7</div><h2>Составление уравнений химических реакций</h2>'
+    +'<div class="ph-formula">подбор коэффициентов</div>'
+    +'<div class="ph-desc">Как уравнять реакцию, чтобы число атомов слева и справа совпало.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">коэффициенты</span><span class="ph-tag">баланс</span></div></div>'
+    +makeCard('rule','Как уравнять реакцию','§12','<ol><li>Записать формулы реагентов и продуктов.</li><li>Подобрать <b>коэффициенты</b> (числа перед формулами) так, чтобы число атомов каждого элемента слева и справа стало одинаковым.</li><li>Проверить баланс по каждому элементу.</li></ol>'
+      +'<div class="def-box">Менять <b>индексы</b> внутри формул нельзя — это изменило бы сами вещества. Уравнивают только <b>коэффициентами</b>.</div>')
+    +makeCard('example','Горение водорода',null,'<div class="exa-step">$\\text{H}_2+\\text{O}_2 \\to$ ? Ставим коэффициенты: $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$. Слева и справа: 4 атома H и 2 атома O.</div>')
+    +'<div class="flag-card"><div class="flag-title">Балансировщик: расставь коэффициенты</div><div class="flag-help">Подбери коэффициенты так, чтобы число атомов каждого элемента совпало слева и справа.</div>'
+      +'<div class="fld" style="gap:6px"><label>Реакция</label><select id="p12-pick"><option value="H2 + O2 -> H2O|2,1,2">H₂ + O₂ → H₂O</option><option value="P + O2 -> P2O5|4,5,2">P + O₂ → P₂O₅</option><option value="Fe + O2 -> Fe3O4|3,2,1">Fe + O₂ → Fe₃O₄</option><option value="CH4 + O2 -> CO2 + H2O|1,2,1,2">CH₄ + O₂ → CO₂ + H₂O</option></select></div><div id="p12-mount"></div></div>'
+    +rememberBox(['Уравнивают только коэффициентами.','Индексы в формулах не трогают.','После расстановки проверь число атомов каждого элемента.'])
+    +qList(['Почему при уравнивании нельзя менять индексы?','Уравняй реакцию $\\text{P}+\\text{O}_2\\to\\text{P}_2\\text{O}_5$.','Что показывает коэффициент перед формулой?'])
+    +secNav('p11','final1')+readButton('p12');
+  wireReadBtn('p12');
+}
+
+function build_final1(){
+  document.getElementById('final1-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">Финал главы 1</div><h2>Босс: первоначальные химические понятия</h2>'
+    +'<div class="ph-formula">вещество · атом · формула · $M_r$ · валентность · уравнение</div>'
+    +'<div class="ph-desc">Шесть интегрированных задач на всё, что изучено в главе. Реши все — получи звание «Мастер первоначальных понятий».</div></div>'
+    +makeCard('rule','Шпаргалка главы 1',null,'<ul>'
+      +'<li><b>Тело</b> — предмет, <b>вещество</b> — из чего он сделан; смеси разделяют по различию свойств.</li>'
+      +'<li><b>Атом</b> — мельчайшая частица; <b>элемент</b> — атомы с одинаковым $Z$; $A_r$ — относительная атомная масса.</li>'
+      +'<li><b>Простое</b> вещество — 1 элемент, <b>сложное</b> — разные; <b>формула</b> показывает состав.</li>'
+      +'<li>$M_r=\\sum A_r$; <b>валентность</b>: H — I, O — II; формула — по НОК валентностей.</li>'
+      +'<li>Признаки реакции: цвет, газ, осадок, запах, тепло; <b>масса сохраняется</b>; уравнивают <b>коэффициентами</b>.</li></ul>')
+    +'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши задачи ниже — за каждую +5 XP, за полный разгром босса — звание и бонус.</p>'
+    +secNav('p12',null);
+}
+
 /* заглушки для ещё не наполненных § (фазы — следующие волны) */
 (function(){
   var P = window.PARAS, B = {};
@@ -399,6 +513,11 @@ window.BUILDERS.p6 = build_p6;
 window.BUILDERS.p7 = build_p7;
 window.BUILDERS.p8 = build_p8;
 window.BUILDERS.p9 = build_p9;
+window.BUILDERS.p10 = build_p10;
+window.BUILDERS.lo1 = build_lo1;
+window.BUILDERS.p11 = build_p11;
+window.BUILDERS.p12 = build_p12;
+window.BUILDERS.final1 = build_final1;
 </script>
 
 </body>