(A3,11) HTML5 Content Development (Enhanced)

Considerations when creating HTML5 Content

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

1. Acceptable languages: HTML5, CSS, and JavaScript (client-side only)
2. 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).
3. 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.
4. Others:
   1. There should not be any external libraries, including font libraries, when creating the HTML5 interactive content.

Uploading a HTML5 ZIP file in SLS

1. Ensure your Media Object folder contains the "index.html" file.

   

2. Select all the files within the folder and zip/compress them.

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

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


5. Click Upload when done.

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

7. When the file is successfully uploaded, the Media Object will be added to the Module.

Creating HTML5 Content for Interactive Response

1. Ensure that the XAPI Wrapper JavaScript file (xapiwrapper.min.js) is included in your project. This file provides the necessary functions and utilities for communicating with an Experience API (XAPI) endpoint.

   Before using the XAPI Wrapper functions, it's crucial to load the API wrapper script. This script provides methods for interacting with an XAPI-conformant Learning Record Store (LRS).

   <script src="xapiwrapper.min.js"></script>
   

   The version used is v1.11.0

2. Place the following script, it will do the initialization (getParameters) on document ready (DOMContentLoaded), which retrieves parameters (endpoint, auth, agent, stateId, activityId) from the URL query string and configures the xAPI Wrapper (ADL.XAPIWrapper) using the retrieved endpoint and auth credentials.

     <script>
     // Using a namespace to prevent global variable clashes
     const XAPIUtils = {
       parameters: null, // Parameters store
       getParameters: function () {
         if (!this.parameters) { // Ensure fetch once
           var urlParams = new URLSearchParams(window.location.search);
           var endpoint = urlParams.get('endpoint');
           var auth = urlParams.get('auth');
           var agent = JSON.parse(urlParams.get('agent'));
           var stateId = urlParams.get('stateId');
           var activityId = urlParams.get('activityId');
           ADL.XAPIWrapper.changeConfig({"endpoint": endpoint + "/", "auth": `Basic ${auth}`});
           this.parameters = { agent, stateId, activityId };
         }
         return this.parameters;
       }
     };
     // Immediately invoke getParameters on page load
     document.addEventListener("DOMContentLoaded", function() { XAPIUtils.getParameters(); });
     <script>
   

3. Currently SLS supports a single method, sendScore(score). Following is the sample to send the state via ADL.XAPIWrapper.sendState method.

     <script>
     function sendScore(score) {
       try {
         const parameters = XAPIUtils.getParameters(); // Retrieve parameters from store
         const activityid = parameters.activityId;
         const stateId = parameters.stateId;
         const agent = parameters.agent;
         const registration = null;
         const stateValue = { score: score };
         ADL.XAPIWrapper.sendState(activityid, agent, stateId, registration, stateValue);
       } catch (err) { console.error("An error has occurred!", err); }
     }
     </script>
   

4. Download sample package here

5. In the Module Editor page, hover over Question in the Component Bar, select Free-Response followed by Interactive Response.
6. Upload the HTM5 ZIP file into SLS and select Upload to proceed.

Supported Scenarios for Creating Interactive Response

Important: From Mar 2025 Update, teachers can set Interactive Response Questions (IRQs) to automatically return marks in rubrics by uploading corresponding HTML5 file to the Free-Response Question and setting up the rubrics to be used. Teachers can also set up IRQs that return teacher comments to students after their attempt.

You may download the HTML5 ZIP files based on the scenarios to create FRQ with Interactive Response.

FAQs

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

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