feat(chemistry7): Phase 1 Волна 1 — Глава 1, §§1–3 + ПР1

§1 Химия — наука о веществах (классификатор тело/вещество), §2 Чистые вещества и смеси (разделитель смесей: фильтр/выпаривание/ магнит/отстаивание/перегонка), ПР1 разделение смеси соль+песок, §3 Атомы и химические элементы (каталог элементов + тренажёр символов). Теория, тренажёры задач (POOLS), глоссарные шпаргалки. chem7_ch1_widgets.js. Тест: 7/7 pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-05-30 18:22:36 +03:00
parent c33b4ab4f6
commit 185ce2b640
3 changed files with 299 additions and 5 deletions
@@ -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_ch1_widgets.js" defer></script>
 <script src="/js/chem8_engine.js" defer></script>
 </head>
 <body>
@@ -102,11 +103,121 @@ window.PARAS = [
  {id:'final1', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
 ];

-window.ACH_LABELS = { start:'Начало главы 1!', final1_tasks:'Глава 1 пройдена!' };
-window.SIDEBARS = { p1:{ title:'Глава 1 · Химия 7', rows:[['Раздел','Первоначальные понятия'],['§§','1–12'],['Лаб/ПР','ЛО 1 · ПР 1']] } };
-window.TIPS = [{ sec:'p1', html:'Глава наполняется содержанием по фазам. Сейчас доступны навигация по параграфам и отметка о прочтении (+10 XP).' }];
+window.ACH_LABELS = { start:'Начало главы 1!', p1_done:'§1 изучен!', p2_done:'§2 изучен!',
+  pr1_done:'Практическая работа 1 выполнена!', p3_done:'§3 изучен!', 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…']] }
+};
+window.TIPS = [
+  { sec:'p1', html:'Тело — это <b>предмет</b> (гвоздь, стакан), а вещество — <b>то, из чего</b> он сделан (железо, стекло). Из одного вещества можно сделать много тел.' },
+  { sec:'p2', html:'Способ разделения подбирают по тому, <b>чем различаются</b> вещества смеси: растворимостью, магнитными свойствами, температурой кипения, плотностью.' },
+  { sec:'pr1', html:'Соль растворяется в воде, а песок — нет. Сначала отфильтруй песок, потом выпари воду — на дне останется соль.' },
+  { sec:'p3', html:'Химический элемент определяется <b>зарядом ядра</b> (числом протонов) — это и есть порядковый номер $Z$.' }
+];

-/* Phase 0: заглушки-builder'ы из PARAS (теория и интерактивы добавляются в фазах 1–4). */
+/* ── задачи (тренажёр) ── */
+window.POOLS = {
+  p1:[
+    {q:'Что изучает химия?',opts:['Только движение тел','Вещества, их свойства и превращения','Только живые организмы','Звёзды и планеты'],a:1,ex:'Химия — наука о веществах, их свойствах и превращениях.'},
+    {q:'Что из перечисленного — физическое тело (а не вещество)?',opts:['Вода','Медь','Гвоздь','Кислород'],a:2,ex:'Гвоздь — предмет (тело); медь, вода, кислород — вещества.'},
+    {q:'«Железо» — это…',opts:['Физическое тело','Вещество','Смесь','Явление'],a:1,ex:'Железо — вещество, из которого можно сделать разные тела.'},
+    {q:'Какое из свойств НЕ является свойством вещества?',opts:['Цвет','Плотность','Растворимость','Номер дома'],a:3,ex:'Цвет, плотность, растворимость — свойства вещества; номер дома — нет.'}
+  ],
+  p2:[
+    {q:'Смесь песка и воды — какая?',opts:['Однородная','Неоднородная','Чистое вещество','Раствор'],a:1,ex:'Песчинки видны и не растворяются — смесь неоднородная.'},
+    {q:'Как разделить раствор соли в воде, чтобы получить соль?',opts:['Фильтрованием','Выпариванием','Магнитом','Никак'],a:1,ex:'Вода испаряется при нагревании, соль остаётся.'},
+    {q:'Раствор сахара в воде — это…',opts:['Чистое вещество','Однородная смесь','Неоднородная смесь','Простое вещество'],a:1,ex:'Сахар растворён равномерно — однородная смесь (раствор).'},
+    {q:'Чем удобно разделить смесь железных опилок и серы?',opts:['Магнитом','Выпариванием','Перегонкой','Фильтрованием'],a:0,ex:'Железо притягивается магнитом, сера — нет.'}
+  ],
+  p3:[
+    {q:'Атом — это…',opts:['Самое крупное тело','Мельчайшая химически неделимая частица','Смесь веществ','Молекула воды'],a:1,ex:'Атом — мельчайшая химически неделимая частица вещества.'},
+    {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).'}
+  ]
+};
+
+/* ── вспомогательные конструкторы контента ── */
+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>';
+}
+
+/* ── BUILDERS: реальные (Волна 1) + заглушки для остальных ── */
+function build_p1(){
+  document.getElementById('p1-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 1 · Химия 7</div><h2>Химия — наука о веществах</h2>'
+    +'<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','Вещества и тела','§1','<p><b>Химия</b> — наука о веществах, их свойствах и превращениях. <b>Физическое тело</b> — это предмет (гвоздь, стакан, ложка). <b>Вещество</b> — то, из чего состоит тело (железо, стекло, вода).</p>'
+      +'<div class="def-box">Из <b>одного</b> вещества можно изготовить <b>много разных</b> тел: из стекла — стакан, колбу, линзу. И наоборот, одно тело может состоять из нескольких веществ.</div>')
+    +makeCard('theory','Свойства веществ','§1','<p>Каждое вещество узнают по его <b>свойствам</b>: цвет, запах, агрегатное состояние, плотность, температуры плавления и кипения, растворимость в воде, тепло- и электропроводность.</p>'
+      +'<p>По набору свойств одно вещество отличают от другого: например, медь — красная и проводит ток, а сера — жёлтая и ток не проводит.</p>')
+    +makeCard('rule','Наблюдение и эксперимент','§1','<p>Химия — <b>экспериментальная</b> наука. Главные методы — <b>наблюдение</b> и <b>опыт (эксперимент)</b>. Опыты проводят в химической лаборатории, используя оборудование: пробирки, колбы, стаканы, спиртовку, штатив. Работать нужно по <b>правилам техники безопасности</b>.</p>')
+    +wgt('Распредели: физическое тело или вещество?','<div id="p1-cls"></div>')
+    +rememberBox(['Тело — предмет; вещество — то, из чего он сделан.','Вещество узнают по свойствам (цвет, плотность, растворимость…).','Химия изучает вещества опытным путём в лаборатории.'])
+    +qList(['Чем тело отличается от вещества? Приведи примеры.','Назови 3 свойства, по которым можно отличить медь от серы.','Почему в лаборатории важно соблюдать правила безопасности?'])
+    +secNav(null,'p2')+readButton('p1');
+  wireReadBtn('p1');
+}
+
+function build_p2(){
+  document.getElementById('p2-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 2 · Химия 7</div><h2>Чистые вещества и смеси</h2>'
+    +'<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','Чистое вещество и смесь','§2','<p><b>Чистое вещество</b> имеет постоянный состав и постоянные свойства. <b>Смесь</b> состоит из двух и более веществ, и её свойства зависят от состава.</p>'
+      +'<div class="def-box"><b>Однородные</b> смеси: состав одинаков во всём объёме, частицы не видны (раствор соли или сахара в воде, воздух). <b>Неоднородные</b>: составные части видны (песок в воде, смесь железа и серы).</div>')
+    +makeCard('rule','Способы разделения смесей','§2','<p>Смеси разделяют, используя <b>различие свойств</b> веществ:</p>'
+      +'<ul><li><b>Фильтрование</b> — нерастворимое отделяют от жидкости.</li><li><b>Выпаривание</b> — выделяют растворённое вещество, испаряя воду.</li><li><b>Отстаивание</b> (делительная воронка) — несмешивающиеся жидкости разной плотности.</li><li><b>Перегонка (дистилляция)</b> — вещества с разной температурой кипения.</li><li><b>Действие магнитом</b> — если одно вещество притягивается.</li></ul>')
+    +makeCard('example','Разделение смеси соли и песка',null,'<div class="exa-step">1) Добавить воду — соль растворится, песок нет. 2) <b>Фильтрование</b> — песок останется на фильтре. 3) <b>Выпаривание</b> фильтрата — получим чистую соль.</div>')
+    +wgt('Подбери способ разделения смеси','<div id="p2-sep"></div>')
+    +rememberBox(['Чистое вещество — постоянный состав и свойства.','Смеси бывают однородные и неоднородные.','Способ разделения выбирают по различию свойств веществ.'])
+    +qList(['Приведи пример однородной и неоднородной смеси.','Как разделить смесь воды и растительного масла?','Почему смесь соли и песка нельзя разделить только фильтрованием?'])
+    +secNav('p1','pr1')+readButton('p2');
+  wireReadBtn('p2');
+}
+
+function build_pr1(){
+  document.getElementById('pr1-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">Практическая работа 1</div><h2>Знакомство с лабораторией. Разделение смесей</h2>'
+    +'<div class="ph-desc">Познакомиться с лабораторным оборудованием и разделить неоднородную смесь на чистые вещества.</div></div>'
+    +makeCard('lab','Оборудование и порядок работы',null,'<p><b>Оборудование:</b> стакан, стеклянная палочка, воронка с фильтром, фарфоровая чашка, спиртовка, штатив.</p>'
+      +'<ol><li>Рассмотри смесь поваренной соли и песка — она <b>неоднородная</b>.</li><li>Пересыпь смесь в стакан, добавь воды и размешай — соль растворится.</li><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="pr1-sep"></div>')
+    +secNav('p2','p3')+readButton('pr1');
+  wireReadBtn('pr1');
+}
+
+function build_p3(){
+  document.getElementById('p3-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 3 · Химия 7</div><h2>Атомы. Химические элементы</h2>'
+    +'<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','Атомы','§3','<p>Все вещества состоят из мельчайших частиц. <b>Атом</b> — мельчайшая химически неделимая частица вещества. Атомы очень малы: их нельзя увидеть даже в обычный микроскоп.</p>')
+    +makeCard('theory','Химические элементы','§3','<p><b>Химический элемент</b> — это вид атомов с одинаковым зарядом ядра. Каждый элемент имеет <b>название</b> и <b>символ</b> (знак): водород — $\\text{H}$, кислород — $\\text{O}$, железо — $\\text{Fe}$. Порядковый номер элемента $Z$ равен числу протонов в ядре его атомов.</p>'
+      +'<div class="def-box">Известно более 100 химических элементов. В земной коре больше всего атомов кислорода и кремния, а во Вселенной — водорода.</div>')
+    +wgt('Каталог элементов: клик → номер, название, $A_r$','<div class="el-grid" id="p3-el"></div><div class="el-info" id="p3-elinfo">Выбери элемент, чтобы увидеть его характеристики.</div>')
+    +wgt('Тренажёр: символ → название элемента','<div id="p3-drill"></div>')
+    +rememberBox(['Атом — мельчайшая химически неделимая частица.','Химический элемент — вид атомов с одинаковым зарядом ядра.','У каждого элемента есть символ и порядковый номер $Z$.'])
+    +qList(['Чем атом отличается от химического элемента?','Запиши символы водорода, кислорода, железа и меди.','Что показывает порядковый номер элемента?'])
+    +secNav('pr1','p4')+readButton('p3');
+  wireReadBtn('p3');
+}
+
+/* заглушки для ещё не наполненных § (фазы — следующие волны) */
 (function(){
  var P = window.PARAS, B = {};
  function ph(p, prev, next){
@@ -116,7 +227,7 @@ window.TIPS = [{ sec:'p1', 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);
    };
@@ -126,6 +237,12 @@ window.TIPS = [{ sec:'p1', html:'Глава наполняется содерж
  }
  window.BUILDERS = B;
 })();
+
+/* переопределяем заглушки реальными builder'ами Волны 1 */
+window.BUILDERS.p1 = build_p1;
+window.BUILDERS.p2 = build_p2;
+window.BUILDERS.pr1 = build_pr1;
+window.BUILDERS.p3 = build_p3;
 </script>

 </body>