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)

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
MarkWilson2
Community Member
11 years ago

Owen,

Thank you VERY much for that.

I appreciate it a lot.

Mark
LanceElliott-36
Community Member
10 years ago
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.
certificate.html2 KB
- ApoorvJain
  Community Member
  7 years ago
  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
  Untitled1.story4.3 MB
  certificate.html1 KB
HelenaSmith
Community Member
10 years ago
I am at the beginner level with HTML so I don't know the coding to use in NOTEpad plus.
NancyOliver
Community Member
10 years ago
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!
- OwenHolt
  Super Hero
  10 years ago
  Thanks Nancy, glad you found it useful. The link Lisa provided is to the newspaper template that I used. :)
  Thanks for the assist Lisa!
LisaSmyser
Community Member
10 years ago
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
- NancyOliver
  Community Member
  10 years ago
  Thank you Lisa!