Synap Academy
Synap Home
  • ๐Ÿ‘‹Hello there
  • ๐Ÿ†•What's new
    • Big features
      • โณLimit membership duration for user groups
      • โ“Question based marking
      • ๐Ÿ‘ฝCloze questions & new editor
      • ๐Ÿฆ„Customise questions in exams
      • ๐Ÿคธโ€โ™‚๏ธFlexi retakes
      • ๐Ÿ’ฟRecords of learning
      • ๐Ÿ‡Override attempt scores, comments & history
      • ๐ŸงชLab values / Additional exam resources
      • ๐Ÿ”–Bookmarking
      • โœ๏ธSingle Sign On (SSO)
      • ๐ŸŽSub portals
      • ๐Ÿ›‚Multi-factor Authentication (MFA)
      • ๐Ÿ—’๏ธNotepad on attempts
      • ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธSynoptic
      • ๐ŸŽ–Override Grades
      • ๐Ÿ“ธGet webcam shots for identity verification
      • ๐Ÿ”Exam security: Lock exam attempts
      • โ›“๏ธShare links
      • ๐Ÿ›ฉ๏ธThe attempts table
      • ๐Ÿ“‹Anti cheat: disable copy & paste
      • ๐ŸฆšStudents Insights page
      • ๐Ÿงžโ€โ™‚๏ธGenerating quizzes
      • ๐Ÿฅ‡Exam certificates & resits
      • ๐Ÿ” Mark schemes/rubric marking
      • โœ…Marking & definition of completed attempts events -
      • ๐Ÿ‘ฏโ€โ™€๏ธCloning
  • ๐ŸŽฎInteractive demos
  • ๐Ÿƒโ€โ™‚๏ธGetting started
    • Overview
    • Content management
      • Notes
        • Dynamic notes
      • Surveys
      • Uploading content
        • Embed presentations
    • Billing & usage
  • โ“Quizzes
    • Creating a Quiz
      • Question types
        • Cloze question types
        • Audio recording questions
        • Audio/Video Stems and configurations
      • EMQs
      • Quiz Experience
      • Instructions & sections
      • Scoring on Synap (Points vs Credits)
        • Negative Scoring
        • Score by choice
    • Importing & Exporting Questions
      • Importing
        • Word Doc to CSV Format
        • Questions
        • EMQs
        • Sections
      • HTML formatting
  • ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘ฆโ€๐Ÿ‘ฆUsers & Groups
    • User types
    • Creating groups
      • Adding & inviting users by email
      • Generating user accounts
      • Importing new and existing users via csv
      • Customising messages to users
      • Sharing user group links
      • Advanced group settings
    • Manage groups
    • User information
    • Permissions
      • Global permissions
      • Specific permissions
      • Educator permissions
      • Markers permissions
  • ๐Ÿ‘จโ€๐Ÿ’ปExams
    • Understanding Exams on Synap
    • Create and Manage Exams
      • ๐Ÿ—๏ธ1. Setup: Exam
        • Dynamic exams
        • Customisation
      • ๐Ÿ”จ2. Build: Exam
        • Sections
        • Grades
      • โš™๏ธ3. Configure
        • Experience
        • Instructions
        • Results
        • Resits
        • Certificates
      • ๐Ÿš€4. Advanced
      • ๐Ÿ–‹๏ธMarking - Double & Blind
        • Adding custom marks & a mark scheme
      • ๐Ÿ“จ5. Share
        • Schedule
        • Publishing
        • Versioning
      • ๐Ÿ‘€6. Manage
    • Mark/Score attempts
    • Anti-Cheat features
      • Disabling Spellcheck for Exams
    • Proctoring
      • Proctoring with Rosalyn
        • Rosalyn Lock-down exam
        • Rosalyn Live Proctoring exam
        • Sitting a Rosalyn Proctored exam
      • Proctoring with Synoptic
        • Create a Synoptic exam
        • Reviewing Synoptic Sessions
        • Sitting a Synoptic Proctored Exam
        • Synoptic Best Practices & Trouble Shooting
      • Proctor Pricing
  • ๐Ÿ„Collections
    • Creating collections
      • Configure collections
    • Manage user group visibility
    • Collection mocks
    • Collections and the Study
    • Collection use cases
  • ๐ŸŽ๏ธCourses
    • Assignments
    • Course builder
    • Assigning a course
      • Viewing assignments & publishing new versions
    • Courses and assignment use cases
  • โš™๏ธPortals
    • Trouble shooting for your students
    • Portal Settings
      • General and branding
      • Registration settings
      • Email settings
      • Locale / Language settings
      • SSO Authentication
        • Auth0
        • JSON Web Tokens (JWT)
        • SAML with Okta (EU)
        • SAML with Okta (US)
      • Study and Self Practice settings
    • User Access
    • Data Management
      • Tag manager
      • Attributes
      • Records of learning
    • Sub portals
      • Creating sub portals
      • Branding sub portals
  • ๐Ÿ“ŠAnalytics
    • Fractal
    • Tags & facets
      • Facet best practice
    • Student Insights
    • Question statistics
  • โฌ…๏ธExports & Reporting
    • Attempts table & exports
    • Reporting platform (Depreciated)
    • Flag exports
  • ๐Ÿ”ŒIntegrations
    • ๐ŸชWebhooks
      • User Updated Webhook
      • Attempt Completed Webhook
      • Attempt override created
      • User Registered Webhook
      • Exam Completed Webhook
      • Attempt Submitted Webhook
      • Exam Submitted Webhook
      • Attempt Certificate Generated
      • Store Purchase Webhook (Legacy)
      • Completed Assignment Webhook
      • Flag Planted Webhook
      • User Added to User Group Webhook
      • User Registered for Exam Webhook
      • Learning Record Webhooks
      • Invite sent
    • Integrations & APIs
    • Single Sign On
    • โšกZapier
      • ๐ŸŸขGet started
      • ๐Ÿ”ซTriggers
      • ๐ŸŽฌActions
      • ๐Ÿ—๏ธExample Workflows
    • Segment
      • Test & Question Analytics
    • Google Analytics
    • Custom Domain (CNAME)
    • Synap Mobile apps
  • ๐Ÿš€Using Synap
    • Admin Account
    • Synap Students
Powered by GitBook
On this page
  • ๐Ÿ”  Formatting
  • ๐Ÿ–ผ Images
  • ๐Ÿ“ฃ Emphasis
  • ๐Ÿงžโ€โ™‚๏ธ Special Characters
  • ๐Ÿ’ก Top Tips
  • Allowed tags in import and HTML snippets

Was this helpful?

  1. Quizzes
  2. Importing & Exporting Questions

HTML formatting

PreviousSectionsNextUser types

Last updated 1 year ago

Was this helpful?

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

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}

๐Ÿง  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.

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

๐Ÿง  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>
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

  • 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$/]

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

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

A Trademark (โ„ข) symbol will require special characters, use &#8482;(entity number) and &trade; (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

Use HTML preview tools to check your text before you put it on platform or into a sheet -

Tutorial sites like to find other HTML tags and when to use them

โ“
Click here to download
More on HTML images W3 schools
this website.
htmledit.squarefree.com
W3 Schools
Copy the green link
Image in a question