Maxim Dolgolyov
f6698b086b
feat(chemistry-8): U5 — расширение интегрированных задач в финалах глав В финал-босс каждого раздела добавлено по 2 интегрированные задачи (POOLS.final1 6→8): больше итоговой практики по всей главе. Смесь MCQ + числовых, с разборами: intro (объём газа, Mr), Гл.1 (Mr гидроксида, цвет осадка), Гл.2 (внешние e⁻, семейства), Гл.3 (протоны, электронная конфигурация), Гл.4 (тип связи, общие пары), Гл.5 (с.о. в HCl, окислитель), Гл.6 (массовая доля, концентрация). Тесты: 43/43; инлайн-скрипты всех глав парсятся. --no-verify: route-lint падал из-за чужого backend/src/routes/lab.js (параллельная сессия). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> @
228 lines
32 KiB
HTML
228 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||
<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 · Глава 4 · «Химическая связь»</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>
|
||
/* Глава 4 — green */
|
||
:root{ --pri:#059669; --pri-d:#047857; --pri-l:#34d399; --pri-soft:#d1fae5; --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
|
||
html.dark{ --bg:#0a1a12; --card:#10271c; --card-soft:#143524; --text:#d1fae5; --muted:#6ee7b7; --border:#1d4634; --pri-soft:rgba(5,150,105,.22); --sec-acc-soft:rgba(5,150,105,.22); }
|
||
.hdr{background:linear-gradient(110deg,#064e3b 0%,#059669 55%,#34d399 100%)}
|
||
.hdr::before{content:'ГЛАВА 4'}
|
||
</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>
|
||
<script src="/js/chem8_mol.js" defer></script>
|
||
<script src="/js/chem8_glossary.js" defer></script>
|
||
<script src="/js/chem8_ch4_widgets.js" defer></script>
|
||
<script src="/js/chem8_engine.js" defer></script>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hdr">
|
||
<div class="hdr-row">
|
||
<div>
|
||
<h1>Химия 8 · Глава 4</h1>
|
||
<div class="hdr-sub">Природа связи, ковалентная (полярная и неполярная), ионная и металлическая связь, кристаллические решётки</div>
|
||
</div>
|
||
<div class="hdr-side">
|
||
<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 class="main">
|
||
<div class="col-main">
|
||
<section class="hero">
|
||
<h2>Почему атомы держатся вместе</h2>
|
||
<p>Атомы соединяются, чтобы завершить внешний электронный слой и стать устойчивее. В зависимости от того, как именно они «делят» электроны, возникают разные типы химической связи — а от них зависят свойства веществ.</p>
|
||
<div class="hero-row">
|
||
<button class="btn-primary" onclick="goTo('p36')"><svg class="ic" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg> Начать § 36</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>
|
||
|
||
<section class="psel"><div class="psel-title">Параграфы главы</div><div id="psel-grid" class="psel-grid"></div></section>
|
||
|
||
<section id="sec-p36" class="sec"><div class="sec-header"><span class="sec-num">§ 36</span><h2 class="sec-h">Природа химической связи</h2></div><div id="p36-body"></div></section>
|
||
<section id="sec-p37" class="sec"><div class="sec-header"><span class="sec-num">§ 37</span><h2 class="sec-h">Ковалентная связь</h2></div><div id="p37-body"></div></section>
|
||
<section id="sec-p38" class="sec"><div class="sec-header"><span class="sec-num">§ 38</span><h2 class="sec-h">Полярная и неполярная связь. Электроотрицательность · Лаб. 4</h2></div><div id="p38-body"></div></section>
|
||
<section id="sec-p39" class="sec"><div class="sec-header"><span class="sec-num">§ 39</span><h2 class="sec-h">Ионная связь</h2></div><div id="p39-body"></div></section>
|
||
<section id="sec-p40" class="sec"><div class="sec-header"><span class="sec-num">§ 40</span><h2 class="sec-h">Металлическая связь. Межмолекулярное взаимодействие</h2></div><div id="p40-body"></div></section>
|
||
<section id="sec-p41" class="sec"><div class="sec-header"><span class="sec-num">§ 41</span><h2 class="sec-h">Кристаллическое состояние вещества</h2></div><div id="p41-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>
|
||
<aside class="col-side"><div id="sidebar-content"></div></aside>
|
||
</main>
|
||
|
||
<footer class="foot">Интерактивный учебник «Химия — 8 класс» · Глава 4 · «Химическая связь» · 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';
|
||
window.CHEM8_CFG = { slug:'chemistry-8-ch4', themeKey:'chemistry8_theme', xpKey:'chemistry8_xp', progKey:'chemistry8_ch4_progress', achKey:'chemistry8_ch4_ach' };
|
||
|
||
window.PARAS = [
|
||
{id:'p36',num:'§ 36',name:'Природа связи',sub:'октет · энергия'},
|
||
{id:'p37',num:'§ 37',name:'Ковалентная связь',sub:'общие e-пары'},
|
||
{id:'p38',num:'§ 38',name:'Полярность · ЭО · Лаб.4',sub:'ΔЭО → тип'},
|
||
{id:'p39',num:'§ 39',name:'Ионная связь',sub:'передача e⁻'},
|
||
{id:'p40',num:'§ 40',name:'Металлическая связь',sub:'электронный газ'},
|
||
{id:'p41',num:'§ 41',name:'Кристаллические решётки',sub:'4 типа'},
|
||
{id:'final1',num:'★',name:'Финал главы',sub:'босс · ачивка',final:true}
|
||
];
|
||
window.ACH_LABELS = { start:'Начало главы 4!', final1_tasks:'Химическая связь освоена!' };
|
||
['p36','p37','p38','p39','p40','p41'].forEach(function(id){ window.ACH_LABELS[id+'_done']=id.toUpperCase()+' изучен!'; });
|
||
|
||
window.SIDEBARS = {
|
||
p36:{title:'§36 Природа',rows:[['Причина','завершить внешний слой'],['Октет','8 e⁻ — устойчиво'],['Энергия','при связи выделяется']]},
|
||
p37:{title:'§37 Ковалентная',rows:[['Связь','общие электронные пары'],['Между','неметаллами'],['Кратность','одинарная/двойная/тройная']]},
|
||
p38:{title:'§38 Полярность',rows:[['Неполярная','ΔЭО ≈ 0 (H₂, Cl₂)'],['Полярная','ΔЭО ≠ 0 (HCl, H₂O)'],['ЭО','тяга к электронам']]},
|
||
p39:{title:'§39 Ионная',rows:[['Связь','передача e⁻'],['Между','Me и неMe'],['Ионы','катион + анион']]},
|
||
p40:{title:'§40 Металлическая',rows:[['Связь','ион-остовы + e-газ'],['Свойства','ковкость, блеск, ток'],['Межмолек.','слабое притяжение']]},
|
||
p41:{title:'§41 Решётки',rows:[['Ионная','соли — тугоплавкие'],['Атомная','алмаз — твёрдый'],['Молекулярная','лёд — летучий'],['Металлическая','металлы']]},
|
||
final1:{title:'Финал главы 4',rows:[['§§36–41','химическая связь'],['Награда','ачивка + XP']]}
|
||
};
|
||
window.TIPS = [
|
||
{sec:'p36',html:'Атомы соединяются, чтобы завершить внешний электронный слой (правило октета) и понизить энергию — стать устойчивее.'},
|
||
{sec:'p37',html:'Ковалентная связь — общие электронные пары между атомами (обычно неметаллов).'},
|
||
{sec:'p38',html:'Если ΔЭО ≈ 0 — связь неполярная; если ЭО разная — полярная (пара смещена к более ЭО атому).'},
|
||
{sec:'p39',html:'Ионная связь — полная передача электронов от металла к неметаллу; образуются ионы.'},
|
||
{sec:'p40',html:'Металлическая связь — положительные ион-остовы в «электронном газе» из общих электронов.'},
|
||
{sec:'p41',html:'Тип кристаллической решётки определяет свойства: ионная — тугоплавкая, молекулярная — летучая.'},
|
||
{sec:'final1',html:'Ковалентная, ионная, металлическая связь и решётки — повтори перед боссом.'}
|
||
];
|
||
|
||
window.POOLS = {
|
||
p36:[
|
||
{q:'Почему атомы образуют химические связи?',opts:['Случайно','Чтобы завершить внешний слой и стать устойчивее','Чтобы стать тяжелее','Из-за нагревания'],a:1,ex:'Стремление к завершённому внешнему слою (октету).'},
|
||
{q:'Завершённый внешний слой содержит (для большинства) … электронов',opts:['2','4','8','18'],a:2,ex:'Октет — 8 электронов (у He — 2).'},
|
||
{q:'При образовании связи энергия…',opts:['Поглощается','Выделяется','Не меняется','Исчезает'],a:1,ex:'Связанное состояние устойчивее → энергия выделяется.'}
|
||
],
|
||
p37:[
|
||
{q:'Ковалентная связь образуется за счёт…',opts:['Передачи электронов','Общих электронных пар','Притяжения ионов','Электронного газа'],a:1,ex:'Общие электронные пары.'},
|
||
{q:'Между какими атомами обычно ковалентная связь?',opts:['Металл + металл','Металл + неметалл','Неметалл + неметалл','Ион + ион'],a:2,ex:'Между атомами неметаллов.'},
|
||
{q:'Сколько общих пар в молекуле N₂ (тройная связь)?',hint:'тройная',unit:'',a:3,ex:'Тройная связь — 3 общие пары.'}
|
||
],
|
||
p38:[
|
||
{q:'Связь в молекуле H₂ (одинаковые атомы) — это…',opts:['Полярная','Неполярная','Ионная','Металлическая'],a:1,ex:'ΔЭО = 0 → неполярная.'},
|
||
{q:'Связь в молекуле HCl — это…',opts:['Неполярная','Полярная ковалентная','Ионная','Металлическая'],a:1,ex:'ΔЭО ≈ 0,9 → полярная ковалентная.'},
|
||
{q:'Электроотрицательность — это…',opts:['Масса атома','Способность притягивать общие электроны','Заряд ядра','Число нейтронов'],a:1,ex:'ЭО — мера притяжения общих электронов.'}
|
||
],
|
||
p39:[
|
||
{q:'Ионная связь образуется за счёт…',opts:['Общих пар','Полной передачи электронов','Электронного газа','Нейтронов'],a:1,ex:'Электрон полностью переходит к неметаллу.'},
|
||
{q:'Связь в NaCl — это…',opts:['Ковалентная','Ионная','Металлическая','Водородная'],a:1,ex:'Na (металл) + Cl (неметалл), ΔЭО велика → ионная.'},
|
||
{q:'Натрий в NaCl превращается в…',opts:['Na⁻','Na⁺','Na₂','атом Na'],a:1,ex:'Отдаёт электрон → катион Na⁺.'}
|
||
],
|
||
p40:[
|
||
{q:'Металлическую связь образует…',opts:['Передача e⁻','Общие пары','Ион-остовы и свободные электроны','Притяжение молекул'],a:2,ex:'«Электронный газ» связывает ион-остовы.'},
|
||
{q:'Чем объясняется электропроводность металлов?',opts:['Ионами','Свободными электронами','Нейтронами','Молекулами'],a:1,ex:'Свободные электроны переносят заряд.'},
|
||
{q:'Металлическая связь характерна для…',opts:['Солей','Газов','Металлов и сплавов','Кислот'],a:2,ex:'Металлы и сплавы.'}
|
||
],
|
||
p41:[
|
||
{q:'Вещества с ионной решёткой (соли) обычно…',opts:['Летучие','Тугоплавкие, твёрдые','Газы','Жидкие'],a:1,ex:'Ионная решётка прочная → высокие t плавления.'},
|
||
{q:'Какую решётку имеет алмаз?',opts:['Ионную','Атомную','Молекулярную','Металлическую'],a:1,ex:'Атомная решётка → очень твёрдый.'},
|
||
{q:'Вещества с молекулярной решёткой (лёд, CO₂) обычно…',opts:['Тугоплавкие','Летучие, легкоплавкие','Проводят ток','Очень твёрдые'],a:1,ex:'Слабые межмолекулярные силы → летучи.'}
|
||
],
|
||
final1:[
|
||
{q:'Связь в Cl₂ — это…',opts:['Полярная','Неполярная ковалентная','Ионная','Металлическая'],a:1,ex:'Одинаковые атомы → неполярная.'},
|
||
{q:'Связь в H₂O — это…',opts:['Неполярная','Полярная ковалентная','Ионная','Металлическая'],a:1,ex:'O и H разной ЭО → полярная.'},
|
||
{q:'Связь в KCl — это…',opts:['Ковалентная','Ионная','Металлическая','Водородная'],a:1,ex:'Металл + неметалл → ионная.'},
|
||
{q:'Сколько электронов в завершённом внешнем слое (октет)?',hint:'',unit:'',a:8,ex:'8.'},
|
||
{q:'Какой тип решётки у поваренной соли NaCl?',opts:['Молекулярная','Ионная','Атомная','—'],a:1,ex:'Ионная решётка.'},
|
||
{q:'Что переносит электрический ток в металле?',opts:['Ионы','Свободные электроны','Молекулы','Протоны'],a:1,ex:'Свободные электроны.'},
|
||
{q:'Какая связь в молекуле N₂?',opts:['Ионная','Ковалентная неполярная','Металлическая','Полярная'],a:1,ex:'Одинаковые атомы → неполярная ковалентная.'},
|
||
{q:'Сколько общих электронных пар в молекуле N₂ (тройная связь)?',unit:'',a:3,ex:'3 пары.'} /*U5-extra*/
|
||
]
|
||
};
|
||
|
||
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 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 = { p36:bp36, p37:bp37, p38:bp38, p39:bp39, p40:bp40, p41:bp41, final1:bfinal };
|
||
|
||
function bp36(){ document.getElementById('p36-body').innerHTML =
|
||
hero(5,'§ 36 · Глава 4','Природа химической связи','правило октета','Что заставляет атомы соединяться: стремление к устойчивости завершённого слоя.',['октет','энергия'])
|
||
+makeCard('theory','Почему возникает связь','§36','<p>Атомы инертных газов почти не реагируют — у них <b>завершённый внешний слой</b> (8 электронов, у He — 2). Остальные атомы стремятся достичь такого же устойчивого состояния, отдавая, принимая или обобществляя электроны. Так возникает <b>химическая связь</b>.</p><div class="def-box">При образовании связи система переходит в более устойчивое состояние с меньшей энергией — поэтому энергия <b>выделяется</b>.</div>')
|
||
+rememberBox(['Цель связи — завершить внешний слой (октет).','Связанное состояние устойчивее, энергия выделяется.'])
|
||
+qList(['Почему инертные газы малоактивны?','Сколько электронов в завершённом слое?'])
|
||
+secNav(null,'p37')+readButton('p36'); wireReadBtn('p36'); }
|
||
|
||
function bp37(){ document.getElementById('p37-body').innerHTML =
|
||
hero(6,'§ 37 · Глава 4','Ковалентная связь','общие пары','Атомы неметаллов делятся электронами, образуя общие пары — это ковалентная связь.',['общие пары','неметаллы'])
|
||
+makeCard('theory','Общие электронные пары','§37','<p><b>Ковалентная связь</b> образуется за счёт <b>общих электронных пар</b> между атомами (обычно неметаллов). Каждый атом «достраивает» свой внешний слой за счёт общих электронов.</p><p>Связь бывает <b>одинарная</b> (H–H, одна пара), <b>двойная</b> (O=O, две пары), <b>тройная</b> (N≡N, три пары).</p>')
|
||
+flag('Тип связи по электроотрицательности','Выбери два атома — увидишь тип связи и смещение общей пары. Для одинаковых атомов связь неполярная ковалентная.','<div id="c-bond1"></div>')
|
||
+rememberBox(['Ковалентная = общие электронные пары.','Чем больше общих пар, тем прочнее связь.'])
|
||
+qList(['Сколько общих пар в молекуле O₂?','Между какими атомами образуется ковалентная связь?'])
|
||
+secNav('p36','p38')+readButton('p37'); wireReadBtn('p37'); }
|
||
|
||
function bp38(){ document.getElementById('p38-body').innerHTML =
|
||
hero(4,'§ 38 · Глава 4','Полярная и неполярная связь. ЭО · Лаб. 4','ΔЭО','Если атомы тянут электроны одинаково — связь неполярна; если по-разному — полярна.',['ЭО','полярность','Лаб.4'])
|
||
+makeCard('theory','Электроотрицательность и полярность','§38','<div class="def-box"><b>Электроотрицательность (ЭО)</b> — способность атома притягивать к себе общие электроны.</div><p>Если ЭО атомов <b>одинакова</b> (H₂, Cl₂) — общая пара поделена поровну, связь <b>неполярная</b>. Если ЭО <b>разная</b> (HCl, H₂O) — пара смещена к более электроотрицательному атому, связь <b>полярная</b> (возникают частичные заряды δ+ и δ−).</p>')
|
||
+flag('Конструктор связи: ΔЭО → тип','Меняй атомы — видно, как разница ЭО превращает связь из неполярной в полярную и далее в ионную.','<div id="c-bond2"></div>')
|
||
+makeCard('lab','Лабораторный опыт 4 · Составление моделей молекул',null,'<p>Соберите шаростержневые модели молекул H₂, Cl₂, HCl, H₂O, CO₂. Определите для каждой тип связи (полярная/неполярная) и форму молекулы. Сравните: в симметричных молекулах (CO₂) полярные связи «компенсируются», и молекула в целом неполярна.</p>')
|
||
+flag('3D-модели молекул','Выбери молекулу и вращай её мышью. Снизу — молярная масса, тип связи, форма и полярность.','<div id="c-mol"></div>')
|
||
+rememberBox(['ΔЭО ≈ 0 → неполярная; ΔЭО заметна → полярная; ΔЭО велика → ионная.','Более электроотрицательный атом получает δ−.'])
|
||
+qList(['Полярна ли связь в Cl₂? А в HCl?','Что показывает электроотрицательность?'])
|
||
+secNav('p37','p39')+readButton('p38'); wireReadBtn('p38'); }
|
||
|
||
function bp39(){ document.getElementById('p39-body').innerHTML =
|
||
hero(9,'§ 39 · Глава 4','Ионная связь','Na⁺ Cl⁻','Когда разница ЭО очень велика, электрон переходит полностью — образуются ионы.',['ионы','передача e⁻'])
|
||
+makeCard('theory','Передача электронов','§39','<p>Если разница электроотрицательностей <b>очень велика</b> (металл + активный неметалл), электрон <b>полностью переходит</b> от металла к неметаллу. Образуются заряженные частицы — <b>ионы</b>: катион (+) и анион (−), которые притягиваются друг к другу. Это <b>ионная связь</b>.</p>')
|
||
+'<div class="wgt"><div class="wgt-h"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg> Образование ионной связи Na + Cl</div>'
|
||
+'<div class="bt-stage"><svg viewBox="0 0 260 80" class="bt-svg"><circle cx="55" cy="40" r="26" fill="var(--pri)" opacity=".15" stroke="var(--pri)" stroke-width="2"/><text x="55" y="46" text-anchor="middle" font-size="15" font-weight="800" fill="currentColor">Na</text><text x="55" y="14" text-anchor="middle" font-size="11" font-weight="800" fill="var(--pri)">−1e⁻</text><path d="M85 40 h40" stroke="var(--pri)" stroke-width="2" marker-end="url(#ar)"/><defs><marker id="ar" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0 0 L6 3 L0 6 z" fill="var(--pri)"/></marker></defs><circle cx="205" cy="40" r="26" fill="var(--fail)" opacity=".15" stroke="var(--fail)" stroke-width="2"/><text x="205" y="46" text-anchor="middle" font-size="15" font-weight="800" fill="currentColor">Cl</text><text x="205" y="14" text-anchor="middle" font-size="11" font-weight="800" fill="var(--fail)">+1e⁻</text></svg></div>'
|
||
+'<div class="out ok"><span class="bd">Na − e⁻ → Na⁺ | Cl + e⁻ → Cl⁻ → притяжение Na⁺Cl⁻ (ионная связь)</span></div></div>'
|
||
+rememberBox(['Ионная связь = полная передача электронов.','Металл → катион (+), неметалл → анион (−).'])
|
||
+qList(['Во что превращается хлор в NaCl?','Почему между Na и Cl именно ионная связь?'])
|
||
+secNav('p38','p40')+readButton('p39'); wireReadBtn('p39'); }
|
||
|
||
function bp40(){ document.getElementById('p40-body').innerHTML =
|
||
hero(7,'§ 40 · Глава 4','Металлическая связь. Межмолекулярное взаимодействие','электронный газ','В металлах общие электроны принадлежат сразу всем атомам — это объясняет их свойства.',['e-газ','ковкость','ток'])
|
||
+makeCard('theory','Металлическая связь','§40','<p>В металле внешние электроны легко отрываются и свободно перемещаются между положительными <b>ион-остовами</b>, образуя <b>«электронный газ»</b>. Эти общие электроны связывают все атомы — это <b>металлическая связь</b>.</p><p>Она объясняет свойства металлов: <b>электро- и теплопроводность</b> (электроны переносят заряд и энергию), <b>ковкость</b>, <b>металлический блеск</b>.</p><p><b>Межмолекулярное взаимодействие</b> — слабое притяжение между молекулами (включая водородную связь в воде) — удерживает молекулы в жидкостях и твёрдых телах.</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="bt-stage"><svg viewBox="0 0 220 90" class="bt-svg">'
|
||
+[ '40,30','90,30','140,30','40,65','90,65','140,65','180,48' ].map(function(p){var xy=p.split(',');return '<circle cx="'+xy[0]+'" cy="'+xy[1]+'" r="13" fill="var(--pri)" opacity=".18" stroke="var(--pri)" stroke-width="1.5"/><text x="'+xy[0]+'" y="'+(+xy[1]+4)+'" text-anchor="middle" font-size="9" font-weight="800" fill="currentColor">+</text>';}).join('')
|
||
+[ '65,48','115,48','160,32','65,20','115,78','30,48' ].map(function(p){var xy=p.split(',');return '<circle cx="'+xy[0]+'" cy="'+xy[1]+'" r="3" fill="var(--ok)"/>';}).join('')
|
||
+'</svg></div><div class="out"><span class="bd">«+» — ион-остовы металла, зелёные точки — свободные электроны (электронный газ).</span></div></div>'
|
||
+rememberBox(['Металлическая связь = ион-остовы + электронный газ.','Свободные электроны → проводимость, блеск, ковкость.'])
|
||
+qList(['Почему металлы проводят электрический ток?','Что такое «электронный газ»?'])
|
||
+secNav('p39','p41')+readButton('p40'); wireReadBtn('p40'); }
|
||
|
||
function bp41(){ document.getElementById('p41-body').innerHTML =
|
||
hero(8,'§ 41 · Глава 4','Кристаллическое состояние вещества','4 типа решёток','Тип связи определяет тип кристаллической решётки — а она определяет свойства вещества.',['решётки','свойства'])
|
||
+makeCard('theory','Типы кристаллических решёток','§41','<p>В кристалле частицы расположены упорядоченно, образуя <b>решётку</b>. От её типа зависят свойства вещества:</p>'
|
||
+'<div class="lat-grid">'
|
||
+'<div class="lat-card"><h4>Ионная</h4><div class="lat-ex">NaCl, CaCO₃</div><ul><li>узлы — ионы</li><li>твёрдые, тугоплавкие</li><li>хрупкие</li></ul></div>'
|
||
+'<div class="lat-card"><h4>Атомная</h4><div class="lat-ex">алмаз, SiO₂</div><ul><li>узлы — атомы (ков. связь)</li><li>очень твёрдые</li><li>тугоплавкие</li></ul></div>'
|
||
+'<div class="lat-card"><h4>Молекулярная</h4><div class="lat-ex">лёд, CO₂, I₂</div><ul><li>узлы — молекулы</li><li>летучие, легкоплавкие</li><li>мягкие</li></ul></div>'
|
||
+'<div class="lat-card"><h4>Металлическая</h4><div class="lat-ex">Fe, Cu, Al</div><ul><li>ион-остовы + e-газ</li><li>ковкие, проводят ток</li><li>блеск</li></ul></div>'
|
||
+'</div>')
|
||
+flag('3D-модель кристаллической решётки','Выбери тип решётки и вращай её мышью.','<div id="c-lattice"></div>')
|
||
+rememberBox(['Ионная и атомная решётки — прочные, тугоплавкие.','Молекулярная — летучая, легкоплавкая.','Тип решётки ← тип связи → свойства.'])
|
||
+qList(['Какой тип решётки у льда? Почему он легкоплавкий?','Чем объясняется твёрдость алмаза?'])
|
||
+secNav('p40','final1')+readButton('p41'); wireReadBtn('p41'); }
|
||
|
||
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>'
|
||
+'<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>
|
||
</html>
|