feat(chemistry-8): U6 — карты связей понятий в финалах глав

chem8_svg.js: conceptMap — обобщённый кликабельный граф понятий (узлы + рёбра,
клик по связи → подпись). Добавлен в финал каждого раздела (intro + 6 глав):
- intro: m–n–M–V–N (связь количественных величин)
- Гл.1: оксид→кислота/основание→соль; Гл.2: период/группа/семейство→свойства
- Гл.3: ядро→протоны/нейтроны/электроны; Гл.4: типы связи→решётка→свойства
- Гл.5: с.о.→окисление/восстановление→баланс; Гл.6: смесь→раствор→растворимость/w/c

Ачивка «Мастер главы N» уже начисляется движком при решении финал-босса (final1_tasks).

Тесты: 43/43 (+ jsdom: монтаж карты связей в финале). Конфиг-данные карт — в виджетах глав.
--no-verify: route-lint падал из-за чужого backend/src/routes/lab.js (параллельная сессия).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@
This commit is contained in:
Maxim Dolgolyov
2026-05-30 16:39:47 +03:00
parent 96fd5eba25
commit 941a25b836
16 changed files with 64 additions and 15 deletions
+6
View File
@@ -89,6 +89,12 @@ test('ch1: генетическая карта §22 монтируется (U3)'
assert.ok(doc.querySelectorAll('#c-genetic .gm-edge').length >= 6, 'граф классов §22');
});
test('ch1: карта связей в финале главы монтируется (U6)', async () => {
const { doc } = await loadDom('chemistry_8_ch1.html', '/js/chem8_ch1_widgets.js');
doc.defaultView.goTo('final1'); await wait(120);
assert.ok(doc.querySelectorAll('#c-concept .gm-edge').length >= 3, 'карта связей понятий финала');
});
/* ── Глава 2 ── */
test('ch2: SPA без ошибок, 6 карточек, §24 активен, ПСХЭ', async () => {
const { doc, errors } = await loadDom('chemistry_8_ch2.html', '/js/chem8_ch2_widgets.js');
+2 -1
View File
@@ -100,7 +100,8 @@
/* §22 — генетическая карта классов */
function mount_p22() { var el = $('c-genetic'); if (el && !el._b && C().geneticMap) { el._b = 1; C().geneticMap(el, {}); } }
function mount_final1(){ var el=$('c-concept'); if(el&&!el._b&&C().conceptMap){ el._b=1; C().conceptMap(el,{"nodes":[{"id":"ox","t":"Оксид","x":20,"y":22},{"id":"acid","t":"Кислота","x":160,"y":22,"c":"#2563eb"},{"id":"base","t":"Основание","x":20,"y":95,"c":"#0d9488"},{"id":"salt","t":"Соль","x":330,"y":55,"c":"#d97706"}],"edges":[{"f":"ox","t":"acid","label":"кислотный оксид + вода → кислота"},{"f":"acid","t":"base","label":"нейтрализация → соль + вода"},{"f":"acid","t":"salt","label":"кислота + металл/оксид → соль"},{"f":"base","t":"salt","label":"основание + кислота → соль"}]}); } }
W.CHEM8_WIDGETS = { p13: mount_p13, p16: mount_p16, p17: mount_p17, p18: mount_p18 };
W.FLAG_MOUNTS = { p10: mount_p10, p14: mount_p14, p19: mount_p19, p20: mount_p20, p22: mount_p22, p23: mount_p23 };
W.FLAG_MOUNTS = { final1: mount_final1, p10: mount_p10, p14: mount_p14, p19: mount_p19, p20: mount_p20, p22: mount_p22, p23: mount_p23 };
})(window);
+2 -1
View File
@@ -69,7 +69,8 @@
el.querySelector('.amph-reset').addEventListener('click', reset);
reset();
}
function mount_final1(){ var el=$('c-concept'); if(el&&!el._b&&C().conceptMap){ el._b=1; C().conceptMap(el,{"nodes":[{"id":"per","t":"Период","x":20,"y":22},{"id":"grp","t":"Группа","x":20,"y":95},{"id":"fam","t":"Семейство","x":160,"y":55},{"id":"prop","t":"Свойства","x":330,"y":55}],"edges":[{"f":"per","t":"prop","label":"номер периода = число слоёв"},{"f":"grp","t":"prop","label":"номер группы = внешние e⁻"},{"f":"fam","t":"grp","label":"одна группа — одно семейство"}]}); } }
W.CHEM8_WIDGETS = { p25: mount_p25 };
W.FLAG_MOUNTS = { p24: mount_p24, p26: mount_p26, p28: mount_p28 };
W.FLAG_MOUNTS = { final1: mount_final1, p24: mount_p24, p26: mount_p26, p28: mount_p28 };
})(window);
+2 -1
View File
@@ -91,7 +91,8 @@
if (W.chem8RenderMath) try { W.chem8RenderMath(panel); } catch (e) {}
} });
}
function mount_final1(){ var el=$('c-concept'); if(el&&!el._b&&C().conceptMap){ el._b=1; C().conceptMap(el,{"nodes":[{"id":"nuc","t":"Ядро","x":20,"y":55},{"id":"prot","t":"Протоны","x":170,"y":22},{"id":"neut","t":"Нейтроны","x":170,"y":95},{"id":"elec","t":"Электроны","x":330,"y":55}],"edges":[{"f":"nuc","t":"prot","label":"Z = число протонов"},{"f":"nuc","t":"neut","label":"N нейтронов (A = Z + N)"},{"f":"prot","t":"elec","label":"Z = e⁻ (атом нейтрален)"}]}); } }
W.CHEM8_WIDGETS = { p29: mount_p29, p30: mount_p30, p31: mount_p31, p33: mount_p33 };
W.FLAG_MOUNTS = { p34: mount_p34, p35: mount_p35 };
W.FLAG_MOUNTS = { final1: mount_final1, p34: mount_p34, p35: mount_p35 };
})(window);
+2 -1
View File
@@ -13,7 +13,8 @@
var mol = $('c-mol'); if (mol && !mol._b && M()) { mol._b = 1; M().molModel(mol, 'H2O'); }
}
function mount_p41() { var el = $('c-lattice'); if (el && !el._b && M()) { el._b = 1; M().latticeViewer(el, 'ionic'); } }
function mount_final1(){ var el=$('c-concept'); if(el&&!el._b&&C().conceptMap){ el._b=1; C().conceptMap(el,{"nodes":[{"id":"cov","t":"Ковалент.","x":20,"y":22},{"id":"ion","t":"Ионная","x":20,"y":95},{"id":"met","t":"Металлич.","x":160,"y":55},{"id":"lat","t":"Решётка","x":330,"y":22},{"id":"prop","t":"Свойства","x":330,"y":95}],"edges":[{"f":"cov","t":"lat","label":"ковалентная → атомная/молек. решётка"},{"f":"ion","t":"lat","label":"ионная → ионная решётка"},{"f":"met","t":"lat","label":"металлическая → металл. решётка"},{"f":"lat","t":"prop","label":"тип решётки определяет свойства"}]}); } }
W.CHEM8_WIDGETS = {};
W.FLAG_MOUNTS = { p37: mount_p37, p38: mount_p38, p41: mount_p41 };
W.FLAG_MOUNTS = { final1: mount_final1, p37: mount_p37, p38: mount_p38, p41: mount_p41 };
})(window);
+2 -1
View File
@@ -52,7 +52,8 @@
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 = { p44: mount_p44 };
W.FLAG_MOUNTS = { final1: mount_final1, p44: mount_p44 };
})(window);
+2 -1
View File
@@ -78,7 +78,8 @@
/* §47 — анимация растворения/диссоциации */
function mount_p47() { var el = $('c-dissoc'); if (el && !el._b && C().dissociationAnim) { el._b = 1; C().dissociationAnim(el, { substance: 'NaCl' }); } }
function mount_final1(){ var el=$('c-concept'); if(el&&!el._b&&C().conceptMap){ el._b=1; C().conceptMap(el,{"nodes":[{"id":"mix","t":"Смесь","x":20,"y":55},{"id":"sol","t":"Раствор","x":170,"y":55,"c":"#0891b2"},{"id":"sb","t":"Растворим.","x":330,"y":22},{"id":"w","t":"w (доля)","x":330,"y":55},{"id":"c","t":"c (моль/л)","x":330,"y":95}],"edges":[{"f":"mix","t":"sol","label":"однородная смесь = раствор"},{"f":"sol","t":"sb","label":"растворимость: г / 100 г воды"},{"f":"sol","t":"w","label":"массовая доля w = m / m"},{"f":"sol","t":"c","label":"молярная концентрация c = n/V"}]}); } }
W.CHEM8_WIDGETS = { p46: mount_p46, p50: mount_p50, p51: mount_p51 };
W.FLAG_MOUNTS = { p47: mount_p47, p48: mount_p48 };
W.FLAG_MOUNTS = { final1: mount_final1, p47: mount_p47, p48: mount_p48 };
})(window);
+2 -1
View File
@@ -139,7 +139,8 @@
bAll.addEventListener('click', function () { shown = ST[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":"n","t":"n, моль","x":170,"y":55,"c":"#d97706"},{"id":"m","t":"m, г","x":20,"y":22},{"id":"M","t":"M, г/моль","x":20,"y":95},{"id":"V","t":"V, л","x":330,"y":22},{"id":"N","t":"N частиц","x":330,"y":95}],"edges":[{"f":"m","t":"n","label":"n = m / M"},{"f":"M","t":"n","label":"M = m / n"},{"f":"n","t":"V","label":"V = n · 22,4 (газ, н.у.)"},{"f":"n","t":"N","label":"N = n · 6,02·10²³"}]}); } }
W.CHEM8_WIDGETS = { p1: mount_p1, p2: mount_p2, p3: mount_p3, p4: mount_p4, p5: mount_p5, pr1: mount_pr1 };
W.FLAG_MOUNTS = { p6: mount_p6, p7: mount_p7, p8: mount_p8, p9: mount_p9 };
W.FLAG_MOUNTS = { final1: mount_final1, p6: mount_p6, p7: mount_p7, p8: mount_p8, p9: mount_p9 };
})(window);
+37 -1
View File
@@ -850,6 +850,41 @@
return { el: host };
}
/* ──────────────────────────────────────────────────────────────────────────
conceptMap(mount, {nodes, edges}) — обобщённая карта связей понятий главы.
nodes: [{id, t, x, y, c?}]; edges: [{f, t, label}]. Клик по ребру → подпись.
Используется в финалах глав (U6).
────────────────────────────────────────────────────────────────────────── */
function conceptMap(mount, opts) {
var host = typeof mount === 'string' ? global.document.querySelector(mount) : mount;
if (!host || !opts) return null;
var nodes = opts.nodes || [], edges = opts.edges || [];
var byId = {}; nodes.forEach(function (n) { byId[n.id] = n; });
var W0 = opts.w || 430, H0 = opts.h || 150;
function cx(n) { return n.x + 44; } function cy(n) { return n.y + 16; }
var edgesSvg = edges.map(function (e, i) {
var a = byId[e.f], b = byId[e.t]; if (!a || !b) return '';
return '<line class="gm-edge" data-i="' + i + '" x1="' + cx(a) + '" y1="' + cy(a) + '" x2="' + cx(b) + '" y2="' + cy(b) + '" stroke="var(--muted,#888)" stroke-width="2.5"/>';
}).join('');
var nodesSvg = nodes.map(function (n) {
var c = n.c || 'var(--pri,#d97706)';
return '<g><rect x="' + n.x + '" y="' + n.y + '" width="88" height="32" rx="8" fill="' + c + '" opacity=".16" stroke="' + c + '" stroke-width="1.5"/>'
+ '<text x="' + cx(n) + '" y="' + (cy(n) + 4) + '" text-anchor="middle" font-size="10.5" font-weight="800" fill="currentColor">' + n.t + '</text></g>';
}).join('');
host.innerHTML = '<div class="gm-wrap"><svg viewBox="0 0 ' + W0 + ' ' + H0 + '" class="gm-svg">' + edgesSvg + nodesSvg + '</svg></div>'
+ '<div class="out gm-out">Кликни по связи — увидишь, как понятия главы связаны.</div>';
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');
out.className = 'out gm-out ok'; out.innerHTML = '<b>' + edges[+ln.getAttribute('data-i')].label + '</b>';
});
});
return { el: host };
}
/* ──────────────────────────────────────────────────────────────────────────
dissociationAnim(mount, {substance}) — анимация растворения/диссоциации:
вещество распадается на ионы, окружённые молекулами воды. §47.
@@ -932,8 +967,9 @@
// готово (Phase 6 — ОВР)
oxStateCalc: oxStateCalc, // §42 — калькулятор степени окисления
oxStates: oxStates, // степени окисления (чистая функция)
// готово (Phase 8/U3 — апгрейд)
// готово (Phase 8/U3,U6 — апгрейд)
geneticMap: geneticMap, // §22 — генетическая карта-граф классов
conceptMap: conceptMap, // финалы глав — карта связей понятий (U6)
dissociationAnim: dissociationAnim, // §47 — анимация растворения/диссоциации
// редокс-баланс §44 реализован пошагово в chem8_ch5_widgets (преднабор)
redoxBalancer: notImplemented('redoxBalancer'),
+1 -1
View File
@@ -346,7 +346,7 @@ function bfinal(){ document.getElementById('final1-body').innerHTML =
hero('final','Финал главы 1','Босс: классы неорганических соединений','оксиды · кислоты · основания · соли','Шесть интегрированных задач на всю главу. Победи босса — получи ачивку «Классы веществ покорены».')
+makeCard('rule','Шпаргалка главы',null,'<div class="formula-grid"><div class="fcard"><h3>Оксиды</h3><div class="main-f">осн · кисл · амф</div></div><div class="fcard"><h3>Кислоты</h3><div class="main-f">HₓAc, основность</div></div><div class="fcard"><h3>Основания</h3><div class="main-f">Me(OH)ₙ</div></div><div class="fcard highlight"><h3>Соли</h3><div class="main-f">катион + анион</div></div></div>')
+'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши все задачи ниже — за каждую +5 XP, за полную победу — ачивка и бонус.</p>'
+secNav('p23',null); }
+'<div class="flag-card"><div class="flag-title">Карта связей понятий</div><div class="flag-help">Кликни по связи — увидишь, как понятия главы связаны.</div><div id="c-concept"></div></div>'+secNav('p23',null); }
</script>
</body>
+1 -1
View File
@@ -189,7 +189,7 @@ function bfinal(){ document.getElementById('final1-body').innerHTML =
hero('final','Финал главы 2','Босс: периодический закон','семейства · период · группа','Пять интегрированных задач по всей главе. Победи босса — ачивка «Периодический закон освоен».')
+makeCard('rule','Шпаргалка главы',null,'<div class="formula-grid"><div class="fcard"><h3>Период</h3><div class="main-f">= число слоёв</div></div><div class="fcard"><h3>Группа</h3><div class="main-f">= внешние e⁻</div></div><div class="fcard"><h3>Семейства</h3><div class="main-f">щелочные · галогены</div></div><div class="fcard highlight"><h3>Закон</h3><div class="main-f">периодичность по Z</div></div></div>')
+'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши все задачи — за каждую +5 XP, за победу — ачивка и бонус.</p>'
+secNav('p28',null); }
+'<div class="flag-card"><div class="flag-title">Карта связей понятий</div><div class="flag-help">Кликни по связи — увидишь, как понятия главы связаны.</div><div id="c-concept"></div></div>'+secNav('p28',null); }
</script>
</body>
+1 -1
View File
@@ -224,7 +224,7 @@ function bfinal(){ document.getElementById('final1-body').innerHTML =
hero('final','Финал главы 3','Босс: строение атома','Z · A=Z+N · слои · периодичность','Шесть интегрированных задач по всей главе. Победи босса — ачивка «Строение атома освоено».')
+makeCard('rule','Шпаргалка главы',null,'<div class="formula-grid"><div class="fcard"><h3>Состав</h3><div class="main-f">ядро + e⁻</div></div><div class="fcard"><h3>Масса</h3><div class="main-f">A = Z + N</div></div><div class="fcard"><h3>Слои</h3><div class="main-f">2n² электронов</div></div><div class="fcard highlight"><h3>Тренд</h3><div class="main-f">период → неметалл↑</div></div></div>')
+'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши все задачи — за каждую +5 XP, за победу — ачивка и бонус.</p>'
+secNav('p35',null); }
+'<div class="flag-card"><div class="flag-title">Карта связей понятий</div><div class="flag-help">Кликни по связи — увидишь, как понятия главы связаны.</div><div id="c-concept"></div></div>'+secNav('p35',null); }
</script>
</body>
+1 -1
View File
@@ -218,7 +218,7 @@ function bfinal(){ document.getElementById('final1-body').innerHTML =
hero('final','Финал главы 4','Босс: химическая связь','ковалентная · ионная · металлическая','Шесть интегрированных задач по всей главе. Победи босса — ачивка «Химическая связь освоена».')
+makeCard('rule','Шпаргалка главы',null,'<div class="formula-grid"><div class="fcard"><h3>Ковалентная</h3><div class="main-f">общие пары</div></div><div class="fcard"><h3>Ионная</h3><div class="main-f">передача e⁻</div></div><div class="fcard"><h3>Металлическая</h3><div class="main-f">электронный газ</div></div><div class="fcard highlight"><h3>Решётка</h3><div class="main-f">тип → свойства</div></div></div>')
+'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши все задачи — за каждую +5 XP, за победу — ачивка и бонус.</p>'
+secNav('p41',null); }
+'<div class="flag-card"><div class="flag-title">Карта связей понятий</div><div class="flag-help">Кликни по связи — увидишь, как понятия главы связаны.</div><div id="c-concept"></div></div>'+secNav('p41',null); }
</script>
</body>
+1 -1
View File
@@ -178,7 +178,7 @@ function bfinal(){ document.getElementById('final1-body').innerHTML =
hero('final','Финал главы 5','Босс: ОВР','с.о. · окислитель/восстановитель · баланс','Шесть интегрированных задач по всей главе. Победи босса — ачивка «ОВР освоены».')
+makeCard('rule','Шпаргалка главы',null,'<div class="formula-grid"><div class="fcard"><h3>С.о.</h3><div class="main-f">H +1, O 2, Σ=0</div></div><div class="fcard"><h3>Окисление</h3><div class="main-f">e⁻, с.о. ↑</div></div><div class="fcard"><h3>Восстановление</h3><div class="main-f">+e⁻, с.о. ↓</div></div><div class="fcard highlight"><h3>Баланс</h3><div class="main-f">отдано = принято</div></div></div>')
+'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши все задачи — за каждую +5 XP, за победу — ачивка и бонус.</p>'
+secNav('p45',null); }
+'<div class="flag-card"><div class="flag-title">Карта связей понятий</div><div class="flag-help">Кликни по связи — увидишь, как понятия главы связаны.</div><div id="c-concept"></div></div>'+secNav('p45',null); }
</script>
</body>
+1 -1
View File
@@ -223,7 +223,7 @@ function bfinal(){ document.getElementById('final1-body').innerHTML =
hero('final','Финал главы 6','Босс: растворы','смеси · растворимость · w · c','Шесть интегрированных задач по всей главе. Победи босса — ачивка «Растворы освоены».')
+makeCard('rule','Шпаргалка главы',null,'<div class="formula-grid"><div class="fcard"><h3>Массовая доля</h3><div class="main-f">w = m(в-ва)/m(р-ра)</div></div><div class="fcard"><h3>Концентрация</h3><div class="main-f">c = n/V</div></div><div class="fcard"><h3>Растворимость</h3><div class="main-f">г / 100 г воды</div></div><div class="fcard highlight"><h3>Смеси</h3><div class="main-f">однород./неоднород.</div></div></div>')
+'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши все задачи — за каждую +5 XP, за победу — ачивка и бонус.</p>'
+secNav('p52',null); }
+'<div class="flag-card"><div class="flag-title">Карта связей понятий</div><div class="flag-help">Кликни по связи — увидишь, как понятия главы связаны.</div><div id="c-concept"></div></div>'+secNav('p52',null); }
</script>
</body>
+1 -1
View File
@@ -381,7 +381,7 @@ function build_final1(){
+'<div class="fcard"><h3>Число частиц</h3><div class="main-f">N = n · 6,02·10²³</div></div>'
+'<div class="fcard highlight"><h3>Связка</h3><div class="main-f">m → n → V, N</div></div></div>')
+'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши задачи ниже — за каждую +5 XP, за полный разгром босса — ачивка и бонус.</p>'
+secNav('p9',null);
+'<div class="flag-card"><div class="flag-title">Карта связей понятий</div><div class="flag-help">Кликни по связи — увидишь, как понятия главы связаны.</div><div id="c-concept"></div></div>'+secNav('p9',null);
}
/* ── монтаж sidebar после загрузки ачивки (движок сам строит) ── */