Example files: Generating a certificate from Storyline

May 09, 2012

This example demonstrates how you can take user input and generate a certificate for printing. Any Storyline variable or score can be used to generate the output. The file and file add-ins are both simple and straight forward. This will only work in the Flash based output. This will not work in the iOS output or HTML5. 

To replicate this on your end:

1) Modify the story file to your liking.

2) Extract the add-in zip file above (certificate.html and certificateBG.gif)

3) Copy these two files into your published output directory. You'll need to do this each time you publish.

This is a really basic example. You really can do quite a bit with this including adding a print button, extra fields, collecting values from the LMS like the user's first and last name. 

** I noticed a bug when playing with this file setup. I initially thought I would be able to include the certificate files as resources to avoid copy / paste surgery after publish. Unfortunately, Storyline mangled the HTML file on publish. Will be submitting this as a bug.

236 Replies
Barclay Vision

I think I'm missing something on passing variables within the trigger? Sorry if the question has been asked before, I don't have access to the storyline original project - I'm adding on to existing projects with LMS certificate - I know the PRINT button has trigger built in to pass var to report.html and that works fine - there is another button that is linking to certificate.html file that I need to send the test results variables - does this need to be setup with a different trigger to send the variables to the new html page? Or can these fixed variables be pulled from the certificate.html page without some sort of trigger?

Sorry but again I don't have access to the .story project and am relying on 3rd party to create and modify that part...

christine jeziorowski

Hi Owen, 

sorry for the delay in reply ..we had some major storms and I lost power and telephone connections for 6 days...but. All is connected again..

this would be great ..and better if I could have the persons name within the results themselves...but a good solution...if you could tell me how I would be grateful

christine jeziorowski

Hi Leslie, while I understand and I love articulate...if it's all too hard my small clients will go with captivate as it does have the function to print result certificates....I prefer articulate hands down but....if this is what they want and I can't support it in articulate...I am still trying.....

OWEN HOLT
christine jeziorowski

Whilst I was able to generate the certificate ...it always was blank without the results... went crazy trying to work out java code... the reason for buying articulate is I don't want to do coding I don't have an IT background...... but then just as I was drifting off to sleep.... it came to me and it was easy... I used variables and just changed the results screen into a certificate.. with voice over right click and print... easy and works great for me... low tech I know but it was exactly what I wanted... Happy to do a screener if anyone needs it...

Grant McClean

Hello,

Me again, I have got a basic certificate to work now thanks to everyone for posting tips!

I do need to add a picture into the top right corner which is just a logo.

I have tried adding in an additional contents line but it will not recognize the picture.

can someone help with the correct code to use.

Jeffrey Hurt

Hi Jena,

The "style section" is in the head section of an HTML file, usually where the styles are found.

<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

There are several different styles you can apply, but unfortunately most HTML codes/commands for forcing something to print landscape instead of portrait (really anything related to printing) depends on the browser you are using. The ideal solution is to convert to a PDF because that is a standard. While HTML5 is a "standard" Safari, FIrefox, Chrome, and Edge have styles they like and others they ignore. 

One of the many reasons the death of Flash is a true tragedy. Hope that helps!