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. See it in action Take a look at the Story file Download the Certificate Add-in files 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.

Has anyone come up with a solution that can work for both HTML5 and Flash-version courses? I'd be willing to include a solution for each if there is a way to do so. I have uploaded an abbreviated version of what I've been asked to do. I need the certificate to print just as it appears in the second slide. Is there a way to have a single slide appear without any player information so it is simply what is on the "stage"? Steve's example is great, but the fact it goes haywire in HTML5 is concerning as we are developing this course for users all over the globe and the HTML5. Thanks in advance!

Hi - I'm wondering if anyone knows how to get the certificate to print in landscape orientation by default (without the user having to change the print preferences). My understanding is that this would be a setting in the html document, but not quite sure how to set it up.

I keep it simple. when my storyline file opens, I get the date. It is the first thing the first slide does. This lets me display the date throughout the course. Here is the code I use. var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1; //January is 0! var yyyy = today.getFullYear(); if(dd<10) { dd='0'+dd } if(mm<10) { mm='0'+mm } today = mm+'/'+dd+'/'+yyyy; var player = GetPlayer(); player.SetVar("SystemDate",today); The certificate java is at the end of the course. Keeping them separate makes it easier to trouble shoot. My certificate java looks like this: myWindow = window.open("","Print","width=900,height=700,scrollbars=0,resizable=0"); var player=GetPlayer(); var course=player.GetVar("CourseName"); var username=player.GetVar("NewName"); var date=player.GetVar("SystemDate"); var score=player.GetVar("ScorePercent"); var contents ='<html></head><style type="text/css">'; contents+='h2 {font-family:"Museo Sans For Dell"; font-size:20px; color:#333333}'; contents+='h3 {font-family:"Museo Sans For Dell"; font-size:30px; color:#0085C3}'; contents+='h4 {font-family:"Museo Sans For Dell"; font-size:16px; vertical-align:bottom}'; contents+='</style><body>'; contents+='<table width="100%" border="0" cellspacing="0" cellpadding="0">'; contents+='<tr><td><center><img src="../GFPA0104/certificate/CertificateBanner.png"></center></td></tr></table>'; contents+='<table width="100%" border="0" cellspacing="0" cellpadding="20">'; contents+='<tr><td colspan="5"><center><h2>THE GLOBAL FP&A L&D TEAM CERTIFIES THAT</h2>'; contents+='<h3>'+username+'</h3>'; contents+='<h2>HAS SUCCESSFULLY COMPLETED</h2>'; contents+='<h3>'+course+'</h3>'; contents+='<h2>WITH A SCORE OF</h2>'; contents+='<h3>'+score+'%</h3></center></td></tr></table>'; contents+='<table width="100%" border="0" cellspacing="0"><tr>'; contents+='<td width="30%"><center><img src="../GFPA0104/certificate/Signature.png"></center></td>'; contents+='<td width="5%" rowspan="2"></td>'; contents+='<td width="30%"><center><h4>'+date+'</h4></center></td>'; contents+='<td width="15%" rowspan="2"></td>'; contents+='<td width="20%" rowspan="2"><img src="../GFPA0104/certificate/Dell-Logo.png"></td></tr>'; contents+='<tr><td><center><img src="../GFPA0104/certificate/Signature Line.png"></center></td>'; contents+='<td><center><img src="../GFPA0104/certificate/Date Line.png"></center></td></tr></table>'; contents+='</body></html>'; myWindow.document.write(contents); myWindow.document.close(); myWindow.focus(); myWindow.print();

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

After reading through this lengthy thread, I just submitted a feature request. Here's what I said: Hi there! I have a new client who needs me to provide a traditional certificate (filigreed border and all) at the end of a course, pulling data for name, date, course title, and test score. In a foreign language. And it needs to be printable. I looked in Storyline, and then in the forum, and was amazed to find you folks still don't provide a ready-to-use Results slide in the form of a customizable, printable certificate template within the Articulate 360 suite. As you know, this is a feature Adobe Captivate has offered for a few years now. I watched your old video about revising the Report.html file. That's too much work for many of your customers, who may not have the basic code-tweaking skills needed. And having to manually place the file in the appropriate folder after publish? A recipe for mistakes to be made. I read that your reasoning is you consider proof of completion to be the province of a company's LMS. But as you've acknowledged, there are companies who don't use an LMS, or still want a traditional certificate the learner can print out at the end of the course, within the course, even if the company does use an LMS. As you know from the attached forum thread, people have been asking you for this feature for at least six years, and continue to ask for it currently. Isn't this something that would be a really huge WIN for you folks to produce? Couldn't you create a good-looking template with editable certificate title (for foreign language clients), and learner name, date, score, and course title variable fields, include the coding to make it easily printable, and make that available to all your users as a Results slide option? All the course creator should need to do is conform their variable titles to those you use (or, you make them editable). I do hope you will at last revisit and reconsider your position on this ongoing basic need. It would be hugely appreciated by many of your customers. Thanks!

Example files: Generating a certificate from Storyline

DanielDavid
Community Member
13 years ago

Hi,

I am trying to get his work, but can't even make Steve's files work.

This might be silly but which is the "published output directory"? Since SL saves one file and uses only that how can I get it to use a certificate ".html file? I guess I have to break the file, publishing it to web maybe? But how do I convert i back to ".story" file to be able to use it again?

