How to interact with the SCORM API from the React application

This guide explains how to communicate and interact with the SCORM API from the React application developed using the RESCORM boilerplate. This guide does not explain SCORM. If you are interested in learning SCORM, you have the official documentation of SCORM 1.2 available here and the official documentation of SCORM 2004 available here.

Once the application is loaded by the web browser, it will try to find a JavaScript SCORM API provided by the environment (typically a Learning Management System like Moodle). The search can have three possible results: a SCORM 2004 API is found, a SCORM 1.2 API is found, or no API is found. If an API is found, the connection will be automatically established.

Although is not necessary, since the application handles all possible failures related to the SCORM connection, it's possible for a React component to check whether the application is connected to SCORM as follows:

import * as SCORM_WRAPPER from '../vendors/SCORM_API_Wrapper.js';

[...]

if(SCORM_WRAPPER.isConnected()){
 //The app is connected to a SCORM-compliant environment.
} else {
 //The app is not connected.
}

From the React application, we can send the following data to the SCORM-compliant environment through the SCORM API:

• progress_measure: It is a measure of the progress the learner has made towards completing the application. This parameter can take a value from 0 to 1. If the progress_measure is higher or equal than the completion_threshold defined in the configuration file, the completion status reported by SCORM will be "completed". If the progress_measure is lower than the completion_threshold but higher than the completion_attempt_threshold defined in the configuration file, the completion status will be "incomplete". Otherwise, the completion status will be "not attempted".
• score: it is the learner score or grade for the application. This parameter can take a value from 0 to 1. If the score is higher or equal than the score_threshold defined in the configuration file, the success status reported by SCORM will be "passed". Otherwise, the success status will be "failed".

In order to report a progress_measure or a score through the SCORM API, the React application must use objectives. An objective represents an activity or a milestone of the application whose accomplishment will cause a progress_measure and/or score to be reported. Objectives are created using the "Objective" constructor provided by the "/vendors/Utils.js" file, and have the following fields:

Filed Name	Description
id	Unique identifier.
accomplished	False if the objective has been accomplished, true otherwise.
progress_measure	The progress_measure that this objective represents in the whole application. It should be a value from 0 to 1.
score	The score that this objective represents in the whole application. It should be a value from 0 to 1.
accomplished_score	The score achieved when the objective was accomplished. It should be a value higher than 0 but lower than score.