Storyline 2 Example - Generating a PDF Certificate for users who successfully complete a quiz
Aug 27, 2015
Hi all,
I've been experimenting with a JavaScript PDF library (pdfmake) to generate PDF certificates client side for learners who have successfully completed a quiz in Storyline 2.
You can see an example at http://rlowry.github.io/certificate/story.html
The 1st slide of the example provides a brief overview of how this works. I've tested this successfully in Internet Explorer, Chrome, Firefox, Chrome on Android and Safari on iOS.
I've attached a simple source file that contains a basic .story file as well as a folder (certificate) that includes the required HTML and JavaScript that needs to be included within a web object within the project. Feel free to have a look and re-use if it's useful.
The generated PDF certificate is very basic at the moment, you'll need to refer to the pdfmake documentation to update the design.
UPDATE: Originally this example only worked with the HTML5 output. I've tweaked it so it now works with the Flash output as well. I've updated the attached files to reflect this change.
UPDATE 2: I've updated the attached source files so they now use the latest version of pdfmake (v0.1.27).
Cheers,
Ryan
152 Replies
Bumping an old thread, but this is a great feature!
I just used this on a project to capture a number of long answer questions (for a learner self-reflection) and allow them to download their answers to keep on record.
NIce work you should provide an example .story file.
Hey Kevin - Are you asking Tristan for an example here? I know that Ryan recently shared an example above.
Yes, I wanted to see his exact example.
Gotcha Kevin - hopefully he'll be able to pop in and share with you.
I can't share my .story due to the IP but essentially I just stored the answers to the questions in variables %Answer1% through to %Answer10% and in the html file included the questions and pulled in the answer variables.
I am using PDFMake in a course I'm developing in Articulate 360 and am finding that the PDF is not created when I update the course to Articulate Review.
It works when I upload to Articulate Online, SCORM Cloud and my own web server but not Review.
Has anyone else encountered this issue?
Yes I also had this issue in review...
Thanks for confirming Tristan, I thought I was going crazy. Did you report this to Articulate?
Hi Nancy and Tristan,
I'm not familiar with PDFMake, but would love to try and help! Can you tell me a bit more about what's happening (or you'd expect to be happening)?
If you can share a copy of it with our Support engineers we're always happy to take a look! Upload a copy of your course here and a link to the Review hosted version here.
Hi Ashley, PDFMake is a JavaScript library that enables you to create downloadable PDF files in your browser. When used with Storyline it is a great way to capture user input, pass it to an html doc which is then converted to a downloadable pdf .
To do this you have to create an html doc that gets the player vars from Storyline, formats the content and references the js functions that create the pdf. You then insert the folder containing the html doc and the JS funtions as a webObject into Storyline.
There is a trigger in Storyline to run a JS script which runs the JS functions to create the PDF and download it to the user's client.
So to make a long story short, when you execute the trigger in the Review hosted version nothing happens. When you execute the trigger in SCORM Cloud, Articulate-online and from a website, the pdf is downloaded as expected.
Interesting!
So I guess that means I would have to change the code to get it to work in Review and then change it back again when my client hosts the course on their LMS (which is Moodle). I'm not sure I like that. It is just one more point in which to introduce errors.
Thanks for the explanation Nancy! Could you share that sample with our team so that we can take a look? If it's behaving differently in Review than SCORM Cloud, AO, etc. that's something we'd want to figure out and share with our team. Let me know if you can send it along here (even just a sample/mock up project!).
Sure, I can do that.
I just submitted the case. It is case number 01090120
Hi Ryan, this is all great and works quite well to print or open a PDF. Have you ever extended this to the ability to automatically email this PDF to a supervisor/manager email?
FYI This option for certificates kept breaking my google Chrome Version 59.0.3071.115.
Aisha, what error message/s are you getting? are you able to post a screenshot or share your SL file?
Hi Aisha,
Have you confirmed that you're testing it by uploading to a web server or LMS? The options of a certificate may not work if you're testing it locally due to security restrictions.
Hi Ashley, I was using a web server. It seemed to only happen on that version. No errors except the "Chrome Shut down unexpectedly" message and I had to restart.
I ended up doing a different certificate method as mentioned here:http://tracycarroll.net/free-print-certificate-template/
It worked for me.
Thanks Aisha - glad you found another method that would work out for you!
Brilliant stuff!
Glad this was helpful to you as well Paul :)
This post was removed by the author
Hi. I'm trying to get Ryan's basic file working on my server but it's the first time I've tried working with web objects and I'm puzzled by this bit of Ryan's instructions:
To get this example project working on your own machine you will need to delete and then re-add the web object selecting the certificate folder as the source.
I understand that it has to point to the right place but when I try to point it anywhere, Storyline keeps telling me it can't create the web object because there's no index.html in that folder.
Say my output folder (where story.html sits) is 'myoutput' and certificate.html is also in that folder - is that the folder I'm looking for? Do I have to create a blank index.htm in that folder? Or do i need myoutput/certificate and create one in there?
Hi Norman,
You need to point the Web Object to a local copy of the folder certificate that's included in the zip file attached to the first post. This folder can be placed anywhere and should not be placed in the folder that you plan to publish to. (Storyline deletes the contents of this folder each time you publish).
When you Add a Web Object Storyline will import all of the files contained in the source folder into the project and will automatically include them in the published output.
Ryan