/* 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,'>'); }
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 '
'; }
/* §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 '';
}
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() : '')
+ ''
+ '
'+ceq(r.eq,{cond:r.cond})+'
'
+ '
'+esc(r.note)+'
';
$('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 = ''
+ '
';
$(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 = '
+ гидроксогруппа OH (I)
';
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='Валентность '+e[0]+' = '+rom(n)+', OH = I → '+n+' группы OH Формула основания: '+fml(raw)+' Это '+sol+'.';
}
$('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 ''; }
function render(){
m.innerHTML = '
' + beaker(done?'#f8fafc':'#db2777')
+ '
'+(done
? 'Раствор стал бесцветным — кислота нейтрализовала щёлочь. Реакция завершена.'
: 'В щёлочи с фенолфталеином раствор малиновый. Добавляй кислоту по каплям.')+'
'
+ ''
+ (done ? '
'+ceq('HCl + NaOH = NaCl + H2O')+'
Кислота + основание → соль + вода. Это реакция нейтрализации.
' : '');
$(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 ''; }).join('');
return '