Utilizing resources such as PDFs in online training can create a really bad user experience. Think about it, you are participating in your yearly compliance training, and you are asked to look at the PDF, you click the link. Wait, what just happened? Now you are being sent to another tab or a new window opens up depending on your browser. The first thing that crosses your mind is, "I better be able to get back to that training because if I have to start over again someones gonna pay..." Geez! Now you sound like an aggressive person, who gets enrolled in an anger management course (with more embedded PDFs!)
Well, I am happy to tell you that you can now allow your user to view PDFs without forcing them to leave your training. Oh, and they can seamlessly zoom in and out, along with printing and many other cool features!
5 Quick Steps to Embed a PDF Viewer in Articulate Storyline
Step 1 - Download, unzip, and open this file ( http://www.course-demo.elearningbrothers.com/blog/071714/pdfViewer.zip )
Step 2 - Copy the webObject into your training
Step 3 - Go into Player settings > Resources > add a PDF (make sure there are no spaces in the name)
Step 4 - Create a storyline variable called "storylinePDF"
Step 5 - Set the value of this variable to the exact name of the PDF (i.e., TrainingDoc.pdf)
Here is What I Did
I used a free JavaScript PDF viewing engine developed by Mozilla called PDF.js ( http://mozilla.github.io/pdf.js/ ). I modified the PDF URL to point to a Storyline variable that contains the name of the PDF. Then I pointed the source of the PDF viewer to the file location where Storyline put its PDFs when published.
Note: This example uses HTML5 technologies, and, therefore, will not function within browsers that do not support HTML5 (i.e., Internet Explorer 8 and below).
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).
Update 4/6/2016: Here is a link to our modified PDF.js files as well.
Read the my second part of how to embed a PDF Viewer with multiple PDFs in Storyline:
------------------------------------------------------------------------------------------------------------
Another helpful eLearning tip is to use Articulate Storyline Templates to save precious development time.
