Create a Course Certificate in StoryLine! (with Java and HTML)
Apr 17, 2014
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
Thanks Nancy, glad you found it useful. The link Lisa provided is to the newspaper template that I used. :)
Thanks for the assist 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.com
This 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!
Is there anyway that these can be stored on a server so that an Administrator can recall them later?
I am using Notepad++ so I will try to create or write code (I am very new to this) in order to create an html file. How does that work with the Powerpoint file that I created? I am not sure how they both will work together before I place that information in Storyline.
This post was removed by the author
Thank you so much for this post!!
I am trying to figure out a solution to print a custom certificate. I created a certificate in Dreamweaver and then wrote out the Javascript per this thread but the "Execute Javascript" trigger is not launching anything. Would anyone have the time to take a look at my code and let me know what is wrong? I am not an experienced coder but I am trying to figure this out.
Thank you for you time!!!
Do you already have an LMS solution? If so, check this link here:
https://community.articulate.com/discussions/retrieve-lms-user-name-as-variable#258304
I am non-technical (which is why I started using Storyline in the first place) and worked on this several months ago and nothing would work. I really wish that Articulate would listen to its customers and release this as a feature. Lectora Inspire has this feature.
Checkout elearninglocker.com
James Finder
Founder, PLExD LLC
p: 8504455336
s: http://getplexd.com
e: james@getplexd.com
I have followed the steps above, and I can get it all to work when publishing to cd.
The problem is when I export to web or LMS and host it on an LMS, the images do not appear when printing. I have tried to put them in a web object and link them - no good.
They currently have the full address linking them, but it doesn't show.
Does anyone have any idea why this is and how I can fix it?
my code for the image link is:
contents+='<td width="30%"><center><img src="http://elitefireonline.com.au/certificate/Signature.png"></center></td>';
Hey Matt -
This image link doesn't show anything for me - it's blank.
http://elitefireonline.com.au/certificate/Signature.png
If you're using a modern browser to run the output, right-click the certificate page and choose inspect. This will bring up a developer panel. Click the console link. Do any red lines appear here?
One of the potential causes of failed loads is mixing http and https. If your LMS launches the window as HTTPS (very likely) and the contents of the page are attempting to load from HTTP, the browser could be shutting that down to protect the user.
Hey Steve thanks for the tips. The blank image was my fault: http://elitefireonline.com.au/certificate/CertificateBanner.png This one works.
My LMS is Moodle, and definitely uses https. Is there a way to use the links with https?
Do I need a relative link? I don't know a lot about these and where I could put it. I am publishing as scorm.
Hey Matt -
One way to run relative links is using a Web Object to "carry on" files. Pretty easy:
This will become your relative reference. Example:
story_content/WebObjects/5uVWX7D/heading.png
Steve, thanks for your help. Awesome!
It turns out that it works in the edge browser but not in Chrome. Is there anything that can fix this? It seems like I am so close yet so far...
When you right click on the popped up certificate and click Inspect, then choose Console, anything appear in the console in red?
Ok this is weird, I press the button to print the certificate, and the print window has no images. The new window is underneath this and HAS images, and when I close it and press the print button again - both work!
It seems to open the print window before the images are loaded, but second time around they load.
It shouldn't need to open two windows. That's strange behavior:)
Have a look at this
Try commenting out the window.print line. Do the graphics load when the print function isn't called?
//myWindow.print();