Maxim Dolgolyov
33f968bff9
Подключён chem7_anim.js в Главу 3. - §21 ряд активности (звёздный): клик металла левее H₂ → анимация пузырьков H₂ (bubbleField); правее (Cu, Ag) — «реакция не идёт»; - §19 восстановление CuO: colorBlock плавно чёрный→красный (медь); горение — пламя водорода; - §20/ЛО3 индикаторы: блок плавно меняет цвет на цвет индикатора в кислоте. Тесты chem7: 16/16; полный прогон 162/165 (3 — baseline Auth). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
343 lines
36 KiB
HTML
343 lines
36 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 · Глава 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>/* Химия 7 · тема главы 3 — violet (переопределяет amber chem8-textbook.css) */
|
||
:root{--bg:#f5f3ff;--border:#ddd6fe;--pri:#7c3aed;--pri-d:#6d28d9;--pri-l:#a78bfa;--pri-soft:#ede9fe;--sec-acc:#7c3aed;--sec-acc-d:#6d28d9;--sec-acc-soft:#ede9fe;--warn:#6d28d9;--warn-bg:#ede9fe}
|
||
html.dark{--bg:#140a24;--border:#3b2a63;--pri-soft:rgba(124,58,237,.18);--sec-acc-soft:rgba(124,58,237,.18)}
|
||
.hdr{background:linear-gradient(110deg,#4c1d95 0%,#7c3aed 55%,#a78bfa 100%)}
|
||
.hero{background:linear-gradient(135deg,var(--pri-soft),rgba(167,139,250,.12))}
|
||
.para-hero{background:linear-gradient(135deg,#4c1d95,#7c3aed 55%,#a78bfa)}</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_ch3_widgets.js" defer></script>
|
||
<script src="/js/chem8_engine.js" defer></script>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hdr">
|
||
<div class="hdr-row">
|
||
<div>
|
||
<h1>Химия 7 · Глава 3</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('p18')"><svg class="ic" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg> Начать § 18</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-p18" class="sec"><div class="sec-header"><span class="sec-num">§ 18</span><h2 class="sec-h">Водород — химический элемент и простое вещество</h2></div><div id="p18-body"></div></section>
|
||
<section id="sec-p19" class="sec"><div class="sec-header"><span class="sec-num">§ 19</span><h2 class="sec-h">Химические свойства водорода</h2></div><div id="p19-body"></div></section>
|
||
<section id="sec-p20" class="sec"><div class="sec-header"><span class="sec-num">§ 20</span><h2 class="sec-h">Понятие о кислотах</h2></div><div id="p20-body"></div></section>
|
||
<section id="sec-lo3" class="sec"><div class="sec-header"><span class="sec-num">Лаб. 3</span><h2 class="sec-h">Лабораторный опыт: действие кислот на индикаторы</h2></div><div id="lo3-body"></div></section>
|
||
<section id="sec-p21" class="sec"><div class="sec-header"><span class="sec-num">§ 21</span><h2 class="sec-h">Взаимодействие кислот с металлами</h2></div><div id="p21-body"></div></section>
|
||
<section id="sec-lo4" class="sec"><div class="sec-header"><span class="sec-num">Лаб. 4</span><h2 class="sec-h">Лабораторный опыт: взаимодействие серной и соляной кислот с металлами</h2></div><div id="lo4-body"></div></section>
|
||
<section id="sec-p22" class="sec"><div class="sec-header"><span class="sec-num">§ 22</span><h2 class="sec-h">Соли — продукты замещения атомов водорода в кислотах на металлы</h2></div><div id="p22-body"></div></section>
|
||
<section id="sec-pr3" class="sec"><div class="sec-header"><span class="sec-num">ПР 3</span><h2 class="sec-h">Практическая работа: получение водорода и изучение его свойств</h2></div><div id="pr3-body"></div></section>
|
||
<section id="sec-final3" class="sec"><div class="sec-header"><span class="sec-num">★</span><h2 class="sec-h">Финал главы</h2></div><div id="final3-body"></div></section>
|
||
|
||
</div>
|
||
<aside class="col-side"><div id="sidebar-content"></div></aside>
|
||
</main>
|
||
|
||
<footer class="foot">Интерактивный учебник «Химия — 7 класс» · Глава 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';
|
||
window.CHEM8_CFG = { slug:'chemistry-7-ch3', themeKey:'chemistry7_theme', xpKey:'chemistry7_xp',
|
||
progKey:'chemistry7_ch3_progress', achKey:'chemistry7_ch3_ach', hubHref:'/textbook/chemistry-7' };
|
||
|
||
window.PARAS = [
|
||
{id:'p18', num:'§ 18', name:'Водород: элемент и вещество', sub:'$H$ · $H_2$'},
|
||
{id:'p19', num:'§ 19', name:'Химические свойства водорода', sub:'восстановление'},
|
||
{id:'p20', num:'§ 20', name:'Понятие о кислотах', sub:'индикаторы'},
|
||
{id:'lo3', num:'Лаб. 3', name:'Кислоты и индикаторы', sub:'опыт'},
|
||
{id:'p21', num:'§ 21', name:'Кислоты и металлы', sub:'ряд активности'},
|
||
{id:'lo4', num:'Лаб. 4', name:'Кислоты с металлами', sub:'опыт'},
|
||
{id:'p22', num:'§ 22', name:'Соли', sub:'замещение'},
|
||
{id:'pr3', num:'ПР 3', name:'Практическая работа', sub:'получение $H_2$'},
|
||
{id:'final3', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
|
||
];
|
||
|
||
window.ACH_LABELS = { start:'Начало главы 3!', p18_done:'§18 изучен!', p19_done:'§19 изучен!',
|
||
p20_done:'§20 изучен!', lo3_done:'Лабораторный опыт 3 выполнен!',
|
||
p21_done:'§21 изучен!', lo4_done:'Лабораторный опыт 4 выполнен!', p22_done:'§22 изучен!', pr3_done:'Практическая работа 3 выполнена!',
|
||
final3_tasks:'Глава 3 пройдена! Вы — Знаток водорода!' };
|
||
window.SIDEBARS = {
|
||
p18:{ title:'Шпаргалка §18', rows:[['$H$','элемент, $Z=1$'],['$H_2$','самый лёгкий газ'],['Вселенная','самый частый элемент']] },
|
||
p19:{ title:'Шпаргалка §19', rows:[['Горение','$+O_2 \\to H_2O$'],['Гремучий газ','$H_2$ + воздух'],['Восстановитель','отнимает O у оксида']] },
|
||
p20:{ title:'Шпаргалка §20', rows:[['Кислота','H + остаток'],['Примеры','$HCl$, $H_2SO_4$'],['Лакмус','в кислоте красный']] },
|
||
lo3:{ title:'Лаб. опыт 3', rows:[['Лакмус','красный'],['Метилоранж','розово-красный']] },
|
||
p21:{ title:'Шпаргалка §21', rows:[['Me + кислота','соль + $H_2\\uparrow$'],['Ряд активности','до $H_2$ — вытесняют'],['Cu, Ag','не реагируют']] },
|
||
lo4:{ title:'Лаб. опыт 4', rows:[['Zn, Fe, Mg','пузырьки $H_2$'],['Cu','реакции нет']] },
|
||
p22:{ title:'Шпаргалка §22', rows:[['Соль','металл + остаток'],['Замещение','H на металл'],['Названия','хлорид, сульфат…']] },
|
||
pr3:{ title:'Практическая 3', rows:[['$Zn+HCl$','$\\to H_2\\uparrow$'],['Чистота','гремучий газ']] },
|
||
final3:{ title:'Финал главы 3', rows:[['§§18–22','водород'],['Награда','ачивка + XP']] }
|
||
};
|
||
window.TIPS = [
|
||
{ sec:'p18', html:'$H$ — самый лёгкий элемент ($A_r=1$). Простое вещество $H_2$ — самый лёгкий газ, легче воздуха. Во Вселенной водород — самый распространённый элемент.' },
|
||
{ sec:'p19', html:'Водород горит в кислороде, образуя воду. С оксидами он ведёт себя как <b>восстановитель</b>: $H_2 + CuO = Cu + H_2O$.' },
|
||
{ sec:'p20', html:'<b>Кислота</b> = атомы водорода + кислотный остаток. <b>Индикаторы</b> меняют цвет: лакмус в кислоте — красный, метилоранж — розово-красный.' },
|
||
{ sec:'lo3', html:'В кислоте лакмус становится красным, а метилоранж — розово-красным. Так обнаруживают кислоту.' },
|
||
{ sec:'p21', html:'Металл + кислота → соль + водород. Реагируют только металлы, стоящие в <b>ряду активности левее $H_2$</b> (Zn, Fe, Mg). Медь и серебро водород из кислот не вытесняют.' },
|
||
{ sec:'lo4', html:'Цинк, железо, магний с соляной и серной кислотами дают пузырьки водорода; медь — нет (стоит правее $H_2$).' },
|
||
{ sec:'p22', html:'<b>Соль</b> = металл + кислотный остаток. Она образуется, когда металл <b>замещает</b> водород в кислоте: $Zn + 2HCl = ZnCl_2 + H_2$.' },
|
||
{ sec:'pr3', html:'Водород получают реакцией $Zn + HCl$; чистоту проверяют поджиганием (хлопок — нечисто, спокойное горение — чисто).' },
|
||
{ sec:'final3', html:'Собери всё: водород и его свойства, кислоты и индикаторы, ряд активности, соли как продукты замещения.' }
|
||
];
|
||
|
||
window.POOLS = {
|
||
p18:[
|
||
{q:'Водород — это самый…',opts:['Тяжёлый газ','Лёгкий газ','Активный металл','Ядовитый газ'],a:1,ex:'$H_2$ — самый лёгкий газ.'},
|
||
{q:'Чему равна относительная атомная масса водорода $A_r(\\text{H})$?',hint:'из таблицы',unit:'',a:1,ex:'$A_r(\\text{H})=1$.'},
|
||
{q:'$\\text{H}_2$ — это…',opts:['Химический элемент','Простое вещество','Сложное вещество','Смесь'],a:1,ex:'Молекула из двух атомов одного элемента — простое вещество.'},
|
||
{q:'Где водород встречается чаще всего?',opts:['В земной коре','Во Вселенной','В металлах','В песке'],a:1,ex:'Во Вселенной водород — самый распространённый элемент.'}
|
||
],
|
||
p19:[
|
||
{q:'При горении водорода в кислороде образуется…',opts:['Углекислый газ','Вода','Оксид меди','Соль'],a:1,ex:'$2H_2+O_2=2H_2O$.'},
|
||
{q:'Смесь водорода с воздухом называют…',opts:['Угарным газом','Гремучим газом','Озоном','Сухим льдом'],a:1,ex:'Гремучий газ взрывоопасен.'},
|
||
{q:'В реакции $\\text{H}_2+\\text{CuO}=\\text{Cu}+\\text{H}_2\\text{O}$ водород является…',opts:['Окислителем','Восстановителем','Катализатором','Индикатором'],a:1,ex:'Водород отнимает кислород — восстановитель.'},
|
||
{q:'Коэффициент перед $\\text{H}_2\\text{O}$ в $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$?',hint:'',unit:'',a:2,ex:'2.'}
|
||
],
|
||
p20:[
|
||
{q:'Из чего состоит кислота?',opts:['Из металла и кислорода','Из атомов водорода и кислотного остатка','Из двух металлов','Из воды и соли'],a:1,ex:'Кислота = водород + кислотный остаток.'},
|
||
{q:'Какого цвета становится лакмус в кислоте?',opts:['Синего','Красного','Зелёного','Жёлтого'],a:1,ex:'Лакмус в кислоте — красный.'},
|
||
{q:'Какова формула серной кислоты?',opts:['HCl','H₂SO₄','HNO₃','H₂CO₃'],a:1,ex:'Серная кислота — $H_2SO_4$.'},
|
||
{q:'Индикатор — это вещество, которое…',opts:['Ускоряет реакцию','Меняет цвет в кислоте или щёлочи','Растворяет металлы','Выделяет газ'],a:1,ex:'Индикаторы обнаруживают кислоты и щёлочи по изменению цвета.'}
|
||
],
|
||
p21:[
|
||
{q:'Какой газ выделяется при реакции активного металла с кислотой?',opts:['Кислород','Водород','Углекислый газ','Азот'],a:1,ex:'Металл вытесняет водород: соль + $H_2\\uparrow$.'},
|
||
{q:'Какой металл НЕ вытесняет водород из соляной кислоты?',opts:['Цинк','Магний','Медь','Железо'],a:2,ex:'Медь стоит правее $H_2$ — не реагирует.'},
|
||
{q:'Продукты реакции $\\text{Zn}+2\\text{HCl}$ — это…',opts:['$ZnCl_2$ и $H_2$','$ZnO$ и вода','$Zn$ и $Cl_2$','только соль'],a:0,ex:'$Zn+2HCl=ZnCl_2+H_2\\uparrow$.'},
|
||
{q:'Сколько веществ образуется в реакции $\\text{Zn}+\\text{H}_2\\text{SO}_4=\\text{ZnSO}_4+\\text{H}_2$?',hint:'соль и газ',unit:'',a:2,ex:'Соль и водород — 2 вещества.'}
|
||
],
|
||
p22:[
|
||
{q:'Из чего состоит соль?',opts:['Из водорода и остатка','Из металла и кислотного остатка','Из двух металлов','Из воды и кислоты'],a:1,ex:'Соль = металл + кислотный остаток.'},
|
||
{q:'Соль $\\text{NaCl}$ — продукт замещения водорода в кислоте…',opts:['$H_2SO_4$','$HCl$','$HNO_3$','$H_2CO_3$'],a:1,ex:'В $HCl$ водород заместился натрием → $NaCl$.'},
|
||
{q:'Какова формула сульфата натрия?',opts:['NaSO4','Na₂SO₄','Na₂SO₃','NaS'],a:1,ex:'Na(I), $SO_4$(II) → $Na_2SO_4$.'},
|
||
{q:'Реакция $\\text{Zn}+2\\text{HCl}=\\text{ZnCl}_2+\\text{H}_2$ — это реакция…',opts:['Соединения','Разложения','Замещения','Обмена'],a:2,ex:'Металл замещает водород — реакция замещения.'}
|
||
],
|
||
final3:[
|
||
{q:'$A_r(\\text{H})=?$',hint:'из таблицы',unit:'',a:1,ex:'1.'},
|
||
{q:'Продукт горения водорода в кислороде — это…',opts:['Вода','Углекислый газ','Оксид меди','Соль'],a:0,ex:'$2H_2+O_2=2H_2O$.'},
|
||
{q:'Цвет лакмуса в кислоте?',opts:['Синий','Красный','Зелёный','Жёлтый'],a:1,ex:'Красный.'},
|
||
{q:'Сколько из металлов Mg, Cu, Zn вытесняют водород из кислоты?',hint:'Cu — правее $H_2$',unit:'',a:2,ex:'Mg и Zn → 2.'},
|
||
{q:'Соль — это…',opts:['Металл + кислород','Металл + кислотный остаток','Водород + остаток','Два неметалла'],a:1,ex:'Металл + кислотный остаток.'},
|
||
{q:'Формула серной кислоты?',opts:['HCl','H₂SO₄','HNO₃','H₂CO₃'],a:1,ex:'$H_2SO_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>';
|
||
}
|
||
|
||
function build_p18(){
|
||
document.getElementById('p18-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 18 · Химия 7</div><h2>Водород — химический элемент и простое вещество</h2>'
|
||
+'<div class="ph-formula">$\\text{H}_2$</div>'
|
||
+'<div class="ph-desc">Самый лёгкий элемент Вселенной и его простое вещество.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">$H$</span><span class="ph-tag">$H_2$</span></div></div>'
|
||
+makeCard('theory','Элемент и простое вещество','§18','<p><b>Водород как элемент</b> — атомы H ($Z=1$, $A_r=1$), самый лёгкий из всех элементов. Атомы водорода входят в состав воды и множества других веществ.</p>'
|
||
+'<div class="def-box"><b>Водород как простое вещество</b> — газ $\\text{H}_2$ (молекула из двух атомов). Это самый лёгкий газ, легче воздуха.</div>')
|
||
+makeCard('theory','Свойства и нахождение','§18','<p>$\\text{H}_2$ — газ без цвета и запаха, мало растворим в воде. В свободном виде на Земле водорода почти нет, но в составе веществ (особенно воды) его много. Во Вселенной водород — самый распространённый элемент.</p>')
|
||
+wgt('Паспорт водорода','<div id="p18-card"></div>')
|
||
+rememberBox(['$H$ — самый лёгкий элемент ($A_r=1$).','$H_2$ — самый лёгкий газ, легче воздуха.','Во Вселенной водород — самый распространённый элемент.'])
|
||
+qList(['Чем водород-элемент отличается от простого вещества $H_2$?','Назови физические свойства водорода.','Где на Земле находится водород?'])
|
||
+secNav(null,'p19')+readButton('p18');
|
||
wireReadBtn('p18');
|
||
}
|
||
|
||
function build_p19(){
|
||
document.getElementById('p19-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 19 · Химия 7</div><h2>Химические свойства водорода</h2>'
|
||
+'<div class="ph-formula">$2\\text{H}_2+\\text{O}_2=2\\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></div></div>'
|
||
+makeCard('theory','Горение водорода','§19','<p>Водород горит в кислороде, образуя воду: $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$. Смесь водорода с воздухом (или кислородом) — «<b>гремучий газ</b>» — взрывоопасна, поэтому перед поджиганием водород проверяют на чистоту.</p>')
|
||
+makeCard('theory','Водород — восстановитель','§19','<div class="def-box">Водород способен <b>отнимать кислород</b> у оксидов металлов: $\\text{H}_2+\\text{CuO}=\\text{Cu}+\\text{H}_2\\text{O}$. Чёрный оксид меди превращается в красную медь. Вещество, отнимающее кислород, называют <b>восстановителем</b>.</div>')
|
||
+wgt('Реакции водорода','<div id="p19-rx"></div>')
|
||
+rememberBox(['Водород горит в кислороде → образуется вода.','Смесь $H_2$ с воздухом — гремучий газ, взрывается.','Водород — восстановитель: отнимает кислород у оксидов.'])
|
||
+qList(['Запиши уравнение горения водорода.','Почему водород называют восстановителем?','Что такое гремучий газ?'])
|
||
+secNav('p18','p20')+readButton('p19');
|
||
wireReadBtn('p19');
|
||
}
|
||
|
||
function build_p20(){
|
||
document.getElementById('p20-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 20 · Химия 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','Состав кислот','§20','<div class="def-box"><b>Кислоты</b> — сложные вещества, в состав которых входят атомы <b>водорода</b> и <b>кислотный остаток</b>.</div>'
|
||
+'<p>Примеры: соляная $\\text{HCl}$, серная $\\text{H}_2\\text{SO}_4$, азотная $\\text{HNO}_3$, угольная $\\text{H}_2\\text{CO}_3$. Число атомов водорода в кислоте равно валентности кислотного остатка.</p>')
|
||
+makeCard('theory','Индикаторы','§20','<p><b>Индикаторы</b> — вещества, которые меняют свой цвет в присутствии кислоты. В кислоте <b>лакмус</b> становится красным, а <b>метилоранж</b> — розово-красным. Так кислоту можно обнаружить.</p>')
|
||
+wgt('Индикаторы в кислоте','<div id="p20-ind"></div>')
|
||
+wgt('Важнейшие кислоты и их остатки','<div id="p20-acids"></div>')
|
||
+rememberBox(['Кислота = атомы водорода + кислотный остаток.','Лакмус в кислоте — красный, метилоранж — розово-красный.','Индикаторы помогают обнаружить кислоту.'])
|
||
+qList(['Из чего состоят кислоты?','Как с помощью индикатора обнаружить кислоту?','Назови формулу и название двух кислот.'])
|
||
+secNav('p19','lo3')+readButton('p20');
|
||
wireReadBtn('p20');
|
||
}
|
||
|
||
function build_lo3(){
|
||
document.getElementById('lo3-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">Лабораторный опыт 3</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="lo3-ind"></div>')
|
||
+secNav('p20','p21')+readButton('lo3');
|
||
wireReadBtn('lo3');
|
||
}
|
||
|
||
function build_p21(){
|
||
document.getElementById('p21-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 21 · Химия 7</div><h2>Взаимодействие кислот с металлами</h2>'
|
||
+'<div class="ph-formula">Me $+$ кислота $\\to$ соль $+ \\text{H}_2\\uparrow$</div>'
|
||
+'<div class="ph-desc">Почему одни металлы вытесняют водород из кислот, а другие нет.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">ряд активности</span><span class="ph-tag">$H_2\\uparrow$</span></div></div>'
|
||
+makeCard('theory','Реакция металлов с кислотами','§21','<p>Многие металлы реагируют с кислотами, <b>вытесняя водород</b>: образуются соль и газообразный водород. Например: $\\text{Zn}+\\text{H}_2\\text{SO}_4=\\text{ZnSO}_4+\\text{H}_2\\uparrow$, $\\text{Mg}+2\\text{HCl}=\\text{MgCl}_2+\\text{H}_2\\uparrow$.</p>')
|
||
+makeCard('rule','Ряд активности металлов','§21','<div class="def-box">Металлы расположены в <b>ряд активности</b>. Металлы, стоящие <b>левее водорода</b>, вытесняют его из соляной и серной кислот; стоящие <b>правее</b> (медь, серебро) — не вытесняют.</div>'
|
||
+'<p>Очень активные металлы (натрий, калий) реагируют с кислотами слишком бурно — для получения водорода берут цинк или железо.</p>')
|
||
+wgt('Интерактивный ряд активности','<div id="p21-act"></div>')
|
||
+rememberBox(['Металл + кислота → соль + водород.','Вытесняют водород только металлы левее $H_2$.','Медь и серебро с этими кислотами не реагируют.'])
|
||
+qList(['Что образуется при реакции металла с кислотой?','Почему медь не реагирует с соляной кислотой?','Запиши уравнение реакции цинка с серной кислотой.'])
|
||
+secNav('p20','lo4')+readButton('p21');
|
||
wireReadBtn('p21');
|
||
}
|
||
|
||
function build_lo4(){
|
||
document.getElementById('lo4-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">Лабораторный опыт 4</div><h2>Взаимодействие серной и соляной кислот с металлами</h2>'
|
||
+'<div class="ph-desc">Проверить, какие металлы вытесняют водород из кислот.</div></div>'
|
||
+makeCard('lab','Ход работы',null,'<ol><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="lo4-rx"></div>')
|
||
+secNav('p21','p22')+readButton('lo4');
|
||
wireReadBtn('lo4');
|
||
}
|
||
|
||
function build_p22(){
|
||
document.getElementById('p22-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 22 · Химия 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','Что такое соли','§22','<div class="def-box"><b>Соли</b> — сложные вещества, состоящие из атомов <b>металла</b> и <b>кислотного остатка</b>.</div>'
|
||
+'<p>Соли образуются, когда металл <b>замещает</b> водород в кислоте — это <b>реакция замещения</b>: $\\text{Zn}+2\\text{HCl}=\\text{ZnCl}_2+\\text{H}_2$. Названия солей: хлориды ($\\text{NaCl}$), сульфаты ($\\text{Na}_2\\text{SO}_4$), нитраты ($\\text{KNO}_3$), карбонаты ($\\text{CaCO}_3$).</p>')
|
||
+makeCard('example','Составление формулы соли',null,'<p>Кальций (II) и кислотный остаток $\\text{Cl}$ (I): НОК(2,1)=2 → $\\text{CaCl}_2$. Алюминий (III) и $\\text{SO}_4$ (II): НОК(3,2)=6 → $\\text{Al}_2(\\text{SO}_4)_3$.</p>')
|
||
+wgt('Конструктор солей','<div id="p22-salt"></div>')
|
||
+rememberBox(['Соль = металл + кислотный остаток.','Соль образуется при замещении водорода металлом.','Формулу соли составляют по валентности (НОК).'])
|
||
+qList(['Дай определение соли.','Составь формулу хлорида магния.','Какая реакция называется реакцией замещения?'])
|
||
+secNav('lo4','pr3')+readButton('p22');
|
||
wireReadBtn('p22');
|
||
}
|
||
|
||
function build_pr3(){
|
||
document.getElementById('pr3-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">Практическая работа 3</div><h2>Получение водорода и изучение его свойств</h2>'
|
||
+'<div class="ph-desc">Получить водород, собрать его и проверить на чистоту.</div></div>'
|
||
+makeCard('lab','Ход работы',null,'<ol><li>В пробирку с кусочками цинка прилей соляную кислоту — наблюдай выделение водорода: $\\text{Zn}+2\\text{HCl}=\\text{ZnCl}_2+\\text{H}_2\\uparrow$.</li><li>Собери водород (он легче воздуха — держи сосуд отверстием вниз, или собирай вытеснением воды).</li><li>Проверь чистоту: поднеси к отверстию пламя. Резкий <b>хлопок</b> — водород смешан с воздухом (нечисто); <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="pr3-test"></div>')
|
||
+secNav('p22','final3')+readButton('pr3');
|
||
wireReadBtn('pr3');
|
||
}
|
||
|
||
function build_final3(){
|
||
document.getElementById('final3-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">Финал главы 3</div><h2>Босс: водород</h2>'
|
||
+'<div class="ph-formula">$H_2$ · кислоты · ряд активности · соли</div>'
|
||
+'<div class="ph-desc">Шесть задач на всю главу. Реши все — получи звание «Знаток водорода».</div></div>'
|
||
+makeCard('rule','Шпаргалка главы 3',null,'<ul>'
|
||
+'<li>$H$ — самый лёгкий элемент; $H_2$ — самый лёгкий газ.</li>'
|
||
+'<li>Водород горит → вода; восстанавливает металлы из оксидов.</li>'
|
||
+'<li>Кислота = водород + остаток; индикаторы (лакмус — красный в кислоте).</li>'
|
||
+'<li>Металл + кислота → соль $+ H_2\\uparrow$ (только левее $H_2$ в ряду активности).</li>'
|
||
+'<li>Соль = металл + кислотный остаток (продукт замещения).</li></ul>')
|
||
+'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши задачи ниже — за каждую +5 XP, за полный разгром босса — звание и бонус.</p>'
|
||
+secNav('pr3',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 главы 3 */
|
||
window.BUILDERS.p18 = build_p18;
|
||
window.BUILDERS.p19 = build_p19;
|
||
window.BUILDERS.p20 = build_p20;
|
||
window.BUILDERS.lo3 = build_lo3;
|
||
window.BUILDERS.p21 = build_p21;
|
||
window.BUILDERS.lo4 = build_lo4;
|
||
window.BUILDERS.p22 = build_p22;
|
||
window.BUILDERS.pr3 = build_pr3;
|
||
window.BUILDERS.final3 = build_final3;
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|