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

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

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

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

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

{{ :authors_main:task_editor:image_styles_uk.png?800 |Стилі картинок: заокруглення, тінь і zoom — розгортання за кліком}}

==== Картинка по центру ====
<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>

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

{{ :authors_main:task_editor:image_zoom_uk.gif |Клас zoom: за кліком картинка розгортається на весь екран, за другим закривається}}

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

У редакторі цей стиль називається **Zoom**: виділіть картинку та оберіть його у списку стилів.

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

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

==== Картинки-заглушки для чернеток (placehold.co) ====
У процесі підготовки гри та верстки завдань, коли фінальні зображення ще не готові, зручно використовувати сервіс генерації заглушок [[https://placehold.co|placehold.co]]. Він дозволяє вставити картинку потрібного розміру прямо за посиланням, не завантажуючи файли у сховище движка:
<code>
<img src="https://placehold.co/600x400/171432/f0b429?text=Картинка+питання" class="img-fluid rounded">
</code>

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

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

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

Щоб додати аудіозапис на рівень:
  - Залийте файл у вкладці **«Файли»** — mp3, m4a, ogg або wav до 5 МБ, див. [[uk:authors_main:task_editor:files|Файли гри]].
  - Перемкніть редактор завдання в режим **"Джерело"** (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>

Своє відео теж можна — тільки mp4 і тільки до 5 МБ, див. [[uk:authors_main:task_editor:files|Файли гри]]:
<code>
<video src="посилання_на_завантажений_файл" controls style="max-width:100%"></video>
</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|Налаштування завдання (коди, підказки, бонуси)]]