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:

Here is a screenr: LINK Published course on Google Drive is here: LINK And attached is a basic text guide to the java. For the HTML, and graphics, you are on your own.

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.

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

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

OwenHolt
Super Hero
11 years ago

Sorry for the late response; I was unsubscribed from this thread. There is a printing example (with story file) in this thread: LINK

The concept is the same, the certificate just takes more code (see javahelp text file in response above).
OwenHolt
Super Hero
11 years ago
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.
AshleyChiasson
Community Member
11 years ago
Great idea, Owen! This will come in handy with one of my current contracts
OwenHolt
Super Hero
11 years ago

Let me know if you need any assistance or further clarification.

Everyone seems to like a certificate.
MarkWilson2
Community Member
11 years ago

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
OwenHolt
Super Hero
11 years ago
Let me see what I can find that doesn't contain proprietary information in it.
OwenHolt
Super Hero
11 years ago
Try these files.
certificate.zip39 KB
OwenHolt
Super Hero
11 years ago
With this story
print-certificate-test.story3 MB
MarkWilson2
Community Member
11 years ago

Owen,

Thank you VERY much for that.

I appreciate it a lot.

Mark
RussSawchuk
Community Member
10 years ago
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