Simple demo using this wrapper

[leandrocervant]

I'm trying to use this package, but I have some doubts. Do I need put scorm API in a iframe parent on html page yet? I've done some attempts with asp .net mvc and it is working as well.

View on asp .net mvc: `

`

I'm new with angular and I'm not understanding how I can setup my application to work with iframe. I didn't see any scorm example with angular.

Could you make just one example using the wrapper? I would be really grateful.

[DadUndead]

Hi, I know that it can be tricky so I created a simple demo implementation, so check it out -> ngx-scorm-wrapper-demo

To clearify the way it searches for the API, the library starts from its frame and goes through its parents to the top until it finds the API. The way to add API object varies from LMS to LMS but it should be available somewhere in the window context of the parents. I'm not sure if you are developing your own LMS, because this module is just for helping a course to communicate with LMS and that's all.

[FreakYGG]

Hi there @DadUndead ,

I am having a problem with the scormWrapper.doLMSInitialize()

I currently have a shared component that handles my scorm file, but how do you initialize the html file that is in the iframe?

It never finds the API even tho the document has it. Would you be able to add a demo scorm test file to your demo with the implementation on the app.component.html file by any chance?

Thank you in advance!

[DadUndead]

Hi @FreakYGG, Can you provide an example of your implementation? In ngx-scorm-demo app I showed how to build a simple 'course' which could be imported in an LMS. Please, check out the demo-fake-lms directory in ngx-scorm-wrapper-demo. It contains the example of implementation using iframe.

[FreakYGG]

Hi,

Okay so this is what i'm trying to do.

I am receiving SCORM files from different suppliers, then displaying them dynamically in a normal Angular 7 component using a iframe that is in a web application. I then would like to somehow track whatever the user is doing in the scorm file using Angular 7 and save the data where I see necessary.

What would be my steps to get this right?

So far I can view the scrom files dynamically but I just cant track them and get data back.

Thank you again!

[DadUndead]

@FreakYGG, As I see, your application has an LMS functionality while that wrapper is created to use inside a SCORM package. When you display scorm files in an iframe, they should search for an API object in its parents/openers. So you need to add you own scorm API implementation (for example _window.API_148411 object) in a parent/opener window context to let your SCORM packages find it. Again, this is out of scope of that lib.

[FreakYGG]

@DadUndead , Okay so all the SCORM files are being uploaded by different suppliers, would I need to add my own API to these courses? Then on my application use the lms.service you created to find the API?

Or would I need to ask the suppliers to add API's to their courses and have them add a callback function to hit a event on my iframe for example:

<iframe [src]="src" html-data-emitter (data)="eventReceived($event);">

[DadUndead]

@FreakYGG, Well, let's break this up into several steps: 1) You add your own implementation according to the standarts of SCORM API to window.API_1484_11 (if it is SCORM 2004) 2) You add an iframe which opens a scorm package from your supplier 3) An application inside an iframe will search for an API object and will find API_1484_11 in its parent 4) An application inside an iframe will call some methods from API object and your application should handle them

That is all, so if you don't need to search for an API object, you don't need this particular lib. However, if your suppliers use Angular and they need a simple module to help them to handle their interactions with SCORM, they may want use it.

Also, the way you will handle your own API object is on your own, you just need to implement all the standart functionality which is described in SCORM standarts.

[Lucian-CostinIon]

@DadUndead Privet Aleksei First thank you for developing this.

I am using Angular 9.1.5 and none of 'ngx-scorm-wrapper-demo' or 'demo-fake-lms' start. I tried to repair then, they start, but the ... is empty.

Can you please be so king and advise what to do to run it in current version of Angular ?

Thank you

[Wilkor]

@Lucian-CostinIon I am also trying, but I am not able to run this in my project that is in angular 8. Did you manage to use the scorm?

[Wilkor]

@DadUndead I tried to run your project on gitpod, but the error below was presented, can you support me?

`gitpod /workspace/ngx-scorm-wrapper-demo $ npm run fake-lms-demo

ngx-scorm-wrapper-demo@0.0.1 fake-lms-demo /workspace/ngx-scorm-wrapper-demo gulp fake-lms-demo

[19:30:54] Failed to load external module @babel/register [19:30:54] Requiring external module babel-register fs.js:36 } = primordials; ^

ReferenceError: primordials is not defined`

[SwatiAggarwal05]

Hi,

I am also getting 'primordials' error on running the sample. Could you share the solution? How you resolved it?