Adding Pipwerks Scorm Wrapper to Animate cc Html5 canvas.

[Dudy Cemed]

Hi.

Could anyone assist me on how to add Pipwerks scorm wrapper to html5 canvas?

 

Previously, I used to work on AS3, it works perfectly with completion and bookmarking.

And now, I need to re-Develop the all courses using html5 canvas on Animate CC.

It’s Interactive Multimedia Project.

 

I’ve tried this method:

 

https://pipwerks.com/2008/05/08/adding-scorm-code-to-an-html-file/

 

It runs okay on scorm-cloud but having issue with completion.

I have no idea how/where to put completion code in other frame?

What about the bookmarking?

 

Thanks.

Dudy.

[Philip Hutchison]

Hi Dudy

I haven't tried inserting SCORM code into an Animate CC project, though I'm certain it's possible. If you post a link to an example project, we may be able to take a look.

Thanks

- philip

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/elearning-technology-and-development/f404cb86-e6a2-4bae-8dd0-94569e2735e7o%40googlegroups.com.

[Dudy Cemed]

Hi Philips,
Thanks for your reply.

I've attached the project file. It took me a while to clean up the project it was huge course initially.

Anyway, there is the .fla file (html5 format), all the structure is completely the same with as3, the different is only on the syntax.
The structure are;
- There are 5 frames; Home, p1, p2, p3 and p4.
- There should be bookmark on each p1 - p4.
- The completion code should be on p4.

When you publish the course (.fla file) it will give you Html file and JavaScript file.

And on the Html (Index) file, I've added your code (Pipwerks Scorm wrapper).
Next, I registered those file into manifest file, and uploaded to Scorm Cloud, it's up and running perfectly (but completion is not working).

Here is the issue;
I have tried many methods to put bookmarking and completion status inside the project (.fla), and also tried inside html file,
And none of them is working.

Could you please assist me?

Regards,
Dudy.

[Dudy Cemed]

Sorry, why I couldn't upload zip file?

[Dudy Cemed]

Link to the project

[Philip Hutchison]

Hi Dudy

I don't use Animate CC, so I'm afraid I won't be able to dig into your FLA file. 

The simple answer is: You need to find Adobe's event handlers and insert your SCORM calls into these handlers.

https://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html#Events

Or possibly go old-school (if Animate still supports it) and insert SCORM calls into the timeline of your project via custom functions:

https://community.adobe.com/t5/animate/timeline-complete-event/td-p/9012492?page=1

Wherever you're allowed to insert a function, you can insert a reference to the SCORM wrapper and invoke a get/set call. You'd probably need to find a way to reference it globally, such as:

(in parent HTML file)

window.scorm_wrapper = pipwerks.SCORM;

Then in the animate timeline somewhere: 

function myCustomTimelineFunction(){

   window.scorm_wrapper.set("cmi.core.lesson_status", "completed");

} 

If it were me, I'd use Animate to create animations that are embedded within the course (much like you'd insert a YouTube video), but I would not use Animate to build the entire course. Remember that you must keep the SCORM API connection active, so it has to be initialized in the parent HTML file, and kept active there until the learner exits the course. If they navigate away from the page that owns the SCORM initialization, the connection will be closed. This is why SCORM courses tend to be framesets, with the connection being maintained in the parent frame. 

Good luck 

- philip

On Mon, Aug 17, 2020 at 6:19 AM Dudy Cemed <dudy....@gmail.com> wrote:

Link to the project

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/elearning-technology-and-development/618e7248-65be-476c-9623-28ea4dbc5c5bn%40googlegroups.com.

[Philip Hutchison]

Does Animate still use ActionScript? If yes, my example of window.scorm_wrapper would not work unless invoked via ExternalInterface.

[Dudy Cemed]

Hi Philip.

Thanks for the reply. 

I will try the method you've mentioned.

Animate CC still have as3 option, which of course will publish to Swf file. For closed network I'm still using as3 because its powerful.

And there is Html5 Canvas option. That's why I need to re-develop the whole my previous courses, so people from other side of the world can access it with hassle free.

Swf file, for people like us is easy to configure, but sometimes for other people, they don't how to get flash player. 

Forget to mention, mostly my project is Aircraft CBT, that's why I'm still using flash/animate cc because of functionality and complexity of the project. 

Cheers,

Dudy. 

To view this discussion on the web visit https://groups.google.com/d/msgid/elearning-technology-and-development/CAOpTBLiOs_GDfxzEDvhi8Hnc0_bGPbM4c1yCwtKLQompeZfO6g%40mail.gmail.com.