docs(teacher-guide): главы 14–17 — лаборатория, биохимия, геймификация, доступ

+ Глава 14: Виртуальная лаборатория (40 симуляций, deep-link, стереометрия 3D,
  связь с учебниками, управление в админке)
+ Глава 15: Биохимия (молекулярный редактор 2D/3D, VSEPR, SMILES, валентность,
  библиотека, реакции с ΔH, метаболические пути)
+ Глава 16: Геймификация (XP/уровни/достижения, питомец эволюция/цвет/настроение,
  начисление XP через панель, сброс прогресса)
+ Глава 17: Доступ к контенту (allowlist учебников/экзаменов по классам,
  feature flags, System Health)
~ Ch-13: nav → ch-14 вместо ch-1; убран «Готово! 13 глав»
~ CHAPTERS array: 13 → 17 записей, прогресс-бар пересчитается автоматически

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-31 08:26:51 +03:00
parent 8c44115d32
commit 2354353e93
+237 -1
View File
@@ -1190,7 +1190,7 @@
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Иконка корзины</b> — убрать ученика из списка. Уже созданные задания НЕ удаляются — ученик продолжит их видеть.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body">Счётчик «Заданий» показывает, сколько вы лично выдали этому ученику.</div></div>
</div>
<div class="tg-success"><div class="tg-box-icon"><i data-lucide="check-circle"></i></div><div class="tg-box-body"><div class="tg-box-label">Готово!</div>Теперь вы знаете все 13 разделов руководства. Удачных уроков и репетиторских часов!</div></div>
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="arrow-right-circle"></i></div><div class="tg-box-body"><div class="tg-box-label">Продолжайте изучение</div>Следующие главы: Лаборатория (14), Биохимия (15), Геймификация (16), Доступ к контенту (17).</div></div>
</div>
<div class="tg-chapter-nav">
@@ -1198,6 +1198,238 @@
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Экзамен 9 класс</div></div>
</div>
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-14')" style="text-align:right">
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Лаборатория</div></div>
</div>
</div>
</div>
<!-- ═══ CHAPTER 14 — LAB ═══ -->
<div class="tg-chapter" id="ch-14">
<div class="tg-chapter-header">
<div class="tg-chapter-icon"><i data-lucide="flask-conical"></i></div>
<div class="tg-chapter-meta">
<div class="tg-chapter-num">Глава 14</div>
<div class="tg-chapter-title">Виртуальная лаборатория</div>
</div>
<a href="/lab" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Лаборатория</a>
</div>
<div class="tg-section" id="s-14-1">
<div class="tg-section-title">14.1 Что это и зачем</div>
<p>Виртуальная лаборатория — 40 интерактивных симуляций по физике, химии, математике и биологии. Всё работает прямо в браузере, никаких установок не нужно.</p>
<div class="tg-tools-grid">
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="atom"></i></div><div><div class="tg-tool-name">Физика (14)</div><div class="tg-tool-desc">Маятник, волны, оптика, электричество, газы…</div></div></div>
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="flask-conical"></i></div><div><div class="tg-tool-name">Химия (14)</div><div class="tg-tool-desc">Орбитали, кристаллы, реакции, периодическая таблица…</div></div></div>
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="calculator"></i></div><div><div class="tg-tool-name">Математика (9)</div><div class="tg-tool-desc">Графики, планиметрия, стереометрия 3D, вероятность…</div></div></div>
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="leaf"></i></div><div><div class="tg-tool-name">Биология (2)</div><div class="tg-tool-desc">Деление клетки, фотосинтез</div></div></div>
</div>
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="link"></i></div><div class="tg-box-body"><div class="tg-box-label">Deep-link на конкретную симуляцию</div>Откройте нужную симуляцию и скопируйте адрес — в нём уже будет параметр <b>?sim=название</b>. Вставьте ссылку в задание или чат урока, и ученик попадёт прямо в неё.</div></div>
</div>
<div class="tg-section" id="s-14-2">
<div class="tg-section-title">14.2 Связь с учебниками</div>
<p>В учебниках рядом с нужными параграфами появляется кнопка <b>«В лабораторию»</b> с числом связанных симуляций. Нажмите — откроется лаборатория с уже выбранной симуляцией по теме.</p>
<div class="tg-steps">
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Откройте учебник → нужный параграф.</div></div>
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Нажмите кнопку с иконкой колбы в правом углу параграфа.</div></div>
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Браузер откроет лабораторию и автоматически запустит нужную симуляцию.</div></div>
</div>
</div>
<div class="tg-section" id="s-14-3">
<div class="tg-section-title">14.3 Стереометрия 3D</div>
<p>Симуляция <b>«Стереометрия»</b> — интерактивные объёмные тела: куб, пирамида, призма, конус, цилиндр, сфера, правильные многогранники и усечённые фигуры.</p>
<div class="tg-steps">
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Вращение</b> — зажмите кнопку мыши и тяните. Фигура крутится в 3D.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Производные точки</b> — середины рёбер, центры граней, засечки.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Deep-link на фигуру</b> — например, <code>/lab?sim=stereo:cube</code> откроет сразу куб.</div></div>
</div>
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="monitor"></i></div><div class="tg-box-body"><div class="tg-box-label">На онлайн-уроке</div>Откройте симуляцию в соседней вкладке и включите демонстрацию экрана — ученики увидят 3D-вращение в реальном времени. Или используйте режим аннотации прямо поверх симуляции на доске.</div></div>
</div>
<div class="tg-section" id="s-14-4">
<div class="tg-section-title">14.4 Управление симуляциями (для администратора)</div>
<p>В панели администратора → вкладка «Симуляции»:</p>
<div class="tg-steps">
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body">Включить/выключить конкретную симуляцию из каталога.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body">Отметить симуляцию как «Рекомендованную» (featured).</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body">Связать симуляцию с параграфами учебников (редактор связей).</div></div>
</div>
</div>
<div class="tg-chapter-nav">
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-13')">
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Мои ученики</div></div>
</div>
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-15')" style="text-align:right">
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Биохимия</div></div>
</div>
</div>
</div>
<!-- ═══ CHAPTER 15 — BIOCHEM ═══ -->
<div class="tg-chapter" id="ch-15">
<div class="tg-chapter-header">
<div class="tg-chapter-icon"><i data-lucide="atom"></i></div>
<div class="tg-chapter-meta">
<div class="tg-chapter-num">Глава 15</div>
<div class="tg-chapter-title">Биохимия</div>
</div>
<a href="/biochem" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Биохимия</a>
</div>
<div class="tg-section" id="s-15-1">
<div class="tg-section-title">15.1 Молекулярный редактор</div>
<p>Страница <b>/biochem</b> — интерактивный редактор молекул. Собирайте молекулы из атомов и связей, платформа мгновенно вычисляет свойства.</p>
<div class="tg-tools-grid">
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="circle"></i></div><div><div class="tg-tool-name">Атомы</div><div class="tg-tool-desc">C, H, O, N, S, P, галогены, металлы</div></div></div>
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="git-merge"></i></div><div><div class="tg-tool-name">Связи</div><div class="tg-tool-desc">Одинарные, двойные, тройные</div></div></div>
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="box"></i></div><div><div class="tg-tool-name">3D VSEPR</div><div class="tg-tool-desc">Настоящая 3D-геометрия по теории ОЭПВО</div></div></div>
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="zap"></i></div><div><div class="tg-tool-name">Заряды δ±</div><div class="tg-tool-desc">Тепловая карта, стрелка диполя</div></div></div>
</div>
<p>В панели свойств автоматически отображаются: <b>молярная масса</b>, <b>DBE</b> (степень ненасыщенности), <b>гибридизация</b>, <b>форма молекулы</b>, <b>дипольный момент</b>, <b>полярность</b>, <b>функциональные группы</b>.</p>
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="alert-circle"></i></div><div class="tg-box-body"><div class="tg-box-label">Валентность в реальном времени</div>Если превысить валентность атома — появится подсказка: «Углерод (C): занято 5 связей, максимум 4 — убери 1». Сохранение заблокируется до исправления.</div></div>
</div>
<div class="tg-section" id="s-15-2">
<div class="tg-section-title">15.2 Библиотека и свойства</div>
<p><b>/biochem-library</b> — 105+ молекул с карточками и 2D/3D-превью. Можно сравнивать несколько молекул и экспортировать таблицу в CSV.</p>
<p><b>/biochem-properties</b> — сравнение молекул: столбчатый график молярных масс, массовые доли элементов.</p>
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="download"></i></div><div class="tg-box-body"><div class="tg-box-label">SMILES и экспорт</div>В редакторе можно ввести SMILES-строку (например, <code>CC(=O)O</code> — уксусная кислота), молекула построится автоматически. Готовую молекулу можно экспортировать как PNG или JSON.</div></div>
</div>
<div class="tg-section" id="s-15-3">
<div class="tg-section-title">15.3 Реакции и метаболические пути</div>
<p><b>/biochem-reactions</b> — 27 реакций с автоматической балансировкой (показывает коэффициенты) и энергодиаграммой (экзо-/эндотермические с ΔH).</p>
<p><b>/biochem-pathways</b> — метаболические пути (гликолиз, цикл Кребса и др.) с пошаговым Learn-режимом. За прохождение начисляется XP.</p>
</div>
<div class="tg-chapter-nav">
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-14')">
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Лаборатория</div></div>
</div>
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-16')" style="text-align:right">
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Геймификация</div></div>
</div>
</div>
</div>
<!-- ═══ CHAPTER 16 — GAMIFICATION ═══ -->
<div class="tg-chapter" id="ch-16">
<div class="tg-chapter-header">
<div class="tg-chapter-icon"><i data-lucide="zap"></i></div>
<div class="tg-chapter-meta">
<div class="tg-chapter-num">Глава 16</div>
<div class="tg-chapter-title">Геймификация и питомец</div>
</div>
<a href="/pet" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Питомец</a>
</div>
<div class="tg-section" id="s-16-1">
<div class="tg-section-title">16.1 XP, уровни и достижения</div>
<p>Каждое действие ученика приносит <b>опыт (XP)</b>: тесты, лаборатория, чтение учебников, ежедневная активность, ответы на уроке.</p>
<div class="tg-tools-grid">
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="trending-up"></i></div><div><div class="tg-tool-name">8 уровней</div><div class="tg-tool-desc">Новичок → Легенда, у каждого своя модель питомца</div></div></div>
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="trophy"></i></div><div><div class="tg-tool-name">38+ достижений</div><div class="tg-tool-desc">Стрики, лаборатория, тесты, биохимия, топ-10</div></div></div>
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="flame"></i></div><div><div class="tg-tool-name">Стрики</div><div class="tg-tool-desc">Серия дней подряд — бонусный XP</div></div></div>
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="target"></i></div><div><div class="tg-tool-name">Ежедневная цель</div><div class="tg-tool-desc">Лёгкая / Средняя / Тяжёлая</div></div></div>
</div>
</div>
<div class="tg-section" id="s-16-2">
<div class="tg-section-title">16.2 Виртуальный питомец</div>
<p>У каждого ученика есть личный питомец — существо, которое растёт вместе с прогрессом. Ухаживайте за ним: кормите, гладьте.</p>
<div class="tg-steps">
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Имя</b> — ученик выбирает сам при первом посещении /pet.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Цвет</b> — 6 вариантов (фиолетовый, голубой, золотой, красный, зелёный, синий).</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Эволюция</b> — с ростом XP появляются уши (ур. 2), антенны (3), крылья (4), корона (5+).</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Настроение</b> — зависит от стрика и частоты визитов: бодр, в духе, скучает, голоден.</div></div>
</div>
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="star"></i></div><div class="tg-box-body"><div class="tg-box-label">Радужный ошейник</div>При стрике 7+ дней подряд питомец получает анимированный радужный ошейник. Отличный мотиватор для регулярной работы!</div></div>
</div>
<div class="tg-section" id="s-16-3">
<div class="tg-section-title">16.3 Начисление XP администратором</div>
<p>В панели администратора → вкладка <b>«Геймификация»</b> → раздел <b>«Начислить XP / Монеты»</b>:</p>
<div class="tg-steps">
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Выберите ученика из списка (есть фильтр по имени).</div></div>
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Задайте XP и/или монеты с помощью пресетов (0/+10/+25/+50/+100/+250) или вручную. <b>Значение 0 — эта валюта не начисляется.</b></div></div>
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Укажите причину (быстрые кнопки: «Мероприятие», «Урок», «Бонус» или своя).</div></div>
<div class="tg-step"><div class="tg-step-num">4</div><div class="tg-step-body">Нажмите <b>«Начислить»</b>. Ученик получит XP/монеты мгновенно.</div></div>
</div>
<div class="tg-note"><div class="tg-box-icon"><i data-lucide="rotate-ccw"></i></div><div class="tg-box-body"><div class="tg-box-label">Сброс прогресса</div>Раздел ниже — «Сбросить прогресс пользователя». Удаляет весь XP, монеты и достижения. Действие необратимо, потребует подтверждения.</div></div>
</div>
<div class="tg-chapter-nav">
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-15')">
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Биохимия</div></div>
</div>
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-17')" style="text-align:right">
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Доступ к контенту</div></div>
</div>
</div>
</div>
<!-- ═══ CHAPTER 17 — ACCESS ═══ -->
<div class="tg-chapter" id="ch-17">
<div class="tg-chapter-header">
<div class="tg-chapter-icon"><i data-lucide="shield-check"></i></div>
<div class="tg-chapter-meta">
<div class="tg-chapter-num">Глава 17</div>
<div class="tg-chapter-title">Доступ к контенту</div>
</div>
<a href="/admin" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Админ-панель</a>
</div>
<div class="tg-section" id="s-17-1">
<div class="tg-section-title">17.1 Открытие учебников и экзаменов классу</div>
<p>По умолчанию ученики видят только те учебники и экзамены, к которым им открыт доступ. Это настраивается через <b>allowlist</b> — белый список.</p>
<div class="tg-steps">
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Откройте <b>Админ-панель → вкладка «Доступ к контенту»</b>.</div></div>
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Выберите учебник или экзамен из списка.</div></div>
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Добавьте класс — все ученики класса получат доступ. Или выберите конкретного ученика — доступ только у него.</div></div>
</div>
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="users"></i></div><div class="tg-box-body"><div class="tg-box-label">Приоритеты</div>Доступ ученика выше доступа класса: если классу учебник закрыт, но конкретному ученику открыт — он его увидит.</div></div>
</div>
<div class="tg-section" id="s-17-2">
<div class="tg-section-title">17.2 Feature Flags — включение модулей</div>
<p>В <b>Админ-панели → «Настройки»</b> можно включать и отключать целые модули платформы:</p>
<div class="tg-steps">
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Биохимия</b> — полностью скрыть модуль для учеников.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Учебники</b> — отключить раздел учебников.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Флэшкарты, Live-квиз</b> — включить/выключить по необходимости.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Экзаменационные тесты</b> — модуль с 80 вариантами по математике 9 класса.</div></div>
</div>
<div class="tg-note"><div class="tg-box-icon"><i data-lucide="shield"></i></div><div class="tg-box-body"><div class="tg-box-label">Только для администратора</div>Изменение feature flags и доступа к контенту доступно только пользователям с ролью <b>admin</b>. Учителя видят только то, к чему у их класса есть доступ.</div></div>
</div>
<div class="tg-section" id="s-17-3">
<div class="tg-section-title">17.3 System Health</div>
<p>Администраторам доступна вкладка <b>«System Health»</b> в панели с метриками сервера в реальном времени:</p>
<div class="tg-steps">
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>CPU и RAM</b> — текущая нагрузка процессора и память.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Event loop lag</b> — задержка обработки запросов.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>HTTP-статистика</b> — количество запросов, самые медленные и частые роуты.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Тренды</b> — canvas-графики нагрузки за последние минуты.</div></div>
<div class="tg-step"><div class="tg-step-num"></div><div class="tg-step-body"><b>Журнал ошибок</b> — последние ошибки сервера с трейсом.</div></div>
</div>
<div class="tg-success"><div class="tg-box-icon"><i data-lucide="check-circle"></i></div><div class="tg-box-body"><div class="tg-box-label">Готово!</div>Теперь вы знаете все 17 разделов руководства. Удачных уроков!</div></div>
</div>
<div class="tg-chapter-nav">
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-16')">
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Геймификация</div></div>
</div>
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-1')" style="text-align:right">
<div class="tg-ch-nav-icon"><i data-lucide="rotate-ccw"></i></div>
<div><div class="tg-ch-nav-label">Вернуться к началу</div><div class="tg-ch-nav-title">Быстрый старт</div></div>
@@ -1234,6 +1466,10 @@
{ id:'ch-11', label:'Учебники', icon:'book-open-text', sections:['s-11-1','s-11-2','s-11-3','s-11-4'], sLabels:['Каталог','Чтение и отметки','Назначить как ДЗ','Прогресс класса'] },
{ id:'ch-12', label:'Экзамен 9 класс', icon:'clipboard-check', sections:['s-12-1','s-12-2'], sLabels:['Что внутри','Назначить вариант'] },
{ id:'ch-13', label:'Мои ученики', icon:'user-plus', sections:['s-13-1','s-13-2','s-13-3','s-13-4'], sLabels:['Когда нужно','Добавить ученика','Назначение','Удаление и заметки'] },
{ id:'ch-14', label:'Виртуальная лаборатория', icon:'flask-conical', sections:['s-14-1','s-14-2','s-14-3','s-14-4'], sLabels:['40 симуляций','Связь с учебниками','Стереометрия 3D','Управление (admin)'] },
{ id:'ch-15', label:'Биохимия', icon:'atom', sections:['s-15-1','s-15-2','s-15-3'], sLabels:['Молекулярный редактор','Библиотека и свойства','Реакции и пути'] },
{ id:'ch-16', label:'Геймификация и питомец', icon:'zap', sections:['s-16-1','s-16-2','s-16-3'], sLabels:['XP и достижения','Виртуальный питомец','Начисление XP (admin)'] },
{ id:'ch-17', label:'Доступ к контенту', icon:'shield-check', sections:['s-17-1','s-17-2','s-17-3'], sLabels:['Открытие учебников классу','Feature Flags','System Health'] },
];
/* ── Render nav ── */