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

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