docs(teacher-guide): глава 21 «Конструктор симуляций» — подробное руководство + актуализация навигации

frontend/teacher-guide.html

@@ -416,7 +416,7 @@
           <div class="tg-nav-title">Содержание</div>
           <div class="tg-progress-wrap">
             <div class="tg-progress-bar-outer"><div class="tg-progress-bar-inner" id="tg-prog-bar"></div></div>
-            <div class="tg-progress-text" id="tg-prog-text">0 из 13 глав прочитано</div>
+            <div class="tg-progress-text" id="tg-prog-text">0 из 21 глав прочитано</div>
           </div>
         </div>
         <div class="tg-nav-search">
@@ -1587,7 +1587,7 @@
               <div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body"><b>Магазин наград</b> — за монеты (начисляются вместе с XP) ученик покупает предметы и награды.</div></div>
               <div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body"><b>Родительские аккаунты</b> (<a href="/parent">/parent</a>) — родитель привязывается к ученику и видит его прогресс и уведомления.</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>Дальше — главы для администраторов (видны только под ролью admin).</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>Дальше — мощный «Конструктор симуляций» (создание своих интерактивных сцен), а за ним — главы для администраторов (видны только под ролью admin).</div></div>
           </div>
 
           <div class="tg-chapter-nav">
@@ -1595,6 +1595,134 @@
               <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-21')" 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 21 — КОНСТРУКТОР СИМУЛЯЦИЙ ═══ -->
