feat(chemistry7): Phase 1 Волна 2 — Глава 1, §§4–6
§4 Относительная атомная масса (весы атомов: во сколько раз тяжелее), §5 Молекулы и простые вещества (галерея молекул O2/O3/H2/N2 шариками), §6 Сложные вещества (классификатор простое/сложное + галерея H2O/CO2/CH4/NH3). Теория, тренажёры задач. Тест: 8/8 pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
@@ -154,8 +154,90 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Волна 2 ── */
|
||||
|
||||
/* §4 — «весы атомов»: во сколько раз один атом тяжелее другого */
|
||||
var ABEL = ['H','C','N','O','Na','Mg','Al','S','Cl','Ca','Fe','Cu','Zn','Ag'];
|
||||
function mount_p4() {
|
||||
var m = $('p4-bal'); if (!m || m._built) return; m._built = 1;
|
||||
function opts(sel){ return ABEL.map(function(e){ var ar=C().arOf?C().arOf(e):''; return '<option value="'+e+'"'+(e===sel?' selected':'')+'>'+e+' (A_r='+ar+')</option>'; }).join(''); }
|
||||
m.innerHTML = '<div class="fld"><label>Атом A</label><select id="p4-a">'+opts('S')+'</select>'
|
||||
+'<label>Атом B</label><select id="p4-b">'+opts('O')+'</select></div><div class="out" id="p4-out"></div>';
|
||||
function upd(){
|
||||
var a=$('p4-a').value, b=$('p4-b').value, ara=+C().arOf(a), arb=+C().arOf(b);
|
||||
var out=$('p4-out');
|
||||
if(!ara||!arb){ out.textContent='—'; return; }
|
||||
var big=Math.max(ara,arb), sm=Math.min(ara,arb), k=big/sm;
|
||||
var heavier=ara>=arb?a:b, lighter=ara>=arb?b:a;
|
||||
out.className='out ok';
|
||||
out.innerHTML='<span class="bd">A_r('+a+')='+ara+', A_r('+b+')='+arb+'<br>'
|
||||
+(ara===arb?('Атомы '+a+' и '+b+' имеют одинаковую массу.')
|
||||
:('Атом <b>'+heavier+'</b> тяжелее атома '+lighter+' в <b>'+(Math.round(k*100)/100).toString().replace('.',',')+'</b> раз.'))+'</span>';
|
||||
}
|
||||
$('p4-a').addEventListener('change',upd); $('p4-b').addEventListener('change',upd); upd();
|
||||
}
|
||||
|
||||
/* рисуем молекулу как набор шариков-атомов */
|
||||
var COL = { H:'#cbd5e1', O:'#ef4444', N:'#3b82f6', C:'#334155', S:'#eab308', Cl:'#22c55e', Fe:'#b45309', Na:'#a78bfa' };
|
||||
var RAD = { H:11, O:16, N:15, C:16, S:18, Cl:17, Fe:18, Na:17 };
|
||||
function molBalls(atoms) {
|
||||
// atoms: [[el,n],...]; рисуем в ряд
|
||||
var balls = [], cx = 26;
|
||||
atoms.forEach(function(pair){ for(var i=0;i<pair[1];i++){ balls.push(pair[0]); } });
|
||||
var W0 = Math.max(120, cx*2 + balls.reduce(function(s,e){return s+(RAD[e]||14)*2+8;},0));
|
||||
var x = cx, svg = '';
|
||||
balls.forEach(function(el){
|
||||
var r = RAD[el]||14; x += r;
|
||||
svg += '<circle cx="'+x+'" cy="34" r="'+r+'" fill="'+(COL[el]||'#94a3b8')+'" stroke="rgba(0,0,0,.25)"/>'
|
||||
+ '<text x="'+x+'" y="39" text-anchor="middle" font-size="13" font-weight="700" fill="#fff">'+el+'</text>';
|
||||
x += r + 8;
|
||||
});
|
||||
return '<svg viewBox="0 0 '+W0+' 68" width="100%" style="max-width:'+W0+'px;height:auto">'+svg+'</svg>';
|
||||
}
|
||||
function molCard(name, formula, atoms, note) {
|
||||
return '<div style="border:1.5px solid var(--border);border-radius:11px;padding:10px 12px;background:var(--card)">'
|
||||
+'<div style="font-weight:700;margin-bottom:2px">'+esc(name)+' · '+(C().formula?C().formula(formula):formula)+'</div>'
|
||||
+ molBalls(atoms)
|
||||
+'<div style="font-size:.82rem;color:var(--muted);margin-top:4px">'+esc(note)+'</div></div>';
|
||||
}
|
||||
|
||||
/* §5 — галерея простых веществ */
|
||||
function mount_p5() {
|
||||
var m = $('p5-gal'); if (!m || m._built) return; m._built = 1;
|
||||
m.innerHTML = '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px">'
|
||||
+ molCard('Водород','H2',[['H',2]],'2 атома H — двухатомная молекула')
|
||||
+ molCard('Кислород','O2',[['O',2]],'2 атома O')
|
||||
+ molCard('Озон','O3',[['O',3]],'3 атома O — тоже простое вещество')
|
||||
+ molCard('Азот','N2',[['N',2]],'2 атома N')
|
||||
+ '</div><div style="font-size:.84rem;color:var(--muted);margin-top:8px">Во всех молекулах — атомы <b>одного</b> элемента → это <b>простые вещества</b>. Кислород $\\text{O}_2$ и озон $\\text{O}_3$ образованы одним элементом, но это разные простые вещества.</div>';
|
||||
if (W.chem8RenderMath) try { W.chem8RenderMath(m); } catch(e){}
|
||||
}
|
||||
|
||||
/* §6 — классификатор простое/сложное + галерея сложных веществ */
|
||||
function mount_p6() {
|
||||
var c = $('p6-cls');
|
||||
if (c) classifier(c, {
|
||||
buckets: ['Простое вещество', 'Сложное вещество'],
|
||||
items: [
|
||||
{ t:'O₂', b:0 }, { t:'H₂O', b:1 }, { t:'Fe', b:0 }, { t:'CO₂', b:1 },
|
||||
{ t:'N₂', b:0 }, { t:'NH₃', b:1 }, { t:'S', b:0 }, { t:'CH₄', b:1 }
|
||||
]
|
||||
});
|
||||
var g = $('p6-gal');
|
||||
if (g && !g._built) { g._built = 1;
|
||||
g.innerHTML = '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px">'
|
||||
+ molCard('Вода','H2O',[['O',1],['H',2]],'2 элемента: H и O')
|
||||
+ molCard('Углекислый газ','CO2',[['C',1],['O',2]],'2 элемента: C и O')
|
||||
+ molCard('Метан','CH4',[['C',1],['H',4]],'2 элемента: C и H')
|
||||
+ molCard('Аммиак','NH3',[['N',1],['H',3]],'2 элемента: N и H')
|
||||
+ '</div><div style="font-size:.84rem;color:var(--muted);margin-top:8px">В каждой молекуле — атомы <b>разных</b> элементов → это <b>сложные вещества</b>.</div>';
|
||||
if (W.chem8RenderMath) try { W.chem8RenderMath(g); } catch(e){}
|
||||
}
|
||||
}
|
||||
|
||||
W.CHEM8_WIDGETS = Object.assign(W.CHEM8_WIDGETS || {}, {
|
||||
p1: mount_p1, p2: mount_p2, pr1: mount_pr1, p3: mount_p3
|
||||
p1: mount_p1, p2: mount_p2, pr1: mount_pr1, p3: mount_p3,
|
||||
p4: mount_p4, p5: mount_p5, p6: mount_p6
|
||||
});
|
||||
W.FLAG_MOUNTS = Object.assign(W.FLAG_MOUNTS || {}, {});
|
||||
})(window);
|
||||
|
||||
@@ -104,18 +104,25 @@ window.PARAS = [
|
||||
];
|
||||
|
||||
window.ACH_LABELS = { start:'Начало главы 1!', p1_done:'§1 изучен!', p2_done:'§2 изучен!',
|
||||
pr1_done:'Практическая работа 1 выполнена!', p3_done:'§3 изучен!', final1_tasks:'Глава 1 пройдена!' };
|
||||
pr1_done:'Практическая работа 1 выполнена!', p3_done:'§3 изучен!',
|
||||
p4_done:'§4 изучен!', p5_done:'§5 изучен!', p6_done:'§6 изучен!', 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…']] }
|
||||
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$'],['Состав','можно разложить']] }
|
||||
};
|
||||
window.TIPS = [
|
||||
{ sec:'p1', html:'Тело — это <b>предмет</b> (гвоздь, стакан), а вещество — <b>то, из чего</b> он сделан (железо, стекло). Из одного вещества можно сделать много тел.' },
|
||||
{ sec:'p2', html:'Способ разделения подбирают по тому, <b>чем различаются</b> вещества смеси: растворимостью, магнитными свойствами, температурой кипения, плотностью.' },
|
||||
{ sec:'pr1', html:'Соль растворяется в воде, а песок — нет. Сначала отфильтруй песок, потом выпари воду — на дне останется соль.' },
|
||||
{ sec:'p3', html:'Химический элемент определяется <b>зарядом ядра</b> (числом протонов) — это и есть порядковый номер $Z$.' }
|
||||
{ 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$ — водород и кислород) и может быть разложено на простые.' }
|
||||
];
|
||||
|
||||
/* ── задачи (тренажёр) ── */
|
||||
@@ -137,6 +144,24 @@ window.POOLS = {
|
||||
{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 — два элемента.'}
|
||||
]
|
||||
};
|
||||
|
||||
@@ -217,6 +242,54 @@ function build_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(){
|
||||
var P = window.PARAS, B = {};
|
||||
@@ -243,6 +316,9 @@ 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;
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user