Базовое форматирование и медиа [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>

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