How to Integrate SCORM Package in React Application with react-scorm-provider?

Question

I'm attempting to integrate a SCORM package into a React application using the react-scorm-provider library. My goal is to display a SCORM package in an iframe and then access SCORM data such as student name, status, and tracking information. However, I'm struggling to establish a connection with the SCORM API to retrieve this data.

Here is the structure of my code: Parent Component (App.js):

import React from "react";
import "./styles.css";
import ScormProvider from "react-scorm-provider";
 import Scorm from "components/Scorm";

export default function App() {
  return (
    <ScormProvider version="1.2" debug={true}>
      <div className="App">
        <h1>Quiz</h1>
        <hr />
        <Scorm />
      </div>
    </ScormProvider>
  );
}

Child Component (Scorm.jsx):

import React from "react";
import { withScorm } from "react-scorm-provider";

const Scorm = (props) => {
    return (
      <div>
        <iframe
          src="https://louuu03.github.io/Scorm_Example/story.html"
          height="600px"
          width="900px"
          title="Scorm Package URL"
        />
        <br />
        <button onClick={() => { console.log(props); }}>
          Click Me
        </button>
      </div>
    );
}

export default withScorm()(Scorm);

this is i am seeing in my browser' console:

Answer 1

The react-scorm-provider library provides the client-side SCORM API functionality. Like all SCORM courses, you are still required to launch the course within an LMS environment, which provides the server-side SCORM API. If you don't have an LMS, you can test your course in SCORM Cloud for free.