Example files: Generating a certificate from Storyline

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.

220 Replies
Palani Velu

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

Manjeet  Randhawa

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

Roger Ho

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!

Keith Kemsley

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.

Kim Alison

Hi,

I've been trying to get this to work - at the moment just using Steve template and not attempting any changes yet. The text is displayed and my name but not the picture.  I just see a black box with a red cross in the top left corner - so am assuming that the picture is being stopped somewhere. Is there a way around this?

Thanks,
Kim

Patrick Labelle

Hi everyone. I've been able to get Steve's original solution to work, with one exception: the certificate background image is showing, but none of the text is. No title, no body text, no variables (first/last name, date). I've attached my html file here in case someone can help.

Thanks!

Patrick

Carolyn Lewis

I can't see where anyone has answered the question asked by quite a few people about how to add the score to the certificate. I've got these entries in the html but i can't get it to work:

.score {
    position:absolute;
       
        left:520px;
    top:500px;
    width:320px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:40px;
        color:#cc00ff;
    z-index:2;

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

"+learnerScore+"
");

I'd be grateful if anyone can help as I'm going round in circles with this.

Carolyn Lewis

Hi Steve

I've had a go a what you suggest, but I'm struggling a bit. The score is still not displaying on the certificate so I'm obviously doing someing wrong. I've taken the following steps:

I set up a new variable called Score and assigned it a numeric value

I then set up a new trigger which 'adjusted' the variable 'Score' equal to the variable Results1.ScorePercent when the user clicks the object "Create My Certificate".

Then in the html I have:

.score {
    position:absolute;       
        left:520px;   top:500px;   width:320px;   font-family:Arial, Helvetica, sans-serif;   font-size:40px;        color:#cc00ff;   z-index:2;}

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

"+learnerScore+"
");

Can you point out where I'm going wrong.

Thanks for your help.

OWEN HOLT

Totally missed this thread and went about this in a slightly different fashion. Instead of calling up an html page that runs the calls to storyline for the variables. I used java to create the html page from within storyline.

See my solution here: Link to Thread

I used a table in my example because the background image was not printing in I.E. but I might give it a go again using Steve's most excellent html.

D Sutton

Thanks to everyone in this thread for the collaboration. I was able to implement this method and it works wonderfully - in Firefox and Chrome. But in IE, the "Print Certificate" button I added to my results slide is unresponsive. Nothing happens when it's clicked. In Chrome and FF, clicking it launches a new broswer window with the certificate.

Since the training is playing in Moodle as a flash module, there's no browser error to help me troubleshoot the problem. Has anyone else had problems with this method working in IE? Any help or guidance is greatly appreciated!

Thanks.

Tria Vang

Hi,

I followed the steps in the post, but when the certificate is supposed to pull up, I get an error. My module eventually is zipped and uploaded into an LMS where it is hosted. Will the steps in the post still work for that? Also, is the "published output directory" different from the output folder that is created when I publish my articulate module? 

Thank you,

Tria

D Sutton

Hi Tria,

The zipped module uploaded to your LMS shouldn't be the cause of any problems. That's how I have mine working as well (using Moodle) and it works just fine. 

Not sure how others have done this, but I simply uploaded the 2 files (the .html and the certificate image) into a folder inside the same host where my Moodle installation lives. For example, my files live at http://www.mydomainname.com/certificate/certificate.html and http://www.mydomainname.com/certificate/certificate.jpg. /certificate is my "published output directory". 

So here's how my javascript reads:

var newWin=window.open("http://www.mydomainname.com/certificate/certificate.html", "http://www.mydomainname.com/certificate/certificate.jpg","status=0,scrollbars=0,width=950,height=605");

Hope this helps!