HTML formatting

Common tags you'll need for importing questions and EMQs via CSV

🔠 Formatting

Paragraphs

For longer questions, you may need to use paragraphs. To create new paragraphs for new ideas or points, use the <p> element to define a new paragraph. You always need a closing </p>tag at the end of your paragraph.

<p>No. I am your father</p>
<p> - Darth Vader <p>

Headings

Use headings tags to have text display as settings <h1> being the largest <h6> being the smallest. You can use line breaks <br> to leave a gap between all html elements.

<h1> Starwars </h1>
<h2> Episode V</h2>
<h3> The Empire Strikes Back </h3>
<br>
<p>"No. I am your father"</p>
<p> - Darth Vader <p>

Lists

Use ordered <ol> lists to list from 1 onwards and unordered <ul>lists which display as bullet points show different options in a question. Remember to us <li> tags for each list item

<p>No. I am your_______ </p>
 <ol>
 <li>father</li>
 <li>BFF</li>
 <li>Gaurdian</li>
 <li>Line manager</li>
</ol>
<p> - Darth Vader <p>

🖼 Images

When using images in questions or answer options you'll need to upload them to either a content management system (CMS) or something else that can host your image and create a public permalink that points to that image. There are a few ways to generate these links:

• Upload images to an Amazon S3 bucket

• Uploading images to Wordpress or other website you have

• Modify Google Drive share links (see below)

Google Drive links

You will need to modify links from Google Drive in order for them to work on Synap

1) Get a share URL from Drive

Make sure the visibility is set to 'Anyone with the link' and copy that link

Copy the green link

2) Modify link

The share URL link structure needs to be modified, see the long string after /d/ that is the {FileID} modify the link

Initial link: 
https://drive.google.com/file/d/{FileID}/view?usp=sharing

Reformatted link: 
https://drive.google.com/uc?export=download&id={FILE_ID}

Click here to download an excel template for how to modify Google Drive image links.

🧠 Note: If you don't want to generate image links with any of the methods above mentioned - use the Synap question editor to upload directly onto the platform. When you export these questions links will have been automatically generated by the system.

Any image URL then needs to be used in <img> tags. You can use style elements to alter the width and height. More on HTML images W3 schools

<p>No. I am your father</p>
<p> - Darth Vader <p>
<p> See fig below Darth Vader </p>
<p><img src ="https://synap-content.s3.eu-west-1.amazonaws.com/portalstore/empire-strikes-back-10.jpeg" width = 50% > </p>

Image in a question

🧠 Note: If you don't want to generate image links with any of the methods above mentioned - use the Synap question editor to upload directly onto the platform. When you export these questions links will have been automatically generated by the system.

Links

Create hyperlinks using <a> tags and the href element for different URLs

<p>No. I am your father</p>
<p> - Darth Vader <p>
<p> <a href = "https://www.youtube.com/watch?v=_lOT2p_FCvA"> Click to watch full scene </a></p>

📣 Emphasis

Use HTML tags to add emphasis to different parts of text

<p><strong>No.</strong> I am your <u>father.</u> </p>
<p>— <i>Darth Vader</i><p>

🧞‍♂️ Special Characters

In HTML, special characters are typically those that can't be easily typed into a keyboard or may cause display issues if typed or pasted into a web page. If you want to use special characters in your questions or answers, you should use either the HTML entity name or the HTML entity number. This will ensure that it displays correctly in most/all browsers.

<p>No. I am your father.</p>
<p> - Darth Vader <p>
<p>Lucasfilm LTD&trade;</p>

A Trademark (™) symbol will require special characters, use ™(entity number) and ™ (entity name) will both display The entity name and number will always start with an & and end with a semicolon. To find a full list of special characters you can insert with HTML, try this website.

