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
Richard Batts
almost 5 years ago06/12/19 at 5:45 pm (UTC)

Hey Owen,

Thank you for sharing this idea for how to create a certificate of completion. I tried your suggestion, but was not successful. Could you look at the JS and see if I missed something? I pretty much used yours with a couple of alterations.


Thanks

Richard Batts

Ian Bell
almost 3 years ago06/17/21 at 7:16 am (UTC)

Hi Owen. I know it has been a number of years since you posted this solution to printing a Certificate from Storyline via html.

I am trying to do just that and I have tried to follow a simplified version of your html code. I already have the variables I need in a certificate created in Articulate 360. I am just trying to print this screen so was hoping that the following html code would work but I cannot get a print screen to activate.

Can you help....

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

 myWindow.document.write(contents);

myWindow.document.close();

myWindow.focus();

myWindow.print();

OWEN HOLT
almost 3 years ago06/17/21 at 1:38 pm (UTC)

The code looks right to me. Can you share a file so I can peek under the hood?

I have a Rise demo that IF your browser security setting are right, shows you how to pass data between Storyline blocks. At the end of the course, I have an HTML certificate (also generated from a Storyline block). 

You can check it out here: https://360.articulate.com/review/content/b56569f8-4679-4c5c-a937-738eb98cc3fa/review 

The certificate code I'm using looks like this:

// Get variables from StoryLine.
var player=GetPlayer();
var studentName=player.GetVar("StudentName");

// Get date from computer and format it for the certificate.
var date = new Date();
var certificateDate = ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear();

// Open a print window
myWindow = window.open("","Print","width=1056,height=816,scrollbars=0,resizable=0");

// Create the certificate by loading all the HTML code into a single variable.
var contents ='<html><style> @page {size: landscape;}</style><body><div style="width:900px; height:660px; padding:20px; text-align:center; border: 10px solid #0c4da2"><div style="width:850px; height:610px; padding:20px; text-align:center; border: 5px double #0c4da2"><br/><span style="font-family:Lato; font-size:45px; font-weight:bold">Certificate of Completion</span><br/><br/><br/><br/><span style="font-size:30px"><i>This is to certify that</i></span><br><br><span style="font-size:45px"><b/>';

contents+=studentName;

contents+='</span><br/><br/><span style="font-size:30px"><i>has completed the</i></span> <br/><br/><span style="font-size:45px"><b>Passing Variables<br>Between Storyline Blocks in Rise</span> <br/><br/><span style="font-size:30px">course.</span> <br/><br/><br/><br/><span style="font-family:Lato; font-size:30px"><i>Completion date:</i></span><br><span style="font-family:Lato; font-size:30px"><i>';

contents+=certificateDate;

contents+='</i></span></div></div></html>';

// Write the contents to the window and execute the print command.
myWindow.document.write(contents);
myWindow.document.close();
myWindow.focus();
myWindow.print();

Anne Kalinic
2 years ago03/11/22 at 12:10 am (UTC)

Hello Owen,

I've been reading this interesting thread, but I'm new to javascript and I didn't found how to reach the next step.

I'm trying to print a course certificate but I have issues with graphics not being printed at all, in Firefox or Chrome. I linked a jpg background image file to an html file. I don't understand why the image appears in the browser, but is not printed.

Could you please help ?

Here is the html code :

<!DOCTYPE html>

<script type="text/javascript">

/*Get string from URL*/
var learner_info = window.location.href.split('?print=')[1];

/*Split string into variables*/
var learner_name = learner_info.split('&')[0];
var cert_date = learner_info.split('&')[1];

/*Send print request to browser if possible*/
window.onload = function() { window.print(); }
</script>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Impression certificat</title>
<style>
body{
margin:0;
padding:0;
}
.contenant{
width:100vw;
height:57vw;
font-family:'Times new roman',serif;
background:url('certificatbackground.jpg');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.contenant p:nth-of-type(1){
font-size:36px;
font-weight:bold;
}
.contenant p:nth-of-type(2){
font-size:18px;
}
.contenant p:nth-of-type(3){
font-size:30px;
}
.contenant p:nth-of-type(4){
font-size:25px;
}
.contenant p:nth-of-type(5){
font-size:30px;
}
.contenant p:nth-of-type(6){
font-size:20px;
}
</style>
</head>
<body>
<main class="contenant">
<p>This certificate</p>
<p>certifies that</p>
<p><script type="text/javascript">document.write(unescape(learner_name))</script></p>
<p>has completed</p>
<p>the course"</p>
<p> date <script type="text/javascript">document.write(unescape(cert_date))</script></p>
</main>
</body>
</html>

Thank you.

Sign In to Reply