How to Capture xAPI Statements from H5P in Moodle

If you’re using Moodle with H5P activities and want to track learner interactions in an xAPI-compliant Learning Record Store (LRS), this little script will help capture those xAPI statements.

H5P already supports xAPI, but Moodle doesn’t automatically send these statements to an external LRS. In this guide, I’ll show you how to capture H5P xAPI statements and send them to your LRS using a simple JavaScript snippet.

Why Capture xAPI Statements from H5P?

H5P provides interactive learning experiences, but without tracking learner interactions at a granular level, you’re missing valuable insights. Capturing xAPI statements allows you to:

• Track learner engagement beyond completion statuses.
• Capture responses to interactive elements like quizzes, videos, and drag-and-drop activities.
• Store and analyze learning data outside of Moodle, helping with decentralized learning analytics.

Step-by-Step: Sending H5P xAPI Statements to an LRS

1. Add Custom JavaScript to Moodle

To capture and forward xAPI statements, add the following JavaScript code to Moodle. This script listens for xAPI statements and sends them to your LRS.

<script>
(function () {
    if (window.H5P) {
        H5P.externalDispatcher.on('xAPI', function (event) {
            console.log("Captured xAPI Statement: ", event.data.statement);
            
            // Define your LRS endpoint and credentials
            const LRS_ENDPOINT = "https://your-lrs-endpoint/data/xAPI";
            const LRS_USERNAME = "your-lrs-username";
            const LRS_PASSWORD = "your-lrs-password";

            // Convert xAPI statement to JSON
            const xapiStatement = event.data.statement;

            // Prepare the HTTP request
            fetch(LRS_ENDPOINT, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "Basic " + btoa(LRS_USERNAME + ":" + LRS_PASSWORD)
                },
                body: JSON.stringify(xapiStatement)
            })
            .then(response => {
                if (!response.ok) {
                    console.error("Failed to send xAPI statement:", response.statusText);
                } else {
                    console.log("xAPI statement successfully sent to LRS");
                }
            })
            .catch(error => console.error("Error sending xAPI statement:", error));
        });
    }
})();
</script>

2. Add the Script in Moodle

1. Go to Moodle Admin Panel
   • Navigate to Site administration > Appearance > Additional HTML.
2. Insert the Script
   • Paste the script inside the Within HEAD or Before BODY is closed section.
   • Make sure you include the opening and closing <script> tags
3. Update LRS Details
   • Replace https://your-lrs-endpoint/data/xAPI/ with your LRS URL. Don’t forget the training forward slash
   • Update LRS_USERNAME and LRS_PASSWORD with your credentials.
4. Save and Clear Cache
   • Save the changes and purge Moodle’s cache under Site administration > Development > Purge caches.

Testing the xAPI Capture

To check if the script is working:

1. Open an H5P activity in Moodle.
2. Complete an interaction.
3. Open the browser console (F12 > Console) and look for xAPI statements.
4. Verify that the statement is successfully sent to your LRS.

Final Thoughts

With this simple JavaScript snippet, you can unlock the full potential of H5P in Moodle and capture valuable learning data in your LRS. This approach gives you better visibility into learner interactions, helping with learning analytics and decentralized learning strategies.

Want more tips on xAPI and learning data? Check out xAPI.com.au for more insights and articles

This was written with the help of ChatGPT