diff --git a/backend/tests/chemistry7-page.test.js b/backend/tests/chemistry7-page.test.js index 5a1e23d..c34fb1d 100644 --- a/backend/tests/chemistry7-page.test.js +++ b/backend/tests/chemistry7-page.test.js @@ -23,6 +23,7 @@ function buildPage(file) { '/js/biochem-core.js': readF('frontend/js/biochem-core.js'), '/js/chem8_svg.js': readF('frontend/js/chem8_svg.js'), '/js/chem7_svg.js': readF('frontend/js/chem7_svg.js'), + '/js/chem7_ch1_widgets.js': readF('frontend/js/chem7_ch1_widgets.js'), '/js/chem8_engine.js': readF('frontend/js/chem8_engine.js') }; html = html @@ -67,6 +68,21 @@ for (const ch of CHAPTERS) { }); } +test('ch1 Волна 1: интерактивы §1–§3 + ПР1 монтируются без ошибок', async () => { + const { doc, errors } = await loadDom('chemistry_7_ch1.html'); + // §1 строится при загрузке (первый §) — классификатор «тело/вещество» + assert.ok(doc.querySelector('#p1-cls .c7-chip'), 'классификатор §1'); + doc.defaultView.goTo('p2'); await wait(100); + assert.ok(doc.querySelector('#p2-sep .c7-m'), 'разделитель смесей §2'); + doc.defaultView.goTo('pr1'); await wait(100); + assert.ok(doc.querySelector('#pr1-sep .c7-m'), 'разделитель смесей ПР1'); + doc.defaultView.goTo('p3'); await wait(100); + assert.ok(doc.querySelectorAll('#p3-el .el-cell').length > 10, 'каталог элементов §3'); + assert.ok(doc.querySelector('#p3-drill .c7-d'), 'тренажёр символов §3'); + assert.ok(doc.querySelectorAll('#navDotsp3 .nav-dot').length >= 4, 'тренажёр задач §3'); + assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); +}); + test('ch1: переход к §9 и финалу строит заглушку без ошибок', async () => { const { doc, errors } = await loadDom('chemistry_7_ch1.html'); doc.defaultView.goTo('p9'); await wait(80); diff --git a/frontend/js/chem7_ch1_widgets.js b/frontend/js/chem7_ch1_widgets.js new file mode 100644 index 0000000..b435934 --- /dev/null +++ b/frontend/js/chem7_ch1_widgets.js @@ -0,0 +1,161 @@ +/* chem7_ch1_widgets.js — интерактивы главы 1 «Первоначальные химические понятия» (Химия 7). + * Монтируются движком chem8_engine.js: window.CHEM8_WIDGETS[id] / window.FLAG_MOUNTS[id]. + * Используют window.Chem8 (chem8_svg.js): molarMass, elementCounts, arOf, fmt, equationBalancer. + * Без эмоджи; KaTeX-рендер — через window.chem8RenderMath. + */ +(function (W) { + 'use strict'; + function C() { return W.Chem8 || {}; } + function $(id) { return document.getElementById(id); } + function esc(s){ return String(s).replace(/&/g,'&').replace(//g,'>'); } + + /* ── общий мини-классификатор: чипы → 2 корзины ──────────────────── */ + function classifier(mount, opts) { + if (!mount || mount._built) return; mount._built = 1; + var items = opts.items.slice(); // {t, b} t=подпись, b=индекс корзины + var buckets = opts.buckets; // [name0, name1] + var placed = {}; // idx -> bucket + var pool = items.map(function (it, i) { return i; }); + function colorOf(ok){ return ok ? '#059669' : '#dc2626'; } + function render() { + var chips = pool.map(function (i) { + return ''; + }).join('') || 'Все карточки распределены.'; + var cols = buckets.map(function (name, bi) { + var inb = Object.keys(placed).filter(function (k) { return placed[k] === bi; }); + var cells = inb.map(function (k) { + var ok = items[k].b === bi; + return '
' + esc(items[k].t) + (ok ? ' ✓' : ' ✗') + '
'; + }).join('') || '
перетащите сюда…
'; + return '
' + esc(name) + '
' + cells + '
'; + }).join(''); + mount.innerHTML = '
' + chips + '
' + cols + '
' + + '
Кликни карточку, затем — корзину. Зелёный — верно, красный — ошибка.
'; + bind(); + } + var sel = null; + function bind() { + mount.querySelectorAll('.c7-chip').forEach(function (b) { + b.addEventListener('click', function () { + mount.querySelectorAll('.c7-chip').forEach(function (x) { x.style.outline = ''; }); + sel = +b.dataset.i; b.style.outline = '2px solid var(--pri)'; + }); + }); + mount.querySelectorAll('.c7-bucket').forEach(function (col) { + col.addEventListener('click', function () { + if (sel == null) return; + placed[sel] = +col.dataset.b; + pool = pool.filter(function (x) { return x !== sel; }); + sel = null; render(); + }); + }); + } + render(); + } + + /* §1 — классификатор «тело / вещество» */ + function mount_p1() { + var m = $('p1-cls'); if (!m) return; + classifier(m, { + buckets: ['Физическое тело', 'Вещество'], + items: [ + { t: 'стакан', b: 0 }, { t: 'вода', b: 1 }, { t: 'гвоздь', b: 0 }, { t: 'железо', b: 1 }, + { t: 'ложка', b: 0 }, { t: 'сахар', b: 1 }, { t: 'медь', b: 1 }, { t: 'линейка', b: 0 } + ] + }); + } + + /* §2 / ПР1 — разделитель смесей: выбери метод для смеси */ + var MIX = [ + { mix: 'Песок и вода', method: 'Фильтрование', why: 'Песок не растворяется — задерживается фильтром, вода проходит.' }, + { mix: 'Соль и вода', method: 'Выпаривание', why: 'Вода испаряется, соль остаётся на дне.' }, + { mix: 'Железные опилки и сера', method: 'Магнит', why: 'Железо притягивается магнитом, сера — нет.' }, + { mix: 'Вода и растительное масло', method: 'Отстаивание (делительная воронка)', why: 'Масло легче воды и не смешивается — слои разделяют.' }, + { mix: 'Спирт и вода', method: 'Перегонка (дистилляция)', why: 'У спирта и воды разные температуры кипения.' } + ]; + var METHODS = ['Фильтрование', 'Выпаривание', 'Магнит', 'Отстаивание (делительная воронка)', 'Перегонка (дистилляция)']; + function mount_sep(mountId) { + var m = $(mountId); if (!m || m._built) return; m._built = 1; + var idx = 0; + function render() { + var cur = MIX[idx]; + m.innerHTML = '
' + + '
Каким способом разделить смесь «' + esc(cur.mix) + '»?
' + + '
' + METHODS.map(function (mt) { + return ''; + }).join('') + '
' + + '
Выбери способ разделения.
'; + $(mountId + '-pick').addEventListener('change', function (e) { idx = +e.target.value; m._built = 0; render(); }); + var out = $(mountId + '-out'); + m.querySelectorAll('.c7-m').forEach(function (b) { + b.addEventListener('click', function () { + var ok = b.dataset.m === cur.method; + out.className = 'out ' + (ok ? 'ok' : 'bad'); + out.innerHTML = ok + ? 'Верно! ' + esc(cur.method) + '. ' + esc(cur.why) + : 'Не подходит. Подумай, чем различаются вещества в смеси (растворимость, магнитные свойства, температура кипения, плотность).'; + }); + }); + } + render(); + } + function mount_p2() { mount_sep('p2-sep'); } + function mount_pr1() { mount_sep('pr1-sep'); } + + /* §3 — каталог элементов + тренажёр «символ ↔ название» */ + var EL = { + H: [1, 'Водород'], He: [2, 'Гелий'], Li: [3, 'Литий'], C: [6, 'Углерод'], N: [7, 'Азот'], + O: [8, 'Кислород'], F: [9, 'Фтор'], Na: [11, 'Натрий'], Mg: [12, 'Магний'], Al: [13, 'Алюминий'], + Si: [14, 'Кремний'], P: [15, 'Фосфор'], S: [16, 'Сера'], Cl: [17, 'Хлор'], K: [19, 'Калий'], + Ca: [20, 'Кальций'], Fe: [26, 'Железо'], Cu: [29, 'Медь'], Zn: [30, 'Цинк'], Ag: [47, 'Серебро'] + }; + function mount_p3() { + var grid = $('p3-el'), info = $('p3-elinfo'); + if (grid && !grid._built) { + grid._built = 1; + Object.keys(EL).forEach(function (s) { + var ar = C().arOf ? C().arOf(s) : ''; + var c = document.createElement('div'); c.className = 'el-cell'; + c.innerHTML = '' + EL[s][0] + '' + s + '' + ar + ''; + c.addEventListener('click', function () { + grid.querySelectorAll('.el-cell').forEach(function (x) { x.classList.remove('on'); }); c.classList.add('on'); + if (info) info.innerHTML = '' + EL[s][1] + ' (' + s + ') · порядковый номер Z = ' + EL[s][0] + ' · A_r = ' + ar; + }); + grid.appendChild(c); + }); + } + /* drill: дан символ → выбери название */ + var d = $('p3-drill'); if (d && !d._built) { + d._built = 1; + var keys = Object.keys(EL), order = keys.slice(), qi = 0, score = 0, total = 0; + function nextQ() { + var sym = order[qi % order.length]; + var correct = EL[sym][1]; + var opts = [correct]; + while (opts.length < 4) { var r = EL[keys[(qi * 7 + opts.length * 13 + 3) % keys.length]][1]; if (opts.indexOf(r) < 0) opts.push(r); } + // детерминированная перестановка + opts = opts.sort(function (a, b) { return ((a.length + qi) % 3) - ((b.length + qi) % 3); }); + d.innerHTML = '
Какому элементу соответствует символ ' + sym + '?
' + + '
' + opts.map(function (o) { return ''; }).join('') + '
' + + '
Счёт: ' + score + ' из ' + total + '
'; + var out = $('p3-drill-out'); + d.querySelectorAll('.c7-d').forEach(function (b) { + b.addEventListener('click', function () { + total++; var ok = b.dataset.o === correct; if (ok) score++; + out.className = 'out ' + (ok ? 'ok' : 'bad'); + out.innerHTML = (ok ? 'Верно! ' : 'Нет. ') + sym + ' — это ' + correct + '. Счёт: ' + score + ' из ' + total; + qi++; + setTimeout(nextQ, 850); + }); + }); + } + nextQ(); + } + } + + W.CHEM8_WIDGETS = Object.assign(W.CHEM8_WIDGETS || {}, { + p1: mount_p1, p2: mount_p2, pr1: mount_pr1, p3: mount_p3 + }); + W.FLAG_MOUNTS = Object.assign(W.FLAG_MOUNTS || {}, {}); +})(window); diff --git a/frontend/textbooks/chemistry_7_ch1.html b/frontend/textbooks/chemistry_7_ch1.html index 3bbf118..baa8e3e 100644 --- a/frontend/textbooks/chemistry_7_ch1.html +++ b/frontend/textbooks/chemistry_7_ch1.html @@ -17,6 +17,7 @@ + @@ -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:'Тело — это предмет (гвоздь, стакан), а вещество — то, из чего он сделан (железо, стекло). Из одного вещества можно сделать много тел.' }, + { sec:'p2', html:'Способ разделения подбирают по тому, чем различаются вещества смеси: растворимостью, магнитными свойствами, температурой кипения, плотностью.' }, + { sec:'pr1', html:'Соль растворяется в воде, а песок — нет. Сначала отфильтруй песок, потом выпари воду — на дне останется соль.' }, + { sec:'p3', html:'Химический элемент определяется зарядом ядра (числом протонов) — это и есть порядковый номер $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 '
' + +' Запомни!
'; +} +function qList(items){ + return '
Вопросы и задания
    ' + +items.map(function(t){return '
  1. '+t+'
    2. ';}).join('')+'
'; +} +function wgt(title, inner){ + return '
'+title+'
'+inner+'
'; +} + +/* ── BUILDERS: реальные (Волна 1) + заглушки для остальных ── */ +function build_p1(){ + document.getElementById('p1-body').innerHTML = + '
§ 1 · Химия 7

Химия — наука о веществах

' + +'
С чего начинается химия: чем тело отличается от вещества и как химики изучают вещества.
' + +'
веществотелосвойства
' + +makeCard('theory','Вещества и тела','§1','

Химия — наука о веществах, их свойствах и превращениях. Физическое тело — это предмет (гвоздь, стакан, ложка). Вещество — то, из чего состоит тело (железо, стекло, вода).

' + +'
Из одного вещества можно изготовить много разных тел: из стекла — стакан, колбу, линзу. И наоборот, одно тело может состоять из нескольких веществ.
') + +makeCard('theory','Свойства веществ','§1','

Каждое вещество узнают по его свойствам: цвет, запах, агрегатное состояние, плотность, температуры плавления и кипения, растворимость в воде, тепло- и электропроводность.

' + +'

По набору свойств одно вещество отличают от другого: например, медь — красная и проводит ток, а сера — жёлтая и ток не проводит.

') + +makeCard('rule','Наблюдение и эксперимент','§1','

Химия — экспериментальная наука. Главные методы — наблюдение и опыт (эксперимент). Опыты проводят в химической лаборатории, используя оборудование: пробирки, колбы, стаканы, спиртовку, штатив. Работать нужно по правилам техники безопасности.

') + +wgt('Распредели: физическое тело или вещество?','
') + +rememberBox(['Тело — предмет; вещество — то, из чего он сделан.','Вещество узнают по свойствам (цвет, плотность, растворимость…).','Химия изучает вещества опытным путём в лаборатории.']) + +qList(['Чем тело отличается от вещества? Приведи примеры.','Назови 3 свойства, по которым можно отличить медь от серы.','Почему в лаборатории важно соблюдать правила безопасности?']) + +secNav(null,'p2')+readButton('p1'); + wireReadBtn('p1'); +} + +function build_p2(){ + document.getElementById('p2-body').innerHTML = + '
§ 2 · Химия 7

Чистые вещества и смеси

' + +'
Чем чистое вещество отличается от смеси и как смеси разделяют на составные части.
' + +'
смесьоднороднаяразделение
' + +makeCard('theory','Чистое вещество и смесь','§2','

Чистое вещество имеет постоянный состав и постоянные свойства. Смесь состоит из двух и более веществ, и её свойства зависят от состава.

' + +'
Однородные смеси: состав одинаков во всём объёме, частицы не видны (раствор соли или сахара в воде, воздух). Неоднородные: составные части видны (песок в воде, смесь железа и серы).
') + +makeCard('rule','Способы разделения смесей','§2','

Смеси разделяют, используя различие свойств веществ:

' + +'') + +makeCard('example','Разделение смеси соли и песка',null,'
1) Добавить воду — соль растворится, песок нет. 2) Фильтрование — песок останется на фильтре. 3) Выпаривание фильтрата — получим чистую соль.
') + +wgt('Подбери способ разделения смеси','
') + +rememberBox(['Чистое вещество — постоянный состав и свойства.','Смеси бывают однородные и неоднородные.','Способ разделения выбирают по различию свойств веществ.']) + +qList(['Приведи пример однородной и неоднородной смеси.','Как разделить смесь воды и растительного масла?','Почему смесь соли и песка нельзя разделить только фильтрованием?']) + +secNav('p1','pr1')+readButton('p2'); + wireReadBtn('p2'); +} + +function build_pr1(){ + document.getElementById('pr1-body').innerHTML = + '
Практическая работа 1

