Adapt Learning Community: External Content in Adapt

Hi all.

We're discussing how we might implement microlearning using Adapt. Since it is microlearning, we feel that having multiple methods of accessing the course might be best. One possibility is to have the content on a page in Sharepoint (interactive infographics, videos, etc) but also have an Adapt course that includes all the content as well, which is accessible on our LMS.

One idea I'm playing with is building interactive infographics using Edge Animate and then loading them to the sharepoint site. Would I be able to embed that in our Adapt course, and if so, how? Edge Animate publishes an HTML file structure.

My second question is about housing the Adapt course off of the LMS. I believe this is possible, is it not?

Thanks! Let me know if you need more specifics on what we hope to do.

Hi Arend

You could use one of the community iframe plugins to display the Edge Animate content. We have used ours in a similar way to display HTML5 animations exported from Adobe Flash inside Adapt.

Yes you don't have to put Adapt content on an LMS. If the course will never be used on an LMS, uninstall the adapt-contrib-spoor plugin. If you want to be able to choose, leave it installed and simply deactivate SCORM tracking when not required.

Show parent | Reply

Thanks again, Matt! I'll mention these options to my team.

Show parent | Reply

Hi again Matt,

We're trying to test how we might host an Adapt course off of the LMS, but can't seem to get it working. I've gone to config.json and changed Spoor "is_enabled": to false and then run grunt build, but the index.html file doesn't seem to load any content when launched. Running grunt server does launch the course on my machine, but I can't seem to give my coworker a working build directory.

Can you think of something I might be doing wrong here?

Thanks,

Arend

Show parent | Reply

No, if the course works from grunt server then the build should be fine. All that does is create a node-based webserver and serve the course on it!

When you or your colleagues are running index.html - are they doing so by just double-clicking it i.e. 'running it locally' (the browser will have file:// in the address bar)

If so, try instead putting the course on a web server then running it.

Local security restrictions will generally prevent a course from working if you just double-click index.html on your local file system.

How much is prevented from working varies from browser to browser - and what settings you have applied to the browser. Chrome won't load Adapt at all for me like this, Firefox will after a short delay (but will log a few errors in the console); IE9 doesn't work either even though I've checked 'Allow active content to run in files on my computer'.

Web content should always be run from a web server. If you run it locally it either won't work at all or it will fail in some strange way.

If you do ever need a course to run locally - say you want to put it on a CD-ROM - you'd have to package it up as an executable file using something like NW.js - which is generally quite a pain to do.

Show parent | Reply

Ah, that makes sense. Thanks!

Show parent | Reply

Hi Arend,

We have been working on the very thing you have described. We are developing elearning courses using Edge Animate (EA) and the adapt framework. The responsive iframe in v1.0 was causing us some issues, so I took the blank component and created a new component I called webObject. You can find it here: https://github.com/ndeighan/adapt-webObject
This component will allow you to link to any html output that EA creates. You can link several EA compositions together inside this single webObject component and pass variables between them, and when you get to the end of the EA composition you should add this line of code on an action - parent.triggerVar=1;

This will set completion on this instance of the component and fire Trickle.

{
"_id":"c-05",
"_parentId":"b-05",
"_type":"component",
"_component":"webObject",
"_classes":"",
"_layout":"full",
"title":"Insert a Web Object",
"displayTitle":"",
"body":"",
"instruction":"",
  "_webObject": {
    "type": "text/html",
    "data": "course/en/embed/filename.html",
    "width": "100%",
    "height": "600px"
}
},

Hope this helps,

NiallD

TCCS logo

Show parent | Reply

Hi Niall,

Fantastic! It's nice to see someone had the same thought. Where are you hosting the Edge Animate output, if I may ask?

Right now we don't seem to have anywhere internally to host that stuff (and it's proprietary content), so we may have to scrap the idea.

Thanks,

Arend

Show parent | Reply

I would include the Edge Animate content in your course if you can, that's what we did - just added a folder within src/course/en/

If you host it externally then implementing communication between the content and Adapt (or vice-versa) could get more difficult due to cross-domain scripting restrictions. You can use window.postMessage to get around the cross-domain restrictions, but if you can just include the content in the course you don't have to bother setting that up....

Show parent | Reply

Thanks Matt! That helped put the puzzle pieces in place for me.

Show parent | Reply

I agree with Matt, if you store the Edge Animate output in "course/en/embed/Edge-Output/index.html" like in the example.json, then you don't have to worry about any cross domain problems. Once you build the src files then all of you EA content will be included in the final build, ready to upload to the LMS.

Show parent | Reply

Hi Niall,

Matt pointed out what I missed in your post, that you're embedding the EA output in the course files. This works great! Thanks for helping me make this work this so easily!

Arend

Show parent | Reply

Hi NaillD,

My team and I are using the Adapt authoring tool and are having some trouble getting the webObject component to work. We have downloaded the files from github and have uploaded it as a new plugin. The next step that we are struggling with is how to get the EA composition to link and show. Currently it's just showing the component with the blue background. Could you please provide a step-by-step guide on how to best implement this component?

Show parent | Reply

Hi Megan,

Apologies for the late reply, I've been on vacation since mid-december. We have not tested the webObject component with the Adapt authoring tool, only in the classic Framework. However, if you're seeing the blue background this could suggest that the authoring tool is seeing the component, it may just be a problem with the link to the EA content.

On the component, note the line:

"data": "course/en/embed/filename.html",

did you make sure you have your EA files in the corresponding location

Niall

Show parent | Reply