feat(chemistry7): Phase 3 Волна 2 — Глава 3 завершена (§21, ЛО4, §22, ПР3, финал)
§21 Кислоты и металлы (интерактивный ряд активности), ЛО4 Кислоты с металлами (опыт: пузырьки H2, медь не реагирует), §22 Соли как продукты замещения (конструктор солей по валентности), ПР3 Получение водорода (проверка чистоты — гремучий газ), финал главы (6 интегрированных боссов + шпаргалка). Глава 3 «Водород» наполнена полностью (§§18–22). Тесты chem7: 14/14 pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
@@ -176,6 +176,21 @@ test('ch3 Волна 1: §18 + §19 + §20 + ЛО3 монтируются', asyn
|
||||
assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
|
||||
});
|
||||
|
||||
test('ch3 Волна 2: §21 + ЛО4 + §22 + ПР3 + финал главы монтируются', async () => {
|
||||
const { doc, errors } = await loadDom('chemistry_7_ch3.html');
|
||||
doc.defaultView.goTo('p21'); await wait(100);
|
||||
assert.ok(doc.querySelector('#p21-act .act-cell'), 'ряд активности §21');
|
||||
doc.defaultView.goTo('lo4'); await wait(100);
|
||||
assert.ok(doc.querySelector('#lo4-rx #lo4-go'), 'опыт металл+кислота ЛО4');
|
||||
doc.defaultView.goTo('p22'); await wait(100);
|
||||
assert.ok(doc.querySelector('#p22-salt #p22-m'), 'конструктор солей §22');
|
||||
doc.defaultView.goTo('pr3'); await wait(100);
|
||||
assert.ok(doc.querySelector('#pr3-test #pr3-mix'), 'проверка чистоты H2 ПР3');
|
||||
doc.defaultView.goTo('final3'); await wait(120);
|
||||
assert.ok(doc.querySelectorAll('#navDotsfinal3 .nav-dot').length >= 6, 'боссы финала главы 3');
|
||||
assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
|
||||
});
|
||||
|
||||
/* ── Хаб: каталог глав + финал курса ── */
|
||||
function buildHub() {
|
||||
let html = readF('frontend/textbooks/chemistry_7_hub.html');
|
||||
|
||||
@@ -92,18 +92,30 @@ window.PARAS = [
|
||||
];
|
||||
|
||||
window.ACH_LABELS = { start:'Начало главы 3!', p18_done:'§18 изучен!', p19_done:'§19 изучен!',
|
||||
p20_done:'§20 изучен!', lo3_done:'Лабораторный опыт 3 выполнен!', final3_tasks:'Глава 3 пройдена!' };
|
||||
p20_done:'§20 изучен!', lo3_done:'Лабораторный опыт 3 выполнен!',
|
||||
p21_done:'§21 изучен!', lo4_done:'Лабораторный опыт 4 выполнен!', p22_done:'§22 изучен!', pr3_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:[['Лакмус','красный'],['Метилоранж','розово-красный']] }
|
||||
lo3:{ title:'Лаб. опыт 3', rows:[['Лакмус','красный'],['Метилоранж','розово-красный']] },
|
||||
p21:{ title:'Шпаргалка §21', rows:[['Me + кислота','соль + $H_2\\uparrow$'],['Ряд активности','до $H_2$ — вытесняют'],['Cu, Ag','не реагируют']] },
|
||||
lo4:{ title:'Лаб. опыт 4', rows:[['Zn, Fe, Mg','пузырьки $H_2$'],['Cu','реакции нет']] },
|
||||
p22:{ title:'Шпаргалка §22', rows:[['Соль','металл + остаток'],['Замещение','H на металл'],['Названия','хлорид, сульфат…']] },
|
||||
pr3:{ title:'Практическая 3', rows:[['$Zn+HCl$','$\\to H_2\\uparrow$'],['Чистота','гремучий газ']] },
|
||||
final3:{ title:'Финал главы 3', rows:[['§§18–22','водород'],['Награда','ачивка + XP']] }
|
||||
};
|
||||
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:'В кислоте лакмус становится красным, а метилоранж — розово-красным. Так обнаруживают кислоту.' }
|
||||
{ sec:'lo3', html:'В кислоте лакмус становится красным, а метилоранж — розово-красным. Так обнаруживают кислоту.' },
|
||||
{ sec:'p21', html:'Металл + кислота → соль + водород. Реагируют только металлы, стоящие в <b>ряду активности левее $H_2$</b> (Zn, Fe, Mg). Медь и серебро водород из кислот не вытесняют.' },
|
||||
{ sec:'lo4', html:'Цинк, железо, магний с соляной и серной кислотами дают пузырьки водорода; медь — нет (стоит правее $H_2$).' },
|
||||
{ sec:'p22', html:'<b>Соль</b> = металл + кислотный остаток. Она образуется, когда металл <b>замещает</b> водород в кислоте: $Zn + 2HCl = ZnCl_2 + H_2$.' },
|
||||
{ sec:'pr3', html:'Водород получают реакцией $Zn + HCl$; чистоту проверяют поджиганием (хлопок — нечисто, спокойное горение — чисто).' },
|
||||
{ sec:'final3', html:'Собери всё: водород и его свойства, кислоты и индикаторы, ряд активности, соли как продукты замещения.' }
|
||||
];
|
||||
|
||||
window.POOLS = {
|
||||
@@ -124,6 +136,26 @@ window.POOLS = {
|
||||
{q:'Какого цвета становится лакмус в кислоте?',opts:['Синего','Красного','Зелёного','Жёлтого'],a:1,ex:'Лакмус в кислоте — красный.'},
|
||||
{q:'Какова формула серной кислоты?',opts:['HCl','H₂SO₄','HNO₃','H₂CO₃'],a:1,ex:'Серная кислота — $H_2SO_4$.'},
|
||||
{q:'Индикатор — это вещество, которое…',opts:['Ускоряет реакцию','Меняет цвет в кислоте или щёлочи','Растворяет металлы','Выделяет газ'],a:1,ex:'Индикаторы обнаруживают кислоты и щёлочи по изменению цвета.'}
|
||||
],
|
||||
p21:[
|
||||
{q:'Какой газ выделяется при реакции активного металла с кислотой?',opts:['Кислород','Водород','Углекислый газ','Азот'],a:1,ex:'Металл вытесняет водород: соль + $H_2\\uparrow$.'},
|
||||
{q:'Какой металл НЕ вытесняет водород из соляной кислоты?',opts:['Цинк','Магний','Медь','Железо'],a:2,ex:'Медь стоит правее $H_2$ — не реагирует.'},
|
||||
{q:'Продукты реакции $\\text{Zn}+2\\text{HCl}$ — это…',opts:['$ZnCl_2$ и $H_2$','$ZnO$ и вода','$Zn$ и $Cl_2$','только соль'],a:0,ex:'$Zn+2HCl=ZnCl_2+H_2\\uparrow$.'},
|
||||
{q:'Сколько веществ образуется в реакции $\\text{Zn}+\\text{H}_2\\text{SO}_4=\\text{ZnSO}_4+\\text{H}_2$?',hint:'соль и газ',unit:'',a:2,ex:'Соль и водород — 2 вещества.'}
|
||||
],
|
||||
p22:[
|
||||
{q:'Из чего состоит соль?',opts:['Из водорода и остатка','Из металла и кислотного остатка','Из двух металлов','Из воды и кислоты'],a:1,ex:'Соль = металл + кислотный остаток.'},
|
||||
{q:'Соль $\\text{NaCl}$ — продукт замещения водорода в кислоте…',opts:['$H_2SO_4$','$HCl$','$HNO_3$','$H_2CO_3$'],a:1,ex:'В $HCl$ водород заместился натрием → $NaCl$.'},
|
||||
{q:'Какова формула сульфата натрия?',opts:['NaSO4','Na₂SO₄','Na₂SO₃','NaS'],a:1,ex:'Na(I), $SO_4$(II) → $Na_2SO_4$.'},
|
||||
{q:'Реакция $\\text{Zn}+2\\text{HCl}=\\text{ZnCl}_2+\\text{H}_2$ — это реакция…',opts:['Соединения','Разложения','Замещения','Обмена'],a:2,ex:'Металл замещает водород — реакция замещения.'}
|
||||
],
|
||||
final3:[
|
||||
{q:'$A_r(\\text{H})=?$',hint:'из таблицы',unit:'',a:1,ex:'1.'},
|
||||
{q:'Продукт горения водорода в кислороде — это…',opts:['Вода','Углекислый газ','Оксид меди','Соль'],a:0,ex:'$2H_2+O_2=2H_2O$.'},
|
||||
{q:'Цвет лакмуса в кислоте?',opts:['Синий','Красный','Зелёный','Жёлтый'],a:1,ex:'Красный.'},
|
||||
{q:'Сколько из металлов Mg, Cu, Zn вытесняют водород из кислоты?',hint:'Cu — правее $H_2$',unit:'',a:2,ex:'Mg и Zn → 2.'},
|
||||
{q:'Соль — это…',opts:['Металл + кислород','Металл + кислотный остаток','Водород + остаток','Два неметалла'],a:1,ex:'Металл + кислотный остаток.'},
|
||||
{q:'Формула серной кислоты?',opts:['HCl','H₂SO₄','HNO₃','H₂CO₃'],a:1,ex:'$H_2SO_4$.'}
|
||||
]
|
||||
};
|
||||
|
||||
@@ -198,6 +230,74 @@ function build_lo3(){
|
||||
wireReadBtn('lo3');
|
||||
}
|
||||
|
||||
function build_p21(){
|
||||
document.getElementById('p21-body').innerHTML =
|
||||
'<div class="para-hero"><div class="ph-label">§ 21 · Химия 7</div><h2>Взаимодействие кислот с металлами</h2>'
|
||||
+'<div class="ph-formula">Me $+$ кислота $\\to$ соль $+ \\text{H}_2\\uparrow$</div>'
|
||||
+'<div class="ph-desc">Почему одни металлы вытесняют водород из кислот, а другие нет.</div>'
|
||||
+'<div class="ph-tags"><span class="ph-tag">ряд активности</span><span class="ph-tag">$H_2\\uparrow$</span></div></div>'
|
||||
+makeCard('theory','Реакция металлов с кислотами','§21','<p>Многие металлы реагируют с кислотами, <b>вытесняя водород</b>: образуются соль и газообразный водород. Например: $\\text{Zn}+\\text{H}_2\\text{SO}_4=\\text{ZnSO}_4+\\text{H}_2\\uparrow$, $\\text{Mg}+2\\text{HCl}=\\text{MgCl}_2+\\text{H}_2\\uparrow$.</p>')
|
||||
+makeCard('rule','Ряд активности металлов','§21','<div class="def-box">Металлы расположены в <b>ряд активности</b>. Металлы, стоящие <b>левее водорода</b>, вытесняют его из соляной и серной кислот; стоящие <b>правее</b> (медь, серебро) — не вытесняют.</div>'
|
||||
+'<p>Очень активные металлы (натрий, калий) реагируют с кислотами слишком бурно — для получения водорода берут цинк или железо.</p>')
|
||||
+wgt('Интерактивный ряд активности','<div id="p21-act"></div>')
|
||||
+rememberBox(['Металл + кислота → соль + водород.','Вытесняют водород только металлы левее $H_2$.','Медь и серебро с этими кислотами не реагируют.'])
|
||||
+qList(['Что образуется при реакции металла с кислотой?','Почему медь не реагирует с соляной кислотой?','Запиши уравнение реакции цинка с серной кислотой.'])
|
||||
+secNav('p20','lo4')+readButton('p21');
|
||||
wireReadBtn('p21');
|
||||
}
|
||||
|
||||
function build_lo4(){
|
||||
document.getElementById('lo4-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>Объясни результаты, пользуясь рядом активности металлов.</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="lo4-rx"></div>')
|
||||
+secNav('p21','p22')+readButton('lo4');
|
||||
wireReadBtn('lo4');
|
||||
}
|
||||
|
||||
function build_p22(){
|
||||
document.getElementById('p22-body').innerHTML =
|
||||
'<div class="para-hero"><div class="ph-label">§ 22 · Химия 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','Что такое соли','§22','<div class="def-box"><b>Соли</b> — сложные вещества, состоящие из атомов <b>металла</b> и <b>кислотного остатка</b>.</div>'
|
||||
+'<p>Соли образуются, когда металл <b>замещает</b> водород в кислоте — это <b>реакция замещения</b>: $\\text{Zn}+2\\text{HCl}=\\text{ZnCl}_2+\\text{H}_2$. Названия солей: хлориды ($\\text{NaCl}$), сульфаты ($\\text{Na}_2\\text{SO}_4$), нитраты ($\\text{KNO}_3$), карбонаты ($\\text{CaCO}_3$).</p>')
|
||||
+makeCard('example','Составление формулы соли',null,'<p>Кальций (II) и кислотный остаток $\\text{Cl}$ (I): НОК(2,1)=2 → $\\text{CaCl}_2$. Алюминий (III) и $\\text{SO}_4$ (II): НОК(3,2)=6 → $\\text{Al}_2(\\text{SO}_4)_3$.</p>')
|
||||
+wgt('Конструктор солей','<div id="p22-salt"></div>')
|
||||
+rememberBox(['Соль = металл + кислотный остаток.','Соль образуется при замещении водорода металлом.','Формулу соли составляют по валентности (НОК).'])
|
||||
+qList(['Дай определение соли.','Составь формулу хлорида магния.','Какая реакция называется реакцией замещения?'])
|
||||
+secNav('lo4','pr3')+readButton('p22');
|
||||
wireReadBtn('p22');
|
||||
}
|
||||
|
||||
function build_pr3(){
|
||||
document.getElementById('pr3-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>В пробирку с кусочками цинка прилей соляную кислоту — наблюдай выделение водорода: $\\text{Zn}+2\\text{HCl}=\\text{ZnCl}_2+\\text{H}_2\\uparrow$.</li><li>Собери водород (он легче воздуха — держи сосуд отверстием вниз, или собирай вытеснением воды).</li><li>Проверь чистоту: поднеси к отверстию пламя. Резкий <b>хлопок</b> — водород смешан с воздухом (нечисто); <b>спокойное</b> горение — чистый.</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="pr3-test"></div>')
|
||||
+secNav('p22','final3')+readButton('pr3');
|
||||
wireReadBtn('pr3');
|
||||
}
|
||||
|
||||
function build_final3(){
|
||||
document.getElementById('final3-body').innerHTML =
|
||||
'<div class="para-hero"><div class="ph-label">Финал главы 3</div><h2>Босс: водород</h2>'
|
||||
+'<div class="ph-formula">$H_2$ · кислоты · ряд активности · соли</div>'
|
||||
+'<div class="ph-desc">Шесть задач на всю главу. Реши все — получи звание «Знаток водорода».</div></div>'
|
||||
+makeCard('rule','Шпаргалка главы 3',null,'<ul>'
|
||||
+'<li>$H$ — самый лёгкий элемент; $H_2$ — самый лёгкий газ.</li>'
|
||||
+'<li>Водород горит → вода; восстанавливает металлы из оксидов.</li>'
|
||||
+'<li>Кислота = водород + остаток; индикаторы (лакмус — красный в кислоте).</li>'
|
||||
+'<li>Металл + кислота → соль $+ H_2\\uparrow$ (только левее $H_2$ в ряду активности).</li>'
|
||||
+'<li>Соль = металл + кислотный остаток (продукт замещения).</li></ul>')
|
||||
+'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши задачи ниже — за каждую +5 XP, за полный разгром босса — звание и бонус.</p>'
|
||||
+secNav('pr3',null);
|
||||
}
|
||||
|
||||
/* заглушки для ещё не наполненных § (следующая волна) */
|
||||
(function(){
|
||||
var P = window.PARAS, B = {};
|
||||
@@ -224,6 +324,11 @@ window.BUILDERS.p18 = build_p18;
|
||||
window.BUILDERS.p19 = build_p19;
|
||||
window.BUILDERS.p20 = build_p20;
|
||||
window.BUILDERS.lo3 = build_lo3;
|
||||
window.BUILDERS.p21 = build_p21;
|
||||
window.BUILDERS.lo4 = build_lo4;
|
||||
window.BUILDERS.p22 = build_p22;
|
||||
window.BUILDERS.pr3 = build_pr3;
|
||||
window.BUILDERS.final3 = build_final3;
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user