Create a Course Certificate in StoryLine! (with Java and HTML)

Apr 17, 2014

OWEN HOLT
By OWEN HOLT

I noticed in Stephanie Harnett's most excellent post on user notes that can be printed or emailed that much of the java for the printing function was really just filling the print window with content by using html. I thought to myself, why not use this same method for creating a course certificate. So I did just that following the steps below:

1) Design a rough draft in PowerPoint (so I could see what elements I would want on the page and determine or create any graphics I would need.

2) Create graphics and publish them to the web. You will need to reference them using a full URL.

3) Create an HTML based certificate using your favorite html editor. Tables work really well. I discovered this on my 3rd try to get this right. (More on that later.)

4) In StoryLine, create a trigger to execute JavaScript

5) Use the JavaScript to create your print window contents by adding the lines of your html together (see screenr)

Publish and test.

Below is a copy of the certificate created by StoryLine. The blue text represents variables pulled form the course:

108 Replies
Steve Flowers
8 years ago02/12/16 at 1:53 pm (UTC)

OK. Looks like Chrome fires off the window print too soon. What does the script look like? Depending on the construction, you could add the window print to the launched page and fire it after the page has been written. 

 

contents+='<scr'+'ipt>'
contents+='window.print();'
contents+='</scr'+'ipt>'
contents+='</body></html>'

myWindow.document.write(contents);
myWindow.document.close();
myWindow.focus();
//myWindow.print(); comment this line

Daniel Bolia
almost 8 years ago06/08/16 at 8:08 pm (UTC)

Hi Steve,

Ref: Matt Lynch Post

I used Owen Holt method for creating html certificate via SL JS. I also incorporated your method for making the html graphic files persistent via the webobject feature of SL. Although I'm sure my html/js codes are correct, I'm experiencing the same problem as Matt Lynch when the SL output file is running from Google Chrome.

When the file is published locally and on SL Tempshare, everything works as expected in IE-11 and MS Edge on Windows 10. However, when opened in Chrome the print window will not show the graphic elements. Just as in Matt's case, if you cancel the print job the graphic elements will appear. It seems that there is a delay in loading the graphics in Chrome.

Also, I noticed from your website that you also work for the Fed in the DC Area. I hope you will have insight and perhaps possible solutions to issues related to SL and Federal Gov webserver security conflicts.

Case in point, I tried to open the same storyline output from a Gov network via CITRIX and could not get it to work in IE-11. The print function doesn't work and only opened a blank window. On Chrome I experienced the same issue as described above.

Before attempting this method of creating completion certificate, I used Ryan Lowry's well-documented PDFMake (http://pdfmake.org/#/) method; https://community.articulate.com/discussions/articulate-storyline/storyline-2-example-generating-a-pdf-certificate-for-users-who-successfully-complete-a-quiz-html5 to successfully create pdf certificate. However, when the course was uploaded to the Gov webserver, the PDFMake function would not generate the PDF certificate. I suspect that this method may be blocked by web security protocols.

I appreciate any assistance you can provide on the problems described above. Thank you in advanced for your time,

Dan

Steve Flowers
almost 8 years ago06/08/16 at 8:14 pm (UTC)

Hey, Dan - 

For the Chrome issue, I think it's got something to do with the timing of events. The print is executed before the graphics have a chance to load in. It's been awhile but I seem to recall needing to put in a slight delay or callback to wait for everything to come in before triggering the print. 

For the Citrix item. Not sure but it could be something similar with an order of operations or timing problem. Are you able to see anything return in the dev console? If a dependency wasn't loading, this would likely show up there.

Daniel Bolia
almost 8 years ago06/09/16 at 6:10 pm (UTC)

Hi Steve,

Thank you for responding to my request. Regarding the chrome timing issue, I will try a version where the print command is called by a second trigger and see if it will fix the problem.

As for the citrix issue, because the trigger only open a blank html page when accessed via IE-11, it doesn't show any error on the dev console.

