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
Luke Mosse
over 8 years ago01/06/16 at 3:03 pm (UTC)

Is it possible to turn that JS code for creating the PDF into a function and then reference it on each instance so that you can edit the template across a set of projects easily?

E.g. keep the function with in user.js, and then when a print button is used, only input the data which changes, e.g. the fields. 

I have to create about 100 of these across a number of different projects, so this would be handy - any tips would be great!

Christie Pollick
over 8 years ago01/11/16 at 2:53 pm (UTC)

Hello, all! I just wanted to stop in to mention that we are not able to provide support for JS coding, but here is our Best Practices sheet for anyone who would like to take a look! 

And Helena, if you would like to reach out to Steve directly, (as it's been quite some time since he responded to this thread and he may no longer be subscribed), you are welcome to use the 'Contact Me' link on his profile page. 

Ashley Terwilliger-Pollard
8 years ago04/18/16 at 7:20 pm (UTC)

Hi Matthew,

This thread is a bit older, so I'm not certain that other folks are still subscribed, but the JS coding elements mentioned here are not something we can offer support for as Christie mentioned. Perhaps you'll want to look at messaging a few users directly using the "contact me" button on their profiles. 

Ashley Terwilliger-Pollard
almost 8 years ago06/01/16 at 1:23 pm (UTC)

Hi Hanne,

Are you referring to the original posting and the steps there? Our team is not equipped to assist with Javascript elements so you may want to message that user directly using the "contact me" button on their profile. 

You may also want to review our Javascript best practices here. 

Mathew Araujo
almost 8 years ago06/01/16 at 2:16 pm (UTC)

Hi Hanne!

If you open up the zip file that's attached to this post you'll see the name of the files you need. The files needed are:
- FileSaver.js
- jspdf.js
- jspdf.plugin.split_text_to_size.js

They are located into the story_content folder. So you can write your JS in Articulate, then publish it. Once you have the published content add these .js files to your story_content folder then zip the published content and publish it to your LMS and it should work! If you are unable to find those files let me know!

Hope this helps!

Mathew Araujo
almost 8 years ago06/01/16 at 3:58 pm (UTC)

Hi Hanne!

Glad it worked out. Absolutely, there's one more file you need to add to the story_content, I've attached it below.

You'll have to change your image to a Data URL, I used this site, http://dataurl.net/#dataurlmaker. It becomes a long file, and exceeds the character limit for JS in Storyline so here are some steps.

1) In the JS editor in storyline add a variable for example:
var imgData = "";
You'll leave it blank for now.

2) Add in another line in the JS editor in stoyline for it's size for example:
doc.addImage(imgData, "JPEG", 30, 52, 240, 155);
You can edit the size and position in the numbers after "JPEG".

3) Publish your storyline content

4) Follow steps 4 and 5 from this post by adding the script lines to the story.html file, but also add:
<script src="story_content/addimage.js" type="text/javascript"></script>

5) Add the .js files, including the addimage.js file to story_content

6) Open the user.js file in story_content and add in Data URL image to the value of image variable (like mine imgData)

7) Zip the folder and publish to the LMS

Let me know if this works!

Mathew Araujo
over 7 years ago08/27/16 at 4:16 pm (UTC)

Hey Shahab,

It's because of the text wrapping. Can you share a bit of your code? It would be similar to the section below:

var x = doc.splitTextToSize(y, 500);

The splitTextToSize is the text wrapping and the value 500, in this case, is the length. 500 works well on Portrait, but it appears you are doing a Landscape doc. If you fix that value it should work.

shahab khan
over 7 years ago08/29/16 at 7:59 am (UTC)

//Retrieve Player Variables
var player = GetPlayer();
userName = player.GetVar("userNote1");
userNotes = player.GetVar("userNote2");

//Create PDF
var doc = new jsPDF('landscape');

//Create Split Text Variable
var splitNotes = doc.splitTextToSize(userNotes, 550);

//Color Rectangle at top
doc.setFillColor(51, 204, 255);
doc.rect(0, 0, 1700, 50 , 'F');

//Congrat Text
doc.setFontSize(36);
doc.setFont("helvetica");
doc.setFontStyle("bold");
doc.setTextColor(255, 255, 255);
doc.text(105, 30, "Wrap-up note");

//Notes Heading
doc.setFontStyle("normal");
doc.setFontSize(12);
doc.setTextColor(0, 0, 0);
doc.setFontStyle("normal");
doc.text(20, 65, "Note 1:");

//User Name
doc.setFontSize(14);
doc.setFontStyle("normal");
doc.text(20,75, userName);

//Notes Heading
doc.setFontStyle("normal");
doc.setFontSize(12);
doc.setTextColor(0, 0, 0);
doc.setFontStyle("normal");
doc.text(20, 110, "Note 2:");

//Notes Variable Information
doc.setFontSize(14);
doc.setFontStyle("normal");
doc.text(20, 120, splitNotes);

//Save PDF
doc.save('Wrap-up note');

Ashley Terwilliger-Pollard
over 7 years ago12/06/16 at 12:57 pm (UTC)

Hi Marius, 

Javascript won't work within the Mobile player, although it does work within the HTML5 output for iOS or Android devices, and you can see that noted in the comparison chart here. 

As for if it would allow you to export to a PDF, I don't believe so it would have to have software for the creation of the PDF which is not on most tablets. 

Jack Quantrill
almost 7 years ago04/19/17 at 1:44 pm (UTC)

This is a seriously useful tool to be able to call upon! Huge thanks for putting together this tutorial.

Like a few others I had issues getting this to work at first. The thing that did it for me was instead of zipping the file via Storyline after making the tweaks to the HTML files, I zipped it in the explorer/finder window.

(Make sure you zip the files INSIDE the output folder, not the output folder itself.)

Thought I'd share in case anybody else fell down at the same point.

I'm using Storyline 2 and have tested it successfully on Chrome, Safari and on an iPhone.

Would be great to see some examples of the kind of PDFs people have created via this tool.

Sign In to Reply