How to add jQuery or anyother external Javascript Library to Storyline

As this question pops up every now and then...i created a post i can link too.

A few options to add jQuery to Storyline ( 3, 360... any version ) manually.
 You can add these lines to the html that runs your story...

<!--Added jQuery -->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--END addition -->

Depending on your usage that can be the index.html and/or index_lms.html in the Articulate folder on your computer in either or both the classic and unified folder.
If you choose this approach best to copy the lines of code from online jQuery repository..as you need the proper hash/sha code to ensure its ok. Do this at https://code.jquery.com/

This for sure is the easiest option, ensuring all projects you publish will have jQuery included. Whenever Articulate updates Storyline you have to redo this as the files will be replaced.

Another Approach
Second option is adding jQuery as a Webobject to a specific project.
Basically you add JQuery as a WebObject on a separate slide. Then you load the scripts needed on the first frame. The folder you load needs to have a index.html and all the external scripts you want to load.

As you see in the image below i have all scripts i use in separate folders. And a empty index file to make it loadable as WebObject.

The biggest drawback of using WebObjects is, that when you change anything in your folders, you need to delete the WebObject in Storyline and add it new...as Storyline copies the Webfolder structure internally...and changes wont work unless you actually remove and add it again. So its good practice to only add reusable libraries there.

On the first frame of my course i then load jQuery.

With this script...

var loadedCount = 0;
var amountOfLibs = 1;
var player = GetPlayer();

function loadJSfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
fileref.onload = function() {
loadedCount++;
console.log(loadedCount+" JS / "+filename+' loaded.');
if(loadedCount >= amountOfLibs){
player.SetVar("javascriptsLoaded", true);
}
};
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename);
fileref.onload = function() {
loadedCount++;
console.log(loadedCount+" CSS / "+filename+' loaded.');
if(loadedCount >= amountOfLibs){
player.SetVar("javascriptsLoaded", true);
}
};
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}

/*
When we change anything in the scriptFolder this needs to change
*/
var scriptFolder ="story_content/WebObjects/69PeU1oP5RP/";
/*
And lastly we call the functions we want to run
*/

loadJSfile(scriptFolder+"JQUERY/jquery-1.10.2.min.js", "js");

 

Notice i have a variable amountOfLibs set to 1, thus only loading jQuery. I often use more thirdparty libraries and thus change that to the amount of libraries wanted.

Do watch the line where i set the variable scriptFolder. You need to ensure on first publish this is correct.

I always have a variable called 'javascriptsLoaded' in my files. I set that to true when my libraries are loaded and from then on i can use anything in them.

So adding a trigger to watch that variable to change...
And then calling this:

$(".top-ui-bg").css("background-color", "#FFFFFF00");
$(".area-primary").css("background-color", "#FFFFFF00");
$(".cs-slide-container").css("background-color", "#FFFFFF00");

if (jQuery) {
// jQuery is loaded
console.log("Yeah! JQuery available");
player.SetVar("jQueryAvailable",True);
} else {
// jQuery is not loaded
console.log("Oh my it doesn't Work");
}

The if then check is not really needed, as i know jQuery is loaded at that point, but better be sure.

One thing that is missing in this method. On a resume you skip the first page and jump to another slide in the course and thus miss all initializations. You could add it to the Slide Master, but i dislike that, because that means you have it on every page. One of the reasons i did a feature request for a custom resume page. So you can ensure the proper needed extra libraries are loaded on the custom resume page.

Added a working sample.