HTML5 + xAPI: Tracking Student Interactions in SLS for 21CC Analytics

link

The Student Learning Space (SLS) is increasingly moving towards leveraging learning analytics to understand and enhance 21st Century Competencies (21CC). One powerful way to achieve this is by integrating HTML5 interactives with xAPI (Experience API) to record and analyze student attempts within class group assignments. Below is a roadmap for developing such a solution and harnessing the data to generate meaningful descriptors of students’ 21CC levels.

Step 1: Understand the Role of xAPI

https://www.learning.moe.edu.sg/teacher-user-guide/author/html5-content-development/

xAPI (also called Tin Can API) is a modern learning technology standard that records learning experiences as “statements” in the form of “Actor – Verb – Object” (e.g., “John completed the drag-and-drop challenge”). These statements are sent to a Learning Record Store (LRS) in SLS for tracking as teacher's comment in the interactive response question type.

Why xAPI for SLS?

• SLS class groups support embedding HTML5 "scorable" xAPI content.

• xAPI enables granular tracking of student actions stored as teacher's comments, not just final scores.

  

• It allows data aggregation for competency-based descriptors.

Step 2: Build the HTML5 Interactive

Create an HTML5 simulation or quiz using JavaScript and CSS. The HTML5 file should:

1. Capture key student interactions (e.g., clicks, drag actions, time spent).

2. Store attempt data, such as scores, number of retries, and hints used.

3. Send Final Score and Feedback of these actions to the SLS-LRS via xAPI calls.

For example, when a student completes a puzzle, your JavaScript might send:

Step 3: Integrate xAPI with SLS

When embedding the HTML5 in an SLS class assignment:

• Ensure the HTML5 file can retrieve user identifiers (e.g., SLS username).

• Configure xAPI statements to include SLS-specific actor information.

• Point the xAPI statements to a trusted LRS endpoint in SLS that your system can query.

Step 4: Harness the Data

Using a class group assignment , find the teacher's comments provided by the HTML5 that stored and pass these student's interaction to SLS.

https://vle.learning.moe.edu.sg/class-group/assignment/monitor/6344cb89-f225-4cbb-8b12-c72c70181da9/module/c57ab077-dc4f-4dfa-9f4d-c0ee2488e7b9/section/91751210/activity/91751212/component/489916003/question/866ab393-36b7-4066-927a-94170ecb2e8d/aggregate-attempt?question=Q1&anchor=714378 

Once xAPI statements flow into the SLS-LRS, you can aggregate copy the data out to ChatGPT https://chatgpt.com/share/688af137-8ab0-8008-8a1a-6f56dbf79627  to provide 21CC descriptors and it's analysis shown.

• Critical Thinking: YES, Strings of action taken to get solutions to problems, time and actions taken to refine answers. Sample data look like this

• 1. Critical, Adaptive and Inventive Thinking

  Evidence:

  • The student displayed persistence and iteration — 33 attempts, with increasing accuracy over time (from repeated failed attempts to a total of 13 successful completions).

  • Attempts like #2 to #7 show repeated trials of the same incorrect combination (2, 3, 8, 9, 13, 18), suggesting initial lack of critical evaluation, but eventually, they adapted by trying different combinations.

  • Later attempts include strategic variations (e.g., #8, #9, #14, #15, #19, #21), demonstrating improved spatial reasoning and reflective thinking.

• Collaboration: Currently, I think is Not possible in SLS, need other ways like video recording of class interactions. Number of peer-interactions, attempts made in group tasks. Sample data look like this

• 2. Communication, Collaboration and Information Skills

  Evidence:

  • The log suggests an individual task, with no direct evidence of peer collaboration.

  • However, the student's use of information from feedback (e.g., which nets succeed or fail) and adjustment of strategies shows information processing and interpretation.

• Civic, Global and Cross-Cultural Literacy: Currently No a focus, but maybe possibly need a suitable HTML5 with this tasks. Sample data look like this

• 3. Civic, Global and Cross-Cultural Literacy

  Evidence:

  • The task focuses on spatial reasoning with minimal cultural context.

  • However, the student's resilience and engagement with a structured task may reflect values like responsibility, discipline, and respect for learning.

Step 5: Visualize in LLM and paste Report back into SLS

teachers can see: https://chatgpt.com/share/688af137-8ab0-8008-8a1a-6f56dbf79627 

https://chatgpt.com/share/688af137-8ab0-8008-8a1a-6f56dbf79627

• Marks awarded in HTML5 at heatmaps through SLS native monitoring page (e.g., completed, red, pink orange and green).

  

• Individual performance trajectories, provides by external LLM, SLS data assistant is currently no able to injest teacher's comments, SLS only injest students responses.

  
  
  

• Class-level 21CC summaries, such as “80% of the class displayed high perseverance.” need to use external LLM to analyse.

  https://chatgpt.com/c/688ad9d4-8bfc-832c-9411-1725af1ef7a0

  
   

Step 6: Translate Data into Action

The descriptors can inform:

• Feedback to students (“You are showing strong resilience by persisting across three difficult tasks”).

• Group-level analytics for teachers.

• Long-term curriculum planning (e.g., focusing on digital collaboration if students show gaps).

Conclusion

By combining HTML5 interactivity, xAPI tracking, and thoughtful analytics, educators can transform SLS assignments into rich data sources that go beyond scores. This data-driven approach allows teachers to observe, measure, and support 21CC competencies in ways that are both meaningful and actionable.