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>
This commit is contained in:
Maxim Dolgolyov
2026-05-30 19:04:49 +03:00
parent 1635bc6051
commit 7574d16678
3 changed files with 344 additions and 12 deletions
+179 -12
View File
@@ -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:[['Раздел','Вода'],['§§','2326'],['Лаб/ПР','ЛО 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:[['§§2326','вода'],['Награда','ачивка + 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>