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.
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
🖼 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
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
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
🧠 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
📣 Emphasis
Use HTML tags to add emphasis to different parts of text
🧞♂️ 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.
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.
<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
Buttons with links
Buttons can be created on platform with HTML snippets, the below snippet will create a button with a link to a website and open it in a new tab. The buttons colour will be set to the portal primary colour.
Use buttons alongside user group share links to allow users to add themselves into groups.
Sharing user group links💡 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
Last updated
Was this helpful?