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

Aug 27, 2015

Ryan Lowry
By Ryan Lowry

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

152 Replies
Diarmaid Collins
over 4 years ago11/07/19 at 4:59 am (UTC)

Hi Ryan. This PDFMake thing is simply amazing. A really clever solution.

I just had a couple of quick questions if you had the time to respond?

You mention the following code (which works perfectly) as a solution to Michael's problem above:

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

There's no declaration there that the variable cameracontrol has to be TRUE in order to display the text - is it just assumed TRUE equals display text and FALSE equals ignore text?

What if one wanted two or more items to be visible/hidden dependant on the one variable?

Currently, I have two duplicates of that above code displaying two lines, themselves two variables, List_A_Option_01_TITLE and List_A_Option_01_INFO. The visibility of both TITLE and INFO is dependent on List_A_Option_01 being TRUE.

(function () {if (List_A_Option_01) {return {text: List_A_Option_01_TITLE, style: "title"}} else { return null; }})(),
(function () {if (List_A_Option_01) {return {text: List_A_Option_01_INFO, style: "info"}} else { return null; }})(),

How does one combine these two functions into one?

Also (apologies), and this what wrecks my head testing out variations of the Certificate Template you have supplied, I have managed to get the cert to work in previous projects by naming the html file to whatever, say, certificate.html, but now, with this project, I rename my file to ChecklistCOMPILE.html and when I try to import the webobject it says there is no index file and I cannot get it to work?  

What stupid thing am I doing stupidly?

Joshua Cooper Darlington
almost 4 years ago07/10/20 at 3:09 pm (UTC)

Thanks for the info! 

I'm following your example and everything is working great.

However, when I add custom fonts to the project the PDF fails to print. I'm following all the pdfmake instructions on Github (recompiling the fonts file etc) but haven't been able to track down the bug. The one clue I found was from an old message board where a user had a similar problem and said it was due to a problem with Articulate.

Has anyone else encountered this problem? Were you able to overcome it? Any advice? Or can some one share a working example or template I can follow?

Thanks!

Sign In to Reply