Кликни по стрелке-переходу — увидишь реакцию-пример.
';
+ var out = host.querySelector('.gm-out');
+ host.querySelectorAll('.gm-edge').forEach(function (ln) {
+ ln.style.cursor = 'pointer';
+ ln.addEventListener('click', function () {
+ host.querySelectorAll('.gm-edge').forEach(function (x) { x.setAttribute('stroke', 'var(--muted,#888)'); x.setAttribute('stroke-width', '2.5'); });
+ ln.setAttribute('stroke', 'var(--pri,#d97706)'); ln.setAttribute('stroke-width', '4');
+ var e = GM_EDGES[+ln.getAttribute('data-i')];
+ out.className = 'out gm-out ok';
+ out.innerHTML = '' + e.d + ' ' + chemEq(e.r) + '';
+ });
+ });
+ return { el: host };
+ }
+
+ /* ──────────────────────────────────────────────────────────────────────────
+ dissociationAnim(mount, {substance}) — анимация растворения/диссоциации:
+ вещество распадается на ионы, окружённые молекулами воды. §47.
+ ────────────────────────────────────────────────────────────────────────── */
+ var DISS = {
+ NaCl: { cat: 'Na⁺', an: 'Cl⁻', cc: '#d97706', ac: '#0891b2' },
+ KCl: { cat: 'K⁺', an: 'Cl⁻', cc: '#7c3aed', ac: '#0891b2' },
+ CuSO4: { cat: 'Cu²⁺', an: 'SO₄²⁻', cc: '#0891b2', ac: '#059669' },
+ HCl: { cat: 'H⁺', an: 'Cl⁻', cc: '#dc2626', ac: '#0891b2' }
+ };
+ function dissociationAnim(mount, opts) {
+ var host = typeof mount === 'string' ? global.document.querySelector(mount) : mount;
+ if (!host) return null;
+ opts = opts || {};
+ var subs = Object.keys(DISS);
+ host.innerHTML = ''
+ + '';
+ var sel = host.querySelector('.ds-sel'), stage = host.querySelector('.ds-stage'), out = host.querySelector('.ds-out');
+ function draw() {
+ var s = sel.value, d = DISS[s];
+ // молекулы воды (фон) + катион + анион, разлетающиеся
+ var water = '';
+ for (var i = 0; i < 7; i++) { var wx = 30 + i * 35, wy = 25 + (i % 3) * 30; water += ''; }
+ stage.innerHTML = '';
+ out.className = 'out ds-out ok';
+ out.innerHTML = '' + formula(s) + ' → ' + d.cat + ' + ' + d.an + ' Молекулы воды окружают ионы и «растаскивают» их (гидратация).';
+ }
+ sel.addEventListener('change', draw); draw();
+ return { el: host };
+ }
+
/* ---- Каркасы-заглушки интерактивных виджетов (реализуются по фазам) ---- */
function notImplemented(name) {
return function () {
@@ -844,11 +932,12 @@
// готово (Phase 6 — ОВР)
oxStateCalc: oxStateCalc, // §42 — калькулятор степени окисления
oxStates: oxStates, // степени окисления (чистая функция)
- // заглушки (см. план, разд. B) — наполняются позже
- redoxBalancer: notImplemented('redoxBalancer'), // §44 — e-баланс ОВР (пошагово в ch5)
- orbitalDiagram: notImplemented('orbitalDiagram'), // §33 — орбитальная диаграмма
- dissociationAnim: notImplemented('dissociationAnim'),// §47 — анимация растворения
- geneticMap: notImplemented('geneticMap') // §22 — генетическая карта-граф классов
+ // готово (Phase 8/U3 — апгрейд)
+ geneticMap: geneticMap, // §22 — генетическая карта-граф классов
+ dissociationAnim: dissociationAnim, // §47 — анимация растворения/диссоциации
+ // редокс-баланс §44 реализован пошагово в chem8_ch5_widgets (преднабор)
+ redoxBalancer: notImplemented('redoxBalancer'),
+ orbitalDiagram: notImplemented('orbitalDiagram') // §33 — покрыто atomShell
};
global.Chem8 = Chem8;
diff --git a/frontend/textbooks/chemistry_8_ch1.html b/frontend/textbooks/chemistry_8_ch1.html
index 7ee5ce8..77f9b44 100644
--- a/frontend/textbooks/chemistry_8_ch1.html
+++ b/frontend/textbooks/chemistry_8_ch1.html
@@ -328,6 +328,7 @@ function bp21(){ document.getElementById('p21-body').innerHTML =
function bp22(){ document.getElementById('p22-body').innerHTML =
hero(4,'§ 22 · Глава 1','Взаимосвязь классов · ПР 3','генетическая связь','Все классы связаны цепочками превращений — от простого вещества до соли.',['генетика','ПР.3'])
+makeCard('theory','Генетическая связь','§22','
Ряд металла: металл → основный оксид → основание → соль Na → Na₂O → NaOH → NaCl
Ряд неметалла: неметалл → кислотный оксид → кислота → соль S → SO₃ → H₂SO₄ → Na₂SO₄
Эти ряды «встречаются» в солях — продукте реакции кислоты и основания.
')
+ +flag('Генетическая карта классов','Кликни по стрелке-переходу — увидишь реакцию-пример. Два ряда (металл и неметалл) сходятся в соли.','')
+'
Цепочка превращений
Ca → CaO → Ca(OH)₂ → CaCl₂. Попробуй записать уравнение каждого перехода!
'
+makeCard('lab','Практическая работа 3 · Экспериментальные задачи',null,'
По выданным реактивам осуществи цепочку превращений и докажи получение каждого вещества (например, получи из меди — оксид меди, затем соль).
')
+rememberBox(['Металл и неметалл — начала двух генетических рядов.','Соль — точка встречи кислотного и основного «миров».'])
diff --git a/frontend/textbooks/chemistry_8_ch6.html b/frontend/textbooks/chemistry_8_ch6.html
index 31bcbc0..3e7b1f6 100644
--- a/frontend/textbooks/chemistry_8_ch6.html
+++ b/frontend/textbooks/chemistry_8_ch6.html
@@ -174,9 +174,7 @@ function bp46(){ document.getElementById('p46-body').innerHTML =
function bp47(){ document.getElementById('p47-body').innerHTML =
hero(4,'§ 47 · Глава 6','Растворение веществ в воде','растворитель + в-во','Что происходит, когда сахар «исчезает» в чае: вода разбирает вещество на частицы.',['раствор','гидратация'])
+makeCard('theory','Как идёт растворение','§47','
Раствор = растворитель (чаще вода) + растворённое вещество. При растворении молекулы воды окружают частицы вещества и «растаскивают» их — это гидратация. При этом тепло может выделяться (растворение щёлочи) или поглощаться (растворение соли).
')
- +'
Растворение частиц вещества
Частицы вещества (точки) равномерно распределяются среди молекул воды.
'
+ +flag('Анимация растворения и гидратации','Выбери вещество — увидишь, как оно распадается на ионы, окружённые молекулами воды.','')
+rememberBox(['Раствор = растворитель + растворённое вещество.','Гидратация — окружение частиц молекулами воды.'])
+qList(['Из чего состоит любой раствор?','Что такое гидратация?'])
+secNav('p46','p48')+readButton('p47'); wireReadBtn('p47'); }