Example files: Generating a certificate from Storyline

May 09, 2012

Steve Flowers
By Steve Flowers

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
OWEN HOLT
almost 10 years ago05/20/14 at 5:58 am (UTC)

I'm no expert on javascript, but you might need to investigate if there is a way to first, identify the users CD drive letter and then second, use this information to construct a hard link to the file on the disc.

Another potential use of javascript would be to assume the drive will be one of several drives (i.e. D:, E:, F:, G and then check each for your file path, ignoring any that are not a match or that return a null result. Once you have a match, you have the path to use to the graphics for your certificate.

Steve is great at javascript challenges like this; you might consider sending him a direct message.

Yoni H.
almost 10 years ago05/27/14 at 3:41 pm (UTC)

Keith Kemsley said:

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.

@Keith Kemsley

position: absolute;

left: 0px;
text-align:center;
width:100%;
This works to make my text centered regardless of the text length.
Good luck.
Mihai Horga
almost 10 years ago06/28/14 at 1:15 pm (UTC)

Thank you Steve for the solution to generate a certificate for printing. 

Does this solution work with a story published for CD?  In other words, can a user which has only the CD published version, with no browser an no Internet connection print his/her certificate?

Also, it would be good for the user to be able to save the certificate as a pdf file for later (re)printing.  Is there any way to generate and save a pdf certificate from a CD published version?

Thanks,

Mihai

Mihai Horga
almost 10 years ago06/28/14 at 1:34 pm (UTC)

Howie Pearson said:

Steve Flowers said:

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.


Did you find a way of doing this Steve?


Hi Steve, a solution to generate a pdf certificate by a learner using the CD published version of a story, with no access to internet or browser, would be much appreciated!

Steve Flowers
almost 10 years ago06/28/14 at 2:02 pm (UTC)

Hey Mihai - 

Unfortunately, the PDF generator through JavaScript was pretty inconsistent between browsers. So I gave up on that angle. The Certificate should still appear when running from a CD. But saving to PDF could be tricky if the user doesn't have a PDF setup as a print target. 

If browsers were a little less inconsistent, would be much easier to help folks out

Arturo Aguilera
almost 10 years ago07/09/14 at 1:47 pm (UTC)

Hello,

In one word HELP!! I am trying to use Steve's file. I follow the instructions and when I open the file on Chrome and click the button, nothing happends. I have tried Firefox and Internet Explorer and nothing happen. When I tried the HTML 5, it opens the we page, but not the body. Here's what I need to do: the learner will enter information during the course, at the end, they should click a button that says "Get my Job Aid" this will open a new HTML pages with the information that they have entered. From there, the can print, or save it.

What am I doing wrong? Please HELP!

Thank you,

Arturo

Steve Flowers
almost 10 years ago07/09/14 at 4:00 pm (UTC)

Hey Arturo -

You might be running into the Flash Player Security feature. This prevents JavaScript from executing locally (any communication between the Flash player and browser is locked down). A few ways to get around this:

  • Publish to CD for local testing. Running the player exe file will bypass the Flash Security feature.
  • Publish to web and upload to a server or LMS
  • Add your publish folder to the Flash Security Settings Manager whitelist (this can be complicated for Chrome)
Chrisanna Hibbitts
almost 10 years ago07/10/14 at 8:07 am (UTC)

When I clicked the "See it in action" link, the page with the text entry is blank (does not show "enter name here"), and when I printed the certificate, it did not show my name. Is this part of the bug you referenced in your post? I love the idea and would like to make it work for my own modules, as right now, the users are printing out the certificate, but getting an output version of the player with the certificate inside... so it doesn't look like an actual certificate. :(

Thanks!!

øystein ellingsen
over 9 years ago08/14/14 at 2:01 am (UTC)

Hi!

I´m new in here, and also a rookie in Storyline. I´ve just startet to move our e-learing course from Coursebuilder to Storyline, and I must say that Storyline works much better.

At the end of our course there´s an exam that the student must pass to get a certificate.

Since I´m a rookie at this, I wonder if some of you can help me to transform my Word doc (attached) to become a certificate that I can use in our course.

The certificate should contain name and date wich the student can put in (just like in Steve´s first post shows).

As you can see if you open the file, all the text is in norwegian.

I hope that some of you can help me, or at least describe how to modify Steve´s example.

Best Regards

Øystein

Simon Tull
over 9 years ago09/18/14 at 4:58 am (UTC)

Hi All

The code works like a charm, however I am trying to add the current date to the certificate.

I have tried creating a date variable in Storyline and then calling that variable to the certificate, and I have tried calling the date using script in the Certificate HTML, but both times I end up with just a blank certificate, picture no text

Could some one suggest how and where I add the new script to the Certificate.HTML please?

I have a variable called %SystemDate% in Storyline which works using this script;

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

And I have tried this code in the Certificate.html

var learnerScore=player.GetVar("Score").toString();
        document.write("

"+learnerScore+"

");.  

I have a feeling it is how I am trying to add the additional code to the original script that is causing the problem.

Any suggestions would be gratefully received

Thanks in advance

Simon

OWEN HOLT
over 9 years ago09/18/14 at 8:22 am (UTC)

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();

Sinchu Raj
9 years ago03/23/15 at 9:40 am (UTC)

Hi Steve, thanks for the certificate, i just updated few more functionalities like score and student name (from LMS).

 

1.I have created two variables , one for username (var Studentname) and another for score(var customScore).

 

2.i Set the value for customScore in result page

 

I have added below code in print certificate button

var LMSName = parent.SCORM_GetStudentName();
var player = GetPlayer();
player.SetVar("Studentname",LMSName);

 

 

 3.called this variables in certificate.html page.

I have attached the source and published file for more reference.

Note - Student name will work only in scorm

Leslie McKerchie
9 years ago04/20/15 at 1:59 pm (UTC)

Hi Christine!

Articulate Storyline is designed primarily as an e-learning development tool to be used in conjunction with Articulate Online or your own learning management system (LMS). Tracking results in a text file or database isn't supported, but hopefully someone in the community will be able to assist you if this is what you are looking for.

Sign In to Reply