Знакомство с лабораторией. Разделение смесей

' + +'
Познакомиться с лабораторным оборудованием и разделить неоднородную смесь на чистые вещества.
' + +makeCard('lab','Оборудование и порядок работы',null,'

Оборудование: стакан, стеклянная палочка, воронка с фильтром, фарфоровая чашка, спиртовка, штатив.

' + +'
  1. Рассмотри смесь поваренной соли и песка — она неоднородная.
  2. Пересыпь смесь в стакан, добавь воды и размешай — соль растворится.
  3. Профильтруй смесь: песок останется на фильтре, раствор соли пройдёт.
  4. Выпари фильтрат в фарфоровой чашке — вода испарится, останется соль.
  5. Сделай вывод: какие свойства позволили разделить смесь.
' + +'
Со спиртовкой и горячей чашкой работай осторожно; не пробуй вещества на вкус.
') + +wgt('Тренажёр: выбери способ разделения','
') + +secNav('p2','p3')+readButton('pr1'); + wireReadBtn('pr1'); +} + +function build_p3(){ + document.getElementById('p3-body').innerHTML = + '
§ 3 · Химия 7

Атомы. Химические элементы

' + +'
Из каких мельчайших частиц состоят вещества и что такое химический элемент.
' + +'
атомэлементсимвол
' + +makeCard('theory','Атомы','§3','

