Example files: Generating a certificate from Storyline

May 09, 2012

Steve Flowers
By Steve Flowers

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
Stephen Cone
almost 11 years ago07/17/13 at 2:32 pm (UTC)

Mike Tschirn said:

I have tried everything here, to the letter. Our LMS server is not up and running yet, so I am only trying locally. There is no way that the text appears on the certificate, no matter what I try.

Hi Mike,

I apologize for not seeing this message when I was scanning this thread earlier, but I did want to pass this along.  One tool that I find to be invaluable is the ADL Test Suite.  You can use the ADL Test Suite to perform a local SCO test.  The Test Suite will mimic a SCORM compliant LMS and you can modify settings such as the user-name, etc prior to launching the SCO.  Just make sure you point to the index_lms file before launching the test.

It's usually the first tool I reach for when I need to test or verify SCORM functionality/interactions regardless of the development tool that was used to create the courses.

felicity burke
over 10 years ago07/29/13 at 8:41 pm (UTC)

Hello,

Forgive me if I am repeating a problem, but could someone check my javascripts below? This is on a slide trigger in Storyline Articulate to execute when the timeline starts.

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var dateString=day + "/" + month + "/" + year;
var player = GetPlayer();
player.SetVar("SystemDate",dateString);

I have a print button on my certificate with this trigger-execute javascript when user clicks button

"window.print()"

within the certificate I have name variable which works

%FirstName% %LastName%

and date variable which works

%SystemDate%

The certificate looks fine, the autofills work - it will just NOT PRINT from my print button in the LMS or elsewhere. 

Is there a quick fix I am missing???

Steve Flowers
over 10 years ago08/23/13 at 1:09 pm (UTC)

I gave a couple of frameworks as well as a PDF native method a spin. One of them didn't work consistently between browsers despite the documentation indicating support. The other worked but I didn't have time to dig into it. I don't recommend the JavaScript frameworks due to the complexity. The PDF method is great but there's a drawback that requires user intervention to turn off the built-in Chrome PDF viewer if it's installed and the user is opening the presentation in Chrome.

The one that didn't work in the latest version on their demo site.

http://parall.ax/products/jspdf

The one that worked.

http://bytescout.com/products/developer/pdfgeneratorsdkjs/index.html

Both of these would require some javascript-fu to make the printable certificate.And I suspect there will be situations where it might not work since browsers all play by their own rules.

The other thing I was looking at was populating a pre-built PDF with fields / variables or fed via a querystring. This works well when it works and lets you be as decorative as you want to be with the certificate.

http://www.halnesbitt.com/pages/pdfqs.php

This works great. Except you need to disable the PDF viewer in Chrome to make it work in chrome://plugins/

Of all of these, I think the simplest and best option is the last option: Using a PDF with dynamic fields updated via querystring.

Jim Leichliter
over 10 years ago08/23/13 at 5:00 pm (UTC)

I also gave a couple of frameworks a spin.  I tried FPDF, mPDF, and jsPDF.  

The nice thing about jsPDF is it's all done client-side, but if you want HTML5 compatibility without flash, browser support is woeful.  They require a flash shim to be able to view/download the pdf for older browsers.  This obviously won't work on many iOS devices.

I then had the same idea as you Steve about using URL params to auto-fill an existing PDF form.  The problem with this approach that I found was that with the most recent version of Adobe Reader, it will flag documents coming from a different domain as unsafe and will require the end user to allow them to trust the pdf.  It will also flag older PDFs with JS inside as unsafe.  However, once trusted, the JS inside the PDF will be able to pull in the URL params and do the magic.  I didn't want my end users to have to go through that trust process because many of them are afraid of security dialogs.

Then I thought about a server-side solution that would auto-fill a PDF form and many of those solutions required you to create an "acroform" that was version 1.4 or below... and had to be created using a special tool or the full version of Adobe Acrobat Pro (or LiveCycle Designer).  Not too many IDs or Content Developers have the full version of Adobe Acrobat or LiveCycle.

