s4-netquest / react-scorm-provider Goto Github PK

I'm having a problem with navigating a multiple page SCO using React Scorm Provider.

Everything works fine on one page and I can set suspend data and status using React components there, all great.

I have several other pages defined in my manifests generated by Simple Scorm Packager and the links in the initial page and manifest match up.

However on clicking any links I get the SCORM.data.save failed: API connection is inactive even seconds after doing an API interaction in my components, and am redirected back to SCORM Cloud's dashboard.

I've dug into the issue and the error message seems to come from the packaged SCORM API wrapper based on the state of scorm.connection.isActive, logically enough.

I feel like I may be making some basic error in my understanding of how SCORM works or this is a bug of some kind?

Any insights into this would be greatly appreciated!

Hi,

I recently forked this repo to include Typescript typings and a fallback to localStorage if the module is not used in a LMS.
Are these features in the scope of this library and if so, do you want me to open a PR ?

Hi there,

First of all, really great wrapper that simplifies a lot of things so thank you for that.

My only issue is that I'm trying to wait for the SCORM API to be ready so I can fetch the data previously set in suspend data, any idea how to achieve this?

Thanks,
Arno

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.

Hey everyone,

I am a frontend developer for a LMS platform and I need to give the users the possibility to take courses provided from our stakeholders through our application. The problem is that this is completely new to me so I did some research and then I found this package which seems useful for me at the moment.

The problem is that I don't know how to start with it. I ran the example available in READ.me and I'm getting this error:

`SCORM.API.find: Error finding API. 
Find attempts: 0. 
Find attempt limit: 500
index.js:835 API.get failed: Can't find the API!
index.js:835 SCORM.connection.initialize failed: API is null.
ScormProvider.js:256 ScormProvider init error: could not create the SCORM API connection`

As I understand, maybe I'm wrong but I need to insert the API from where the Scorm Provider will get the courses. But the question is where and how?

I can use some help right now and I think a better documentation and some examples would solve this problem in the future.

Cheers,
Vlad

Since I had to write these anyway, I'm sharing TypeScript typings for this package in case somebody needs them. It would be also a neat base for potential TypeScript migration in the future.

declare module 'react-scorm-provider' {
  type ScormVersion = '1.2' | '2004';

  type SuspendData = Record<string, unknown>;

  type Status =
    | 'passed'
    | 'completed'
    | 'failed'
    | 'incomplete'
    | 'browsed'
    | 'not attempted'
    | 'unknown';

  type ScoreObj = {
    value: number;
    min: number;
    max: number;
    status: string;
  };

  export type ScoProp = {
    apiConnected: boolean;
    clearSuspendData: () => SuspendData;
    completionStatus: Status;
    get: (param: string) => unknown;
    getSuspendData: () => SuspendData;
    learnerName: string;
    scormVersion: ScormVersion;
    set: (param: string, val: any, deferSaveCall?: boolean) => void;
    setScore: (scoreObj: ScoreObj) => any[];
    setStatus: (status: Status, deferSaveCall?: boolean) => void;
    setSuspendData: (key: string | number, val: any) => SuspendData;
    suspendData: SuspendData;
  };

  const ScormProvider: React.ComponentType<{
    children?: React.ReactNode;
    version?: ScormVersion;
    debug?: boolean;
  }>;

  export const withScorm: () => <P extends object>(
    Component: React.ComponentType<P>,
  ) => React.ComponentType<Omit<P, 'sco'>>;

  export default ScormProvider;
}

Hello, i just installed the package and started the project, and i got this error. An idea of ​​where the error came from ?

Thank you

Hi, want to know if it is possible to access scorm inside if componentDidMount lifecycle method. Basically I am trying to retrieve the suspend data from the LMS and then call my action from componentDidMount so that I can filter the api data with the suspend data but it seems I can't access it from there as the connection becomes active only after it moves onto the render methods. Is there amy way to access scorm from the actions or componentDidMount? Thanks

Hi,
while I am installing this library, I faced this error from npm:

npm install react-scorm-provider           
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.4.2" from [email protected]
npm ERR! node_modules/react-scorm-provider
npm ERR!   react-scorm-provider@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Can you upgrade the library to React 18 please?

Documentation and demo site need improvement.