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
Would generating an email with the results be enough?
I think I'm missing something on passing variables within the trigger? Sorry if the question has been asked before, I don't have access to the storyline original project - I'm adding on to existing projects with LMS certificate - I know the PRINT button has trigger built in to pass var to report.html and that works fine - there is another button that is linking to certificate.html file that I need to send the test results variables - does this need to be setup with a different trigger to send the variables to the new html page? Or can these fixed variables be pulled from the certificate.html page without some sort of trigger?
Sorry but again I don't have access to the .story project and am relying on 3rd party to create and modify that part...
Hi Barclay!
Articulate does not support modifying the published output, so perhaps someone in the community will be able to assist you with this.
Hi Owen,
sorry for the delay in reply ..we had some major storms and I lost power and telephone connections for 6 days...but. All is connected again..
this would be great ..and better if I could have the persons name within the results themselves...but a good solution...if you could tell me how I would be grateful
Hi Leslie, while I understand and I love articulate...if it's all too hard my small clients will go with captivate as it does have the function to print result certificates....I prefer articulate hands down but....if this is what they want and I can't support it in articulate...I am still trying.....
Take a look over here at my custom certificate solution:
https://community.articulate.com/discussions/building-better-courses/create-a-course-certificate-in-storyline-with-java-and-html
For the email, I would just expand on Stephanie Harnett's "user notes" post.
https://community.articulate.com/discussions/building-better-courses/user-notes-that-they-can-print-and-email
Thank you so much ... Will give it a go
Sent from my iPhone
Whilst I was able to generate the certificate ...it always was blank without the results... went crazy trying to work out java code... the reason for buying articulate is I don't want to do coding I don't have an IT background...... but then just as I was drifting off to sleep.... it came to me and it was easy... I used variables and just changed the results screen into a certificate.. with voice over right click and print... easy and works great for me... low tech I know but it was exactly what I wanted... Happy to do a screener if anyone needs it...
Thanks so much for the update, Christine -- glad you are all set! :)
Hi Steve
Your link it's available again ?
I want try to do this for my formation.
Thank's
Hi Marielle -
Looks like Dropbox changed the way shared files are referenced sometime within the past couple of years. I updated the last 2 links. Looking for a way to restore the published example.
Thank you !
That looks great, but how do you print it?
Hi Janis! This thread is a bit dated and I'm not sure if Jeffrey is still subscribed. You are welcome to utilize the 'Contact Me' option on the user profile if available.
I don't know if this is even possible, but is there a way to email this certificate page to someone for record keeping beside attaching a screenshot onto an email generated by the html <mailto>?
Hi Kumiko!
Not sure if this thread will offer some assistance to you.
Otherwise, hopefully someone in the community will be able to pop in and assist you with this request.
Thank you Leslie.
Of course Kumiko. Hopefully that will guide you on your way, but (between this thread and that one) it will put you in touch with the people that can do it for sure :)
Can you have the certificate functionality pull in a photo of the person using a variable? Also, can it pull in a custom graphic to put on the certificate? For example, I want an icon to represent the level of completion for that learner to be printed on the certificate? Thanks
Hi, Cheryl -- All great questions here! Although I do not have a method I can recommend to achieve what you have in mind, perhaps one of your fellow community members will be able to share some wisdom to pull off what you have described. :)
Hi
After reading all of the thread to this, i still can't get a certificate to generate.
Does anyone have a bog standard certificate template that will remotely resemble a certificate that will just pull through the name and date.
Thanks
Grant
Hello,
Me again, I have got a basic certificate to work now thanks to everyone for posting tips!
I do need to add a picture into the top right corner which is just a logo.
I have tried adding in an additional contents line but it will not recognize the picture.
can someone help with the correct code to use.
Hi Jeffrey,
I apologize for the novice questions, but what do you mean by "style section"? Is this in the print dialog box javascript?
Thanks,
Jena
thanks
Hi Jena,
The "style section" is in the head section of an HTML file, usually where the styles are found.
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
There are several different styles you can apply, but unfortunately most HTML codes/commands for forcing something to print landscape instead of portrait (really anything related to printing) depends on the browser you are using. The ideal solution is to convert to a PDF because that is a standard. While HTML5 is a "standard" Safari, FIrefox, Chrome, and Edge have styles they like and others they ignore.
One of the many reasons the death of Flash is a true tragedy. Hope that helps!