How to add jQuery or anyother external Javascript Library to Storyline

Oct 15, 2021

Math Notermans
By Math Notermans

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.

25 Replies
Andrew McCaskey
over 2 years ago01/18/22 at 8:08 pm (UTC)

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
over 2 years ago01/19/22 at 5:11 am (UTC)

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
over 1 year ago08/10/22 at 12:36 am (UTC)

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
over 1 year ago08/22/22 at 1:49 pm (UTC)

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.

Michael Carlino
over 1 year ago01/03/23 at 8:38 pm (UTC)

So I have run into a new problem that I hope someone may help with.  Still new to coding and using javascript and Jquery i have run into a problem running this in blackboard learn.  It looks like blackboard learn uses  uses prototype.js.  In doing my research I have found you have to use jQuery.noConflict(0  but so confused on where I need to put it in the javascript.  Any help would be appreciated.  FYSA I am using a custom Jquery ui theme

Math Notermans
over 1 year ago01/04/23 at 8:58 am (UTC)

As jQuery is not used default in Storyline, there should not be any conflict, so the jQuery.noConflict() method aint needed. As Blackboard is the LMS, there shouldnot be any need for it. Do share your project ( deleting any confidential info ) and we can doublecheck. I cannot test on Blackboard but we use CanvasLMS so it should work similar.

Andy Corbin
2 months ago03/04/24 at 5:23 am (UTC)

Hi Math and everyone else up there. 

I'm attempting to place a live webcam that has a button to capture a snapshot of the learner. I've tried using your second option above to access this nifty JavaScript module from Benson Ruan but am having trouble activating it within Storyline. So far, I've managed to activate the JS file as a Webobject as you've described but I'm not having much fun getting it to run.

I did originally try tinkering with this code from Paul Kizilos in this now closed discussion from a few years back but had no luck.

Many thanks in advance for any pointers for how this can be done. 

Sign In to Reply