Forum Discussion
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:
Hi Josh,
thanks for sharing, this looks very promising! I just tried your example link in IE11 and Chrome, it works for me.
Thank you for the extensive explanation Josh. Can't wait to play around with it.
WOw and thank you
works great in safari
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 dynamicallyfunction 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 IDadd_script(oLocation+"script/soundmanager2-jsmin.js","soundman");}I also added another page to the PDF after each doc.text variable.
doc.addPage();
Steve, do you know how to attach this PDF to an new email message in Outlook?
Steve - do you know if this method is still working in 360? I've tried a couple of variations and have had no luck. Thanks.
Your alternative sounds great Steve, could you build a working example based on Josh's file? I, and many other, tend to find playing with Javascript a little intimidating.... :(
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?
This is great code Josh, thanks. It works on Windows 8 in IE 11, FireFox 31.0 and Chrome 36.0 for me.
Josh, Steve,
Thank you very much!
Wow! THis is excellent!! Thank you so much for posting this information and sharing the source.
