The Content was unable to locate the SCORM API Adapter

Question

I'm new to SCORM and facing an issue with SCORM initalization.

The error that I face is The Content was unable to locate the SCORM API Adapter. What I'm trying to do is, I am creating an iframe

<iframe id="demo_page_iframes" src="index.html" width="100%" height="100%"></iframe> This is my parent iframe where I'm calling my index.html file which is in my scorm package. Its correctly loading my index.html but in the network tab, I cannot see any manifest.xml being included or loaded and a popup shown with the mentioned error above.

I am using a wrapper pipwerks https://github.com/pipwerks/scorm-api-wrapper and have included its SCORM_API_wrapper.js.

After looking at the SCORM_API_Wrapper.js, I see there are comments that says to define the version and API object I have kept it as it is as I was assuming the wrapper would automatically take the data from the index.html and add it here. Correct me if I'm wrong or do I need to make any changes here.

var pipwerks = {}; //pipwerks 'namespace' helps ensure no conflicts with possible other "SCORM" variables
    pipwerks.UTILS = {}; //For holding UTILS functions
    pipwerks.debug = { isActive: true }; //Enable (true) or disable (false) for debug mode

    pipwerks.SCORM = { //Define the SCORM object
        version: null, //Store SCORM version.
        handleCompletionStatus: true, //Whether or not the wrapper should automatically handle the initial completion status
        handleExitMode: true, //Whether or not the wrapper should automatically handle the exit mode
        API: {
            handle: null,
            isFound: false
        }, //Create API child object
        connection: { isActive: false }, //Create connection child object
        data: {
            completionStatus: null,
            exitStatus: null
        }, //Create data child object
        debug: {} //     debug child object
    };

Also the issue I'm facing is only when I'm trying to start the lesson. What I think the issue is either I'm not loading my manifest.xml, which I do not know how to include in the pipwerks wrapper file(or its already doing that) or I need to define the config in the pipwerks wrapper js file. Because I used the scorm package on an angular with a wrapper ngx wrapper and it worked fine and loaded manifest.xml file correctly that has my specs. However, When I start a course on PHP side and load my iframe and that using index.html, add my content in my parent iframe, it fails on intialization.

Added pipwerks wrapper.js and expected the manifest.xml to atomatically load and the config as well based on index.html and manifest

Answer 1

EDIT: After reading the Scorm docs, I understood the problem. Let me break down the steps.

1: Before initializing, your current window OR parent window OR opener window(depending on how the it shows the content) should have the API object based on the scorm version.

2: A standard scorm package contains an XML file(both versions).

3: You need to parse the XML and it should have two important things.

a: SCORM Version: Which should be in schemaversion tag I believe.

b: Path to the index file or the first file that needs to be loaded. This should be in resources->resource-> href tag.

4: Once you got these things, now you based on the version you need to prepare your API object.

5: If version is 1.2, the scorm will be looking for API object, incase of 2004, its API_1484_11.

6: This object should have implementation for the functions based on version required like Initialize(2004) LMSInitialize(1.2), SetValue(2004) LMSSetValue(1.2) etc and similarly what CMI models are required. You can check it from here: https://scorm.com/scorm-explained/technical-scorm/run-time/run-time-reference/#section-2

7: Assign this object to your current window OR parent window.

Finally, you need to load the HTML that we got in 3b and either load it in a new window or inside an iframe.

The HTML usually has an onLoad function that calls the initialize function and then looks for the API object you have defined. Once found,initialization is successfull.

Now as you navigate around the content, the LMS can communicate via your implemented functions(SetValue,GetValue) and you can add tracking or whatever you want.

NOTE: Pipwerks wrapper is an implementation for both these versions that find these objects and initiate the communication.You need to implement the functions and assign the Object to the window yourself(which I assumed was already done and therefore got stuck).