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
Nancy Woinoski
over 11 years ago07/27/12 at 11:23 am (UTC)

@Steve, I pulled down your story file and the attachments but can't seem to get this to work for me.

The certificate launches ok, but not of the text you have defined with the document. write command display.

So All I am seeing is the background and nothing else.

I've tried it on all my browsers IE, Firefox, Chrome and Safari and none of them display the text. I even uploaded it to the web just to see if it was some kind of security thing when running locally  but that did not make a difference.

Dave Fulle
over 11 years ago08/02/12 at 8:04 am (UTC)

Neither of these actually work on an LMS - I've tried accessing the course on our LMS in IE and Firefox. I did not modify the pages that were in your documents - just put the pages into an existing course with a quiz - put these after the quiz and put Steve's files in the output. You can type your name but in the first example from Steve, the background never displays and the name is not drawn in. In the second example from Jefferey, again you can type your name, the name is never brought in, but the slide does have a background - but doesn't print.

Dave Fulle
over 11 years ago08/02/12 at 10:49 am (UTC)

So I did get everything to work now. I had to go into your HTML file, change learner name get VAR from "learner" to  "TextEntry7" and also change the file name of the graphic from "certificateBG.gif" to "CertificateBG.gif" to match what the HTML file was calling.  After doing that, the name was called in properly, the background displayed, and everything printed!

Steve Flowers
over 11 years ago08/07/12 at 8:32 am (UTC)

Hi, Asif - 

You can but you'll need to ensure the Flash security sandbox is allowed for your local working directory/directories.

http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html

If your local directory isn't specifically added, the Flash player won't allow interactions between the Flash movie and the browser.

Dave Fulle
over 11 years ago08/10/12 at 5:45 am (UTC)

HI Asif,

In the HTML file (open with Notepad or something) change learner name get VAR from "learner" to  "TextEntry?" (you'll need to match the text entry box in the Storyline project to the one in the HTML file so I can't give you that exact TextEntry name) and also change the file name of the graphic from "certificateBG.gif" to "CertificateBG.gif" to match what the HTML file was calling.

Hope that helps!

asif raja
over 11 years ago08/13/12 at 1:02 am (UTC)

Dave Fulle said:

HI Asif,

In the HTML file (open with Notepad or something) change learner name get VAR from "learner" to  "TextEntry?" (you'll need to match the text entry box in the Storyline project to the one in the HTML file so I can't give you that exact TextEntry name) and also change the file name of the graphic from "certificateBG.gif" to "CertificateBG.gif" to match what the HTML file was calling.

Hope that helps!


cheers Dave. will give this a go.

Nancy Woinoski
over 11 years ago08/13/12 at 5:57 am (UTC)

Well, I finally figured out why my variables were not passing to the certificate.html.  I was trying to pass a numeric variable with a score as well as the text variable containing the learner's name.

To get this to work, I had to add a  .toString();  to the numeric one as follows:

var scoreTotal=player.GetVar("userScore").toString();

Gerry Wasiluk
over 11 years ago08/20/12 at 7:20 am (UTC)

Hey, Steve!    Got a couple of questions on this.

Have a potential client possibly interested in this for a course that will be run through a LMS, either as AICC or SCORM 1.2.  On the generated certificate, the date of completion needs to be on it.  Using something like the JavaScript date/time function in the Quizmaker report.html, this is easy to pull out for showing the current.

However, what if the user comes back 6 months later to reprint the certificate?  We need the original completion date put in the certificate when it is generated then and not the current data and time.

On the certificate, we also need to print out a date 3 years from the completion date--as that is when the completion expires.  I'm assuming that can be done with some JavaScript?

This is for product training certification for external people using the company's products so having the right dates is crucial.

I'm thinking with variables, resume, and some creative JavaScript this might be all possible?

Steve Flowers
over 11 years ago08/20/12 at 7:26 am (UTC)

Hey, Gerry - Should be totally possible. You'll want to add some slide logic that commits the date of completion and doesn't let them overwrite that completion until another fresh attempt / new enrollment. I'll play with it a bit later today but everything you describe should be easy to pull off

Steve

Sign In to Reply