Pages

▼

Thursday, June 26, 2025

🚀 Making Your HTML5 Simulation SLS-Compatible with xAPI Score and Feedback Logging

 

🚀 Making Your HTML5 Simulation SLS-Compatible with xAPI Score and Feedback Logging


Are you looking to track not just what students do in a simulation, but how they think as they interact? This blog post showcases how to use the xAPI State API inside a custom HTML5 simulation to send both scores and detailed feedback back to SLS (Student Learning Space). Inspired by the video guide and a working project on plant growth simulation, we unpack how this is done.






🎯 Objective

To integrate xAPI into an HTML5 simulation so that:

  • Score is sent to SLS upon use of key controls.

  • Feedback logs are recorded as a string detailing user interaction history.

🔧 Core Technologies Used

  • xapiwrapper.min.js (xAPI library)

  • index.html — main HTML interface

  • index.js — handles score and xAPI logic

  • SLS Interactive Response setup for receiving score/feedback via xAPI

🧠 How xAPI Works in This Project

1. Initialization (from index.js)

On load, XAPIUtils.getParameters() pulls key details from the URL, including:

  • endpoint: LRS URL (e.g., SCORM Cloud or SLS internal)

  • auth: Basic Auth token

  • agent: current user

  • activityId and stateId: identifiers for tracking

The ADL xAPI wrapper is then initialized using these parameters.

2. User Interaction Tracking (from index.html)

When users interact with:

  • the soil type dropdown (Soil A or Soil B)

  • the time slider (0–6 weeks),

two things happen:

  • A score is calculated:

    • +1 the first time Soil A slider is used

    • +1 the first time Soil B slider is used

    • Max score = 2

  • A feedback log string is built:

    makefile
    t = 0.0s, combobox = Soil A
t = 0.5s, Time(weeks) = 2
...

3. Sending Data via xAPI State API

The storeState(score, feedback) function constructs a JSON object like:

json
{
  "score": 2,
  "feedback": "t = 0.0s, combobox = Soil A\nt = 0.5s, Time(weeks) = 2"
}

Then sends it using:

js
ADL.XAPIWrapper.sendState({
  actor: agent,
  activityId: activityId,
  stateId: stateId,
  registration: registration,
  contentType: "application/json",
  data: JSON.stringify(stateObject)
});

📌 Unlike full xAPI statements, this method stores data via the State API, useful for associating state data with a user and activity for retrieval in SLS or LRS.

🌱 Use Case: Plant Growth Simulation

The simulation UI is injected from index_sim.html into index.html using HTML embedding. Sliders allow users to select soil type and growth time, showing plant height over time.

Every interaction updates the xAPI score and feedbackLog, reflecting:

  • Which soil was picked

  • At what time the slider was changed

  • The sequence of thought behind experimentation

This records student thinking, not just their final answer — supporting deeper assessment!

📦 Packaging and Deployment

The working files include:

  • index.html — with embedded simulation + xAPI UI

  • index.js — JS logic for xAPI and interaction tracking

  • xapiwrapper.min.js — xAPI library

To zip:

bash
$timestamp = Get-Date -Format 'yyyyMMdd_HHmmss'
tar -a -c -f "simulation_$timestamp.zip" index.html index.js xapiwrapper.min.js

Download sample:
👉 03 html5-dynamic-input-score-is-text-field.zip

🧪 Tools Used

ToolPurpose
Visual Studio CodeIDE
Cline Extension BotClaude-powered code assistant
Trae.aiFree AI IDE for educators
SLS Integration DocsUser guide for xAPI+SLS

🔁 Summary Table

FeatureDescription
xAPI TypeState API (not statement)
Score Logic+1 for Soil A slider used +1 for Soil B slider used
Feedback LoggingText string of all dropdown/slider interactions
SLS IntegrationVia Interactive Response with Free-Response wrapper
BenefitsTrack how students think, not just right/wrong

📣 Final Thoughts

This xAPI-enhanced simulation doesn't just check answers — it captures student reasoning step by step. With just HTML, JS, and the xAPI wrapper, you unlock real-time learning analytics and feedback tracking for your SLS lessons.

