Maxim Dolgolyov
e949cb18a5
§13 Воздух как смесь газов (интерактивная диаграмма состава), ЛО2 Сборка приборов и собирание газов (выбор способа собирания), §14 Кислород — элемент и простое вещество (переключатель O/O2/O3 + модели), §15 Химические свойства кислорода (симулятор горения C/S/P/Fe/Mg → оксид). chem7_ch2_widgets.js. Тест: 11/11 pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
228 lines
21 KiB
HTML
228 lines
21 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 · Глава 2 · «Кислород»</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">
|
||
<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_ch2_widgets.js" defer></script>
|
||
<script src="/js/chem8_engine.js" defer></script>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hdr">
|
||
<div class="hdr-row">
|
||
<div>
|
||
<h1>Химия 7 · Глава 2</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('p13')"><svg class="ic" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg> Начать § 13</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-p13" class="sec"><div class="sec-header"><span class="sec-num">§ 13</span><h2 class="sec-h">Воздух как смесь газов</h2></div><div id="p13-body"></div></section>
|
||
<section id="sec-lo2" class="sec"><div class="sec-header"><span class="sec-num">Лаб. 2</span><h2 class="sec-h">Лабораторный опыт: сборка приборов для получения и собирания газов</h2></div><div id="lo2-body"></div></section>
|
||
<section id="sec-p14" class="sec"><div class="sec-header"><span class="sec-num">§ 14</span><h2 class="sec-h">Кислород как химический элемент и простое вещество</h2></div><div id="p14-body"></div></section>
|
||
<section id="sec-p15" class="sec"><div class="sec-header"><span class="sec-num">§ 15</span><h2 class="sec-h">Химические свойства кислорода</h2></div><div id="p15-body"></div></section>
|
||
<section id="sec-p16" class="sec"><div class="sec-header"><span class="sec-num">§ 16</span><h2 class="sec-h">Оксиды</h2></div><div id="p16-body"></div></section>
|
||
<section id="sec-p17" class="sec"><div class="sec-header"><span class="sec-num">§ 17</span><h2 class="sec-h">Получение кислорода</h2></div><div id="p17-body"></div></section>
|
||
<section id="sec-pr2" class="sec"><div class="sec-header"><span class="sec-num">ПР 2</span><h2 class="sec-h">Практическая работа: получение кислорода и изучение его свойств</h2></div><div id="pr2-body"></div></section>
|
||
<section id="sec-final2" class="sec"><div class="sec-header"><span class="sec-num">★</span><h2 class="sec-h">Финал главы</h2></div><div id="final2-body"></div></section>
|
||
|
||
</div>
|
||
<aside class="col-side"><div id="sidebar-content"></div></aside>
|
||
</main>
|
||
|
||
<footer class="foot">Интерактивный учебник «Химия — 7 класс» · Глава 2 · «Кислород» · 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-ch2', themeKey:'chemistry7_theme', xpKey:'chemistry7_xp',
|
||
progKey:'chemistry7_ch2_progress', achKey:'chemistry7_ch2_ach', hubHref:'/textbook/chemistry-7' };
|
||
|
||
window.PARAS = [
|
||
{id:'p13', num:'§ 13', name:'Воздух как смесь газов', sub:'$N_2$ · $O_2$'},
|
||
{id:'lo2', num:'Лаб. 2', name:'Приборы для газов', sub:'опыт'},
|
||
{id:'p14', num:'§ 14', name:'Кислород: элемент и вещество', sub:'$O$ · $O_2$ · $O_3$'},
|
||
{id:'p15', num:'§ 15', name:'Химические свойства кислорода', sub:'горение'},
|
||
{id:'p16', num:'§ 16', name:'Оксиды', sub:'Э + $O$'},
|
||
{id:'p17', num:'§ 17', name:'Получение кислорода', sub:'разложение · катализатор'},
|
||
{id:'pr2', num:'ПР 2', name:'Практическая работа', sub:'получение $O_2$'},
|
||
{id:'final2', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
|
||
];
|
||
|
||
window.ACH_LABELS = { start:'Начало главы 2!', p13_done:'§13 изучен!', lo2_done:'Лабораторный опыт 2 выполнен!',
|
||
p14_done:'§14 изучен!', p15_done:'§15 изучен!', final2_tasks:'Глава 2 пройдена!' };
|
||
window.SIDEBARS = {
|
||
p13:{ title:'Шпаргалка §13', rows:[['Воздух','смесь газов'],['$N_2$','≈ 78 %'],['$O_2$','≈ 21 %']] },
|
||
lo2:{ title:'Лаб. опыт 2', rows:[['Прибор','пробирка + трубка'],['Собирание','воздуха или воды']] },
|
||
p14:{ title:'Шпаргалка §14', rows:[['Элемент','O, $Z=8$'],['Вещество','$O_2$'],['Озон','$O_3$']] },
|
||
p15:{ title:'Шпаргалка §15', rows:[['Горение','+ $O_2$'],['Продукт','оксид'],['Окисление','медленное и быстрое']] }
|
||
};
|
||
window.TIPS = [
|
||
{ sec:'p13', html:'Воздух — <b>смесь</b> газов: примерно $78\\,\\%$ азота $N_2$ и $21\\,\\%$ кислорода $O_2$, около $1\\,\\%$ — другие газы.' },
|
||
{ sec:'lo2', html:'Газ, который <b>тяжелее</b> воздуха (как $O_2$), собирают в сосуд отверстием <b>вверх</b>; <b>легче</b> воздуха ($H_2$) — отверстием вниз; нерастворимый — вытеснением воды.' },
|
||
{ sec:'p14', html:'$O$ — <b>элемент</b> (атом в составе веществ). $O_2$ — <b>простое вещество</b>. Кислород $O_2$ и озон $O_3$ — разные простые вещества одного элемента.' },
|
||
{ sec:'p15', html:'При горении вещество соединяется с кислородом — образуется <b>оксид</b>. Реакции с кислородом называют реакциями <b>окисления</b>.' }
|
||
];
|
||
|
||
window.POOLS = {
|
||
p13:[
|
||
{q:'Воздух — это…',opts:['Чистое вещество','Смесь газов','Простое вещество','Один газ — кислород'],a:1,ex:'Воздух — смесь нескольких газов.'},
|
||
{q:'Какова примерная объёмная доля кислорода в воздухе (%)?',hint:'около 21',unit:'%',a:21,ex:'Кислорода ≈ 21 %.'},
|
||
{q:'Какова примерная объёмная доля азота в воздухе (%)?',hint:'около 78',unit:'%',a:78,ex:'Азота ≈ 78 %.'},
|
||
{q:'Какой газ воздуха необходим для дыхания и горения?',opts:['Азот','Кислород','Углекислый газ','Аргон'],a:1,ex:'Кислород $O_2$.'}
|
||
],
|
||
p14:[
|
||
{q:'Запись «$\\text{O}$» обозначает…',opts:['Химический элемент (атом)','Молекулу кислорода','Озон','Смесь'],a:0,ex:'O — символ химического элемента.'},
|
||
{q:'$\\text{O}_2$ — это…',opts:['Химический элемент','Простое вещество','Сложное вещество','Смесь'],a:1,ex:'Молекула из атомов одного элемента — простое вещество.'},
|
||
{q:'Чему равна относительная атомная масса кислорода $A_r(\\text{O})$?',hint:'из таблицы',unit:'',a:16,ex:'$A_r(\\text{O})=16$.'},
|
||
{q:'$\\text{O}_2$ и $\\text{O}_3$ — это…',opts:['Одно вещество','Разные простые вещества одного элемента','Сложные вещества','Смесь газов'],a:1,ex:'Кислород и озон — разные простые вещества элемента кислород.'}
|
||
],
|
||
p15:[
|
||
{q:'Продукт горения простого вещества в кислороде — это…',opts:['Кислота','Оксид','Соль','Металл'],a:1,ex:'Образуется оксид — соединение с кислородом.'},
|
||
{q:'При горении серы в кислороде образуется…',opts:['$\\text{SO}_2$','$\\text{H}_2\\text{S}$','$\\text{S}$','$\\text{SO}_3$ только'],a:0,ex:'$S+O_2=SO_2$ (с резким запахом).'},
|
||
{q:'Реакция $\\text{C}+\\text{O}_2=\\text{CO}_2$ относится к реакциям…',opts:['Разложения','Соединения','Обмена','Замещения'],a:1,ex:'Из двух веществ одно — соединение.'},
|
||
{q:'В уравнении $2\\text{Mg}+\\text{O}_2=2\\text{MgO}$ коэффициент перед $\\text{MgO}$ равен…',hint:'смотри на оксид',unit:'',a:2,ex:'Коэффициент 2.'}
|
||
]
|
||
};
|
||
|
||
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_p13(){
|
||
document.getElementById('p13-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 13 · Химия 7</div><h2>Воздух как смесь газов</h2>'
|
||
+'<div class="ph-desc">Из каких газов состоит воздух и почему он так важен.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">смесь</span><span class="ph-tag">$N_2$</span><span class="ph-tag">$O_2$</span></div></div>'
|
||
+makeCard('theory','Состав воздуха','§13','<p>Воздух — это <b>смесь газов</b>. Основные из них: <b>азот</b> $\\text{N}_2$ (около 78 %) и <b>кислород</b> $\\text{O}_2$ (около 21 %). Ещё около 1 % приходится на другие газы — аргон, углекислый газ и др.</p>'
|
||
+'<div class="def-box">Воздух — <b>однородная</b> смесь: газы перемешаны равномерно. Именно кислород воздуха обеспечивает дыхание живых организмов и горение.</div>')
|
||
+wgt('Состав воздуха: кликни по части диаграммы','<div id="p13-air"></div>')
|
||
+rememberBox(['Воздух — смесь газов.','Азота ≈ 78 %, кислорода ≈ 21 %.','Кислород нужен для дыхания и горения.'])
|
||
+qList(['Из каких газов в основном состоит воздух?','Какова доля кислорода в воздухе?','Почему воздух называют смесью, а не чистым веществом?'])
|
||
+secNav(null,'lo2')+readButton('p13');
|
||
wireReadBtn('p13');
|
||
}
|
||
|
||
function build_lo2(){
|
||
document.getElementById('lo2-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">Лабораторный опыт 2</div><h2>Сборка простейших приборов для получения и собирания газов</h2>'
|
||
+'<div class="ph-desc">Научиться собирать прибор для получения газа и выбирать способ его собирания.</div></div>'
|
||
+makeCard('lab','Прибор и способы собирания',null,'<p>Простейший прибор: <b>пробирка с пробкой и газоотводной трубкой</b>. Газ из пробирки по трубке поступает в сосуд для собирания.</p>'
|
||
+'<ul><li><b>Вытеснением воздуха.</b> Газ <b>тяжелее</b> воздуха ($O_2$, $CO_2$) собирают в сосуд, держа его отверстием <b>вверх</b>; <b>легче</b> воздуха ($H_2$) — отверстием <b>вниз</b>.</li><li><b>Вытеснением воды.</b> Так собирают газы, мало растворимые в воде (например, кислород).</li></ul>'
|
||
+'<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="lo2-coll"></div>')
|
||
+secNav('p13','p14')+readButton('lo2');
|
||
wireReadBtn('lo2');
|
||
}
|
||
|
||
function build_p14(){
|
||
document.getElementById('p14-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 14 · Химия 7</div><h2>Кислород как химический элемент и простое вещество</h2>'
|
||
+'<div class="ph-desc">Чем отличается элемент кислород от простого вещества кислород.</div>'
|
||
+'<div class="ph-tags"><span class="ph-tag">$O$</span><span class="ph-tag">$O_2$</span><span class="ph-tag">$O_3$</span></div></div>'
|
||
+makeCard('theory','Элемент и простое вещество','§14','<p><b>Кислород как элемент</b> — это атомы O ($Z=8$, $A_r=16$). Они входят в состав очень многих веществ (воды $\\text{H}_2\\text{O}$, оксидов, песка $\\text{SiO}_2$). Кислород — самый распространённый элемент земной коры.</p>'
|
||
+'<div class="def-box"><b>Кислород как простое вещество</b> — это газ $\\text{O}_2$ (молекула из двух атомов). Элемент кислород образует и другое простое вещество — <b>озон</b> $\\text{O}_3$.</div>')
|
||
+makeCard('theory','Физические свойства кислорода','§14','<p>$\\text{O}_2$ — газ без цвета и запаха, немного тяжелее воздуха, мало растворим в воде. При сильном охлаждении превращается в голубоватую жидкость.</p>')
|
||
+wgt('Элемент O или простое вещество?','<div id="p14-tog"></div>')
|
||
+rememberBox(['Элемент кислород — атомы O в составе веществ.','Простое вещество — газ $O_2$.','Озон $O_3$ — другое простое вещество того же элемента.'])
|
||
+qList(['Когда говорят о кислороде-элементе, а когда — о простом веществе?','Назови физические свойства кислорода $O_2$.','Чем озон отличается от кислорода?'])
|
||
+secNav('lo2','p15')+readButton('p14');
|
||
wireReadBtn('p14');
|
||
}
|
||
|
||
function build_p15(){
|
||
document.getElementById('p15-body').innerHTML =
|
||
'<div class="para-hero"><div class="ph-label">§ 15 · Химия 7</div><h2>Химические свойства кислорода</h2>'
|
||
+'<div class="ph-formula">вещество $+ \\text{O}_2 \\to$ оксид</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','Кислород — активное вещество','§15','<p>Кислород реагирует со многими простыми и сложными веществами. Реакции, идущие с выделением тепла и света, называют <b>горением</b>. Продукты горения простых веществ в кислороде — <b>оксиды</b>.</p>'
|
||
+'<div class="def-box"><b>Окисление</b> — реакция вещества с кислородом. Оно бывает быстрым (горение) и <b>медленным</b> (дыхание, гниение, ржавление железа).</div>')
|
||
+makeCard('example','Горение веществ в кислороде',null,'<ul><li>$\\text{C}+\\text{O}_2=\\text{CO}_2$</li><li>$\\text{S}+\\text{O}_2=\\text{SO}_2$ (резкий запах)</li><li>$4\\text{P}+5\\text{O}_2=2\\text{P}_2\\text{O}_5$</li><li>$3\\text{Fe}+2\\text{O}_2=\\text{Fe}_3\\text{O}_4$ (искры)</li></ul>')
|
||
+wgt('Симулятор горения в кислороде','<div id="p15-burn"></div>')
|
||
+rememberBox(['Горение — реакция с кислородом, идёт с выделением тепла и света.','Продукт горения простого вещества — оксид.','Окисление бывает быстрым (горение) и медленным.'])
|
||
+qList(['Что образуется при горении вещества в кислороде?','Приведи пример медленного окисления.','Запиши уравнение горения углерода.'])
|
||
+secNav('p14','p16')+readButton('p15');
|
||
wireReadBtn('p15');
|
||
}
|
||
|
||
/* заглушки для ещё не наполненных § (следующая волна) */
|
||
(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 главы 2 */
|
||
window.BUILDERS.p13 = build_p13;
|
||
window.BUILDERS.lo2 = build_lo2;
|
||
window.BUILDERS.p14 = build_p14;
|
||
window.BUILDERS.p15 = build_p15;
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|