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:
111 Replies
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?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!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!
Hi Jackie,
You'll want to confirm you're viewing the published output in one of the supported browsers for Android as detailed here.
Glad you were able to get it to work Hanne and thanks for updating us!
