/* 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 '' + '' + '' + 'H₂' + '2 V' + '' + '' + 'O₂' + '1 V' + '' + ''; } function mount_p23() { var m = $('p23-water'); if (!m || m._built) return; m._built = 1; var idx = 0, anims = []; function stopAnim(){ anims.forEach(function(a){ try { a.stop(); } catch(e){} }); anims = []; } function render(){ stopAnim(); var r = WRX[idx]; m.innerHTML = (idx===0 ? decompSvg() + '
H₂ — 2 объёма
' + '
O₂ — 1 объём
' : '') + '
' + '
'+ceq(r.eq,{cond:r.cond})+'
' + '
'+esc(r.note)+'
'; if (idx===0 && W.Chem7Anim) { anims.push(W.Chem7Anim.bubbleField($('p23-bub-h'), { color:'rgba(96,165,250,.9)', count:18, h:84, bg:'linear-gradient(180deg,#dbeafe,transparent)' })); anims.push(W.Chem7Anim.bubbleField($('p23-bub-o'), { color:'rgba(248,113,113,.9)', count:9, h:84, bg:'linear-gradient(180deg,#fee2e2,transparent)' })); } $('p23-pick').addEventListener('change', function(e){ idx=+e.target.value; 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 = 'Фенолфталеин', anim = null; function render(){ if (anim) { anim.stop(); anim = null; } var c = ALK_IND[ind]; m.innerHTML = '
' + '
' + '
В нейтральной среде: ' + strip(c.neutral[0]) + ' '+c.neutral[1]+'
' + 'В щёлочи: ' + strip(c.alk[0]) + ' '+c.alk[1]+'
'; if (W.Chem7Anim) anim = W.Chem7Anim.colorBlock($(mountId+'-drop'), c.neutral[0], c.alk[0], ind + ' в щёлочи → ' + c.alk[1], 900); $(mountId+'-sel').addEventListener('change', function(e){ ind=e.target.value; 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, anim = null; function render(){ if (anim) { anim.stop(); anim = null; } m.innerHTML = '
' + '
'+(done ? 'Раствор стал бесцветным — кислота нейтрализовала щёлочь. Реакция завершена.' : 'В щёлочи с фенолфталеином раствор малиновый. Добавляй кислоту по каплям.')+'
' + '
' + (done ? '
'+ceq('HCl + NaOH = NaCl + H2O')+'
Кислота + основание → соль + вода. Это реакция нейтрализации.
' : ''); if (W.Chem7Anim) anim = done ? W.Chem7Anim.colorBlock($(mountId+'-cup'), '#db2777', '#f8fafc', 'малиновый → бесцветный', 1600) : W.Chem7Anim.colorBlock($(mountId+'-cup'), '#db2777', '#db2777', 'щёлочь + фенолфталеин', 1); $(mountId+'-go').addEventListener('click', function(){ done=!done; 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 '
'+esc(title)+'
'+items+'
'; }).join(''); m.innerHTML = '
'+cols+'
Кликни по пункту, чтобы узнать подробнее.
'; 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=''+esc(it[0])+'. '+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);