Loading an external javascript library

Perhaps someone finds this useful.

I'm testing a simple mechanism to load a external Javascript file. To do so I add a "execute javascript" trigger to the slide on timeline start. I add the following code to this trigger:

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = 'story_content/library.js';
script.type = 'text/javascript';
head.appendChild(script)

In this example I've placed the javascript file in the story_content folder, but you could store it on another webserver as well.

I've used this mechanism to create password strength checker functionality for Storyline. 

10 Replies
Steve Flowers

Hi Niels - 

I use a similar setup. You'll want to make sure that it only loads once. Checking for the existence of the element and only loading it if it's not been created would do the trick. Otherwise, every time the trigger is run it'll add the new script element to your page.

I'll usually create a function for this to load multiple script files through the same interface. It's a little overkill as I'm not saving much but it was fun:)

function add_script(scriptURL,oID) {
var scriptEl = document.createElement("script");
var head=document.getElementsByTagName('head')[0];
scriptEl.type = "text/javascript";
scriptEl.src = scriptURL;
scriptEl.id=oID;
head.appendChild(scriptEl);}
//only want to add these once!
if(document.getElementById('jquery')==null){
add_script("https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js","jquery");
}

I add the JS files as "carry on" as a web object. This loads the files into the project so you don't have to do any post-publish surgery. 

Here's an example that loads in the SoundManager library to loop background music:
https://community.articulate.com/discussions/building-better-courses/looping-one-single-audio-track-throughout-all-slides#reply-31463

Aaron Munn

Hi all 
A bit late to the party but I'm currently looking to use externally hosted Javascript within a project. 
I noted that Niels is using as a password strength check - would this method allow passing of a variable to an external JS file, please?
Specifically, the students name as a variable from this? (https://community.articulate.com/discussions/articulate-storyline/retrieve-lms-user-name-as-variable)

Many thanks :)