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

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

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

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

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

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

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

1. Загрузите ваш MP3-файл в CDN-хранилище движка.
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>

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

<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
• Настройки задания (коды, подсказки, бонусы)