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
I have any required images or other inputs hosted on a SharePoint. The course itself is zipped and hosted in our LMS (Saba). The codes use a full path for the images and other inputs and this works just fine.
Hello,
I need to be able to do this on CD. How can I set it up since everything seems to be for the LMS.
Thank you,
Melissa
I haven't tested it, but I would assume relative links should work just as well.
They don't. When you publish to CD using Steve's it does not pull any of the information into it. I have attached my file.
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.
Thank you Owen. I'm not a scripting person either.
I sent Steve an email yesterday and I am waiting to hear back.
Even when I publish to the Web, I can't get the information to pull in.
Can someone take a look at my file and let me know what I am doing wrong?
Thanks
Melissa
I haven't had a look at your file yet... but there is another option here that might work for you; especially for CD.
@Keith Kemsley
position: absolute;
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
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!
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
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
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:
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!!
Hi everyone,
Thank you for the certificate file! It was very helpful!!
I was wondering if there was a way to create a PDF certificate (ie... send the data to a pdf, instead of an html document?)
Thanks!
Susan
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
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("
");.
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
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();
Hi, I make a certificate and this work on Chrome, but doesn't work on IE 7 and 8. Has someone made any fixes?
Hello,
is there a possibility using this solution to generate this certificate to PDF.
I know this solution https://community.articulate.com/discussions/articulate-storyline/saving-storyline-variables-to-a-pdf
but it doesn't work on our server so I want to try generating it from html file.
Regards,
Damo
Hi
Please could you explain how and where you pass the 'learner' variable value to the certificate?
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
Hi Everyone is there a way to see results without a web based server or a LMS?
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.