How work with this?

[markstuck]

Hello!

I have SCORM Package in scorm_project/index_scorm.html

I do next:

const Learner = (props) => {
  console.log(props.sco);

  return (
    <div>
      <p>Welcome, {props.sco.learnerName}!</p>
      <p>Welcome, {props.sco.scormVersion}!</p>
      <p>Your course status is currently: {props.sco.completionStatus}</p>
      <p>Click the button below to complete the course!</p>
      <button onClick={() => props.sco.setStatus('completed')}>Mark me complete!</button>

      <button onClick={() => {
        window.open("scorm_project/index_scorm.html", "", "&w=400&h=400");
      }}>
        Click
      </button>
    </div>
  )
}

const ScoLearner = withScorm()(Learner);

const App = () => {
  return (
    <>
    <ScormProvider version="2004" debug={process.env.NODE_ENV !== 'production'}>
      <h1>We've got a connection just by including ScormProvider!</h1>
      <p>I'm a child with no access to the ScormProvider's props. But the ScoLearner component is enhanced with withScorm()!</p>
      <ScoLearner />
    </ScormProvider>
    </>
  );
};

I get

SCORM.API.find: SCORM version 2004 was specified by user, but API_1484_11 cannot be found.
index.js:883 SCORM.API.find: Error finding API. 
Find attempts: 0. 
Find attempt limit: 500

When i click on button i get error from my package Unable to acquire LMS API.

What i need do to working with this?

Thanks.

[JayV30]

Hi my friend! I think you are misunderstanding the purpose of this project. (This may be my fault for naming the package 'scorm-provider') I apologize for the confusion.

This package does not provide a SCORM API. Typically the LMS provides the API, and your project / SCORM package needs a way to communicate to that API. This project simply allows easier communication to a SCORM API from a React.js project. The intention is that the React project would be the course and/or LMS tracked content. You'd use react-scorm-provider in the React project, build it, and then package it for an LMS.

It is not intended for use as a course launcher, and does not provide the API, merely a connection to it within the React project - it would not expose the API to an opened child window. Please let me know if this does not answer your question.

[markstuck]

Thank for your information!

But do I understand correctly, I can assign API_1484_11 myself. Something like this:

window.API_1484_11 = (function(){
        var data = {
          "cmi.learner_id": "1",
          "cmi.learner_name": "Student, Joe",
          "cmi.lesson_location": "",
          "cmi.completion_status": "not attempted",
          "cmi.suspend_data": ""
        };
        return {
          Initialize: function() {
            console.log('[Event] Initialize');
            return "true";
          },
         ...other events will be here
       }
})();

I can put this in my React Component and link to my backend?

Thanks!

[JayV30]

You can create a mocked SCORM API like that for testing and development purposes. Ensure it is removed before packaging for the LMS, as the LMS should provide this API. Again, I don't know that the API would be available to spawned child windows. Here's the mock I use for testing (expand as needed):

window.API = (function(){
      var data = {
        "cmi.core.student_id": "000100",
        "cmi.core.student_name": "Student, Joe",
        "cmi.core.lesson_location": "",
        "cmi.core.lesson_status": "not attempted",
        "cmi.suspend_data": ""
      };
      return {
        LMSInitialize: function() {
          return "true";
        },
        LMSCommit: function() {
          return "true";
        },
        LMSFinish: function() {
          return "true";
        },
        LMSGetValue: function(model) {
          return data[model] || "";
        },
        LMSSetValue: function(model, value) {
          data[model] = value;
          return "true";
        },
        LMSGetLastError: function() {
          return "0";
        },
        LMSGetErrorString: function(errorCode) {
          return "No error";
        },
        LMSGetDiagnostic: function(errorCode) {
          return "No error";
        }
      };
    })();

I typically use react-scorm-provider for minimal LMS communication (get/set suspendData and completion status), which is why it is pretty bare at the moment. It's a fairly simple HOC, so please fork and customize as necessary for your needs.

Are you getting the error after packaging and deploying to an LMS, or during development? During development would make sense, as you'd need to include a mocked API. It should work on the LMS (I've tested many packages on SCORM Cloud without issue) - I have many courses built with React utilizing this component in production, however all have been SCORM 1.2.

[markstuck]

Thank for your information!

I testing with that code (im customize for 2004):

window.API_1484_11 = (function(){
        var data = {
          "cmi.learner_id": "1",
          "cmi.learner_name": "Student, Joe",
          "cmi.lesson_location": "",
          "cmi.completion_status": "not attempted",
          "cmi.suspend_data": ""
        };
        return {
          Initialize: function() {
            console.log('[Event] Initialize');
            return "true";
          },
         ...other events will be here
       }
})();

And shes work fine!

With methods like Terminate i can communicate with my backend via Ajax? So i need write that code in my components? Am I right?

Thanks!

[markstuck]

I understand :>

Thx for that package!