Базовое форматирование и медиа

В редакторе заданий QEng вы можете использовать HTML-разметку для красивого оформления текста и вставки медиафайлов. Движок построен на базе Bootstrap, поэтому для верстки доступны все стандартные классы стилей Bootstrap.

Чтобы картинка автоматически масштабировалась под экраны телефонов и компьютеров:

<img src="ссылка_на_картинку" class="img-fluid">

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

<img src="ссылка_на_картинку" class="mx-auto d-block">

<img src="ссылка_на_картинку" class="rounded mx-auto d-block">

Класс zoom делает картинку кликабельной: по щелчку она открывается поверх страницы во весь экран, по второму щелчку закрывается.

<img src="ссылка_на_картинку" class="zoom" style="width: 300px;">

Так удобно показывать крупную картинку, не занимая ею весь уровень: в тексте задания она стоит маленькой, а рассмотреть её игрок может целиком.

Если на весь экран должна открываться другая картинка — например, та же карта, но в большем разрешении — укажите её в атрибуте data-zoom:

<img src="ссылка_на_превью" class="zoom" data-zoom="ссылка_на_большую_картинку">

В редакторе этот стиль называется Zoom: выделите картинку и выберите его в списке стилей.

Выбор стиля из списка заменяет класс картинки целиком, поэтому сочетание с другими классами — class=«zoom rounded-5px», и с закруглением, и с разворотом — пишется вручную в режиме «Источник» (Source).

<note>Разворот работает на странице уровня — в предпросмотре редактора клик по картинке ничего не сделает.</note>

В процессе подготовки игры и вёрстки заданий, когда финальные изображения ещё не готовы, удобно использовать сервис генерации заглушек placehold.co. Он позволяет вставить картинку нужного размера прямо по ссылке, не загружая файлы в хранилище движка:

<img src="https://placehold.co/600x400/171432/f0b429?text=Картинка+вопроса" class="img-fluid rounded">

<note warning> Заглушки полезны только во время написания игры. Не оставляйте внешние ссылки на сторонние сервисы в реальной игре: если сервис будет недоступен или заблокирован у игроков, задание останется без картинки. Для реальной игры всегда загружайте готовые файлы в хранилище движка. </note>

Пример картинок-заглушек в игре

Чтобы добавить аудиозапись на уровень:

1. Залейте файл во вкладке «Файлы» — mp3, m4a, ogg или wav до 5 МБ, см. Файлы игры.
2. Переключите редактор задания в режим «Источник» (Source) и вставьте следующий код:

<audio controls><source src="ссылка_на_загруженный_файл" /></audio>

Чтобы видео (например, с YouTube) корректно и адаптивно отображалось как на компьютерах, так и на мобильных устройствах, оберните его <iframe> в специальный контейнер:

<div class="embed-responsive embed-responsive-16by9">
  <iframe src="ссылка_на_видео" class="embed-responsive-item" allowfullscreen></iframe>
</div>

Своё видео тоже можно — только mp4 и только до 5 МБ, см. Файлы игры:

<video src="ссылка_на_загруженный_файл" controls style="max-width:100%"></video>

Для адаптивного отображения таблиц на узких экранах смартфонов (чтобы появлялась горизонтальная прокрутка вместо сжатия колонок):

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
    </thead>
    <tbody>
      <tr><td>Значение 1</td><td>Значение 2</td></tr>
    </tbody>
  </table>
</div>

Пример стилей картинок в игре

• Стилизация уровней и кастомный CSS
• Настройки задания (коды, подсказки, бонусы)