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

jQ1

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.

wen2

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.

12 Replies
Andrew McCaskey

I am attempting to use method 1, above, to add the fuse.js library. Hashing at srihas.org gives this code, which I am then adding to the index.html file just above the  </head> tag. 

When my script includes the line import Fuse from 'fuse.js' it will not run and console indicates Uncaught SyntaxError: Cannot use import statement outside a module.  Changing the line to const Fuse =require('fuse.js'); gives the same error.

Suggestions?

<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.5.3" integrity="sha384-TuaUWxocoApLRRbyrqbi39IZ5NEOZ6ukDXzbC/xiyzCe2wADliyXsO42shDI43rf" crossorigin="anonymous"></script>
Math Notermans

Hi Andrew,

Import a script might not work in Storyline as Storyline does not use 'Modules' ( that is a method of using external JS libraries ) in its internal code.

Basically said you either need to link to an online minified JS script or download the script and add it as resource in Storyline and use it like that.

Im gonna try and make a simple sample with Fuse.

Kind regards,
Math

Kyle Bracchi

Hi Math, appreciate the reply. There is a minijs script on that link i put up above so that seems like its on the right track.

I've tried adding the script manually using browser dev tools since I am previewing everything in Review 360. I am not getting errors any more but I am also not seeing the effect. I have it setup so that when a user clicks a button it changes a variable to true and when the variable is true, it executes the java script

var player = GetPlayer();
var cf = player.GetVar("confetti");
if (cf == "true")
{
"confetti()";
}

I put this script in after the <head> tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvas-confetti/1.5.1/confetti.min.js" integrity="sha512-jnHyUkgsWMgEENOHYzcnwB8BIs3CR9TbY0gKvnK/b0huYMV1u2HjUnbNTKxWwwKfwSBrfISUXafurOK1lqFrCA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Michael Carlino

Math,  this is great information.  I would love to see this as a story file.  I learn best by actual seeing how you did everything in the story. 

I am trying to create a colander  were the user can pick the date.  I have found a few JavaScript colanders that I think will work in my project but they have a css file also.  So trying to see how I can add that.  Also like a lot of others I have restrictions on what can be accessed on line and need everything to be self contained.