Example files: Generating a certificate from Storyline

May 09, 2012

This example demonstrates how you can take user input and generate a certificate for printing. Any Storyline variable or score can be used to generate the output. The file and file add-ins are both simple and straight forward. This will only work in the Flash based output. This will not work in the iOS output or HTML5. 

To replicate this on your end:

1) Modify the story file to your liking.

2) Extract the add-in zip file above (certificate.html and certificateBG.gif)

3) Copy these two files into your published output directory. You'll need to do this each time you publish.

This is a really basic example. You really can do quite a bit with this including adding a print button, extra fields, collecting values from the LMS like the user's first and last name. 

** I noticed a bug when playing with this file setup. I initially thought I would be able to include the certificate files as resources to avoid copy / paste surgery after publish. Unfortunately, Storyline mangled the HTML file on publish. Will be submitting this as a bug.

236 Replies
Jennifer McConnell

Hey again! I tried the certificate code and I can see the certificate I created pop up but briefly then the window is blank and it doesn’t print. :/ Not sure what I’m doing wrong. Also not sure if I’m supposed to be replying to you with more questions. LOL! If not, let me know if you can point me in the right direction, and if yes, I appreciate your help!

Jennifer McConnell

Sent from Mail for Windows 10

Jennifer McConnell

Thanks, Owen! I actually got your certificate code to work, but I really need to apply some JavaScript to the certificate I’ve created. The team I’m working with has a specific design / layout they want to use.

I’ve created the certificate and it will print, but I really need the certificate to be centered on the printed screen. I’m not sure if that’s possible and I’m not sure what code to use. I’ve tried applying some of the code you created unsuccessfully.

I’ve attached my project.

How it works:
The Learner enters their name on the first screen to get started on the knowledge check. *If you know how to format the text entry field to title case that would be awesome – I don’t quite understand the code for that).
Takes the quiz
When the learner successfully passes the success layer displays the print certificate button.
Their name is displayed on the certificate, JavaScript displays the current date but I need the certificate to be centered on the screen. *Also, I noticed sometimes the screen buffers too long displaying a grayed out screen. If the learner prints, the grayed screen prints. If I cancel and click the button to print again, it’s fine.

Let me know if you have questions! Thanks for taking a look at it for me!



Using JavaScript to create an HTML certificate works pretty consistently for me. Where exactly are you having an issue?

Check this post to see the certificate example at the end with the code I used to create it.