How to Add xAPI for both score and feedback to Your EJS Interactive by kangRui

How to Add xAPI to Your EJS Interactive

In this guide, I’ll walk you through how to add xAPI tracking to your EJS (Easy Java Simulations) interactive so that you can send user activity data directly to the SLS platform. This allows you to record learning analytics like scores and user interactions. Let’s get started!

webejs_model_xAPI_kangRui/
webejs_model_xAPI_kangRui.zip

Step 1: Upload the xAPI Wrapper File

Create a folder named lib within your EJS project directory. This is where you’ll store the xapiminwrapper.js file, which is the JavaScript wrapper that enables communication between your simulation and xAPI endpoints.

To do this:

Go to the Files tab in your EJS simulation editor.
Create a new folder called lib.
Upload the xapiminwrapper.js file into this folder.

Step 2: Add the Wrapper to Run Options

Now that you’ve uploaded the xAPI wrapper file, you need to include it in the simulation’s runtime.

Go to the Simulation Options panel.
Under the Run Options section, look for User Files.
Add the path to lib/xapiminwrapper.js.

This ensures that the wrapper loads when the simulation runs.

Step 3: Create an xAPI Function Page

Next, create a new function page that will handle your xAPI statements.

Go to the Custom tab in EJS.
Add a new function page and name it xApi.
Paste in the required xAPI-related JavaScript code that includes functions such as sendState().

// Namespace to avoid polluting the global scope
const XAPIUtils = {
  parameters: null, // Store fetched parameters

  // Retrieve parameters passed from SLS via URL
  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');

      // Configure the xAPI wrapper with endpoint and auth token
      ADL.XAPIWrapper.changeConfig({
        endpoint: endpoint + "/",
        auth: `Basic ${auth}`
      });

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

    return this.parameters;
  }
};

// Auto-fetch parameters on page load
document.addEventListener("DOMContentLoaded", function () {
  XAPIUtils.getParameters();
});

/**
 * Send state data to the LRS (Learning Record Store)
 * @param {Object} stateValue - The object containing score and feedback (HTML string)
 */
function storeState(stateValue) {
  try {
    const { agent, stateId, activityId } = XAPIUtils.getParameters();

    // Submit state data using ADL xAPI wrapper
    ADL.XAPIWrapper.sendState(activityId, agent, stateId, null, stateValue);

    console.log("Submitted to LRS:", JSON.stringify(stateValue, null, 2));
  } catch (err) {
    console.error("An error has occurred while sending state!", err);
  }
}

/**
 * Retrieve previously stored state data (for testing/debugging)
 * You can call this function to check what was stored for the current session
 */
function getState() {
  try {
    const { agent, stateId, activityId } = XAPIUtils.getParameters();

    const result = ADL.XAPIWrapper.getState(activityId, agent, stateId);

    // Display the result on the page (if applicable)
    document.querySelector("#getState").innerText = 
      "First Load State: " + JSON.stringify(result, null, 2);

    return result;
  } catch (err) {
    console.error("An error has occurred while retrieving state!", err);
    document.querySelector("#getState").innerText = "Error: " + err;
  }
}

🧠 Tip: This page acts as your communication bridge between the simulation’s internal events and the external xAPI calls.

Step 4: Send xAPI Statements with `sendState()`

To push activity data to the SLS platform, you’ll use the sendState() function. This function accepts an object with two key parameters:

score: A number indicating the score the student achieved for a particular task.
feedback: A string of HTML content that provides a detailed breakdown of the student’s activity.

Here’s an example of how to use it:

This flexible feedback field lets you format the message however you want using HTML tags—perfect for detailed, visual, and student-friendly feedback.

Step 5: Upload and Test on SLS

Once your xAPI integration is complete:

Download the interactive
Upload it to the Student Learning Space (SLS).
Test the interactive in Student View to confirm if scores and feedback are sent and displayed correctly in the learning analytics section.

Make sure to trigger actions within your interactive that call sendState() so the system registers them.

Final Thoughts

Adding xAPI support to your EJS interactives is a great way to track learning, personalize feedback, and generate meaningful analytics. It does take some setup, but once configured, it opens up a powerful layer of insight into student behavior and performance.

https://weelookang.blogspot.com/2025/07/how-to-add-xapi-to-ejs-interactives.html

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)