I also replicated the jsPDF  method for Saving Storyline Variables to a PDF as a possible solution, (https://community.articulate.com/discussions/articulate-storyline/saving-storyline-variables-to-a-pdf), once again accessing the SL output using IE-11 on citrix proved to be problematic. In this case the trigger doesn't do anything when clicked. On Chrome, the trigger worked as designed. My SL file using the jsPDF method is attached. I find this really perplexing because if it's a security protocol than it should fail in the same way regardless of which browser is used.

I see the jsPDF method as a possible certificate solution, but the draw back is having to add the <script></script> codes to the storyline.html after publishing. I also used your webobjects embedding technique with this method to store the js files.

In the Saving Storyline Variables to PDF post, you offered an alternate solution to changing the storyline.html after publishing, please see your comments below. I did not fully understand your method for loading the script dynamically, could you elaborate on this and maybe apply it to my attached storyline file.

I will try your Generating a certificate from Storyline method next, perhaps, it will work in the citrix environment as well as direct network logon.

Thank you for your time. I'm very grateful for any assistance you are able to provide.

Dan

Text from Saving Storyline Variables to a PDF follows:

You might have some luck embedding your dependencies in a Web object and dynamically writing them into the head of your document to save having to add them after each publish. Here's the function I use to rewrite headers at run time. This doesn't work well for everything but for PDF generation it should be fine.

//where is our carry-on baggage? Find this by right-clicking the web object and choosing open. Grab the object ID from the address bar.
this.oLocation="story_content/WebObjects/66vjsN26Fjn/";
//load the scripts dynamically
function add_script(scriptURL,oID) {
var scriptEl = document.createElement("script");
var head=document.getElementsByTagName('head')[0];
scriptEl.type = "text/javascript";
scriptEl.src = scriptURL;
scriptEl.id=oID;
head.appendChild(scriptEl);
}
//only want to add these once! Check to see if the ID exists first.
if(document.getElementById('soundman')==null){
//first parameter is the script reference to add to the header, second is the object ID
add_script(oLocation+"script/soundmanager2-jsmin.js","soundman");
}

Daniel Bolia
almost 8 years ago06/09/16 at 8:13 pm (UTC)

Hello Owen,

Thank you for sharing your method for creating course certificate. Your sample files were very helpful and enabled me to implement in my course.

However, I am experiencing an issue that perhaps you may have some insight on. When I tested this method from my personal computer, it worked as designed on IE-11. However, the same file tested with Chrome appears to have some timing issue where the graphics does not appear (see attached file chrome result.png). If I choose to cancel the print job, the graphics will appear and I can right-mouse click to print.

I also tested the SL output from a government's (my client) network and computers using both IE and Chrome. I got the same result using Chrome. But worse result using IE. In the case of IE, I get a blank screen, see attached file IE result.png).

Do you have any insight into what might be causing these problems, and more importantly, how I might go about resolving them.

Thank you for your time,

Dan

Greg Walters
almost 8 years ago06/23/16 at 10:39 am (UTC)

Hi, Steve, Matt and Daniel

I'm sorry to jump into this thread/conversation.

I've been working my way through the excellent source files provided by Owen for the certificate and it works in every other browser aside from Chrome. 

I'm having the exact same issue as Matt and Daniel, within Chrome the printer doesn't print any of the graphics within the certificate - and the print window opens before it's loaded.

I've tried looking at other online sources for guidance on Javascript - but I'm a total 'newb' to coding in this language. I know the problem is with print window opening before its loaded, but I don't know how to solve this issue.

I've attached the Storyline file I've been working on with this message.

Any help would be greatly appreciated.

Many thanks,

Greg

Allisun O'Connell
over 7 years ago09/07/16 at 7:22 pm (UTC)

For everyone having the issue with images not loading in Chrome's print preview - I worked with a developer to find a fix that I'd like to share. At the end of the javascript in Owen's project file, remove the line: //myWindow.print and instead, input this code: 

if (window.navigator.userAgent.indexOf('Chrome') != -1) {

            setTimeout(function () {

       myWindow.print();

}, 450);

        }

        else {

            myWindow.print();

        }

Yoser Alarashi
almost 7 years ago05/15/17 at 4:21 pm (UTC)

’ve been going at the Java script that Owen provided, and I just can’t figure it out. I’ve already drafted the certificate design. I was hoping someone here could help.. I’ve attached the javascript to my post. The issues I am having are the following:

1)      The certificate banner script worked, however I also wanted a border. When I added a new “contents” line, the border appears as a separate page from the certificate (I of course would like for it to be on the same page!)

2)      The Course Date appears right smack in the middle and I want to get rid of that and the DMY format it is in. Instead, I’d like it to be written out on the date line that I’ve created… how do I fix that?

