feat(chemistry7): Phase 1 Волна 2 — Глава 1, §§4–6

§4 Относительная атомная масса (весы атомов: во сколько раз тяжелее),
§5 Молекулы и простые вещества (галерея молекул O2/O3/H2/N2 шариками),
§6 Сложные вещества (классификатор простое/сложное + галерея H2O/CO2/CH4/NH3).
Теория, тренажёры задач. Тест: 8/8 pass.

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

frontend/textbooks/chemistry_7_ch1.html

@@ -104,18 +104,25 @@ window.PARAS = [
 ];
 
 window.ACH_LABELS = { start:'Начало главы 1!', p1_done:'§1 изучен!', p2_done:'§2 изучен!',
-  pr1_done:'Практическая работа 1 выполнена!', p3_done:'§3 изучен!', final1_tasks:'Глава 1 пройдена!' };
+  pr1_done:'Практическая работа 1 выполнена!', p3_done:'§3 изучен!',
+  p4_done:'§4 изучен!', p5_done:'§5 изучен!', p6_done:'§6 изучен!', final1_tasks:'Глава 1 пройдена!' };
 window.SIDEBARS = {
   p1:{ title:'Шпаргалка §1', rows:[['Вещество','то, из чего состоит тело'],['Тело','предмет из вещества'],['Свойства','цвет, запах, плотность, $t_{пл}$…']] },
   p2:{ title:'Шпаргалка §2', rows:[['Чистое','постоянный состав'],['Смесь','2+ вещества'],['Разделение','по различию свойств']] },
   pr1:{ title:'Практическая 1', rows:[['Цель','разделить смесь'],['Соль+песок','раствор → фильтр → выпаривание'],['ТБ','аккуратно с нагревом']] },
-  p3:{ title:'Шпаргалка §3', rows:[['Атом','мельчайшая частица'],['Элемент','атомы с одинаковым $Z$'],['Символ','H, O, Fe, Cu…']] }
+  p3:{ title:'Шпаргалка §3', rows:[['Атом','мельчайшая частица'],['Элемент','атомы с одинаковым $Z$'],['Символ','H, O, Fe, Cu…']] },
+  p4:{ title:'Шпаргалка §4', rows:[['$A_r$','во сколько раз тяжелее'],['Эталон','$1/12$ массы $^{12}$C'],['Пример','$A_r(\\text{O})=16$']] },
+  p5:{ title:'Шпаргалка §5', rows:[['Молекула','частица из атомов'],['Простое','1 элемент: $O_2$, $H_2$'],['Атомность','$O_2$, $O_3$']] },
+  p6:{ title:'Шпаргалка §6', rows:[['Сложное','разные элементы'],['Примеры','$H_2O$, $CO_2$, $NH_3$'],['Состав','можно разложить']] }
 };
 window.TIPS = [
   { sec:'p1', html:'Тело — это <b>предмет</b> (гвоздь, стакан), а вещество — <b>то, из чего</b> он сделан (железо, стекло). Из одного вещества можно сделать много тел.' },
   { sec:'p2', html:'Способ разделения подбирают по тому, <b>чем различаются</b> вещества смеси: растворимостью, магнитными свойствами, температурой кипения, плотностью.' },
   { sec:'pr1', html:'Соль растворяется в воде, а песок — нет. Сначала отфильтруй песок, потом выпари воду — на дне останется соль.' },
-  { sec:'p3', html:'Химический элемент определяется <b>зарядом ядра</b> (числом протонов) — это и есть порядковый номер $Z$.' }
+  { sec:'p3', html:'Химический элемент определяется <b>зарядом ядра</b> (числом протонов) — это и есть порядковый номер $Z$.' },
+  { sec:'p4', html:'$A_r$ показывает, во сколько раз масса атома больше $1/12$ массы атома углерода-12. $A_r(\\text{H})=1$, $A_r(\\text{O})=16$, $A_r(\\text{Fe})=56$.' },
+  { sec:'p5', html:'<b>Простое</b> вещество — атомы одного элемента ($O_2$, $Fe$). Кислород $O_2$ и озон $O_3$ — разные простые вещества одного и того же элемента.' },
+  { sec:'p6', html:'<b>Сложное</b> вещество образовано атомами <b>разных</b> элементов ($H_2O$ — водород и кислород) и может быть разложено на простые.' }
 ];
 
 /* ── задачи (тренажёр) ── */