So I thought I'd do pure server-side PDF generation using URL parameters passed from a course.

FPDF is a great PHP library for generating server-side certificates and worked well in my tests.  But something else caught my eye. mPDF is a derivative of FPDF that will also allow you to convert HTML tags to PDF... with CSS support.  This means that if you need to make changes to the certificate (even the background image), all you have to do is edit a simple css file and you're DONE!

Here's the CSS file:

@page {
		background-image: url("./molcertificate_96dpi.jpg");
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	body{
		text-align: center;
		font-family:Arial, Helvetica, sans-serif;
		font-size: 22;
	}
	
	#title{
		font-size: 44;
		font-weight: bold;
		margin-bottom: 50px;
		padding-top: 2em;
	}
	
	#name{
		text-decoration: underline;
		font-size: 30;
		font-weight: bold;
		margin-bottom: 50px;
	}
	
	#hascompleted{
		margin-bottom: 50px;
	}
	
	#course{
		font-size: 30;
		font-weight: bold;
		margin-bottom: 50px;
	}
	
	#date{

	}
I'm really loving mPDF because it also supports UTF-8 allowing for PDFs generated in any language.  
If you're running PHP, I found this to be the best solution.  
Granted a pure client-side solution would be THE ideal, but I found browser support and PDF security to be an issue.
Steve Flowers
over 10 years ago08/24/13 at 5:34 am (UTC)

mPDF looks great, Jim. Server side is ideal and would be my personal choice as well.

I had focused on exclusively client-side packaging because I think most folks here won't be looking for a server side solution. Client side solutions are going to have problems. But I wonder how many problems would arise from the PDF w/ Javascript guts. I tried the test above on multiple browsers and platforms. Didn't notice any problems except for Chrome with the internal PDF reader.

Leslie McKerchie
over 10 years ago08/29/13 at 8:48 am (UTC)

Hi G! Your window looks different because you published to Articulate Online and this is the expected behavior.

I'm assuming you thought your window would look similar to this:

There is a workaround if you manually upload your content to Articulate Online as shown in this tutorial. You can enable the setting to allow manual upload, then publish locally prior to upload. You would be able to access the output folder this way.

HPL Training
over 10 years ago09/09/13 at 9:49 am (UTC)

Cheryl Daubney said:

This all looks waaaayy too complicated for me!!   Is there not a way to include an informal certificate of completion where the user can input their name at the beginning of the course, then this would be picked up by the certificate as well as the test score, date and name of the course???  Is there a simple way to do this??   And could this be added to Storyline as a standard feature?!


No LMS for me either - but would like to reference a text entry in an earlier slide to the last slide (certificate).

Is this possible at all in Storyline?

Lisa Karpuk
over 10 years ago09/22/13 at 8:15 pm (UTC)

I seem to be having major issues when trying to pull any other variables from the Storyline file into the certificate.html. I have no problems when I am just using the learner variable but when I try to get the certificate to show the final mark (or anything else) from Storyline it just stops working.

I have limited knowledge of JavaScript right now, but it my head what I am doing makes sense - but it's just not working no matter what I try, and I haven't yet seen an answer on here that specfically addresses how to do this.

I attached an example. I used the storyline and certificate files provided by Steve. I added a variable that simply generates the number 85 and tried to add that to the certificate.

Any help would be appreciated!

Jeff Clay
over 10 years ago09/24/13 at 7:54 am (UTC)

I'm having the same issue as Lisa. I have tried publishing both in Web and CD versions, and while my certificate window opens just fine, no matter what I do I cannot get any variable to show on the certificate. My variable names are correct, and I have background in HTML and some javascript, so I know the code is fine, however, it's just not pulling the variable. Would love a solution if anyone has one. For now, the learners have to print the certificate and fill the name in themselves.

Sign In to Reply