Reusing xAPI Components for Score and Feedback Transmission in HTML5 Simulations after 19 March for SLS HTML5 interactive response question

Reusing xAPI Components for Score and Feedback Transmission in HTML5 Simulations

This guide provides a step-by-step approach to integrating xAPI functionality into existing HTML5 simulations for sending score and feedback to an LRS (Learning Record Store), often within an LMS (Learning Management System). We'll focus on reusability and provide clear instructions for modifying your existing projects.

Files Provided:

• index.js: Contains the JavaScript logic for interacting with the xAPIWrapper library. This file is designed to be reusable across different HTML5 simulations.

• xapiwrapper.min.js: The xAPIWrapper library itself.

Steps to Integrate xAPI into Your Simulation:

1. Include Necessary Files:

   • Add both index.js and xapiwrapper.min.js to your simulation's directory.

   • In your simulation's index.html file, include these scripts:

         <script src="xapiwrapper.min.js"></script>
   <script src="index.js" defer></script>
       

2. Identify Key Elements in index.html:

   • Score Element: Locate the HTML element where the user's score is displayed or stored. This could be an input field (<input type="number" id="score">), a <span>, or a div. Note the ID or a unique selector for this element.

   • Feedback Element: Similarly, find the element for displaying or storing user feedback (e.g., <textarea id="feedback">, <input type="text" id="feedback">).

3. Modify index.js to Extract Score and Feedback:

   • Create helper functions in index.js to retrieve the score and feedback values from the elements you identified in the previous step:

         function getScore() {
       return parseFloat(document.getElementById("score").value); // Replace "score" with your element's ID
   }
   
   function getFeedback() {
       return document.getElementById("feedback").value; // Replace "feedback" with your element's ID
   }
       

   
   

4. Implement sendScore() and sendFeedback() in index.js:

         function sendScore() {
       const score = getScore();
       const params = XAPIUtils.getParameters();
        
       // You might need to adjust the verb and object properties based on your specific needs
       const statement = {
           actor: params.agent,
           verb: {
               id: "http://adlnet.gov/expapi/verbs/scored"
           }, // Replace with an appropriate verb
           object: {
               id: params.activityId, // Replace with the ID of the object being scored
               definition:{
                name: {
                    "en-US": 'Game Simulation Score'
                }
               }
           }
       };
   
   
       if (typeof score === 'number' ) {
            statement.result = {
                score: {
                    raw: score,
                    min: 0, // Replace with the minimum possible score
                    max: 100 // Replace with the maximum possible score
                }
            }
       }
   
       ADL.XAPIWrapper.sendStatement(statement, function(resp, obj){
            console.log("[" + obj.id + "]: " + resp.status + " - " + resp.statusText);
            document.querySelector("#result").innerText = "Submitted Score: " + JSON.stringify(statement, null, 2);
       });
   }
   
   
   function sendFeedback() {
       const feedback = getFeedback();
       const params = XAPIUtils.getParameters();
   
       const statement = {
            actor: params.agent,
            verb: {
                id: "http://adlnet.gov/expapi/verbs/commented"
            }, // Replace with an appropriate verb
            object: {
                id: params.activityId, // Replace with the ID of the object being scored
               definition:{
                name: {
                    "en-US": 'Game Simulation Feedback'
                }
               }
           },
           result:{
            response: feedback
           }
       };
   
        ADL.XAPIWrapper.sendStatement(statement, function(resp, obj){
            console.log("[" + obj.id + "]: " + resp.status + " - " + resp.statusText);
            document.querySelector("#result").innerText = "Submitted Feedback: " + JSON.stringify(statement, null, 2);
       });
   }
   
   
   function sendScoreAndFeedback(){
        const score = getScore();
        const feedback = getFeedback();
        const params = XAPIUtils.getParameters();
   
        // You might need to adjust the verb and object properties based on your specific needs
        const statement = {
            actor: params.agent,
            verb: {
                id: "http://adlnet.gov/expapi/verbs/completed"
            }, // Replace with an appropriate verb
            object: {
                id: params.activityId, // Replace with the ID of the object being scored
               definition:{
                name: {
                    "en-US": 'Game Simulation'
                }
               }
           }
        };
    
    
        if (typeof score === 'number' ) {
             statement.result = {
                 score: {
                     raw: score,
                     min: 0, // Replace with the minimum possible score
                     max: 100 // Replace with the maximum possible score
                 },
                 response: feedback
             }
        }else{
            statement.result = {
                response: feedback
            }
        }
    
        ADL.XAPIWrapper.sendStatement(statement, function(resp, obj){
             console.log("[" + obj.id + "]: " + resp.status + " - " + resp.statusText);
             document.querySelector("#result").innerText = "Submitted Score and Feedback: " + JSON.stringify(statement, null, 2);
        });
   }
       

   
   

5. Trigger sendScore() and sendFeedback():

   • Determine when you want to send the data (e.g., on a button click, at the end of the simulation). Add event listeners or modify your existing code to call these functions at the appropriate times. For example, using a button:

           <button onclick="sendScoreAndFeedback()">Submit Score and Feedback</button>
         

     
     

           <button onclick="sendScore()">Submit Score</button> 
     <button onclick="sendFeedback()">Submit Feedback</button>
         

     
     

Instructions for AI Assistance:

When asking an AI to modify your index.html to include this functionality, provide these prompts:

1. "Add input fields with IDs 'score' and 'feedback' for capturing user score and feedback respectively." (or provide the selector of the existing input fields).

