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

AnneBlood
Community Member
12 years ago

Steve, I have been trying to use your cert. to understand how it works. I'm not getting anywhere. I'm using storyline and AO for publishing. When I launch it in AO, it says certificate.html not found. I'm not too computer saavy, especially html or php. Could you explain step by step, with screen shots if possible, how to get your .story to work on AO.

Thanks, Anne
CynthiaPhelps
Community Member
12 years ago

Hey Steve,

I love your solution, but My clients were not happy with having to print a webpage. They really want the certificate to be generated as a PDF, since their constituents know how to print and save a digital copy of a PDF.

Have you done anything like this before?

c
SteveFlowers
Community Member
12 years ago

Hi Cynthia -

Traditionally, you'd need a server side application to generate a PDF. But there's a way to do that with JavaScript. If I get some time this week I'll post an example.
CynthiaPhelps
Community Member
12 years ago
You rock, Super Hero Steve!
NancyWoinoski
Super Hero
12 years ago

Gavin Henry said:

Nancy Woinoski said:

Gavin Henry said:

Hi Steve,

i have literally copied what you have instructed to do in this thread, end result is after completing my quiz i get a pop up window with the certificate but the text entry field is not showing any of the text i input at the start. Do you know what possibly could be the problem?

I've attached the link to my document below:

http://insitupreviews.com/e-learning/QUIZ/story.html

also I've attached the folder containing the elements.

Kind Regards

Gavin

Hi Gavin, I'm wondering if you named the text variable inside Storyline properly. When you create a text entry field, Storyline assigns a default variable name to it - the first one you create is variable1, the second variable2 etc.

In Steve's example, he renamed the text field for the user name to learnerName. The variable for your text field needs to have this name as well.

Hi Nancy,

I've tried it all but i can't seem to get it working, when ever i change the name of the text field my images doesn't show and what ever text steve had in the first place reveals itself!

I'm so lost...

Gavin

Hi Gavin, sorry I did not get an update to this post in my email so did not see your response. I'll take a look at your stuff and see if I can tell where you are going wrong.
NancyWoinoski
Super Hero
12 years ago

Nancy Woinoski said:

Gavin Henry said:

Nancy Woinoski said:

Gavin Henry said:

Hi Steve,

i have literally copied what you have instructed to do in this thread, end result is after completing my quiz i get a pop up window with the certificate but the text entry field is not showing any of the text i input at the start. Do you know what possibly could be the problem?

I've attached the link to my document below:

http://insitupreviews.com/e-learning/QUIZ/story.html

also I've attached the folder containing the elements.

Kind Regards

Gavin

Hi Gavin, I'm wondering if you named the text variable inside Storyline properly. When you create a text entry field, Storyline assigns a default variable name to it - the first one you create is variable1, the second variable2 etc.

In Steve's example, he renamed the text field for the user name to learnerName. The variable for your text field needs to have this name as well.

Hi Nancy,

I've tried it all but i can't seem to get it working, when ever i change the name of the text field my images doesn't show and what ever text steve had in the first place reveals itself!

I'm so lost...

Gavin

Hi Gavin, sorry I did not get an update to this post in my email so did not see your response. I'll take a look at your stuff and see if I can tell where you are going wrong.

Hi Gavin, I found one problem - you have named your certificate html document certificates.html and your code is looking for certificate.html.

So when I changed the name of the file I got this.

Looks good - but the Student's name is not coming through. You are missing code from the html to display the learner's name in the certificate.html file. It looks like it has been cut off. I tried fixing it but the name is still not coming through so will really need to see your .story file to see what variable name you are trying to pass.
REENAMITTAL
Community Member
12 years ago

Hi,

certificate is also print by the java script but it is only work in html5(all browser). and in simple html it is work in i.e browser

Please reply if you can print certificate in all browser in simple html.

Thanks
SusanStewart1
Community Member
12 years ago

Daniel David said:

Download the guide for this

Daniel, the dropbox link for this guide is "invalid". Can you please relink? Thanks so much!

Susan
StephenCone
Community Member
12 years ago

Mike Tschirn said:

I have tried everything here, to the letter. Our LMS server is not up and running yet, so I am only trying locally. There is no way that the text appears on the certificate, no matter what I try.

Hi Mike,

I apologize for not seeing this message when I was scanning this thread earlier, but I did want to pass this along. One tool that I find to be invaluable is the ADL Test Suite. You can use the ADL Test Suite to perform a local SCO test. The Test Suite will mimic a SCORM compliant LMS and you can modify settings such as the user-name, etc prior to launching the SCO. Just make sure you point to the index_lms file before launching the test.

It's usually the first tool I reach for when I need to test or verify SCORM functionality/interactions regardless of the development tool that was used to create the courses.
felicityburke
Community Member
12 years ago

Hello,

Forgive me if I am repeating a problem, but could someone check my javascripts below? This is on a slide trigger in Storyline Articulate to execute when the timeline starts.

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var dateString=day + "/" + month + "/" + year;
var player = GetPlayer();
player.SetVar("SystemDate",dateString);

I have a print button on my certificate with this trigger-execute javascript when user clicks button

"window.print()"

within the certificate I have name variable which works

%FirstName% %LastName%

and date variable which works

%SystemDate%

The certificate looks fine, the autofills work - it will just NOT PRINT from my print button in the LMS or elsewhere.

Is there a quick fix I am missing???