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

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

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

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

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

{{ :authors_main:task_editor:image_styles.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.gif |Класс zoom: по клику картинка разворачивается на весь экран, по второму закрывается}}

Если на весь экран должна открываться другая картинка — например, та же карта, но в большем разрешении — укажите её в атрибуте ''data-zoom'':
<code>
<img src="ссылка_на_превью" class="zoom" data-zoom="ссылка_на_большую_картинку">
</code>

В редакторе этот стиль называется **Zoom**: выделите картинку и выберите его в списке стилей.

{{ :authors_main:task_editor:editor_zoom_style.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 МБ, см. [[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 МБ, см. [[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|Пример стилей картинок в игре]]

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