2. "Include buttons that, when clicked, trigger JavaScript functions named sendScoreAndFeedback(), sendScore() and sendFeedback()." This tells the AI to add the necessary button elements with onclick handlers. Make sure that you explain to the AI that sendScoreAndFeedback() is a function to send both score and feedback to LRS, sendScore() is for sending score only, and sendFeedback() is for sending feedback only.

3. "Ensure that the included JavaScript file index.js contains the function XAPIUtils.getParameters() that retrieves xAPI parameters such as endpoint, auth, actor, activityId, and stateId from URL parameters or from a configuration file. It should also include functions getScore(), getFeedback(), sendScoreAndFeedback(), sendScore() and sendFeedback() that interact with the xapiwrapper.min.js library to send xAPI statements for score and feedback." This ensures the AI understands the expected functionality within your index.js file. You might need to provide more detail on how to extract actor, activityId from your index.html. For example, "actor email can be found in the span with id userEmail", "activityId can be found in the meta tag with name activityId"

Important Note: Replace placeholder IDs and values (like "score", "feedback", 0, 100) with the actual IDs and values from your simulation. Ensure your LMS is configured to receive xAPI statements and that you have the correct endpoint and credentials. Test thoroughly after integrating these changes. You will also need to replace the verb with the appropriate verb ID based on your reporting needs. Refer to the ADL xAPI Verb Registry for a comprehensive list of available verbs.

Implementing xAPI for Feedback and Score Transmission to an LMS

This post details how to implement xAPI to send feedback and scores from an HTML5 interactive exercise to a Learning Management System (LMS) or Learning Record Store (LRS). We'll use a practical example with code snippets demonstrating how to capture user interactions, format the data according to xAPI specifications, and transmit it using the xapiwrapper.min.js library.

Understanding the Scenario:

Imagine an HTML5 interactive quiz or exercise embedded within an LMS. The goal is to capture:

User Score: Numerical score representing the user's performance.

User Feedback: Textual feedback provided to the user, potentially including hints, explanations, or personalized comments.

Rubric Criteria (Optional): Detailed scoring based on specific criteria, each with its own score and feedback. This adds granularity to the assessment data.

1. Setting up the Environment:

Include xAPI Wrapper: Add the xapiwrapper.min.js library to your HTML file. This library simplifies the process of constructing and sending xAPI statements. You'll also need an accompanying JavaScript file (e.g., index.js) to handle the logic.

<script src="xapiwrapper.min.js">

</script> <script src="index.js" defer></script>



LMS Configuration: Your LMS must be configured to receive and interpret xAPI statements. Obtain the necessary endpoint (LRS URL) and authentication credentials (typically a username and password or a key). These are often passed as URL parameters to your HTML5 interactive.

2. Capturing User Interactions:

Use HTML forms to capture user input:

Score Input: A number input field (<input type="number">) for the overall score.
Feedback Input: A text area (<textarea>) or text input field (<input type="text">) for feedback.
Rubric Criteria: Dynamically generated groups of inputs (dropdown for criteria selection, number input for score, text input for feedback) allowing for multiple criteria. Use JavaScript to add or remove criteria groups.

3. Constructing the xAPI Statement:

Within index.js, use ADL.XAPIWrapper.sendState() or ADL.XAPIWrapper.sendStatement() to send data to the LRS. Here's how to structure the statement for different scenarios:

Scenario 1: Sending Score Only:
ADL.XAPIWrapper.sendState(activityId, agent, stateId, registration, { score: scoreValue });

Scenario 2: Sending Score with Feedback:
ADL.XAPIWrapper.sendState(activityId, agent, stateId, registration, { score: scoreValue, feedback: feedbackText });

Scenario 3: Sending Score with Rubric:
const rubric = { "criteria-1": { score: 3, feedback: "Good analysis" }, "criteria-2": { score: 2, feedback: "Needs improvement" } // ... more criteria }; ADL.XAPIWrapper.sendState(activityId, agent, stateId, registration, { score: scoreValue, rubric: rubric // Include the rubric object });


4. Essential Considerations:

: Uniquely identifies the learning activity within the LMS.
: Identifies the learner (usually an email or a unique ID).
: A unique identifier for the specific state being tracked (e.g., "quiz-results"). This ensures you can update the state instead of creating new entries for each attempt.
: (Optional) A unique ID to associate multiple statements within a single interaction.
Error Handling: Implement robust error handling using try...catch blocks to manage potential issues during statement sending.
Data Sanitization: Ensure all user-provided data is sanitized before being included in the xAPI statement to prevent security vulnerabilities.


Data Persistence: Use ADL.XAPIWrapper.getState() to retrieve previously stored states, allowing you to pre-fill the form with existing data if the user has already started the activity. This provides a seamless experience for learners.

Example index.js Snippet (Sending State):
function storeState(stateValue) { try { const params = XAPIUtils.getParameters(); ADL.XAPIWrapper.sendState(params.activityId, params.agent, params.stateId, null, stateValue); console.log("State sent successfully:", stateValue); } catch (err) { console.error("Error sending state:", err); } }



Conclusion:

By following these steps, you can effectively use xAPI to capture valuable interaction data from your HTML5 interactives and send it to your LMS. This allows for more detailed tracking of learner progress, providing insights into performance and areas for improvement. Remember to consult the xAPI specification for a comprehensive understanding of available options and best practices.