content.js.Три файла не зависят от урока: каркас index.html, стили styles.css и движок engine.js. Движок рисует те виды блоков, которые в нём прописаны: сколько опишешь, столько и будет. В шаблоне их пять: текст, картинка, карточка-перевёртыш, сворачиваемый блок, вопрос с вариантами. Понадобится ещё один вид, например таймлайн или галерея, дописываешь его в движок один раз, и дальше он доступен во всех уроках.
Сам урок лежит в отдельном файле content.js: заголовки, абзацы, вопросы, подписи к картинкам. Движок читает этот файл и рисует по нему страницу. Под новый урок меняешь content.js, остальные файлы остаются.
Вот вся цепочка:
index.html — пустой каркас: один контейнер и подключение остальных файлов. styles.css — оформление блоков. engine.js — вся логика. Все три пишет ИИ по одному промпту.
.js, а не .json. В этом шаблоне контент вынесен в файл content.js: он подключается как обычный скрипт, поэтому урок открывается двойным кликом по index.html. Держать контент в content.json тоже можно, но тогда страницу нужно открывать через локальный сервер: в VS Code это расширение Live Server, кнопка Go Live. Двойным кликом JSON-вариант не заработает — браузер не даст странице прочитать файл с диска.<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Лонгрид</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- здесь пусто: блоки урока сюда положит engine.js, когда страница откроется -->
<div id="root" class="wrap"></div>
<!-- порядок важен: сначала контент, потом движок -->
<script src="content.js"></script>
<script src="engine.js"></script>
</body>
</html>index.html пусто. Заголовков и абзацев урока здесь нет и не будет. Текст лежит в content.js. Когда страница открывается, engine.js собирает из него блоки и кладёт их внутрь пустого <div id="root"></div>. Поэтому один и тот же index.html подходит любому уроку — менять в нём нечего.content.js — список блоков урока. Весь текст лежит в переменной window.LESSON: content.js её заполняет, engine.js читает и рисует по ней страницу. Вот вся схема файла, по ней и правишь:
window.LESSON = {
title: "Название урока",
blocks: [
{ type: "text", html: "<h1>Заголовок</h1><p>Абзац текста</p>" },
{ type: "image", src: "images/1.png", caption: "Подпись под картинкой" },
{ type: "flashcard", front: "Термин или вопрос", back: "Ответ или объяснение" },
{ type: "accordion", summary: "Заголовок", content: "Текст, раскрывается по клику" },
{ type: "quiz", question: "Вопрос?", options: ["Вариант A", "Вариант B"], answer: 1, feedback: "Пояснение к ответу" }
]
};blocks — один блок урока. type говорит движку, что нарисовать. Дальше в той же строке идёт содержимое блока: у каждой части своё название, и текст пишется сразу после него, в кавычках.
text — обычный текст: после html: пишешь заголовки <h1> и абзацы <p>image — картинка: после src: путь к файлу, после caption: подписьflashcard — карточка-перевёртыш: после front: лицо, после back: оборотaccordion — сворачиваемый блок: после summary: заголовок, после content: скрытый текстquiz — вопрос: после question: вопрос, после options: варианты, после answer: номер правильного, после feedback: пояснениеНазвания видов служебные, их не переводишь. Варианты в quiz считаются с нуля: answer: 0 — первый вариант, answer: 1 — второй. Список видов открытый: добавишь в движок свой type — сможешь ставить его и здесь.
Как эти блоки выглядят живьём
Наполнить урок тоже можно через ИИ. Приложи к запросу файл-пример из шаблона (content.js) и свой текст:
Для следующего урока копируешь всю папку. В копии меняешь content.js и картинки. Каркас, стили и движок остаются как есть.
index.html, styles.css, engine.js.content.js и картинки в images/.imsmanifest.xml в папку. Как это делается, разбирали в основном блоке уроков.Собирать вручную не обязательно. Нажми на кнопку и скачаешь шаблон ZIP прямо в браузере. Внутри index.html, styles.css, engine.js, пример content.js, imsmanifest.xml, README и папка images/. Отметка «пройдено» в движке тоже уже стоит.
Дальше правишь под себя: меняешь оформление в styles.css, добавляешь свои виды блоков в engine.js — и получаешь свой шаблон, из которого лонгриды делаются серийно.
Файлы в архиве лежат в корне, поэтому ЛМС примет его без пересборки.
Пять шагов от скачанного архива до урока в ЛМС.
content.js в текстовом редакторе, например в бесплатном VS Code.index.html двойным кликом. Урок откроется в браузере в том же виде, в каком его увидит ученик. Пустая страница почти всегда означает ошибку в content.js: лишняя запятая, незакрытая скобка или «ёлочки» вместо прямых кавычек.content.js. Новый вид блока или другое оформление — это правка engine.js или styles.css: открываешь нужный файл, отдаёшь ИИ и просишь добавить.