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)

JamesFinder-b89
Community Member
9 years ago
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.

certif.txt2 KB
OwenHolt
Super Hero
9 years ago
Hey James, I'm just getting back from the holidays but it looks like Steve has you covered.
Thanks Steve!
JamesFinder-b89
Community Member
9 years ago
This community is AMAZING!!!!!!!!!!!!!!!!!!!!!! Thanks so much!
MatthewPolaniec
Community Member
9 years ago
Is there anyway that these can be stored on a server so that an Administrator can recall them later?
- JamesFinder-b89
  Community Member
  9 years ago
  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
HelenaSmith
Community Member
9 years ago
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.
staceykramer2
Community Member
9 years ago
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!!!
certificate_javascript.txt3 KB
StephanieLong
Community Member
9 years ago
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.
- JamesFinder-b89
  Community Member
  9 years ago
  Checkout elearninglocker.com
  
  James Finder
  Founder, PLExD LLC
  p: 8504455336
  s: http://getplexd.com
  e: james@getplexd.com
MattLynch
Community Member
9 years ago
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>';
SteveFlowers
Community Member
9 years ago
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.
MattLynch
Community Member
9 years ago
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.