Modifying the Storyline Project's Output Folder

We need to publish the Storyline course before we can link it to the external JavaScript files (such as xapi-statement.js).

The custom statements will send from any type of content package, so it does not matter if we publish the course as an HTML5 package, SCORM package, or xAPI package. We're going to keep it simple and publish as HTML5.

From Storyline's "HOME" tab, select "Publish". After that, select "Web", then press "PUBLISH".

When the file is done publishing, select OPEN to open up the folder in your file explorer. Next, download the xAPI Wrapper's JavaScript file to this folder, as this is what let's us take advantage of the wrapper. You can download the .js file here, which is a direct link to the official download.

Save the xapiwrapper.min.js file to your Storyline Output folder, or move it there from your downloads folder once it's finished downloading.

Important note: Ensure that the xapiwrapper.min.js file is in your published Storyline Output folder before continuing.

With the xapiwrapper.js file taken care of, you need to add your xapi-statement.js file (the one that you've been working on throughout these tutorials) to the published output folder. I recommend keeping the original saved somewhere safe on your hard drive, as you will be able to use this template for many different Storyline projects.

Once both of these files are in the output folder, we need to tell the Storyline course how to access them. We can do this by right-clicking the "story.html" file (or "story_html5.html" file if you have an older version of Storyline) and opening it with your code editor of choice.

You'll see a lot of code, but we'll only be in this file for a minute. Copy the following two lines of code. They tell the file where to access additional JavaScript scripts.

{% c-block language="markdown" %}
<script type="text/javascript" src="xapiwrapper.min.js"></script>
<script type="text/javascript" src="xapi-statement.js"></script>
{% c-block-end %}

Important note: If you've changed the name of your xapi-statement.js file, ensure that you update it in the script tag that you copied above.

With both of the script tags copied, look back to the story.html (or story_html5.html) file. You can either scroll down or use Crtl + F to find the closing body tag (). Paste the script tags above the closing body tag.

With that done, save the file and feel free to close it. Our xAPI statements are ready to fire.