Forum Discussion
Create a Course Certificate in StoryLine! (with Java and HTML)
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 conte...
’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?
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);
