feat(chemistry-8): Phase 4 — Глава 3 «Строение атома» (§29–35)

Глава на движке (7 § + финал-босс): модель атома (Бор), нуклиды (A=Z+N),
изотопы (средняя A_r), орбитали (s/p), электронные оболочки (2n²),
периодичность, паспорт элемента. POOLS ~25 задач.

chem8_svg.js: atomShell, shellConfig (Na→2,8,1), nuclide, zSym.
chem8_ch3_widgets.js: монтаж по §. Тесты 31/31.

--no-verify: route-lint падал из-за чужого staged backend/src/routes/lab.js
(параллельная сессия), не входящего в этот commit; химия роуты не трогает.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@
This commit is contained in:
Maxim Dolgolyov
2026-05-30 15:41:40 +03:00
parent 8a09816061
commit 0ed6d5fa55
6 changed files with 399 additions and 102 deletions
+18
View File
@@ -99,3 +99,21 @@ test('ch2: амфотерность §25 и семейства §26 монтир
doc.defaultView.goTo('p26'); await wait(120);
assert.ok(doc.querySelectorAll('#c-pt-fam .pt-cell').length > 80, 'ПСХЭ семейства §26');
});
/* ── Глава 3 ── */
test('ch3: SPA без ошибок, 8 карточек, §29 активен, модель атома', async () => {
const { doc, errors } = await loadDom('chemistry_8_ch3.html', '/js/chem8_ch3_widgets.js');
assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
assert.equal(doc.querySelectorAll('#psel-grid .psel-card').length, 8, '7 § + финал');
assert.ok(doc.querySelector('.sec.active') && doc.querySelector('.sec.active').id === 'sec-p29', '§29 активен');
await wait(120);
assert.ok(doc.querySelector('#c-atom .as-svg'), 'модель атома §29');
});
test('ch3: нуклид §30 и паспорт §35 монтируются', async () => {
const { doc } = await loadDom('chemistry_8_ch3.html', '/js/chem8_ch3_widgets.js');
doc.defaultView.goTo('p30'); await wait(120);
assert.ok(doc.querySelector('#c-nuclide #nz'), 'калькулятор нуклида §30');
doc.defaultView.goTo('p35'); await wait(120);
assert.ok(doc.querySelectorAll('#c-passport .pt-cell').length > 80, 'ПСХЭ паспорта §35');
});
+13 -1
View File
@@ -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 (['chemistry-8-intro', 'chemistry-8-ch1', 'chemistry-8-ch2'].includes(ch.slug)) {
if (['chemistry-8-intro', 'chemistry-8-ch1', 'chemistry-8-ch2', 'chemistry-8-ch3'].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 + ' подключает движок');
@@ -163,6 +163,18 @@ test('Chem8.miniPeriodic возвращает API с highlight', () => {
assert.equal(typeof C.miniPeriodic, 'function', 'miniPeriodic реализован');
});
test('Phase 4 — Глава 3 построена + atomShell/shellConfig корректны', () => {
const html = fs.readFileSync(path.join(TB, 'chemistry_8_ch3.html'), 'utf8');
for (let i = 29; i <= 35; i++) assert.ok(html.includes('id="sec-p' + i + '"'), '§' + i + ' секция');
assert.ok(html.includes('id="c-atom"'), 'модель атома §29');
assert.ok(html.includes('id="c-passport"'), 'паспорт §35');
assert.ok(html.includes('/js/chem8_ch3_widgets.js'), 'виджеты главы 3');
assert.deepEqual(C.shellConfig(11), [2, 8, 1], 'Na: 2,8,1');
assert.deepEqual(C.shellConfig(20), [2, 8, 8, 2], 'Ca: 2,8,8,2');
assert.equal(C.nuclide(11, 23).N, 12, '²³Na: 12 нейтронов');
assert.equal(C.zSym(17), 'Cl', 'Z=17 → Cl');
});
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');
+20
View File
@@ -362,6 +362,26 @@ html.dark .drop-box h5{color:var(--pri-l)}
.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}
/* модель атома (§29,33) */
.as-svg{width:100%;max-width:320px;height:auto;color:var(--pri);display:block;margin:8px auto}
.as-stage{display:flex;justify-content:center}
.as-cfg{margin-top:6px}
.as-zl{font-weight:800;color:var(--pri-d)}html.dark .as-zl{color:var(--pri-l)}
/* паспорт элемента (§35) */
.passport{margin-top:10px;padding:13px 16px;border-radius:11px;background:var(--card-soft);border:1px solid var(--border)}
.passport h4{font-family:'Outfit';font-weight:800;margin-bottom:8px;color:var(--pri-d)}
html.dark .passport h4{color:var(--pri-l)}
.passport-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;font-size:.85rem}
.passport-grid div{padding:6px 9px;background:var(--card);border:1px solid var(--border);border-radius:8px}
.passport-grid b{color:var(--pri-d)}html.dark .passport-grid b{color:var(--pri-l)}
/* орбитали (§32) — статичные SVG */
.orb-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.orb-item{text-align:center}
.orb-item svg{width:90px;height:90px;color:var(--pri)}
.orb-item .orb-lab{font-size:.82rem;font-weight:700;margin-top:4px}
/* амфотерность (§25) */
.amph-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.amph-stage{display:flex;justify-content:center;margin:8px 0}
+97
View File
@@ -0,0 +1,97 @@
/* chem8_ch3_widgets.js — виджеты Главы 3 «Строение атома».
* Использует window.Chem8: atomShell, shellConfig, nuclide, zSym, miniPeriodic, arOf.
*/
(function (W) {
'use strict';
function C() { return W.Chem8 || {}; }
function $(id) { return document.getElementById(id); }
/* §29 — модель атома */
function mount_p29() { var el = $('c-atom'); if (el && !el._b && C().atomShell) { el._b = 1; C().atomShell(el, { z: 11 }); } }
/* §30 — нуклид: A = Z + N */
function mount_p30() {
var el = $('c-nuclide'); if (!el || el._b) return; el._b = 1;
el.innerHTML = '<div class="fld"><label>Z (протоны)</label><input type="number" id="nz" value="6" min="1" max="100" style="width:80px"><label>A (масс. число)</label><input type="number" id="na" value="12" min="1" max="250" style="width:80px"><button class="btn primary" id="nz-go">Найти N</button></div><div class="out" id="n-out"></div>';
function calc() {
var z = parseInt($('nz').value, 10), a = parseInt($('na').value, 10);
if (isNaN(z) || isNaN(a) || a < z) { $('n-out').className = 'out bad'; $('n-out').textContent = 'Проверь: A не может быть меньше Z.'; return; }
var nu = C().nuclide(z, a);
$('n-out').className = 'out ok';
$('n-out').innerHTML = '<span class="bd">Элемент: <b>' + nu.sym + '</b><br>Протонов Z = ' + z + '<br>Нейтронов N = A Z = ' + a + ' ' + z + ' = <b>' + nu.N + '</b><br>Нуклид: ' + nu.sym + '-' + a + '</span>';
}
$('nz-go').addEventListener('click', calc); calc();
}
/* §31 — средняя Ar по изотопам */
function mount_p31() {
var el = $('c-iso'); if (!el || el._b) return; el._b = 1;
el.innerHTML = '<div class="fld"><label>Изотоп 1: масса</label><input type="number" id="im1" value="35" style="width:70px"><label>доля, %</label><input type="number" id="ip1" value="75" style="width:70px"></div>'
+ '<div class="fld"><label>Изотоп 2: масса</label><input type="number" id="im2" value="37" style="width:70px"><label>доля, %</label><input type="number" id="ip2" value="25" style="width:70px"><button class="btn primary" id="iso-go">Средняя A_r</button></div><div class="out" id="iso-out">Пример: хлор — смесь ³⁵Cl (75%) и ³⁷Cl (25%).</div>';
function calc() {
var m1 = parseFloat($('im1').value), p1 = parseFloat($('ip1').value), m2 = parseFloat($('im2').value), p2 = parseFloat($('ip2').value);
if ([m1, p1, m2, p2].some(isNaN)) { $('iso-out').className = 'out bad'; $('iso-out').textContent = 'Введите все значения.'; return; }
var ar = (m1 * p1 + m2 * p2) / (p1 + p2);
$('iso-out').className = 'out ok';
$('iso-out').innerHTML = '<span class="bd">A_r = (' + m1 + '·' + p1 + ' + ' + m2 + '·' + p2 + ') / 100 = <b>' + (Math.round(ar * 100) / 100).toString().replace('.', ',') + '</b></span>';
}
$('iso-go').addEventListener('click', calc); calc();
}
/* §33 — строение электронных оболочек (та же модель, акцент на слои) */
function mount_p33() { var el = $('c-shells'); if (el && !el._b && C().atomShell) { el._b = 1; C().atomShell(el, { z: 17 }); } }
/* §34 — периодичность: ПСХЭ с подсветкой периодов/групп */
function mount_p34() {
var el = $('c-trend'); if (!el || el._b || !C().miniPeriodic) return; el._b = 1;
var modes = [{ k: { period: 2 }, l: 'Период 2 →' }, { k: { period: 3 }, l: 'Период 3 →' }, { k: { group: 1 }, l: 'Группа I ↓' }, { k: { group: 17 }, l: 'Группа VII ↓' }, { k: null, l: 'Сброс' }];
var bar = document.createElement('div'); bar.className = 'pt-modes';
var grid = document.createElement('div'), note = document.createElement('div'); note.className = 'out';
var TXT = {
'p2': 'По периоду слева направо: радиус атома уменьшается, металлические свойства ослабевают, неметаллические — усиливаются.',
'p3': 'То же в 3-м периоде: от активного металла Na к активному неметаллу Cl.',
'g1': 'Вниз по группе: радиус растёт, металлические свойства усиливаются (Li → Na → K → ...).',
'g17': 'Вниз по группе галогенов: неметаллические свойства ослабевают (F самый активный).'
};
modes.forEach(function (m) {
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);
var key = m.k ? (m.k.period ? 'p' + m.k.period : 'g' + m.k.group) : null;
note.textContent = key && TXT[key] ? TXT[key] : 'Выбери период или группу — увидишь тренд свойств.';
});
bar.appendChild(b);
});
el.appendChild(bar); el.appendChild(grid); el.appendChild(note);
var api = C().miniPeriodic(grid, {});
note.textContent = 'Выбери период или группу — увидишь, как меняются свойства.';
}
/* §35 — паспорт элемента: клик в ПСХЭ → полная характеристика */
function mount_p35() {
var el = $('c-passport'); if (!el || el._b || !C().miniPeriodic) return; el._b = 1;
var grid = document.createElement('div'), panel = document.createElement('div'); panel.className = 'passport';
panel.innerHTML = '<h4>Паспорт элемента</h4><div style="color:var(--muted);font-size:.85rem">Кликни элемент в системе.</div>';
el.appendChild(grid); el.appendChild(panel);
C().miniPeriodic(grid, { onClick: function (sym, info) {
var sh = C().shellConfig(info.z);
var catRu = info.cat === 'metal' ? 'металл' : info.cat === 'nonmetal' ? 'неметалл' : info.cat === 'metalloid' ? 'металлоид' : 'инертный газ';
panel.innerHTML = '<h4>Паспорт: ' + sym + '</h4><div class="passport-grid">'
+ '<div><b>Z</b>: ' + info.z + '</div>'
+ '<div><b>A_r</b>: ' + (info.ar || '—') + '</div>'
+ '<div><b>Период</b>: ' + info.p + '</div>'
+ '<div><b>Группа</b>: ' + info.g + '</div>'
+ '<div><b>Тип</b>: ' + catRu + '</div>'
+ '<div><b>Протонов</b>: ' + info.z + '</div>'
+ '<div><b>Электронов</b>: ' + info.z + '</div>'
+ '<div><b>Слои e⁻</b>: ' + sh.join(' ) ') + '</div>'
+ '<div><b>Внешних e⁻</b>: ' + sh[sh.length - 1] + '</div>'
+ '</div>';
if (W.chem8RenderMath) try { W.chem8RenderMath(panel); } catch (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 };
})(window);
+58 -1
View File
@@ -638,6 +638,58 @@
};
}
/* ──────────────────────────────────────────────────────────────────────────
Строение атома (Phase 4).
shellConfig(z) -> [2,8,1] распределение электронов по слоям (школьное,
корректно для Z 1–20; далее приближение). zSym(z) -> символ из ПСХЭ.
────────────────────────────────────────────────────────────────────────── */
var _ZSYM = null;
function zSym(z) {
if (!_ZSYM) { _ZSYM = {}; PT.concat(PT7).forEach(function (e) { _ZSYM[e[3]] = e[0]; }); }
return _ZSYM[z] || '?';
}
function shellConfig(z) {
var caps = [2, 8, 8, 18, 18, 32], out = [], rem = z;
for (var i = 0; i < caps.length && rem > 0; i++) { var t = Math.min(caps[i], rem); out.push(t); rem -= t; }
return out;
}
function nuclide(z, a) { return { Z: z, A: a, N: a - z, sym: zSym(z) }; }
/* atomShell(mount, {z}) — модель атома (ядро + электронные слои). Слайдер Z 1–20. */
function atomShell(mount, opts) {
var host = typeof mount === 'string' ? global.document.querySelector(mount) : mount;
if (!host) return null;
opts = opts || {};
host.innerHTML = '<div class="fld"><label>Элемент (Z)</label><input type="range" class="as-z" min="1" max="20" value="' + (opts.z || 11) + '"><span class="as-zl bd"></span></div><div class="as-stage"></div><div class="out as-cfg"></div>';
var zr = host.querySelector('.as-z'), zl = host.querySelector('.as-zl'), stage = host.querySelector('.as-stage'), cfg = host.querySelector('.as-cfg');
function draw() {
var z = +zr.value, sym = zSym(z), ar = arOf(sym), n = Math.max(0, Math.round(ar) - z), sh = shellConfig(z);
zl.textContent = sym + ' (Z=' + z + ')';
var cx = 150, cy = 110, R = 18 + sh.length * 26;
var svg = '<svg viewBox="0 0 300 ' + (cy * 2) + '" class="as-svg">';
// слои
for (var s = 0; s < sh.length; s++) {
var r = 30 + s * 26;
svg += '<circle cx="' + cx + '" cy="' + cy + '" r="' + r + '" fill="none" stroke="currentColor" stroke-width="1" opacity=".35"/>';
var cnt = sh[s];
for (var e = 0; e < cnt; e++) {
var ang = (e / cnt) * Math.PI * 2 - Math.PI / 2;
var ex = cx + r * Math.cos(ang), ey = cy + r * Math.sin(ang);
svg += '<circle cx="' + ex.toFixed(1) + '" cy="' + ey.toFixed(1) + '" r="4" fill="var(--pri)"/>';
}
}
svg += '<circle cx="' + cx + '" cy="' + cy + '" r="18" fill="var(--pri)" opacity=".18" stroke="var(--pri)" stroke-width="1.5"/>';
svg += '<text x="' + cx + '" y="' + (cy - 2) + '" text-anchor="middle" font-size="11" font-weight="800" fill="currentColor">' + z + 'p⁺</text>';
svg += '<text x="' + cx + '" y="' + (cy + 11) + '" text-anchor="middle" font-size="10" fill="currentColor">' + n + 'n⁰</text>';
svg += '</svg>';
stage.innerHTML = svg;
cfg.className = 'out as-cfg';
cfg.innerHTML = '<span class="bd"><b>' + sym + '</b>: распределение электронов по слоям — ' + sh.join(' ) ') + '<br>Слоёв: ' + sh.length + ' · внешних электронов: ' + sh[sh.length - 1] + ' · протонов: ' + z + ', нейтронов: ' + n + '</span>';
}
zr.addEventListener('input', draw); draw();
return { el: host, draw: draw };
}
/* ---- Каркасы-заглушки интерактивных виджетов (реализуются по фазам) ---- */
function notImplemented(name) {
return function () {
@@ -670,7 +722,12 @@
activitySeries: activitySeries, // §14,20 — ряд активности металлов
// готово (Phase 3 — периодический закон)
miniPeriodic: miniPeriodic, // §26,28,34 — интерактивная ПСХЭ с подсветкой
// заглушки (см. план, разд. B) — наполняются в Phase 4–6
// готово (Phase 4 — строение атома)
atomShell: atomShell, // §29,33 — модель атома (слои электронов)
shellConfig: shellConfig, // распределение электронов по слоям
nuclide: nuclide, // §30 — A=Z+N, нуклид
zSym: zSym, // Z → символ элемента
// заглушки (см. план, разд. B) — наполняются в Phase 5–6
oxStateCalc: notImplemented('oxStateCalc'), // §42 — калькулятор степени окисления
redoxBalancer: notImplemented('redoxBalancer'), // §44 — e-баланс ОВР
orbitalDiagram: notImplemented('orbitalDiagram'), // §33 — орбитальная диаграмма
+193 -100
View File
@@ -6,131 +6,224 @@
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Химия 8 · Глава 3 · «Строение атома и периодичность изменения свойств»</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Unbounded:wght@700;800;900&display=swap" rel="stylesheet">
<title>Химия 8 · Глава 3 · «Строение атома»</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Unbounded:wght@700;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<link rel="stylesheet" href="/css/chem8-textbook.css">
<style>
/* Глава 3 — blue */
:root{ --pri:#2563eb; --pri-d:#1d4ed8; --pri-l:#60a5fa; --pri-soft:#dbeafe; --sec-acc:#2563eb; --sec-acc-d:#1d4ed8; --sec-acc-soft:#dbeafe; }
html.dark{ --bg:#0a1428; --card:#102137; --card-soft:#13294a; --text:#dbeafe; --muted:#93c5fd; --border:#1e3a5f; --pri-soft:rgba(37,99,235,.22); --sec-acc-soft:rgba(37,99,235,.22); }
.hdr{background:linear-gradient(110deg,#1e3a8a 0%,#2563eb 55%,#60a5fa 100%)}
.hdr::before{content:'ГЛАВА 3'}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
<script src="/js/api.js" defer></script>
<script src="/js/xp.js" defer></script>
<script src="/js/biochem-core.js" defer></script>
<script src="/js/chem8_svg.js" defer></script>
<style>
:root{
--bg:#fffbeb; --card:#fff; --text:#1c1917; --muted:#78716c; --border:#e7e5e4;
--pri:#2563eb; --pri-d:#1d4ed8; --pri-l:#60a5fa; --pri-soft:#dbeafe;
--sh:0 4px 16px rgba(0,0,0,.06); --sh-h:0 12px 32px rgba(0,0,0,.12);
}
html.dark{ --bg:#0a1428; --card:#102137; --text:#dbeafe; --muted:#a8a29e; --border:#3a3026; --pri-soft:rgba(0,0,0,.2); }
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100vh}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;transition:background .25s,color .25s}
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hdr{position:relative;background:linear-gradient(110deg,#1d4ed8 0%,#2563eb 55%,#60a5fa 100%);color:#fff;padding:34px 24px 30px;overflow:hidden;border-bottom:2px solid rgba(255,255,255,.18)}
.hdr::before{content:'ГЛАВА 3';position:absolute;right:-12px;top:50%;transform:translateY(-50%);font-family:'Unbounded',sans-serif;font-size:clamp(4rem,13vw,10rem);font-weight:900;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.13);line-height:1;pointer-events:none;user-select:none;z-index:0}
.hdr-inner{position:relative;z-index:1;max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hdr-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(255,255,255,.16);border-radius:9px;color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;transition:background .15s}
.hdr-back:hover{background:rgba(255,255,255,.26)}
.hdr-kicker{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;opacity:.85}
.hdr h1{font-family:'Outfit',sans-serif;font-size:1.55rem;font-weight:900;letter-spacing:-.01em;line-height:1.25;margin-top:3px}
.hdr-side{margin-left:auto}
.hdr-btn{padding:8px 12px;background:rgba(255,255,255,.16);border:none;color:#fff;border-radius:9px;cursor:pointer;font-weight:600;font-size:.82rem;display:inline-flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}
.hdr-btn:hover{background:rgba(255,255,255,.26)}
main{max-width:1000px;margin:0 auto;padding:28px 24px 60px}
.wip{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,var(--pri-soft),rgba(0,0,0,.02));border:1.5px dashed var(--pri);border-radius:16px;padding:18px 20px;margin-bottom:26px}
.wip-ic{width:42px;height:42px;border-radius:11px;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wip-ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wip h2{font-family:'Outfit',sans-serif;font-size:1.05rem;color:var(--pri-d);margin-bottom:4px}
html.dark .wip h2{color:var(--pri-l)}
.wip p{font-size:.9rem;color:var(--muted);line-height:1.55}
.ol-title{font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:800;margin:6px 0 14px;display:flex;align-items:center;gap:9px}
.ol-title svg{width:20px;height:20px;stroke:var(--pri);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ol-list{list-style:none;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--sh)}
.ol-para,.ol-note{display:flex;gap:12px;align-items:baseline;padding:12px 18px;border-bottom:1px solid var(--border)}
.ol-list li:last-child{border-bottom:0}
.ol-num{flex-shrink:0;min-width:46px;font-weight:800;color:var(--pri);font-size:.92rem}
.ol-name{font-size:.94rem;color:var(--text)}
.ol-note{background:var(--pri-soft);align-items:center;gap:10px}
.ol-note-ic{display:inline-flex;color:var(--pri-d)}
html.dark .ol-note-ic{color:var(--pri-l)}
.ol-note-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ol-note span:last-child{font-size:.88rem;font-weight:600;color:var(--pri-d)}
html.dark .ol-note span:last-child{color:var(--pri-l)}
.foot{text-align:center;padding:24px 16px;color:var(--muted);font-size:.78rem;border-top:1px solid var(--border);margin-top:30px}
</style>
<script src="/js/chem8_ch3_widgets.js" defer></script>
<script src="/js/chem8_engine.js" defer></script>
</head>
<body>
<header class="hdr">
<div class="hdr-inner">
<a href="/textbook/chemistry-8" class="hdr-back">
<svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
К разделам
</a>
<div class="hdr-row">
<div>
<div class="hdr-kicker">Глава 3 &middot; § 2935</div>
<h1>Строение атома и периодичность изменения свойств</h1>
<h1>Химия 8 · Глава 3</h1>
<div class="hdr-sub">Строение атома, нуклиды и изотопы, электронные облака и орбитали, электронные оболочки, периодичность</div>
</div>
<div class="hdr-side">
<button id="theme-btn" class="hdr-btn" title="Сменить тему">
<svg class="ic" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
<span id="theme-lab">Тёмная</span>
</button>
<a href="/textbook/chemistry-8" class="hdr-btn"><svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg> К разделам</a>
<button id="theme-btn" class="hdr-btn"><svg class="ic" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg><span id="theme-lab">Тёмная</span></button>
</div>
</div>
</header>
<main>
<section class="wip">
<div class="wip-ic">
<svg viewBox="0 0 24 24"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4l-6.3 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2-2 2.6-2.6z"/></svg>
</div>
<div>
<h2>Раздел в разработке</h2>
<p>Интерактивное наглядное наполнение этого раздела (теория, модели, симуляторы, тренажёры и боссы) добавляется поэтапно. Ниже — план параграфов раздела согласно учебнику.</p>
</div>
</section>
<main class="main">
<div class="col-main">
<section class="hero">
<h2>Что внутри атома</h2>
<p>Атом неделим химически, но состоит из ядра (протоны и нейтроны) и движущихся вокруг электронов. Именно строение электронных оболочек объясняет, почему элементы ведут себя так, а не иначе — и почему работает периодический закон.</p>
<div class="hero-row">
<button class="btn-primary" onclick="goTo('p29')"><svg class="ic" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg> Начать § 29</button>
<div class="hero-progress"><span class="hp-label">Прогресс главы</span><div class="hp-bar"><div id="hero-hp-fill" class="hp-fill"></div></div><span id="hero-hp-text" class="hp-text">0%</span></div>
<div id="hero-xp-badge" class="hero-xp-badge"></div>
</div>
</section>
<div class="ol-title">
<svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></svg>
Содержание раздела
<section class="psel"><div class="psel-title">Параграфы главы</div><div id="psel-grid" class="psel-grid"></div></section>
<section id="sec-p29" class="sec"><div class="sec-header"><span class="sec-num">§ 29</span><h2 class="sec-h">Строение атома. Атомный номер</h2></div><div id="p29-body"></div></section>
<section id="sec-p30" class="sec"><div class="sec-header"><span class="sec-num">§ 30</span><h2 class="sec-h">Массовое число атома. Нуклиды</h2></div><div id="p30-body"></div></section>
<section id="sec-p31" class="sec"><div class="sec-header"><span class="sec-num">§ 31</span><h2 class="sec-h">Изотопы. Явление радиоактивности</h2></div><div id="p31-body"></div></section>
<section id="sec-p32" class="sec"><div class="sec-header"><span class="sec-num">§ 32</span><h2 class="sec-h">Состояние электронов. Электронное облако. Орбиталь</h2></div><div id="p32-body"></div></section>
<section id="sec-p33" class="sec"><div class="sec-header"><span class="sec-num">§ 33</span><h2 class="sec-h">Строение электронных оболочек атомов</h2></div><div id="p33-body"></div></section>
<section id="sec-p34" class="sec"><div class="sec-header"><span class="sec-num">§ 34</span><h2 class="sec-h">Периодичность изменения свойств атомов</h2></div><div id="p34-body"></div></section>
<section id="sec-p35" class="sec"><div class="sec-header"><span class="sec-num">§ 35</span><h2 class="sec-h">Характеристика элемента по положению в ПС</h2></div><div id="p35-body"></div></section>
<section id="sec-final1" class="sec"><div class="sec-header"><span class="sec-num"></span><h2 class="sec-h">Финал главы</h2></div><div id="final1-body"></div></section>
</div>
<ul class="ol-list">
<li class="ol-para"><span class="ol-num">§ 29</span><span class="ol-name">Строение атома. Атомный номер химического элемента</span></li>
<li class="ol-para"><span class="ol-num">§ 30</span><span class="ol-name">Массовое число атома. Нуклиды</span></li>
<li class="ol-para"><span class="ol-num">§ 31</span><span class="ol-name">Изотопы. Явление радиоактивности</span></li>
<li class="ol-para"><span class="ol-num">§ 32</span><span class="ol-name">Состояние электронов в атоме. Электронное облако. Атомная орбиталь</span></li>
<li class="ol-para"><span class="ol-num">§ 33</span><span class="ol-name">Строение электронных оболочек атомов</span></li>
<li class="ol-para"><span class="ol-num">§ 34</span><span class="ol-name">Периодичность изменения свойств атомов химических элементов</span></li>
<li class="ol-para"><span class="ol-num">§ 35</span><span class="ol-name">Характеристика химического элемента по его положению в периодической системе</span></li>
</ul>
<aside class="col-side"><div id="sidebar-content"></div></aside>
</main>
<footer class="foot">
Интерактивный учебник «Химия — 8 класс» &middot; Глава 3 &middot; LearnSpace
</footer>
<footer class="foot">Интерактивный учебник «Химия — 8 класс» · Глава 3 · «Строение атома» · LearnSpace</footer>
<div id="ach-popup" class="ach-popup"><svg viewBox="0 0 24 24"><polygon points="12 2 22 20 2 20"/></svg><span id="ach-text">Достижение!</span></div>
<script>
'use strict';
const _TB_SLUG = 'chemistry-8-ch3';
(function(){
var saved = localStorage.getItem('chemistry8_theme') || localStorage.getItem('theme') || 'light';
if (saved === 'dark') document.documentElement.classList.add('dark');
var lab = document.getElementById('theme-lab');
if (lab) lab.textContent = saved === 'dark' ? 'Светлая' : 'Тёмная';
document.getElementById('theme-btn').addEventListener('click', function(){
document.documentElement.classList.toggle('dark');
var dark = document.documentElement.classList.contains('dark');
localStorage.setItem('chemistry8_theme', dark ? 'dark' : 'light');
localStorage.setItem('theme', dark ? 'dark' : 'light');
if (lab) lab.textContent = dark ? 'Светлая' : 'Тёмная';
});
})();
window.CHEM8_CFG = { slug:'chemistry-8-ch3', themeKey:'chemistry8_theme', xpKey:'chemistry8_xp', progKey:'chemistry8_ch3_progress', achKey:'chemistry8_ch3_ach' };
window.PARAS = [
{id:'p29',num:'§ 29',name:'Строение атома',sub:'ядро + e⁻'},
{id:'p30',num:'§ 30',name:'Массовое число. Нуклиды',sub:'A = Z + N'},
{id:'p31',num:'§ 31',name:'Изотопы. Радиоактивность',sub:'тот же Z, разный N'},
{id:'p32',num:'§ 32',name:'Электронное облако. Орбиталь',sub:'s, p, d'},
{id:'p33',num:'§ 33',name:'Электронные оболочки',sub:'слои, 2n²'},
{id:'p34',num:'§ 34',name:'Периодичность свойств',sub:'тренды'},
{id:'p35',num:'§ 35',name:'Характеристика элемента',sub:'паспорт'},
{id:'final1',num:'★',name:'Финал главы',sub:'босс · ачивка',final:true}
];
window.ACH_LABELS = { start:'Начало главы 3!', final1_tasks:'Строение атома освоено!' };
['p29','p30','p31','p32','p33','p34','p35'].forEach(function(id){ window.ACH_LABELS[id+'_done']=id.toUpperCase()+' изучен!'; });
window.SIDEBARS = {
p29:{title:'§29 Атом',rows:[['Ядро','протоны p⁺ + нейтроны n⁰'],['Электроны','e⁻ вокруг ядра'],['Z','= число протоков = заряд ядра'],['Атом','нейтрален: p⁺ = e⁻']]},
p30:{title:'§30 Нуклиды',rows:[['A','массовое число'],['A = Z + N',''],['Нуклид','атом с данными Z и N']]},
p31:{title:'§31 Изотопы',rows:[['Изотопы','один Z, разный N'],['Пример','³⁵Cl и ³⁷Cl'],['A_r','среднее по изотопам']]},
p32:{title:'§32 Орбиталь',rows:[['Облако','область вероятного нахождения e⁻'],['s','сфера'],['p','гантель']]},
p33:{title:'§33 Оболочки',rows:[['Слой','уровень энергии'],['Ёмкость','2n² электронов'],['Внешние e⁻','определяют свойства']]},
p34:{title:'§34 Периодичность',rows:[['По периоду →','радиус ↓, неметалл ↑'],['По группе ↓','радиус ↑, металл ↑']]},
p35:{title:'§35 Характеристика',rows:[['Положение','период, группа'],['Строение','слои электронов'],['Свойства','Me/неMe, валентность']]},
final1:{title:'Финал главы 3',rows:[['§§2935','строение атома'],['Награда','ачивка + XP']]}
};
window.TIPS = [
{sec:'p29',html:'Атом состоит из ядра (протоны + нейтроны) и электронов. Число протонов = заряду ядра = порядковому номеру Z.'},
{sec:'p30',html:'Массовое число A = число протонов + число нейтронов = Z + N.'},
{sec:'p31',html:'Изотопы — атомы одного элемента с разным числом нейтронов (одинаковый Z, разный A).'},
{sec:'p32',html:'Электронное облако (орбиталь) — область, где электрон бывает чаще всего. s-облако — сфера, p-облако — гантель.'},
{sec:'p33',html:'Электроны располагаются по слоям; ёмкость слоя — 2n² электронов. Внешний слой определяет химические свойства.'},
{sec:'p34',html:'По периоду слева направо радиус атома уменьшается; вниз по группе — растёт.'},
{sec:'p35',html:'Зная положение элемента, можно описать строение его атома и предсказать свойства.'},
{sec:'final1',html:'Z, A=Z+N, изотопы, слои электронов, периодичность — повтори перед боссом.'}
];
window.POOLS = {
p29:[
{q:'Из чего состоит ядро атома?',opts:['Из электронов','Из протонов и нейтронов','Только из протонов','Из молекул'],a:1,ex:'Ядро = протоны p⁺ + нейтроны n⁰.'},
{q:'Чему равно число протонов в атоме?',opts:['Массовому числу','Порядковому номеру Z','Числу нейтронов','Номеру периода'],a:1,ex:'Число протонов = Z (заряд ядра).'},
{q:'Сколько электронов в нейтральном атоме натрия (Z=11)?',hint:'= числу протонов',unit:'',a:11,ex:'Атом нейтрален: e⁻ = p⁺ = 11.'}
],
p30:[
{q:'Массовое число A равно…',opts:['Z N','Z + N','N Z','Z · N'],a:1,ex:'A = Z + N.'},
{q:'В атоме углерода Z=6, A=12. Сколько нейтронов?',hint:'N = A Z',unit:'',a:6,ex:'12 6 = 6.'},
{q:'В атоме ²³Na (Z=11) число нейтронов равно…',hint:'23 11',unit:'',a:12,ex:'N = 23 11 = 12.'}
],
p31:[
{q:'Изотопы — это атомы одного элемента с разным числом…',opts:['Протонов','Электронов','Нейтронов','Слоёв'],a:2,ex:'Разное число нейтронов → разное A.'},
{q:'У изотопов одинаковое число…',opts:['Нейтронов','Протонов (Z)','Массовое число','—'],a:1,ex:'Одинаковый Z (один элемент).'},
{q:'Хлор: ³⁵Cl (75%) и ³⁷Cl (25%). Средняя A_r ≈',hint:'(35·75+37·25)/100',unit:'',a:35.5,tol:0.02,ex:'35,5.'}
],
p32:[
{q:'Электронное облако (орбиталь) — это…',opts:['Точная орбита электрона','Область наиболее вероятного нахождения электрона','Ядро атома','Слой нейтронов'],a:1,ex:'Орбиталь — область вероятного нахождения e⁻.'},
{q:'Какую форму имеет s-орбиталь?',opts:['Гантель','Сфера','Кольцо','Куб'],a:1,ex:'s-облако — сферическое.'},
{q:'Какую форму имеет p-орбиталь?',opts:['Сфера','Гантель','Спираль','Плоскость'],a:1,ex:'p-облако — гантель (объёмная восьмёрка).'}
],
p33:[
{q:'Сколько электронов максимально на первом слое (n=1)?',hint:'2n², n=1',unit:'',a:2,ex:'2·1² = 2.'},
{q:'Сколько электронов максимально на втором слое (n=2)?',hint:'2n², n=2',unit:'',a:8,ex:'2·2² = 8.'},
{q:'Распределение электронов в атоме натрия (Z=11):',opts:['2,9','2,8,1','8,3','2,8,8'],a:1,ex:'Na: 2 ) 8 ) 1.'},
{q:'Что определяет химические свойства атома?',opts:['Число нейтронов','Внешние электроны','Масса ядра','Цвет'],a:1,ex:'Электроны внешнего слоя.'}
],
p34:[
{q:'По периоду слева направо радиус атома…',opts:['Растёт','Уменьшается','Не меняется','Удваивается'],a:1,ex:'Заряд ядра растёт, притягивает сильнее → радиус ↓.'},
{q:'Вниз по группе металлические свойства…',opts:['Усиливаются','Ослабевают','Исчезают','Не меняются'],a:0,ex:'Радиус растёт, e⁻ легче отдаётся → металл ↑.'},
{q:'Самый активный неметалл (правый верх ПСХЭ):',opts:['Натрий','Фтор','Железо','Гелий'],a:1,ex:'Фтор — самый активный неметалл.'}
],
p35:[
{q:'Что можно определить по положению элемента в ПСХЭ?',opts:['Только цвет','Строение атома и свойства','Только массу','Ничего'],a:1,ex:'Период, группа → строение и свойства.'},
{q:'Элемент 3-го периода, II группы — это…',opts:['Na','Mg','Al','Ca'],a:1,ex:'Mg: период 3, группа II.'},
{q:'Сколько внешних электронов у элемента VII группы?',hint:'= номер группы',unit:'',a:7,ex:'7 внешних электронов.'}
],
final1:[
{q:'Сколько нейтронов в ³⁹K (Z=19)?',hint:'39 19',unit:'',a:20,ex:'N = 20.'},
{q:'Изотопы отличаются числом…',opts:['Протонов','Электронов','Нейтронов','Групп'],a:2,ex:'Числом нейтронов.'},
{q:'Максимум электронов на 3-м слое (2n², n=3):',hint:'2·9',unit:'',a:18,ex:'18.'},
{q:'Распределение e⁻ в атоме кислорода (Z=8):',opts:['2,6','2,8','6,2','8'],a:0,ex:'O: 2 ) 6.'},
{q:'По периоду слева направо неметаллические свойства…',opts:['Ослабевают','Усиливаются','Не меняются','Исчезают'],a:1,ex:'Усиливаются.'},
{q:'Число внешних электронов у элемента I группы:',hint:'',unit:'',a:1,ex:'1.'}
]
};
function rememberBox(items){ return '<div class="remember-box"><div class="remember-box-title"><svg class="ic" viewBox="0 0 24 24" style="width:15px;height:15px"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> Запомни!</div><ul>'+items.map(function(t){return '<li>'+t+'</li>';}).join('')+'</ul></div>'; }
function qList(items){ return '<div class="section-title">Вопросы и задания</div><ol class="q-list">'+items.map(function(t){return '<li>'+t+'</li>';}).join('')+'</ol>'; }
function flag(title, help, inner){ return '<div class="flag-card"><div class="flag-title">'+title+'</div><div class="flag-help">'+help+'</div>'+inner+'</div>'; }
function wgt(title, inner){ return '<div class="wgt"><div class="wgt-h"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="9" fill="none"/></svg> '+title+'</div>'+inner+'</div>'; }
function hero(ph,label,title,formula,desc,tags){ return '<div class="para-hero ph-'+ph+'"><div class="ph-label">'+label+'</div><h2>'+title+'</h2>'+(formula?'<div class="ph-formula">'+formula+'</div>':'')+'<div class="ph-desc">'+desc+'</div>'+(tags?'<div class="ph-tags">'+tags.map(function(t){return '<span class="ph-tag">'+t+'</span>';}).join('')+'</div>':'')+'</div>'; }
window.BUILDERS = { p29:bp29, p30:bp30, p31:bp31, p32:bp32, p33:bp33, p34:bp34, p35:bp35, final1:bfinal };
function bp29(){ document.getElementById('p29-body').innerHTML =
hero(4,'§ 29 · Глава 3','Строение атома. Атомный номер','Z = p⁺ = e⁻','Атом неделим химически, но имеет сложное строение: крошечное ядро и облако электронов.',['ядро','электроны','Z'])
+makeCard('theory','Состав атома','§29','<p>Атом состоит из положительно заряженного <b>ядра</b> (протоны p⁺ и нейтроны n⁰) и движущихся вокруг него <b>электронов</b> e⁻. Почти вся масса сосредоточена в ядре.</p><div class="def-box">Число протонов в ядре = <b>заряд ядра</b> = <b>порядковый номер Z</b>. Атом электронейтрален: число электронов равно числу протонов.</div>')
+flag('Модель атома: двигай Z','Меняй порядковый номер — собирается ядро и электронные слои элемента.','<div id="c-atom"></div>')
+rememberBox(['Z = число протонов = число электронов в нейтральном атоме.','Масса атома сосредоточена в ядре.'])
+qList(['Сколько электронов в атоме серы (Z=16)?','Чем определяется заряд ядра?'])
+secNav(null,'p30')+readButton('p29'); wireReadBtn('p29'); }
function bp30(){ document.getElementById('p30-body').innerHTML =
hero(5,'§ 30 · Глава 3','Массовое число атома. Нуклиды','A = Z + N','Как считают массу ядра и что такое нуклид — конкретный сорт атома.',['A','нуклид','нейтроны'])
+makeCard('theory','Массовое число','§30','<div class="def-box"><b>Массовое число</b> A = число протонов + число нейтронов = Z + N. Отсюда число нейтронов N = A Z.</div><p><b>Нуклид</b> — вид атомов с определённым числом протонов и нейтронов (например, ¹²C, ²³Na).</p>')
+wgt('Калькулятор нуклида: A = Z + N','<div id="c-nuclide"></div>')
+rememberBox(['A — целое число (масса в а.е.м. ≈ A).','N = A − Z; протонов всегда Z.'])
+qList(['Сколько нейтронов в ²⁷Al (Z=13)?','Чем нуклид отличается от элемента?'])
+secNav('p29','p31')+readButton('p30'); wireReadBtn('p30'); }
function bp31(){ document.getElementById('p31-body').innerHTML =
hero(6,'§ 31 · Глава 3','Изотопы. Явление радиоактивности','³⁵Cl, ³⁷Cl','Почему атомная масса хлора — 35,5, и откуда берётся радиоактивность.',['изотопы','A_r','распад'])
+makeCard('theory','Изотопы','§31','<p><b>Изотопы</b> — атомы одного элемента с <b>одинаковым числом протонов</b> (Z), но <b>разным числом нейтронов</b> (разное A). Относительная атомная масса элемента — среднее по природной смеси изотопов.</p><p>Ядра некоторых изотопов самопроизвольно распадаются, испуская излучение, — это <b>радиоактивность</b>.</p>')
+wgt('Средняя A_r по изотопам','<div id="c-iso"></div>')
+rememberBox(['Изотопы: один Z, разный N (и A).','A_r хлора = 35,5 — среднее по ³⁵Cl и ³⁷Cl.'])
+qList(['Чем похожи и чем отличаются изотопы?','Почему A_r многих элементов — дробные?'])
+secNav('p30','p32')+readButton('p31'); wireReadBtn('p31'); }
function bp32(){ document.getElementById('p32-body').innerHTML =
hero(7,'§ 32 · Глава 3','Состояние электронов. Электронное облако. Орбиталь','s, p, d','Электрон — не шарик на орбите, а «облако вероятности». Его форму описывает орбиталь.',['облако','s','p'])
+makeCard('theory','Электронное облако','§32','<p>Электрон в атоме движется не по чёткой орбите, а образует <b>электронное облако</b> — область, где он бывает чаще всего. <b>Орбиталь</b> — это форма такого облака.</p><p><b>s-орбиталь</b> имеет форму сферы, <b>p-орбиталь</b> — форму гантели (объёмной восьмёрки). Есть и более сложные d-орбитали.</p>')
+'<div class="wgt"><div class="wgt-h"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg> Формы электронных облаков</div><div class="orb-row"><div class="orb-item"><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="34" fill="var(--pri)" opacity=".18" stroke="var(--pri)" stroke-width="2"/><circle cx="50" cy="50" r="3" fill="var(--pri)"/></svg><div class="orb-lab">s — сфера</div></div><div class="orb-item"><svg viewBox="0 0 100 100"><ellipse cx="50" cy="30" rx="16" ry="24" fill="var(--pri)" opacity=".18" stroke="var(--pri)" stroke-width="2"/><ellipse cx="50" cy="70" rx="16" ry="24" fill="var(--pri)" opacity=".18" stroke="var(--pri)" stroke-width="2"/><circle cx="50" cy="50" r="3" fill="var(--pri)"/></svg><div class="orb-lab">p — гантель</div></div></div></div>'
+rememberBox(['Орбиталь — форма электронного облака, а не орбита.','s — сфера, p — гантель.'])
+qList(['Какую форму имеет s-облако? А p-облако?','Чем облако отличается от орбиты планеты?'])
+secNav('p31','p33')+readButton('p32'); wireReadBtn('p32'); }
function bp33(){ document.getElementById('p33-body').innerHTML =
hero(8,'§ 33 · Глава 3','Строение электронных оболочек атомов','2n²','Как электроны распределяются по слоям и почему именно внешний слой решает всё.',['слои','2n²','конфигурация'])
+makeCard('theory','Электронные слои','§33','<p>Электроны располагаются вокруг ядра по <b>слоям</b> (энергетическим уровням). Максимальная ёмкость слоя — <b>2n²</b> электронов: 1-й слой — 2, 2-й — 8, 3-й — 18.</p><p>Слои заполняются от ближнего к ядру. <b>Внешний слой</b> (валентные электроны) определяет химические свойства элемента. Например, натрий: 2 ) 8 ) 1 — один внешний электрон, поэтому активный металл.</p>')
+flag('Конструктор электронных оболочек','Двигай Z — увидишь распределение электронов по слоям (2 ) 8 ) 1 …).','<div id="c-shells"></div>')
+rememberBox(['Ёмкость слоя — 2n² электронов.','Свойства определяет внешний (последний) слой.'])
+qList(['Запиши распределение электронов для алюминия (Z=13).','Сколько внешних электронов у кислорода?'])
+secNav('p32','p34')+readButton('p33'); wireReadBtn('p33'); }
function bp34(){ document.getElementById('p34-body').innerHTML =
hero(9,'§ 34 · Глава 3','Периодичность изменения свойств атомов','тренды','Свойства атомов меняются закономерно — по периодам и группам.',['радиус','металличность'])
+makeCard('theory','Закономерности','§34','<p><b>По периоду</b> (слева направо): заряд ядра растёт, радиус атома уменьшается, металлические свойства ослабевают, неметаллические — усиливаются.<br><b>По группе</b> (сверху вниз): число слоёв растёт, радиус увеличивается, металлические свойства усиливаются.</p>')
+flag('ПСХЭ: тренды свойств','Подсвети период или группу — увидишь направление изменения свойств.','<div id="c-trend"></div>')
+rememberBox(['По периоду → неметалл усиливается; по группе ↓ металл усиливается.','Самый активный неметалл — фтор (правый верх).'])
+qList(['Что активнее: Na или K? Почему?','Как меняется радиус по периоду?'])
+secNav('p33','p35')+readButton('p34'); wireReadBtn('p34'); }
function bp35(){ document.getElementById('p35-body').innerHTML =
hero(1,'§ 35 · Глава 3','Характеристика элемента по положению','паспорт элемента','Зная клетку элемента в системе, можно «прочитать» строение его атома и свойства.',['период','группа','паспорт'])
+makeCard('rule','Алгоритм характеристики','§35','<ol><li>Найти Z, период и группу.</li><li>Определить состав атома: протоны = Z, электроны = Z.</li><li>Распределить электроны по слоям (число слоёв = период, внешних e⁻ = группа).</li><li>Сделать вывод: металл/неметалл, валентность, типичные соединения.</li></ol>')
+flag('Генератор «паспорта элемента»','Кликни любой элемент — получишь его полную характеристику по положению в ПСХЭ.','<div id="c-passport"></div>')
+rememberBox(['Период = число слоёв, группа = число внешних электронов.','По положению можно предсказать свойства элемента.'])
+qList(['Дай характеристику атома магния по плану.','Сколько слоёв и внешних электронов у хлора?'])
+secNav('p34','final1')+readButton('p35'); wireReadBtn('p35'); }
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); }
</script>
</body>