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
Glad you found the information helpful. I also found Dreamweaver to be a big help with the HTML / certificate design work.
Hi Owen,
I found your post after trying several other solutions. Initally I did not want a new HTML external file solution but this is best as some browsers will load the Flash version and the JS trigger allin one don't work.... hrs spend here - avoid.
In the interests of helping others... and repeating some of the above:
1) make a button for printing the certificate
2) add a JS trigger with the code:var newWin=window.open("certificate.html", "certificate", "status=0,scrollbars=0,width=820,height=620");3) make a HMTL + JPG file and save it into the root directory - same as your story file. - attached
4) I've added variables to the HTML file.... you'll need your own variables created in SL eg %name% as these are pulled into the opened window. Make as many variables as you want and mod the HTML. Mod the stylesheets to please.
I am still struggeling with (it works fine but):
document.write("<div class='result'>"+learnerName+", <b><br/><br/><br/></b>"+CourseName+" module. <br/> "+systemdateDayOfWeek+" "+systemdateDay+" "+SystemTime+" "+systemdateMonth+" "+systemdateYear+"</div>");Errors if I have more than one of these (no content displayed) - even an exact duplicate. I am no JS expert so can't resolve this...
Ideally I'd like several
document.writecalls each with different classes so the above is a make do solution for the moment.Oh, the certificate.html MUST be online and variables set up in html file and SL.
Hello Lance,
Thanks for your example.
I was trying your example and creating a certificate shared by you. I just want to print a name in the shared certificate. But I am facing a problem in printing a name on it.
Here I am sharing a .story file and as well as the cerificate.html file.
I have created a print button in the failure feedback layer and In the first slide, I have created a name reference field to pull the name from it and print in the certificate.
I request you to please have a look and help me in this.
Thanks
Apoorv
I am at the beginner level with HTML so I don't know the coding to use in NOTEpad plus.
Hello Owen,
thanks again for sharing!
Thank you so much for sharing. It was exactly what I needed and works perfectly. I do have an additional question. Where did you get the clip art of the newspaper you used in your example? I would love to use it for a project. Any info about it would be greatly appreciated.Thanks Nancy, glad you found it useful. The link Lisa provided is to the newspaper template that I used. :)
Thanks for the assist Lisa!
Hi Nancy,
There's a newspaper template in the download section of the community. Check it out.
https://community.articulate.com/download/newspaper-graphic
Lisa
Thank you Lisa!
Owen thanks so much for sharing your work and time. I'm wondering if you can help me out. I'm trying to do what you did and when I try and execute the JavaScript, nothing happens. I've attached the script code.
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.
Hey James, I'm just getting back from the holidays but it looks like Steve has you covered.
Thanks Steve!This community is AMAZING!!!!!!!!!!!!!!!!!!!!!! Thanks so much!
