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. See it in action Take a look at the Story file Download the Certificate Add-in files 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.

Has anyone come up with a solution that can work for both HTML5 and Flash-version courses? I'd be willing to include a solution for each if there is a way to do so. I have uploaded an abbreviated version of what I've been asked to do. I need the certificate to print just as it appears in the second slide. Is there a way to have a single slide appear without any player information so it is simply what is on the "stage"? Steve's example is great, but the fact it goes haywire in HTML5 is concerning as we are developing this course for users all over the globe and the HTML5. Thanks in advance!

Hi - I'm wondering if anyone knows how to get the certificate to print in landscape orientation by default (without the user having to change the print preferences). My understanding is that this would be a setting in the html document, but not quite sure how to set it up.

I keep it simple. when my storyline file opens, I get the date. It is the first thing the first slide does. This lets me display the date throughout the course. Here is the code I use. var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1; //January is 0! var yyyy = today.getFullYear(); if(dd<10) { dd='0'+dd } if(mm<10) { mm='0'+mm } today = mm+'/'+dd+'/'+yyyy; var player = GetPlayer(); player.SetVar("SystemDate",today); The certificate java is at the end of the course. Keeping them separate makes it easier to trouble shoot. My certificate java looks like this: myWindow = window.open("","Print","width=900,height=700,scrollbars=0,resizable=0"); var player=GetPlayer(); var course=player.GetVar("CourseName"); var username=player.GetVar("NewName"); var date=player.GetVar("SystemDate"); var score=player.GetVar("ScorePercent"); var contents ='<html></head><style type="text/css">'; contents+='h2 {font-family:"Museo Sans For Dell"; font-size:20px; color:#333333}'; contents+='h3 {font-family:"Museo Sans For Dell"; font-size:30px; color:#0085C3}'; contents+='h4 {font-family:"Museo Sans For Dell"; font-size:16px; vertical-align:bottom}'; contents+='</style><body>'; contents+='<table width="100%" border="0" cellspacing="0" cellpadding="0">'; contents+='<tr><td><center><img src="../GFPA0104/certificate/CertificateBanner.png"></center></td></tr></table>'; contents+='<table width="100%" border="0" cellspacing="0" cellpadding="20">'; contents+='<tr><td colspan="5"><center><h2>THE GLOBAL FP&A L&D TEAM CERTIFIES THAT</h2>'; contents+='<h3>'+username+'</h3>'; contents+='<h2>HAS SUCCESSFULLY COMPLETED</h2>'; contents+='<h3>'+course+'</h3>'; contents+='<h2>WITH A SCORE OF</h2>'; contents+='<h3>'+score+'%</h3></center></td></tr></table>'; contents+='<table width="100%" border="0" cellspacing="0"><tr>'; contents+='<td width="30%"><center><img src="../GFPA0104/certificate/Signature.png"></center></td>'; contents+='<td width="5%" rowspan="2"></td>'; contents+='<td width="30%"><center><h4>'+date+'</h4></center></td>'; contents+='<td width="15%" rowspan="2"></td>'; contents+='<td width="20%" rowspan="2"><img src="../GFPA0104/certificate/Dell-Logo.png"></td></tr>'; contents+='<tr><td><center><img src="../GFPA0104/certificate/Signature Line.png"></center></td>'; contents+='<td><center><img src="../GFPA0104/certificate/Date Line.png"></center></td></tr></table>'; contents+='</body></html>'; myWindow.document.write(contents); myWindow.document.close(); myWindow.focus(); myWindow.print();

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...

After reading through this lengthy thread, I just submitted a feature request. Here's what I said: Hi there! I have a new client who needs me to provide a traditional certificate (filigreed border and all) at the end of a course, pulling data for name, date, course title, and test score. In a foreign language. And it needs to be printable. I looked in Storyline, and then in the forum, and was amazed to find you folks still don't provide a ready-to-use Results slide in the form of a customizable, printable certificate template within the Articulate 360 suite. As you know, this is a feature Adobe Captivate has offered for a few years now. I watched your old video about revising the Report.html file. That's too much work for many of your customers, who may not have the basic code-tweaking skills needed. And having to manually place the file in the appropriate folder after publish? A recipe for mistakes to be made. I read that your reasoning is you consider proof of completion to be the province of a company's LMS. But as you've acknowledged, there are companies who don't use an LMS, or still want a traditional certificate the learner can print out at the end of the course, within the course, even if the company does use an LMS. As you know from the attached forum thread, people have been asking you for this feature for at least six years, and continue to ask for it currently. Isn't this something that would be a really huge WIN for you folks to produce? Couldn't you create a good-looking template with editable certificate title (for foreign language clients), and learner name, date, score, and course title variable fields, include the coding to make it easily printable, and make that available to all your users as a Results slide option? All the course creator should need to do is conform their variable titles to those you use (or, you make them editable). I do hope you will at last revisit and reconsider your position on this ongoing basic need. It would be hugely appreciated by many of your customers. Thanks!

