From f7d27ecb91050f954efee89d45a29cfeab2b8f71 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Sat, 30 May 2026 18:26:17 +0300 Subject: [PATCH] =?UTF-8?q?feat(chemistry7):=20Phase=201=20=D0=92=D0=BE?= =?UTF-8?q?=D0=BB=D0=BD=D0=B0=202=20=E2=80=94=20=D0=93=D0=BB=D0=B0=D0=B2?= =?UTF-8?q?=D0=B0=201,=20=C2=A7=C2=A74=E2=80=936?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit §4 Относительная атомная масса (весы атомов: во сколько раз тяжелее), §5 Молекулы и простые вещества (галерея молекул O2/O3/H2/N2 шариками), §6 Сложные вещества (классификатор простое/сложное + галерея H2O/CO2/CH4/NH3). Теория, тренажёры задач. Тест: 8/8 pass. Co-Authored-By: Claude Opus 4.8 (1M context) --- backend/tests/chemistry7-page.test.js | 12 ++++ frontend/js/chem7_ch1_widgets.js | 84 ++++++++++++++++++++++++- frontend/textbooks/chemistry_7_ch1.html | 82 +++++++++++++++++++++++- 3 files changed, 174 insertions(+), 4 deletions(-) diff --git a/backend/tests/chemistry7-page.test.js b/backend/tests/chemistry7-page.test.js index c34fb1d..c2ead93 100644 --- a/backend/tests/chemistry7-page.test.js +++ b/backend/tests/chemistry7-page.test.js @@ -83,6 +83,18 @@ test('ch1 Волна 1: интерактивы §1–§3 + ПР1 монтиру assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); }); +test('ch1 Волна 2: интерактивы §4–§6 монтируются без ошибок', async () => { + const { doc, errors } = await loadDom('chemistry_7_ch1.html'); + doc.defaultView.goTo('p4'); await wait(100); + assert.ok(doc.querySelector('#p4-bal #p4-a'), 'весы атомов §4'); + doc.defaultView.goTo('p5'); await wait(100); + assert.ok(doc.querySelector('#p5-gal svg'), 'галерея молекул §5'); + doc.defaultView.goTo('p6'); await wait(100); + assert.ok(doc.querySelector('#p6-cls .c7-chip'), 'классификатор простое/сложное §6'); + assert.ok(doc.querySelector('#p6-gal svg'), 'галерея сложных веществ §6'); + assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); +}); + test('ch1: переход к §9 и финалу строит заглушку без ошибок', async () => { const { doc, errors } = await loadDom('chemistry_7_ch1.html'); doc.defaultView.goTo('p9'); await wait(80); diff --git a/frontend/js/chem7_ch1_widgets.js b/frontend/js/chem7_ch1_widgets.js index b435934..3fdcf6a 100644 --- a/frontend/js/chem7_ch1_widgets.js +++ b/frontend/js/chem7_ch1_widgets.js @@ -154,8 +154,90 @@ } } + /* ── Волна 2 ── */ + + /* §4 — «весы атомов»: во сколько раз один атом тяжелее другого */ + var ABEL = ['H','C','N','O','Na','Mg','Al','S','Cl','Ca','Fe','Cu','Zn','Ag']; + function mount_p4() { + var m = $('p4-bal'); if (!m || m._built) return; m._built = 1; + function opts(sel){ return ABEL.map(function(e){ var ar=C().arOf?C().arOf(e):''; return ''; }).join(''); } + m.innerHTML = '
' + +'
'; + function upd(){ + var a=$('p4-a').value, b=$('p4-b').value, ara=+C().arOf(a), arb=+C().arOf(b); + var out=$('p4-out'); + if(!ara||!arb){ out.textContent='—'; return; } + var big=Math.max(ara,arb), sm=Math.min(ara,arb), k=big/sm; + var heavier=ara>=arb?a:b, lighter=ara>=arb?b:a; + out.className='out ok'; + out.innerHTML='A_r('+a+')='+ara+', A_r('+b+')='+arb+'
' + +(ara===arb?('Атомы '+a+' и '+b+' имеют одинаковую массу.') + :('Атом '+heavier+' тяжелее атома '+lighter+' в '+(Math.round(k*100)/100).toString().replace('.',',')+' раз.'))+''; + } + $('p4-a').addEventListener('change',upd); $('p4-b').addEventListener('change',upd); upd(); + } + + /* рисуем молекулу как набор шариков-атомов */ + var COL = { H:'#cbd5e1', O:'#ef4444', N:'#3b82f6', C:'#334155', S:'#eab308', Cl:'#22c55e', Fe:'#b45309', Na:'#a78bfa' }; + var RAD = { H:11, O:16, N:15, C:16, S:18, Cl:17, Fe:18, Na:17 }; + function molBalls(atoms) { + // atoms: [[el,n],...]; рисуем в ряд + var balls = [], cx = 26; + atoms.forEach(function(pair){ for(var i=0;i' + + ''+el+''; + x += r + 8; + }); + return ''+svg+''; + } + function molCard(name, formula, atoms, note) { + return '
' + +'
'+esc(name)+' · '+(C().formula?C().formula(formula):formula)+'
' + + molBalls(atoms) + +'
'+esc(note)+'
'; + } + + /* §5 — галерея простых веществ */ + function mount_p5() { + var m = $('p5-gal'); if (!m || m._built) return; m._built = 1; + m.innerHTML = '
' + + molCard('Водород','H2',[['H',2]],'2 атома H — двухатомная молекула') + + molCard('Кислород','O2',[['O',2]],'2 атома O') + + molCard('Озон','O3',[['O',3]],'3 атома O — тоже простое вещество') + + molCard('Азот','N2',[['N',2]],'2 атома N') + + '
Во всех молекулах — атомы одного элемента → это простые вещества. Кислород $\\text{O}_2$ и озон $\\text{O}_3$ образованы одним элементом, но это разные простые вещества.
'; + if (W.chem8RenderMath) try { W.chem8RenderMath(m); } catch(e){} + } + + /* §6 — классификатор простое/сложное + галерея сложных веществ */ + function mount_p6() { + var c = $('p6-cls'); + if (c) classifier(c, { + buckets: ['Простое вещество', 'Сложное вещество'], + items: [ + { t:'O₂', b:0 }, { t:'H₂O', b:1 }, { t:'Fe', b:0 }, { t:'CO₂', b:1 }, + { t:'N₂', b:0 }, { t:'NH₃', b:1 }, { t:'S', b:0 }, { t:'CH₄', b:1 } + ] + }); + var g = $('p6-gal'); + if (g && !g._built) { g._built = 1; + g.innerHTML = '
' + + molCard('Вода','H2O',[['O',1],['H',2]],'2 элемента: H и O') + + molCard('Углекислый газ','CO2',[['C',1],['O',2]],'2 элемента: C и O') + + molCard('Метан','CH4',[['C',1],['H',4]],'2 элемента: C и H') + + molCard('Аммиак','NH3',[['N',1],['H',3]],'2 элемента: N и H') + + '
В каждой молекуле — атомы разных элементов → это сложные вещества.
'; + if (W.chem8RenderMath) try { W.chem8RenderMath(g); } catch(e){} + } + } + W.CHEM8_WIDGETS = Object.assign(W.CHEM8_WIDGETS || {}, { - p1: mount_p1, p2: mount_p2, pr1: mount_pr1, p3: mount_p3 + p1: mount_p1, p2: mount_p2, pr1: mount_pr1, p3: mount_p3, + p4: mount_p4, p5: mount_p5, p6: mount_p6 }); W.FLAG_MOUNTS = Object.assign(W.FLAG_MOUNTS || {}, {}); })(window); diff --git a/frontend/textbooks/chemistry_7_ch1.html b/frontend/textbooks/chemistry_7_ch1.html index baa8e3e..1e48637 100644 --- a/frontend/textbooks/chemistry_7_ch1.html +++ b/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:'Тело — это предмет (гвоздь, стакан), а вещество — то, из чего он сделан (железо, стекло). Из одного вещества можно сделать много тел.' }, { sec:'p2', html:'Способ разделения подбирают по тому, чем различаются вещества смеси: растворимостью, магнитными свойствами, температурой кипения, плотностью.' }, { sec:'pr1', html:'Соль растворяется в воде, а песок — нет. Сначала отфильтруй песок, потом выпари воду — на дне останется соль.' }, - { sec:'p3', html:'Химический элемент определяется зарядом ядра (числом протонов) — это и есть порядковый номер $Z$.' } + { sec:'p3', html:'Химический элемент определяется зарядом ядра (числом протонов) — это и есть порядковый номер $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:'Простое вещество — атомы одного элемента ($O_2$, $Fe$). Кислород $O_2$ и озон $O_3$ — разные простые вещества одного и того же элемента.' }, + { sec:'p6', html:'Сложное вещество образовано атомами разных элементов ($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 = + '
§ 4 · Химия 7

Относительная атомная масса химических элементов

' + +'
$A_r(\\text{O}) = 16$
' + +'
Как сравнивают массы атомов, которые невозможно взвесить по отдельности.
' + +'
$A_r$а.е.м.
' + +makeCard('theory','Зачем нужна относительная масса','§4','

Атомы очень малы, их масса в граммах — крошечное число, с которым неудобно работать. Поэтому массы атомов сравнивают между собой. За единицу принята $\\tfrac{1}{12}$ массы атома углерода-12 — это атомная единица массы (а.е.м.).

') + +makeCard('rule','Относительная атомная масса','§4','
Относительная атомная масса $A_r$ показывает, во сколько раз масса атома больше $\\tfrac{1}{12}$ массы атома углерода-12. Это безразмерная величина.
' + +'

Значения $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$.

') + +makeCard('example','Сравнение масс атомов',null,'

Во сколько раз атом серы тяжелее атома кислорода?

$\\dfrac{A_r(\\text{S})}{A_r(\\text{O})}=\\dfrac{32}{16}=2$ раза.
') + +wgt('Весы атомов: во сколько раз тяжелее','
') + +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 = + '
§ 5 · Химия 7

Молекулы. Простые вещества

' + +'
Из чего состоят вещества и какие вещества называют простыми.
' + +'
молекулапростое вещество
' + +makeCard('theory','Молекулы','§5','

Молекула — частица, состоящая из нескольких атомов, соединённых вместе. Многие вещества состоят из молекул: кислород — из молекул $\\text{O}_2$, вода — из молекул $\\text{H}_2\\text{O}$.

') + +makeCard('theory','Простые вещества','§5','
Простое вещество образовано атомами одного химического элемента: $\\text{O}_2$, $\\text{H}_2$, $\\text{N}_2$, а также металлы — железо $\\text{Fe}$, медь $\\text{Cu}$.
' + +'

Один элемент может образовать несколько простых веществ. Например, элемент кислород образует кислород $\\text{O}_2$ и озон $\\text{O}_3$ — это разные простые вещества.

') + +wgt('Молекулы простых веществ','
') + +rememberBox(['Молекула — частица из нескольких атомов.','Простое вещество — атомы одного элемента.','Один элемент может давать разные простые вещества ($O_2$ и $O_3$).']) + +qList(['Что такое молекула? Приведи пример.','Чем простое вещество отличается от химического элемента?','Назови два простых вещества, образованных элементом кислород.']) + +secNav('p4','p6')+readButton('p5'); + wireReadBtn('p5'); +} + +function build_p6(){ + document.getElementById('p6-body').innerHTML = + '
§ 6 · Химия 7

Сложные вещества

' + +'
Какие вещества называют сложными и чем они отличаются от простых.
' + +'
сложное веществосостав
' + +makeCard('theory','Сложные вещества','§6','
Сложное вещество образовано атомами разных химических элементов: вода $\\text{H}_2\\text{O}$ (водород и кислород), углекислый газ $\\text{CO}_2$, метан $\\text{CH}_4$, аммиак $\\text{NH}_3$.
' + +'

Сложные вещества можно разложить на простые. Например, при разложении воды получаются простые вещества — водород и кислород.

') + +makeCard('example','Простое или сложное?',null,'

$\\text{N}_2$ — атомы только азота → простое. $\\text{NH}_3$ — атомы азота и водорода → сложное.

') + +wgt('Распредели: простое или сложное вещество?','
') + +wgt('Молекулы сложных веществ','
') + +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;