Best place to put JavaScript functions for publishing

May 09, 2012

I'm new to Articulate and Storyline.  I have a few custom JavaScript functions that I use and would like to put them into one of the Storyline publishing templates so they're available every time I publish rather than having to copy/paste them into the JS editor in Storyline every time.  Is there a best practice or a particular JS template file I can use for placing customized JS functions? TIA!

16 Replies
Jim Leichliter

Thanks Phil!  That does help.  I was hoping for a way to add or alter a .js file publishing template so that I wouldn't have to make the change after every publish.  I'd like to automatically include these JS functions no matter what project I'm working on.  The below method requires you to alter the published output every time you publish:

If you'd like to include all your JavaScript functions in a separate JavaScript (.js) file, place your custom JavaScript file in the story_content folder of your published output, and add the following line of code to the story.html file (line 113).

Jonathan Rose

Hi, was there any update or progress on adding this as a feature? I would like to be able to add custom JS in the manner recommended by the JavaScript Best Practices page, without having to manually re-add the lines after every time I 'Publish'. 

The current (admittedly unsupported) method is also a bit dangerous if you are not paying attention, as Publishing your Story will vaporise any custom .js files you have added to the directory. If you don't have a backup elsewhere it could be a frustrating way to lose work.

 

Leslie McKerchie

Hi Jonathan and welcome to E-Learning Heroes. 😊

I do not have any update on this feature. You can see our upcoming plans here:

Articulate 360 Feature Roadmap

I wanted to share some information about how we manage these feature requests as that may be helpful. I also encourage you to share your idea and use-case directly with our team here.

Math Notermans

No need for adding it after publishing. Several options to set your Storyline files up so each time you get all code as needed...without worrying about it.

- Use a WebObjects to add it to your title. This way it is always available. However when you change anything in your scripts you have to remove and reinsert the Webobject. As i donot like that i figured out a alternative.

- Add the files/scripts to your Programme Folder for Storyline
C:\Program Files (x86)\Articulate\360\Storyline\player\unified
C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\scripts
You would need to change the html's added there too, so that on every publish you get your added files. Drawback in this is when you share Story's with coworkers..if they havenot set it up similar... they will miss the files and it wont work. And each time Articulate updates you need to redo it ;-) And offcourse this is not supported by Articulate..

Math Notermans

Your welcome...as extra tip... i use 'Symbolic Links' to redirect from the Programme Folder to a local folder. That allows me to easily and quickly add/change parts of the Javascript when needed. Drawback is that when Articulate updates you need to remove all symlinks before updating..else the update fails.

Mark Weingarten

I'm currently using jsPDF to make dynamic reports, and the current process requires me to edit the story.html file to to add the following lines of code:

  • <script src="js/jspdf.debug.js" type="application/javascript"></script>
  • <script src="js/createPDF.js" type="application/javascript"></script>
  • <script src="js/OpenSans-normal.js" type="module"></script>

Can I use the WebObjects method to load these scripts? If so, could you tell me what it would look like? Any help is appreciated.

Brent Williams

What I do to include scripts automatically is go to my master slide create an object out of frame and then give a trigger when user clicks to open the file in a new window.

This causes SL to grab that file regardless and add it to the /story_content/external_files folder.

Then I just use JS to append the scripts to the head of the html page on the master slide like so

const s = document.createElement(script);
s.src = story_content/external_files/[FILENAME].js
document.querySelector('head').appendChild(s);

If I have multiple files I will create an array with the files names and loop it instead to save writing redundant code.