Web Objects and HTML5/Raphael

I was asked me to see if I could come up with a way to have an object that deforms as you drag its corners around in Storyline. I came up with a way to do it, with a Web Object containing an HTML5 file and a Javascript library called “Raphael” (in which I’ve worked before). 

Additionally, I wanted to find out if this Storyline SCORM package would contain these Web Object files as part of its file structure, when published. I really wanted to make sure that I wasn't stuck trying to bring in web objects outside the LMS domain, because I could just see that would be fraught with unnecessarily complicated issues.

Lucky me! Looks like it does. Here’s how I set up the authoring environment to do it.

Before publishing, I set up a local subfolder (to my Storyline file) called “Deformation”. Within this subfolder I placed the HTML5 file (“index.html”) and the Javascript library it uses to do the graphics work. I linked the web object in Storyline to this local “WebObjects” subfolder, then published the Storyline file. When it was done publishing, it created the whole package – including the “story_content/WebObjects” subfolder with the “index.html" and Javascript file inside.

I also opened up the published SCORM manifest, and the web object files were listed in the right place in this as well. They were linked under the main SCO, like all the rest of the resources.

So, given this, I realized that Storyline knows how to link local html files with relative paths, not just absolute paths. This is good, because we won’t have to worry about cross-domain issues while using external html for content. Storyline closely couples the files into its file structure, so any web objects we add will be part of the SCORM package.

They only thing I don’t know is what happens if you want more than one web object in a Storyline file. I suppose that you’d have to set up a separate subfolder, with another index.html file and any support files it needs, then publish. We’ll cross that path when we get to it.

And of course the one caveat to this whole happy scenario - our students will need to have modern browsers in order to view the HTML5 content. I suppose I aught to put in some sort of bypass file or test to see if the browser is modern enough for HTML5 canvas work. I think our spec makes this necessary, but I'll put in the code anyway just in case.