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
@@ -26,6 +26,7 @@ function buildPage(file) {
|
|||||||
'/js/chem7_ch1_widgets.js': readF('frontend/js/chem7_ch1_widgets.js'),
|
'/js/chem7_ch1_widgets.js': readF('frontend/js/chem7_ch1_widgets.js'),
|
||||||
'/js/chem7_ch2_widgets.js': readF('frontend/js/chem7_ch2_widgets.js'),
|
'/js/chem7_ch2_widgets.js': readF('frontend/js/chem7_ch2_widgets.js'),
|
||||||
'/js/chem7_ch3_widgets.js': readF('frontend/js/chem7_ch3_widgets.js'),
|
'/js/chem7_ch3_widgets.js': readF('frontend/js/chem7_ch3_widgets.js'),
|
||||||
|
'/js/chem7_ch4_widgets.js': readF('frontend/js/chem7_ch4_widgets.js'),
|
||||||
'/js/chem8_engine.js': readF('frontend/js/chem8_engine.js')
|
'/js/chem8_engine.js': readF('frontend/js/chem8_engine.js')
|
||||||
};
|
};
|
||||||
html = html
|
html = html
|
||||||
@@ -191,6 +192,25 @@ test('ch3 Волна 2: §21 + ЛО4 + §22 + ПР3 + финал главы мо
|
|||||||
assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
|
assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('ch4: вся глава 4 (§23–§26 + ЛО5 + ПР4 + финал) монтируется', async () => {
|
||||||
|
const { doc, errors } = await loadDom('chemistry_7_ch4.html');
|
||||||
|
assert.ok(doc.querySelector('#p23-water #p23-pick'), 'разложение/реакции воды §23');
|
||||||
|
doc.defaultView.goTo('p24'); await wait(100);
|
||||||
|
assert.ok(doc.querySelector('#p24-bld #p24-m'), 'конструктор оснований §24');
|
||||||
|
assert.ok(doc.querySelector('#p24-ind #p24-ind-sel'), 'индикаторы щёлочи §24');
|
||||||
|
doc.defaultView.goTo('lo5'); await wait(100);
|
||||||
|
assert.ok(doc.querySelector('#lo5-ind #lo5-ind-sel'), 'индикаторы ЛО5');
|
||||||
|
doc.defaultView.goTo('p25'); await wait(100);
|
||||||
|
assert.ok(doc.querySelector('#p25-neu #p25-neu-go'), 'нейтрализация §25');
|
||||||
|
doc.defaultView.goTo('pr4'); await wait(100);
|
||||||
|
assert.ok(doc.querySelector('#pr4-neu #pr4-neu-go'), 'нейтрализация ПР4');
|
||||||
|
doc.defaultView.goTo('p26'); await wait(100);
|
||||||
|
assert.ok(doc.querySelector('#p26-eco .eco-it'), 'экология §26');
|
||||||
|
doc.defaultView.goTo('final4'); await wait(120);
|
||||||
|
assert.ok(doc.querySelectorAll('#navDotsfinal4 .nav-dot').length >= 6, 'боссы финала главы 4');
|
||||||
|
assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
|
||||||
|
});
|
||||||
|
|
||||||
/* ── Хаб: каталог глав + финал курса ── */
|
/* ── Хаб: каталог глав + финал курса ── */
|
||||||
function buildHub() {
|
function buildHub() {
|
||||||
let html = readF('frontend/textbooks/chemistry_7_hub.html');
|
let html = readF('frontend/textbooks/chemistry_7_hub.html');
|
||||||
|
|||||||
@@ -0,0 +1,145 @@
|
|||||||
|
/* chem7_ch4_widgets.js — интерактивы главы 4 «Вода» (Химия 7).
|
||||||
|
* Монтируются движком chem8_engine.js: window.CHEM8_WIDGETS[id].
|
||||||
|
* Используют window.Chem8 (chem8_svg.js): chemEq, formula.
|
||||||
|
* Без эмоджи; KaTeX — через window.chem8RenderMath.
|
||||||
|
*/
|
||||||
|
(function (W) {
|
||||||
|
'use strict';
|
||||||
|
function C() { return W.Chem8 || {}; }
|
||||||
|
function $(id) { return document.getElementById(id); }
|
||||||
|
function esc(s){ return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
||||||
|
function gcd(a, b) { return b ? gcd(b, a % b) : a; }
|
||||||
|
function ceq(src, opts){ return C().chemEq ? C().chemEq(src, opts || {}) : esc(src); }
|
||||||
|
function fml(s){ return C().formula ? C().formula(s) : s; }
|
||||||
|
function strip(color){ return '<div style="width:120px;height:32px;border-radius:8px;border:1.5px solid var(--border);background:'+color+';display:inline-block;vertical-align:middle"></div>'; }
|
||||||
|
|
||||||
|
/* §23 — разложение воды (2:1) + реакции воды */
|
||||||
|
var WRX = [
|
||||||
|
{ name:'Разложение электрическим током', eq:'2H2O = 2H2^ + O2^', cond:'эл. ток', note:'Вода разлагается на простые вещества: водорода получается вдвое больше по объёму, чем кислорода (2 : 1).' },
|
||||||
|
{ name:'Реакция с натрием', eq:'2Na + 2H2O = 2NaOH + H2^', note:'Активные металлы реагируют с водой, образуя щёлочь и водород.' },
|
||||||
|
{ name:'Реакция с оксидом кальция', eq:'CaO + H2O = Ca(OH)2', note:'Оксиды активных металлов с водой дают основания.' },
|
||||||
|
{ name:'Реакция с углекислым газом', eq:'CO2 + H2O = H2CO3', note:'Оксиды неметаллов с водой дают кислоты.' }
|
||||||
|
];
|
||||||
|
function decompSvg(){
|
||||||
|
// две перевёрнутые пробирки: H2 (заполнена на 2/2), O2 (на 1/2)
|
||||||
|
return '<svg viewBox="0 0 220 140" width="100%" style="max-width:240px">'
|
||||||
|
+ '<rect x="40" y="20" width="34" height="90" rx="6" fill="#dbeafe" stroke="#93c5fd"/>'
|
||||||
|
+ '<rect x="40" y="20" width="34" height="74" rx="6" fill="#bfdbfe"/>'
|
||||||
|
+ '<text x="57" y="125" text-anchor="middle" font-size="13" font-weight="700" fill="#1d4ed8">H₂</text>'
|
||||||
|
+ '<text x="57" y="58" text-anchor="middle" font-size="11" fill="#1e3a8a">2 V</text>'
|
||||||
|
+ '<rect x="146" y="20" width="34" height="90" rx="6" fill="#fee2e2" stroke="#fca5a5"/>'
|
||||||
|
+ '<rect x="146" y="65" width="34" height="45" rx="6" fill="#fecaca"/>'
|
||||||
|
+ '<text x="163" y="125" text-anchor="middle" font-size="13" font-weight="700" fill="#b91c1c">O₂</text>'
|
||||||
|
+ '<text x="163" y="90" text-anchor="middle" font-size="11" fill="#7f1d1d">1 V</text>'
|
||||||
|
+ '<rect x="20" y="110" width="180" height="12" rx="4" fill="#60a5fa"/>'
|
||||||
|
+ '</svg>';
|
||||||
|
}
|
||||||
|
function mount_p23() {
|
||||||
|
var m = $('p23-water'); if (!m || m._built) return; m._built = 1;
|
||||||
|
var idx = 0;
|
||||||
|
function render(){
|
||||||
|
var r = WRX[idx];
|
||||||
|
m.innerHTML = (idx===0 ? decompSvg() : '')
|
||||||
|
+ '<div class="fld"><label>Реакция воды</label><select id="p23-pick">'
|
||||||
|
+ WRX.map(function(x,i){ return '<option value="'+i+'"'+(i===idx?' selected':'')+'>'+esc(x.name)+'</option>'; }).join('') + '</select></div>'
|
||||||
|
+ '<div class="out ok" style="margin-top:8px"><div style="font-size:1.05rem">'+ceq(r.eq,{cond:r.cond})+'</div>'
|
||||||
|
+ '<div style="font-size:.86rem;color:var(--muted);margin-top:6px">'+esc(r.note)+'</div></div>';
|
||||||
|
$('p23-pick').addEventListener('change', function(e){ idx=+e.target.value; m._built=0; render(); });
|
||||||
|
}
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* индикаторы в щёлочи */
|
||||||
|
var ALK_IND = {
|
||||||
|
'Лакмус': { neutral:['#7c3aed','фиолетовый'], alk:['#2563eb','синий'] },
|
||||||
|
'Фенолфталеин': { neutral:['#f3f4f6','бесцветный'], alk:['#db2777','малиновый'] },
|
||||||
|
'Метилоранж': { neutral:['#f59e0b','оранжевый'], alk:['#eab308','жёлтый'] }
|
||||||
|
};
|
||||||
|
function alkIndicator(mountId) {
|
||||||
|
var m = $(mountId); if (!m || m._built) return; m._built = 1;
|
||||||
|
var ind = 'Фенолфталеин';
|
||||||
|
function render(){
|
||||||
|
var c = ALK_IND[ind];
|
||||||
|
m.innerHTML = '<div class="fld"><label>Индикатор</label><select id="'+mountId+'-sel">'
|
||||||
|
+ Object.keys(ALK_IND).map(function(k){ return '<option'+(k===ind?' selected':'')+'>'+k+'</option>'; }).join('') + '</select></div>'
|
||||||
|
+ '<div class="out ok" style="margin-top:8px">В нейтральной среде: ' + strip(c.neutral[0]) + ' <b>'+c.neutral[1]+'</b><br>'
|
||||||
|
+ 'В щёлочи: ' + strip(c.alk[0]) + ' <b>'+c.alk[1]+'</b></div>';
|
||||||
|
$(mountId+'-sel').addEventListener('change', function(e){ ind=e.target.value; m._built=0; render(); });
|
||||||
|
}
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* §24 — конструктор оснований Me(OH)n + индикаторы */
|
||||||
|
var BM = [ ['Na',1], ['K',1], ['Ca',2], ['Mg',2], ['Cu',2], ['Al',3], ['Fe',3] ];
|
||||||
|
var SOLUBLE = { Na:1, K:1, Ca:1 };
|
||||||
|
function mount_p24() {
|
||||||
|
var b = $('p24-bld');
|
||||||
|
if (b && !b._built) { b._built = 1;
|
||||||
|
function rom(n){ return ['','I','II','III'][n]; }
|
||||||
|
b.innerHTML = '<div class="fld"><label>Металл</label><select id="p24-m">'
|
||||||
|
+ BM.map(function(e,i){ return '<option value="'+i+'"'+(e[0]==='Na'?' selected':'')+'>'+e[0]+' ('+rom(e[1])+')</option>'; }).join('') + '</select> + гидроксогруппа OH (I)</div><div class="out" id="p24-out"></div>';
|
||||||
|
function upd(){
|
||||||
|
var e=BM[+$('p24-m').value], n=e[1];
|
||||||
|
var raw = e[0] + (n>1 ? '(OH)'+n : 'OH');
|
||||||
|
var sol = SOLUBLE[e[0]] ? 'щёлочь (растворимое основание)' : 'нерастворимое основание';
|
||||||
|
var out=$('p24-out'); out.className='out ok';
|
||||||
|
out.innerHTML='<span class="bd">Валентность '+e[0]+' = '+rom(n)+', OH = I → '+n+' группы OH<br>Формула основания: <b style="font-size:1.15rem">'+fml(raw)+'</b><br>Это '+sol+'.</span>';
|
||||||
|
}
|
||||||
|
$('p24-m').addEventListener('change',upd); upd();
|
||||||
|
}
|
||||||
|
alkIndicator('p24-ind');
|
||||||
|
}
|
||||||
|
function mount_lo5() { alkIndicator('lo5-ind'); }
|
||||||
|
|
||||||
|
/* §25 / ПР4 — нейтрализация (фенолфталеин малиновый → бесцветный) */
|
||||||
|
function mount_neutral(mountId) {
|
||||||
|
var m = $(mountId); if (!m || m._built) return; m._built = 1;
|
||||||
|
var done = false;
|
||||||
|
function beaker(color){ return '<svg viewBox="0 0 80 90" width="70" style="vertical-align:middle"><path d="M20 10 h40 v30 l14 38 a6 6 0 0 1-6 8 H12 a6 6 0 0 1-6-8 l14-38 Z" fill="none" stroke="var(--muted)" stroke-width="2"/><path d="M16 52 h48 l8 22 a4 4 0 0 1-4 5 H12 a4 4 0 0 1-4-5 Z" fill="'+color+'"/></svg>'; }
|
||||||
|
function render(){
|
||||||
|
m.innerHTML = '<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">' + beaker(done?'#f8fafc':'#db2777')
|
||||||
|
+ '<div>'+(done
|
||||||
|
? 'Раствор стал <b>бесцветным</b> — кислота нейтрализовала щёлочь. Реакция завершена.'
|
||||||
|
: 'В щёлочи с фенолфталеином раствор <b>малиновый</b>. Добавляй кислоту по каплям.')+'</div></div>'
|
||||||
|
+ '<div class="fld" style="margin-top:8px"><button class="btn primary" id="'+mountId+'-go">'+(done?'Сбросить':'Добавить кислоту')+'</button></div>'
|
||||||
|
+ (done ? '<div class="out ok" style="margin-top:8px"><div style="font-size:1.05rem">'+ceq('HCl + NaOH = NaCl + H2O')+'</div><div style="font-size:.84rem;color:var(--muted);margin-top:4px">Кислота + основание → соль + вода. Это реакция <b>нейтрализации</b>.</div></div>' : '');
|
||||||
|
$(mountId+'-go').addEventListener('click', function(){ done=!done; m._built=0; render(); });
|
||||||
|
}
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
function mount_p25() { mount_neutral('p25-neu'); }
|
||||||
|
function mount_pr4() { mount_neutral('pr4-neu'); }
|
||||||
|
|
||||||
|
/* §26 — охрана воды и воздуха: источники загрязнения и способы охраны */
|
||||||
|
var ECO = {
|
||||||
|
'Источники загрязнения': [
|
||||||
|
['Промышленные выбросы','Газы и пыль из труб заводов загрязняют воздух.'],
|
||||||
|
['Сточные воды','Неочищенные стоки отравляют реки и озёра.'],
|
||||||
|
['Нефть','Разливы нефти губят водные организмы.'],
|
||||||
|
['Кислотные дожди','Оксиды серы и азота в воздухе образуют кислоты, выпадающие с дождём.']
|
||||||
|
],
|
||||||
|
'Способы охраны и очистки': [
|
||||||
|
['Очистные сооружения','Сточные воды очищают перед сбросом.'],
|
||||||
|
['Фильтрование','На водопроводных станциях удаляют твёрдые частицы.'],
|
||||||
|
['Хлорирование и озонирование','Обеззараживают питьевую воду.'],
|
||||||
|
['Бережное отношение','Экономить воду и не загрязнять водоёмы.']
|
||||||
|
]
|
||||||
|
};
|
||||||
|
function mount_p26() {
|
||||||
|
var m = $('p26-eco'); if (!m || m._built) return; m._built = 1;
|
||||||
|
var cols = Object.keys(ECO).map(function(title){
|
||||||
|
var items = ECO[title].map(function(it,i){ return '<button class="eco-it btn" data-t="'+esc(title)+'" data-i="'+i+'" style="display:block;width:100%;text-align:left;margin:4px 0">'+esc(it[0])+'</button>'; }).join('');
|
||||||
|
return '<div style="flex:1;min-width:200px"><div style="font-weight:700;margin-bottom:6px">'+esc(title)+'</div>'+items+'</div>';
|
||||||
|
}).join('');
|
||||||
|
m.innerHTML = '<div style="display:flex;gap:14px;flex-wrap:wrap">'+cols+'</div><div class="out" id="p26-eco-out" style="margin-top:8px">Кликни по пункту, чтобы узнать подробнее.</div>';
|
||||||
|
var out=$('p26-eco-out');
|
||||||
|
m.querySelectorAll('.eco-it').forEach(function(b){
|
||||||
|
b.addEventListener('click', function(){ var it=ECO[b.dataset.t][+b.dataset.i]; out.className='out ok'; out.innerHTML='<b>'+esc(it[0])+'.</b> '+esc(it[1]); });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
W.CHEM8_WIDGETS = Object.assign(W.CHEM8_WIDGETS || {}, {
|
||||||
|
p23: mount_p23, p24: mount_p24, lo5: mount_lo5, p25: mount_p25, pr4: mount_pr4, p26: mount_p26
|
||||||
|
});
|
||||||
|
W.FLAG_MOUNTS = Object.assign(W.FLAG_MOUNTS || {}, {});
|
||||||
|
})(window);
|
||||||
@@ -17,6 +17,7 @@
|
|||||||
<script src="/js/biochem-core.js" defer></script>
|
<script src="/js/biochem-core.js" defer></script>
|
||||||
<script src="/js/chem8_svg.js" defer></script>
|
<script src="/js/chem8_svg.js" defer></script>
|
||||||
<script src="/js/chem7_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>
|
<script src="/js/chem8_engine.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -86,30 +87,196 @@ window.PARAS = [
|
|||||||
{id:'final4', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
|
{id:'final4', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
|
||||||
];
|
];
|
||||||
|
|
||||||
window.ACH_LABELS = { start:'Начало главы 4!', final4_tasks:'Глава 4 пройдена!' };
|
window.ACH_LABELS = { start:'Начало главы 4!', p23_done:'§23 изучен!', p24_done:'§24 изучен!',
|
||||||
window.SIDEBARS = { p23:{ title:'Глава 4 · Химия 7', rows:[['Раздел','Вода'],['§§','23–26'],['Лаб/ПР','ЛО 5 · ПР 4']] } };
|
lo5_done:'Лабораторный опыт 5 выполнен!', p25_done:'§25 изучен!', pr4_done:'Практическая работа 4 выполнена!',
|
||||||
window.TIPS = [{ sec:'p23', html:'Глава наполняется содержанием по фазам. Сейчас доступны навигация по параграфам и отметка о прочтении (+10 XP).' }];
|
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:[['§§23–26','вода'],['Награда','ачивка + 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(){
|
(function(){
|
||||||
var P = window.PARAS, B = {};
|
var P = window.PARAS, B = {};
|
||||||
function ph(p, prev, next){
|
function ph(p, prev, next){
|
||||||
return function(){
|
return function(){
|
||||||
var el = document.getElementById(p.id + '-body'); if (!el) return;
|
var el = document.getElementById(p.id + '-body'); if (!el) return;
|
||||||
el.innerHTML =
|
el.innerHTML = '<div class="para-hero"><div class="ph-label">' + p.num + ' · Химия 7</div><h2>' + p.name + '</h2></div>'
|
||||||
'<div class="para-hero"><div class="ph-label">' + p.num + ' · Химия 7</div><h2>' + p.name + '</h2>'
|
+ makeCard('theory', p.name, p.num, '<p>Содержание готовится.</p>')
|
||||||
+ '<div class="ph-desc">Содержание этого ' + (p.final ? 'раздела' : 'параграфа') + ' готовится.</div></div>'
|
|
||||||
+ makeCard('theory', p.name, p.num,
|
|
||||||
'<p>Скоро здесь появятся теория, наглядные SVG-схемы, молекулярные модели и интерактивные тренажёры по теме «' + p.name + '». Пока доступна навигация по главе' + (p.final ? '.' : ' и отметка о прочтении.') + '</p>')
|
|
||||||
+ secNav(prev, next) + (p.final ? '' : readButton(p.id));
|
+ secNav(prev, next) + (p.final ? '' : readButton(p.id));
|
||||||
if (!p.final) wireReadBtn(p.id);
|
if (!p.final) wireReadBtn(p.id);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
for (var i = 0; i < P.length; i++) {
|
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);
|
||||||
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 = 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>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user