(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: Client-side only technologies: HTML5, CSS, and JavaScript. No server-side code or external APIs are permitted.
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 WebGL libraries (if required) in their root folder. Note that if WebGL is used, all .js and shader assets must be bundled locally.
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.

   Note: Your ZIP folder must contain index.html in the root - not nested and must be named index.html. Otherwise, SLS will not recognise the folder.

   

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

Teachers can now set Interactive Response Questions (IRQs) to automatically return scores and teacher feedback.

IRQs will be able to return final score-marks and teacher feedback after March 2025 Update.

To do this, upload an xAPI-compliant HTML5 file to the Free-Response Question – Interactive Response Assistant and set up maximum marks possible and optionally the rubrics if desired.

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. You may want to use this tool: https://sg.iwant2study.org/ospsg/index.php/1253 to automatically correct the ZIP file into a SLS compatible format.

3. How to create HTML5 Media Object with xAPI with score and teacher feedback compliance?

   1. Create a fully interactive, realistic-looking simulation of [plant growth] using only HTML, CSS, and JavaScript, all within a single self-contained HTML file. This file must be immediately usable in LMS platforms like the Student Learning Space (SLS) without requiring any external resources or internet access.
   2. Hide the page title, margins, and unnecessary UI to maximize vertical space.
   3. To optimise the file for SLS iframe view: Should fit width = 100% and height = 450 px.
   4. Fully responsive design for both desktop and mobile screens.
   5. Use a free AI-powered IDE like Trae.ai or Visual Code Studio with Cline bot Extension
   6. Open a folder with a working xAPI example, such as the unzipped 03-html5-dynamic-input-score-is-text-field folder.
   7. Prompt the IDE to add new interactivity on top of the existing xAPI file.
   8. Include score-marks and teacher feedback after each action. For example:
      • t = 0: Q1 asked, student answered "[response]" – marked ✅ correct.
      • t = 1: Q2 asked, student answered "[response]" – marked ❌incorrect.
   9. Once the interactive behaves as expected, ask the AI to hide debugging panels if desired.
   10. The project should now be ready to export as an xAPI-compliant zip file compatible with SLS.