Example files: Generating a certificate from Storyline

236 Replies

LeslieMcKerchie
Staff
13 years ago
No problem Erika! Did you find the answer that you were looking for?
ErikaP
Community Member
13 years ago

Yup, with the help of these links...

http://community.articulate.com/forums/t/24147.aspx

https://player.vimeo.com/video/145576537
LeslieMcKerchie
Staff
13 years ago
Great! Thanks for sharing Erika
LisaKarpuk
Community Member
12 years ago

I seem to be having major issues when trying to pull any other variables from the Storyline file into the certificate.html. I have no problems when I am just using the learner variable but when I try to get the certificate to show the final mark (or anything else) from Storyline it just stops working.

I have limited knowledge of JavaScript right now, but it my head what I am doing makes sense - but it's just not working no matter what I try, and I haven't yet seen an answer on here that specfically addresses how to do this.

I attached an example. I used the storyline and certificate files provided by Steve. I added a variable that simply generates the number 85 and tried to add that to the certificate.

Any help would be appreciated!
certificate-test.zip582 KB
JeffClay
Community Member
12 years ago
I'm having the same issue as Lisa. I have tried publishing both in Web and CD versions, and while my certificate window opens just fine, no matter what I do I cannot get any variable to show on the certificate. My variable names are correct, and I have background in HTML and some javascript, so I know the code is fine, however, it's just not pulling the variable. Would love a solution if anyone has one. For now, the learners have to print the certificate and fill the name in themselves.
PalaniVelu
Community Member
12 years ago

Hi,

Thanks for your guidance to print a certificate.

It's working fine when I tried on my local system.

But, when attempting to do this from the LMS using Firefox/Chrome it is displaying an error.(Please refer 3rd image)

For your reference am attaching the screnshots.

Please give a solution on how to solve this.

Certificate Files pasted

Published file from Local System

MOODLE Output

Regards,

Palani Velu
SeanSpeake
Community Member
12 years ago

Further question...

I'm 99% sure I can get the certificate to work as advertised.

My HTML days are far, far behind me. Is there a way to embed a link into the certificate that will email the entire certificate page to a pre-populated address?
Manjeet-Randhaw
Community Member
12 years ago

Hi Steve:

I was able to replicate what you did but, I've been playing around the code in "certificate.html" in the add-in files.and have been trying to add the learner's final score and the systemDate into the code. I cannot seem to pull that data into the code.Can you help with what that looks like?

Thanks
RogerHo
Community Member
12 years ago

Jeff Clay said:

I'm having the same issue as Lisa. I have tried publishing both in Web and CD versions, and while my certificate window opens just fine, no matter what I do I cannot get any variable to show on the certificate. My variable names are correct, and I have background in HTML and some javascript, so I know the code is fine, however, it's just not pulling the variable. Would love a solution if anyone has one. For now, the learners have to print the certificate and fill the name in themselves.

I'm running into the same problem. I used the files that Steve posted (not the dropbox ones) and I was able to open the file, publish the file, move the supplied folder contents to the published folders. I have published the default file to web, lms, and CD to test it and I can see the certificate.html file in story.html but I do not see it story.swf. I am unable to see the variable learner in either situation.

Please help super heroes!
KeithKemsley
Community Member
12 years ago

Hi All,

CENTERING LEARNER'S NAME

I'm new to CSS/JavaScript...

With absolute positioning, I can center fixed-length information but I cannot seem to center the +learnerName+ because it is variable length. Is there a way to center the learner's name? (It doesn't have to be absolute positioning. That's just what the sample file seems to use.)

Thanks in advance for any code help on this!!!!

p.s. I did put in the requisite 3 hours of work before bothering y'all with this.

Forum Discussion

Example files: Generating a certificate from Storyline

236 Replies

Related Content

AI Assistant in Storyline 360: AI-generated Captions

Generate Quiz Questions with AI Assistant in Storyline

AI Assistant in Storyline 360: AI-generated Alt Text Suggestion

AI Assistant in Rise 360: AI-Generated Text-to-Speech

Create AI-Generated Audio in Rise 360

Learn

Connect

Discover

Community

Company

Trust Center