I have no IT background whatsoever, so to change html files or javascript I would have to get a professional to come and help me but I would prefer to find a solution for this myself.
DaveFulle
Community Member
13 years ago

Hi Daniel,

I'm a little confused when you say SL only has one file. You'll need to publish the course (to LMS) and then your published output directory is the folder that is created from the publish. There are a bunch of files created. You'll need to put Steve's HTML file and Certificate graphic into that output directory.

I had to go into your HTML file, change learner name get VAR from "learner" to "TextEntry7" since this changes for me with every course created. I also had to change the file name of the graphic from "certificateBG.gif" to "CertificateBG.gif" to match what the HTML file was calling. After doing that, the name was called in properly, the background displayed, and everything printed (on the LMS - not locally)!

You can edit the HTML file in Word, notepad++ or something similar - you shouldn't need a "professional".

I hope this helps.
DanielDavid
Community Member
13 years ago

Thank you Dave & Nancy,

It is a lot clearer now. I changed the file name to match what the .html refers to.

I published the file to LMS and copied the files in the published output directory. I have made the changes about the learner name, but now how do I uploaded it to Articulate Online? Online only accepts one file so now I have to change this Published output directory and all it's content into one file that Articulate Online accepts or SL opens.
NancyWoinoski
Super Hero
13 years ago
Hi Daniel - I think you just have to zip the published output directory and upload the zipped file to Articulate Online.
SteveFlowers
Community Member
13 years ago
For Articulate Online, you can either use the direct publish option or configure SL to enable manual upload. This will generate a .SL file. Change the extension to .ZIP, unzip it. Then do your magical surgery magic (add your post publish files). Then rezip, change the extension back to .SL. Manually upload this package to AO and Bob's your uncle.
DanielDavid
Community Member
13 years ago

I will do that.

Thank you once again for your help.

I have found an other way to work this out, so once I put together a step by step guide I will test it and post the guide here. Hopefully by the end of today.
DanielDavid
Community Member
13 years ago

Hi,

Asan addition to Steve's solution I have found another one based on the screenerJustin Wilcox recorded for Quizmaker (all credits to Justin). The principle isthe same. I have tested it and it works like a charm in storyline.

Nowthe "report.html" file was modified by somebody else but if you knowhow to write/amend .html files than you can do it yourself. You need to set up instoryline to "Print Results" at the end from the Results screen, thanit will generate a "report.html" file that you can modify.

Pleasefind the steps below on how to do this:

1.      Enable Manualupload from Storyline Options. (select “Enable publishing for manual upload toArticulate Online”)

2.      Enable manualupload from Articulate Online/Settings/Other Settings/Enable manual uploading(follow this link: http://receptionacademy.articulate-online.com/Settings/?Cust=53896)

3.      Download 7zipFile Manager (http://www.7-zip.org/) andinstall to your PC

4.      DownloadNotepad++ (http://notepad-plus-plus.org/)and install to your PC

5.      After the firstfour steps:

6.      Add to resultpage a button with the trigger set “Print results” and style it to your liking

7.      Publish thecourse to Articulate Online but with the following changes:

a.      Change URL to

b.      Specify preferredfolder to publish

c.      Publish

d.      This willcreate a folder called “ output” including “.sl1”file

8.      Right click onthe published file (“.sl1” file) and extract it with 7zip File Manager. Thiswill create a folder called “” including other folders (like story_contentfolder) and other .html files

9.      Go to publishedfolder and find story_content/report.html file.

10.  Modify thisfile to your preference using Notepad++ (or Any other program, I am sure thereare many more) Please keep in mind that we couldn’t figure out how to changethe course name on the certificate automatically, so you will have to do thismanually every time you post.

a.      To change thecourse name in the “report.html” file find this line:

varstrTitle = g_listQuizzes[g_oPrintOptions.strMainQuizId].strQuizName;

b.      And change itto this:

varstrTitle = "Course Name";

c.      If anybodyknows how this can be solved I would be happy to know

11.  Oncereport.html file is modified highlight every file and folder in the folder, right click on it and in 7zip compress it to .zipfile

12.  Once compressedchange the file extension from .zip to .sl1 and

13.  Ta-Daaaaa youhave your file to manually upload to Articulate Online from ArticulateOnline/Content/Manual upload with your very own certificate.

Hope this is helpful andclear. (This is the first time I am doing this.)

To see the originalscreener from Justin Wilcox https://player.vimeo.com/video/145576223

To see my screener follow this link: https://player.vimeo.com/video/204932053

Download modified report.html file

Download .story file

Download the guide for this

See it in action

Daniel
print+certificate+example.story23 MB
SheraliJiwani
Community Member
13 years ago
Is anyone send me PPP samples for Articulate
SophiaXu1
Community Member
13 years ago

Hi Steve:

Great tutorial.

I wonder if you can post some tutorials on how you designed a customized certificate which can be used for this case?

Thank you

Sophia
KateAtkinson
Community Member
13 years ago
Hi everyone, is there any way of pulling the variables from the Storyline project eg: Name, result score directly into the certificate without using an LMS? I am developing a flash published Storyline file that runs of a CD and want the user to be able to print a certificate after passing the end assessment reflecting their results & name.

Any suggestions?