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
Thanks Ryan for sharing here - people are always looking for more certificate examples so I appreciate you sharing it here.
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
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.
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
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
Thanks Ryan for popping back in to share those specifics.
Thank you Ryan I'm definately going to give this a try!!!
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
I've updated the attached files and my linked demo to work with both the Flash and HTML 5 output.
Thanks Ryan for the updates and additional work.
Ok, this looks interesting and I was wondering if there is a tutorial on how to use this site?
Hi Helena! Looks like Ryan shared a link in his initial post and the site seems to have their own docs. This is not an Articulate product.
This is awesome, going to file the info for future projects. Thanks Ryan!
Then there are reasons threads get revived :) Glad to hear it Mike!
Hello, community members!
Ryan, thank you very much for the example!
I am fairly new to articulate and not very familiar with programming. Could anyone please give me a hand by telling, where can I find the actual code which can be modified (so I change the text which is on the certificate:
"Organisation name,
this is to certify that,
successfully completed the following activity..."
I would like to just copy and paste the original concept of the certificate, but need to add Organisation name etc...
Trying to solve this puzzle..
Thank you very much!
Hi again! I think I found the html file that I need to edit! Just had to open in notepad ++
Will try to do that!
Have a good day everyone! ;)
Hi Janis,
As I think you've already worked out you need to edit certificate.html
You will need to re-insert the web object after editing to see your changes.
Ryan
Hi Ryan,
Yes, thank you very much for the reply. I did work it out theoretically and will try to edit the html file to insert the text and maybe new variables from the storyline which i need - test results for example (though it requires some decent programming skills which i am not very familiar with).
Will see how it works with inserting and re-inserting the web object also..thought just copying the web object from your file and inserting it into mine will work..will see.. Love challenges.
Thank you very much indeed and have a good day!
Hi Ryan,
Thanks so much for this post. Do you know of an easy way to have an image populate as the background (if we already a certificate template for example). I was thinking using adobe edge animate to try and convert the image into html and plug it into the certificate.html file but that might be wishful thinking..
Hi Nicky,
It's possible to set a background layer in the document definition. This can contain any content including images.
See bold section below.
Note that images are included as data uri's with images encoded as base64 strings. You could use the converter here to convert your image to a base64 string.
(The dimensions set below are the size in pixels needed to cover the full background of an A4 page).
I've put together a very quick example with a certificate image I pulled off the web.
http://rlowry.github.io/certificate-background/story.html
Certificate html attached.
This post was removed by the author
Hi Wes,
No problem, glad to hear this is useful.
Web objects are included in the published output so this isn't an issue.
You can find them in the following folder of a published project.
/story_content/WebObjects/
Ryan
Boy that was quick Ryan :)
After I typed the question I noticed the web objects were being passed in a folder then promptly deleted my question. You beat me to it :)
Thanks for your reply.
Regards
Wes