Alternate method of attaching javascript files - UPDATED

Frustrated by the inability of Articulate to SIMPLY allow one to attach some external scripts to a Storyline file I came up with a relatively simple method.

  1. Open the Player
  2. Add the required JavaScript OR CSS files to the course as RESOURCES
  3. THIS STEP HAS BEEN DELETED
  4. Add these scripts to the Slide Master to run when the timeline starts to:

    Hide the scripts added to the Resources Tab from view
    THIS STEP HAS BEEN ADDED ->
    for EACH script added you need to HIDE that script from the Resources Tab so the learner does not see the css OR js script as a clickable resource
    $("[aria-label = 'nameOfCSSorJSfile']").hide();

    It is IMPORTANT the you use the TITLE of the added resource as displayed in the resources properties as the 'nameOfCSSorJSfile' and that it be contained within single quotes.
    <- END OF ADDED STEP

    Attach the css OR scripts to the head of each page:

    var styles = ["story_content/external_files/nameOfCssFile.css", "story_content/external_files/nameOfCssFile"];

    for (index = 0; index < styles.length; ++index) {
    var style= document.createElement('link');
    style.href = styles[index];
    style.type = 'text/css';
    style.rel='stylesheet';
    style.crossorigin='anonymous';
    var done = false;
    style.onload = style.onreadystatechange = function() {
    if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
    done = true;
    }
    };
    document.getElementsByTagName("head")[0].appendChild(style);
    }


    var scripts = ["story_content/external_files/nameOfJavaScriptFile", "story_content/external_files/nameOfJavaScriptFile" ];

    for (index = 0; index < scripts.length; ++index) {
    var script = document.createElement('script');
    script.src = scripts[index];
    script.type='text/javascript';
    script.crossorigin='anonymous';
    var done = false;
    script.onload = script.onreadystatechange = function() {
    if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
    done = true;
    }
    };
    document.getElementsByTagName("head")[0].appendChild(script);
    }

  5. Call the required function on the page.

Basically ALL you are doing in adding the css or js files to a external_files folder Storyline automatically creates to house the resourced embedded files NORMALLY presented as a RESOURCE.
In this case you don't want the learner to SEE the CSS or JS resource so you use a function to simply hide it from view.

This way you can add whatever resource you want to the course, know the path ahead of time, and HIDE the added resource from view.

Hoping Articulate takes the hint and simply creates a similar process to allow the inclusion of external css and js files WITHOUT having to resort to this slick hack.

5 Replies
Peter Sorenson

so I'll rewrite it as vanilla JavaScript...the article really focused on the need for a batter way to attach external javascript files - i mean if the app can already autocreate and populate an external file folder then why not duplicate the process specifically for js files??

OWEN HOLT

You can also use a slide with an iframe to do something similar. Basically, on an orphaned slide (one for which the user cannot navigate to) insert a web page and point to a folder on your desktop for the web page source. Be sure the folder has an empty HTML document titled "index.html". Add any files or assets that you want to use in your course: .css, .js, .mp3, the whole jquery library...etc.
StoryLine will assume that any files in the same folder as your index.html file are required for the web page to display properly and will keep them with the SL published output. Now you just need to find the name of the folder SL assigns at publish for these assets.

Pros: No need to hide the side bar. The iframe hack is like packing a suitcase for all of your ad hoc assets. 

Cons: You need to publish once to get the name of the folder created and then go back and adjust your JavaScript to use the correct folder name and then republish. Also, if you change anything in any of the files you are attaching, you will need to delete the iframe and recreate it forcing you to once again, get the new name of the new folder and make the adjustments described above.

Michael Anderson

Owen, to refresh the web object and maintain the folder name, don't delete the web object, just change the folder location and then change it back to the original. This will update the web object contents but keep the folder name the same. I think I learned that one from Matthew Bibby. I would kill for a "refresh web object" option. :)