Whether you're building your own or customizing existing simulations, this method empowers you to visualize the learning process — not just the outcome.

🔖 Hashtags (for sharing)

#xAPI #LearningAnalytics #StudentFeedback #HTML5Simulation #EducationTechnology
#LRS #SCORMCloud #InteractiveLearning #EdTech #SLScompatible
#xAPIStateAPI #JavaScriptSimulation #WebSimulation #PedagogyWithTech #TrackStudentThinking


Prompts Used:

Prompts Used. read the files and explain specifically how the xapi works successfully to send score and send feedback Response I have analyzed the index.html and index.js files. Here's how the xAPI implementation works to send score and feedback using the xAPI State API: Initialization (XAPIUtils.getParameters in index.js): On page load, the script reads the LRS endpoint, auth token, agent (user), stateId, and activityId from the URL parameters. It then configures the ADL.XAPIWrapper with the endpoint and authentication details. Data Collection (updateStore in index.html): When the "Send/Save" button is clicked, this function gathers the score, feedback, and any rubric details from the form inputs. It constructs a state object based on the selected "Scenario" radio button, determining which pieces of data (score, feedback, rubric) are included. Sending Data (storeState in index.js): This function takes the state object created in the previous step. It retrieves the stored activityId, agent, and stateId. It then uses ADL.XAPIWrapper.sendState() to send the state object to the configured LRS. This function utilizes the xAPI State API to save the provided JSON data (state object) associated with the specific user (agent), activity (activityId), and state identifier (stateId). In essence, the application packages the user's input (score, feedback, rubric) into a JavaScript object and uses the xAPI State API via the xapiwrapper.min.js library to save this object to the LRS, linked to the user and the specific interactive activity. This method uses the State API for saving data rather than sending formal xAPI Statements. Prompt 2: using index.html as a working xapi base code, do not modify the xapi code , they are already working, i want to inject the index_sim.html inside of index. the xapi score is +1 for use of the sliders for soil a and soil b, for a total of 2 marks. the xapi feedback is the string of actions done on the user, for example t = 0, combobox = soil A, Time(weeks) = 1, and add a "\n" to next line, and so on, i want to use this xapi feedack as a recording mechanism for understanding the students' thought processes. if u need reference to correct working file, index_working is permanently available for code check. Response 2 I have successfully integrated the plant growth simulation from index_sim.html into index.html and updated the JavaScript logic to meet the specified xAPI requirements. Here's a summary of the changes: index.html now displays the plant growth simulation UI. The JavaScript within index.html tracks interactions with the soil type dropdown and the time slider. A score is calculated, incrementing by 1 the first time the time slider is used for 'Soil A' and the first time it's used for 'Soil B' (maximum score of 2). A feedback log string is generated, recording actions like t = 0.0s, combobox = Soil A or t = 5.1s, Time(weeks) = 3 on separate lines. The storeState function in index.js has been modified to accept the calculated score and feedback log. Upon each interaction (changing soil type or releasing the time slider), the storeState function is called to send the current score and the cumulative feedback log to the LRS via the xAPI State API. Prompt 3: zip up index.html, index.js and xapiwrapper.min.js with timestamp Response 3: $timestamp = Get-Date -Format 'yyyyMMdd_HHmmss'; tar -a -c -f "simulation_$timestamp.zip" index.html index.js xapiwrapper.min.js Files: https://iwant2study.org/lookangejss/slshtml5score/03%20html5-dynamic-input-score-is-text-field.zip Tools: https://code.visualstudio.com/ IDE used https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev Cline Extension Bot https://www.trae.ai/ another FREE IDE also now can used Cline Extension Bot https://aistudio.google.com/apikey Google API Key Documentation: https://sg.iwant2study.org/ospsg/index.php/sls-t-ug/476-sls-interactive-vsc-cline-geminipro25 #xAPI #LearningAnalytics #StudentFeedback #HTML5Simulation #EducationTechnology #LRS #SCORMCloud #InteractiveLearning #EdTech #SLScompatible #xAPIStateAPI #JavaScriptSimulation #WebSimulation #PedagogyWithTech #TrackStudentThinking

at

No comments:

Post a Comment