diff --git a/README.md b/README.md index 091d4bc..5bc2e54 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # LearnSpace -**Образовательная платформа с интерактивной онлайн-доской, системой тестирования, управлением классами и элементами геймификации.** +**Образовательная платформа с интерактивной онлайн-доской, системой тестирования, учебниками, виртуальной лабораторией и геймификацией.** -Стек: Node.js · Express · SQLite · Vanilla JS · Canvas API · SSE · WebRTC +Стек: Node.js · Express · SQLite (`node:sqlite` DatabaseSync) · Vanilla JS · Canvas API · SSE · WebRTC --- @@ -15,6 +15,8 @@ - [Архитектура](#архитектура) - [API](#api) - [Роли пользователей](#роли-пользователей) +- [Feature Flags](#feature-flags) +- [Контент](#контент) --- @@ -29,38 +31,60 @@ - Маркер (highlighter) с настраиваемой прозрачностью - Лазерная указка (без сохранения) - Ластик -- 11 фигур: прямоугольник, скруглённый прямоугольник, эллипс, линия, стрелка, треугольник, ромб, шестиугольник, звезда, облако, коннектор -- Стикеры с редактированием -- Текстовые блоки -- Вставка изображений -- Таблицы +- Connector (линии со стрелками) +- Стикеры с редактированием текста +- Текстовые блоки (inline editing) +- Вставка изображений (drag & drop + URL) +- Таблицы (интерактивные) - LaTeX-формулы (KaTeX) с визуальным редактором и категориями символов -- Система координат с построением графиков функций (встроенный парсер) +- Система координат с построением графиков функций (встроенный парсер выражений) - Числовая ось для неравенств (точки, интервалы) -- Циркуль с анимацией +- Циркуль с трёхфазной state machine + +**Фигуры (11):** прямоугольник, скруглённый прямоугольник, эллипс, линия, стрелка, треугольник, ромб, шестиугольник, звезда, облако, коннектор **Инструмент выделения** - Перемещение и изменение размера всех объектов - Вращение объектов (handle над объектом) - Lasso multi-select (резиновая рамка) - Shift+click для добавления к выделению -- Copy / Paste с автосмещением +- Copy/Paste с автосмещением - Snap-гайды при выравнивании объектов +- Delete, Bring to front, Send to back **Навигация по холсту** - Zoom: колесо мыши к курсору, Ctrl+`+`/`-`/`0`, кнопки в тулбаре - Pan: зажатый пробел + перетаскивание -- Minimap (192×108) в правом нижнем углу при zoom > 1 — клик/drag для прыжка по холсту +- Minimap (192×108) в правом нижнем углу при zoom > 1 — клик/drag для прыжка **Инструменты измерения** -- Линейка: поворот (drag ↺), изменение длины (drag ↔), панель свойств (угол, длина) +- Линейка: поворот, изменение длины, панель свойств (угол, длина) - Транспортир: поворот, изменение радиуса, панель свойств - Авто-измерения геометрических фигур (длины, углы, площадь) +**Планиметрия (геометрические построения)** +- Середина отрезка, биссектриса, высота, описанная/вписанная окружность +- Касательная, параллельный перенос, симметрия +- Правильный n-угольник, параллелограмм, средняя линия треугольника +- Метки параллельности, прямых углов, одинаковых отрезков +- Дуги углов, засечки рёбер + +**Стереометрия 3D** +- Куб, прямоугольный параллелепипед, тетраэдр, октаэдр, пирамида, призма +- Усечённая пирамида, правильные многогранники, конус, цилиндр, сфера +- Скрещивающиеся прямые, производные точки 3D, длины рёбер +- Вращение мышью, deep-link на конкретную фигуру (`openSim('stereo:cube')` / `?stereofig=`) + +**Темы доски (4)** +- **Chalkboard** — зелёный фон, меловая текстура +- **Blackboard** — тёмно-синий, диагональная текстура +- **Corkboard** — пробковый, волокна +- **Whiteboard** — светло-серый, маркерная доска + **Страницы и шаблоны** - Неограниченное количество страниц на сессию - Боковая панель с миниатюрами страниц -- Шаблоны: чистая страница, сетка, линейки, точки, координатные оси +- Шаблоны: чистая, сетка, линованная, точки, координатные оси - Экспорт страницы в PNG **Коммуникация** @@ -72,49 +96,203 @@ - Курсор учителя виден ученикам в реальном времени - Выдача прав рисования отдельным ученикам - Личные заметки по уроку (per user) +- Режим аннотации поверх симуляции + +--- + +### Учебники (Textbooks) + +Интерактивные параграф-по-параграфу учебники с прогрессом чтения. + +**Доступный контент (18 учебников)** + +| Предмет | Классы | +|---------|--------| +| Химия | 7, 8, 9 | +| Физика | 7, 8, 9, 10, 11 | +| Алгебра | 7, 8, 9, 10, 11 | +| Геометрия | 7, 8, 9, 10, 11 | + +**Функции:** +- Параграф-по-параграф навигация с прогресс-баром и `last_para` (последнее место) +- Задания на чтение: учитель назначает конкретные §, система проверяет выполнение +- Кнопка «В лабораторию» — ссылки на связанные симуляции (`lab_sim_links`) +- Чип «Связано с программой» (курикулумная привязка) +- Хабы глав: агрегированный прогресс по всем главам учебника +- Закладки с заметками и цветами +- Просмотр прогресса учеников класса (teacher view) +- Прогресс хранится в `textbook_progress` (JSON массив прочитанных §) + +**Контент-движок Химии 7 и 8:** +- 26 параграфов (Химия 7), 52 параграфа (Химия 8) с интерактивными виджетами +- Canvas-анимации (реакции, осадки, горение, электролиз, индикаторы) +- 3D-модели молекул (ball-and-stick, VSEPR-геометрия) +- Интегрированные задания и лабораторные работы +- Карты связей понятий, глоссарий в финалах глав + +--- + +### Виртуальная лаборатория (40 симуляций) + +Canvas-движок без внешних зависимостей (по аналогу three.js — всё сделано вручную). + +**Физика (14):** +projectile, waves, hydrostatics, race, dynamics, isoprocess, pendulum, opticsbench, radioactive, collision, heatengine, circuit, emfield, logic + +**Химия (14):** +titration, bohratom, qualanalysis, crystal, molphys, orbitals, organic, periodic, solutions, stoichiometry, chemsandbox, chemistry, equilibrium, electrolysis + +**Математика (9):** +graph, triangle, quadratic, normaldist, geometry (планиметрия), stereo (стереометрия 3D), probability, graphtransform, trigcircle + +**Биология (2):** +celldivision, photosynthesis + +**Игры (1):** +angrybirds + +**Lab Content Engine (LabRegistry):** +- Все симуляции зарегистрированы в `window.LabRegistry` через data-driven манифест +- Каталог в БД (`lab_sims`): включение/отключение отдельных симуляций, featured, теги +- Ленивая загрузка кода симуляций (Phase 3) +- Связь симуляций с параграфами учебников (`lab_sim_links`) +- Deep-link `?sim=` открывает конкретную симуляцию +- Курикулумная привязка: subject/grade/topics в манифесте +- Управление в админке: включение симуляций, редактор связей с учебниками + +**Оптическая скамья (opticsbench) — режим «Конструктор»:** +- 2D-трассировщик лучей (линза, зеркало, преломление) +- Характеристические лучи предмета, дисперсия, ПВО +- Алиасы deep-link: `thinlens`, `mirrors`, `refraction` + +--- + +### Биохимия (5 страниц) + +Интерактивный модуль без тяжёлых зависимостей (только Canvas). + +**Молекулярный редактор (`biochem.html`):** +- 2D и настоящая 3D-геометрия по VSEPR (ОЭПВО) +- Тумблер δ± — тепловая карта частичных зарядов (синий δ+/красный δ−), стрелка диполя +- Гибридизация, форма молекулы, валентный угол в панели свойств +- Импорт SMILES (учебное подмножество), экспорт PNG/JSON +- Химический движок `BIO` (window.BIO, dual-export browser+Node): `analyze`, `partialCharges`, `dipole`, `polarity`, `functionalGroups`, `balance`, `vsepr`, `render3D`, `parseSmiles`, `valency` +- Расширенная валидация валентности: подсказки («Углерод (C): занято 5 связей, максимум 4 — убери 1») + +**Серверный химический слой (`services/chem.js`):** +- Переиспользует то же ядро `biochem-core.js` (без дублирования) через dual-export +- `POST /api/biochem/analyze` → {formula, mass, dbe, geometry, polarity, dipole, charges, groups, massFractions, valency} +- `/validate` переведён на ядро (единые подсказки валентности на клиенте и сервере) +- `LS.biochemAnalyze(atoms, bonds)` в api.js + +**Библиотека (`biochem-library.html`):** 105+ молекул, 2D/3D-превью, сравнение + +**Реакции (`biochem-reactions.html`):** 27 реакций, `BIO.balance` (Гаусс+НОК), энергодиаграмма (canvas: реагенты→продукты, стрелка ΔH, экзо/эндо), коэффициенты + +**Метаболические пути (`biochem-pathways.html`):** пути из БД (`bio_pathways`), прогресс Learn-режима, награда XP + +**Свойства (`biochem-properties.html`):** сравнение молекул, столбчатый график молярных масс, экспорт CSV + +--- + +### Управление классом + +- Создание классов, добавление учеников +- Задания с дедлайнами и прикреплёнными файлами +- Отслеживание сдачи: статусы new/reviewed/accepted/revision +- Текстовые задания с прикреплением файлов учеником +- Журнал оценок +- Объявления и лента активности (Google Classroom-стиль) +- Шаблоны заданий для переиспользования +- Live-викторины в реальном времени (SSE) +- Аналитика успеваемости +- Назначение ученикам без класса (teacherStudents) +- Назначение чтения конкретных § учебника как домашнего задания + +--- ### Учебные материалы -- Банк вопросов с уровнями сложности и тематиками +- Банк вопросов с уровнями сложности, тематиками, поддержкой HTML/KaTeX - Конструктор тестов с перемешиванием вопросов - Многошаговые уроки с блоками: текст, медиа, формулы, код, викторина - Курсы с прогрессом прохождения - Карточки (flashcards) со spaced repetition - Граф знаний — визуализация связей между темами -- Интерактивные лабораторные работы (30+ симуляций): физика, химия, биология, математика +- Сборники ЦТ/ЦЭ: физика 2019–2024, математика 2021–2024 (300+ вопросов) +- Экзаменационные тесты (exam9): 80 вариантов по математике 9 класса -### Управление классом - -- Создание классов, добавление учеников -- Задания с дедлайнами, отслеживание сдачи -- Журнал оценок -- Объявления и лента активности (Google Classroom-стиль) -- Шаблоны заданий для переиспользования -- Live-викторины в реальном времени -- Аналитика успеваемости +--- ### Специализированный контент -- **Биохимия**: интерактивные молекулы, реакции, метаболические пути, электрофорез -- **Красная книга**: виды, биомы, экосистемы, пищевые сети, популяционные данные, квесты +**Биохимия** — см. раздел выше + +**Красная книга (4 страницы):** +- Виды, биомы, экосистемы, пищевые сети +- Популяционные данные, квесты + +**Коллекции:** коллекционирование предметов с галереей + +**Galaxy Map (`/sitemap`):** интерактивная Canvas-карта всех модулей платформы с feature flag фильтрацией + +--- ### Геймификация -- Опыт (XP) и уровни -- Система достижений +- Опыт (XP) и уровни (8 уровней эволюции, визуальная модель с VSEPR-геометрией) +- 38+ достижений в 6 группах (onboarding, streak, lab, exam, biochem, leaderboard) - Стрики (серии дней) -- Ежедневные цели и задачи -- Виртуальный питомец -- Магазин с внутренней валютой +- Ежедневные цели (easy/medium/hard тиры) с кольцом прогресса +- Виртуальный питомец: эволюция по уровням, 6 цветов, аксессуары (шляпа, очки, корона), радужный ошейник при streak ≥ 7, автономное настроение +- Магазин с внутренней валютой (монеты), фоны для питомца - Коллекционирование предметов +**Панель администратора геймификации:** +- Статистика: суммарный XP, монеты, средний уровень, достижения, покупки +- Топ-10 по XP, последние начисления XP с читаемыми подписями +- Начисление XP/монет: select с полным списком пользователей + фильтр, пресеты (0/+10/+25/+50/+100/+250), пресеты причин, fix: 0 XP не начисляется +- Сброс прогресса пользователя + +--- + ### Администрирование -- Управление пользователями и ролями -- Гранулярные разрешения (RBAC) -- Feature flags (глобальные и per-class) -- Журнал аудита -- Кабинет родителя +- Управление пользователями и ролями (student, teacher, admin, free_student) +- Гранулярные разрешения (RBAC) — per-role и per-user +- Feature flags: включение/отключение модулей (biochem, textbooks, flashcards, board, live_quiz, exam9) +- Управление симуляциями: каталог в БД, включение/отключение, редактор связей с учебниками +- Доступ к контенту (allowlist): учебники и экзамены по классам и ученикам (`content_access`) +- Журнал аудита (`admin_audit_log`) +- System Health: реальное время метрики (CPU, RAM, event loop lag), HTTP-статистика запросов, тренды (canvas-графики), журнал последних ошибок +- Кабинет родителя с аналитикой по ученику +- Аватары с crop/zoom — ученик загружает, учитель/админ модерирует +- Панель «Обзор» (командный центр): KPI 24ч, лента завершений, триаж событий, распределение по предметам +- KaTeX рендеринг в секции «Вопросы» +- Глобальный поиск (command palette): пользователи, тесты, классы + +--- + +### Дашборд (Главная) + +**Для ученика:** +- Карточка «Продолжить/Начать чтение» с обложкой учебника (цветная, по теме) +- Карточка «Лаборатория дня» с превью симуляции на фоне блока + deep-link +- Карточка питомца с реальными данными из `/api/pet` (имя, модель, цвет, уровень XP, настроение) +- Активность (тепловая карта / streak-календарь), слабые темы, задания + +**Для администратора:** +- Командный центр: pulse KPIs с count-up анимацией, attention inbox, лента завершений, health-плитки контента, топ/антирейтинг дня + +**Шапка (dash-header):** увеличенная (76px), аватарка 46px, Unbounded 1.15rem, кольца ученика 48px, чипы администратора крупные + +--- + +### Профиль и настройки + +- Звуковая система (12 звуков на Web Audio API): достижения, уровень, XP, монеты, тесты, доска +- Настройки предпочтений на сервере (dashboard widget visibility, whiteboard defaults) +- Вкладка звука и настроек в профиле --- @@ -130,9 +308,9 @@ cp backend/.env.example .env docker compose up -d ``` -Платформа будет доступна на `http://localhost:3000`. +Платформа доступна на `http://localhost:3000`. -Первый пользователь с ролью `admin` создаётся через seed: +Первый admin создаётся через seed: ```bash docker compose exec app npm run seed ``` @@ -141,29 +319,24 @@ docker compose exec app npm run seed ## Ручная установка -**Требования:** Node.js 18+ +**Требования:** Node.js 22+ ```bash -# 1. Клонировать и установить зависимости git clone https://git.dolgolyov-family.by/maxim.dolgolyov/Learn_System.git cd Learn_System/backend npm install -# 2. Конфигурация cp .env.example .env # Отредактировать .env -# 3. Миграции и начальные данные -npm run migrate -npm run seed # опционально — тестовые вопросы и пользователи +npm run migrate # применить все миграции (47 SQL-файлов) +npm run seed # опционально — тестовые данные -# 4. Запуск -npm start # production -npm run dev # development (nodemon) +npm start # production +npm run dev # development (nodemon) ``` -Сервер запустится на `http://localhost:3000`. -Фронтенд раздаётся Express-ом из папки `frontend/`. +Сервер стартует на `http://localhost:3000`. Фронтенд раздаётся Express из `frontend/`. --- @@ -189,28 +362,49 @@ npm run dev # development (nodemon) Learn_System/ ├── backend/ │ ├── src/ -│ │ ├── server.js # Express app, 28 route groups +│ │ ├── server.js # Express app, 40 route groups │ │ ├── config.js -│ │ ├── sse.js # Server-Sent Events broadcast -│ │ ├── controllers/ # 30 контроллеров -│ │ ├── routes/ # 28 файлов маршрутов -│ │ ├── middleware/ # auth, RBAC, rate limit, validate +│ │ ├── sse.js # Server-Sent Events broadcast +│ │ ├── controllers/ # 40+ контроллеров +│ │ │ ├── gamification/ # _shared, service, admin, achievements (split) +│ │ │ ├── classroom/ # 7 domain-файлов (split) +│ │ │ └── biochemController.js +│ │ ├── routes/ # 40 файлов маршрутов +│ │ ├── services/ +│ │ │ ├── chem.js # Серверный химический движок (dual-export с BIO) +│ │ │ └── contentAccess.js # Allowlist учебников и экзаменов +│ │ ├── middleware/ # auth, RBAC, rate limit, validate │ │ ├── db/ -│ │ │ ├── migrate.js # Auto-migration при старте (76 таблиц) -│ │ │ ├── db.js # better-sqlite3 singleton -│ │ │ └── migrations/ # SQL-файлы схемы -│ │ └── utils/ +│ │ │ ├── migrations-runner.js # Версионированный runner (47 миграций) +│ │ │ ├── db.js # node:sqlite DatabaseSync singleton +│ │ │ └── migrations/ # SQL-файлы схемы (000–046) +│ │ └── utils/ # audit, sanitize, healthMonitor │ └── package.json ├── frontend/ -│ ├── *.html # 43 страницы -│ ├── css/ls.css # Общая дизайн-система +│ ├── *.html # 60 страниц +│ ├── css/ls.css # Общая дизайн-система │ └── js/ -│ ├── whiteboard.js # Движок доски (~3200 строк) -│ ├── classroom-rtc.js # WebRTC модуль -│ └── labs/ # 30+ физических симуляций +│ ├── whiteboard.js # Движок доски (~3500+ строк) +│ ├── classroom-rtc.js # WebRTC модуль +│ ├── biochem-core.js # Химическое ядро BIO (dual-export) +│ ├── pet-sprite.js # Рендерер питомца (dual-export, shared) +│ ├── lab-previews.js # SVG-превью симуляций для дашборда +│ ├── labs/ # 40 симуляций + LabRegistry +│ │ ├── _registry.js # LabRegistry — единый реестр +│ │ ├── _register-all.js # Data-driven регистрация всех симуляций +│ │ ├── lab-glue.js # Каталог SIMS, THEORY, preview SVG +│ │ ├── lab-init.js # openSim dispatcher +│ │ └── *.js # 34 движка симуляций +│ └── admin/ # Секции admin.html +│ ├── admin.js # Оркестратор + роутер +│ ├── router.js # Hash-based router +│ └── sections/ # overview, users, sessions, gam, ... ├── js/ -│ ├── api.js # window.LS.* — клиентское API -│ └── mobile.js # Мобильная адаптация +│ ├── api.js # window.LS.* — 200+ клиентских методов +│ ├── sidebar.js # Сайдбар с nav-avatar +│ └── mobile.js # Мобильная адаптация +├── plans/ # Планы фич (BIOCHEM_UPGRADE, STEREO_3D, ...) +├── docs/ # Руководства и планы ├── docker-compose.yml └── Dockerfile ``` @@ -219,26 +413,45 @@ Learn_System/ **Синхронизация доски** - Штрихи сохраняются батчами через `POST /api/classroom/:id/strokes` -- Загрузка с `?since_seq=N` — клиент получает только новые штрихи -- Live-превью через `POST /stroke-preview` → SSE `stroke_preview` событие -- Двухслойный canvas: статический слой (_strokes) + динамический (_selection/guides/laser) +- Загрузка с `?since_seq=N` — только новые штрихи +- Live-превью через `POST /stroke-preview` → SSE `stroke_preview` +- Двухслойный canvas: статический (_strokes) + динамический (_selection/guides/laser) **Real-time (SSE)** -- Один SSE-поток на пользователя: `GET /api/classroom/:id/events` -- События: `stroke_batch`, `stroke_preview`, `stroke_deleted`, `page_changed`, `chat_message`, `cursor_move`, `hand_raised`, `screen_share`, и др. -- Compression отключён для SSE-потоков +- Один SSE-поток на пользователя +- События: `stroke_batch`, `stroke_preview`, `stroke_deleted`, `page_changed`, `chat_message`, `cursor_move`, `hand_raised`, `screen_share` и др. **База данных** -- SQLite через `better-sqlite3` (синхронный API) -- Автоматические миграции при каждом старте сервера -- 76 таблиц, транзакционная запись батчей штрихов +- SQLite через `node:sqlite` (`DatabaseSync`, встроенный в Node.js 22+) +- Версионированные миграции (47 SQL-файлов, 000–046) +- 106 таблиц +- Транзакционная запись батчей штрихов **Аутентификация** -- JWT Bearer token +- JWT Bearer token, bcryptjs - Роли: `admin`, `teacher`, `student`, `free_student` - RBAC middleware с кешированием разрешений - Rate limiting: 6000 req/min для classroom, 600 req/min для остальных +**Химическое ядро (BIO)** +- `frontend/js/biochem-core.js` — dual-export: `window.BIO` в браузере, `module.exports` в Node +- `backend/src/services/chem.js` — переиспользует ядро без дублирования +- VSEPR-геометрия, частичные заряды, дипольный момент, баланс уравнений (Гаусс+НОК) + +**Доступ к контенту (content_access)** +- allowlist учебников и экзаменов по классам и конкретным ученикам +- `services/contentAccess.js`: `canAccessTextbook`, `filterTextbooks`, `allowedRefs` +- `/api/access` — admin CRUD + +**Lab Content Engine (LabRegistry)** +- Все симуляции: data-driven манифесты в `LabRegistry` +- Ленивая загрузка через `LabLoader.ensure(simId)` +- Каталог в БД (`lab_sims`): включение, featured, теги, привязка к учебникам + +**Shared модули (pet-sprite.js, lab-previews.js)** +- `pet-sprite.js` — канонический рендерер питомца, используется и на `/pet`, и на дашборде +- `lab-previews.js` — SVG-превью 6 симуляций для карточки «Лаборатория дня» + --- ## API @@ -247,21 +460,41 @@ Learn_System/ Аутентификация: `Authorization: Bearer ` -| Группа | Базовый путь | Назначение | -|--------|-------------|-----------| -| Auth | `/auth` | Регистрация, вход, профиль | +| Группа | Путь | Назначение | +|--------|------|-----------| +| Auth | `/auth` | Регистрация, вход, профиль, аватар | | Classroom | `/classroom` | Онлайн-урок, доска, чат, WebRTC | | Classes | `/classes` | Управление классами | | Assignments | `/assignments` | Задания и сдача работ | +| Submissions | `/submissions` | Сдача работ, статусы, оценки | | Questions | `/questions` | Банк вопросов | | Sessions | `/sessions` | Тестовые сессии | | Courses | `/courses` | Теоретические курсы | | Lessons | `/lessons` | Уроки с блоками контента | -| Gamification | `/gamification` | XP, ачивки, стрики | -| Files | `/files` | Загрузка и хранение файлов | +| Textbooks | `/textbooks` | Учебники, прогресс, закладки | +| Lab | `/lab` | Симуляции: каталог, управление | +| Biochem | `/biochem` | Молекулы, реакции, пути, analyze, validate | +| Gamification | `/gamification` | XP, уровни, ачивки, стрики, admin | +| Pet | `/pet` | Питомец, действия, магазин фонов | +| Shop | `/shop` | Виртуальный магазин | | Live | `/live` | Live-викторины | | Analytics | `/analytics` | Статистика | -| Admin | `/admin` | Управление платформой | +| Admin | `/admin` | Управление платформой, overview | +| Access | `/access` | Allowlist контента | +| Exam9 | `/exam9` | Экзаменационные тесты | +| Files | `/files` | Загрузка и хранение файлов | +| Notifications | `/notifications` | Уведомления | +| Permissions | `/permissions` | RBAC правила | +| Search | `/search` | Глобальный поиск | +| Preferences | `/preferences` | Пользовательские настройки | +| Parent | `/parent` | Кабинет родителя | +| Red Book | `/red-book` | Красная книга | +| Collection | `/collection` | Коллекции предметов | +| Games | `/games` | Игры (виселица, кроссворд) | +| Knowledge Map | `/knowledge-map` | Граф знаний | +| Flashcards | `/flashcards` | Флэшкарты | +| Templates | `/templates` | Шаблоны заданий | +| Teacher Students | `/teacher-students` | Ученики учителя без класса | Полная документация по endpoint'ам — в `backend/src/routes/`. @@ -271,12 +504,54 @@ Learn_System/ | Роль | Доступ | |------|--------| -| `admin` | Полный доступ ко всему, включая панель администратора | -| `teacher` | Создание классов, уроков, заданий, проведение онлайн-уроков | -| `student` | Прохождение тестов, участие в уроках, доступ к материалам | -| `free_student` | Ограниченный доступ (настраивается feature flags) | +| `admin` | Полный доступ, панель администратора, командный центр | +| `teacher` | Классы, уроки, задания, учебники, проведение онлайн-уроков | +| `student` | Тесты, уроки, учебники (по allowlist), лаборатория, питомец | +| `free_student` | Ограниченный доступ (настраивается через feature flags) | -Разрешения настраиваются гранулярно через `/api/permissions`. +Разрешения настраиваются гранулярно через `/api/permissions` (per-role и per-user). + +--- + +## Feature Flags + +Управляются через `app_settings` и API `/api/admin` (только admin). + +| Флаг | Назначение | По умолчанию | +|------|-----------|-------------| +| `feature_biochem_enabled` | Модуль биохимии | вкл | +| `feature_textbooks_enabled` | Модуль учебников | вкл | +| `feature_flashcards_enabled` | Флэшкарты | вкл | +| `feature_board_enabled` | Доска (board) | вкл | +| `feature_live_quiz_enabled` | Live-викторины | выкл | +| `feature_exam9_enabled` | Экзаменационные тесты | вкл | +| `sim_module_disabled` | Весь модуль симуляций | выкл | +| `sim_disabled_ids` | JSON-массив отключённых симуляций | `[]` | + +--- + +## Контент + +### Учебники + +| Предмет | Классы | Статус | +|---------|--------|--------| +| Химия | 7, 8, 9 | Полный курс с виджетами и анимациями | +| Физика | 7, 8, 9, 10, 11 | Структура + контент | +| Алгебра | 7, 8, 9, 10, 11 | Структура + контент | +| Геометрия | 7, 8, 9, 10, 11 | Структура + контент | + +### Сборники ЦТ/ЦЭ + +| Сборник | Вопросов | +|---------|---------| +| Физика 2019–2024 | 150+ | +| Математика 2021–2024 | 150+ | +| Экзамен-9 (математика) | 80 вариантов | + +### Симуляции + +40 симуляций в 5 категориях — см. раздел «Виртуальная лаборатория». --- diff --git a/backend/nodemon.json b/backend/nodemon.json new file mode 100644 index 0000000..eb6c63a --- /dev/null +++ b/backend/nodemon.json @@ -0,0 +1,6 @@ +{ + "watch": ["src"], + "ext": "js,json,yaml,yml", + "ignore": ["src/**/*.test.js"], + "delay": "250" +} diff --git a/backend/src/controllers/biochemController.js b/backend/src/controllers/biochemController.js index 9ac3eed..4de8572 100644 --- a/backend/src/controllers/biochemController.js +++ b/backend/src/controllers/biochemController.js @@ -1,6 +1,7 @@ 'use strict'; const db = require('../db/db'); const { awardXP, checkAchievements } = require('./gamificationController'); +const chem = require('../services/chem'); /* ── Helpers ─────────────────────────────────────────────────────────── */ const MAX_V = { H:1, C:4, N:3, O:2, P:5, S:6, Cl:1, Na:1, Ca:2, K:1, Mg:2, Fe:3, Br:1, I:1, F:1 }; @@ -128,14 +129,26 @@ function validate(req, res) { return res.status(400).json({ error: 'atoms[] and bonds[] required' }); if (atoms.length === 0) return res.json({ valid: false, formula: '', issues: [] }); - const formula = hillFormula(atoms); - const issues = valencyIssues(atoms, bonds); - const valid = issues.length === 0; - + // Единое химическое ядро (Фаза 2.1): формула + валентность с подсказками (2.4) + const { valid, formula, issues } = chem.validate(atoms, bonds); const known = valid ? stmts.getMolByFormula.get(formula) : null; res.json({ valid, formula, issues, known: known || null }); } +/* ── POST /api/biochem/analyze — полный химический анализ структуры (2.2) ─ */ +function analyze(req, res) { + const { atoms, bonds } = req.body || {}; + if (!Array.isArray(atoms)) + return res.status(400).json({ error: 'atoms[] обязателен' }); + if (atoms.length === 0) + return res.json({ formula: '', mass: 0, dbe: null, valency: [] }); + try { + res.json(chem.analyze(atoms, Array.isArray(bonds) ? bonds : [])); + } catch (e) { + res.status(500).json({ error: e.message }); + } +} + /* ── GET /api/biochem/reactions ─────────────────────────────────────── */ function getReactions(_req, res) { const rows = stmts.getReactions.all().map(r => ({ @@ -374,7 +387,7 @@ function tryParse(v, fallback) { } module.exports = { - getElements, getMolecules, getMolecule, validate, + getElements, getMolecules, getMolecule, validate, analyze, getReactions, getChallenges, solveChallenge, getSaved, saveMolecule, deleteSaved, getPathways, getPathwayProgress, savePathwayProgress, diff --git a/backend/src/controllers/flashcardController.js b/backend/src/controllers/flashcardController.js index b5a3109..33a30f6 100644 --- a/backend/src/controllers/flashcardController.js +++ b/backend/src/controllers/flashcardController.js @@ -126,6 +126,30 @@ function addCardsBulk(req, res) { res.json({ inserted }); } +/* ── PUT /api/flashcards/decks/:id/reorder ───────────────────────────────── + body: { order: [cardId, …] } — переписывает order_idx по позиции в массиве. + Принимаются только карточки, реально принадлежащие колоде владельца. */ +function reorderCards(req, res) { + const uid = req.user.id; + const deck = db.prepare(`SELECT id FROM flashcard_decks WHERE id = ? AND user_id = ?`) + .get(req.params.id, uid); + if (!deck) return res.status(404).json({ error: 'Not found' }); + const { order } = req.body; + if (!Array.isArray(order) || !order.length) + return res.status(400).json({ error: 'order[] required' }); + + const owned = new Set( + db.prepare(`SELECT id FROM flashcard_cards WHERE deck_id = ?`).all(deck.id).map(r => r.id) + ); + const stmt = db.prepare(`UPDATE flashcard_cards SET order_idx = ? WHERE id = ? AND deck_id = ?`); + const run = db.transaction(() => { + let idx = 0; + order.forEach(id => { if (owned.has(Number(id))) stmt.run(idx++, Number(id), deck.id); }); + }); + run(); + res.json({ ok: true }); +} + /* ── PUT /api/flashcards/cards/:id ─────────────────────────────────────── */ function updateCard(req, res) { const uid = req.user.id; @@ -241,8 +265,64 @@ function getStats(req, res) { res.json({ decks_count, cards_count, due_count, reviewed_today }); } +/* ── POST /api/flashcards/quick — быстрое добавление из любой точки ────── + Кладёт карточку в указанную колоду (deckId) либо в личную колоду + «Быстрые карточки» (создаётся при первом обращении). */ +const QUICK_DECK_TITLE = 'Быстрые карточки'; +function quickAdd(req, res) { + const uid = req.user.id; + const front = stripTags((req.body.front || '').slice(0, 5000)).trim(); + const back = stripTags((req.body.back || '').slice(0, 5000)).trim(); + if (!front) return res.status(400).json({ error: 'Лицевая сторона обязательна' }); + + let deck = null; + const deckId = Number(req.body.deckId) || 0; + if (deckId) { + deck = db.prepare(`SELECT id, title, color FROM flashcard_decks WHERE id = ? AND user_id = ?`) + .get(deckId, uid); + } + if (!deck) { + deck = db.prepare(`SELECT id, title, color FROM flashcard_decks WHERE user_id = ? AND title = ? ORDER BY id LIMIT 1`) + .get(uid, QUICK_DECK_TITLE); + if (!deck) { + const r = db.prepare( + `INSERT INTO flashcard_decks (user_id, title, description, color) VALUES (?,?,?,?)` + ).run(uid, QUICK_DECK_TITLE, 'Карточки, добавленные на лету', '#9B5DE5'); + deck = { id: r.lastInsertRowid, title: QUICK_DECK_TITLE, color: '#9B5DE5', created: true }; + } + } + + const maxIdx = db.prepare(`SELECT MAX(order_idx) AS m FROM flashcard_cards WHERE deck_id = ?`) + .get(deck.id)?.m ?? -1; + const r = db.prepare(`INSERT INTO flashcard_cards (deck_id, front, back, order_idx) VALUES (?,?,?,?)`) + .run(deck.id, front, back, maxIdx + 1); + res.json({ id: r.lastInsertRowid, deck_id: deck.id, deck_title: deck.title, deck_color: deck.color, front, back }); +} + +/* ── GET /api/flashcards/random — случайная карточка из всего пула ─────── + Для дашборд-виджета «повтори карточку». */ +function getRandom(req, res) { + const uid = req.user.id; + const total = db.prepare(` + SELECT COUNT(*) AS n FROM flashcard_cards c + JOIN flashcard_decks d ON d.id = c.deck_id WHERE d.user_id = ? + `).get(uid).n; + if (!total) return res.json({ card: null, total: 0 }); + + const card = db.prepare(` + SELECT c.id, c.front, c.back, c.deck_id, + d.title AS deck_title, d.color AS deck_color + FROM flashcard_cards c + JOIN flashcard_decks d ON d.id = c.deck_id + WHERE d.user_id = ? + ORDER BY RANDOM() LIMIT 1 + `).get(uid); + res.json({ card, total }); +} + module.exports = { listDecks, createDeck, updateDeck, deleteDeck, - getCards, addCard, addCardsBulk, updateCard, deleteCard, + getCards, addCard, addCardsBulk, updateCard, deleteCard, reorderCards, getStudySession, submitReview, getStats, + quickAdd, getRandom, }; diff --git a/backend/src/controllers/questionController.js b/backend/src/controllers/questionController.js index 02575cb..54b8521 100644 --- a/backend/src/controllers/questionController.js +++ b/backend/src/controllers/questionController.js @@ -44,7 +44,7 @@ function list(req, res) { const sql = ` SELECT q.id, q.text, q.type, q.correct_text, q.difficulty, q.explanation, q.image, - q.year, q.source_type, + q.year, q.source_type, q.allow_html, t.name AS topic, t.id AS topic_id, s.name AS subject_name, s.slug AS subject_slug, (SELECT json_group_array(json_object( diff --git a/backend/src/middleware/ownership.js b/backend/src/middleware/ownership.js index 98cef49..e63de06 100644 --- a/backend/src/middleware/ownership.js +++ b/backend/src/middleware/ownership.js @@ -24,7 +24,7 @@ const db = require('../db/db'); * paramKey — req.params key for the record ID (default: 'id') * adminBypass — admin role always passes (default: true) */ -const ALLOWED_TABLES = new Set(['tests','classes','assignments','questions','courses','lessons','files','folders','shop_items','live_sessions']); +const ALLOWED_TABLES = new Set(['tests','classes','assignments','questions','courses','lessons','files','folders','shop_items','live_sessions','flashcard_decks']); function requireOwnership({ table, fetchFn, ownerField, paramKey = 'id', adminBypass = true }) { if (table && !ALLOWED_TABLES.has(table)) throw new Error(`requireOwnership: unknown table "${table}"`); diff --git a/backend/src/routes/biochem.js b/backend/src/routes/biochem.js index 38ace09..bc37da4 100644 --- a/backend/src/routes/biochem.js +++ b/backend/src/routes/biochem.js @@ -8,6 +8,7 @@ router.get('/elements', c.getElements); router.get('/molecules', c.getMolecules); router.get('/molecules/:id', c.getMolecule); router.post('/validate', c.validate); +router.post('/analyze', c.analyze); router.get('/reactions', c.getReactions); router.get('/challenges', c.getChallenges); router.post('/challenges/:id/solve', c.solveChallenge); diff --git a/backend/src/routes/flashcards.js b/backend/src/routes/flashcards.js index 13d9a65..be0d81e 100644 --- a/backend/src/routes/flashcards.js +++ b/backend/src/routes/flashcards.js @@ -2,9 +2,12 @@ const express = require('express'); const router = express.Router(); const fc = require('../controllers/flashcardController'); const { authMiddleware } = require('../middleware/auth'); +const { requireOwnership } = require('../middleware/ownership'); router.use(authMiddleware); +router.post ('/quick', fc.quickAdd); +router.get ('/random', fc.getRandom); router.get ('/decks', fc.listDecks); router.post ('/decks', fc.createDeck); router.put ('/decks/:id', fc.updateDeck); @@ -12,6 +15,7 @@ router.delete('/decks/:id', fc.deleteDeck); router.get ('/decks/:id/cards', fc.getCards); router.post ('/decks/:id/cards', fc.addCard); router.post ('/decks/:id/cards/bulk', fc.addCardsBulk); +router.put ('/decks/:id/reorder', requireOwnership({ table: 'flashcard_decks', ownerField: 'user_id' }), fc.reorderCards); router.get ('/decks/:id/study', fc.getStudySession); router.put ('/cards/:id', fc.updateCard); router.delete('/cards/:id', fc.deleteCard); diff --git a/backend/src/services/chem.js b/backend/src/services/chem.js new file mode 100644 index 0000000..397af26 --- /dev/null +++ b/backend/src/services/chem.js @@ -0,0 +1,46 @@ +'use strict'; +/* + * chem.js — серверный химический слой (Фаза 2.1/2.2). + * + * Переиспользует то же ядро, что и фронт (frontend/js/biochem-core.js, + * `window.BIO`), вместо дублирования химии: формулы/масса/DBE, частичные + * заряды, дипольный момент (по 3D-геометрии VSEPR), полярность, функциональные + * группы, гибридизация, проверка валентности. + * + * Ядро самодостаточно (без DOM/canvas в чистых функциях) и при require в Node + * экспортирует объект BIO через module.exports. + */ +const path = require('path'); +const BIO = require(path.join(__dirname, '..', '..', '..', 'frontend', 'js', 'biochem-core.js')); + +/* Полный анализ структуры → {formula, mass, dbe, geometry, polarity, dipole, + * charges, groups, massFractions, valency}. Бросает на некорректном вводе. */ +function analyze(atoms, bonds) { + const an = BIO.analyze(atoms, bonds || []); + if (!an) return null; + return { + formula: an.formula, + mass: an.mass, + dbe: an.dbe, + atomCount: an.atomCount, + geometry: an.geometry, // {shape, hybridization, angle, centerSym} + polarity: an.polarity ? an.polarity.label : null, // «Полярная» / «Неполярная» / … + dipole: an.dipole, + charges: an.charges, + groups: an.groups, + massFractions: an.massFractions, + valency: BIO.valency(atoms, bonds || []), + }; +} + +/* Проверка корректности: формула + проблемы валентности (с подсказками). */ +function validate(atoms, bonds) { + const issues = BIO.valency(atoms, bonds || []); + return { + valid: issues.length === 0, + formula: BIO.hillFormula(atoms || []), + issues, + }; +} + +module.exports = { analyze, validate, BIO }; diff --git a/backend/tests/chemistry7-page.test.js b/backend/tests/chemistry7-page.test.js index dc4c4c6..bfe152c 100644 --- a/backend/tests/chemistry7-page.test.js +++ b/backend/tests/chemistry7-page.test.js @@ -23,8 +23,11 @@ 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_anim.js': readF('frontend/js/chem7_anim.js'), '/js/chem7_ch1_widgets.js': readF('frontend/js/chem7_ch1_widgets.js'), '/js/chem7_ch2_widgets.js': readF('frontend/js/chem7_ch2_widgets.js'), + '/js/chem7_ch3_widgets.js': readF('frontend/js/chem7_ch3_widgets.js'), + '/js/chem7_ch4_widgets.js': readF('frontend/js/chem7_ch4_widgets.js'), '/js/chem8_engine.js': readF('frontend/js/chem8_engine.js') }; html = html @@ -96,6 +99,29 @@ test('ch1 Волна 2: интерактивы §4–§6 монтируются assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); }); +test('ch1 V-пилот: 3D-молекулы §5/§6 + анимация разделения §2', async () => { + const { doc, errors } = await loadDom('chemistry_7_ch1.html'); + doc.defaultView.goTo('p5'); await wait(120); + assert.ok(doc.querySelector('#p5-gal .mv-b'), 'переключатель молекул §5'); + assert.ok(doc.querySelector('#p5-gal-stage svg circle'), '3D-молекула §5 (SVG)'); + doc.defaultView.goTo('p6'); await wait(120); + assert.ok(doc.querySelector('#p6-gal-stage svg circle'), '3D-молекула §6 (SVG)'); + doc.defaultView.goTo('p2'); await wait(120); + const btn = [...doc.querySelectorAll('#p2-sep .c7-m')].find(b => b.dataset.m === 'Фильтрование'); + assert.ok(btn, 'кнопка верного метода §2 найдена'); + btn.dispatchEvent(new doc.defaultView.Event('click', { bubbles: true })); await wait(50); + assert.ok(doc.querySelector('#p2-sep-anim canvas'), 'сцена разделения §2 (canvas)'); + // §10: анимация признаков реакции после «Провести опыт» + doc.defaultView.goTo('p10'); await wait(120); + doc.getElementById('p10-signs-go').dispatchEvent(new doc.defaultView.Event('click', { bubbles: true })); await wait(40); + assert.ok(doc.querySelector('#p10-signs-stage div'), 'анимация признаков реакции §10'); + // §11: осадок появляется при «Смешать» + doc.defaultView.goTo('p11'); await wait(120); + doc.getElementById('p11-mix').dispatchEvent(new doc.defaultView.Event('click', { bubbles: true })); await wait(40); + assert.ok(doc.querySelector('#p11-stage div'), 'анимация осадка §11'); + assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); +}); + test('ch1 Волна 3: интерактивы §7–§9 монтируются и считают', async () => { const { doc, errors } = await loadDom('chemistry_7_ch1.html'); doc.defaultView.goTo('p7'); await wait(100); @@ -105,6 +131,7 @@ test('ch1 Волна 3: интерактивы §7–§9 монтируются assert.match(doc.querySelector('#p8-out').textContent, /100/, 'M_r(CaCO3)=100'); doc.defaultView.goTo('p9'); await wait(100); assert.ok(doc.querySelector('#p9-bld #p9-a'), 'конструктор валентности §9'); + assert.ok(doc.querySelector('#p9-vis svg circle'), 'схема валентных связей §9'); assert.match(doc.querySelector('#p9-bout').textContent, /Al/, 'формула по валентности построена'); assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); }); @@ -119,6 +146,7 @@ test('ch1 Волна 4: §10–§12 + ЛО1 + финал главы монтир assert.ok(doc.querySelector('#p11-bal svg'), 'весы сохранения массы §11'); doc.defaultView.goTo('p12'); await wait(120); assert.ok(doc.querySelector('#p12-mount').childElementCount > 0, 'балансировщик §12'); + assert.ok(doc.querySelector('#p12-tally .c7-atom'), 'подсчёт атомов §12 (летящие атомы)'); doc.defaultView.goTo('final1'); await wait(120); assert.ok(doc.querySelectorAll('#navDotsfinal1 .nav-dot').length >= 6, 'боссы финала главы'); assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); @@ -145,6 +173,76 @@ test('ch2 Волна 1: интерактивы §13 + ЛО2 + §14 + §15 мон assert.ok(doc.querySelector('#p15-burn #p15-go'), 'симулятор горения §15'); doc.defaultView.goTo('p15'); doc.getElementById('p15-go').dispatchEvent(new doc.defaultView.Event('click', { bubbles: true })); assert.match(doc.querySelector('#p15-out').textContent, /оксид/, 'горение даёт оксид'); + assert.ok(doc.querySelector('#p15-stage div'), 'анимация пламени §15'); + assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); +}); + +test('ch2 Волна 2: §16 + §17 + ПР2 + финал главы монтируются', async () => { + const { doc, errors } = await loadDom('chemistry_7_ch2.html'); + doc.defaultView.goTo('p16'); await wait(100); + assert.ok(doc.querySelector('#p16-bld #p16-el'), 'конструктор оксида §16'); + assert.ok(doc.querySelector('#p16-cls .c7-chip'), 'классификатор оксид/не оксид §16'); + doc.defaultView.goTo('p17'); await wait(100); + assert.ok(doc.querySelector('#p17-prod #p17-pick'), 'схема получения O2 §17'); + doc.defaultView.goTo('pr2'); await wait(100); + assert.ok(doc.querySelector('#pr2-test #pr2-go'), 'проверка кислорода ПР2'); + doc.defaultView.goTo('final2'); await wait(120); + assert.ok(doc.querySelectorAll('#navDotsfinal2 .nav-dot').length >= 6, 'боссы финала главы 2'); + assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); +}); + +test('ch3 Волна 1: §18 + §19 + §20 + ЛО3 монтируются', async () => { + const { doc, errors } = await loadDom('chemistry_7_ch3.html'); + assert.ok(doc.querySelector('#p18-card svg'), 'паспорт водорода §18'); + doc.defaultView.goTo('p19'); await wait(100); + assert.ok(doc.querySelector('#p19-rx #p19-pick'), 'реакции водорода §19'); + assert.ok(doc.querySelector('#p19-stage div'), 'анимация реакции §19'); + doc.defaultView.goTo('p20'); await wait(100); + assert.ok(doc.querySelector('#p20-ind #p20-ind-ind'), 'индикаторы §20'); + assert.ok(doc.querySelector('#p20-ind-drop div'), 'анимация индикатора §20'); + assert.ok(doc.querySelector('#p20-acids table'), 'таблица кислот §20'); + doc.defaultView.goTo('lo3'); await wait(100); + assert.ok(doc.querySelector('#lo3-ind #lo3-ind-ind'), 'индикаторы ЛО3'); + assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); +}); + +test('ch3 Волна 2: §21 + ЛО4 + §22 + ПР3 + финал главы монтируются', async () => { + const { doc, errors } = await loadDom('chemistry_7_ch3.html'); + doc.defaultView.goTo('p21'); await wait(100); + assert.ok(doc.querySelector('#p21-act .act-cell'), 'ряд активности §21'); + // клик по Zn (левее H₂) → пузырьки H₂ + doc.querySelector('#p21-act .act-cell[data-i="5"]').dispatchEvent(new doc.defaultView.Event('click', { bubbles: true })); await wait(40); + assert.ok(doc.querySelector('#p21-tube div'), 'пузырьки H₂ при реакции металла с кислотой §21'); + doc.defaultView.goTo('lo4'); await wait(100); + assert.ok(doc.querySelector('#lo4-rx #lo4-go'), 'опыт металл+кислота ЛО4'); + doc.defaultView.goTo('p22'); await wait(100); + assert.ok(doc.querySelector('#p22-salt #p22-m'), 'конструктор солей §22'); + doc.defaultView.goTo('pr3'); await wait(100); + assert.ok(doc.querySelector('#pr3-test #pr3-mix'), 'проверка чистоты H2 ПР3'); + doc.defaultView.goTo('final3'); await wait(120); + assert.ok(doc.querySelectorAll('#navDotsfinal3 .nav-dot').length >= 6, 'боссы финала главы 3'); + assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); +}); + +test('ch4: вся глава 4 (§23–§26 + ЛО5 + ПР4 + финал) монтируется', async () => { + const { doc, errors } = await loadDom('chemistry_7_ch4.html'); + assert.ok(doc.querySelector('#p23-water #p23-pick'), 'разложение/реакции воды §23'); + assert.ok(doc.querySelector('#p23-bub-h div'), 'пузырьки электролиза 2:1 §23'); + doc.defaultView.goTo('p24'); await wait(100); + assert.ok(doc.querySelector('#p24-bld #p24-m'), 'конструктор оснований §24'); + assert.ok(doc.querySelector('#p24-ind #p24-ind-sel'), 'индикаторы щёлочи §24'); + assert.ok(doc.querySelector('#p24-ind-drop div'), 'анимация индикатора §24'); + doc.defaultView.goTo('lo5'); await wait(100); + assert.ok(doc.querySelector('#lo5-ind #lo5-ind-sel'), 'индикаторы ЛО5'); + doc.defaultView.goTo('p25'); await wait(100); + assert.ok(doc.querySelector('#p25-neu #p25-neu-go'), 'нейтрализация §25'); + assert.ok(doc.querySelector('#p25-neu-cup div'), 'анимация раствора §25'); + doc.defaultView.goTo('pr4'); await wait(100); + assert.ok(doc.querySelector('#pr4-neu #pr4-neu-go'), 'нейтрализация ПР4'); + doc.defaultView.goTo('p26'); await wait(100); + assert.ok(doc.querySelector('#p26-eco .eco-it'), 'экология §26'); + doc.defaultView.goTo('final4'); await wait(120); + assert.ok(doc.querySelectorAll('#navDotsfinal4 .nav-dot').length >= 6, 'боссы финала главы 4'); assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | ')); }); diff --git a/frontend/admin.html b/frontend/admin.html index f5f2d30..02af9fc 100644 --- a/frontend/admin.html +++ b/frontend/admin.html @@ -653,6 +653,74 @@ .adm-toggle .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: transform .2s; } .adm-toggle input:checked ~ .track { background: var(--green, #06d6a0); } .adm-toggle input:checked ~ .thumb { transform: translateX(18px); } + /* ── Gam award form ─────────────────────────────────────────────────── */ + .gam-award-grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } + @media (max-width: 800px) { .gam-award-grid { grid-template-columns: 1fr; } } + + .gam-user-col { display: flex; flex-direction: column; gap: 6px; } + .gam-user-filter { + padding: 9px 12px; border: 1.5px solid var(--border-h); border-radius: 10px; + font-family: 'Manrope', sans-serif; font-size: 0.88rem; background: var(--surface); color: var(--text); + transition: border-color .15s; box-sizing: border-box; width: 100%; + } + .gam-user-filter:focus { outline: none; border-color: var(--violet); } + .gam-user-select { + border: 1.5px solid var(--border-h); border-radius: 10px; + font-family: 'Manrope', sans-serif; font-size: 0.88rem; background: var(--surface); color: var(--text); + overflow-y: auto; width: 100%; box-sizing: border-box; + transition: border-color .15s; + } + .gam-user-select:focus { outline: none; border-color: var(--violet); } + .gam-user-select option { padding: 7px 12px; } + .gam-user-select option:checked { background: rgba(155,93,229,0.1); color: var(--violet); } + + .gam-fields { display: flex; flex-direction: column; gap: 18px; } + .gam-field-row { display: flex; flex-direction: column; gap: 6px; } + .gam-field-row label { font-size: 0.72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; } + .gam-input-row { display: flex; align-items: center; gap: 8px; } + .gam-num-input { + width: 88px; padding: 9px 12px; border: 1.5px solid var(--border-h); border-radius: 10px; + font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 700; text-align: center; + background: var(--surface); color: var(--text); transition: border-color .15s; + } + .gam-num-input:focus { outline: none; border-color: var(--violet); } + + .gam-presets { display: flex; gap: 5px; flex-wrap: wrap; } + .gam-preset { + padding: 6px 13px; border: 1.5px solid var(--border-h); border-radius: 8px; + background: var(--surface); color: var(--text-2); + font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700; + cursor: pointer; transition: border-color .15s, background .15s, color .15s; + } + .gam-preset:hover { border-color: var(--violet); color: var(--violet); } + .gam-preset.active { background: var(--violet); color: #fff; border-color: var(--violet); } + + .gam-reason-presets { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; } + .gam-reason-tag { + padding: 5px 12px; border: 1.5px solid var(--border-h); border-radius: 8px; + background: var(--surface); color: var(--text-3); + font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 600; + cursor: pointer; transition: border-color .15s, color .15s; + } + .gam-reason-tag:hover { border-color: var(--cyan); color: var(--cyan); } + .gam-reason-input { + width: 100%; padding: 9px 12px; border: 1.5px solid var(--border-h); border-radius: 10px; + font-family: 'Manrope', sans-serif; font-size: 0.88rem; + background: var(--surface); color: var(--text); box-sizing: border-box; + transition: border-color .15s; + } + .gam-reason-input:focus { outline: none; border-color: var(--violet); } + + .gam-award-footer { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--border); margin-top: 6px; } + .gam-award-hint { font-size: 0.78rem; color: var(--text-3); line-height: 1.4; } + + .gam-reset-grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } + @media (max-width: 800px) { .gam-reset-grid { grid-template-columns: 1fr; } } + .gam-reset-warning { + background: rgba(241,91,181,0.06); border: 1.5px solid rgba(241,91,181,0.2); + border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; + } + .gam-reset-warning p { font-size: 0.84rem; color: var(--text-2); line-height: 1.5; } .adm-user-search { position: relative; } .adm-user-search .us-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: #fff; border: 1.5px solid var(--border-h); border-radius: 12px; max-height: 240px; overflow-y: auto; box-shadow: 0 8px 24px rgba(15,23,42,0.12); display: none; } .adm-user-search .us-results.open { display: block; } @@ -1376,39 +1444,89 @@
Начислить XP / Монеты
-
-
- - -
- +
+ + +
+ + +
-
- - + + +
+ +
+ +
+ +
+ + + + + + +
+
+
+ +
+ +
+ +
+ + + + +
+
+
+ +
+ +
+ + + + + +
+ +
+ +
+ + XP = 0 или Монеты = 0 — эта валюта не начисляется +
+
-
- - -
-
- - -
-
Сбросить прогресс пользователя
-
-
- - -
- +
+
+ + + +
+
+

