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:
108 Replies
I want to be able to do what Owen, did but I don't know how to do it, no JS or HTML experience.
Can someone help me with the detailed steps.
hi, I'm hoping someone can help.
I have create a certificate and, added it to my zip file and loaded it up to my LMS. When the certificate prints I get the learner's name, the date, but the course show null. Any ideas on how I can fix this? Not a java or HTML person. Thanks
Thanks a bunch, worked great!
I welcome the student on the first slide, so I put the code to execute at timeline start and displayed the welcome text half a second after. Is this necessary or can I just put the code and the text at the same moment in time?
Best regards,
Anyone who is still working on this or is having this problem, read this:
http://elearningbrothers.com/printing-slides-articulate-storyline-2/
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.
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
I have the issue of getting a blank page when I use the window print script
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");
}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
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();
}
Owen, this is awesome! I owe you beer! :D
’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);
