Basic Formatting and Media [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}}
====== Basic Formatting and Media ======

In the QEng task editor, you can use HTML markup to format text and insert media files. The engine is built on Bootstrap, so all standard Bootstrap styling classes are available for layout.

===== Images =====

==== Responsive Full-width Image ====
To make an image automatically scale down for mobile devices and laptops:
<code>
<img src="image_url" class="img-fluid">
</code>

Ready-made class combinations — rounding, shadow, text wrapping — sit in the editor as a list: select an image and the **"Styles"** list becomes active.

{{ :authors_main:task_editor:image_styles_en.png?800 |Image styles: rounding, shadow and zoom — opening full screen on a click}}

==== Centered Image ====
<code>
<img src="image_url" class="mx-auto d-block">
</code>

==== Centered Image with Rounded Corners ====
<code>
<img src="image_url" class="rounded mx-auto d-block">
</code>

==== Image That Opens Full Screen ====
The ''zoom'' class makes an image clickable: a click opens it full screen over the page, a second click closes it.
<code>
<img src="image_url" class="zoom" style="width: 300px;">
</code>

This is a convenient way to use a large image without letting it take over the level: it sits small in the task text, and the player can still study the whole thing.

{{ :authors_main:task_editor:image_zoom_en.gif |The zoom class: a click opens the image full screen, a second click closes it}}

If a different image should open full screen — the same map in a higher resolution, say — give it in the ''data-zoom'' attribute:
<code>
<img src="thumbnail_url" class="zoom" data-zoom="large_image_url">
</code>

In the editor this style is called **Zoom**: select the image and pick it from the style list.

{{ :authors_main:task_editor:editor_zoom_style_en.png |The Zoom style in the editor's style list}}
 Picking a style from the list replaces the image's class entirely, so a combination with other classes — ''class="zoom rounded-5px"'', both rounded and zoomable — is written by hand in **"Source"** mode.

<note>The zoom works on the level page — in the editor preview a click on the image does nothing.</note>

==== Placeholder Images for Drafts (placehold.co) ====
While authoring a game and laying out tasks, before final images are ready, it is convenient to use the [[https://placehold.co|placehold.co]] placeholder generation service. It allows inserting an image of any desired size directly via a URL without uploading files to storage:
<code>
<img src="https://placehold.co/600x400/171432/f0b429?text=Question+Image" class="img-fluid rounded">
</code>

<note warning>
Placeholders are useful **only while writing a game**. Do not leave external links to third-party services in a live game: if the service is unavailable or blocked for players, the task will be left without an image. For live games, always upload finished media files to the engine's storage.
</note>

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=84062|Example of placeholder images in game]]

===== Audio =====

To add audio to a level:
  - Upload the file on the **"Files"** tab — mp3, m4a, ogg or wav up to 5 MB, see [[en:authors_main:task_editor:files|Game Files]].
  - Switch the task editor to **"Source"** mode and insert:
<code>
<audio controls><source src="link_to_uploaded_file" /></audio>
</code>

===== Video =====

To ensure videos (e.g. from YouTube) scale correctly on both computers and mobile screens, wrap the ''<iframe>'' code in a responsive container:
<code>
<div class="embed-responsive embed-responsive-16by9">
  <iframe src="video_url" class="embed-responsive-item" allowfullscreen></iframe>
</div>
</code>

Your own video is possible too — mp4 only and up to 5 MB only, see [[en:authors_main:task_editor:files|Game Files]]:
<code>
<video src="link_to_uploaded_file" controls style="max-width:100%"></video>
</code>

===== Tables =====

To make tables scrollable horizontally on narrow smartphone screens (instead of being squished):
<code>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr><th>Header 1</th><th>Header 2</th></tr>
    </thead>
    <tbody>
      <tr><td>Value 1</td><td>Value 2</td></tr>
    </tbody>
  </table>
</div>
</code>

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=75385|Example of image styles in game]]

===== More Information =====
  * [[en:authors_main:task_editor:level_styling|Level Styling and Custom CSS]]
  * [[en:authors_main:task_editor:task_settings|Task Settings (Codes, Hints, Bonuses)]]