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>

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

===== Audio =====

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

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

===== 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)]]