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:
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!
Has anyone gotten this to work with the HTML5 export? I've tried the examples that folks have provided in this post and none seem to work with the story_html5 output. Specifically on an Android device.
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.
I'm unable to get this to work. I have four different text entry variables and have added the files and script to the head, but it doesn't seem to work. I have uploaded the zip file to my LMS and when clicking on the download button nothing happens. Any suggestions?
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.
Hi!
I tried to follow your steps, but didn't really understand what step 4 and 5 means. What JavaScript files do I need, and where do I find them? And does this only work with html5?
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!
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.
Thank you for your help! I managed to make it work now!
Do you know if its possible to add an image to the pdf? How can this be done?Glad to see this start up again. But...Has anyone gotten this to work on an Android device? It does work in Safari on iPad and iPhone. I still haven't managed to get it to go to PDF on an Android.
Thank you so much for you help! I managed to get it to work now!
