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
Kristen Bjork

This is really great, but I can't for the life of me get it to work. I *think* that I followed all of the steps -- I added the JavaScript files to the story_content folder and added the script files to the HTML of the story.html file. However, nothing happens when I hit the button in the Storyline. Does anyone have any thoughts about what I might have missed? Thanks!

Rory Flynn

Hi there, we added this function to our Storyline 2 course with a very customised output PDF with multiple variable fields so it is possible. We outsourced the development of this function to a fantastic developer. Because its such a dark art I can't tell you how its done but I will contact him and ask if he can contribute to this thread.

Jedidiah Esposito

So I was running into trouble with this until, on a whim, I decided to reference jquery and a few other libraries for the heck of it (in addition to the jsPDF and FileSaver pieces) mentioned in the post. I'm happy to report it works now! I'm not sure why this worked, exactly, but here are the script tags I added. When I have some time I'll see if I can isolate which references are making it happen and which aren't. In the meantime... IT WORKS!

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script SRC="story_content/jspdf.js" TYPE="text/javascript"></script>
<script src="story_content/FileSaver.js" TYPE="text/javascript"></script>
<script src="story_content/FileSaver.min.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/split_text_to_size.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/canvas.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/cell.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/from_html.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/png_support.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/standard_fonts_metrics.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/addhtml.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/javascript.js" TYPE="text/javascript"></script>

Kristen Bjork

I must still be doing something wrong. I put all of the plug-ins into the plug-in directory and made sure everything was there and put the right HTML in and it still doesn't do anything when I press the download button. This is what I have in the HTML.

<script SRC="story_content/user.js" TYPE="text/javascript"></script>
<script src="story_content/story.js" type="text/javascript"></script>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script SRC="story_content/jspdf.js" TYPE="text/javascript"></script>
<script src="story_content/FileSaver.js" TYPE="text/javascript"></script>
<script src="story_content/FileSaver.min.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/split_text_to_size.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/canvas.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/cell.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/from_html.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/png_support.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/standard_fonts_metrics.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/addhtml.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/javascript.js" TYPE="text/javascript"></script>

</head>

 

And here's a screenshot of my plug-ins folder:

Ashley Terwilliger

Hi Gaylen,

What browser are you using to view the output on your Mac or iPad? You'll want to ensure you're using one of the supported browsers here. 

We don't announce product plans or roadmaps, but if you'd like to see a particular feature you'll want to submit a feature request as those go to our product development team. 

Emilse Rivolta

Hi. I am having the same problem. Kristen, could you fix this?
I just took the .story from this example to test, put the plugins into the plugin directory and paste the script in the html, but it doesn't work.
I also make sure that all rutes and names of the files are correct.
Can anyone help me please?!?!?!