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.