Storyline 360 and Storyline 3: How to Reference the jQuery Library

We’re always on the lookout for new security concerns and ways to counteract them. Since jQuery has the potential to be exploited and Storyline no longer uses it, we removed jQuery from Storyline 360 (January 21, 2020) and Storyline 3 (June 16, 2020). If you’re comfortable with jQuery, you can still use it to write custom JavaScript triggers. You just need to reference the jQuery library directly. Here are three options.

• Reference jQuery in Your Published Output
• Download jQuery and Add It to Your Published Output
• Reference jQuery in Each JavaScript Trigger Before You Publish

Reference jQuery in Your Published Output

This is the easiest method and the one we recommend. First, use jQuery in your custom JavaScript triggers and publish your course.

Then, add the following line of code before the closing </head> tag in the story.html file in your published output. If necessary, change the jQuery version number from 3.4.1 to the version you want to use.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Note: If you republish your course, you’ll need to add the code to your published output again.

Download jQuery and Add It to Your Published Output

If your learners are behind a firewall that blocks access to googleapis.com in the method above, use this option instead.

1. Use jQuery in your custom JavaScript triggers, and then publish your course.
2. Download the compressed jQuery library to your computer and change its filename to jquery.min.js.
3. Place the jQuery file in the story_content folder of your published output.
4. Add the following line of code before the closing </head> tag in the story.html file in your published output.

   <script src="/story_content/jquery.min.js"></script>

Note: If you republish your course, you’ll need to repeat steps 3 and 4.

Reference jQuery in Each JavaScript Trigger Before You Publish

This option is more complex, but you don’t need to repeat it every time you publish your course. Use the code below for each JavaScript trigger that relies on the jQuery library. Make these edits to the code:

• Required: Add your custom JavaScript between the first set of curly brackets {} where indicated.
• Optional: Change the jQuery version number in the source URL if you want to use a different version of the library.
• Optional: Change myCode to any variable name you’d like. Be sure to replace all references to myCode with your chosen variable name.

var myCode = function() {
	// Add your custom code with `$` or `jQuery` here.
}
if (window.$ != null) { // If jQuery has already loaded, run myCode.

	myCode();

} else { // Else, load jQuery and then run myCode.

	var jQueryLoader = document.createElement("script");

	jQueryLoader.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";

	jQueryLoader.onload = function() {

		jQueryLoader.onload = null;

		myCode();

	}

	document.head.appendChild(jQueryLoader);

}