Удалит весь XP, монеты, достижения и историю начислений. Действие необратимо и не может быть отменено.

+
-
diff --git a/frontend/biochem-library.html b/frontend/biochem-library.html index 5e239f4..b2e3b6e 100644 --- a/frontend/biochem-library.html +++ b/frontend/biochem-library.html @@ -278,7 +278,44 @@ .page-header { padding: 10px; } .filters-row { padding: 8px 10px; } } - + + /* ── Biochem subnav ─────────────────────────────────────────────── */ + .biochem-subnav { + display: flex; align-items: center; gap: 2px; + padding: 0 16px; + background: rgba(255,255,255,0.92); + backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); + border-bottom: 1.5px solid rgba(15,23,42,0.07); + flex-shrink: 0; overflow-x: auto; + scrollbar-width: none; position: relative; + } + .biochem-subnav::-webkit-scrollbar { display: none; } + .biochem-subnav::after { + content: ''; position: absolute; bottom: -1px; left: 0; right: 0; + height: 1.5px; background: rgba(15,23,42,0.07); + } + .bsn-tab { + display: inline-flex; align-items: center; gap: 7px; + padding: 11px 14px; border-radius: 9px; margin: 5px 1px; + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; + color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap; + transition: background .15s, color .15s; position: relative; + } + .bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } + .bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; } + .bsn-active { + background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700; + } + .bsn-active::after { + content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px; + height: 2.5px; border-radius: 99px; background: #9B5DE5; + } + @media (max-width: 560px) { + .biochem-subnav { padding: 0 6px; } + .bsn-tab { padding: 10px 10px; gap: 0; } + .bsn-tab .bsn-label { display: none; } + } +
@@ -286,6 +323,9 @@
+
@@ -368,7 +408,7 @@ if (!user) location.href = '/login'; const nav = document.getElementById('nav-user'); const ava = document.getElementById('nav-avatar'); if (nav) nav.textContent = user?.name?.split(' ')[0] || 'Пользователь'; -if (ava) ava.textContent = (user?.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS'; +LS.renderNavAvatar(ava, user); if (isAdmin) document.getElementById('btn-admin').style.display = ''; if (isTeacher) document.getElementById('btn-classes').style.display = ''; LS.showBoardIfAllowed(); @@ -612,5 +652,6 @@ init(); + diff --git a/frontend/biochem-pathways.html b/frontend/biochem-pathways.html index 7e20a35..05fcc42 100644 --- a/frontend/biochem-pathways.html +++ b/frontend/biochem-pathways.html @@ -338,7 +338,44 @@ .path-chip { font-size: 0.68rem; padding: 4px 10px; } .side-panel { max-height: 45vh; } } - + + /* ── Biochem subnav ─────────────────────────────────────────────── */ + .biochem-subnav { + display: flex; align-items: center; gap: 2px; + padding: 0 16px; + background: rgba(255,255,255,0.92); + backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); + border-bottom: 1.5px solid rgba(15,23,42,0.07); + flex-shrink: 0; overflow-x: auto; + scrollbar-width: none; position: relative; + } + .biochem-subnav::-webkit-scrollbar { display: none; } + .biochem-subnav::after { + content: ''; position: absolute; bottom: -1px; left: 0; right: 0; + height: 1.5px; background: rgba(15,23,42,0.07); + } + .bsn-tab { + display: inline-flex; align-items: center; gap: 7px; + padding: 11px 14px; border-radius: 9px; margin: 5px 1px; + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; + color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap; + transition: background .15s, color .15s; position: relative; + } + .bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } + .bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; } + .bsn-active { + background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700; + } + .bsn-active::after { + content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px; + height: 2.5px; border-radius: 99px; background: #9B5DE5; + } + @media (max-width: 560px) { + .biochem-subnav { padding: 0 6px; } + .bsn-tab { padding: 10px 10px; gap: 0; } + .bsn-tab .bsn-label { display: none; } + } +
@@ -346,6 +383,9 @@
+
@@ -1040,5 +1080,6 @@ init(); + diff --git a/frontend/biochem-properties.html b/frontend/biochem-properties.html index f5e6bdf..b17d2ef 100644 --- a/frontend/biochem-properties.html +++ b/frontend/biochem-properties.html @@ -192,7 +192,44 @@ .props-sidebar { max-height: 40vh; } .mol-card-grid { grid-template-columns: 1fr !important; } } - + + /* ── Biochem subnav ─────────────────────────────────────────────── */ + .biochem-subnav { + display: flex; align-items: center; gap: 2px; + padding: 0 16px; + background: rgba(255,255,255,0.92); + backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); + border-bottom: 1.5px solid rgba(15,23,42,0.07); + flex-shrink: 0; overflow-x: auto; + scrollbar-width: none; position: relative; + } + .biochem-subnav::-webkit-scrollbar { display: none; } + .biochem-subnav::after { + content: ''; position: absolute; bottom: -1px; left: 0; right: 0; + height: 1.5px; background: rgba(15,23,42,0.07); + } + .bsn-tab { + display: inline-flex; align-items: center; gap: 7px; + padding: 11px 14px; border-radius: 9px; margin: 5px 1px; + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; + color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap; + transition: background .15s, color .15s; position: relative; + } + .bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } + .bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; } + .bsn-active { + background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700; + } + .bsn-active::after { + content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px; + height: 2.5px; border-radius: 99px; background: #9B5DE5; + } + @media (max-width: 560px) { + .biochem-subnav { padding: 0 6px; } + .bsn-tab { padding: 10px 10px; gap: 0; } + .bsn-tab .bsn-label { display: none; } + } +
@@ -200,6 +237,9 @@
+
@@ -249,7 +289,7 @@ if (!user) location.href = '/login'; const nav = document.getElementById('nav-user'); const ava = document.getElementById('nav-avatar'); if (nav) nav.textContent = user?.name?.split(' ')[0] || 'Пользователь'; -if (ava) ava.textContent = (user?.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS'; +LS.renderNavAvatar(ava, user); if (isAdmin) document.getElementById('btn-admin').style.display = ''; if (isTeacher) document.getElementById('btn-classes').style.display = ''; LS.showBoardIfAllowed(); @@ -618,5 +658,6 @@ LS.hideDisabledFeatures?.(); + diff --git a/frontend/biochem-reactions.html b/frontend/biochem-reactions.html index 3bd6de8..e34ef00 100644 --- a/frontend/biochem-reactions.html +++ b/frontend/biochem-reactions.html @@ -316,7 +316,44 @@ .page-header { padding: 10px; } .rxn-card { padding: 10px; } } - + + /* ── Biochem subnav ─────────────────────────────────────────────── */ + .biochem-subnav { + display: flex; align-items: center; gap: 2px; + padding: 0 16px; + background: rgba(255,255,255,0.92); + backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); + border-bottom: 1.5px solid rgba(15,23,42,0.07); + flex-shrink: 0; overflow-x: auto; + scrollbar-width: none; position: relative; + } + .biochem-subnav::-webkit-scrollbar { display: none; } + .biochem-subnav::after { + content: ''; position: absolute; bottom: -1px; left: 0; right: 0; + height: 1.5px; background: rgba(15,23,42,0.07); + } + .bsn-tab { + display: inline-flex; align-items: center; gap: 7px; + padding: 11px 14px; border-radius: 9px; margin: 5px 1px; + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; + color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap; + transition: background .15s, color .15s; position: relative; + } + .bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } + .bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; } + .bsn-active { + background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700; + } + .bsn-active::after { + content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px; + height: 2.5px; border-radius: 99px; background: #9B5DE5; + } + @media (max-width: 560px) { + .biochem-subnav { padding: 0 6px; } + .bsn-tab { padding: 10px 10px; gap: 0; } + .bsn-tab .bsn-label { display: none; } + } +
@@ -324,6 +361,9 @@
+
@@ -369,7 +409,7 @@ if (!user) location.href = '/login'; const nav = document.getElementById('nav-user'); const ava = document.getElementById('nav-avatar'); if (nav) nav.textContent = user?.name?.split(' ')[0] || 'Пользователь'; -if (ava) ava.textContent = (user?.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS'; +LS.renderNavAvatar(ava, user); if (isAdmin) document.getElementById('btn-admin').style.display = ''; if (isTeacher) document.getElementById('btn-classes').style.display = ''; LS.showBoardIfAllowed(); @@ -836,5 +876,6 @@ init(); + diff --git a/frontend/biochem.html b/frontend/biochem.html index 096e8c2..c121b79 100644 --- a/frontend/biochem.html +++ b/frontend/biochem.html @@ -332,7 +332,44 @@ .el-btn { width: 28px; height: 28px; font-size: 0.66rem; } .tool-btn { height: 26px; padding: 0 6px; font-size: 0.66rem; } } - + + /* ── Biochem subnav ─────────────────────────────────────────────── */ + .biochem-subnav { + display: flex; align-items: center; gap: 2px; + padding: 0 16px; + background: rgba(255,255,255,0.92); + backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); + border-bottom: 1.5px solid rgba(15,23,42,0.07); + flex-shrink: 0; overflow-x: auto; + scrollbar-width: none; position: relative; + } + .biochem-subnav::-webkit-scrollbar { display: none; } + .biochem-subnav::after { + content: ''; position: absolute; bottom: -1px; left: 0; right: 0; + height: 1.5px; background: rgba(15,23,42,0.07); + } + .bsn-tab { + display: inline-flex; align-items: center; gap: 7px; + padding: 11px 14px; border-radius: 9px; margin: 5px 1px; + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; + color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap; + transition: background .15s, color .15s; position: relative; + } + .bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } + .bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; } + .bsn-active { + background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700; + } + .bsn-active::after { + content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px; + height: 2.5px; border-radius: 99px; background: #9B5DE5; + } + @media (max-width: 560px) { + .biochem-subnav { padding: 0 6px; } + .bsn-tab { padding: 10px 10px; gap: 0; } + .bsn-tab .bsn-label { display: none; } + } +
@@ -340,6 +377,9 @@
+
Биохимия @@ -532,7 +572,7 @@ if (!user) location.href = '/login'; const nav = document.getElementById('nav-user'); const ava = document.getElementById('nav-avatar'); if (nav) nav.textContent = user?.name?.split(' ')[0] || 'Пользователь'; -if (ava) ava.textContent = (user?.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS'; +LS.renderNavAvatar(ava, user); if (isAdmin) { document.getElementById('btn-admin').style.display=''; } if (isTeacher) { document.getElementById('btn-classes').style.display=''; } LS.showBoardIfAllowed(); @@ -683,13 +723,8 @@ function getBondSum(id) { return bonds.reduce((s,b) => s + (b.from===id||b.to===id ? (b.order||b.o||1) : 0), 0); } function getIssues() { - return atoms.filter(a => { - const used = bonds.reduce((s,b)=>(b.from===a.id||b.to===a.id)?s+(b.order||1):s,0); - return used > (ELEMENTS[a.s]?.maxV ?? 4); - }).map(a => { - const used = bonds.reduce((s,b)=>(b.from===a.id||b.to===a.id)?s+(b.order||1):s,0); - return { id:a.id, s:a.s, used, max: ELEMENTS[a.s]?.maxV??4 }; - }); + // Единая проверка валентности из ядра (с подсказками, Фаза 2.4) + return BIO.valency(atoms, bonds); } // ── Live molecular stats ── @@ -1192,7 +1227,7 @@ function updateInfo() { const issues = getIssues(); const issDiv = document.getElementById('bp-issues'); if (issues.length) { - issDiv.innerHTML = issues.map(i => `
${i.s}: ${i.used}/${i.max} связей
`).join(''); + issDiv.innerHTML = issues.map(i => `
${i.msg}
`).join(''); } else if (formula) { issDiv.innerHTML = '
Валентность в норме
'; } else { @@ -2006,5 +2041,6 @@ LS.loadFeatures?.().then(feats => { + diff --git a/frontend/dashboard.html b/frontend/dashboard.html index a3079ec..d80fa3d 100644 --- a/frontend/dashboard.html +++ b/frontend/dashboard.html @@ -67,20 +67,78 @@ text-decoration: none; } .ab-btn:hover { background: rgba(255,255,255,0.25); } - .action-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } - .ac-card { - display: flex; align-items: center; gap: 12px; - padding: 14px 16px; border-radius: 14px; - background: #fff; border: 1.5px solid rgba(15,23,42,0.07); - text-decoration: none; color: inherit; transition: all 0.15s; - box-shadow: 0 2px 8px rgba(15,23,42,0.04); + /* ── Hero cards row (Reading · Lab of day · Pet) ── */ + .hero-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } + .hero-card { + position: relative; border-radius: 18px; padding: 18px 20px; + display: flex; flex-direction: column; min-height: 196px; + text-decoration: none; color: inherit; overflow: hidden; + transition: transform 0.16s, box-shadow 0.16s; } - .ac-card:hover { border-color: rgba(155,93,229,0.25); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,23,42,0.08); } - .ac-emoji { font-size: 1.4rem; flex-shrink: 0; } - .ac-body { flex: 1; min-width: 0; } - .ac-title { font-size: 0.84rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .ac-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .ac-badge { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--violet); flex-shrink: 0; } + .hero-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,23,42,0.16); } + .hc-tag { + display: inline-flex; align-items: center; gap: 7px; + font-size: 0.66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; + margin-bottom: 12px; + } + .hc-tag svg { width: 15px; height: 15px; } + .hc-h { font-family: 'Unbounded', sans-serif; font-size: 1.15rem; font-weight: 800; line-height: 1.15; } + .hc-p { font-size: 0.76rem; line-height: 1.45; margin-top: 7px; } + .hc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; } + .hc-meta { font-size: 0.7rem; font-weight: 600; } + .hc-btn { + display: inline-flex; align-items: center; gap: 6px; + padding: 7px 15px; border-radius: 99px; flex-shrink: 0; + font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700; + border: none; cursor: pointer; transition: filter 0.15s, transform 0.12s; + } + .hc-btn svg { width: 14px; height: 14px; } + .hc-btn:hover { filter: brightness(1.08); } + .hc-btn:active { transform: translateY(1px); } + .hc-progress { height: 6px; border-radius: 99px; margin-top: 12px; overflow: hidden; } + .hc-progress > i { display: block; height: 100%; border-radius: 99px; } + + /* Card 1 — Reading (warm gradient) */ + .hc-read { background: linear-gradient(135deg, #d9742a 0%, #b3531a 100%); color: #fff; } + .hc-read .hc-tag { color: rgba(255,255,255,.82); } + .hc-read .hc-p { color: rgba(255,255,255,.78); } + .hc-read .hc-meta { color: rgba(255,255,255,.7); } + .hc-read .hc-progress { background: rgba(255,255,255,.2); } + .hc-read .hc-progress > i { background: rgba(255,255,255,.92); } + .hc-read .hc-pct { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 0.82rem; color: #fff; } + .hc-read .hc-btn { background: #fff; color: #b3531a; } + + /* Card 2 — Lab of day (dark) */ + .hc-lab { background: linear-gradient(150deg, #16131f 0%, #1d1830 100%); color: #fff; border: 1px solid rgba(155,93,229,.18); } + .hc-lab .hc-bg { position: absolute; inset: 0; opacity: .5; z-index: 0; } + .hc-lab .hc-bg svg { width: 100%; height: 100%; } + .hc-lab > *:not(.hc-bg) { position: relative; z-index: 1; } + .hc-lab .hc-tag { color: #06D6E0; } + .hc-lab .hc-tag svg { stroke: #06D6E0; } + .hc-lab .hc-p { color: rgba(255,255,255,.74); } + .hc-lab .hc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } + .hc-lab .hc-chip { font-size: 0.66rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); } + .hc-lab .hc-chip.subj { background: rgba(6,214,224,.16); color: #06D6E0; } + .hc-lab .hc-meta { color: rgba(255,255,255,.6); } + .hc-lab .hc-btn { background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(6px); } + + /* Card 3 — Pet (light, accent top) */ + .hc-pet { background: var(--surface, #fff); border: 1.5px solid rgba(15,23,42,.07); border-top: 3px solid #F9C74F; } + .hc-pet .hc-tag { color: #b3531a; } + .hc-pet .hc-tag svg { stroke: #F9C74F; } + .hc-pet .hc-pet-top { display: flex; align-items: center; gap: 10px; } + .hc-pet .hc-pet-name { font-family: 'Unbounded', sans-serif; font-size: 1.15rem; font-weight: 800; } + .hc-pet .hc-pet-art { width: 50px; height: 50px; margin-left: auto; flex-shrink: 0; } + .hc-pet .hc-pet-art svg { width: 100%; height: 100%; } + .hc-pet .hc-xp-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; font-size: 0.7rem; color: var(--text-3); } + .hc-pet .hc-xp-row b { color: var(--text); font-weight: 800; } + .hc-pet .hc-progress { background: rgba(15,23,42,.07); } + .hc-pet .hc-progress > i { background: linear-gradient(90deg, #F9C74F, #F98231); } + .hc-pet .hc-pet-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; } + .hc-pet .hc-pchip { text-align: center; padding: 6px 2px; border-radius: 10px; background: rgba(15,23,42,.04); } + .hc-pet .hc-pchip b { display: block; font-family: 'Unbounded', sans-serif; font-size: 0.86rem; font-weight: 800; color: var(--text); } + .hc-pet .hc-pchip span { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; } + .hc-pet .hc-btn { background: rgba(249,199,79,.16); color: #b3531a; align-self: flex-start; } /* ── ZONE 3: Three-Column Grid ── */ .main-grid { @@ -90,6 +148,15 @@ margin-bottom: 22px; } .full-row { margin-bottom: 22px; } + /* Bottom row: Activity · My submissions · Challenges side by side */ + .bottom-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 22px; + margin-bottom: 22px; + align-items: stretch; + } + .bottom-grid > * { margin-bottom: 0; height: 100%; } .qa-btn { display: flex; align-items: center; gap: 8px; @@ -245,6 +312,39 @@ .cont-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; } .cont-pct { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--violet); } + /* ── flashcard review widget ── */ + .fcw-card { perspective: 1000px; cursor: pointer; } + .fcw-inner { + position: relative; transform-style: preserve-3d; + transition: transform 0.5s cubic-bezier(.34,1.1,.64,1); min-height: 118px; + } + .fcw-card.flipped .fcw-inner { transform: rotateY(180deg); } + .fcw-face { + position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; + border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; + border: 1.5px solid rgba(15,23,42,0.08); box-sizing: border-box; + } + .fcw-front { background: linear-gradient(135deg, rgba(155,93,229,0.06), rgba(6,214,224,0.05)); } + .fcw-back { background: linear-gradient(135deg, rgba(6,214,100,0.07), rgba(6,214,224,0.05)); transform: rotateY(180deg); } + .fcw-deck { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--violet); } + .fcw-back .fcw-deck { color: #059652; } + .fcw-text { flex: 1; font-size: 0.92rem; font-weight: 600; color: var(--text); line-height: 1.35; + display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } + .fcw-hint { font-size: 0.68rem; color: var(--text-3); display: flex; align-items: center; gap: 5px; } + .fcw-hint svg { width: 12px; height: 12px; } + .fcw-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } + .fcw-count { font-size: 0.72rem; color: var(--text-3); font-weight: 600; } + .fcw-btn { + display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; + border: 1.5px solid rgba(155,93,229,0.3); background: rgba(155,93,229,0.06); color: var(--violet); + font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 700; cursor: pointer; + transition: all 0.15s; text-decoration: none; + } + .fcw-btn:hover { background: rgba(155,93,229,0.14); border-color: var(--violet); } + .fcw-btn svg { width: 13px; height: 13px; stroke: currentColor; } + .fcw-empty { text-align: center; padding: 16px 12px; color: var(--text-3); } + .fcw-empty p { font-size: 0.82rem; margin-bottom: 10px; } + /* ── subjects progress bars ── */ .subj-prog-row { display: flex; align-items: center; gap: 14px; @@ -1143,6 +1243,7 @@ /* Grids single column */ .main-grid { grid-template-columns: 1fr; } .action-cards { grid-template-columns: 1fr; } + .hero-row { grid-template-columns: 1fr; } .admin-grid { grid-template-columns: 1fr; gap: 14px; } .adm-actions { grid-template-columns: 1fr; gap: 10px; } .adm-act-group { grid-template-columns: 1fr 1fr; } @@ -1308,11 +1409,9 @@
Показывать виджеты
-
-
@@ -1348,23 +1447,64 @@ - + + +
@@ -1460,30 +1603,13 @@
- -
- -
+ @@ -1190,7 +1208,7 @@
—
Иконка корзины — убрать ученика из списка. Уже созданные задания НЕ удаляются — ученик продолжит их видеть.
—
Счётчик «Заданий» показывает, сколько вы лично выдали этому ученику.
-
Готово!
Теперь вы знаете все 13 разделов руководства. Удачных уроков и репетиторских часов!
+
Продолжайте изучение
Следующие главы: Лаборатория (14), Биохимия (15), Геймификация (16), Доступ к контенту (17).
@@ -1198,6 +1216,216 @@
Предыдущая глава
Экзамен 9 класс
+ +
+
+ + +
+
+
+
+
Глава 14
+
Виртуальная лаборатория
+
+ Лаборатория +
+ +
+
14.1 Что это и зачем
+

Виртуальная лаборатория — 40 интерактивных симуляций по физике, химии, математике и биологии. Всё работает прямо в браузере, никаких установок не нужно.

+
+
Физика (14)
Маятник, волны, оптика, электричество, газы…
+
Химия (14)
Орбитали, кристаллы, реакции, периодическая таблица…
+
Математика (9)
Графики, планиметрия, стереометрия 3D, вероятность…
+
Биология (2)
Деление клетки, фотосинтез
+
+
Deep-link на конкретную симуляцию
Откройте нужную симуляцию и скопируйте адрес — в нём уже будет параметр ?sim=название. Вставьте ссылку в задание или чат урока, и ученик попадёт прямо в неё.
+
+ +
+
14.2 Связь с учебниками
+

В учебниках рядом с нужными параграфами появляется кнопка «В лабораторию» с числом связанных симуляций. Нажмите — откроется лаборатория с уже выбранной симуляцией по теме.

+
+
1
Откройте учебник → нужный параграф.
+
2
Нажмите кнопку с иконкой колбы в правом углу параграфа.
+
3
Браузер откроет лабораторию и автоматически запустит нужную симуляцию.
+
+
+ +
+
14.3 Стереометрия 3D
+

Симуляция «Стереометрия» — интерактивные объёмные тела: куб, пирамида, призма, конус, цилиндр, сфера, правильные многогранники и усечённые фигуры.

+
+
—
Вращение — зажмите кнопку мыши и тяните. Фигура крутится в 3D.
+
—
Производные точки — середины рёбер, центры граней, засечки.
+
—
Deep-link на фигуру — например, /lab?sim=stereo:cube откроет сразу куб.
+
+
На онлайн-уроке
Откройте симуляцию в соседней вкладке и включите демонстрацию экрана — ученики увидят 3D-вращение в реальном времени. Или используйте режим аннотации прямо поверх симуляции на доске.
+
+ +
+ + +
+
+ + +
+
+
+
+
Глава 15
+
Биохимия
+
+ Биохимия +
+ +
+
15.1 Молекулярный редактор
+

Страница /biochem — интерактивный редактор молекул. Собирайте молекулы из атомов и связей, платформа мгновенно вычисляет свойства.

+
+
Атомы
C, H, O, N, S, P, галогены, металлы
+
Связи
Одинарные, двойные, тройные
+
3D VSEPR
Настоящая 3D-геометрия по теории ОЭПВО
+
Заряды δ±
Тепловая карта, стрелка диполя
+
+

В панели свойств автоматически отображаются: молярная масса, DBE (степень ненасыщенности), гибридизация, форма молекулы, дипольный момент, полярность, функциональные группы.

+
Валентность в реальном времени
Если превысить валентность атома — появится подсказка: «Углерод (C): занято 5 связей, максимум 4 — убери 1». Сохранение заблокируется до исправления.
+
+ +
+
15.2 Библиотека и свойства
+

/biochem-library — 105+ молекул с карточками и 2D/3D-превью. Можно сравнивать несколько молекул и экспортировать таблицу в CSV.

+

/biochem-properties — сравнение молекул: столбчатый график молярных масс, массовые доли элементов.

+
SMILES и экспорт
В редакторе можно ввести SMILES-строку (например, CC(=O)O — уксусная кислота), молекула построится автоматически. Готовую молекулу можно экспортировать как PNG или JSON.
+
+ +
+
15.3 Реакции и метаболические пути
+

/biochem-reactions — 27 реакций с автоматической балансировкой (показывает коэффициенты) и энергодиаграммой (экзо-/эндотермические с ΔH).

+

/biochem-pathways — метаболические пути (гликолиз, цикл Кребса и др.) с пошаговым Learn-режимом. За прохождение начисляется XP.

+
+ +
+ + +
+
+ + +
+
+
+
+
Глава 16
+
Геймификация и питомец
+
+ Питомец +
+ +
+
16.1 XP, уровни и достижения
+

Каждое действие ученика приносит опыт (XP): тесты, лаборатория, чтение учебников, ежедневная активность, ответы на уроке.

+
+
8 уровней
Новичок → Легенда, у каждого своя модель питомца
+
38+ достижений
Стрики, лаборатория, тесты, биохимия, топ-10
+
Стрики
Серия дней подряд — бонусный XP
+
Ежедневная цель
Лёгкая / Средняя / Тяжёлая
+
+
+ +
+
16.2 Виртуальный питомец
+

У каждого ученика есть личный питомец — существо, которое растёт вместе с прогрессом. Ухаживайте за ним: кормите, гладьте.

+
+
—
Имя — ученик выбирает сам при первом посещении /pet.
+
—
Цвет — 6 вариантов (фиолетовый, голубой, золотой, красный, зелёный, синий).
+
—
Эволюция — с ростом XP появляются уши (ур. 2), антенны (3), крылья (4), корона (5+).
+
—
Настроение — зависит от стрика и частоты визитов: бодр, в духе, скучает, голоден.
+
+
Радужный ошейник
При стрике 7+ дней подряд питомец получает анимированный радужный ошейник. Отличный мотиватор для регулярной работы!
+
+ +
+ + +
+
+ + +
+
+
+
+
Глава 17
+
Доступ к контенту
+
+ Админ-панель +
+ +
+
17.1 Открытие учебников и экзаменов классу
+

По умолчанию ученики видят только те учебники и экзамены, к которым им открыт доступ. Это настраивается через allowlist — белый список.

+
+
1
Откройте Админ-панель → вкладка «Доступ к контенту».
+
2
Выберите учебник или экзамен из списка.
+
3
Добавьте класс — все ученики класса получат доступ. Или выберите конкретного ученика — доступ только у него.
+
+
Приоритеты
Доступ ученика выше доступа класса: если классу учебник закрыт, но конкретному ученику открыт — он его увидит.
+
+ +
+
17.2 Feature Flags — включение модулей
+

В Админ-панели → «Настройки» можно включать и отключать целые модули платформы:

+
+
—
Биохимия — полностью скрыть модуль для учеников.
+
—
Учебники — отключить раздел учебников.
+
—
Флэшкарты, Live-квиз — включить/выключить по необходимости.
+
—
Экзаменационные тесты — модуль с 80 вариантами по математике 9 класса.
+
+
Только для администратора
Изменение feature flags и доступа к контенту доступно только пользователям с ролью admin. Учителя видят только то, к чему у их класса есть доступ.
+
+ +
+
17.3 System Health
+

Администраторам доступна вкладка «System Health» в панели с метриками сервера в реальном времени:

+
+
—
CPU и RAM — текущая нагрузка процессора и память.
+
—
Event loop lag — задержка обработки запросов.
+
—
HTTP-статистика — количество запросов, самые медленные и частые роуты.
+
—
Тренды — canvas-графики нагрузки за последние минуты.
+
—
Журнал ошибок — последние ошибки сервера с трейсом.
+
+
Готово!
Теперь вы знаете все 17 разделов руководства. Удачных уроков!
+
+ +
+
+ + +
@@ -1216,9 +1683,14 @@ diff --git a/frontend/textbooks.html b/frontend/textbooks.html index b219108..2f2923e 100644 --- a/frontend/textbooks.html +++ b/frontend/textbooks.html @@ -164,6 +164,13 @@ width:auto; min-width:42px; padding:9px 12px; flex:0 0 auto; } + .tb-lab-btn { + width:auto; min-width:42px; padding:9px 12px; + flex:0 0 auto; white-space:nowrap; + font-variant-numeric: tabular-nums; font-weight:800; + } + .tb-lab-btn svg { stroke:var(--violet); flex-shrink:0; } + .tb-lab-btn:hover { border-color:var(--violet); background:rgba(155,93,229,.08); } .tb-empty { grid-column: 1 / -1; @@ -521,9 +528,8 @@ ${isTeacher ? `` : ''} - ${(labLinks[t.slug] && labLinks[t.slug].length) ? `` : ''}
diff --git a/frontend/textbooks/chemistry_7_ch1.html b/frontend/textbooks/chemistry_7_ch1.html index 14df0b9..65d3604 100644 --- a/frontend/textbooks/chemistry_7_ch1.html +++ b/frontend/textbooks/chemistry_7_ch1.html @@ -10,6 +10,12 @@ + @@ -17,6 +23,7 @@ + diff --git a/frontend/textbooks/chemistry_7_ch2.html b/frontend/textbooks/chemistry_7_ch2.html index 4842c14..ffea7ec 100644 --- a/frontend/textbooks/chemistry_7_ch2.html +++ b/frontend/textbooks/chemistry_7_ch2.html @@ -10,6 +10,12 @@ + @@ -17,6 +23,7 @@ + @@ -90,18 +97,28 @@ window.PARAS = [ ]; window.ACH_LABELS = { start:'Начало главы 2!', p13_done:'§13 изучен!', lo2_done:'Лабораторный опыт 2 выполнен!', - p14_done:'§14 изучен!', p15_done:'§15 изучен!', final2_tasks:'Глава 2 пройдена!' }; + p14_done:'§14 изучен!', p15_done:'§15 изучен!', + p16_done:'§16 изучен!', p17_done:'§17 изучен!', pr2_done:'Практическая работа 2 выполнена!', + 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$'],['Продукт','оксид'],['Окисление','медленное и быстрое']] } + p15:{ title:'Шпаргалка §15', rows:[['Горение','+ $O_2$'],['Продукт','оксид'],['Окисление','медленное и быстрое']] }, + p16:{ title:'Шпаргалка §16', rows:[['Оксид','Э + O'],['O','валентность II'],['Формула','$Э_xO_y$']] }, + p17:{ title:'Шпаргалка §17', rows:[['Лаборатория','разложение'],['Катализатор','ускоряет, не тратится'],['Промышленность','из воздуха']] }, + pr2:{ title:'Практическая 2', rows:[['Получить','разложением'],['Доказать','тлеющая лучинка']] }, + final2:{ title:'Финал главы 2', rows:[['§§13–17','кислород'],['Награда','ачивка + XP']] } }; window.TIPS = [ { sec:'p13', html:'Воздух — смесь газов: примерно $78\\,\\%$ азота $N_2$ и $21\\,\\%$ кислорода $O_2$, около $1\\,\\%$ — другие газы.' }, { sec:'lo2', html:'Газ, который тяжелее воздуха (как $O_2$), собирают в сосуд отверстием вверх; легче воздуха ($H_2$) — отверстием вниз; нерастворимый — вытеснением воды.' }, { sec:'p14', html:'$O$ — элемент (атом в составе веществ). $O_2$ — простое вещество. Кислород $O_2$ и озон $O_3$ — разные простые вещества одного элемента.' }, - { sec:'p15', html:'При горении вещество соединяется с кислородом — образуется оксид. Реакции с кислородом называют реакциями окисления.' } + { sec:'p15', html:'При горении вещество соединяется с кислородом — образуется оксид. Реакции с кислородом называют реакциями окисления.' }, + { sec:'p16', html:'Оксид — сложное вещество из двух элементов, один из которых кислород (валентность II). Формулу составляют по валентности: оксид алюминия — $Al_2O_3$.' }, + { sec:'p17', html:'В лаборатории $O_2$ получают разложением веществ, богатых кислородом. Катализатор ($MnO_2$) ускоряет реакцию, но сам не расходуется.' }, + { sec:'pr2', html:'Кислород доказывают тлеющей лучинкой: в кислороде она ярко вспыхивает.' }, + { sec:'final2', html:'Собери всё: состав воздуха, кислород-элемент и $O_2$, горение и оксиды, получение кислорода и катализатор.' } ]; window.POOLS = { @@ -122,6 +139,26 @@ window.POOLS = { {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.'} + ], + p16:[ + {q:'Оксид — это…',opts:['Соль','Сложное вещество из двух элементов, один из которых кислород','Простое вещество','Кислота'],a:1,ex:'Оксид — соединение элемента с кислородом.'}, + {q:'Какое вещество является оксидом?',opts:['NaCl','CO₂','H₂SO₄','HCl'],a:1,ex:'$CO_2$ — оксид углерода(IV).'}, + {q:'Какова валентность меди в оксиде $\\text{CuO}$ (кислород — II)?',hint:'равна валентности O',unit:'',a:2,ex:'Cu — II.'}, + {q:'Какова формула оксида фосфора, в котором фосфор пятивалентен?',opts:['PO','P₂O₅','P₂O₃','PO₂'],a:1,ex:'P(V), O(II) → $P_2O_5$.'} + ], + p17:[ + {q:'Как получают кислород в лаборатории?',opts:['Разложением веществ, богатых кислородом','Из поваренной соли','Сжиганием угля','Из песка'],a:0,ex:'Например, разложением $KMnO_4$ или $H_2O_2$.'}, + {q:'Катализатор — это вещество, которое…',opts:['Расходуется в реакции','Ускоряет реакцию и не расходуется','Замедляет реакцию','Само горит'],a:1,ex:'Катализатор ускоряет реакцию, оставаясь неизменным.'}, + {q:'Реакция $2\\text{KMnO}_4=\\text{K}_2\\text{MnO}_4+\\text{MnO}_2+\\text{O}_2$ — это реакция…',opts:['Соединения','Разложения','Замещения','Обмена'],a:1,ex:'Из одного вещества — несколько: разложение.'}, + {q:'Откуда в промышленности получают кислород?',opts:['Из воздуха','Из поваренной соли','Из угля','Из песка'],a:0,ex:'Кислород выделяют из жидкого воздуха.'} + ], + final2:[ + {q:'Объёмная доля кислорода в воздухе (%)?',hint:'≈ 21',unit:'%',a:21,ex:'21 %.'}, + {q:'Валентность серы в оксиде $\\text{SO}_2$ (O — II)?',hint:'$2\\cdot\\text{II}$',unit:'',a:4,ex:'IV.'}, + {q:'В уравнении $2\\text{Mg}+\\text{O}_2=2\\text{MgO}$ коэффициент перед $\\text{O}_2$?',hint:'',unit:'',a:1,ex:'1.'}, + {q:'Продукт горения углерода в кислороде — это…',opts:['CO₂','CO только','C','H₂O'],a:0,ex:'$C+O_2=CO_2$.'}, + {q:'Катализатор в реакции…',opts:['Расходуется','Не расходуется','Сгорает','Испаряется'],a:1,ex:'Катализатор не расходуется.'}, + {q:'Сколько атомов кислорода в формуле оксида фосфора $\\text{P}_2\\text{O}_5$?',hint:'индекс при O',unit:'',a:5,ex:'5.'} ] }; @@ -195,6 +232,66 @@ function build_p15(){ wireReadBtn('p15'); } +function build_p16(){ + document.getElementById('p16-body').innerHTML = + '
§ 16 · Химия 7

Оксиды

' + +'
$Э_x\\text{O}_y$
' + +'
Что такое оксиды, как составляют их формулы и названия.
' + +'
оксидвалентность O — II
' + +makeCard('theory','Что такое оксид','§16','
Оксид — сложное вещество, состоящее из двух элементов, один из которых — кислород (в оксидах он имеет валентность II).
' + +'

Примеры: $\\text{CuO}$, $\\text{CO}_2$, $\\text{SO}_2$, $\\text{P}_2\\text{O}_5$, $\\text{Fe}_3\\text{O}_4$, $\\text{H}_2\\text{O}$, $\\text{CaO}$. Формулу оксида составляют по валентности, как и любую формулу.

') + +makeCard('example','Названия оксидов',null,'

Название: «оксид» + название элемента. Если элемент имеет переменную валентность, её указывают римской цифрой: $\\text{CuO}$ — оксид меди(II), $\\text{CO}_2$ — оксид углерода(IV).

') + +wgt('Конструктор оксида','
') + +wgt('Распредели: оксид или не оксид?','
') + +rememberBox(['Оксид — соединение элемента с кислородом.','Кислород в оксидах двухвалентен (II).','Название: «оксид» + элемент (+ валентность, если переменная).']) + +qList(['Дай определение оксида.','Составь формулу оксида кальция (Ca — II).','Назови оксид $\\text{SO}_2$.']) + +secNav('p15','p17')+readButton('p16'); + wireReadBtn('p16'); +} + +function build_p17(){ + document.getElementById('p17-body').innerHTML = + '
§ 17 · Химия 7

Получение кислорода

' + +'
Как получают кислород в лаборатории и в промышленности и что такое катализатор.
' + +'
разложениекатализатор
' + +makeCard('theory','Получение в лаборатории','§17','

В лаборатории кислород получают разложением веществ, богатых кислородом: перманганата калия $\\text{KMnO}_4$ (при нагревании) или пероксида водорода $\\text{H}_2\\text{O}_2$.

' + +'
Реакция разложения — реакция, в которой из одного сложного вещества образуется несколько других веществ.
') + +makeCard('rule','Катализатор','§17','

Разложение $\\text{H}_2\\text{O}_2$ ускоряет катализатор — оксид марганца(IV) $\\text{MnO}_2$.

' + +'
Катализатор — вещество, которое ускоряет химическую реакцию, но само в ней не расходуется.
' + +'

В промышленности кислород получают из воздуха (разделяя сжиженный воздух).

') + +wgt('Схема получения кислорода','
') + +rememberBox(['В лаборатории $O_2$ — разложением $KMnO_4$ или $H_2O_2$.','Катализатор ускоряет реакцию и не расходуется.','В промышленности кислород получают из воздуха.']) + +qList(['Что такое реакция разложения?','Какую роль играет $\\text{MnO}_2$ при разложении пероксида водорода?','Откуда получают кислород в промышленности?']) + +secNav('p16','pr2')+readButton('p17'); + wireReadBtn('p17'); +} + +function build_pr2(){ + document.getElementById('pr2-body').innerHTML = + '
Практическая работа 2

Получение кислорода и изучение его свойств

' + +'
Получить кислород, собрать его и доказать, что это именно кислород.
' + +makeCard('lab','Ход работы',null,'
  1. Собери прибор для получения газа (пробирка с газоотводной трубкой).
  2. Получи кислород разложением вещества, богатого кислородом.
  3. Собери кислород в сосуд (вытеснением воздуха — отверстием вверх, или вытеснением воды).
  4. Внеси в сосуд тлеющую лучинку — она ярко вспыхнет: это доказывает, что газ — кислород.
  5. Сделай вывод о свойствах кислорода.
' + +'
Нагревай пробирку осторожно; не направляй её отверстием на людей.
') + +wgt('Докажи, что газ — кислород','
') + +secNav('p17','final2')+readButton('pr2'); + wireReadBtn('pr2'); +} + +function build_final2(){ + document.getElementById('final2-body').innerHTML = + '
Финал главы 2

Босс: кислород

' + +'
воздух · $O_2$ · горение · оксиды · получение
' + +'
Шесть задач на всю главу. Реши все — получи звание «Повелитель кислорода».
' + +makeCard('rule','Шпаргалка главы 2',null,'
    ' + +'
  • Воздух — смесь: $N_2$ ≈ 78 %, $O_2$ ≈ 21 %.
    • ' + +'
  • $O$ — элемент; $O_2$ и $O_3$ — простые вещества.
    • ' + +'
  • Горение: вещество $+ O_2 \\to$ оксид; окисление бывает быстрым и медленным.
    • ' + +'
  • Оксид — соединение с кислородом (O — II).
    • ' + +'
  • Получение $O_2$ — разложением ($KMnO_4$, $H_2O_2$ + катализатор $MnO_2$).
') + +'

Реши задачи ниже — за каждую +5 XP, за полный разгром босса — звание и бонус.

' + +secNav('pr2',null); +} + /* заглушки для ещё не наполненных § (следующая волна) */ (function(){ var P = window.PARAS, B = {}; @@ -221,6 +318,10 @@ window.BUILDERS.p13 = build_p13; window.BUILDERS.lo2 = build_lo2; window.BUILDERS.p14 = build_p14; window.BUILDERS.p15 = build_p15; +window.BUILDERS.p16 = build_p16; +window.BUILDERS.p17 = build_p17; +window.BUILDERS.pr2 = build_pr2; +window.BUILDERS.final2 = build_final2; diff --git a/frontend/textbooks/chemistry_7_ch3.html b/frontend/textbooks/chemistry_7_ch3.html index da9ee68..4adf69e 100644 --- a/frontend/textbooks/chemistry_7_ch3.html +++ b/frontend/textbooks/chemistry_7_ch3.html @@ -10,6 +10,12 @@ + @@ -17,6 +23,8 @@ + + @@ -90,11 +98,214 @@ 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 выполнен!', + p21_done:'§21 изучен!', lo4_done:'Лабораторный опыт 4 выполнен!', p22_done:'§22 изучен!', pr3_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:[['Лакмус','красный'],['Метилоранж','розово-красный']] }, + p21:{ title:'Шпаргалка §21', rows:[['Me + кислота','соль + $H_2\\uparrow$'],['Ряд активности','до $H_2$ — вытесняют'],['Cu, Ag','не реагируют']] }, + lo4:{ title:'Лаб. опыт 4', rows:[['Zn, Fe, Mg','пузырьки $H_2$'],['Cu','реакции нет']] }, + p22:{ title:'Шпаргалка §22', rows:[['Соль','металл + остаток'],['Замещение','H на металл'],['Названия','хлорид, сульфат…']] }, + pr3:{ title:'Практическая 3', rows:[['$Zn+HCl$','$\\to H_2\\uparrow$'],['Чистота','гремучий газ']] }, + final3:{ title:'Финал главы 3', rows:[['§§18–22','водород'],['Награда','ачивка + XP']] } +}; +window.TIPS = [ + { sec:'p18', html:'$H$ — самый лёгкий элемент ($A_r=1$). Простое вещество $H_2$ — самый лёгкий газ, легче воздуха. Во Вселенной водород — самый распространённый элемент.' }, + { sec:'p19', html:'Водород горит в кислороде, образуя воду. С оксидами он ведёт себя как восстановитель: $H_2 + CuO = Cu + H_2O$.' }, + { sec:'p20', html:'Кислота = атомы водорода + кислотный остаток. Индикаторы меняют цвет: лакмус в кислоте — красный, метилоранж — розово-красный.' }, + { sec:'lo3', html:'В кислоте лакмус становится красным, а метилоранж — розово-красным. Так обнаруживают кислоту.' }, + { sec:'p21', html:'Металл + кислота → соль + водород. Реагируют только металлы, стоящие в ряду активности левее $H_2$ (Zn, Fe, Mg). Медь и серебро водород из кислот не вытесняют.' }, + { sec:'lo4', html:'Цинк, железо, магний с соляной и серной кислотами дают пузырьки водорода; медь — нет (стоит правее $H_2$).' }, + { sec:'p22', html:'Соль = металл + кислотный остаток. Она образуется, когда металл замещает водород в кислоте: $Zn + 2HCl = ZnCl_2 + H_2$.' }, + { sec:'pr3', html:'Водород получают реакцией $Zn + HCl$; чистоту проверяют поджиганием (хлопок — нечисто, спокойное горение — чисто).' }, + { sec:'final3', 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:'Индикаторы обнаруживают кислоты и щёлочи по изменению цвета.'} + ], + p21:[ + {q:'Какой газ выделяется при реакции активного металла с кислотой?',opts:['Кислород','Водород','Углекислый газ','Азот'],a:1,ex:'Металл вытесняет водород: соль + $H_2\\uparrow$.'}, + {q:'Какой металл НЕ вытесняет водород из соляной кислоты?',opts:['Цинк','Магний','Медь','Железо'],a:2,ex:'Медь стоит правее $H_2$ — не реагирует.'}, + {q:'Продукты реакции $\\text{Zn}+2\\text{HCl}$ — это…',opts:['$ZnCl_2$ и $H_2$','$ZnO$ и вода','$Zn$ и $Cl_2$','только соль'],a:0,ex:'$Zn+2HCl=ZnCl_2+H_2\\uparrow$.'}, + {q:'Сколько веществ образуется в реакции $\\text{Zn}+\\text{H}_2\\text{SO}_4=\\text{ZnSO}_4+\\text{H}_2$?',hint:'соль и газ',unit:'',a:2,ex:'Соль и водород — 2 вещества.'} + ], + p22:[ + {q:'Из чего состоит соль?',opts:['Из водорода и остатка','Из металла и кислотного остатка','Из двух металлов','Из воды и кислоты'],a:1,ex:'Соль = металл + кислотный остаток.'}, + {q:'Соль $\\text{NaCl}$ — продукт замещения водорода в кислоте…',opts:['$H_2SO_4$','$HCl$','$HNO_3$','$H_2CO_3$'],a:1,ex:'В $HCl$ водород заместился натрием → $NaCl$.'}, + {q:'Какова формула сульфата натрия?',opts:['NaSO4','Na₂SO₄','Na₂SO₃','NaS'],a:1,ex:'Na(I), $SO_4$(II) → $Na_2SO_4$.'}, + {q:'Реакция $\\text{Zn}+2\\text{HCl}=\\text{ZnCl}_2+\\text{H}_2$ — это реакция…',opts:['Соединения','Разложения','Замещения','Обмена'],a:2,ex:'Металл замещает водород — реакция замещения.'} + ], + final3:[ + {q:'$A_r(\\text{H})=?$',hint:'из таблицы',unit:'',a:1,ex:'1.'}, + {q:'Продукт горения водорода в кислороде — это…',opts:['Вода','Углекислый газ','Оксид меди','Соль'],a:0,ex:'$2H_2+O_2=2H_2O$.'}, + {q:'Цвет лакмуса в кислоте?',opts:['Синий','Красный','Зелёный','Жёлтый'],a:1,ex:'Красный.'}, + {q:'Сколько из металлов Mg, Cu, Zn вытесняют водород из кислоты?',hint:'Cu — правее $H_2$',unit:'',a:2,ex:'Mg и Zn → 2.'}, + {q:'Соль — это…',opts:['Металл + кислород','Металл + кислотный остаток','Водород + остаток','Два неметалла'],a:1,ex:'Металл + кислотный остаток.'}, + {q:'Формула серной кислоты?',opts:['HCl','H₂SO₄','HNO₃','H₂CO₃'],a:1,ex:'$H_2SO_4$.'} + ] +}; + +function rememberBox(items){ + return '
' + +' Запомни!
    ' + +items.map(function(t){return '
  • '+t+'
    • ';}).join('')+'
'; +} +function qList(items){ + return '
Вопросы и задания
    ' + +items.map(function(t){return '
  1. '+t+'
    2. ';}).join('')+'
'; +} +function wgt(title, inner){ + return '
'+title+'
'+inner+'
'; +} + +function build_p18(){ + document.getElementById('p18-body').innerHTML = + '
§ 18 · Химия 7

Водород — химический элемент и простое вещество

' + +'
$\\text{H}_2$
' + +'
Самый лёгкий элемент Вселенной и его простое вещество.
' + +'
$H$$H_2$
' + +makeCard('theory','Элемент и простое вещество','§18','

Водород как элемент — атомы H ($Z=1$, $A_r=1$), самый лёгкий из всех элементов. Атомы водорода входят в состав воды и множества других веществ.

' + +'
Водород как простое вещество — газ $\\text{H}_2$ (молекула из двух атомов). Это самый лёгкий газ, легче воздуха.
') + +makeCard('theory','Свойства и нахождение','§18','

$\\text{H}_2$ — газ без цвета и запаха, мало растворим в воде. В свободном виде на Земле водорода почти нет, но в составе веществ (особенно воды) его много. Во Вселенной водород — самый распространённый элемент.

') + +wgt('Паспорт водорода','
') + +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 = + '
§ 19 · Химия 7

Химические свойства водорода

' + +'
$2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$
' + +'
Как водород горит и почему его называют восстановителем.
' + +'
горениевосстановитель
' + +makeCard('theory','Горение водорода','§19','

Водород горит в кислороде, образуя воду: $2\\text{H}_2+\\text{O}_2=2\\text{H}_2\\text{O}$. Смесь водорода с воздухом (или кислородом) — «гремучий газ» — взрывоопасна, поэтому перед поджиганием водород проверяют на чистоту.

') + +makeCard('theory','Водород — восстановитель','§19','
Водород способен отнимать кислород у оксидов металлов: $\\text{H}_2+\\text{CuO}=\\text{Cu}+\\text{H}_2\\text{O}$. Чёрный оксид меди превращается в красную медь. Вещество, отнимающее кислород, называют восстановителем.
') + +wgt('Реакции водорода','
') + +rememberBox(['Водород горит в кислороде → образуется вода.','Смесь $H_2$ с воздухом — гремучий газ, взрывается.','Водород — восстановитель: отнимает кислород у оксидов.']) + +qList(['Запиши уравнение горения водорода.','Почему водород называют восстановителем?','Что такое гремучий газ?']) + +secNav('p18','p20')+readButton('p19'); + wireReadBtn('p19'); +} + +function build_p20(){ + document.getElementById('p20-body').innerHTML = + '
§ 20 · Химия 7

Понятие о кислотах

' + +'
Что такое кислоты и как их обнаруживают индикаторами.
' + +'
кислотаиндикатор
' + +makeCard('theory','Состав кислот','§20','
Кислоты — сложные вещества, в состав которых входят атомы водорода и кислотный остаток.
' + +'

Примеры: соляная $\\text{HCl}$, серная $\\text{H}_2\\text{SO}_4$, азотная $\\text{HNO}_3$, угольная $\\text{H}_2\\text{CO}_3$. Число атомов водорода в кислоте равно валентности кислотного остатка.

') + +makeCard('theory','Индикаторы','§20','

Индикаторы — вещества, которые меняют свой цвет в присутствии кислоты. В кислоте лакмус становится красным, а метилоранж — розово-красным. Так кислоту можно обнаружить.

') + +wgt('Индикаторы в кислоте','
') + +wgt('Важнейшие кислоты и их остатки','
') + +rememberBox(['Кислота = атомы водорода + кислотный остаток.','Лакмус в кислоте — красный, метилоранж — розово-красный.','Индикаторы помогают обнаружить кислоту.']) + +qList(['Из чего состоят кислоты?','Как с помощью индикатора обнаружить кислоту?','Назови формулу и название двух кислот.']) + +secNav('p19','lo3')+readButton('p20'); + wireReadBtn('p20'); +} + +function build_lo3(){ + document.getElementById('lo3-body').innerHTML = + '
Лабораторный опыт 3

Действие кислот на индикаторы

' + +'
Научиться обнаруживать кислоту с помощью индикаторов.
' + +makeCard('lab','Ход работы',null,'
  1. В пробирку с раствором кислоты добавь несколько капель лакмуса — он станет красным.
  2. В другую пробирку с кислотой добавь метилоранж — он станет розово-красным.
  3. Сравни с окраской индикаторов в чистой воде.
  4. Сделай вывод, как обнаружить кислоту.
' + +'
Кислоты едкие — работай аккуратно, не допускай попадания на кожу и одежду.
') + +wgt('Индикаторы в кислоте','
') + +secNav('p20','p21')+readButton('lo3'); + wireReadBtn('lo3'); +} + +function build_p21(){ + document.getElementById('p21-body').innerHTML = + '
§ 21 · Химия 7

Взаимодействие кислот с металлами

' + +'
Me $+$ кислота $\\to$ соль $+ \\text{H}_2\\uparrow$
' + +'
Почему одни металлы вытесняют водород из кислот, а другие нет.
' + +'
ряд активности$H_2\\uparrow$
' + +makeCard('theory','Реакция металлов с кислотами','§21','

Многие металлы реагируют с кислотами, вытесняя водород: образуются соль и газообразный водород. Например: $\\text{Zn}+\\text{H}_2\\text{SO}_4=\\text{ZnSO}_4+\\text{H}_2\\uparrow$, $\\text{Mg}+2\\text{HCl}=\\text{MgCl}_2+\\text{H}_2\\uparrow$.

') + +makeCard('rule','Ряд активности металлов','§21','
Металлы расположены в ряд активности. Металлы, стоящие левее водорода, вытесняют его из соляной и серной кислот; стоящие правее (медь, серебро) — не вытесняют.
' + +'

Очень активные металлы (натрий, калий) реагируют с кислотами слишком бурно — для получения водорода берут цинк или железо.

') + +wgt('Интерактивный ряд активности','
') + +rememberBox(['Металл + кислота → соль + водород.','Вытесняют водород только металлы левее $H_2$.','Медь и серебро с этими кислотами не реагируют.']) + +qList(['Что образуется при реакции металла с кислотой?','Почему медь не реагирует с соляной кислотой?','Запиши уравнение реакции цинка с серной кислотой.']) + +secNav('p20','lo4')+readButton('p21'); + wireReadBtn('p21'); +} + +function build_lo4(){ + document.getElementById('lo4-body').innerHTML = + '
Лабораторный опыт 4

Взаимодействие серной и соляной кислот с металлами

' + +'
Проверить, какие металлы вытесняют водород из кислот.
' + +makeCard('lab','Ход работы',null,'
  1. В пробирки с соляной и серной кислотами помести кусочки цинка, железа, магния — наблюдай выделение пузырьков газа (водорода).
  2. В пробирку с кислотой помести медь — изменений нет.
  3. Объясни результаты, пользуясь рядом активности металлов.
' + +'
Кислоты едкие; не наклоняйся над пробиркой, в которой идёт реакция.
') + +wgt('Опыт: металл + кислота','
') + +secNav('p21','p22')+readButton('lo4'); + wireReadBtn('lo4'); +} + +function build_p22(){ + document.getElementById('p22-body').innerHTML = + '
§ 22 · Химия 7

Соли — продукты замещения атомов водорода в кислотах на металлы

' + +'
Что такое соли и как составляют их формулы.
' + +'
сользамещение
' + +makeCard('theory','Что такое соли','§22','
Соли — сложные вещества, состоящие из атомов металла и кислотного остатка.
' + +'

Соли образуются, когда металл замещает водород в кислоте — это реакция замещения: $\\text{Zn}+2\\text{HCl}=\\text{ZnCl}_2+\\text{H}_2$. Названия солей: хлориды ($\\text{NaCl}$), сульфаты ($\\text{Na}_2\\text{SO}_4$), нитраты ($\\text{KNO}_3$), карбонаты ($\\text{CaCO}_3$).

') + +makeCard('example','Составление формулы соли',null,'

Кальций (II) и кислотный остаток $\\text{Cl}$ (I): НОК(2,1)=2 → $\\text{CaCl}_2$. Алюминий (III) и $\\text{SO}_4$ (II): НОК(3,2)=6 → $\\text{Al}_2(\\text{SO}_4)_3$.

') + +wgt('Конструктор солей','
') + +rememberBox(['Соль = металл + кислотный остаток.','Соль образуется при замещении водорода металлом.','Формулу соли составляют по валентности (НОК).']) + +qList(['Дай определение соли.','Составь формулу хлорида магния.','Какая реакция называется реакцией замещения?']) + +secNav('lo4','pr3')+readButton('p22'); + wireReadBtn('p22'); +} + +function build_pr3(){ + document.getElementById('pr3-body').innerHTML = + '
Практическая работа 3

Получение водорода и изучение его свойств

' + +'
Получить водород, собрать его и проверить на чистоту.
' + +makeCard('lab','Ход работы',null,'
  1. В пробирку с кусочками цинка прилей соляную кислоту — наблюдай выделение водорода: $\\text{Zn}+2\\text{HCl}=\\text{ZnCl}_2+\\text{H}_2\\uparrow$.
  2. Собери водород (он легче воздуха — держи сосуд отверстием вниз, или собирай вытеснением воды).
  3. Проверь чистоту: поднеси к отверстию пламя. Резкий хлопок — водород смешан с воздухом (нечисто); спокойное горение — чистый.
  4. Сделай вывод о свойствах водорода.
' + +'
Поджигай водород только после проверки чистоты; «гремучий газ» взрывоопасен.
') + +wgt('Проверка чистоты водорода','
') + +secNav('p22','final3')+readButton('pr3'); + wireReadBtn('pr3'); +} + +function build_final3(){ + document.getElementById('final3-body').innerHTML = + '
Финал главы 3

Босс: водород

' + +'
$H_2$ · кислоты · ряд активности · соли
' + +'
Шесть задач на всю главу. Реши все — получи звание «Знаток водорода».
' + +makeCard('rule','Шпаргалка главы 3',null,'
    ' + +'
  • $H$ — самый лёгкий элемент; $H_2$ — самый лёгкий газ.
    • ' + +'
  • Водород горит → вода; восстанавливает металлы из оксидов.
    • ' + +'
  • Кислота = водород + остаток; индикаторы (лакмус — красный в кислоте).
    • ' + +'
  • Металл + кислота → соль $+ H_2\\uparrow$ (только левее $H_2$ в ряду активности).
    • ' + +'
  • Соль = металл + кислотный остаток (продукт замещения).
') + +'

Реши задачи ниже — за каждую +5 XP, за полный разгром босса — звание и бонус.

' + +secNav('pr3',null); +} + +/* заглушки для ещё не наполненных § (следующая волна) */ (function(){ var P = window.PARAS, B = {}; function ph(p, prev, next){ @@ -104,7 +315,7 @@ window.TIPS = [{ sec:'p18', 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); }; @@ -114,6 +325,17 @@ 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; +window.BUILDERS.p21 = build_p21; +window.BUILDERS.lo4 = build_lo4; +window.BUILDERS.p22 = build_p22; +window.BUILDERS.pr3 = build_pr3; +window.BUILDERS.final3 = build_final3; diff --git a/frontend/textbooks/chemistry_7_ch4.html b/frontend/textbooks/chemistry_7_ch4.html index 8dc7ba9..b75c506 100644 --- a/frontend/textbooks/chemistry_7_ch4.html +++ b/frontend/textbooks/chemistry_7_ch4.html @@ -10,6 +10,12 @@ + @@ -17,6 +23,8 @@ + + @@ -86,30 +94,196 @@ window.PARAS = [ {id:'final4', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true} ]; -window.ACH_LABELS = { start:'Начало главы 4!', final4_tasks:'Глава 4 пройдена!' }; -window.SIDEBARS = { p23:{ title:'Глава 4 · Химия 7', rows:[['Раздел','Вода'],['§§','23–26'],['Лаб/ПР','ЛО 5 · ПР 4']] } }; -window.TIPS = [{ sec:'p23', html:'Глава наполняется содержанием по фазам. Сейчас доступны навигация по параграфам и отметка о прочтении (+10 XP).' }]; +window.ACH_LABELS = { start:'Начало главы 4!', p23_done:'§23 изучен!', p24_done:'§24 изучен!', + lo5_done:'Лабораторный опыт 5 выполнен!', p25_done:'§25 изучен!', pr4_done:'Практическая работа 4 выполнена!', + p26_done:'§26 изучен!', final4_tasks:'Глава 4 пройдена! Вы — Хранитель воды!' }; +window.SIDEBARS = { + p23:{ title:'Шпаргалка §23', rows:[['Вода','$H_2O$'],['Разложение','$H_2:O_2=2:1$'],['$t_{кип}$','100 °C']] }, + p24:{ title:'Шпаргалка §24', rows:[['Основание','Me + OH'],['Щёлочи','раствор.: NaOH, KOH'],['Фенолфталеин','в щёлочи малиновый']] }, + lo5:{ title:'Лаб. опыт 5', rows:[['Лакмус','синий'],['Фенолфталеин','малиновый']] }, + p25:{ title:'Шпаргалка §25', rows:[['Нейтрализация','кислота + основание'],['Продукты','соль + вода'],['Индикатор','показывает конец']] }, + pr4:{ title:'Практическая 4', rows:[['Щёлочь + фенолфталеин','малиновый'],['+ кислота','до бесцветного']] }, + p26:{ title:'Шпаргалка §26', rows:[['Загрязнение','стоки, выбросы'],['Очистка','фильтр, хлор, озон'],['Береги','воду и воздух']] }, + final4:{ title:'Финал главы 4', rows:[['§§23–26','вода'],['Награда','ачивка + XP']] } +}; +window.TIPS = [ + { sec:'p23', html:'Вода $H_2O$ разлагается электрическим током на простые вещества: водорода по объёму в 2 раза больше, чем кислорода.' }, + { sec:'p24', html:'Основание = металл + гидроксогруппа OH. Растворимые основания (NaOH, KOH, $Ca(OH)_2$) называют щёлочами. В щёлочи фенолфталеин — малиновый, лакмус — синий.' }, + { sec:'lo5', html:'В щёлочи лакмус становится синим, а фенолфталеин — малиновым. Так обнаруживают щёлочь.' }, + { sec:'p25', html:'Нейтрализация: кислота + основание → соль + вода. Конец реакции виден по изменению цвета индикатора.' }, + { sec:'pr4', html:'К щёлочи с фенолфталеином (малиновый) добавляют кислоту по каплям, пока раствор не станет бесцветным.' }, + { sec:'p26', html:'Воду и воздух нужно беречь: очищать стоки, фильтровать и обеззараживать воду, не загрязнять водоёмы.' } +]; -/* Phase 0: заглушки-builder'ы из PARAS (теория и интерактивы добавляются в фазах 1–4). */ +window.POOLS = { + p23:[ + {q:'Какова формула воды?',opts:['HO','H₂O','H₂O₂','OH'],a:1,ex:'Вода — $H_2O$.'}, + {q:'При разложении воды объём водорода во сколько раз больше объёма кислорода?',hint:'2 : 1',unit:'раза',a:2,ex:'$H_2:O_2=2:1$.'}, + {q:'Что образуется при разложении воды электрическим током?',opts:['Водород и кислород','Только водород','Соль и вода','Углекислый газ'],a:0,ex:'$2H_2O=2H_2\\uparrow+O_2\\uparrow$.'}, + {q:'Чему равна температура кипения воды (°C)?',hint:'при нормальных условиях',unit:'°C',a:100,ex:'100 °C.'} + ], + p24:[ + {q:'Из чего состоит основание?',opts:['Из металла и кислотного остатка','Из металла и гидроксогруппы OH','Из водорода и остатка','Из двух неметаллов'],a:1,ex:'Основание = металл + OH.'}, + {q:'Какого цвета фенолфталеин в щёлочи?',opts:['Бесцветный','Малиновый','Жёлтый','Синий'],a:1,ex:'В щёлочи фенолфталеин малиновый.'}, + {q:'Какова формула гидроксида натрия?',opts:['NaOH','Na₂O','NaCl','NaH'],a:0,ex:'Гидроксид натрия — $NaOH$.'}, + {q:'Растворимые в воде основания называют…',opts:['Кислотами','Щёлочами','Солями','Оксидами'],a:1,ex:'Растворимые основания — щёлочи.'} + ], + p25:[ + {q:'Реакция кислоты с основанием называется реакцией…',opts:['Разложения','Нейтрализации','Замещения','Горения'],a:1,ex:'Кислота + основание → соль + вода — нейтрализация.'}, + {q:'Продукты реакции $\\text{HCl}+\\text{NaOH}$ — это…',opts:['Соль и вода','Два газа','Металл и вода','Оксид и вода'],a:0,ex:'$HCl+NaOH=NaCl+H_2O$.'}, + {q:'Сколько веществ образуется в реакции $\\text{HCl}+\\text{NaOH}=\\text{NaCl}+\\text{H}_2\\text{O}$?',hint:'соль и вода',unit:'',a:2,ex:'Соль и вода — 2 вещества.'}, + {q:'Как узнать, что реакция нейтрализации завершилась?',opts:['По выделению газа','По изменению цвета индикатора','По осадку','Никак'],a:1,ex:'Индикатор меняет цвет в конце реакции.'} + ], + p26:[ + {q:'Что загрязняет воду?',opts:['Чистый дождь','Неочищенные сточные воды','Снег','Лёд'],a:1,ex:'Сточные воды и выбросы загрязняют водоёмы.'}, + {q:'Как очищают питьевую воду на водопроводных станциях?',opts:['Замораживанием','Фильтрованием и обработкой хлором или озоном','Кипячением навсегда','Никак'],a:1,ex:'Воду фильтруют и обеззараживают хлором или озоном.'}, + {q:'Из-за чего возникают кислотные дожди?',opts:['Из-за выбросов оксидов серы и азота','Из-за чистого воздуха','Из-за воды','Из-за песка'],a:0,ex:'Оксиды в воздухе образуют кислоты.'}, + {q:'Как беречь воду?',opts:['Лить без счёта','Экономить и не загрязнять','Сливать отходы в реку','Не пить'],a:1,ex:'Экономить воду и не загрязнять водоёмы.'} + ], + final4:[ + {q:'Формула воды?',opts:['HO','H₂O','OH','H₂O₂'],a:1,ex:'$H_2O$.'}, + {q:'При разложении воды $H_2:O_2$ по объёму = ? : 1. Чему равно первое число?',hint:'2:1',unit:'',a:2,ex:'2.'}, + {q:'Основание состоит из…',opts:['Металла и OH','Водорода и остатка','Двух металлов','Металла и кислорода'],a:0,ex:'Металл + OH.'}, + {q:'Фенолфталеин в щёлочи становится…',opts:['Бесцветным','Малиновым','Красным','Жёлтым'],a:1,ex:'Малиновый.'}, + {q:'Продукты реакции нейтрализации — это…',opts:['Соль и вода','Два газа','Оксид и металл','Кислота и щёлочь'],a:0,ex:'Соль + вода.'}, + {q:'Как обеззараживают питьевую воду?',opts:['Хлорированием или озонированием','Заморозкой','Подкислением','Ничем'],a:0,ex:'Хлором или озоном.'} + ] +}; + +function rememberBox(items){ + return '
' + +' Запомни!
    ' + +items.map(function(t){return '
  • '+t+'
    • ';}).join('')+'
'; +} +function qList(items){ + return '
Вопросы и задания
    ' + +items.map(function(t){return '
  1. '+t+'
    2. ';}).join('')+'
'; +} +function wgt(title, inner){ + return '
'+title+'
'+inner+'
'; +} + +function build_p23(){ + document.getElementById('p23-body').innerHTML = + '
§ 23 · Химия 7

Состав, физические и химические свойства воды

' + +'
$\\text{H}_2\\text{O}$
' + +'
Самое важное вещество на Земле: его состав и превращения.
' + +'
$H_2O$разложение
' + +makeCard('theory','Состав и физические свойства','§23','

Вода — сложное вещество $\\text{H}_2\\text{O}$: молекула из двух атомов водорода и одного атома кислорода. Это жидкость без цвета, запаха и вкуса; замерзает при $0\\,^\\circ$C, кипит при $100\\,^\\circ$C.

') + +makeCard('theory','Химические свойства','§23','
  • Разлагается электрическим током: $2\\text{H}_2\\text{O}=2\\text{H}_2\\uparrow+\\text{O}_2\\uparrow$ (водорода вдвое больше).
  • Реагирует с активными металлами: $2\\text{Na}+2\\text{H}_2\\text{O}=2\\text{NaOH}+\\text{H}_2\\uparrow$.
  • С оксидами металлов даёт основания: $\\text{CaO}+\\text{H}_2\\text{O}=\\text{Ca(OH)}_2$.
  • С оксидами неметаллов даёт кислоты: $\\text{CO}_2+\\text{H}_2\\text{O}=\\text{H}_2\\text{CO}_3$.
') + +wgt('Разложение воды и реакции воды','
') + +rememberBox(['Вода $H_2O$ — сложное вещество.','При разложении $H_2:O_2=2:1$ по объёму.','Вода реагирует с активными металлами и с оксидами.']) + +qList(['Каков состав молекулы воды?','Что образуется при разложении воды током?','Что получится при реакции $CO_2$ с водой?']) + +secNav(null,'p24')+readButton('p23'); + wireReadBtn('p23'); +} + +function build_p24(){ + document.getElementById('p24-body').innerHTML = + '
§ 24 · Химия 7

Основания как сложные вещества

' + +'
Me(OH)$_n$
' + +'
Что такое основания и как их обнаруживают индикаторами.
' + +'
основаниещёлочь
' + +makeCard('theory','Состав оснований','§24','
Основания — сложные вещества, состоящие из атомов металла и одной или нескольких гидроксогрупп OH.
' + +'

Примеры: $\\text{NaOH}$, $\\text{KOH}$, $\\text{Ca(OH)}_2$, $\\text{Cu(OH)}_2$. Растворимые в воде основания называют щёлочами (NaOH, KOH, $Ca(OH)_2$), остальные — нерастворимые. Название: «гидроксид» + металл.

') + +makeCard('theory','Индикаторы в щёлочи','§24','

В щёлочи лакмус становится синим, фенолфталеин — малиновым, метилоранж — жёлтым. Так обнаруживают щёлочь.

') + +wgt('Конструктор основания','
') + +wgt('Индикаторы в щёлочи','
') + +rememberBox(['Основание = металл + группа OH.','Растворимые основания — щёлочи.','Фенолфталеин в щёлочи малиновый, лакмус — синий.']) + +qList(['Дай определение основания.','Составь формулу гидроксида кальция.','Как обнаружить щёлочь индикатором?']) + +secNav('p23','lo5')+readButton('p24'); + wireReadBtn('p24'); +} + +function build_lo5(){ + document.getElementById('lo5-body').innerHTML = + '
Лабораторный опыт 5

Действие щелочей на индикаторы

' + +'
Научиться обнаруживать щёлочь с помощью индикаторов.
' + +makeCard('lab','Ход работы',null,'
  1. В пробирку с раствором щёлочи добавь лакмус — он станет синим.
  2. В другую пробирку с щёлочью добавь фенолфталеин — он станет малиновым.
  3. Сравни с окраской в чистой воде.
  4. Сделай вывод, как обнаружить щёлочь.
' + +'
Щёлочи едкие — работай аккуратно, не допускай попадания на кожу.
') + +wgt('Индикаторы в щёлочи','
') + +secNav('p24','p25')+readButton('lo5'); + wireReadBtn('lo5'); +} + +function build_p25(){ + document.getElementById('p25-body').innerHTML = + '
§ 25 · Химия 7

Реакция нейтрализации

' + +'
кислота + основание $\\to$ соль + вода
' + +'
Что происходит, когда смешивают кислоту и щёлочь.
' + +'
нейтрализациясоль + вода
' + +makeCard('theory','Нейтрализация','§25','
Реакция нейтрализации — реакция между кислотой и основанием, в результате которой образуются соль и вода.
' + +'

Например: $\\text{HCl}+\\text{NaOH}=\\text{NaCl}+\\text{H}_2\\text{O}$. За ходом реакции следят по индикатору: фенолфталеин в щёлочи малиновый, а когда вся щёлочь нейтрализована — раствор становится бесцветным.

') + +wgt('Анимация нейтрализации','
') + +rememberBox(['Кислота + основание → соль + вода.','Это реакция нейтрализации.','Конец реакции виден по изменению цвета индикатора.']) + +qList(['Какая реакция называется нейтрализацией?','Что образуется при реакции $HCl$ с $NaOH$?','Зачем при нейтрализации используют индикатор?']) + +secNav('lo5','pr4')+readButton('p25'); + wireReadBtn('p25'); +} + +function build_pr4(){ + document.getElementById('pr4-body').innerHTML = + '
Практическая работа 4

Реакция нейтрализации

' + +'
Провести нейтрализацию щёлочи кислотой и зафиксировать её конец по индикатору.
' + +makeCard('lab','Ход работы',null,'
  1. В стакан с раствором щёлочи добавь несколько капель фенолфталеина — раствор станет малиновым.
  2. По каплям приливай кислоту, перемешивая, пока раствор не обесцветится.
  3. Обесцвечивание означает, что щёлочь нейтрализована: $\\text{HCl}+\\text{NaOH}=\\text{NaCl}+\\text{H}_2\\text{O}$.
  4. Сделай вывод о признаке конца реакции нейтрализации.
' + +'
Кислоты и щёлочи едкие — добавляй кислоту по каплям, аккуратно.
') + +wgt('Нейтрализация: добавь кислоту','
') + +secNav('p25','p26')+readButton('pr4'); + wireReadBtn('pr4'); +} + +function build_p26(){ + document.getElementById('p26-body').innerHTML = + '
§ 26 · Химия 7

Охрана окружающей среды

' + +'
Почему важно беречь воду и воздух и как их защищают.
' + +'
экологияочистка воды
' + +makeCard('theory','Загрязнение и охрана','§26','

Вода и воздух — главные природные богатства. Их загрязняют промышленные выбросы, неочищенные сточные воды, разливы нефти. Оксиды серы и азота в воздухе вызывают кислотные дожди.

' + +'
Чтобы беречь природу, сточные воды очищают на специальных сооружениях, питьевую воду фильтруют и обеззараживают хлором или озоном, а каждый человек должен экономить воду и не загрязнять водоёмы.
') + +wgt('Источники загрязнения и способы охраны','
') + +rememberBox(['Воду и воздух загрязняют выбросы и стоки.','Воду очищают фильтрованием и обеззараживанием.','Беречь природу — задача каждого человека.']) + +qList(['Что загрязняет воду и воздух?','Как очищают питьевую воду?','Что может сделать каждый, чтобы беречь воду?']) + +secNav('pr4','final4')+readButton('p26'); + wireReadBtn('p26'); +} + +function build_final4(){ + document.getElementById('final4-body').innerHTML = + '
Финал главы 4

Босс: вода

' + +'
$H_2O$ · основания · нейтрализация · экология
' + +'
Шесть задач на всю главу. Реши все — получи звание «Хранитель воды».
' + +makeCard('rule','Шпаргалка главы 4',null,'
    ' + +'
  • Вода $H_2O$ разлагается током: $H_2:O_2=2:1$; реагирует с металлами и оксидами.
    • ' + +'
  • Основание = металл + OH; щёлочи — растворимые основания.
    • ' + +'
  • Индикаторы в щёлочи: лакмус — синий, фенолфталеин — малиновый.
    • ' + +'
  • Нейтрализация: кислота + основание → соль + вода.
    • ' + +'
  • Воду и воздух надо беречь и очищать.
') + +'

Реши задачи ниже — за каждую +5 XP, за полный разгром босса — звание и бонус. А затем проверь себя в финале всего курса на главной странице!

' + +secNav('p26',null); +} + +/* placeholder-страховка (на случай нерасставленных override) */ (function(){ var P = window.PARAS, B = {}; function ph(p, prev, next){ return function(){ var el = document.getElementById(p.id + '-body'); if (!el) return; - el.innerHTML = - '
' + p.num + ' · Химия 7

' + p.name + '

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

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

') + el.innerHTML = '
' + p.num + ' · Химия 7

' + p.name + '

' + + makeCard('theory', p.name, p.num, '

Содержание готовится.

') + secNav(prev, next) + (p.final ? '' : readButton(p.id)); if (!p.final) wireReadBtn(p.id); }; } - for (var i = 0; i < P.length; i++) { - B[P[i].id] = ph(P[i], i > 0 ? P[i-1].id : null, i < P.length-1 ? P[i+1].id : null); - } + for (var i = 0; i < P.length; i++) B[P[i].id] = ph(P[i], i > 0 ? P[i-1].id : null, i < P.length-1 ? P[i+1].id : null); window.BUILDERS = B; })(); + +window.BUILDERS.p23 = build_p23; +window.BUILDERS.p24 = build_p24; +window.BUILDERS.lo5 = build_lo5; +window.BUILDERS.p25 = build_p25; +window.BUILDERS.pr4 = build_pr4; +window.BUILDERS.p26 = build_p26; +window.BUILDERS.final4 = build_final4; diff --git a/js/api.js b/js/api.js index b39d6e9..1ea3303 100644 --- a/js/api.js +++ b/js/api.js @@ -937,6 +937,7 @@ async function biochemGetElements() { return req('GET', '/biochem/elements' async function biochemGetMolecules(p={}) { return req('GET', `/biochem/molecules?${new URLSearchParams(p)}`); } async function biochemGetMolecule(id) { return req('GET', `/biochem/molecules/${id}`); } async function biochemValidate(atoms,bonds){ return req('POST','/biochem/validate',{atoms,bonds}); } +async function biochemAnalyze(atoms,bonds){ return req('POST','/biochem/analyze',{atoms,bonds}); } async function biochemGetReactions() { return req('GET', '/biochem/reactions'); } async function biochemGetChallenges() { return req('GET', '/biochem/challenges'); } async function biochemSolveChallenge(id,payload) { return req('POST',`/biochem/challenges/${id}/solve`,payload); } @@ -1065,7 +1066,7 @@ window.LS = { clearFeaturesCache, hideDisabledFeatures, showBoardIfAllowed, - biochemGetElements, biochemGetMolecules, biochemGetMolecule, biochemValidate, + biochemGetElements, biochemGetMolecules, biochemGetMolecule, biochemValidate, biochemAnalyze, biochemGetReactions, biochemGetChallenges, biochemSolveChallenge, biochemGetSaved, biochemSave, biochemDeleteSaved, biochemGetPathways, biochemGetPathwayProgress, biochemSavePathwayProgress, diff --git a/js/sidebar.js b/js/sidebar.js index cccd3ca..0bf5100 100644 --- a/js/sidebar.js +++ b/js/sidebar.js @@ -78,6 +78,7 @@ ${L('/library', 'book-open', 'Библиотека')} ${L('/theory', 'brain', 'Теория')} ${L('/knowledge-map', 'share-2', 'Карта знаний')} + ${L('/flashcards', 'copy', 'Флэшкарты')} ${L('/question-bank', 'database', 'Банк вопросов', { cls: 'sb-teacher-only', hidden: !isTch })} ${L('/exam-prep/math9', 'clipboard-check', 'Подготовка к экзамену 9')} `)} @@ -191,4 +192,13 @@ LS.hideDisabledFeatures?.(); LS.notif?.init?.(); } + + // Глобальная плавающая кнопка «создать карточку» (на всех страницах с шапкой) + if (typeof LS !== 'undefined' && LS.isLoggedIn?.() && !document.getElementById('fc-fab-loader')) { + const s = document.createElement('script'); + s.id = 'fc-fab-loader'; + s.src = '/js/flashcard-fab.js'; + s.defer = true; + document.body.appendChild(s); + } })(); diff --git a/plans/BIOCHEM_UPGRADE.md b/plans/BIOCHEM_UPGRADE.md index 0e4c342..4518a71 100644 --- a/plans/BIOCHEM_UPGRADE.md +++ b/plans/BIOCHEM_UPGRADE.md @@ -74,14 +74,19 @@ Считать химию, а не хранить класс строкой. -- [ ] 2.1 `backend/src/services/chem.js`: - - Полярность связей по разнице электроотрицательностей; **дипольный момент** молекулы (вектор-сумма с учётом 3D-геометрии из Фазы 1) → polar/nonpolar обоснованно. - - Частичные заряды (упрощённый Gasteiger / EN-метод) для раскраски атомов. - - DBE (степень ненасыщенности), молярная масса, массовые доли элементов. - - Гибридизация центра, классификация функциональных групп через SMARTS-подобные паттерны (вынести из хардкода фронта). -- [ ] 2.2 API `POST /api/biochem/analyze` (atoms,bonds → {formula, mass, dbe, dipole, polarity, charges, groups, hybridization}). Заменить фронтовую эвристику. -- [ ] 2.3 В редакторе: тепловая карта частичных зарядов (toggle), стрелка диполя в 3D, панель «геометрия и полярность». -- [ ] 2.4 Расширенная валидация: вместо «лимит превышен» — подсказки («у C занято 5 связей, максимум 4», «кислород обычно 2 связи»). +> Серверный срез (тег `biochem-phase2-server`): `backend/src/services/chem.js` +> **переиспользует то же ядро** `biochem-core.js` (сделан dual-export: браузер +> `window.BIO` + Node `module.exports`) — без дублирования химии. Эндпоинт +> `POST /api/biochem/analyze` отдаёт {formula, mass, dbe, geometry, polarity, +> dipole, charges, groups, massFractions, valency}; `/validate` переведён на +> ядро (плюс чинит баг формата связей b.o/order). 2.4: `BIO.valency` с +> подсказками («Углерод (C): занято 5 связей, максимум 4 — убери 1»), +> используется и в редакторе, и на сервере. + +- [x] 2.1 `backend/src/services/chem.js`: переиспользует ядро `BIO` (полярность/диполь по 3D-VSEPR, частичные заряды, DBE/масса/массовые доли, гибридизация, функциональные группы) — без дубля логики на сервере. +- [x] 2.2 API `POST /api/biochem/analyze` (atoms,bonds → {formula, mass, dbe, dipole, polarity, charges, groups, hybridization, valency}). Живой анализ в редакторе оставлен client-side (мгновенно); сервер — авторитетный расчёт + валидация на сохранении. +- [x] 2.3 В редакторе: тепловая карта частичных зарядов (toggle), стрелка диполя в 3D, панель «геометрия и полярность». +- [x] 2.4 Расширенная валидация: `BIO.valency` даёт подсказки («Углерод (C): занято 5 связей, максимум 4 — убери 1») вместо «лимит превышен»; единая логика в редакторе и на сервере. --- diff --git a/plans/textbooks-7/PLAN_CHEMISTRY_7_VISUAL.md b/plans/textbooks-7/PLAN_CHEMISTRY_7_VISUAL.md new file mode 100644 index 0000000..dbca6ac --- /dev/null +++ b/plans/textbooks-7/PLAN_CHEMISTRY_7_VISUAL.md @@ -0,0 +1,227 @@ +# План: визуальный и интерактивный апгрейд учебника «Химия 7» + +**Дата:** 2026-05-30 +**Контекст:** дополнение к [PLAN_CHEMISTRY_7.md](PLAN_CHEMISTRY_7.md). Базовый учебник реализован +полностью (все 26 §, 4 главы, виджеты в `chem7_ch1..4_widgets.js`), но интерактивы сейчас +в основном **статичные**: SVG-картинки, клик-раскрытие, `