(A3,11) HTML5 Content Development

Considerations when creating HTML5 Content

When creating HTML5 interactive content for SLS, the maximum file size limit is 500 MB.

Acceptable languages: HTML5, CSS, and JavaScript (client-side only)
Responsive requirements:
1. Vector graphics should be used, using SVG or other suitable formats,
2. The media object should be scaled proportionally in response to changing browser size - for HTML tags, ensure that the dimensions are defined using relative sizes (%, em) instead of absolute sizing (px).
Output:
1. Self-contained HTML5 (does not require an internet connection to work),
2. Scales proportionally and works within an <iframe> regardless of the dimension of the <iframe>,
3. Scales proportionately and works within its own browser window regardless of size,
4. Self-contained HTML5 packages should contain the necessary WebGLibraries (if required) in their root folder.
Others:
1. There should not be any external libraries, including font libraries, when creating the HTML5 interactive content.

Ensure your Media Object folder contains the "index.html" file.
Select all the files within the folder and zip/compress them.
In SLS, select File from Device under Text/Media on the Component Bar. Alternatively, click the Add Media icon and Upload File in the Rich Text Editor.
Upload the ZIP file by either dragging and dropping it into the box, or clicking the box to select a file through the file manager. A sample file is provided here

Click Upload when done.
If the file is valid, it will be uploaded and scanned for viruses.

Note: The virus scan will take longer if the file size is large.
When the file is successfully uploaded, the Media Object will be added to the Module.

Why does the HTML5 Media Object close after an Assignment is opened in a new tab?

The following line of code in the HTML5 Media Object may have caused this issue:

top.close();

//window.opener.top.close();

As a workaround, students can access the assignment via the Assignment URL.
Why does the HTML5 Media Object appear as a file, instead of being loaded in the frame?

This happens when there is no "index.html" file found directly inside the ZIP file, e.g. it is found inside another folder, or it has been renamed as "index.html.html". Please follow steps 1 and 2 as stated in the User Guide above when uploading a HTML5 Zip file in SLS.