Базове форматування та медіа

У редакторі завдань 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
• Налаштування завдання (коди, підказки, бонуси)