Все вещества состоят из мельчайших частиц. Атом — мельчайшая химически неделимая частица вещества. Атомы очень малы: их нельзя увидеть даже в обычный микроскоп.

') + +makeCard('theory','Химические элементы','§3','

Химический элемент — это вид атомов с одинаковым зарядом ядра. Каждый элемент имеет название и символ (знак): водород — $\\text{H}$, кислород — $\\text{O}$, железо — $\\text{Fe}$. Порядковый номер элемента $Z$ равен числу протонов в ядре его атомов.

' + +'
Известно более 100 химических элементов. В земной коре больше всего атомов кислорода и кремния, а во Вселенной — водорода.
') + +wgt('Каталог элементов: клик → номер, название, $A_r$','
Выбери элемент, чтобы увидеть его характеристики.
') + +wgt('Тренажёр: символ → название элемента','
') + +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:'Глава наполняется содерж '
' + p.num + ' · Химия 7

' + p.name + '

' + '
Содержание этого ' + (p.final ? 'раздела' : 'параграфа') + ' готовится.
' + makeCard('theory', p.name, p.num, - '

Скоро здесь появятся теория, наглядные SVG-схемы, молекулярные модели и интерактивные тренажёры по теме «' + p.name + '». Пока доступна навигация по главе' + (p.final ? '.' : ' и отметка о прочтении.') + '

') + '

Скоро здесь появятся теория, наглядные SVG-схемы и интерактивные тренажёры по теме «' + p.name + '». Пока доступна навигация по главе' + (p.final ? '.' : ' и отметка о прочтении.') + '

') + 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;