feat(chemistry7): Phase 3 Волна 1 — Глава 3, §18 + §19 + §20 + ЛО3
§18 Водород — элемент и простое вещество (паспорт + модель H2), §19 Химические свойства водорода (горение → вода, восстановление CuO → Cu), §20 Понятие о кислотах (индикаторы лакмус/метилоранж + таблица кислот), ЛО3 Действие кислот на индикаторы. chem7_ch3_widgets.js. Тест: 13/13 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_ch3_widgets.js" defer></script>
|
||||
<script src="/js/chem8_engine.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -90,11 +91,114 @@ window.PARAS = [
|
||||
{id:'final3', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
|
||||
];
|
||||
|
||||
window.ACH_LABELS = { start:'Начало главы 3!', final3_tasks:'Глава 3 пройдена!' };
|
||||
window.SIDEBARS = { p18:{ title:'Глава 3 · Химия 7', rows:[['Раздел','Водород'],['§§','18–22'],['Лаб/ПР','ЛО 3,4 · ПР 3']] } };
|
||||
window.TIPS = [{ sec:'p18', html:'Глава наполняется содержанием по фазам. Сейчас доступны навигация по параграфам и отметка о прочтении (+10 XP).' }];
|
||||
window.ACH_LABELS = { start:'Начало главы 3!', p18_done:'§18 изучен!', p19_done:'§19 изучен!',
|
||||
p20_done:'§20 изучен!', lo3_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:[['Лакмус','красный'],['Метилоранж','розово-красный']] }
|
||||
};
|
||||
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:'В кислоте лакмус становится красным, а метилоранж — розово-красным. Так обнаруживают кислоту.' }
|
||||
];
|
||||
|
||||
/* Phase 0: заглушки-builder'ы из PARAS (теория и интерактивы добавляются в фазах 1–4). */
|
||||
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:'Индикаторы обнаруживают кислоты и щёлочи по изменению цвета.'}
|
||||
]
|
||||
};
|
||||
|
||||
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(){
|
||||
var P = window.PARAS, B = {};
|
||||
function ph(p, prev, next){
|
||||
@@ -104,7 +208,7 @@ window.TIPS = [{ sec:'p18', 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);
|
||||
};
|
||||
@@ -114,6 +218,12 @@ window.TIPS = [{ sec:'p18', html:'Глава наполняется содерж
|
||||
}
|
||||
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;
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user