Базове форматування та медіа [wiki.qeng.org]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
{{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>

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

Щоб додати аудіозапис на рівень:
  - Завантажте ваш 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>

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