Create a Course Certificate in StoryLine! (with Java and HTML)

Apr 17, 2014

OWEN HOLT
By OWEN HOLT

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
Steve Flowers
almost 9 years ago04/18/14 at 10:12 am (UTC)

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.

OWEN HOLT
almost 9 years ago04/22/14 at 7:36 am (UTC)

One thing I noticed is a problem with your quotation marks. You need to look for the opening marks that java will see and make sure that you are not closing it in your html code. For example, here is a line from your current code (with a space added after the

Contents + = '';

The quotation opens before and closes right after. Text/css isn't contained in quotes at all as written. To solve this, use single quotes (') for your javascript and double quotes (") for your html or the other way around. Like this:
Contents + = ''; 

OWEN HOLT
over 8 years ago07/15/14 at 10:12 am (UTC)

By the way, I've successfully deployed this using a relative link. I have my certificate graphics in a folder that I drop into the published files folder. For our LMS, I actually had to include the root folder as part of the relative link path. I discovered this by using a traditional relative link path and publishing the course. The certificate launched with the nice "red X" everywhere a graphic was supposed to be. Looking at the properties of the red X gave me the expected path the window was using to find the graphics. I updated the code, republished, and boom.... the certificate works great.

Mark Wilson
over 8 years ago09/12/14 at 3:03 am (UTC)

Hello Owen,

Would you by any chance have the storyline file you could share with me on certificate example at the top of this thread?

I am not great with javascript but am better editing code to fit my needs than writing from scratch.

I appreciate if you don't want to share with me but please let me know either way.

Thanks

Mark

Russ Sawchuk
8 years ago03/30/15 at 1:56 pm (UTC)

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

 

Lance Elliott
over 7 years ago08/30/15 at 3:02 pm (UTC)

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.write calls 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.

Nancy Oliver
over 7 years ago11/12/15 at 10:29 pm (UTC)

Hello Owen,
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 again for sharing!
Sign In to Reply