@@ -137,6 +144,24 @@ window.POOLS = {
     {q:'Химический элемент — это…',opts:['Любая частица','Вид атомов с одинаковым зарядом ядра','Молекула','Смесь атомов'],a:1,ex:'Элемент определяется зарядом ядра (числом протонов).'},
     {q:'Каков порядковый номер $Z$ кислорода?',hint:'число протонов в ядре',unit:'',a:8,ex:'У кислорода Z = 8.'},
     {q:'Какой символ у железа?',opts:['Fe','Ir','F','Zn'],a:0,ex:'Железо — Fe (от лат. ferrum).'}
+  ],
+  p4:[
+    {q:'Что показывает относительная атомная масса $A_r$?',opts:['Массу атома в граммах','Во сколько раз масса атома больше $1/12$ массы атома $^{12}$C','Число протонов','Число молекул'],a:1,ex:'$A_r$ — сравнение массы атома с $1/12$ массы атома углерода-12.'},
+    {q:'$A_r(\\text{S})=32$, $A_r(\\text{O})=16$. Во сколько раз атом серы тяжелее атома кислорода?',hint:'$32/16$',unit:'раза',a:2,ex:'$32/16=2$.'},
+    {q:'$A_r(\\text{Mg})=24$, $A_r(\\text{C})=12$. Во сколько раз атом магния тяжелее атома углерода?',hint:'$24/12$',unit:'раза',a:2,ex:'$24/12=2$.'},
+    {q:'Относительная атомная масса $A_r$…',opts:['Измеряется в граммах','Безразмерна','Измеряется в литрах','Равна числу нейтронов'],a:1,ex:'$A_r$ — безразмерная величина сравнения.'}
+  ],
+  p5:[
+    {q:'Молекула $\\text{O}_2$ образует…',opts:['Сложное вещество','Простое вещество','Смесь','Раствор'],a:1,ex:'Атомы одного элемента — простое вещество.'},
+    {q:'Простое вещество — это вещество, образованное…',opts:['Атомами одного элемента','Атомами разных элементов','Только молекулами','Только смесями'],a:0,ex:'Простое — один вид атомов.'},
+    {q:'Кислород $\\text{O}_2$ и озон $\\text{O}_3$ — это…',opts:['Одно и то же вещество','Разные простые вещества одного элемента','Сложные вещества','Смесь газов'],a:1,ex:'Один элемент — кислород, но разные простые вещества.'},
+    {q:'Сколько атомов в молекуле озона $\\text{O}_3$?',hint:'смотри индекс',unit:'',a:3,ex:'Озон $O_3$ — три атома кислорода.'}
+  ],
+  p6:[
+    {q:'Вода $\\text{H}_2\\text{O}$ — это…',opts:['Простое вещество','Сложное вещество','Смесь','Атом'],a:1,ex:'Атомы разных элементов (H и O) — сложное вещество.'},
+    {q:'Сложное вещество образовано…',opts:['Атомами одного элемента','Атомами разных элементов','Только смесью','Одним атомом'],a:1,ex:'Сложное — разные элементы.'},
+    {q:'Какое из веществ — простое?',opts:['$\\text{H}_2\\text{O}$','$\\text{CO}_2$','$\\text{N}_2$','$\\text{NH}_3$'],a:2,ex:'$N_2$ — один элемент (азот).'},
+    {q:'Сколько разных химических элементов в молекуле метана $\\text{CH}_4$?',hint:'углерод и водород',unit:'',a:2,ex:'C и H — два элемента.'}
   ]
 };
 
@@ -217,6 +242,54 @@ function build_p3(){
   wireReadBtn('p3');
 }
 
