← Тех

Как добавить тест Мозг.ру на свой сайт

Разместите рядом со статьёй конкретный тест или предложите посетителю случайную викторину по выбранной теме. Блок может стать продолжением материала: прочитал о космосе — проверил знания, изучил историю автомобиля — попробовал узнать модель по деталям.

Ниже — проект кода вставки. Адрес mozg.example и параметры служат примерами будущего интерфейса; действующего виджета по этому адресу нет.

Вариант 1. Конкретный тест

Подходит для теста к статье, выпуску или уроку. В параметре test указывается ID выбранного теста. Для примера используется условный ID 123.

<iframe
  src="https://mozg.example/embed/test?test=123&theme=light"
  title="Пройти тест Мозг.ру"
  width="100%"
  height="640"
  loading="lazy"
  style="display:block;border:0;border-radius:16px;max-width:100%">
</iframe>

В предполагаемом блоке посетитель увидит название, описание, кнопку начала, вопросы и результат. Реальная высота зависит от содержания; в первом варианте можно оставить внутреннюю прокрутку. Обычную страницу сайта вместо специального embed-адреса использовать не следует: режим встраивания должен быть явно поддержан.

Вариант 2. Случайный тест по теме

<iframe
  src="https://mozg.example/embed/random?topic=space&difficulty=medium&theme=light"
  title="Случайный тест о космосе от Мозг.ру"
  width="100%"
  height="640"
  loading="lazy"
  style="display:block;border:0;border-radius:16px;max-width:100%">
</iframe>

Предлагаем выбирать тест при открытии блока и сохранять его на всё прохождение. Самопроизвольная смена во время ответа недопустима. Кнопка «Другой тест» может выбирать новый вариант до начала, а во время прохождения должна предупреждать о смене.

Пример topic=space обозначает космос; возможные темы science и ai — наука и искусственный интеллект. Это условные коды, окончательный справочник появится в документации. Если подходящих доступных тестов нет, блок должен показать понятное сообщение, а не подменять тему случайной.

Параметры блока

• test — конкретный ID для фиксированного блока.
• topic — код тематики для случайного выбора.
• difficulty — желаемая сложность; без параметра предполагается выбор среди всех уровней.
• theme — оформление; в примерах light. Поддерживаемые темы определим при реализации.
• height — высота iframe в HTML, а не параметр API. Подберите её под страницу и проверьте на телефоне.

Параметры test и topic относятся к разным сценариям. Не стоит смешивать их в одном блоке, пока спецификация явно не определяет такое поведение.

Установка на страницу

1. Выберите конкретный тест или тематику и убедитесь, что материал разрешён для размещения у партнёров.
2. После запуска получите настоящий код вставки. Примеры с mozg.example сейчас использовать для рабочего сайта нельзя.
3. Добавьте код в HTML-блок вашей CMS или шаблон страницы. Доступ к HTML-вставкам зависит от настроек и прав редактора.
4. Опубликуйте пробную страницу и проверьте весь путь до результата.
5. Рядом оставьте обычную ссылку на тест как запасной способ открытия.

Особенности Tilda, WordPress и 1С-Битрикс разобраны в статье для владельцев сайтов. Для публикации в социальных сетях обычно выбирают анонс со ссылкой, а не код iframe.

Внешний вид и мобильный экран

Блок должен занимать ширину родительской колонки, не создавать горизонтальную прокрутку и оставлять достаточно места для вариантов ответа. Не размещайте полноценный тест в слишком узком рекламном слоте: для него лучше компактная карточка со ссылкой.

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

Вход и сохранение результатов

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

Секретные API-ключи в код вставки не добавляются. Если потребуется идентификатор партнёра, он должен быть публичным и не давать административных прав. Закрытые результаты других участников блок показывать не должен.

Что проверить перед размещением

Откройте страницу на компьютере и телефоне, пройдите тест до конца, попробуйте обновление и возврат назад. Проверьте длинные вопросы, изображения, управление клавиатурой и запасную ссылку. Если CMS удаляет iframe при сохранении, обратитесь к администратору сайта; не отключайте общую защиту сайта ради одной вставки.

Будущая документация интеграций (заглушка) → · Предложить площадку для пилота →