+        <div class="tg-chapter" id="ch-21">
+          <div class="tg-chapter-header">
+            <div class="tg-chapter-icon"><i data-lucide="pencil-ruler"></i></div>
+            <div class="tg-chapter-meta">
+              <div class="tg-chapter-num">Глава 21</div>
+              <div class="tg-chapter-title">Конструктор симуляций</div>
+            </div>
+            <a href="/sim-builder" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Открыть конструктор</a>
+          </div>
+
+          <div class="tg-section" id="s-21-1">
+            <div class="tg-section-title">21.1 Что это и где</div>
+            <p><b>Конструктор симуляций</b> — инструмент, в котором вы сами, без программирования, собираете интерактивную 2D-сцену: параметры-ползунки, объекты (точки, отрезки, векторы, фигуры, подписи), привязанные <b>формулами</b> к параметрам и времени, настоящую физику и графики. Готовую симуляцию можно сохранить, опубликовать в лабораторию, раздать классу и открыть на доске онлайн-урока.</p>
+            <div class="tg-steps">
+              <div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body">Открыть: в боковом меню пункт <b>«Конструктор симуляций»</b> или адрес <a href="/sim-builder">/sim-builder</a>. Доступно учителю и администратору.</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="lightbulb"></i></div><div class="tg-box-body"><div class="tg-box-label">Что реально собрать</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>Администратор мог отключить конструктор: <b>Админка → Функции → «Конструктор симуляций»</b>. При выключенном тумблере страница недоступна, но ранее опубликованные симуляции в лаборатории продолжают работать.</div></div>
+          </div>
+
+          <div class="tg-section" id="s-21-2">
+            <div class="tg-section-title">21.2 Рабочее поле</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>Кнопки в углу сцены</b> — «Вписать» (показать всю область) и «Сбросить вид».</div></div>
+              <div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body"><b>Сетка и оси</b> с числовыми делениями и точкой (0,0) рисуются автоматически; границы области задаются в настройках сцены (xmin/xmax/ymin/ymax).</div></div>
+              <div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body">Контролы запущенной симуляции (ползунки, плей/пауза) — плавающая панель в углу, не закрывает сцену; её можно свернуть.</div></div>
+            </div>
+            <div class="tg-tip"><div class="tg-box-icon"><i data-lucide="play"></i></div><div class="tg-box-body"><div class="tg-box-label">Кнопка «Тест»</div>Запускает анимацию (время <code>t</code> идёт), «Сброс» — возвращает в начало. Пока симуляция на паузе, перетаскивание объектов и ползунки служат для настройки сцены.</div></div>
+          </div>
+
+          <div class="tg-section" id="s-21-3">
+            <div class="tg-section-title">21.3 Параметры (ползунки)</div>
+            <p>Параметр — это переменная со ползунком, которой можно управлять прямо в симуляции. На параметры потом ссылаются формулы объектов.</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">Задайте: <b>имя</b> (латиницей, например <code>v</code>, <code>theta</code>), минимум, максимум, шаг, начальное значение и (необязательно) единицу.</div></div>
+              <div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">В превью появится ползунок — двигайте его, чтобы видеть, как меняется сцена.</div></div>
+            </div>
+            <div class="tg-note"><div class="tg-box-icon"><i data-lucide="alert-triangle"></i></div><div class="tg-box-body"><div class="tg-box-label">Зарезервированные имена</div>Нельзя называть параметр <code>t</code> (время), <code>e</code>, <code>pi</code>, <code>w</code>, <code>h</code> — это служебные имена в формулах. Конструктор предупредит и не даст сохранить.</div></div>
+          </div>
+
+          <div class="tg-section" id="s-21-4">
+            <div class="tg-section-title">21.4 Объекты и формулы</div>
+            <p>Объекты — это то, что рисуется на сцене. Любое числовое поле объекта (координата, радиус, размер) можно задать <b>числом или формулой</b> от параметров и времени <code>t</code>.</p>
+            <div class="tg-tools-grid">
+              <div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="dot"></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="circle"></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="spline"></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="type"></i></div><div><div class="tg-tool-name">Подпись (LaTeX)</div><div class="tg-tool-desc">Текст и формулы KaTeX</div></div></div>
+              <div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="line-chart"></i></div><div><div class="tg-tool-name">График</div><div class="tg-tool-desc">Кривая y=f(x), см. 21.7</div></div></div>
+              <div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="gauge"></i></div><div><div class="tg-tool-name">Индикатор (readout)</div><div class="tg-tool-desc">Живое числовое значение</div></div></div>
+            </div>
+            <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">В полях координат пишите формулы: например для броска тела <code>x = v*cos(theta)*t</code>, <code>y = v*sin(theta)*t - 5*t^2</code>.</div></div>
+              <div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Кнопка <b>fx</b> у поля открывает палитру: параметры, время <code>t</code>, функции (sin, cos, sqrt, abs, exp, ln…), константы (pi, e). Клик вставляет имя в формулу.</div></div>
+              <div class="tg-step"><div class="tg-step-num">4</div><div class="tg-step-body">Объект можно поставить мышью: нажмите значок <b>«прицел»</b> у объекта и кликните по сцене — координаты подставятся (см. 21.5).</div></div>
+              <div class="tg-step"><div class="tg-step-num">5</div><div class="tg-step-body">У объекта можно задать <b>id</b> и затем ссылаться на его координаты в других формулах: <code>id.x</code>, <code>id.y</code>.</div></div>
+            </div>
+            <div class="tg-tip"><div class="tg-box-icon"><i data-lucide="function-square"></i></div><div class="tg-box-body"><div class="tg-box-label">Ошибки в формуле</div>Если выражение записано неверно, поле подсветится и покажет ошибку — симуляция при этом не ломается. Деление на ноль и неопределённости дают 0.</div></div>
+          </div>
+
+          <div class="tg-section" id="s-21-5">
+            <div class="tg-section-title">21.5 Стиль, порядок и прямое редактирование</div>
+            <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>Перетаскивание на сцене</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>Отмена/повтор</b>: кнопки в панели инструментов и горячие клавиши <code>Ctrl+Z</code> / <code>Ctrl+Y</code> (или <code>Ctrl+Shift+Z</code>).</div></div>
+            </div>
+          </div>
+
+          <div class="tg-section" id="s-21-6">
+            <div class="tg-section-title">21.6 Физика</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>: гравитация (g по X и Y), трение, упругость столкновений (0…1).</div></div>
+              <div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body"><b>Тело</b>: у точки/круга включите «тело» и задайте массу и начальную скорость (vx, vy). Тело падает, сталкивается, отскакивает.</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>Стены</b> — границы области (низ/верх/лево/право) или произвольный отрезок: от них тела отражаются.</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="info"></i></div><div class="tg-box-body"><div class="tg-box-label">Формулы и физика вместе</div>Физические тела и формульные объекты сосуществуют на одной сцене: например, подпись или вектор скорости можно привязать к координатам тела через <code>id.x</code>, <code>id.y</code>.</div></div>
+          </div>
+
+          <div class="tg-section" id="s-21-7">
+            <div class="tg-section-title">21.7 Графики и диаграммы</div>
+            <p>Объект <b>«График»</b> рисует кривую функции прямо на сцене в мировых координатах.</p>
+            <div class="tg-steps">
+              <div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body">Задайте выражение (например <code>sin(x)</code>), переменную (по умолчанию <code>x</code>), диапазон и число точек.</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>Заливка под кривой</b>, <b>маркеры точек</b> и <b>легенда</b> (по подписям кривых) включаются переключателями.</div></div>
+              <div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body">Режим <b>«след» (trace)</b> — кривая накапливается по времени <code>t</code> (удобно строить график величины в ходе анимации).</div></div>
+            </div>
+          </div>
+
+          <div class="tg-section" id="s-21-8">
+            <div class="tg-section-title">21.8 Сохранение, публикация и раздача</div>
+            <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>Шаблон</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>Клонировать</b> — сделать свою копию чужой опубликованной симуляции и доработать её.</div></div>
+            </div>
+            <div class="tg-tip"><div class="tg-box-icon"><i data-lucide="flask-conical"></i></div><div class="tg-box-body"><div class="tg-box-label">Где появляются ваши симуляции</div>В <a href="/lab">лаборатории</a> есть раздел <b>«Мои симуляции»</b> — там ваши черновики и опубликованные, с кнопками «Редактировать» и «Удалить». Прямая ссылка вида <code>/lab?sim=custom:НОМЕР</code> открывает конкретную симуляцию.</div></div>
+            <div class="tg-tip"><div class="tg-box-icon"><i data-lucide="presentation"></i></div><div class="tg-box-body"><div class="tg-box-label">На онлайн-уроке</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>Это вся учительская часть руководства. Дальше — главы для администраторов (видны только под ролью admin).</div></div>
+          </div>
+
+          <div class="tg-chapter-nav">
+            <div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-20')">
+              <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>
@@ -1928,6 +2056,7 @@
     { id:'ch-18', label:'Квантик-ассистент',         icon:'sparkles',        sections:['s-18-1','s-18-2','s-18-3'],           sLabels:['Что умеет','Спроси Квантика','Подсказки на экзамене'] },
     { id:'ch-19', label:'Флэшкарты',                 icon:'copy',            sections:['s-19-1','s-19-2','s-19-3'],           sLabels:['Колоды и карточки','Картинки и формулы','Импорт и генерация ИИ'] },
     { id:'ch-20', label:'Ещё модули платформы',      icon:'grid-3x3',        sections:['s-20-1','s-20-2','s-20-3','s-20-4'], sLabels:['Карта знаний и Теория','Игры: Кроссворд, Виселица','Красная книга и Коллекция','Материалы, Магазин, Родители'] },
+    { id:'ch-21', label:'Конструктор симуляций',      icon:'pencil-ruler',    sections:['s-21-1','s-21-2','s-21-3','s-21-4','s-21-5','s-21-6','s-21-7','s-21-8'], sLabels:['Что это и где','Рабочее поле','Параметры','Объекты и формулы','Стиль и порядок','Физика','Графики','Сохранение и раздача'] },
   ];
 
   const ADMIN_CHAPTERS = [