3)      I want the date line and the logo to swap positions. I assumed that I would have to change the </centre> code to </left> and </right> respectively, but that isn’t working... how do I change it so that they appear where I want them to?

John Pieterse
almost 7 years ago05/15/17 at 4:50 pm (UTC)

Hi everyone, not a contribution but just to say that having to make your own certificate, even in SL3 and 360, has been dragging on for as long as SL is on the market. Just upgraded to SL3 and I love Storyline and the community but this is something Articulate should really address. You can customize so many things in SL but it often boils down that a clients wants a customized certificate instead of the Excel type. 

Sorry, just wanted to have my say....

OWEN HOLT
almost 7 years ago05/16/17 at 9:58 pm (UTC)

For the date format, the attached updated sample file puts it into both formats. The JavaScript is executed on the 1st slide.

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

//get the name of the month
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var currentMonth = month[today.getMonth()];
//create the alternate date as mmmm dd, yyyy
var alternateDate = currentMonth + " " + dd + ", " + yyyy;

//create the standard numeric date as mm/dd/yyyy
//start by creating a leading zero for single digit days and months
if(dd<10) {
dd='0'+dd
}

if(mm<10) {
mm='0'+mm
}

today = mm+'/'+dd+'/'+yyyy;

//send the dates to StoryLine variables
var player = GetPlayer();
player.SetVar("SystemDate",today);
player.SetVar("AlternateDate",alternateDate);

On the last slide of this file, I added an alternate certificate with your graphics (and a border). In this example, the javascript creates an additional print button on the html certificate that will subsequently be ignored by the printer when the user clicks it to print the certificate.

Here is the JavaScript for the certificate:

myWindow = window.open("","Print","width=1000,height=750,scrollbars=0,resizable=0");

var player=GetPlayer();
var course=player.GetVar("CourseName");
var username=player.GetVar("NewName");
var date=player.GetVar("AlternateDate");
var score=player.GetVar("ScorePercent");

var contents ='<!doctype html>';
contents+='<html><head><meta charset="utf-8"><title>Course Certificate</title>';
contents+='<style type="text/css">';
contents+='h2 {font-family:"Franklin Gothic Medium"; font-size:20px; color:#333333}';
contents+='h3 {font-family:"Franklin Gothic Medium"; font-size:30px; color:#31754e}';
contents+='@media print {#printPageButton {display: none;}} </style></head>';
contents+='<body>';
contents+='<button id="printPageButton" onClick="window.print();"><img src="http://icons.iconarchive.com/icons/iconshow/hardware/128/Printer-icon.png" width="64" />Click Here To Print</button>';
contents+='<div align="center">';
contents+='<div style="width:800px; height:600px; padding:20px; text-align:center; border: 10px solid #158809">';
contents+='<div style="width:750px; height:550px; padding:20px; text-align:center; border: 5px solid #158809">';
contents+='<span style="width:100%; text-align:right"><img src="http://www.studentnutritiontoronto.ca/uploads/6/5/1/7/65174685/title-banner_orig.jpg" alt=""/></span>';
contents+='<h2><b>Student Nutrition Toronto certifies that</b></h2>';
contents+='<h3>'+username+'</h3>';
contents+='<h2>Has Successfully Completed the eLearning Tutorial on</h2>';
contents+='<h3>'+course+'</h3>';
contents+='<h2>Dated: '+date+'</h2>';
contents+='<div align="right"><img src="http://www.studentnutritiontoronto.ca/uploads/6/5/1/7/65174685/published/snt-logo-1.png" alt="" width="106" height="117" />';
contents+='</div></div></div></div></body></html>';

myWindow.document.write(contents);

Yoser Alarashi
almost 7 years ago05/29/17 at 8:09 pm (UTC)

Hi Owen,

I'm not sure what happened but I didn't get notified when you replied to this post! I really appreciate you taking the time to tweak the javascript mess I originally created. Version 2 definitely looks one step closer to what I originally wanted our organization's certificate to look like.  

If it is possible, can you make some suggestions as to how to create the attached certificate template? I would love for the logo to be on the left hand side, and the date on the right. 

I'm wondering if the border i have on the attached template is to difficult to imitate?

Thanks again for all your help. We're really excited to launch this certificate option to our learners!

Sign In to Reply