Loading an external javascript library

May 07, 2015

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.

7 Replies

Jackson Hamner

almost 9 years ago05/07/15 at 9:47 pm (UTC)

Very cool Niels! I will definitely be trying this out soon :)

Steve Flowers

almost 9 years ago05/08/15 at 12:17 am (UTC)

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

Niels van Drimmelen
Author

almost 9 years ago05/08/15 at 7:47 am (UTC)

Thanks Steve for the additions... I was thinking on creating a mechanism to unload code after use, so the code would only be available on the slide. Have to find an easy and maintainable way to do that.

Christie Pollick

over 8 years ago10/08/15 at 5:07 pm (UTC)

Hi, Matthew -- In case you don't hear back from Steve and he is no longer subscribed to this thread, you are welcome to reach out directly via his profile page. :)

Christie Pollick

over 8 years ago10/09/15 at 1:27 pm (UTC)

Sounds great, Matthew. :)

Aaron Munn

over 7 years ago09/19/16 at 8:07 pm (UTC)

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 :)

over 7 years ago09/20/16 at 1:44 am (UTC)

Hi Aaron! This thread is a bit older so I'm not sure if everyone is still subscribed. You can also reach out to Niels directly via the 'Contact Me' feature in his profile.

Loading an external javascript library

7 Replies

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