Forum Discussion
Storyline 2 Example - Generating a PDF Certificate for users who successfully complete a quiz
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
Yes it will work. In my example the download button is only shown on the success layer of the results slide. You could move the download button to any slide within your project.
Hi Doug, this is quite an old post and I've since deleted the example files. There's a slightly more recent post for Storyline 360 here that includes an example link: Storyline 360 - Generating a PDF Certificate using JavaScript - Articulate Storyline Discussions - E-Learning Heroes
Thank you, I eventually did stumble upon the newer one. 😊
Thanks for sharing
Hi, Doug.
I'm happy to hear you found what you were looking for!
I just wanted to add a quick note: it looks like your signature with contact information came through when you replied via email. You can remove it by clicking 'Edit' below your response. Here's a quick Peek 360 video if you need help.
thanks for this - so good - works perfectly.
This is brilliant...thank you Ryan! Hmmm...can I also pick your brain??
I've been asked to create an initial assessment questionnaire, with each question carrying a score.
The score collated determines the eLearning pathway that user takes. At the end of the assessment, on screen feedback is given. My client would like the feedback to be also accessed via a downloadable pdf.
I'm very new to eLearning and want to know if the method highlighted here would work?
Thanks in advance.
Simone
Hi Simone,
Glad you've found this useful. As Ashley suggested you would set the value of a text variable to be equal to the feedback text. You could then retrieve this value when you generate the certificate.
e.g. if you had a storyline variable learnerFeedback
You would retrieve the value of this storyline variable by adding the following JavaScript to certificate.html
var feedback = player.GetVar("learnerFeedback");You would then need to modify the layout of the PDF document definition to include this new variable.
Remember to account for the varying amount of space that will be required for the different pieces of feedback text when designing your certificate.
Hope this helps,
Ryan
Glad this helped you out Tamara and Simone. In regards to your other question Simone, it's likely that you'll need to utilize a variable for this feedback and some Javascript to pass that variable to your PDF as it generates. I'll defer to the community as Javascript is not something I can offer support for but you may want to begin by reviewing the best practices here.
Thanks for getting back to me Ashley. I'll be sure to have look and thank you for the offer of support....!! I'll let you know how I get on.
Thanks Ryan for popping back in to share those specifics.
Thank you Ryan I'm definately going to give this a try!!!
Matthew Bibby
This is great Ryan, thanks for sharing this example.
What was the issue you ran into with the Flash output? As PDFmake is JavaScript based I thought it would work okay... but I'm obviously missing something.
Hi Matthew,
To be honest I didn't really spend any time looking at why this didn't work with the Flash version as we have just been using the HTML5 output. I've had a quick look and the following tweaks sort it out...
In my example I hid the web object that contains the certificate code off the project canvas. This works fine with the HTML5 output but the web object is not included in the Flash output if you do this. The easiest thing to do is to make the web object very small and hide it behind another element on the project canvas.
Also you'd need to modify / remove the little bit of JS that i use to retrieve the title of the project.
// title = window.parent.story.title;Once these changes have been made it works fine for both the HTML5 and Flash versions. I'll update my original post sometime soon to reflect these changes.
Cheers,
Ryan
