/* 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 = '
' + '
' + esc(g.g) + ' ' + (g.heavier?'тяжелее':'легче') + ' воздуха.
Способы собирания:
' + g.ways.map(function(w){ return '✓ ' + esc(w); }).join('
') + '
'; $('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]]) ) + '
'; $('p14-el').addEventListener('click',function(){mode='el';m._built=0;render();}); $('p14-o2').addEventListener('click',function(){mode='o2';m._built=0;render();}); $('p14-o3').addEventListener('click',function(){mode='o3';m._built=0;render();}); } render(); } /* §15 — симулятор горения: вещество + O₂ → оксид */ var FUELS = [ { el:'C', name:'углерод', eq:'C + O2 = CO2', flame:'#f97316', sparks:false, note:'горит с образованием углекислого газа' }, { el:'S', name:'сера', eq:'S + O2 = SO2', flame:'#3b82f6', sparks:false, note:'горит синим пламенем, резкий запах' }, { el:'P', name:'фосфор', eq:'4P + 5O2 = 2P2O5', flame:'#fde68a', sparks:false, note:'горит ярко, с белым дымом' }, { el:'Fe', name:'железо', eq:'3Fe + 2O2 = Fe3O4', flame:'#f59e0b', sparks:true, note:'горит, разбрасывая искры' }, { el:'Mg', name:'магний', eq:'2Mg + O2 = 2MgO', flame:'#e0f2fe', sparks:true, note:'горит ослепительно ярким пламенем' } ]; function flame(){ return ''; } function mount_p15() { var m = $('p15-burn'); if (!m || m._built) return; m._built = 1; var idx = 0, anim = null; function stopAnim() { if (anim) { anim.stop(); anim = null; } } function render(){ stopAnim(); m.innerHTML = '
' + '
' + '
' + '
Выбери вещество и подожги его в кислороде.
'; $('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 '
'+esc(items[k].t)+(ok?' ✓':' ✗')+'
'; }).join('') || '
сюда…
'; return '
'+b[0]+'
'+cells+'
'; }).join(''); mount.innerHTML = '
'+chips+'
'+cols+'
'; mount.querySelectorAll('.c7-chip').forEach(function(b){ b.addEventListener('click',function(){ mount.querySelectorAll('.c7-chip').forEach(function(x){x.style.outline='';}); sel=+b.dataset.i; b.style.outline='2px solid var(--pri)'; }); }); mount.querySelectorAll('.c7-bucket').forEach(function(col){ col.addEventListener('click',function(){ if(sel==null)return; placed[sel]=+col.dataset.b; pool=pool.filter(function(x){return x!==sel;}); sel=null; render(); }); }); } render(); }; W.CHEM8_WIDGETS = Object.assign(W.CHEM8_WIDGETS || {}, { p13: mount_p13, lo2: mount_lo2, p14: mount_p14, p15: mount_p15, p16: mount_p16, p17: mount_p17, pr2: mount_pr2 }); W.FLAG_MOUNTS = Object.assign(W.FLAG_MOUNTS || {}, {}); })(window);