Saving Storyline Variables to a PDF

I was asked about an example I created for saving variables from Storyline into a PDF file for download. Rather than fill the ELHChallenge thread with the information I decided to write up a thread on what I did. If you have any questions feel free to reach out.

The course executes JavaScript from within a Storyline (trigger) with the use of a client-side JavaScript PDF generator, jsPDF. This will not work locally, however, I have had successes with it functioning in IE11 without being hosted. It is easiest to design the PDF prior to inputting this into the course as you cannot preview. Thankfully, the jsPDF package contains an editor with their examples to design in.

Script & Demo Files for jsPDF:

Parallax: http://parall.ax/products/jspdf (contains an editor as well)

or via

GitHub: https://github.com/MrRio/jsPDF

1. Add Variables(score)/Text Entry fields

2. Add Trigger to execute JavaScript when user clicks (for downloading the PDF)

3. Retrieve the Player Variables within the .js field of the trigger and attach jsPDF settings per desired result look and feel.

**Notice an additional variable is created to transitioning the Storyline variable for the "Notes" in order to use ".splitTextToSize" for text wrapping within the PDF file. By default text wrapping does not occur.

4. Publish the course and add the applicable JavaScript files needed for your package (I placed mine within the "story_content" directory)

5. Add script files to the HTML <head></head>(story.html)

6. The result: Articulate Storyline Variables pushed to a downloadable PDF.

Storyline:

PDF Output:

Live Version:

https://googledrive.com/host/0B9kY09mQf_iqV3dTQ0Q4cUFvTlU/

Source & Published Files:

109 Replies
Ashley Terwilliger

Hi Eric,

Have you checked that you're publishing locally and not using the same name as a previously published file? If you used the same name and file path that would cause the file to be over written.

As for zipping the content you'll see an option on the publish successful window to "Zip" and that's what you can use to create the package to upload to your LMS.

If you have specific questions about the custom steps shared here,  you could always use the "contact me" button on a ELH users' profile to reach out to them directly!

Best of luck with your project! 

Evan Scheidegger

It's interesting to see this thread brought to life multiple times since the OP started it :-).  I think that speaks to how useful it is.

I tried the project out and got it to work fine.  However, I would like to add some functionality and I'm not sure how to go about it, or if it's possible.

I'd like to be able to add data to a pdf after it's been created.  Could I have a page later on with another text field and submit button that would add that additional data to the pdf?  What about adding data from a completely different storyline file?

Has anyone tried anything like this?

Thank you!

Snorre Rubin

Hi every one


I am trying to use jsPDF to let the user export the content of 3 text variables. But I keep running in to the same problems. 

I have downloaded and added the js-libraries to the relevant places in story_html5.html.

I have also tried using an online SRC instead

I keep getting one of these errors:  actionator::exeJavaScript - Cannot read property 'defaultView' of undefined  or  actionator::exeJavaScript - options.font.widthOfString is not a function  when I try to run the script.

The first error I get when I use https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js  instead of the various plugins, or if I use both jspdf.js (or jspdf.debug.js) , split_text_to_size.js and standard_font_metrics.

The latter error I get when I just use  jspdf.js and split_text_to_size.js.

Here is a link to the online version: http://elearning.hosp.dk/0Afproevning/casef/test/story_html5.html?lms=1

And I have attached both the story-file (SL3) and the story_html5.html-file. 

Does anyone have any idea what might be causing this?

Mathew Araujo

Hi Snorre, 

Happy to help out if you need! Can't say I've seen that error before, and I've used jspdf in Storyline projects quite a bit, so I'm not entirely sure. Is the file downloading blank at least? Or is it simply not doing anything and throwing you that error? 

At first I thought maybe it's because you weren't calling the libraries in the HTML5 file, but it looks like they are. However I noticed you don't have FileSaver.js in your source libraries, and if you do it's not being called in your index file. Are you able to attach the full .zip project? The .html file won't work without all the assets locally. 

I also took a look at your user.js file and I just wanted to clarify, is the intention to just print the four variables you are grabbing from storyline with an image? If so, I can share some code that might simplify it a bit! 

Sorry for the million questions, just getting some clarification so I can help!