diff --git a/backend/tests/chemistry8-page.test.js b/backend/tests/chemistry8-page.test.js index 09eddc6..fcdbab8 100644 --- a/backend/tests/chemistry8-page.test.js +++ b/backend/tests/chemistry8-page.test.js @@ -81,3 +81,21 @@ test('ch1: тренажёр задач отрисован для §10', async () await wait(150); assert.ok(doc.querySelectorAll('#navDotsp10 .nav-dot').length >= 4, 'навигация по задачам §10'); }); + +/* ── Глава 2 ── */ +test('ch2: SPA без ошибок, 6 карточек, §24 активен, ПСХЭ', async () => { + const { doc, errors } = await loadDom('chemistry_8_ch2.html', '/js/chem8_ch2_widgets.js'); + assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); + assert.equal(doc.querySelectorAll('#psel-grid .psel-card').length, 6, '5 § + финал'); + assert.ok(doc.querySelector('.sec.active') && doc.querySelector('.sec.active').id === 'sec-p24', '§24 активен'); + await wait(120); + assert.ok(doc.querySelectorAll('#c-pt-metals .pt-cell').length > 80, 'ПСХЭ §24 (90 элементов)'); +}); + +test('ch2: амфотерность §25 и семейства §26 монтируются', async () => { + const { doc } = await loadDom('chemistry_8_ch2.html', '/js/chem8_ch2_widgets.js'); + doc.defaultView.goTo('p25'); await wait(120); + assert.ok(doc.querySelector('#c-amph .amph-btn'), 'амфотерность §25'); + doc.defaultView.goTo('p26'); await wait(120); + assert.ok(doc.querySelectorAll('#c-pt-fam .pt-cell').length > 80, 'ПСХЭ семейства §26'); +}); diff --git a/backend/tests/chemistry8.test.js b/backend/tests/chemistry8.test.js index e37c33e..eee5fb2 100644 --- a/backend/tests/chemistry8.test.js +++ b/backend/tests/chemistry8.test.js @@ -65,7 +65,7 @@ test('Chem8.elementCounts — скобки и индексы', () => { }); test('Chem8 — оставшиеся заглушки возвращают null и не падают', () => { - for (const fn of ['oxStateCalc', 'redoxBalancer', 'orbitalDiagram', 'miniPeriodic', 'dissociationAnim', 'geneticMap']) { + for (const fn of ['oxStateCalc', 'redoxBalancer', 'orbitalDiagram', 'dissociationAnim', 'geneticMap']) { assert.equal(typeof C[fn], 'function', fn + ' определён'); assert.equal(C[fn]({}), null, fn + ' заглушка возвращает null'); } @@ -113,7 +113,7 @@ test('каждая глава существует, ссылается на ха const html = fs.readFileSync(path.join(TB, ch.file), 'utf8'); assert.ok(html.includes('/textbook/chemistry-8"'), ch.file + ' ссылка назад в хаб'); assert.ok(html.includes('/js/chem8_svg.js'), ch.file + ' подключает chem8_svg'); - if (ch.slug === 'chemistry-8-intro' || ch.slug === 'chemistry-8-ch1') { + if (['chemistry-8-intro', 'chemistry-8-ch1', 'chemistry-8-ch2'].includes(ch.slug)) { // перестроены на движок (SPA): slug задаётся через CHEM8_CFG assert.ok(html.includes("slug:'" + ch.slug + "'"), ch.file + ' slug в CHEM8_CFG'); assert.ok(html.includes('/js/chem8_engine.js'), ch.file + ' подключает движок'); @@ -150,6 +150,19 @@ test('Phase 2 — Глава 1 построена на движке (§10–23 + assert.ok(!html.includes('Раздел в разработке'), 'заглушка убрана'); }); +test('Phase 3 — Глава 2 построена на движке (§24–28 + Лаб.3 + финал)', () => { + const html = fs.readFileSync(path.join(TB, 'chemistry_8_ch2.html'), 'utf8'); + for (let i = 24; i <= 28; i++) assert.ok(html.includes('id="sec-p' + i + '"'), '§' + i + ' секция'); + assert.ok(html.includes('id="c-pt-metals"'), 'ПСХЭ §24'); + assert.ok(html.includes('id="c-amph"'), 'амфотерность §25'); + assert.ok(html.includes('Лабораторный опыт 3'), 'Лаб.3'); + assert.ok(html.includes('/js/chem8_ch2_widgets.js'), 'виджеты главы 2'); +}); + +test('Chem8.miniPeriodic возвращает API с highlight', () => { + assert.equal(typeof C.miniPeriodic, 'function', 'miniPeriodic реализован'); +}); + test('chem8_engine.js и виджеты — валидный синтаксис', () => { const eng = fs.readFileSync(path.join(ROOT, 'frontend', 'js', 'chem8_engine.js'), 'utf8'); const wid = fs.readFileSync(path.join(ROOT, 'frontend', 'js', 'chem8_intro_widgets.js'), 'utf8'); diff --git a/frontend/css/chem8-textbook.css b/frontend/css/chem8-textbook.css index 528ceb2..8704d76 100644 --- a/frontend/css/chem8-textbook.css +++ b/frontend/css/chem8-textbook.css @@ -339,6 +339,34 @@ html.dark .drop-box h5{color:var(--pri-l)} .act-axis{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin:6px 2px} .act-out{margin-top:8px} +/* miniPeriodic */ +.pt-wrap{overflow-x:auto;padding-bottom:6px} +.pt-grid{display:grid;grid-template-columns:repeat(18,minmax(30px,1fr));grid-auto-rows:34px;gap:2px;min-width:600px} +.pt-cell{position:relative;border:1px solid var(--border);border-radius:5px;background:var(--card);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px;transition:.1s;overflow:hidden} +.pt-cell:hover{transform:scale(1.12);z-index:2;border-color:var(--pri)} +.pt-z{font-size:.5rem;color:var(--muted);line-height:1} +.pt-s{font-size:.74rem;font-weight:800;line-height:1.05} +.pt-metal{background:rgba(13,148,136,.12)} +.pt-nonmetal{background:rgba(245,158,11,.16)} +.pt-metalloid{background:rgba(124,58,237,.13)} +.pt-noble{background:rgba(37,99,235,.13)} +.pt-lanth,.pt-act{background:rgba(219,39,119,.12)} +.pt-lanth .pt-z,.pt-act .pt-z{font-size:.44rem} +.pt-cell.pt-hot{outline:2.5px solid var(--pri);outline-offset:-2px;z-index:1;box-shadow:0 0 0 3px var(--pri-soft)} +.pt-cell.pt-sel{background:var(--pri);border-color:var(--pri)} +.pt-cell.pt-sel .pt-s,.pt-cell.pt-sel .pt-z{color:#fff} +.pt-info{margin-top:10px;padding:11px 14px;border-radius:10px;background:var(--card-soft);border:1px solid var(--border);font-size:.92rem} +.pt-info b{color:var(--pri-d)}html.dark .pt-info b{color:var(--pri-l)} +.pt-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:.76rem;color:var(--muted)} +.pt-legend span{display:inline-flex;align-items:center;gap:5px} +.pt-legend i{width:12px;height:12px;border-radius:3px;display:inline-block} +.pt-modes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px} + +/* амфотерность (§25) */ +.amph-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} +.amph-stage{display:flex;justify-content:center;margin:8px 0} +.amph-out{margin-top:6px} + /* exa-step (разбор примеров) */ .exa-step{font-family:var(--mono);font-size:.9rem;background:var(--card-soft);border-left:3px solid var(--pri);border-radius:0 8px 8px 0;padding:8px 12px;margin:6px 0} diff --git a/frontend/js/chem8_ch2_widgets.js b/frontend/js/chem8_ch2_widgets.js new file mode 100644 index 0000000..2e9ac8b --- /dev/null +++ b/frontend/js/chem8_ch2_widgets.js @@ -0,0 +1,75 @@ +/* chem8_ch2_widgets.js — виджеты Главы 2 «Периодический закон и ПСХЭ». + * Использует window.Chem8: miniPeriodic, testTube. + */ +(function (W) { + 'use strict'; + function C() { return W.Chem8 || {}; } + function $(id) { return document.getElementById(id); } + + /* интерактивная ПСХЭ с кнопками-режимами подсветки */ + function periodicModes(mountId, modes) { + var el = $(mountId); if (!el || el._b || !C().miniPeriodic) return; el._b = 1; + var bar = document.createElement('div'); bar.className = 'pt-modes'; + var grid = document.createElement('div'); + modes.forEach(function (m, i) { + var b = document.createElement('button'); b.className = 'btn'; b.textContent = m.l; + b.addEventListener('click', function () { + bar.querySelectorAll('.btn').forEach(function (x) { x.classList.remove('primary'); }); + b.classList.add('primary'); if (api) api.highlight(m.k); + }); + bar.appendChild(b); + }); + el.appendChild(bar); el.appendChild(grid); + var api = C().miniPeriodic(grid, {}); + var legend = document.createElement('div'); legend.className = 'pt-legend'; + legend.innerHTML = 'металлынеметаллыметаллоидыинертные'; + el.appendChild(legend); + } + + function mount_p24() { + periodicModes('c-pt-metals', [ + { k: 'metals', l: 'Металлы' }, { k: 'nonmetals', l: 'Неметаллы' }, { k: 'metalloids', l: 'Металлоиды' }, { k: null, l: 'Сброс' } + ]); + } + function mount_p26() { + periodicModes('c-pt-fam', [ + { k: 'alkali', l: 'Щелочные' }, { k: 'alkaline', l: 'Щёлочноземельные' }, { k: 'halogens', l: 'Галогены' }, { k: 'noble', l: 'Инертные газы' }, { k: null, l: 'Сброс' } + ]); + } + function mount_p28() { + periodicModes('c-pt-struct', [ + { k: { period: 2 }, l: 'Период 2' }, { k: { period: 3 }, l: 'Период 3' }, { k: { group: 1 }, l: 'Группа I' }, { k: { group: 17 }, l: 'Группа VII' }, { k: null, l: 'Сброс' } + ]); + } + + /* §25 — амфотерность: Zn(OH)₂ растворяется и в кислоте, и в щёлочи */ + function mount_p25() { + var el = $('c-amph'); if (!el || el._b) return; el._b = 1; + el.innerHTML = + '
' + + '' + + '' + + '' + + '
' + + '
' + + '
Zn(OH)₂ — амфотерный гидроксид. Добавь кислоту или щёлочь и посмотри, что будет.
'; + var stage = el.querySelector('.amph-stage'), out = el.querySelector('.amph-out'); + function tt(o) { return C().testTube ? C().testTube(o) : ''; } + function reset() { stage.innerHTML = '
' + tt({ color: '#fff', precipitate: '#cbd5e1', label: 'Zn(OH)2' }) + '
Белый осадок Zn(OH)₂
'; out.className = 'out amph-out'; out.innerHTML = 'Zn(OH)₂ — белый студенистый осадок (амфотерный гидроксид).'; } + el.querySelectorAll('.amph-btn').forEach(function (b) { + b.addEventListener('click', function () { + var r = b.getAttribute('data-r'); + stage.innerHTML = '
' + tt({ color: '#dbeafe' }) + '
Осадок растворился
'; + out.className = 'out amph-out ok'; + out.innerHTML = r === 'acid' + ? 'Как основание: Zn(OH)₂ + 2HCl → ZnCl₂ + 2H₂O — осадок растворился.' + : 'Как кислота: Zn(OH)₂ + 2NaOH → Na₂[Zn(OH)₄] — осадок растворился (амфотерность!).'; + }); + }); + el.querySelector('.amph-reset').addEventListener('click', reset); + reset(); + } + + W.CHEM8_WIDGETS = { p25: mount_p25 }; + W.FLAG_MOUNTS = { p24: mount_p24, p26: mount_p26, p28: mount_p28 }; +})(window); diff --git a/frontend/js/chem8_svg.js b/frontend/js/chem8_svg.js index dee0aa4..a71dd99 100644 --- a/frontend/js/chem8_svg.js +++ b/frontend/js/chem8_svg.js @@ -555,6 +555,89 @@ return { el: host }; } + /* ────────────────────────────────────────────────────────────────────────── + miniPeriodic(mount, opts) — интерактивная периодическая система. + opts.highlight: 'metals'|'nonmetals'|'metalloids'|'alkali'|'alkaline'| + 'halogens'|'noble'|{group:N}|{period:N}. opts.onClick(sym, info). + Стандартная раскладка 18×7; f-блок свёрнут в плейсхолдеры La и Ac. + ────────────────────────────────────────────────────────────────────────── */ + // [sym, group, period, Z] + var PT = [ + ['H',1,1,1],['He',18,1,2], + ['Li',1,2,3],['Be',2,2,4],['B',13,2,5],['C',14,2,6],['N',15,2,7],['O',16,2,8],['F',17,2,9],['Ne',18,2,10], + ['Na',1,3,11],['Mg',2,3,12],['Al',13,3,13],['Si',14,3,14],['P',15,3,15],['S',16,3,16],['Cl',17,3,17],['Ar',18,3,18], + ['K',1,4,19],['Ca',2,4,20],['Sc',3,4,21],['Ti',4,4,22],['V',5,4,23],['Cr',6,4,24],['Mn',7,4,25],['Fe',8,4,26],['Co',9,4,27],['Ni',10,4,28],['Cu',11,4,29],['Zn',12,4,30],['Ga',13,4,31],['Ge',14,4,32],['As',15,4,33],['Se',16,4,34],['Br',17,4,35],['Kr',18,4,36], + ['Rb',1,5,37],['Sr',2,5,38],['Y',3,5,39],['Zr',4,5,40],['Nb',5,5,41],['Mo',6,5,42],['Tc',7,5,43],['Ru',8,5,44],['Rh',9,5,45],['Pd',10,5,46],['Ag',11,5,47],['Cd',12,5,48],['In',13,5,49],['Sn',14,5,50],['Sb',15,5,51],['Te',16,5,52],['I',17,5,53],['Xe',18,5,54], + ['Cs',1,6,55],['Ba',2,6,56],['La',3,6,57],['Hf',4,6,72],['Ta',5,6,73],['W',6,6,74],['Re',7,6,75],['Os',8,6,76],['Ir',9,6,77],['Pt',10,6,78],['Au',11,6,79],['Hg',12,6,80],['Tl',13,6,81],['Pb',14,6,82],['Bi',15,6,83],['Po',16,6,84],['At',17,6,85],['Rn',18,6,86], + ['Cs',1,6,55] + ]; + // период 7 (главная часть) + var PT7 = [['Fr',1,7,87],['Ra',2,7,88],['Ac',3,7,89],['Rf',4,7,104],['Db',5,7,105],['Sg',6,7,106],['Bh',7,7,107],['Hs',8,7,108],['Mt',9,7,109],['Ds',10,7,110],['Rg',11,7,111],['Cn',12,7,112],['Nh',13,7,113],['Fl',14,7,114],['Mc',15,7,115],['Lv',16,7,116],['Ts',17,7,117],['Og',18,7,118]]; + var PT_NAMES = { H:'Водород', He:'Гелий', Li:'Литий', Be:'Бериллий', B:'Бор', C:'Углерод', N:'Азот', O:'Кислород', F:'Фтор', Ne:'Неон', Na:'Натрий', Mg:'Магний', Al:'Алюминий', Si:'Кремний', P:'Фосфор', S:'Сера', Cl:'Хлор', Ar:'Аргон', K:'Калий', Ca:'Кальций', Fe:'Железо', Cu:'Медь', Zn:'Цинк', Br:'Бром', Ag:'Серебро', I:'Йод', Ba:'Барий', Au:'Золото', Hg:'Ртуть', Pb:'Свинец' }; + var NONMETALS = { H:1, He:1, C:1, N:1, O:1, F:1, Ne:1, P:1, S:1, Cl:1, Ar:1, Se:1, Br:1, Kr:1, I:1, Xe:1, At:1, Rn:1, Ts:1, Og:1 }; + var METALLOIDS = { B:1, Si:1, Ge:1, As:1, Sb:1, Te:1, Po:1 }; + function ptCategory(sym, g) { + if (g === 18) return 'noble'; + if (METALLOIDS[sym]) return 'metalloid'; + if (NONMETALS[sym]) return 'nonmetal'; + return 'metal'; + } + function ptMatch(hl, sym, g, p) { + if (!hl) return false; + if (typeof hl === 'object') { if (hl.group) return g === hl.group; if (hl.period) return p === hl.period; return false; } + var cat = ptCategory(sym, g); + if (hl === 'metals') return cat === 'metal'; + if (hl === 'nonmetals') return cat === 'nonmetal'; + if (hl === 'metalloids') return cat === 'metalloid'; + if (hl === 'noble') return g === 18; + if (hl === 'halogens') return g === 17; + if (hl === 'alkali') return g === 1 && sym !== 'H'; + if (hl === 'alkaline') return g === 2; + return false; + } + function miniPeriodic(mount, opts) { + var host = typeof mount === 'string' ? global.document.querySelector(mount) : mount; + if (!host) return null; + opts = opts || {}; + var all = PT.slice(0, PT.length - 1).concat(PT7); // убрать дубль Cs-стоппер + // фильтр дубликата Cs (вставлен как маркер конца) — оставляем уникальные по Z + var seen = {}, els = []; + all.forEach(function (e) { if (!seen[e[3]]) { seen[e[3]] = 1; els.push(e); } }); + function cell(e) { + var sym = e[0], g = e[1], p = e[2], z = e[3], cat = ptCategory(sym, g); + var hot = ptMatch(opts.highlight, sym, g, p); + return ''; + } + var cells = els.map(cell).join(''); + // плейсхолдер f-блока + var fph = '' + + ''; + host.innerHTML = '
' + cells + fph + '
' + + '
Кликни элемент — увидишь название, $Z$ и $A_r$.
'; + var info = host.querySelector('.pt-info'); + host.querySelectorAll('.pt-cell').forEach(function (c) { + c.addEventListener('click', function () { + host.querySelectorAll('.pt-cell').forEach(function (x) { x.classList.remove('pt-sel'); }); + c.classList.add('pt-sel'); + var sym = c.getAttribute('data-sym'), z = c.getAttribute('data-z'), g = +c.getAttribute('data-g'), p = +c.getAttribute('data-p'); + var ar = arOf(sym), cat = ptCategory(sym, g); + var catRu = cat === 'metal' ? 'металл' : cat === 'nonmetal' ? 'неметалл' : cat === 'metalloid' ? 'металлоид' : 'инертный газ'; + var fam = g === 1 && sym !== 'H' ? ' · щелочной металл' : g === 2 ? ' · щёлочноземельный' : g === 17 ? ' · галоген' : g === 18 ? ' · инертный газ' : ''; + info.innerHTML = '' + (PT_NAMES[sym] || sym) + ' (' + sym + ') · Z = ' + z + (ar ? ' · A_r = ' + ar : '') + ' · группа ' + g + ', период ' + p + ' · ' + catRu + fam; + if (typeof opts.onClick === 'function') opts.onClick(sym, { z: z, g: g, p: p, ar: ar, cat: cat }); + }); + }); + return { + el: host, + highlight: function (hl) { + host.querySelectorAll('.pt-cell').forEach(function (c) { + c.classList.toggle('pt-hot', ptMatch(hl, c.getAttribute('data-sym'), +c.getAttribute('data-g'), +c.getAttribute('data-p'))); + }); + } + }; + } + /* ---- Каркасы-заглушки интерактивных виджетов (реализуются по фазам) ---- */ function notImplemented(name) { return function () { @@ -585,11 +668,12 @@ classifier: classifier, // §10,13,16,19 — клик-классификатор solubilityTable: solubilityTable, // §19,20 — таблица растворимости activitySeries: activitySeries, // §14,20 — ряд активности металлов - // заглушки (см. план, разд. B) — наполняются в Phase 3–6 + // готово (Phase 3 — периодический закон) + miniPeriodic: miniPeriodic, // §26,28,34 — интерактивная ПСХЭ с подсветкой + // заглушки (см. план, разд. B) — наполняются в Phase 4–6 oxStateCalc: notImplemented('oxStateCalc'), // §42 — калькулятор степени окисления redoxBalancer: notImplemented('redoxBalancer'), // §44 — e-баланс ОВР orbitalDiagram: notImplemented('orbitalDiagram'), // §33 — орбитальная диаграмма - miniPeriodic: notImplemented('miniPeriodic'), // §26,34 — мини-ПСХЭ с подсветкой dissociationAnim: notImplemented('dissociationAnim'),// §47 — анимация растворения geneticMap: notImplemented('geneticMap') // §22 — генетическая карта-граф классов }; diff --git a/frontend/textbooks/chemistry_8_ch2.html b/frontend/textbooks/chemistry_8_ch2.html index c979a76..135b69a 100644 --- a/frontend/textbooks/chemistry_8_ch2.html +++ b/frontend/textbooks/chemistry_8_ch2.html @@ -6,130 +6,189 @@ -Химия 8 · Глава 2 · «Периодический закон и периодическая система химических элементов» - +Химия 8 · Глава 2 · «Периодический закон и периодическая система» + + + - + +
-
- - - К разделам - +
-
Глава 2 · § 24–28
-

Периодический закон и периодическая система химических элементов

+

Химия 8 · Глава 2

+
Систематизация элементов, амфотерность, естественные семейства, периодический закон Д. И. Менделеева
- + К разделам +
-
-
-
- -
-
-

Раздел в разработке

-

Интерактивное наглядное наполнение этого раздела (теория, модели, симуляторы, тренажёры и боссы) добавляется поэтапно. Ниже — план параграфов раздела согласно учебнику.

-
-
+
+
+
+

Главный закон химии

+

В 1869 году Д. И. Менделеев расположил элементы в порядке возрастания атомной массы — и увидел, что их свойства повторяются периодически. Так родилась периодическая система, по которой можно предсказывать свойства веществ.

+
+ +
Прогресс главы
0%
+
+
+
-
- - Содержание раздела +
Параграфы главы
+ +
§ 24

Систематизация химических элементов

+
§ 25

Понятие об амфотерности · Лаб. 3

+
§ 26

Естественные семейства элементов

+
§ 27

Периодический закон Д. И. Менделеева

+
§ 28

Периодическая система химических элементов

+
★

Финал главы

-
    -
  • § 24Систематизация химических элементов
    • -
  • § 25Понятие об амфотерности
    • -
  • Лабораторный опыт 3. Получение гидроксида цинка и изучение его амфотерных свойств
    • -
  • § 26Естественные семейства элементов
    • -
  • § 27Периодический закон Д. И. Менделеева
    • -
  • § 28Периодическая система химических элементов
    • -
+
- + +
Достижение!