{{indexmenu_n>10}}
====== Базове форматування та медіа ======

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

===== Картинки =====

==== Картинка на всю ширину екрану (адаптивна) ====
Щоб картинка автоматично масштабувалась під екрани телефонів та комп'ютерів:
<code>
<img src="посилання_на_картинку" class="img-fluid">
</code>

==== Картинка по центру ====
<code>
<img src="посилання_на_картинку" class="mx-auto d-block">
</code>

==== Картинка по центру із заокругленими краями ====
<code>
<img src="посилання_на_картинку" class="rounded mx-auto d-block">
</code>

==== Картинка, що розгортається на весь екран ====
Клас ''zoom'' робить картинку клікабельною: за кліком вона відкривається поверх сторінки на весь екран, за другим кліком закривається.
<code>
<img src="посилання_на_картинку" class="zoom" style="width: 300px;">
</code>

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

Якщо на весь екран має відкриватись інша картинка — наприклад, та сама мапа, але у більшій роздільній здатності — вкажіть її в атрибуті ''data-zoom'':
<code>
<img src="посилання_на_прев'ю" class="zoom" data-zoom="посилання_на_велику_картинку">
</code>

У редакторі цей стиль називається **Zoom**: виділіть картинку та оберіть його у списку стилів. Вибір стилю зі списку замінює клас картинки цілком, тому поєднання з іншими класами — ''class="zoom rounded-5px"'', і з заокругленням, і з розгортанням — пишеться вручну в режимі **«Джерело»** (Source).

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

===== Аудіо =====

Щоб додати аудіозапис на рівень:
  - Завантажте ваш MP3-файл у CDN-сховище движка.
  - Перемкніть редактор завдання в режим **"Джерело"** (Source) та вставте наступний код:
<code>
<audio controls><source src="посилання_на_завантажений_файл" /></audio>
</code>

===== Відео =====

Щоб відео (наприклад, з YouTube) коректно та адаптивно відображалось як на комп'ютерах, так і на мобільних пристроях, оберніть його ''<iframe>'' у спеціальний контейнер:
<code>
<div class="embed-responsive embed-responsive-16by9">
  <iframe src="посилання_на_відео" class="embed-responsive-item" allowfullscreen></iframe>
</div>
</code>

===== Таблиці =====

Для адаптивного відображення таблиць на вузьких екранах смартфонів (щоб з'являлася горизонтальна прокрутка замість стиснення колонок):
<code>
<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>
</code>

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=75385|Приклад стилів картинок у грі]]

===== Додаткова інформація =====
  * [[uk:authors_main:task_editor:level_styling|Стилізація рівнів та кастомний CSS]]
  * [[uk:authors_main:task_editor:task_settings|Налаштування завдання (коди, підказки, бонуси)]]