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:
With this story
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();
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();
To attach graphics (or pretty much anything) in a Web Object folder that'll publish to a consistent path every time:
1) Make a folder. Add an index.html file to that folder. It can be a blank file. Just needs to be named index.html
2) Add your other files (you can add all that you want to this folder including sub folders)
3) In Storyline, add this folder as a Web Object to one of your slides. Move it off to the side if it's a slide that will be visited.
4) Right click the web object and select WebObject > Open.
5) In the window you'll see a URL open from your local file system. Just before test.html, you'll see a unique ID between two forward slashes. Copy this value. I put it in a text field on the slide above the web object.
Now you're ready to rock referencing your "baggage files".
story_content/WebObjects/youruniqueID/yourfile.ext
It'll be consistent on every publish.
Hi Steve,
I've tried this and it doesn't work for me when exporting as a SCORM 1.2 file. I've attached here a .zip containing the files I use. I'm not sure what I did wrong. Can you please help me?
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();
}
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....
Donations (or work) are accepted.
Hi Owen,
A big THANK YOU for the sample code. I was able to create a working certificate without any major problems. When I swapped out the images, the alignment got out of whack. However, I posted the code into Dreamweaver, used Design to align everything the way I wanted, and copied back the HTML code into your example. Works great!
The two biggest complaints about StoryLine that I are have are the lack of the Certificate feature and database tracking. Using javascript, I now have got both these features in my SL projects.
Thanks again.
Russ
Glad you found the information helpful. I also found Dreamweaver to be a big help with the HTML / certificate design work.
Hey James -
The opening single quotes on each of the lines is the wrong character. It's OK for the apostrophe in "driver's" but causes the script to fail. I ran a search and replace on these. Another issue is on the line:
contents+=' <div id="signaturename">
It was missing a closing single quote. Fix these and it should work. Still needs the CSS file for styling but it'll open and print.
Thanks Steve. So i just remove the ' infront of each line and it should
work?James Finder
Founder, PLExD LLC
p: 8504455336
s: http://getplexd.com
e: james@getplexd.comThis Email is covered by the Electronic Communication Privacy Act, 18 U.S.C
2510-2521 and may be legally privileged. The information contained in this
Email is intended only for the use of the individual or entity named above.
If the reader of this message is not the intended recipient, or the
employee or agent responsible to deliver it to the intended recipient, you
are hereby notified that any dissemination, distribution or copying of this
communication is strictly prohibited. If you have received this
communication in error please immediately notify us and destroy the
original message.
Nope. The character is causing the script to fail. The bottom arrow below points to the incorrect character. The top arrow points to the correct character. I made all of the replacements and added the missing quote to the attachment in my last response.
