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.

To make an image automatically scale down for mobile devices and laptops:

<img src="image_url" class="img-fluid">

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

<img src="image_url" class="mx-auto d-block">

<img src="image_url" class="rounded mx-auto d-block">

The zoom class makes an image clickable: a click opens it full screen over the page, a second click closes it.

<img src="image_url" class="zoom" style="width: 300px;">

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.

If a different image should open full screen — the same map in a higher resolution, say — give it in the data-zoom attribute:

<img src="thumbnail_url" class="zoom" data-zoom="large_image_url">

In the editor this style is called Zoom: select the image and pick it from the 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>

To add audio to a level:

Upload your MP3 file to the engine's CDN storage.
Switch the task editor to “Source” mode and insert:

<audio controls><source src="link_to_uploaded_file" /></audio>

To ensure videos (e.g. from YouTube) scale correctly on both computers and mobile screens, wrap the <iframe> code in a responsive container:

<div class="embed-responsive embed-responsive-16by9">
  <iframe src="video_url" class="embed-responsive-item" allowfullscreen></iframe>
</div>

To make tables scrollable horizontally on narrow smartphone screens (instead of being squished):

<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>

Example of image styles in game