Maxim Dolgolyov
f620562124
chem7_anim.js — анимационный движок (window.Chem7Anim): RAF-цикл с паузой вне экрана (IntersectionObserver), prefers-reduced-motion, headless-guard (jsdom-safe: молекулы на SVG, canvas без getContext в тестах), molecule3d (вращающаяся 3D-модель, drag), separation (частицы: фильтр/выпаривание/магнит/отстаивание/перегонка), colorMorph, confettiSmall. Пилот в Главе 1: - §5/§6: статичные галереи → вращающиеся 3D-модели (H2/O2/O3/N2, H2O/CO2/CH4/NH3) с переключателем; - §2/ПР1: при верном методе разделения проигрывается анимация частиц. Тесты chem7: 16/16 pass; полный прогон 162/165 (3 — baseline Auth). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
532 lines
70 KiB
HTML
532 lines
70 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>Химия 7 · Глава 1 · «Первоначальные химические понятия»</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>/* Химия 7 · тема главы 1 — emerald (переопределяет amber chem8-textbook.css) */
|
||
:root{--bg:#f0fdf4;--border:#bbf7d0;--pri:#059669;--pri-d:#047857;--pri-l:#34d399;--pri-soft:#d1fae5;--sec-acc:#059669;--sec-acc-d:#047857;--sec-acc-soft:#d1fae5;--warn:#047857;--warn-bg:#d1fae5}
|
||
html.dark{--bg:#0a1a12;--border:#1f4030;--pri-soft:rgba(5,150,105,.18);--sec-acc-soft:rgba(5,150,105,.18)}
|
||
.hdr{background:linear-gradient(110deg,#065f46 0%,#059669 55%,#6ee7b7 100%)}
|
||
.hero{background:linear-gradient(135deg,var(--pri-soft),rgba(110,231,183,.12))}
|
||
.para-hero{background:linear-gradient(135deg,#064e3b,#059669 55%,#34d399)}</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/chem7_svg.js" defer></script>
|
||
<script src="/js/chem7_anim.js" defer></script>
|
||
<script src="/js/chem7_ch1_widgets.js" defer></script>
|
||
<script src="/js/chem8_engine.js" defer></script>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hdr">
|
||
<div class="hdr-row">
|
||
<div>
|
||
<h1>Химия 7 · Глава 1</h1>
|
||
<div class="hdr-sub">Первоначальные химические понятия: вещество, атом, элемент, молекула, формула, валентность, реакция и уравнение</div>
|
||
</div>
|
||
<div class="hdr-side">
|
||
<a href="/textbook/chemistry-7" 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('p1')"><svg class="ic" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg> Начать § 1</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-p1" class="sec"><div class="sec-header"><span class="sec-num">§ 1</span><h2 class="sec-h">Химия — наука о веществах</h2></div><div id="p1-body"></div></section>
|
||
<section id="sec-p2" class="sec"><div class="sec-header"><span class="sec-num">§ 2</span><h2 class="sec-h">Чистые вещества и смеси</h2></div><div id="p2-body"></div></section>
|
||
<section id="sec-pr1" class="sec"><div class="sec-header"><span class="sec-num">ПР 1</span><h2 class="sec-h">Практическая работа: знакомство с лабораторией. Разделение смесей</h2></div><div id="pr1-body"></div></section>
|
||
<section id="sec-p3" class="sec"><div class="sec-header"><span class="sec-num">§ 3</span><h2 class="sec-h">Атомы. Химические элементы</h2></div><div id="p3-body"></div></section>
|
||
<section id="sec-p4" class="sec"><div class="sec-header"><span class="sec-num">§ 4</span><h2 class="sec-h">Относительная атомная масса химических элементов</h2></div><div id="p4-body"></div></section>
|
||
<section id="sec-p5" class="sec"><div class="sec-header"><span class="sec-num">§ 5</span><h2 class="sec-h">Молекулы. Простые вещества</h2></div><div id="p5-body"></div></section>
|
||
<section id="sec-p6" class="sec"><div class="sec-header"><span class="sec-num">§ 6</span><h2 class="sec-h">Сложные вещества</h2></div><div id="p6-body"></div></section>
|
||
<section id="sec-p7" class="sec"><div class="sec-header"><span class="sec-num">§ 7</span><h2 class="sec-h">Химическая формула</h2></div><div id="p7-body"></div></section>
|
||
<section id="sec-p8" class="sec"><div class="sec-header"><span class="sec-num">§ 8</span><h2 class="sec-h">Относительная молекулярная масса</h2></div><div id="p8-body"></div></section>
|
||
<section id="sec-p9" class="sec"><div class="sec-header"><span class="sec-num">§ 9</span><h2 class="sec-h">Валентность</h2></div><div id="p9-body"></div></section>
|
||
<section id="sec-p10" class="sec"><div class="sec-header"><span class="sec-num">§ 10</span><h2 class="sec-h">Явления физические и химические. Признаки химических реакций</h2></div><div id="p10-body"></div></section>
|
||
<section id="sec-lo1" class="sec"><div class="sec-header"><span class="sec-num">Лаб. 1</span><h2 class="sec-h">Лабораторный опыт: признаки протекания химических реакций</h2></div><div id="lo1-body"></div></section>
|
||
<section id="sec-p11" class="sec"><div class="sec-header"><span class="sec-num">§ 11</span><h2 class="sec-h">Закон сохранения массы веществ. Химические уравнения</h2></div><div id="p11-body"></div></section>
|
||
<section id="sec-p12" class="sec"><div class="sec-header"><span class="sec-num">§ 12</span><h2 class="sec-h">Составление уравнений химических реакций</h2></div><div id="p12-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">Интерактивный учебник «Химия — 7 класс» · Глава 1 · «Первоначальные химические понятия» · 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-7-ch1', themeKey:'chemistry7_theme', xpKey:'chemistry7_xp',
|
||
progKey:'chemistry7_ch1_progress', achKey:'chemistry7_ch1_ach', hubHref:'/textbook/chemistry-7' };
|
||
|
||
window.PARAS = [
|
||
{id:'p1', num:'§ 1', name:'Химия — наука о веществах', sub:'вещество · свойства'},
|
||
{id:'p2', num:'§ 2', name:'Чистые вещества и смеси', sub:'разделение смесей'},
|
||
{id:'pr1', num:'ПР 1', name:'Практическая работа', sub:'разделение смесей'},
|
||
{id:'p3', num:'§ 3', name:'Атомы. Химические элементы', sub:'символы элементов'},
|
||
{id:'p4', num:'§ 4', name:'Относительная атомная масса', sub:'$A_r$'},
|
||
{id:'p5', num:'§ 5', name:'Молекулы. Простые вещества', sub:'$O_2$, $H_2$'},
|
||
{id:'p6', num:'§ 6', name:'Сложные вещества', sub:'$H_2O$, $CO_2$'},
|
||
{id:'p7', num:'§ 7', name:'Химическая формула', sub:'индекс · состав'},
|
||
{id:'p8', num:'§ 8', name:'Относительная молекулярная масса', sub:'$M_r=\\sum A_r$'},
|
||
{id:'p9', num:'§ 9', name:'Валентность', sub:'H — I, O — II'},
|
||
{id:'p10', num:'§ 10', name:'Физические и химические явления', sub:'признаки реакций'},
|
||
{id:'lo1', num:'Лаб. 1', name:'Признаки реакций', sub:'опыт'},
|
||
{id:'p11', num:'§ 11', name:'Закон сохранения массы', sub:'уравнения'},
|
||
{id:'p12', num:'§ 12', name:'Составление уравнений', sub:'коэффициенты'},
|
||
{id:'final1', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
|
||
];
|
||
|
||
window.ACH_LABELS = { start:'Начало главы 1!', p1_done:'§1 изучен!', p2_done:'§2 изучен!',
|
||
pr1_done:'Практическая работа 1 выполнена!', p3_done:'§3 изучен!',
|
||
p4_done:'§4 изучен!', p5_done:'§5 изучен!', p6_done:'§6 изучен!',
|
||
p7_done:'§7 изучен!', p8_done:'§8 изучен!', p9_done:'§9 изучен!',
|
||
p10_done:'§10 изучен!', lo1_done:'Лабораторный опыт 1 выполнен!', p11_done:'§11 изучен!', p12_done:'§12 изучен!',
|
||
final1_tasks:'Глава 1 пройдена! Вы — Мастер первоначальных понятий!' };
|
||
window.SIDEBARS = {
|
||
p1:{ title:'Шпаргалка §1', rows:[['Вещество','то, из чего состоит тело'],['Тело','предмет из вещества'],['Свойства','цвет, запах, плотность, $t_{пл}$…']] },
|
||
p2:{ title:'Шпаргалка §2', rows:[['Чистое','постоянный состав'],['Смесь','2+ вещества'],['Разделение','по различию свойств']] },
|
||
pr1:{ title:'Практическая 1', rows:[['Цель','разделить смесь'],['Соль+песок','раствор → фильтр → выпаривание'],['ТБ','аккуратно с нагревом']] },
|
||
p3:{ title:'Шпаргалка §3', rows:[['Атом','мельчайшая частица'],['Элемент','атомы с одинаковым $Z$'],['Символ','H, O, Fe, Cu…']] },
|
||
p4:{ title:'Шпаргалка §4', rows:[['$A_r$','во сколько раз тяжелее'],['Эталон','$1/12$ массы $^{12}$C'],['Пример','$A_r(\\text{O})=16$']] },
|
||
p5:{ title:'Шпаргалка §5', rows:[['Молекула','частица из атомов'],['Простое','1 элемент: $O_2$, $H_2$'],['Атомность','$O_2$, $O_3$']] },
|
||
p6:{ title:'Шпаргалка §6', rows:[['Сложное','разные элементы'],['Примеры','$H_2O$, $CO_2$, $NH_3$'],['Состав','можно разложить']] },
|
||
p7:{ title:'Шпаргалка §7', rows:[['Индекс','число атомов'],['Коэффициент','число молекул'],['Состав','качеств. + количеств.']] },
|
||
p8:{ title:'Шпаргалка §8', rows:[['$M_r$','$=\\sum A_r$'],['$M_r(H_2O)$','18'],['$M_r(H_2SO_4)$','98']] },
|
||
p9:{ title:'Шпаргалка §9', rows:[['Валентность','число связей'],['H — I, O — II',''],['Формула','по НОК валентностей']] },
|
||
p10:{ title:'Шпаргалка §10', rows:[['Физическое','форма/состояние'],['Химическое','новые вещества'],['Признаки','цвет, газ, осадок, запах, тепло']] },
|
||
lo1:{ title:'Лаб. опыт 1', rows:[['Цель','наблюдать признаки реакций'],['Признак','новое вещество']] },
|
||
p11:{ title:'Шпаргалка §11', rows:[['Закон','масса сохраняется'],['$m$ реаг.','= $m$ прод.'],['Авторы','Ломоносов, Лавуазье']] },
|
||
p12:{ title:'Шпаргалка §12', rows:[['Уравнивают','коэффициентами'],['Индексы','не трогать'],['Баланс','атомы слева = справа']] },
|
||
final1:{ title:'Финал главы 1', rows:[['§§1–12','все понятия'],['Награда','ачивка + XP']] }
|
||
};
|
||
window.TIPS = [
|
||
{ sec:'p1', html:'Тело — это <b>предмет</b> (гвоздь, стакан), а вещество — <b>то, из чего</b> он сделан (железо, стекло). Из одного вещества можно сделать много тел.' },
|
||
{ sec:'p2', html:'Способ разделения подбирают по тому, <b>чем различаются</b> вещества смеси: растворимостью, магнитными свойствами, температурой кипения, плотностью.' },
|
||
{ sec:'pr1', html:'Соль растворяется в воде, а песок — нет. Сначала отфильтруй песок, потом выпари воду — на дне останется соль.' },
|
||
{ sec:'p3', html:'Химический элемент определяется <b>зарядом ядра</b> (числом протонов) — это и есть порядковый номер $Z$.' },
|
||
{ sec:'p4', html:'$A_r$ показывает, во сколько раз масса атома больше $1/12$ массы атома углерода-12. $A_r(\\text{H})=1$, $A_r(\\text{O})=16$, $A_r(\\text{Fe})=56$.' },
|
||
{ sec:'p5', html:'<b>Простое</b> вещество — атомы одного элемента ($O_2$, $Fe$). Кислород $O_2$ и озон $O_3$ — разные простые вещества одного и того же элемента.' },
|
||
{ sec:'p6', html:'<b>Сложное</b> вещество образовано атомами <b>разных</b> элементов ($H_2O$ — водород и кислород) и может быть разложено на простые.' },
|
||
{ sec:'p7', html:'Индекс относится к атому/группе слева от него. В $H_2SO_4$: 2 атома H, 1 атом S, 4 атома O. Коэффициент (число перед формулой) — это число молекул.' },
|
||
{ sec:'p8', html:'$M_r$ — сумма $A_r$ всех атомов формулы. $M_r(\\text{CO}_2)=12+2\\cdot16=44$.' },
|
||
{ sec:'p9', html:'Кислород в соединениях имеет валентность II, водород — I. Зная их, можно определить валентность другого элемента и составить формулу по НОК.' },
|
||
{ sec:'p10', html:'Признаки химической реакции: изменение цвета, выделение газа, образование осадка, появление запаха, выделение или поглощение тепла и света.' },
|
||
{ sec:'lo1', html:'Если после действия появились новые вещества (изменился цвет, выпал осадок, выделился газ) — произошла химическая реакция.' },
|
||
{ sec:'p11', html:'Атомы в реакции не исчезают и не появляются, поэтому масса веществ <b>до</b> реакции равна массе <b>после</b> (М. В. Ломоносов, А. Лавуазье).' },
|
||
{ sec:'p12', html:'Уравнивают реакцию только <b>коэффициентами</b> (числами перед формулами). Индексы внутри формул менять нельзя.' },
|
||
{ sec:'final1', html:'Собери всё: вещество/смесь, атом/элемент, формула, $M_r$, валентность, признаки реакции, закон сохранения, уравнение.' }
|
||
];
|
||
|
||
/* ── задачи (тренажёр) ── */
|
||
window.POOLS = {
|
||
p1:[
|
||
{q:'Что изучает химия?',opts:['Только движение тел','Вещества, их свойства и превращения','Только живые организмы','Звёзды и планеты'],a:1,ex:'Химия — наука о веществах, их свойствах и превращениях.'},
|
||
{q:'Что из перечисленного — физическое тело (а не вещество)?',opts:['Вода','Медь','Гвоздь','Кислород'],a:2,ex:'Гвоздь — предмет (тело); медь, вода, кислород — вещества.'},
|
||
{q:'«Железо» — это…',opts:['Физическое тело','Вещество','Смесь','Явление'],a:1,ex:'Железо — вещество, из которого можно сделать разные тела.'},
|
||
{q:'Какое из свойств НЕ является свойством вещества?',opts:['Цвет','Плотность','Растворимость','Номер дома'],a:3,ex:'Цвет, плотность, растворимость — свойства вещества; номер дома — нет.'}
|
||
],
|
||
p2:[
|
||
{q:'Смесь песка и воды — какая?',opts:['Однородная','Неоднородная','Чистое вещество','Раствор'],a:1,ex:'Песчинки видны и не растворяются — смесь неоднородная.'},
|
||
{q:'Как разделить раствор соли в воде, чтобы получить соль?',opts:['Фильтрованием','Выпариванием','Магнитом','Никак'],a:1,ex:'Вода испаряется при нагревании, соль остаётся.'},
|
||
{q:'Раствор сахара в воде — это…',opts:['Чистое вещество','Однородная смесь','Неоднородная смесь','Простое вещество'],a:1,ex:'Сахар растворён равномерно — однородная смесь (раствор).'},
|
||
{q:'Чем удобно разделить смесь железных опилок и серы?',opts:['Магнитом','Выпариванием','Перегонкой','Фильтрованием'],a:0,ex:'Железо притягивается магнитом, сера — нет.'}
|
||
],
|
||
p3:[
|
||
{q:'Атом — это…',opts:['Самое крупное тело','Мельчайшая химически неделимая частица','Смесь веществ','Молекула воды'],a:1,ex:'Атом — мельчайшая химически неделимая частица вещества.'},
|
||
{q:'Химический элемент — это…',opts:['Любая частица','Вид атомов с одинаковым зарядом ядра','Молекула','Смесь атомов'],a:1,ex:'Элемент определяется зарядом ядра (числом протонов).'},
|
||
{q:'Каков порядковый номер $Z$ кислорода?',hint:'число протонов в ядре',unit:'',a:8,ex:'У кислорода Z = 8.'},
|
||
{q:'Какой символ у железа?',opts:['Fe','Ir','F','Zn'],a:0,ex:'Железо — Fe (от лат. ferrum).'}
|
||
],
|
||
p4:[
|
||
{q:'Что показывает относительная атомная масса $A_r$?',opts:['Массу атома в граммах','Во сколько раз масса атома больше $1/12$ массы атома $^{12}$C','Число протонов','Число молекул'],a:1,ex:'$A_r$ — сравнение массы атома с $1/12$ массы атома углерода-12.'},
|
||
{q:'$A_r(\\text{S})=32$, $A_r(\\text{O})=16$. Во сколько раз атом серы тяжелее атома кислорода?',hint:'$32/16$',unit:'раза',a:2,ex:'$32/16=2$.'},
|
||
{q:'$A_r(\\text{Mg})=24$, $A_r(\\text{C})=12$. Во сколько раз атом магния тяжелее атома углерода?',hint:'$24/12$',unit:'раза',a:2,ex:'$24/12=2$.'},
|
||
{q:'Относительная атомная масса $A_r$…',opts:['Измеряется в граммах','Безразмерна','Измеряется в литрах','Равна числу нейтронов'],a:1,ex:'$A_r$ — безразмерная величина сравнения.'}
|
||
],
|
||
p5:[
|
||
{q:'Молекула $\\text{O}_2$ образует…',opts:['Сложное вещество','Простое вещество','Смесь','Раствор'],a:1,ex:'Атомы одного элемента — простое вещество.'},
|
||
{q:'Простое вещество — это вещество, образованное…',opts:['Атомами одного элемента','Атомами разных элементов','Только молекулами','Только смесями'],a:0,ex:'Простое — один вид атомов.'},
|
||
{q:'Кислород $\\text{O}_2$ и озон $\\text{O}_3$ — это…',opts:['Одно и то же вещество','Разные простые вещества одного элемента','Сложные вещества','Смесь газов'],a:1,ex:'Один элемент — кислород, но разные простые вещества.'},
|
||
{q:'Сколько атомов в молекуле озона $\\text{O}_3$?',hint:'смотри индекс',unit:'',a:3,ex:'Озон $O_3$ — три атома кислорода.'}
|
||
],
|
||
p6:[
|
||
{q:'Вода $\\text{H}_2\\text{O}$ — это…',opts:['Простое вещество','Сложное вещество','Смесь','Атом'],a:1,ex:'Атомы разных элементов (H и O) — сложное вещество.'},
|
||
{q:'Сложное вещество образовано…',opts:['Атомами одного элемента','Атомами разных элементов','Только смесью','Одним атомом'],a:1,ex:'Сложное — разные элементы.'},
|
||
{q:'Какое из веществ — простое?',opts:['$\\text{H}_2\\text{O}$','$\\text{CO}_2$','$\\text{N}_2$','$\\text{NH}_3$'],a:2,ex:'$N_2$ — один элемент (азот).'},
|
||
{q:'Сколько разных химических элементов в молекуле метана $\\text{CH}_4$?',hint:'углерод и водород',unit:'',a:2,ex:'C и H — два элемента.'}
|
||
],
|
||
p7:[
|
||
{q:'Что показывает индекс в химической формуле?',opts:['Число молекул','Число атомов элемента','Массу вещества','Заряд'],a:1,ex:'Индекс — число атомов элемента (или группы) в формуле.'},
|
||
{q:'Сколько атомов кислорода в формуле $\\text{H}_2\\text{SO}_4$?',hint:'индекс при O',unit:'',a:4,ex:'4 атома кислорода.'},
|
||
{q:'Сколько всего атомов в молекуле воды $\\text{H}_2\\text{O}$?',hint:'2 H + 1 O',unit:'',a:3,ex:'2 + 1 = 3 атома.'},
|
||
{q:'Число, стоящее перед формулой (коэффициент), показывает…',opts:['Число атомов','Число молекул','Валентность','Массу'],a:1,ex:'Коэффициент — число молекул вещества.'}
|
||
],
|
||
p8:[
|
||
{q:'Чему равна $M_r(\\text{H}_2\\text{O})$?',hint:'$2\\cdot1+16$',unit:'',a:18,ex:'$M_r=18$.'},
|
||
{q:'Чему равна $M_r(\\text{CO}_2)$?',hint:'$12+2\\cdot16$',unit:'',a:44,ex:'$12+32=44$.'},
|
||
{q:'Чему равна $M_r(\\text{H}_2\\text{SO}_4)$?',hint:'$2+32+4\\cdot16$',unit:'',a:98,ex:'$2+32+64=98$.'},
|
||
{q:'Чему равна $M_r(\\text{CaCO}_3)$?',hint:'$40+12+3\\cdot16$',unit:'',a:100,ex:'$40+12+48=100$.'}
|
||
],
|
||
p9:[
|
||
{q:'За единицу валентности принята валентность атома…',opts:['кислорода','водорода','углерода','железа'],a:1,ex:'Единица валентности — валентность водорода (I).'},
|
||
{q:'Какова валентность кислорода в соединениях?',hint:'постоянная',unit:'',a:2,ex:'Кислород почти всегда двухвалентен (II).'},
|
||
{q:'Какова валентность хлора в молекуле $\\text{HCl}$?',hint:'равна числу атомов H',unit:'',a:1,ex:'Хлор соединён с 1 атомом H → валентность I.'},
|
||
{q:'Какова формула оксида алюминия (Al — III, O — II)?',opts:['AlO','Al₂O₃','AlO₂','Al₃O₂'],a:1,ex:'НОК(3,2)=6 → индексы 2 и 3 → Al₂O₃.'}
|
||
],
|
||
p10:[
|
||
{q:'Что НЕ является признаком химической реакции?',opts:['Изменение цвета','Выделение газа','Образование осадка','Изменение формы предмета'],a:3,ex:'Изменение формы — физическое изменение, не признак реакции.'},
|
||
{q:'Таяние льда — это явление…',opts:['Химическое','Физическое','Реакция','Горение'],a:1,ex:'Вода не превращается в другое вещество — физическое явление.'},
|
||
{q:'Ржавление железа — это явление…',opts:['Физическое','Химическое','Растворение','Плавление'],a:1,ex:'Образуется новое вещество (ржавчина) — химическое явление.'},
|
||
{q:'Появление резкого запаха при горении серы — это…',opts:['Признак химической реакции','Физическое изменение','Не имеет значения','Изменение формы'],a:0,ex:'Образовался новый газ — признак реакции.'}
|
||
],
|
||
p11:[
|
||
{q:'Закон сохранения массы означает, что…',opts:['Масса всегда растёт','Масса реагентов равна массе продуктов','Атомы исчезают','Масса уменьшается'],a:1,ex:'Атомы не исчезают — масса сохраняется.'},
|
||
{q:'При реакции $4$ г водорода с $32$ г кислорода сколько граммов воды образуется?',hint:'$4+32$',unit:'г',a:36,ex:'$4+32=36$ г.'},
|
||
{q:'Сожгли $12$ г углерода, получили $44$ г $\\text{CO}_2$. Сколько граммов кислорода вступило?',hint:'$44-12$',unit:'г',a:32,ex:'$44-12=32$ г.'},
|
||
{q:'Кто открыл закон сохранения массы веществ?',opts:['Д. И. Менделеев','М. В. Ломоносов','И. Ньютон','Архимед'],a:1,ex:'М. В. Ломоносов (и позже А. Лавуазье).'}
|
||
],
|
||
p12:[
|
||
{q:'В уравнении $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$ коэффициент перед $\\text{H}_2\\text{O}$ равен…',hint:'смотри на воду',unit:'',a:2,ex:'Коэффициент 2.'},
|
||
{q:'Что можно изменять при уравнивании реакции?',opts:['Только индексы','Только коэффициенты','И индексы, и коэффициенты','Ничего'],a:1,ex:'Уравнивают только коэффициентами.'},
|
||
{q:'В уравнении $3\\text{Fe}+2\\text{O}_2=\\text{Fe}_3\\text{O}_4$ коэффициент перед $\\text{Fe}$ равен…',hint:'железо слева',unit:'',a:3,ex:'Коэффициент 3.'},
|
||
{q:'Если в реакции 2 атома фосфора, сколько их должно быть в продуктах?',hint:'закон сохранения',unit:'',a:2,ex:'Столько же — атомы не исчезают.'}
|
||
],
|
||
final1:[
|
||
{q:'$M_r(\\text{H}_2\\text{SO}_4)=?$',hint:'$2+32+64$',unit:'',a:98,ex:'$98$.'},
|
||
{q:'Валентность серы в $\\text{SO}_2$ (кислород — II)?',hint:'$2\\cdot\\text{II}$',unit:'',a:4,ex:'IV.'},
|
||
{q:'Коэффициент перед $\\text{H}_2$ в $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$?',hint:'',unit:'',a:2,ex:'2.'},
|
||
{q:'Сколько атомов кислорода в формуле $\\text{Fe}_3\\text{O}_4$?',hint:'индекс при O',unit:'',a:4,ex:'4.'},
|
||
{q:'$\\text{N}_2$ — простое или сложное вещество?',opts:['Простое','Сложное'],a:0,ex:'Один элемент — простое.'},
|
||
{q:'Сожгли $4$ г серы, получили $8$ г $\\text{SO}_2$. Сколько граммов кислорода вступило?',hint:'$8-4$',unit:'г',a:4,ex:'$8-4=4$ г.'}
|
||
]
|
||
};
|
||
|
||
/* ── вспомогательные конструкторы контента ── */
|
||
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 wgt(title, inner){
|
||
return '<div class="wgt"><div class="wgt-h"><svg class="ic" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/></svg> '+title+'</div>'+inner+'</div>';
|
||
}
|
||
|
||
/* ── BUILDERS: реальные (Волна 1) + заглушки для остальных ── */
|
||
function build_p1(){
|
||
document.getElementById('p1-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 1 · Химия 7</div><h2>Химия — наука о веществах</h2>'
|
||
+'<div class="ph-desc">С чего начинается химия: чем тело отличается от вещества и как химики изучают вещества.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">вещество</span><span class="ph-tag">тело</span><span class="ph-tag">свойства</span></div></div>'
|
||
+makeCard('theory','Вещества и тела','§1','<p><b>Химия</b> — наука о веществах, их свойствах и превращениях. <b>Физическое тело</b> — это предмет (гвоздь, стакан, ложка). <b>Вещество</b> — то, из чего состоит тело (железо, стекло, вода).</p>'
|
||
+'<div class="def-box">Из <b>одного</b> вещества можно изготовить <b>много разных</b> тел: из стекла — стакан, колбу, линзу. И наоборот, одно тело может состоять из нескольких веществ.</div>')
|
||
+makeCard('theory','Свойства веществ','§1','<p>Каждое вещество узнают по его <b>свойствам</b>: цвет, запах, агрегатное состояние, плотность, температуры плавления и кипения, растворимость в воде, тепло- и электропроводность.</p>'
|
||
+'<p>По набору свойств одно вещество отличают от другого: например, медь — красная и проводит ток, а сера — жёлтая и ток не проводит.</p>')
|
||
+makeCard('rule','Наблюдение и эксперимент','§1','<p>Химия — <b>экспериментальная</b> наука. Главные методы — <b>наблюдение</b> и <b>опыт (эксперимент)</b>. Опыты проводят в химической лаборатории, используя оборудование: пробирки, колбы, стаканы, спиртовку, штатив. Работать нужно по <b>правилам техники безопасности</b>.</p>')
|
||
+wgt('Распредели: физическое тело или вещество?','<div id="p1-cls"></div>')
|
||
+rememberBox(['Тело — предмет; вещество — то, из чего он сделан.','Вещество узнают по свойствам (цвет, плотность, растворимость…).','Химия изучает вещества опытным путём в лаборатории.'])
|
||
+qList(['Чем тело отличается от вещества? Приведи примеры.','Назови 3 свойства, по которым можно отличить медь от серы.','Почему в лаборатории важно соблюдать правила безопасности?'])
|
||
+secNav(null,'p2')+readButton('p1');
|
||
wireReadBtn('p1');
|
||
}
|
||
|
||
function build_p2(){
|
||
document.getElementById('p2-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 2 · Химия 7</div><h2>Чистые вещества и смеси</h2>'
|
||
+'<div class="ph-desc">Чем чистое вещество отличается от смеси и как смеси разделяют на составные части.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">смесь</span><span class="ph-tag">однородная</span><span class="ph-tag">разделение</span></div></div>'
|
||
+makeCard('theory','Чистое вещество и смесь','§2','<p><b>Чистое вещество</b> имеет постоянный состав и постоянные свойства. <b>Смесь</b> состоит из двух и более веществ, и её свойства зависят от состава.</p>'
|
||
+'<div class="def-box"><b>Однородные</b> смеси: состав одинаков во всём объёме, частицы не видны (раствор соли или сахара в воде, воздух). <b>Неоднородные</b>: составные части видны (песок в воде, смесь железа и серы).</div>')
|
||
+makeCard('rule','Способы разделения смесей','§2','<p>Смеси разделяют, используя <b>различие свойств</b> веществ:</p>'
|
||
+'<ul><li><b>Фильтрование</b> — нерастворимое отделяют от жидкости.</li><li><b>Выпаривание</b> — выделяют растворённое вещество, испаряя воду.</li><li><b>Отстаивание</b> (делительная воронка) — несмешивающиеся жидкости разной плотности.</li><li><b>Перегонка (дистилляция)</b> — вещества с разной температурой кипения.</li><li><b>Действие магнитом</b> — если одно вещество притягивается.</li></ul>')
|
||
+makeCard('example','Разделение смеси соли и песка',null,'<div class="exa-step">1) Добавить воду — соль растворится, песок нет. 2) <b>Фильтрование</b> — песок останется на фильтре. 3) <b>Выпаривание</b> фильтрата — получим чистую соль.</div>')
|
||
+wgt('Подбери способ разделения смеси','<div id="p2-sep"></div>')
|
||
+rememberBox(['Чистое вещество — постоянный состав и свойства.','Смеси бывают однородные и неоднородные.','Способ разделения выбирают по различию свойств веществ.'])
|
||
+qList(['Приведи пример однородной и неоднородной смеси.','Как разделить смесь воды и растительного масла?','Почему смесь соли и песка нельзя разделить только фильтрованием?'])
|
||
+secNav('p1','pr1')+readButton('p2');
|
||
wireReadBtn('p2');
|
||
}
|
||
|
||
function build_pr1(){
|
||
document.getElementById('pr1-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">Практическая работа 1</div><h2>Знакомство с лабораторией. Разделение смесей</h2>'
|
||
+'<div class="ph-desc">Познакомиться с лабораторным оборудованием и разделить неоднородную смесь на чистые вещества.</div></div>'
|
||
+makeCard('lab','Оборудование и порядок работы',null,'<p><b>Оборудование:</b> стакан, стеклянная палочка, воронка с фильтром, фарфоровая чашка, спиртовка, штатив.</p>'
|
||
+'<ol><li>Рассмотри смесь поваренной соли и песка — она <b>неоднородная</b>.</li><li>Пересыпь смесь в стакан, добавь воды и размешай — соль растворится.</li><li><b>Профильтруй</b> смесь: песок останется на фильтре, раствор соли пройдёт.</li><li><b>Выпари</b> фильтрат в фарфоровой чашке — вода испарится, останется соль.</li><li>Сделай вывод: какие свойства позволили разделить смесь.</li></ol>'
|
||
+'<div class="note-safe"><svg viewBox="0 0 24 24"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg> Со спиртовкой и горячей чашкой работай осторожно; не пробуй вещества на вкус.</div>')
|
||
+wgt('Тренажёр: выбери способ разделения','<div id="pr1-sep"></div>')
|
||
+secNav('p2','p3')+readButton('pr1');
|
||
wireReadBtn('pr1');
|
||
}
|
||
|
||
function build_p3(){
|
||
document.getElementById('p3-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 3 · Химия 7</div><h2>Атомы. Химические элементы</h2>'
|
||
+'<div class="ph-desc">Из каких мельчайших частиц состоят вещества и что такое химический элемент.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">атом</span><span class="ph-tag">элемент</span><span class="ph-tag">символ</span></div></div>'
|
||
+makeCard('theory','Атомы','§3','<p>Все вещества состоят из мельчайших частиц. <b>Атом</b> — мельчайшая химически неделимая частица вещества. Атомы очень малы: их нельзя увидеть даже в обычный микроскоп.</p>')
|
||
+makeCard('theory','Химические элементы','§3','<p><b>Химический элемент</b> — это вид атомов с одинаковым зарядом ядра. Каждый элемент имеет <b>название</b> и <b>символ</b> (знак): водород — $\\text{H}$, кислород — $\\text{O}$, железо — $\\text{Fe}$. Порядковый номер элемента $Z$ равен числу протонов в ядре его атомов.</p>'
|
||
+'<div class="def-box">Известно более 100 химических элементов. В земной коре больше всего атомов кислорода и кремния, а во Вселенной — водорода.</div>')
|
||
+wgt('Каталог элементов: клик → номер, название, $A_r$','<div class="el-grid" id="p3-el"></div><div class="el-info" id="p3-elinfo">Выбери элемент, чтобы увидеть его характеристики.</div>')
|
||
+wgt('Тренажёр: символ → название элемента','<div id="p3-drill"></div>')
|
||
+rememberBox(['Атом — мельчайшая химически неделимая частица.','Химический элемент — вид атомов с одинаковым зарядом ядра.','У каждого элемента есть символ и порядковый номер $Z$.'])
|
||
+qList(['Чем атом отличается от химического элемента?','Запиши символы водорода, кислорода, железа и меди.','Что показывает порядковый номер элемента?'])
|
||
+secNav('pr1','p4')+readButton('p3');
|
||
wireReadBtn('p3');
|
||
}
|
||
|
||
function build_p4(){
|
||
document.getElementById('p4-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 4 · Химия 7</div><h2>Относительная атомная масса химических элементов</h2>'
|
||
+'<div class="ph-formula">$A_r(\\text{O}) = 16$</div>'
|
||
+'<div class="ph-desc">Как сравнивают массы атомов, которые невозможно взвесить по отдельности.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">$A_r$</span><span class="ph-tag">а.е.м.</span></div></div>'
|
||
+makeCard('theory','Зачем нужна относительная масса','§4','<p>Атомы очень малы, их масса в граммах — крошечное число, с которым неудобно работать. Поэтому массы атомов <b>сравнивают</b> между собой. За единицу принята $\\tfrac{1}{12}$ массы атома углерода-12 — это <b>атомная единица массы</b> (а.е.м.).</p>')
|
||
+makeCard('rule','Относительная атомная масса','§4','<div class="def-box"><b>Относительная атомная масса</b> $A_r$ показывает, во сколько раз масса атома больше $\\tfrac{1}{12}$ массы атома углерода-12. Это <b>безразмерная</b> величина.</div>'
|
||
+'<p>Значения $A_r$ берут из периодической таблицы: $A_r(\\text{H})=1$, $A_r(\\text{C})=12$, $A_r(\\text{O})=16$, $A_r(\\text{S})=32$, $A_r(\\text{Fe})=56$.</p>')
|
||
+makeCard('example','Сравнение масс атомов',null,'<p>Во сколько раз атом серы тяжелее атома кислорода?</p><div class="exa-step">$\\dfrac{A_r(\\text{S})}{A_r(\\text{O})}=\\dfrac{32}{16}=2$ раза.</div>')
|
||
+wgt('Весы атомов: во сколько раз тяжелее','<div id="p4-bal"></div>')
|
||
+rememberBox(['$A_r$ — безразмерная величина.','Эталон — $1/12$ массы атома углерода-12.','Значения $A_r$ берут из периодической таблицы.'])
|
||
+qList(['Что принято за атомную единицу массы?','Во сколько раз атом магния ($A_r=24$) тяжелее атома углерода ($A_r=12$)?','Почему $A_r$ не имеет единиц измерения?'])
|
||
+secNav('p3','p5')+readButton('p4');
|
||
wireReadBtn('p4');
|
||
}
|
||
|
||
function build_p5(){
|
||
document.getElementById('p5-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 5 · Химия 7</div><h2>Молекулы. Простые вещества</h2>'
|
||
+'<div class="ph-desc">Из чего состоят вещества и какие вещества называют простыми.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">молекула</span><span class="ph-tag">простое вещество</span></div></div>'
|
||
+makeCard('theory','Молекулы','§5','<p><b>Молекула</b> — частица, состоящая из нескольких атомов, соединённых вместе. Многие вещества состоят из молекул: кислород — из молекул $\\text{O}_2$, вода — из молекул $\\text{H}_2\\text{O}$.</p>')
|
||
+makeCard('theory','Простые вещества','§5','<div class="def-box"><b>Простое вещество</b> образовано атомами <b>одного</b> химического элемента: $\\text{O}_2$, $\\text{H}_2$, $\\text{N}_2$, а также металлы — железо $\\text{Fe}$, медь $\\text{Cu}$.</div>'
|
||
+'<p>Один элемент может образовать <b>несколько</b> простых веществ. Например, элемент кислород образует кислород $\\text{O}_2$ и озон $\\text{O}_3$ — это разные простые вещества.</p>')
|
||
+wgt('Молекулы простых веществ','<div id="p5-gal"></div>')
|
||
+rememberBox(['Молекула — частица из нескольких атомов.','Простое вещество — атомы одного элемента.','Один элемент может давать разные простые вещества ($O_2$ и $O_3$).'])
|
||
+qList(['Что такое молекула? Приведи пример.','Чем простое вещество отличается от химического элемента?','Назови два простых вещества, образованных элементом кислород.'])
|
||
+secNav('p4','p6')+readButton('p5');
|
||
wireReadBtn('p5');
|
||
}
|
||
|
||
function build_p6(){
|
||
document.getElementById('p6-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 6 · Химия 7</div><h2>Сложные вещества</h2>'
|
||
+'<div class="ph-desc">Какие вещества называют сложными и чем они отличаются от простых.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">сложное вещество</span><span class="ph-tag">состав</span></div></div>'
|
||
+makeCard('theory','Сложные вещества','§6','<div class="def-box"><b>Сложное вещество</b> образовано атомами <b>разных</b> химических элементов: вода $\\text{H}_2\\text{O}$ (водород и кислород), углекислый газ $\\text{CO}_2$, метан $\\text{CH}_4$, аммиак $\\text{NH}_3$.</div>'
|
||
+'<p>Сложные вещества можно <b>разложить</b> на простые. Например, при разложении воды получаются простые вещества — водород и кислород.</p>')
|
||
+makeCard('example','Простое или сложное?',null,'<p>$\\text{N}_2$ — атомы только азота → <b>простое</b>. $\\text{NH}_3$ — атомы азота и водорода → <b>сложное</b>.</p>')
|
||
+wgt('Распредели: простое или сложное вещество?','<div id="p6-cls"></div>')
|
||
+wgt('Молекулы сложных веществ','<div id="p6-gal"></div>')
|
||
+rememberBox(['Сложное вещество — атомы разных элементов.','Сложные вещества можно разложить на простые.','Число элементов в формуле подскажет: 1 — простое, 2+ — сложное.'])
|
||
+qList(['Чем сложное вещество отличается от простого?','Из каких элементов состоит углекислый газ $\\text{CO}_2$?','Приведи пример разложения сложного вещества на простые.'])
|
||
+secNav('p5','p7')+readButton('p6');
|
||
wireReadBtn('p6');
|
||
}
|
||
|
||
function build_p7(){
|
||
document.getElementById('p7-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 7 · Химия 7</div><h2>Химическая формула</h2>'
|
||
+'<div class="ph-formula">$\\text{H}_2\\text{O}$</div>'
|
||
+'<div class="ph-desc">Как с помощью формулы записывают, из каких атомов и в каком числе состоит вещество.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">индекс</span><span class="ph-tag">коэффициент</span><span class="ph-tag">состав</span></div></div>'
|
||
+makeCard('theory','Что показывает формула','§7','<p><b>Химическая формула</b> показывает состав вещества: <b>качественный</b> (из каких элементов) и <b>количественный</b> (сколько атомов каждого элемента).</p>'
|
||
+'<div class="def-box"><b>Индекс</b> — маленькое число справа внизу: показывает число атомов элемента ($\\text{H}_2\\text{O}$ — 2 атома H, 1 атом O). <b>Коэффициент</b> — число перед формулой: показывает число молекул ($2\\text{H}_2\\text{O}$ — две молекулы воды).</div>')
|
||
+makeCard('example','Чтение формул',null,'<p>$\\text{H}_2\\text{O}$ читают «аш-два-о», $\\text{H}_2\\text{SO}_4$ — «аш-два-эс-о-четыре», $\\text{CH}_4$ — «цэ-аш-четыре».</p>')
|
||
+wgt('Разбор формулы на состав','<div class="fld"><label>Формула</label><input type="text" id="p7-in" value="H2SO4" style="width:150px;font-family:var(--mono)"><button class="btn primary" id="p7-go">Разобрать</button></div>'
|
||
+'<div class="fld" style="gap:6px"><button class="btn p7-ex" data-f="H2O">H₂O</button><button class="btn p7-ex" data-f="CO2">CO₂</button><button class="btn p7-ex" data-f="Ca(OH)2">Ca(OH)₂</button><button class="btn p7-ex" data-f="H2SO4">H₂SO₄</button></div>'
|
||
+'<div class="out" id="p7-out">Введи формулу и нажми «Разобрать».</div>')
|
||
+rememberBox(['Индекс — число атомов; стоит справа внизу.','Коэффициент — число молекул; стоит перед формулой.','Скобки: индекс умножает всё внутри — Ca(OH)₂ = 1 Ca, 2 O, 2 H.'])
|
||
+qList(['Чем индекс отличается от коэффициента?','Сколько атомов каждого элемента в $\\text{H}_3\\text{PO}_4$?','Что означает запись $3\\text{H}_2\\text{O}$?'])
|
||
+secNav('p6','p8')+readButton('p7');
|
||
wireReadBtn('p7');
|
||
}
|
||
|
||
function build_p8(){
|
||
document.getElementById('p8-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 8 · Химия 7</div><h2>Относительная молекулярная масса</h2>'
|
||
+'<div class="ph-formula">$M_r=\\sum A_r$</div>'
|
||
+'<div class="ph-desc">Как по формуле рассчитать, во сколько раз молекула тяжелее эталона.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">$M_r$</span><span class="ph-tag">$\\sum A_r$</span></div></div>'
|
||
+makeCard('rule','Относительная молекулярная масса','§8','<div class="def-box"><b>Относительная молекулярная масса</b> $M_r$ равна сумме относительных атомных масс всех атомов в формуле. Это безразмерная величина: она показывает, во сколько раз молекула тяжелее $\\tfrac{1}{12}$ массы атома углерода-12.</div>')
|
||
+makeCard('example','Расчёт $M_r$',null,'<p>$M_r(\\text{H}_2\\text{O})=2\\cdot A_r(\\text{H})+A_r(\\text{O})=2\\cdot1+16=18$.</p><div class="exa-step">$M_r(\\text{H}_2\\text{SO}_4)=2\\cdot1+32+4\\cdot16=98$.</div>')
|
||
+wgt('Калькулятор $M_r$ по формуле','<div class="fld"><label>Формула</label><input type="text" id="p8-in" value="CaCO3" style="width:150px;font-family:var(--mono)"><button class="btn primary" id="p8-go">Вычислить</button></div>'
|
||
+'<div class="fld" style="gap:6px"><button class="btn p8-ex" data-f="H2O">H₂O</button><button class="btn p8-ex" data-f="CO2">CO₂</button><button class="btn p8-ex" data-f="H2SO4">H₂SO₄</button><button class="btn p8-ex" data-f="CaCO3">CaCO₃</button></div>'
|
||
+'<div class="out" id="p8-out">Введи формулу и нажми «Вычислить».</div>')
|
||
+rememberBox(['$M_r$ — сумма $A_r$ всех атомов формулы.','$M_r$ безразмерна.','Индекс умножает $A_r$ соответствующего элемента.'])
|
||
+qList(['Вычисли $M_r(\\text{Na}_2\\text{CO}_3)$.','Во сколько раз молекула воды тяжелее $\\tfrac{1}{12}$ атома углерода-12?','Вычисли $M_r(\\text{Fe}_2\\text{O}_3)$.'])
|
||
+secNav('p7','p9')+readButton('p8');
|
||
wireReadBtn('p8');
|
||
}
|
||
|
||
function build_p9(){
|
||
document.getElementById('p9-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 9 · Химия 7</div><h2>Валентность</h2>'
|
||
+'<div class="ph-formula">H — I, O — II</div>'
|
||
+'<div class="ph-desc">Сколько связей образует атом и как по валентности составить формулу вещества.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">валентность</span><span class="ph-tag">НОК</span></div></div>'
|
||
+makeCard('theory','Что такое валентность','§9','<p><b>Валентность</b> — способность атома соединяться с определённым числом атомов других элементов. За единицу валентности принята валентность атома <b>водорода (I)</b>. В $\\text{HCl}$ хлор одновалентен, в $\\text{H}_2\\text{O}$ кислород двухвалентен, в $\\text{NH}_3$ азот трёхвалентен, в $\\text{CH}_4$ углерод четырёхвалентен.</p>')
|
||
+makeCard('rule','Составление формул по валентности','§9','<p>Кислород в соединениях обычно имеет валентность <b>II</b>, водород — <b>I</b>. Зная валентности, формулу составляют так, чтобы суммарное число единиц валентности обоих элементов совпало (по наименьшему общему кратному).</p>'
|
||
+'<div class="def-box">Постоянные валентности: H — I; O — II; Na, K — I; Mg, Ca, Zn — II; Al — III.</div>')
|
||
+makeCard('example','Оксид алюминия',null,'<p>Al — III, O — II. НОК(3, 2) = 6. Индексы: Al → 6/3 = 2, O → 6/2 = 3.</p><div class="exa-step">Формула: $\\text{Al}_2\\text{O}_3$.</div>')
|
||
+wgt('Конструктор формулы по валентности','<div id="p9-bld"></div>')
|
||
+rememberBox(['Валентность — число связей атома; единица — валентность водорода.','Кислород — II, водород — I (постоянные).','Формулу составляют по НОК валентностей.'])
|
||
+qList(['Определи валентность серы в $\\text{SO}_2$ (O — II).','Составь формулу соединения кальция (II) с кислородом.','Чему равна валентность азота в $\\text{NH}_3$?'])
|
||
+secNav('p8','p10')+readButton('p9');
|
||
wireReadBtn('p9');
|
||
}
|
||
|
||
function build_p10(){
|
||
document.getElementById('p10-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 10 · Химия 7</div><h2>Явления физические и химические. Признаки химических реакций</h2>'
|
||
+'<div class="ph-desc">Чем химическое явление отличается от физического и как распознать химическую реакцию.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">явление</span><span class="ph-tag">реакция</span><span class="ph-tag">признаки</span></div></div>'
|
||
+makeCard('theory','Физические и химические явления','§10','<p>При <b>физическом явлении</b> вещество не превращается в другое — меняются лишь форма, размеры или состояние (таяние льда, испарение воды, измельчение мела).</p>'
|
||
+'<div class="def-box">При <b>химическом явлении (реакции)</b> из одних веществ образуются <b>другие</b> вещества с новыми свойствами (горение, ржавление, скисание молока).</div>')
|
||
+makeCard('rule','Признаки химических реакций','§10','<p>О том, что произошла химическая реакция, судят по <b>признакам</b>:</p>'
|
||
+'<ul><li>изменение цвета;</li><li>выделение газа (пузырьки);</li><li>образование или растворение осадка;</li><li>появление запаха;</li><li>выделение или поглощение тепла и света.</li></ul>')
|
||
+makeCard('example','Нагревание малахита',null,'<p>Зелёный порошок малахита при нагревании чернеет (образуется $\\text{CuO}$) и выделяет газы. Видны сразу два признака — изменение цвета и выделение газа.</p>')
|
||
+wgt('Детектор признаков реакции','<div id="p10-signs"></div>')
|
||
+rememberBox(['Физическое явление — вещество остаётся тем же.','Химическая реакция — образуются новые вещества.','Признаки реакции: цвет, газ, осадок, запах, тепло/свет.'])
|
||
+qList(['Приведи примеры физического и химического явлений.','Какие признаки реакции наблюдаются при горении?','Почему ржавление железа — химическое явление?'])
|
||
+secNav('p9','lo1')+readButton('p10');
|
||
wireReadBtn('p10');
|
||
}
|
||
|
||
function build_lo1(){
|
||
document.getElementById('lo1-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">Лабораторный опыт 1</div><h2>Признаки протекания химических реакций</h2>'
|
||
+'<div class="ph-desc">Пронаблюдать признаки, по которым узнают химическую реакцию.</div></div>'
|
||
+makeCard('lab','Ход работы',null,'<ol><li>Прилей к раствору соли меди раствор щёлочи — наблюдай образование <b>осадка</b> и изменение цвета.</li><li>Капни на мел (или соду) кислоту — наблюдай выделение <b>газа</b> (пузырьки).</li><li>Нагрей выданное вещество — отметь изменение цвета или выделение газа.</li><li>Запиши, какой признак реакции наблюдался в каждом опыте, и сделай вывод.</li></ol>'
|
||
+'<div class="note-safe"><svg viewBox="0 0 24 24"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg> Кислоты и щёлочи едкие — не допускай попадания на кожу; нагревай осторожно.</div>')
|
||
+wgt('Определи признаки в опытах','<div id="lo1-signs"></div>')
|
||
+secNav('p10','p11')+readButton('lo1');
|
||
wireReadBtn('lo1');
|
||
}
|
||
|
||
function build_p11(){
|
||
document.getElementById('p11-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 11 · Химия 7</div><h2>Закон сохранения массы веществ. Химические уравнения</h2>'
|
||
+'<div class="ph-formula">$m_{реагентов}=m_{продуктов}$</div>'
|
||
+'<div class="ph-desc">Почему масса веществ в реакции не меняется и как это записывают уравнением.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">закон сохранения</span><span class="ph-tag">уравнение</span></div></div>'
|
||
+makeCard('theory','Закон сохранения массы','§11','<div class="def-box"><b>Закон сохранения массы:</b> масса веществ, вступивших в реакцию, равна массе веществ, образовавшихся в результате реакции. Открыт М. В. Ломоносовым и подтверждён А. Лавуазье.</div>'
|
||
+'<p>Причина проста: атомы в реакции не исчезают и не появляются — они лишь по-новому соединяются. Поэтому их общее число (и масса) сохраняется.</p>')
|
||
+makeCard('example','Химическое уравнение',null,'<p>Реакцию записывают <b>уравнением</b>: слева — реагенты, справа — продукты. Например: $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$. Число атомов каждого элемента слева и справа одинаково.</p>')
|
||
+wgt('Весы сохранения массы','<div id="p11-bal"></div>')
|
||
+rememberBox(['Масса реагентов = масса продуктов.','Атомы лишь перегруппировываются, их число сохраняется.','Реакцию записывают химическим уравнением.'])
|
||
+qList(['Сформулируй закон сохранения массы.','Почему масса не изменяется в ходе реакции?','При сжигании 12 г угля в кислороде получили 44 г углекислого газа. Сколько кислорода вступило в реакцию?'])
|
||
+secNav('lo1','p12')+readButton('p11');
|
||
wireReadBtn('p11');
|
||
}
|
||
|
||
function build_p12(){
|
||
document.getElementById('p12-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 12 · Химия 7</div><h2>Составление уравнений химических реакций</h2>'
|
||
+'<div class="ph-formula">подбор коэффициентов</div>'
|
||
+'<div class="ph-desc">Как уравнять реакцию, чтобы число атомов слева и справа совпало.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">коэффициенты</span><span class="ph-tag">баланс</span></div></div>'
|
||
+makeCard('rule','Как уравнять реакцию','§12','<ol><li>Записать формулы реагентов и продуктов.</li><li>Подобрать <b>коэффициенты</b> (числа перед формулами) так, чтобы число атомов каждого элемента слева и справа стало одинаковым.</li><li>Проверить баланс по каждому элементу.</li></ol>'
|
||
+'<div class="def-box">Менять <b>индексы</b> внутри формул нельзя — это изменило бы сами вещества. Уравнивают только <b>коэффициентами</b>.</div>')
|
||
+makeCard('example','Горение водорода',null,'<div class="exa-step">$\\text{H}_2+\\text{O}_2 \\to$ ? Ставим коэффициенты: $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$. Слева и справа: 4 атома H и 2 атома O.</div>')
|
||
+'<div class="flag-card"><div class="flag-title">Балансировщик: расставь коэффициенты</div><div class="flag-help">Подбери коэффициенты так, чтобы число атомов каждого элемента совпало слева и справа.</div>'
|
||
+'<div class="fld" style="gap:6px"><label>Реакция</label><select id="p12-pick"><option value="H2 + O2 -> H2O|2,1,2">H₂ + O₂ → H₂O</option><option value="P + O2 -> P2O5|4,5,2">P + O₂ → P₂O₅</option><option value="Fe + O2 -> Fe3O4|3,2,1">Fe + O₂ → Fe₃O₄</option><option value="CH4 + O2 -> CO2 + H2O|1,2,1,2">CH₄ + O₂ → CO₂ + H₂O</option></select></div><div id="p12-mount"></div></div>'
|
||
+rememberBox(['Уравнивают только коэффициентами.','Индексы в формулах не трогают.','После расстановки проверь число атомов каждого элемента.'])
|
||
+qList(['Почему при уравнивании нельзя менять индексы?','Уравняй реакцию $\\text{P}+\\text{O}_2\\to\\text{P}_2\\text{O}_5$.','Что показывает коэффициент перед формулой?'])
|
||
+secNav('p11','final1')+readButton('p12');
|
||
wireReadBtn('p12');
|
||
}
|
||
|
||
function build_final1(){
|
||
document.getElementById('final1-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">Финал главы 1</div><h2>Босс: первоначальные химические понятия</h2>'
|
||
+'<div class="ph-formula">вещество · атом · формула · $M_r$ · валентность · уравнение</div>'
|
||
+'<div class="ph-desc">Шесть интегрированных задач на всё, что изучено в главе. Реши все — получи звание «Мастер первоначальных понятий».</div></div>'
|
||
+makeCard('rule','Шпаргалка главы 1',null,'<ul>'
|
||
+'<li><b>Тело</b> — предмет, <b>вещество</b> — из чего он сделан; смеси разделяют по различию свойств.</li>'
|
||
+'<li><b>Атом</b> — мельчайшая частица; <b>элемент</b> — атомы с одинаковым $Z$; $A_r$ — относительная атомная масса.</li>'
|
||
+'<li><b>Простое</b> вещество — 1 элемент, <b>сложное</b> — разные; <b>формула</b> показывает состав.</li>'
|
||
+'<li>$M_r=\\sum A_r$; <b>валентность</b>: H — I, O — II; формула — по НОК валентностей.</li>'
|
||
+'<li>Признаки реакции: цвет, газ, осадок, запах, тепло; <b>масса сохраняется</b>; уравнивают <b>коэффициентами</b>.</li></ul>')
|
||
+'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши задачи ниже — за каждую +5 XP, за полный разгром босса — звание и бонус.</p>'
|
||
+secNav('p12',null);
|
||
}
|
||
|
||
/* заглушки для ещё не наполненных § (фазы — следующие волны) */
|
||
(function(){
|
||
var P = window.PARAS, B = {};
|
||
function ph(p, prev, next){
|
||
return function(){
|
||
var el = document.getElementById(p.id + '-body'); if (!el) return;
|
||
el.innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">' + p.num + ' · Химия 7</div><h2>' + p.name + '</h2>'
|
||
+ '<div class="ph-desc">Содержание этого ' + (p.final ? 'раздела' : 'параграфа') + ' готовится.</div></div>'
|
||
+ makeCard('theory', p.name, p.num,
|
||
'<p>Скоро здесь появятся теория, наглядные SVG-схемы и интерактивные тренажёры по теме «' + p.name + '». Пока доступна навигация по главе' + (p.final ? '.' : ' и отметка о прочтении.') + '</p>')
|
||
+ secNav(prev, next) + (p.final ? '' : readButton(p.id));
|
||
if (!p.final) wireReadBtn(p.id);
|
||
};
|
||
}
|
||
for (var i = 0; i < P.length; i++) {
|
||
B[P[i].id] = ph(P[i], i > 0 ? P[i-1].id : null, i < P.length-1 ? P[i+1].id : null);
|
||
}
|
||
window.BUILDERS = B;
|
||
})();
|
||
|
||
/* переопределяем заглушки реальными builder'ами Волны 1 */
|
||
window.BUILDERS.p1 = build_p1;
|
||
window.BUILDERS.p2 = build_p2;
|
||
window.BUILDERS.pr1 = build_pr1;
|
||
window.BUILDERS.p3 = build_p3;
|
||
window.BUILDERS.p4 = build_p4;
|
||
window.BUILDERS.p5 = build_p5;
|
||
window.BUILDERS.p6 = build_p6;
|
||
window.BUILDERS.p7 = build_p7;
|
||
window.BUILDERS.p8 = build_p8;
|
||
window.BUILDERS.p9 = build_p9;
|
||
window.BUILDERS.p10 = build_p10;
|
||
window.BUILDERS.lo1 = build_lo1;
|
||
window.BUILDERS.p11 = build_p11;
|
||
window.BUILDERS.p12 = build_p12;
|
||
window.BUILDERS.final1 = build_final1;
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|