feat(chemistry7): Phase 2 Волна 1 — Глава 2, §13 + ЛО2 + §14 + §15
§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>
This commit is contained in:
Maxim Dolgolyov
@@ -17,6 +17,7 @@
|
||||
<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>
|
||||
@@ -88,11 +89,113 @@ window.PARAS = [
|
||||
{id:'final2', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
|
||||
];
|
||||
|
||||
window.ACH_LABELS = { start:'Начало главы 2!', final2_tasks:'Глава 2 пройдена!' };
|
||||
window.SIDEBARS = { p13:{ title:'Глава 2 · Химия 7', rows:[['Раздел','Кислород'],['§§','13–17'],['Лаб/ПР','ЛО 2 · ПР 2']] } };
|
||||
window.TIPS = [{ sec:'p13', html:'Глава наполняется содержанием по фазам. Сейчас доступны навигация по параграфам и отметка о прочтении (+10 XP).' }];
|
||||
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>.' }
|
||||
];
|
||||
|
||||
/* Phase 0: заглушки-builder'ы из PARAS (теория и интерактивы добавляются в фазах 1–4). */
|
||||
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){
|
||||
@@ -102,7 +205,7 @@ window.TIPS = [{ sec:'p13', html:'Глава наполняется содерж
|
||||
'<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>')
|
||||
'<p>Скоро здесь появятся теория, наглядные SVG-схемы и интерактивные тренажёры по теме «' + p.name + '». Пока доступна навигация по главе' + (p.final ? '.' : ' и отметка о прочтении.') + '</p>')
|
||||
+ secNav(prev, next) + (p.final ? '' : readButton(p.id));
|
||||
if (!p.final) wireReadBtn(p.id);
|
||||
};
|
||||
@@ -112,6 +215,12 @@ window.TIPS = [{ sec:'p13', html:'Глава наполняется содерж
|
||||
}
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user