/* chem7_ch2_widgets.js — интерактивы главы 2 «Кислород» (Химия 7).
* Монтируются движком chem8_engine.js: window.CHEM8_WIDGETS[id] / window.FLAG_MOUNTS[id].
* Используют window.Chem8 (chem8_svg.js): chemEq, formula, molarMass, arOf.
* Без эмоджи; 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); }
var COL = { H:'#cbd5e1', O:'#ef4444', N:'#3b82f6', C:'#334155', S:'#eab308', P:'#f97316', Fe:'#b45309', Mg:'#22c55e', Cu:'#ea580c' };
function ball(el, x, r){
return ''
+ ''+el+'';
}
function molSvg(atoms){ // atoms: [['O',2]]
var list=[]; atoms.forEach(function(p){ for(var i=0;i
'+svg+'';
}
/* §13 — состав воздуха (стопочная полоса с кликом) */
var AIR = [
{ g:'Азот N₂', p:78, c:'#3b82f6', note:'не поддерживает горение и дыхание' },
{ g:'Кислород O₂', p:21, c:'#ef4444', note:'нужен для дыхания и горения' },
{ g:'Другие газы (Ar, CO₂…)', p:1, c:'#94a3b8', note:'аргон, углекислый газ и др. — около 1 %' }
];
function mount_p13() {
var m = $('p13-air'); if (!m || m._built) return; m._built = 1;
var bar = AIR.map(function (a, i) {
return '
' + a.p + '%
';
}).join('');
m.innerHTML = '
' + bar + '
'
+ '
Кликни по части диаграммы, чтобы узнать о газе.
';
var out = $('p13-air-out');
m.querySelectorAll('.air-seg').forEach(function (s) {
s.addEventListener('click', function () {
var a = AIR[+s.dataset.i]; out.className = 'out ok';
out.innerHTML = '' + esc(a.g) + ' — около ' + a.p + ' % воздуха. ' + esc(a.note) + '.';
});
});
}
/* ЛО2 — выбор способа собирания газа */
var GASES = [
{ g:'Кислород O₂', heavier:true, ways:['вытеснением воды', 'в сосуд отверстием вверх (тяжелее воздуха)'] },
{ g:'Водород H₂', heavier:false, ways:['вытеснением воды', 'в сосуд отверстием вниз (легче воздуха)'] },
{ g:'Углекислый газ CO₂', heavier:true, ways:['в сосуд отверстием вверх (тяжелее воздуха)'] }
];
function mount_lo2() {
var m = $('lo2-coll'); if (!m || m._built) return; m._built = 1;
var idx = 0;
function render(){
var g = GASES[idx];
m.innerHTML = ''
+ '
';
$('lo2-pick').addEventListener('change', function(e){ idx=+e.target.value; m._built=0; render(); });
}
render();
}
/* §14 — кислород: элемент или простое вещество + модели O₂ / O₃ */
function mount_p14() {
var m = $('p14-tog'); if (!m || m._built) return; m._built = 1;
var mode = 'el';
function render(){
m.innerHTML = '
'
+ ''
+ '
'
+ '
' + (
mode==='el' ? 'Кислород — химический элемент (символ O, Z = 8, A_r = 16). Так говорят, когда речь о атомах кислорода в составе веществ (например, в воде H₂O).'
: mode==='o2' ? 'Кислород — простое вещество O₂: молекула из двух атомов. Газ без цвета и запаха, немного тяжелее воздуха.' + molSvg([['O',2]])
: 'Озон O₃: молекула из трёх атомов кислорода — другое простое вещество того же элемента.' + molSvg([['O',3]])
) + '
';
$('p15-pick').addEventListener('change', function(e){ idx=+e.target.value; render(); });
$('p15-go').addEventListener('click', function(){
var f = FUELS[idx], out = $('p15-out');
stopAnim();
if (W.Chem7Anim) anim = W.Chem7Anim.flameBox($('p15-stage'), { color: f.flame, sparks: f.sparks });
out.className='out ok';
out.innerHTML = '' + esc(f.name[0].toUpperCase()+f.name.slice(1)) + ' горит в кислороде: ' + esc(f.note) + '. '
+ '
' + ceq(f.eq) + '
'
+ '
Продукт — оксид (соединение элемента с кислородом).
';
});
}
render();
}
/* §16 — конструктор оксида (элемент + валентность, кислород II) + классификатор */
var OXEL = [ ['Na',1], ['Ca',2], ['Mg',2], ['Cu',2], ['Zn',2], ['Al',3], ['C',4], ['S',4], ['P',5] ];
function mount_p16() {
var b = $('p16-bld');
if (b && !b._built) { b._built = 1;
b.innerHTML = '
+ кислород (O, II)
';
function rom(n){ return ['','I','II','III','IV','V'][n]; }
function upd(){
var e = OXEL[+$('p16-el').value], lcm = e[1]*2/gcd(e[1],2), ix=lcm/e[1], iy=lcm/2;
var raw = e[0] + (ix>1?ix:'') + 'O' + (iy>1?iy:'');
var out=$('p16-out'); out.className='out ok';
out.innerHTML = 'Валентности: '+e[0]+' = '+rom(e[1])+', O = II; НОК = '+lcm+' Формула оксида: '+(C().formula?C().formula(raw):raw)+'';
}
$('p16-el').addEventListener('change',upd); upd();
}
var cl = $('p16-cls');
if (cl && W.Chem7Classify) W.Chem7Classify(cl);
}
/* §17 — схема получения кислорода + роль катализатора */
var PROD = [
{ name:'Разложение перманганата калия (при нагревании)', eq:'2KMnO4 = K2MnO4 + MnO2 + O2^', cond:'t°', note:'Реакция разложения: из одного вещества — несколько. Идёт при нагревании.' },
{ name:'Разложение пероксида водорода (катализатор MnO₂)', eq:'2H2O2 = 2H2O + O2^', cond:'MnO₂', note:'MnO₂ — катализатор: ускоряет реакцию, но сам в ней не расходуется.' }
];
function mount_p17() {
var m = $('p17-prod'); if (!m || m._built) return; m._built = 1;
var idx = 0;
function render(){
var p = PROD[idx];
m.innerHTML = ''
+ '
' + ceq(p.eq, {cond:p.cond}) + '
'
+ '
' + esc(p.note) + '
';
$('p17-pick').addEventListener('change', function(e){ idx=+e.target.value; m._built=0; render(); });
}
render();
}
/* ПР2 — проверка кислорода тлеющей лучинкой */
function mount_pr2() {
var m = $('pr2-test'); if (!m || m._built) return; m._built = 1;
m.innerHTML = '
Как доказать, что собранный газ — кислород?
';
$('pr2-go').addEventListener('click', function(){
var out=$('pr2-out'); out.className='out ok';
out.innerHTML = flame() + ' Тлеющая лучинка ярко вспыхивает — значит, газ поддерживает горение. Это кислород.';
});
}
/* классификатор «оксид / не оксид» (используется в §16) */
W.Chem7Classify = function(mount){
if (!mount || mount._built) return; mount._built = 1;
var items = [ {t:'CuO',ox:1}, {t:'NaCl',ox:0}, {t:'CO₂',ox:1}, {t:'H₂SO₄',ox:0}, {t:'Fe₂O₃',ox:1}, {t:'HCl',ox:0}, {t:'SO₂',ox:1}, {t:'CaO',ox:1} ];
var pool = items.map(function(_,i){return i;}), placed={}, sel=null;
function render(){
var chips = pool.map(function(i){ return ''; }).join('') || 'Готово.';
var cols = [['Оксид',1],['Не оксид',0]].map(function(b){
var inb = Object.keys(placed).filter(function(k){return placed[k]===b[1];});
var cells = inb.map(function(k){ var ok=items[k].ox===b[1]; return '