Saving Storyline Variables to a PDF

Aug 13, 2014

_ _
By _ _

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:

110 Replies
Ashley Terwilliger-Pollard
over 6 years ago08/08/17 at 12:38 pm (UTC)

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
over 6 years ago12/05/17 at 7:39 pm (UTC)

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
6 years ago02/27/18 at 11:00 pm (UTC)

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
6 years ago02/28/18 at 3:52 pm (UTC)

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!

Daryl Lynch
over 2 years ago10/11/21 at 8:56 pm (UTC)

I've been using jsPDF in storyline for well over a year now. On my most recent project I've run into an issue where ONLY Text variables seem to work now. Using either Number or True/False variables seems to prevent the jsPDF from running at all. Has anyone else run into this issue and found a solution? I've tried everything I can think of: a brand new project file, newly made variables, new variable names, and no improvement. If I replace it with a 'Text' type variable it'll work just fine. I have to use number variables in my project, because the activity I made does math with the numbers.

Edit: I believe I figured this out. In order to get a numeric/number variable to display in the PDF, it MUST be added to a text string or a text-based varaible. So in the example, it takes the userScore variable and adds '%' to the end. Other numbers I've used I've added '$' to the beginning of the variable. I've also added a text-based variable like doc.text(20, 20, numericVariable + textVariable) This is - in my testing - a necessary step. You can't just doc.text(20, 20, userScore) where userScore is a Number variable from storyline.

Sherri Sagers
1 year ago04/07/23 at 10:39 pm (UTC)

Hi Daryl - I found another way to deal with number variables. In lines 6-9, I import the number variables from Storyline and then in lines 22-25, I convert them to string variables. I also found, like you, that the unconverted number variables completely stopped the PDF print function. Nothing would happen at all when I clicked the print button - until I converted the number variables to strings. 

numbers fix

Sign In to Reply