+function build_p4(){
+  document.getElementById('p4-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 4 · Химия 7</div><h2>Относительная атомная масса химических элементов</h2>'
+    +'<div class="ph-formula">$A_r(\\text{O}) = 16$</div>'
+    +'<div class="ph-desc">Как сравнивают массы атомов, которые невозможно взвесить по отдельности.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">$A_r$</span><span class="ph-tag">а.е.м.</span></div></div>'
+    +makeCard('theory','Зачем нужна относительная масса','§4','<p>Атомы очень малы, их масса в граммах — крошечное число, с которым неудобно работать. Поэтому массы атомов <b>сравнивают</b> между собой. За единицу принята $\\tfrac{1}{12}$ массы атома углерода-12 — это <b>атомная единица массы</b> (а.е.м.).</p>')
+    +makeCard('rule','Относительная атомная масса','§4','<div class="def-box"><b>Относительная атомная масса</b> $A_r$ показывает, во сколько раз масса атома больше $\\tfrac{1}{12}$ массы атома углерода-12. Это <b>безразмерная</b> величина.</div>'
+      +'<p>Значения $A_r$ берут из периодической таблицы: $A_r(\\text{H})=1$, $A_r(\\text{C})=12$, $A_r(\\text{O})=16$, $A_r(\\text{S})=32$, $A_r(\\text{Fe})=56$.</p>')
+    +makeCard('example','Сравнение масс атомов',null,'<p>Во сколько раз атом серы тяжелее атома кислорода?</p><div class="exa-step">$\\dfrac{A_r(\\text{S})}{A_r(\\text{O})}=\\dfrac{32}{16}=2$ раза.</div>')
+    +wgt('Весы атомов: во сколько раз тяжелее','<div id="p4-bal"></div>')
+    +rememberBox(['$A_r$ — безразмерная величина.','Эталон — $1/12$ массы атома углерода-12.','Значения $A_r$ берут из периодической таблицы.'])
+    +qList(['Что принято за атомную единицу массы?','Во сколько раз атом магния ($A_r=24$) тяжелее атома углерода ($A_r=12$)?','Почему $A_r$ не имеет единиц измерения?'])
+    +secNav('p3','p5')+readButton('p4');
+  wireReadBtn('p4');
+}
+
+function build_p5(){
+  document.getElementById('p5-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 5 · Химия 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','Молекулы','§5','<p><b>Молекула</b> — частица, состоящая из нескольких атомов, соединённых вместе. Многие вещества состоят из молекул: кислород — из молекул $\\text{O}_2$, вода — из молекул $\\text{H}_2\\text{O}$.</p>')
+    +makeCard('theory','Простые вещества','§5','<div class="def-box"><b>Простое вещество</b> образовано атомами <b>одного</b> химического элемента: $\\text{O}_2$, $\\text{H}_2$, $\\text{N}_2$, а также металлы — железо $\\text{Fe}$, медь $\\text{Cu}$.</div>'
+      +'<p>Один элемент может образовать <b>несколько</b> простых веществ. Например, элемент кислород образует кислород $\\text{O}_2$ и озон $\\text{O}_3$ — это разные простые вещества.</p>')
+    +wgt('Молекулы простых веществ','<div id="p5-gal"></div>')
+    +rememberBox(['Молекула — частица из нескольких атомов.','Простое вещество — атомы одного элемента.','Один элемент может давать разные простые вещества ($O_2$ и $O_3$).'])
+    +qList(['Что такое молекула? Приведи пример.','Чем простое вещество отличается от химического элемента?','Назови два простых вещества, образованных элементом кислород.'])
+    +secNav('p4','p6')+readButton('p5');
+  wireReadBtn('p5');
+}
+
+function build_p6(){
+  document.getElementById('p6-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 6 · Химия 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','Сложные вещества','§6','<div class="def-box"><b>Сложное вещество</b> образовано атомами <b>разных</b> химических элементов: вода $\\text{H}_2\\text{O}$ (водород и кислород), углекислый газ $\\text{CO}_2$, метан $\\text{CH}_4$, аммиак $\\text{NH}_3$.</div>'
+      +'<p>Сложные вещества можно <b>разложить</b> на простые. Например, при разложении воды получаются простые вещества — водород и кислород.</p>')
+    +makeCard('example','Простое или сложное?',null,'<p>$\\text{N}_2$ — атомы только азота → <b>простое</b>. $\\text{NH}_3$ — атомы азота и водорода → <b>сложное</b>.</p>')
+    +wgt('Распредели: простое или сложное вещество?','<div id="p6-cls"></div>')
+    +wgt('Молекулы сложных веществ','<div id="p6-gal"></div>')
+    +rememberBox(['Сложное вещество — атомы разных элементов.','Сложные вещества можно разложить на простые.','Число элементов в формуле подскажет: 1 — простое, 2+ — сложное.'])
+    +qList(['Чем сложное вещество отличается от простого?','Из каких элементов состоит углекислый газ $\\text{CO}_2$?','Приведи пример разложения сложного вещества на простые.'])
+    +secNav('p5','p7')+readButton('p6');
+  wireReadBtn('p6');
+}
+
 /* заглушки для ещё не наполненных § (фазы — следующие волны) */
 (function(){
   var P = window.PARAS, B = {};
@@ -243,6 +316,9 @@ window.BUILDERS.p1 = build_p1;
 window.BUILDERS.p2 = build_p2;
 window.BUILDERS.pr1 = build_pr1;
 window.BUILDERS.p3 = build_p3;
+window.BUILDERS.p4 = build_p4;
+window.BUILDERS.p5 = build_p5;
+window.BUILDERS.p6 = build_p6;
 </script>
 
 </body>