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
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
Jennifer.mcconnell@trimedx.com
Sent from Mail for Windows 10
Can you post your file here? You can also connect with me on LinkedIn.
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!
Attachments do not come through when replying to the community through email. Can you respond directly here in the community and attach the file or try sending it to me through LinkedIn?
Ok, I’ll try through LinkedIn first! Thanks so much for your help!
Sent from Mail for Windows 10
Hi Jennifer,
Your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.
Thank you for letting me know! I've updated the post.
Jennifer, were you and Owen able to get this to work?
Hi, Natalie.
Since this is an older discussion, Jennifer might not be subscribed, but you're welcome to contact them directly through their profile by clicking on their name and selecting Contact 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.
https://360.articulate.com/review/content/b56569f8-4679-4c5c-a937-738eb98cc3fa/review
Hi Jeffrey,
Could you please share a sample storyline file with this functionality? I need to download the certificate with the learner's name on it, to print just as it appears in the storyline slide. Please help.