How To Add xApi to HTML Interactives

 

📘 How to Add xAPI to Your HTML Interactives (for SLS Integration)

In this post, I’ll walk you through how to integrate xAPI (Experience API) into your HTML-based interactive so you can track user responses and send data to the Student Learning Space (SLS). This guide is especially useful for those creating custom learning tools and simulations using HTML and JavaScript. Screenshots will be attached along the way to help illustrate each step.

---

✅ Step 1: Set Up Your Project Folder

Start by creating a folder named lib inside your project directory. This folder will store your xAPI dependencies.

Inside the lib folder, upload the xapiminwrapper.js file. This is the wrapper library provided by SLS that enables your HTML simulation to communicate with the SLS xAPI endpoint.

---

✅ Step 2: Add the xAPI Utility Code

Still inside the lib folder, create a new JavaScript file — you can name it something like xapi-utils.js. This file will house the utility functions required to send and retrieve xAPI state data.

Paste the following code into your new file:

// Using a namespace to prevent global variable clashes
const XAPIUtils = {
  parameters: null, // Parameter storage
  getParameters: function () {
    if (!this.parameters) {
      const urlParams = new URLSearchParams(window.location.search);
      const endpoint = urlParams.get('endpoint');
      const auth = urlParams.get('auth');
      const agent = JSON.parse(urlParams.get('agent'));
      const stateId = urlParams.get('stateId');
      const activityId = urlParams.get('activityId');

      ADL.XAPIWrapper.changeConfig({
        "endpoint": endpoint + "/",
        "auth": `Basic ${auth}`
      });

      this.parameters = {
        agent,
        stateId,
        activityId
      };
    }

    return this.parameters;
  }
};

// Run on page load
document.addEventListener("DOMContentLoaded", function () {
  XAPIUtils.getParameters();
});

function storeState(stateValue) {
  try {
    const parameters = XAPIUtils.getParameters();
    const { activityId, stateId, agent } = parameters;

    ADL.XAPIWrapper.sendState(activityId, agent, stateId, null, stateValue);
    console.log("Submitted:", JSON.stringify(stateValue, null, 2));
  } catch (err) {
    console.error("An error has occurred!", err);
  }
}

function getState() {
  try {
    const parameters = XAPIUtils.getParameters();
    const { activityId, stateId, agent } = parameters;

    const result = ADL.XAPIWrapper.getState(activityId, agent, stateId);
    document.querySelector("#getState").innerText = "First Load State: " + JSON.stringify(result, null, 2);
    return result;
  } catch (err) {
    console.error("An error has occurred!", err);
    document.querySelector("#getState").innerText = "Error has occurred: " + err;
  }
}

This script handles:

• Fetching required xAPI parameters from the URL

• Setting the xAPI configuration

• Sending and retrieving xAPI state using wrapper methods

---

✅ Step 3: Use the storeState() Function to Send User Activity

To send user activity data to SLS, you’ll make use of the storeState() function defined earlier. This function takes in an object containing two keys:

• score: A number representing the user's score for the activity

• feedback: A string containing activity feedback, which can include HTML for richer presentation

Here’s an example of how to use it inside your simulation when the user completes an interaction:

storeState({
  score: 5,
  feedback: `<p>Student completed the task with full marks.</p><p>Answer: 2 + 3 = 5</p>`
});

You can customize the feedback section however you like—include explanations, responses, or even visuals. This feedback will be visible to teachers within SLS.

---

✅ Step 4: Upload Your Interactive to SLS

Once everything is wired up, export or zip your simulation package and upload it to SLS as a Custom HTML interactive. After uploading:

1. View the activity as a student.

2. Complete the task inside your simulation.

3. Verify that the data is captured and visible on the teacher dashboard or in SLS reports.

---

🎯 Final Thoughts

By following these steps, you’ve enabled your HTML interactive to communicate with the SLS backend via xAPI. This opens up powerful possibilities for tracking student learning, capturing custom feedback, and enhancing formative assessment.

In future posts, I’ll explore how to expand this integration with additional xAPI features, like progress tracking, deeper analytics, and interoperability across multiple platforms.

Let me know if you’d like help troubleshooting or refining your xAPI integration — happy to support fellow developers and educators!