How do I initialize SCORM 12 when installing via NPM?

[kyle-jennings]

in my Vue app, I would import the package like:

import scormAgain from 'scorm-again';

but how would I use this, like how do I get from importing the package to:

window.API = new Scorm12API(settings);

[aleciavogel]

I successfully implemented scorm-again in an Electron project, so take this advice with a grain of salt. I might get some things wrong with the Vue implementation (I did some Googling to obtain some basic guidance).

You'll need to either add a script tag to your public/index.html file (this will load the script on every page of app) or use a plugin like vue-plugin-load-script to dynamically load the script (I found a Stack Overflow answer that explains how to use the plugin here).

The script you'll need to link in the script tag is scorm-again/dist/scorm12.min.js. I ended up copying the file into a new lib folder in my project and referencing the path like ./lib/scorm12.min.js in the script tag.

On the page where you want your SCORM course to run, add an iframe with the src attribute pointed to the launch page of the course (it'll be a path like my-course/shared/launchpage.html).

Refer to the inline javascript in this file from the demo site for an example of how they initiated the SCORM wrapper.

Either you'll have to use the then() callback of the vue-plugin-load-script to initiate the wrapper after the script loads (not sure if this will work) or you may need to create a new HTML page in the /public folder with the iframe and scorm-again initialization code. Then load this new html page in an iframe from a Vue component.

Hope this points you in the right direction!

[RivnatZille]

Hey, sorry for resurrecting this post, but have you had any luck using it with Vue?

[benzkji]

I was able to use scorm-again in a vue3 and vite based application, simply by import "scorm-again". It's not a beauty, because it will define the various API classes on the window object. But it works. In my code I then use it this way (after having insert the iframe with the scorm launcher):

    // 1.2 example
    window.API = new Scorm12API({
      "logLevel": 1,  // 1 = DEBUG
    });

And watch the console filling up with debug messages.

[jcputney]

Yeah, unfortunately the SCORM spec expects the API object to either be found on the current window, parent window, or opener window, so it always needs to be placed in the global scope somewhere down the line.

[benzkji]

Adding this info (for newbies like me) to the docs would be nice. As well as mentioning how to use in a ES6 context...would you accept a PR?

[jcputney]

@benzkji PRs are always welcome!

[benzkji]

PR: #685 :)

[akshar-bk]

Hi, I want to make a scorm runtime so that i can play course. I have installed the library using npm install scorm-again But how do I import Scorm12API(settings) window.API = new Scorm12API(settings); This is giving error.

[benzkji]

@aksharBitkraft you would just

import "scorm-again";

this should be enough to have the Scorm12API imported, ready to be used as you tried:

 window.API = new Scorm12API(settings);

[akshar-bk]

@benzkji Got it. Thanks

[benzkji]

glad it works. always a struggle, how to import things correctly in JS...

[akshar-bk]

@benzkji Yep, I was importing like name and default export. Background Knowledge : So I am building a android app using ionic and react. I want to play Scorm content inside my app. So I have an iframe and inside src attribute I am passing the course path. But I am getting below error error : error initializing communication with lms.

In app.tsx I have imported scorm-again and initialize the window.API = new Scorm12API(settings); So how should I proceed further. @jcputney

[benzkji]

@aksharBitkraft hop you got it working. Support in github issues is diffucult.
@jcputney I guess this issue could be closed, my PR could help in a more direct way (getting there without searching in issues...).

[akshar-bk]

Yes @benzkji Thanks!

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.