Web Objects and HTML5/Raphael

Nov 02, 2015

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.


4 Replies
Mark Ramsey

I'm not certain how to directly access the Web Object. I don't believe there is any way to access it through what passes for the DOM of Storyline. If objects within the Frame were ID'd and accessible, you could use something like "GetPlayer.objectID...". 


If the Web Object was a PHP file, you might be able to send out encoded JavaScript URL strings with parameters, have the page process the parameters, then have the parameters work as input to Rapheal JavaScript functions. You could probably do the same with a standard HTML page with key/value pairs on the parameter line. A standard page would probably insist upon re-drawing itself (the onload function in the body would probably be the only way it could act on the parameters), whereas the PHP page probably wouldn't. But then, you'd have to deploy your app in a PHP environment.


This discussion is closed. You can start a new discussion or contact Articulate Support.