Saving Storyline Variables to a PDF
Aug 13, 2014
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
Thanks Alot Ashley! I will try it,
*
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.
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?
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,
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.
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!
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.
This post was removed by the author
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!
Glad to hear it worked out Hanne! If you run into any issues let me know!
I have one issue for this js when user type many words in the text box then overflow words in pdf.
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.
//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');
I would like to know whether it is possible to use this export to PDF function when viewing the story file in the Articulate Player on mobile devices.
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.
Hi all, Does anyone know if this works on a course that will be taken completely offline? Publishing to CD Rom.
Hi Makayla! Looks like Ashley is helping you in a couple of other threads like this one.
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.