Tag	Description
<p>	Paragraphs
<h1> <h2>....<h6>	Headings
<br>	Line breaks
<ol>	Ordered list (ie 1,2,3...)
<ul>	Unordered list (bullet points)
<li>	List item
<a>	Creates a link
<strong> or <b>	Makes text bold
<u>	Underlines text
<mark>	Highlights text
<i>	Makes text italic
<sup>	Puts characters in superscript (eg powers)
<sub>	Puts characters in subscript

💡 Top Tips

• Use HTML preview tools to check your text before you put it on platform or into a sheet - htmledit.squarefree.com
• Tutorial sites like W3 Schools to find other HTML tags and when to use them
• Always preview your questions before you give access to students!

Allowed tags in import and HTML snippets

Not all HTML tags are allowed in the importer or in the question editor. This is to keep your content scalable and accessible for users

List of allowed HTML tags

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<h1>
<h2>
<img>
<button>
<sup>
<sub>
<figure>
<address>
<article>
<aside>
<dir>
<footer>
<header>
<hgroup>
<main>
<nav>
<section>
<blockquote>
<dd>
<div>
<dl>
<dt>
<figcaption>
<figure>
<hr>
<li>
<lang>
<main>
<ol>
<p>
<pre>
<ul>
<a>
<abbr>
<b>
<bdi>
<bdo>
<br>
<cite>
<code>
<data>
<dfn>
<em>
<i>
<kbd>
<mark>
<q>
<rb>
<rp>
<rt>
<rtc>
<ruby>
<s>
<samp>
<small>
<span>
<strong>
<sub>
<sup>
<time>
<caption>
<col>
<colgroup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<tr”>
<video>
<audio>
<iframe>
<Math>
<u>
<var>
<wbr>
<math>
<mglyph>
<mi>
<mn>
<mo>
<ms>
<mspace>
<mtext>
<menclose>
<merror>
<mfenced>
<mfrac>
<mpadded>
<mphantom>
<mroot>
<mrow>
<msqrt>
<mstyle>
<mmultiscripts>
<mover>
<mprescripts>
<msub>
<msubsup>
<msup>
<munder>
<munderover>
<none>
<maligngroup>
<malignmark>
<mlabeledtr>
<mtable>
<mtd>
<mtr>
<mlongdiv>
<mscarries>
<mscarry>
<msgroup>
<msline>
<msrow>
<mstack>
<maction>
<annotation>
<annotation-xml>
<semantics>

List of allowed Styles

allowedStyles: {
        '*': {
          'text-align': [/^left$/, /^right$/, /^center$/],
          'background-color': [
            /^#(0x)?[0-9a-f]+$/i,
            /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/,
            /^hsl\(\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?\s*\)$/
          ],
          color: [
            /^#(0x)?[0-9a-f]+$/i,
            /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/,
            /^hsl\(\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?\s*\)$/
          ],
          width: [/./],
          height: [/./],
          position: [/./],
          padding: [/./],
          'min-width': [/./],
          'min-height': [/./],
          'max-width': [/./],
          'max-height': [/./],
          'padding-top': [/./],
          'padding-bottom': [/./],
          'padding-left': [/./],
          'padding-right': [/./],
          margin: [/./],
          'margin-top': [/./],
          'margin-bottom': [/./],
          'margin-left': [/./],
          'margin-right': [/./],
          border: [/./],
          'border-radius': [/./],
          'border-width': [/./],
          'border-style': [/./],
          'border-color': [/./],
          float: [/./],
          display: [/./],
          'flex-direction': [/./],
          'flex-flow': [/./],
          'flex-grow': [/./],
          'flex-shrink': [/./],
          'flex-wrap': [/./],
          'flex-basis': [/./],
          'align-items': [/./],
          'align-content': [/./],
          'align-self': [/./],
          'justify-items': [/./],
          'justify-content': [/./],
          'justify-self': [/./],
          gap: [/./],
          'column-gap': [/./],
          'row-gap': [/./],
          'list-style-position': [/^inside$/, /^outside$/],
          direction: [/^rtl$/, /^ltr$/]