Now that we know how to embed a single PDF in Articulate Storyline from my first post, the next step is utilizing the same system in order to put multiple PDFs in the same course. In order to accomplish this challenge, first, we need to understand Storyline’s order of operations. Articulate Storyline executes its triggers based on a top to bottom order. This means that when looking at the trigger panel, whether the trigger’s target is an object or the timeline, if a trigger appears above another trigger, Storyline will execute that trigger before the triggers below. This is one of the most common troubleshooting issues, and even advanced Articulate Storyline users forget this tidbit. Heck, I do it from time to time. Now that we know how Storyline’s triggers execute, we can use this information to our advantage.
Let’s look at the task at hand and break it down into steps to show how to make it happen.
STEP 1: Create Trigger – Change the Storyline PDF variable to the PDF we would like to load.
This is as simple as adding our first trigger which we want to ensure is located at the top of the pages trigger panel.
STEP 2: Move our pdfViewer WebObject into an Articulate Storyline Layer.
We know we don’t want the pdfViewer WebObject to load until we are sure that the variable for the PDF has been determined. Which ultimately means, we don’t want to load our pdfViewer WebObject until our first trigger has fired. The way we can control this is by moving our WebObject into a layer, which will be controlled with a trigger.
STEP 3: Create Trigger – Show /Load the pdfViewer WebObject.
This trigger will simply show the “pdfViewer” WebObject Layer, which will ultimately upload whatever PDF you set in the StorylinePDF variable.
STEP 4: Rinse and Repeat.
Now that we have our template built. All we have to do now is copy and paste our slide for as many PDF files we have. Then, all we need to change is the name of the PDF (change the value for what StorylinePDF is being set to) we want to load for that slide.
Here is an example of the outcome:
Here are my final files for download
Note: This example uses HTML5 technologies, and, therefore, will not function within browsers that do not support HTML5 (i.e., Internet Explorer 8 and older).
Very Important Note: This requires a web-server to run properly. Either post the final output to SCORM Cloud, post to your web server, or use a locally hosted test server (i.e. IIS, Wamp, or Mamp)