This blog post shares insights on how to generate a certificate in articulate storyline using html and javascript.
Articulate Storyline allows you to print certificates using triggers and coding in HTML and JavaScript. But, this tool does not come with default certificate templates. One of our clients wanted us to create a customized design layout for certificates. The client wanted the certificate to be generated from his LMS,containing details such as the learner’s name that are user-specific.
They also wanted the certificate to contain the date of completion of the course, the learner’s signature and the company’s logo. It is not possible to satisfy these requirements using the default features of Articulate Storyline. Hence, we generated the certificate using the dynamic unique code. Let’s see how it was done.
To do this task, you need have the:
- Basic knowledge of Articulate Storyline
- Basic knowledge of JavaScript and HTML
- Knowledge of the LMS used, in order to test the course ( knowledge of uploading and testing is required).
Steps to Generate the User Certificate in the LMS
- Open Storyline and click Create a new slide.
- Create a button andname it as Print Certificate.
- Add a trigger to the Print Certificate button, as you can see in the screenshot below
- Click add /Edit JavaScript button (highlighted in the above image)
- Copy and paste the code, which you can see below, to call the information about the user and the course so that these date can be presented on the certificate
Code to get the information from LMS
//grab the LMS object
var lmsAPI = parent
//ask the LMS object to get the name
var rawName = lmsAPI.GetStudentName();
//the name comes very formal "Last, First"
//we will fix that by sticking the name into an array
var nameArray = rawName.split(",")
//then we save it the other way round "First Last"
var niceName = nameArray[1] +" "+nameArray[0];
//now we grab the Articulate player
var p = GetPlayer();
//finally we set our Articulate var to our username
p.SetVar("username",niceName);
This is the code to Open the print window, and from here you can print the certificate.
myWindow = window.open(“”,”Print”,”width=900,height=600,scrollbars=0,resizable=0″);
To assign the current date to the certificate.
var currentTime = new Date();
var monthArray = new Array ("January","February","March","April","May","June","July","August","September","October","November","December");
var month = currentTime.getMonth();
var theMonth = monthArray[month];
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var dateString= day + " " + theMonth + " " + year;
To add the the content to certificate such as “This certificate has been awarded to” “ For successful completion of the course”. Add the HTML and JavaScript code for the content to be displayed on the certificate.
var contents = "<!doctype html><html><head><style>@media print{ @page {size: landscape; margin: auto;}";
contents += "<style type='text/css'>";
contents += "</style>";
contents += "<body>";
contents += "<div style='float:left;'><img src='https://www.commlabindia.com/_testing/mobiletest/samples/yogesh/tt/certificate_baner.jpg' /></div>";
contents += "<div><br><p class='bodytext'><center><h4>This certificate has been awarded to<h4> </p></div>";
contents += "<div><center><h2 style='color:#330066;'>"+niceName+"</h2></div>";
contents += "<div><p class='bodytext; color:#F10408;'><center><h3> For successfully completing the course </h3></p></div>";
contents += "<div><br><p class='bodytext'><center><h2 style='color:#660033;'>BUILDING A POSITIVE WORKPLACE CULTURE</h2> </p></div>";
contents += "<div><br><center><h2><p class='normalred'; style='color:#FF0000; margin-bottom:70px;'>Award Date: '"+dateString+"'</p></h2></div>";
contents += "<div style='float:left;'><br><br><img src='https://www.commlabindia.com/_testing/mobiletest/samples/yogesh/tt/logo.jpg'/></div>";
contents += "<div style='float:left;text-align:center;position:relative;left:20%; '><img src='https://www.commlabindia.com/_testing/mobiletest/samples/yogesh/tt/seal.png' width='150' height='150'/></div>";
contents += "<div style='float:right;'><br><br_____________<br> <br>Training Manager</div>";
contents += "</body>";
contents += "</html>";
This is the code to execute the print command.
myWindow.document.write(contents);
myWindow.document.close();
myWindow.focus();
myWindow.print();
- Publish to SCORM or AICC and test in LMS
After you excute this code , upon clicking the Print Certificate button, you will have a certificate like this.
Note: In some systems, by default, JavaScript is not enabled. So, make sure you have JavaScript enabled before testing this code offline.
Suggestion: To get clear output, check this in your LMS.
Hope this post gave you an idea of how to generate certificates from your LMS. Please share your views.
