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
Steve Flowers
over 9 years ago08/13/14 at 10:42 am (UTC)

Great example, Josh. Works great in Firefox and Chrome. Experimented with this earlier in the year. Gave up when it got sticky in IE8, as this was one of my requirements. I think it was in the method used for saving the PDF that failed. There was a Flash-based workaround but I found an alternate.

You might have some luck embedding your dependencies in a Web object and dynamically writing them into the head of your document to save having to add them after each publish. Here's the function I use to rewrite headers at run time. This doesn't work well for everything but for PDF generation it should be fine.

//where is our carry-on baggage? Find this by right-clicking the web object and choosing open. Grab the object ID from the address bar.
this.oLocation="story_content/WebObjects/66vjsN26Fjn/";
//load the scripts dynamically
function add_script(scriptURL,oID) {
var scriptEl = document.createElement("script");
var head=document.getElementsByTagName('head')[0];
scriptEl.type = "text/javascript";
scriptEl.src = scriptURL;
scriptEl.id=oID;
head.appendChild(scriptEl);
}
//only want to add these once! Check to see if the ID exists first.
if(document.getElementById('soundman')==null){
//first parameter is the script reference to add to the header, second is the object ID
add_script(oLocation+"script/soundmanager2-jsmin.js","soundman");
}
_ _
over 9 years ago08/13/14 at 1:04 pm (UTC)

Oh nice call on the object load, Steve, did not even think of the carry-on method for loading the scripts.

There are additional scripts and files provided from the jsPDF site that are supposed help the cross browser support including IE6-8, however, I have not tested it out. filesaver.js is unsupported below IE9 and the workaround refers to using downloadify, a flash/js combo.

What happened to be the alternative method used?

Jackson Hamner
over 9 years ago10/15/14 at 1:20 pm (UTC)

Leslie McKerchie said:

Hi Jackson and welcome to E-Learning Heroes!

Hi Mandy!

You can see Josh's post above where he had to host the content for his shared example to work. Not sure if this is applicable to you.

Hopefully someone in the community will be able to assist you


Thanks for the response!

I tried to host the files, but unfortunately they still didn't work. The example files I downloaded worked, but once I converted it to an Articulate Storyline 2 file it stopped working.

Any ideas?

Gemma Nunn
over 9 years ago11/03/14 at 2:09 pm (UTC)

Hi Josh,

Thank you for sharing this. This is awesome!

Question: is this script unsupported by IE9? I've been testing it out on a few browsers and it works fine in Chrome and Firefox, but not in IE9. (I'm testing in IE9 because it is still used by some of our customers.) Do you have any suggestions as how to get around this?

Damo D.
9 years ago03/04/15 at 5:51 pm (UTC)

Hi, I have tested it and it works really great.

I have problem with some aspects of design of certificate(our PDF file) and I will write it here - maybe someone could help and it might be usefull for others.

1. How can we import an image background for certificate.

2.  I'm using non-latin characters in words(I think it will be western latin characters for polish alphabet) - now we have problem with it - where should we set it up?

3. Text is alligned to left , can we center it?

I will be gratefull for any help, thank you , 

Damo

 

Sign In to Reply