Learn_System/frontend/js/chem8_ch5_widgets.js

/* chem8_ch5_widgets.js — виджеты Главы 5 «Окислительно-восстановительные реакции».
 * Использует window.Chem8: oxStateCalc.
 */
(function (W) {
  'use strict';
  function C() { return W.Chem8 || {}; }
  function $(id) { return document.getElementById(id); }

  /* §42 — калькулятор степени окисления */
  function mount_p42() { var el = $('c-ox'); if (el && !el._b && C().oxStateCalc) { el._b = 1; C().oxStateCalc(el, { formula: 'H2SO4' }); } }

  /* §44 — пошаговый электронный баланс (преднабор) */
  var R = [
    { eq: '2Mg + O₂ → 2MgO',
      steps: [
        'Степени окисления: Mg⁰, O₂⁰ → Mg⁺², O⁻².',
        'Mg⁰ − 2e⁻ → Mg⁺²  — окисление (Mg — восстановитель).',
        'O₂⁰ + 4e⁻ → 2O⁻²  — восстановление (O₂ — окислитель).',
        'Электронный баланс: отдано 2e⁻ (×2 = 4), принято 4e⁻ → множители 2 и 1.',
        'Коэффициенты: 2Mg + O₂ → 2MgO. ✓'
      ] },
    { eq: 'Fe + CuSO₄ → FeSO₄ + Cu',
      steps: [
        'Меняют с.о. только Fe и Cu: Fe⁰ → Fe⁺², Cu⁺² → Cu⁰.',
        'Fe⁰ − 2e⁻ → Fe⁺²  — окисление (Fe — восстановитель).',
        'Cu⁺² + 2e⁻ → Cu⁰  — восстановление (Cu⁺² — окислитель).',
        'Отдано 2e⁻ = принято 2e⁻ → множители 1 и 1.',
        'Коэффициенты: Fe + CuSO₄ → FeSO₄ + Cu. ✓'
      ] },
    { eq: '2Na + Cl₂ → 2NaCl',
      steps: [
        'Na⁰ и Cl₂⁰ → Na⁺ и Cl⁻.',
        'Na⁰ − 1e⁻ → Na⁺  — окисление (Na — восстановитель).',
        'Cl₂⁰ + 2e⁻ → 2Cl⁻  — восстановление (Cl₂ — окислитель).',
        'Баланс: 1e⁻ ×2 = 2e⁻ → множители 2 и 1.',
        'Коэффициенты: 2Na + Cl₂ → 2NaCl. ✓'
      ] }
  ];
  function mount_p44() {
    var pick = $('c-redox-pick'), out = $('c-redox-out'), bStep = $('c-redox-step'), bAll = $('c-redox-all'); if (!pick || pick._b) return; pick._b = 1;
    R.forEach(function (p, i) { var o = document.createElement('option'); o.value = i; o.textContent = p.eq; pick.appendChild(o); });
    var cur = 0, shown = 0;
    function render() {
      var p = R[cur];
      var html = '<b>' + p.eq + '</b><div style="margin-top:8px">';
      for (var i = 0; i < shown; i++) html += '<div class="def-box" style="margin:6px 0">' + p.steps[i] + '</div>';
      if (shown === 0) html += '<span style="color:var(--muted)">Нажимай «Следующий шаг» — разберём метод электронного баланса.</span>';
      html += '</div>'; out.className = shown >= p.steps.length ? 'out ok' : 'out'; out.innerHTML = html;
    }
    pick.addEventListener('change', function () { cur = +pick.value; shown = 0; render(); });
    bStep.addEventListener('click', function () { if (shown < R[cur].steps.length) { shown++; render(); } });
    bAll.addEventListener('click', function () { shown = R[cur].steps.length; render(); });
    render();
  }
  function mount_final1(){ var el=$('c-concept'); if(el&&!el._b&&C().conceptMap){ el._b=1; C().conceptMap(el,{"nodes":[{"id":"so","t":"Степ. ок.","x":20,"y":55},{"id":"oxi","t":"Окисление","x":170,"y":22},{"id":"red","t":"Восстан.","x":170,"y":95},{"id":"bal","t":"Баланс","x":330,"y":55,"c":"#d97706"}],"edges":[{"f":"so","t":"oxi","label":"с.о. растёт (отдача e⁻)"},{"f":"so","t":"red","label":"с.о. падает (приём e⁻)"},{"f":"oxi","t":"bal","label":"отдано e⁻"},{"f":"red","t":"bal","label":"= принято e⁻"}]}); } }

  W.CHEM8_WIDGETS = { p42: mount_p42 };
  W.FLAG_MOUNTS = { final1: mount_final1, p44: mount_p44 };
})(window);