Storyline 2 Example - Generating a PDF Certificate for users who successfully complete a quiz

Hi all,

I've been experimenting with a JavaScript PDF library (pdfmake) to generate PDF certificates client side for learners who have successfully completed a quiz in Storyline 2.

You can see an example at http://rlowry.github.io/certificate/story.html

The 1st slide of the example provides a brief overview of how this works. I've tested this successfully in Internet Explorer, Chrome, Firefox, Chrome on Android and Safari on iOS.

I've attached a simple source file that contains a basic .story file as well as a folder (certificate) that includes the required HTML and JavaScript that needs to be included within a web object within the project. Feel free to have a look and re-use if it's useful.

The generated PDF certificate is very basic at the moment, you'll need to refer to the pdfmake documentation to update the design.

UPDATE: Originally this example only worked with the HTML5 output. I've tweaked it so it now works with the Flash output as well. I've updated the attached files to reflect this change.

UPDATE 2: I've updated the attached source files so they now use the latest version of pdfmake (v0.1.27).

Cheers,

Ryan

153 Replies
Norman Lamont

Hi. I'm trying to get Ryan's basic file working on my server but it's the first time I've tried working with web objects and I'm puzzled by this bit of Ryan's instructions:

To get this example project working on your own machine you will need to delete and then re-add the web object selecting the certificate folder as the source.

I understand that it has to point to the right place but when I try to point it anywhere, Storyline keeps telling me it can't create the web object because there's no index.html in that folder.

Say my output folder (where story.html sits) is 'myoutput' and certificate.html is also in that folder - is that the folder I'm looking for? Do I have to create a blank index.htm in that folder? Or do i need myoutput/certificate and create one in there?

Ryan Lowry

Hi Norman,

You need to point the Web Object to a local copy of the folder certificate that's included in the zip file attached to the first post. This folder can be placed anywhere and should not be placed in the folder that you plan to publish to. (Storyline deletes the contents of this folder each time you publish).

When you Add a Web Object Storyline will import all of the files contained in the source folder into the project and will automatically include them in the published output.

Ryan

Michael Ambech

Hi Ryan,

 I know this is an old post but thought I might give it a try anyway. Your code is working great on my end. Good job!

I have a few variables in my course (True/False). Based on user choice these variables represents certain parts of the course that have been done/not done. I would like the done parts to show up in the certificate.

I have a variable named CameraControlDone. I get this from the player as demonstrated in your javascript

 // Retrieve the status camera control variable
var cameracontrol = player.GetVar("CameraControlDone");

According to my limited javascript skills the following should display the camera control text if CameraControlDone is set to true (code placed in content section).

// Include Camera control
if (cameracontrol = true) {
text: "Camera control",
fontSize: 16,
alignment: 'center',
margin: [0, 0, 0, 0]
},

However clicking the Download button doesn't do anything. It works without this code though. Any ideas?

Best regards

Michael 

Ryan Lowry
Michael Ambech

Hi Ryan,

 I know this is an old post but thought I might give it a try anyway. Your code is working great on my end. Good job!

I have a few variables in my course (True/False). Based on user choice these variables represents certain parts of the course that have been done/not done. I would like the done parts to show up in the certificate.

I have a variable named CameraControlDone. I get this from the player as demonstrated in your javascript

 // Retrieve the status camera control variable
var cameracontrol = player.GetVar("CameraControlDone");

According to my limited javascript skills the following should display the camera control text if CameraControlDone is set to true (code placed in content section).

// Include Camera control
if (cameracontrol = true) {
text: "Camera control",
fontSize: 16,
alignment: 'center',
margin: [0, 0, 0, 0]
},

However clicking the Download button doesn't do anything. It works without this code though. Any ideas?

Best regards

Michael 

Hi Michael,

If you replace this:

// Include Camera control
if (cameracontrol = true) {
text: "Camera control",
fontSize: 16,
alignment: 'center',
margin: [0, 0, 0, 0]
},

with this:

// Include Camera control
(function () {if (cameracontrol) {return {text:'Camera Control', fontSize: 16, alignment: 'center', margin: [0, 0, 0, 0]}} else { return null; }})(),

It should work as desired.

Cheers,

Ryan

Leslie McKerchie

Hello Apoorv,

Did you mean that you had difficulty with the attached zip file that you replied to? I'm attaching here in case that's helpful.

Looks like Ryan has still been replying here. You are certainly welcome to reach out to the user directly via the 'Contact Me' option on the user profile if you do not hear back soon.

Logan Stahler

Hi all-

First - Ryan, thanks so much!  This is a great resource and your continued support for everyone is amazing.  I am a bit new to the coding/java side of things so please excuse my newbie question.  I can't, for the life of me, figure out how to modify the certificate image.  We have a PDF version of a certificate that I am trying to make this work with, and I'm really struggling.  I was able to copy your file (thank you!) into the project and it does generate the basic certificate as you intended.  Now, I just need some direction in getting our PDF template as the background!  

Any help from anyone would be amazing.  We are on a tight deadline and I've been wracking my brain for hours now.  

I am attaching our certificate for you all to see what we're looking to fill (simply name and date, that's it!)

Best,
Logan

Ryan Lowry

Hi Logan,

I've mocked up a quick example using the blank PDF certificate you supplied.

I exported the PDF as an image and converted it to a BASE64 string.

I then used this as the background for the certificate.

When you generate the certificate it should produce the attached PDF.

I've attached the source files for the certificate so you can give it a go.

Hope this helps!

Cheers,

Ryan

Michael Ambech

For those of you who work in an international setting I have the following UTC time code running in my certificate.html:

// Get todays date in format dd/mm/yyyy
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
}
date = today.toUTCString();

And further down when defining the body of the document:

 // Include date
{
text: '\n\n\n\n\nAwarded on: ' + date,
fontSize: 16,
alignment: 'center',
margin: [0, 0, 0, 0]
},
]
}; 
Tim Hillier

Ryan/Ashley;

I tried to push the envelope with this today and have a question.

I published a storyline 360 to articulate online and put it into Rise as a Storyline block to see if I could get a certificate into Rise.  It worked, kind of.  It pulled default data for the variables rather than any input data.  so it is getting something from the storyline file, it is just not updating the variables when I enter in a new name for example.

Any thoughts?  I think this has great potential.  Thank you for your work.

Tim