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 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:
’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);
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!
wow this is awesome
Hello, I know this post is 3 years old but I am still struggling with creating a certificate for my course. I wondering if anyone can help me please. I have read all the posts and watched the video as well but I'm still struggling with this. Particularly, I cannot locate the java in SL that Owen talked about because I'm using Storyline 360. Any suggestions will be greatly appreciated. Thanks.
Maybe I can simplify?
The certificate is created in HTML. Step one is to focus on designing that and you will need something other than an Articulate product for that. As far as I know, they do not have an HTML program yet (but I am not sure of what is included in 360).
For the JavaScript, you are essentially using the JavaScript to build your certificate page using the html you've created. You won't find the JavaScript in StoryLine. What you will find in JavaScript is a trigger that lets you execute it.
I hope that helps. If not, feel free to email me or share your file here.I have created the certificate in HTML using the WordPress html editor. My problem is how to execute the JavaScript. Thanks for your help. Please see my Story file attached.
Currently, your trigger action is set to "Print results" as shown below.
Click the action drop down (where it says 'Print results') and select 'execute action script' in the drop down.
Add the JavaScript. Click the button next to script that is labeled '...'
Copy and paste the following based on your html.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 contents ='<!doctype html>';
contents+='<html><head><meta charset="utf-8"><title>Course Certificate</title>';
contents+='<style type="text/css">';
contents+='@media print {#printPageButton {display: none;}} </style></head>';
contents+='<body><div><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></div><div margin="0 auto"> <img src="http://www.northernc.on.ca/leid/wp-content/uploads/2016/08/leidbanner16.jpg" align="middle" alt="Northern College Logo" /></div><h1 style="text-align: center;"><strong>Certificate of Completion</strong></h1><h2 style="text-align: center;">This Acknowledges That</h2><p style="text-align: center;">'+username+' has successfully completed</p> <p style="text-align: center;">'+course+'</p> <p style="text-align: left;"><img src="http://www.northernc.on.ca/leid/wp-content/uploads/2017/07/line-1.jpg" alt="line" />Vice president, academic and student success</p></body></html>';myWindow.document.write(contents);
Be sure that your .story file has a variable called 'CourseName' that stores the name of your course and another one called NewName that holds your learner's name.
Hi Owen,
Thank you so much for your help. I never thought I could get this certificate done until I came across your post. Thanks also for your detailed instructions. There's a problem with the certificate I generate, I can't get the certificate to pull out the student's name. Please help me on this. What should I do? I already created a var name called NewName but how do fill it with the student's name?
Thanks for your help.
Email: arowolok@northern.on.ca
Hi Owen,
Thank you, thank you! If I may ask, are you a professional teacher? You explain the steps with so much ease. Thanks for your help. Email: arowolok@northern.on.ca
Owen,
I have a course with multiple paths depending on the functional department.
However, I end up with multiple results, Results.ScorePercent, Results1.ScorePercent...etc.
What is the syntax for accessing the specific ScorePercent variable? When I use GetVar("Results.ScorePercent") or GetVar("Results1.ScorePercent"), I receive an error stating java resolver can't resolve the path for Results or Results1.
FYI - The is my first attempt to write java script.
Thank you in advance.
On each of your results slides, I would add a trigger to set a StoryLine variable equal to the appropriate result.score percent. Then, I would pull your custom StoryLine variable into the certificate. This way, no matter which path they go down, the results will be found in your custom variable and available to the certificate.
Thank you Owen. I did try that, however, my goal is to pass an accurate
value in Results.ScorePercent to the LMS and it appears that I can't
access that variable. I'm going to punt and either break it into multiple
courses or make the quiz more general. If there is anyway to alter the
value in Results.ScorePercent using SetVar() or some other command, that
would be great.Raymond P. Guido, Jr.
The Aspect Phoenix Group, LLC.
email: raymond.guido@tapgllc.com
Cell: 203 395 5026
Got it, so the issue isn't just the certificate, it is also having one master results slide for the LMS.
You could potentially use a background "ghost quiz" to control this. Essentially, the concept is that the quiz questions the user sees control T/F selections on questions they don't see. The results slide is for the hidden quiz. Thus, one invisible master quiz (controlled by multiple quiz options) which feeds a visible results slide.
You can learn more about the concept here and here.Owen,
Thank you for your help. I was able to successfully create a "ghost"
question that I auto-answer based on variable settings. However, the
"ghost" question slide appears for milliseconds before it moves on to the
results slide. I trigger it to move on using the trigger "Submit
interaction True/False when timeline reaches .05 seconds. Is there a
better way to get it to seamlessly to submit the answer and move to the
results slide?Also is there a way to clear the radio buttons on faux-quiz slides after
moving to the next slide?Thanks in advance.
Raymond P. Guido, Jr.
The Aspect Phoenix Group, LLC.
email: raymond.guido@tapgllc.com
Cell: 203 395 5026
