«

»

Jul
11
2013

Articulate Storyline for HTML5/JavaScript Developers

Articulate Storyline for Javascript DevelopersThis is the continuation of my previous post on Behind the Scenes – Decoding Articulate Storyline

I am curious to cover little more advanced topics here for the benefit HTML5/javascript developers specifically.

Storyline with jQuery

In the past I have noticed developers tried to use the jQuery library into storyline courses in many ways possible including web objects. But the entire library cannot be included into one slide due to javascript characters limitations built into storyline triggers.

So if you are one looking to build jQuery custom functionalities inside storyline courses then here is the good news – the jQuery library is already included as part of storyline HTML5 output on the root level.

So you are free to use any of the jQuery functionalities directly through javascript triggers window.

For example, having a piece of jQuery code on a trigger window like shown below will perfectly work like a magic:

 

jQuery code within Storyline Trigger Window

jQuery code within Storyline Trigger Window

So you don’t need to worry about including jQuery library into your project. Just go ahead and start adding your jQuery code directly into required places.

Adding large Javascript Class/Library into Storyline

Storyline has got the characters limitation for adding javascript code into trigger window. You can add JS code in compiled/compressed state about 32,500 characters into a single trigger window. So that’s about 32kb of script. What if you want to include large JS libraries into your project?

There are 2 options:

1) You can manually include your javascript library into index html file’s <head> tag. But this would require modification to published output everytime

2) Other option is to split your javascript class/library into smaller pieces of about 30k characters in size (in compressed format), or less (about 15-18kb) with spaces/line breaks (production format).

Once you split your large JS code library into smaller chunks, you can add multiple javascript triggers and add chunks of code into each and create a combined class/functionality.

Let’s me explain this concept with small example,

Including large Javascript library into storyline with multiple triggers

In this example, I have added 4 lines of JS code divided into multiple javascript triggers in top to down order. Note that each chunk of code will execute when the timeline starts in the top to down order so in turn will create a combined functionality or define a class.

Refer the code added to each trigger below,

 

Dividing large javascript code into small junks into storyline

Dividing large javascript code into small junks into storyline

 

You will have to understand how these JS codes added into output files. The custom JS codes added through triggers will go into user.js file (inside story_content folder) like shown below,

 

How trigger codes exported into user.js file in storyline

How trigger codes exported into user.js file

 

So as the timeline starts, Script1() to Script5() functions will be called in sequence and the code inside them will be executed, so you will get a combined functionality.

However you will have to take account of variable/functions scoping here. You have to modify your library so the chunks of code accessible to the functions in sequence to build a combined class or functionality. So you would be required to use the global functions and variables into your code to make sure they are accessible to each other.

However once you understand this concept you can plan your code structure in a way you can only expose minimal number of functions and variables to global scope.

Alternatively, you can store your code chunks into string variables and at the end combine them into one string and pass on to javascript eval() function to build a combine class/functionality.

But I have noticed this method (with eval) creates issues with quote (‘ or “) symbols which are generally unavoidable in javascript.

 

As a final note, why should you spend so much effort in breaking up your code and pack it inside storyline? Well, there are some obvious advantages:

  • It is one time effort, so every time you publish the course you don’t have to worry about including the javascript library to the output manually
  • You can freely distribute your .story source file to anyone even for non-technical audience instead of expecting them to include the JS library to the output manually (typical case – when you handover the source files to your client after building a course)

So the idea is develop it one time and be done with it permanently.

I hope this post was informative and would help HTML5/Javascript or even Server Side developers to extend the storyline’s potential to its boundaries.

I am planning to cover more topics about javascript variables and storyline API functions (even though it is not yet officially released) in the coming days. If you are interested to be notified please use the new posts subscription option available on the right side menu.

 

6 comments

  1. Jeff says:

    Great Article!

  2. Stefano Todaro says:

    hello,
    I studied all storyline and I miss only the use of javscript.
    I saw the page dedicated community
    (http://www.articulate.com/support/storyline/javascript-best-practices-and-examples)
    but, while knowing how to use a bit of javascript in out of Articulate Storyline can not get over no examples.
    I’m looking for examples of texts or able to understand in a “serious” how to integrate javascript programming in Storyline.
    Can you kindly help me?
    thanks

    1. electron says:

      The articulate.com community is the best resource exist out there but there isn’t one place focused for JS examples as far as i know. I would say try to narrow down to what you want and search for it in the community.

      I have some storyline posts for developers as well like the post on this page, but very task specific for example –
      How to Control Storyline Navigation and Variables from Flash
      How to hide the Articulate Storyline HTML5 launch page on iOS/iPad
      How to increase the Menu font size for Articulate Storyline courses
      Behind the Scenes ??? Decoding Articulate Storyline Output

      I am planning to write some JS specific posts in future as well covering APIs and other aspects when i get time

      By the way, I think the JS example explained in this page is for serious JS developers only!

  3. Jan says:

    Hi,
    it seems a lot easier to include the whole library once. See the explanation here: http://de.articulate.com/support/storyline/javascript-best-practices-and-examples
    Cheers,
    Jan

  4. Jon says:

    You should be able to do this all in one slide’s “Execute Javascript” trigger with something like below:


    function loadJavaScript() {
    var loadScript = function(url) {
    var s=document.documentElement.appendChild(document.createElement('script'));
    s.type="text/javascript";
    s.src=url;
    s=null;
    };
    var i=0,l=arguments.length; do{ loadScript(arguments[i++]); }while(0<--l);
    };

    loadJavaScript("http://link.to/script1.js");

    …OR if you have several libraries/files that need to be loaded:


    loadJavaScript("http://link.to/script1.js","http://link.to/scriptname2.js","http://link.to/scriptname3.js");

    1. electron says:

      Wow that is a smart trick! Thanks for taking time to share this Jon. I am sure it will help others!

Leave a Reply to Jeff Cancel reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>