Draft (A3,11) HTML5 Content Development (Enhanced)

 

(A3,11) HTML5 Content Development (Enhanced) https://www.learning.moe.edu.sg/teacher-user-guide/author/html5-content-development/

---

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 (i.e. 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.

   

   AU-AddHTML1.png

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 [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 [https://go.gov.sg/qtisample]. Note: Q16 is meant to test for errors

   QTI with 16 qns.zip

   

   AU-AddHTML2.png

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.

   

   AU-AddHTML3.png

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(); // Fetch parameters once on load
       });
     </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 [https://go.gov.sg/qtisample1]

sample-html5-package.zip

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

Supported Scenarios for Creating Interactive Response

Important (March 2025 Update):

Teachers can set Interactive Response Questions (IRQs) to automatically return

• Final score-marks and teacher feedback (recommended after March 2025)

  

• Individual rubrics criteria score and feedback (recommended after 2026 when rubrics can be copied across components in SLS)

To enable this, upload a corresponding HTML5 file to the Free-Response Question - Interactive Response Assistant by uploading corresponding xAPI compliance HTML5 file to the Free-Response Question and setting up the rubrics to be used.

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

Scenario	Use Case	Sample Code
Send score, feedback and criteria score and feedback	Involves score, feedback, criteria score and feedback	[01 html5-dynamic-input.zip]
https://go.gov.sg/qtisamplexxx
Send score via Radio and Checkbox	Involves score	[02 html5-save-input-only.zip]
https://go.gov.sg/qtisamplexxx
Send score, feedback and criteria score and feedback	Involves rubrics and “Show and use rubric marks“ is not selected	[03 html5-dynamic-input-score-is-text-field]
https://go.gov.sg/qtisamplexxx
Send score and feedback only working on a sample 🌡thermometer interactive	Involves score, feedback, implemented on an interactive of thermometer	[thermometer_html5_dynamic_input_score_is_text_field_20250407_152855.zip]
https://go.gov.sg/qtisamplexxx
Send score only	Involves only the score	[send-score.zip]
https://go.gov.sg/qtisample2
Send score with grading rubric	Involves rubrics and “Show and use rubric marks“ is selected	[send-score-with-grading-rubrics-use-rubric-marks-selected.zip]
https://go.gov.sg/qtisample3
Send score with grading rubric	Involves rubrics and “Show and use rubric marks“ is not selected	[send-score-with-grading-rubrics-use-rubric-marks-not-selected.zip]
https://go.gov.sg/qtisample4

01 html5-dynamic-input.zip

02 html5-save-input-only.zip

03 html5-dynamic-input-score-is-text-field.zip

thermometer_html5_dynamic_input_score_is_text_field_20250407_152855.zip

send-score.zip

send-score-with-grading-rubrics-use-rubric-marks-selected.zip

send-score-with-grading-rubrics-use-rubric-marks-not-selected.zip

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

4. 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. Hide the page title, margins, and unnecessary UI to maximize vertical space. Optimized for SLS iframe view: Should fit width = 100% and height = 90 %. No scrolling required horizontally or vertically. Fully responsive design for both desktop and mobile screens. Provide the data to set if applicable.

5. How to create HTML5 with xAPI compliance?

Suggested steps. Use a free AI powered integrated development (IDE) environment such as Trae.ai, open by the folder with a working xAPI such as folder with 03 html5-dynamic-input-score-is-text-field unzipped. Prompt the IDE to add the interactive on top of the existing working xapi files (index.html) and add suitable marks and feedback after each action. For example, t =0, Q1: repeat the question 1 string, answer was [student response], marked as correct ✅. t = 1, Q2: repeat the question 2 string, answer was [student response], marked as incorrect ❌. This once the interactive is working as expected, ask the AI model to hide the debugging panels and it should go able to work as a xAPI zip file with SLS.