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
Shyam Saha

Hi,

I have tried to replicate what Steve has done.

In my file I am not able to generate any information in the certificate.

I want to show the name and result in the certificate.

I am not able to figure out where I am going wrong. Could any one please help me to locate the issue ?

Thanks.

Jeffrey Hurt

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!

Fred Janssens

Hi all,

I have the same issue as Shyam and cannot figure out why the Certificate only shows the image and not the content of the javascript (the name and the text replacing - you have passed The Grueler!For that feat, you deserve a break. Take 30 seconds. Then get back to work!)

No nails left, please help!

Thanks in advance.

Jeffrey Hurt

Hi Fred,

You have to place the file on a web-based server before the JavaScript works. It doesn't work on your local machine or network. Once I uploaded mine to the LMS, it worked just fine. It's slightly frustrating because you have to upload it to see any changes/modifications. Hope that helps you.

Jeffrey Hurt

Hi Leslie,

I was trying to do the same thing, but it seems that the HTML code is less than perfect for this because not all browsers will force the page to print in landscape. In the style section there is a command you can use that looks like this:

@page {
size: landscape;   /* auto is the initial value */
}
It works on some browsers, but not all. There may be a way to get more browsers to respond, but my HTML knowledge is limited. We opted for help files telling people how to print landscape.
Steve Flowers

In newer browsers you could rotate your print elements so that it displayed vertically. You could get a portrait print this way with some careful planning. Again, would depend on the browser We've gotten away from the portrait certificate expectation. Most folks won't hang these up anyway, so we modeled a certificate that could easily be punched into a binder for safe keeping. Most folks want these for their records.

Leslie Adams

Thanks. This is for a project that is being delivered via CD to users around the country where we have no idea what browser they will be using. Since it is via CD and there is no tracking, they like the idea of a printable, "displayable" certificate, but the portrait orientation will just have to do!