Storyline 360 - Generating a PDF Certificate using JavaScript

Jan 31, 2018

Ryan Lowry
By Ryan Lowry

This example demonstrates how to use the pdfmake JavaScript library to generate PDF certificates in the browser using Storyline 360.

This is a followup to my original post found here. The only changes from the original are that this is now a Storyline 360 project and pdfmake has been updated to the latest version (v0.2.4 at time of posting).

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

The attached source files 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.

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

Feel free to have a look and re-use if it's useful.

(21/03/2022 - pdfmake updated to v0.2.4 and example link replaced)

90 Replies
Patrick Henning
almost 6 years ago07/02/18 at 9:18 pm (UTC)

I know this is an older thread, however i need some help.  Ryan it seems i am able to use this when I upload to Articulate Review, however I have a client that will be using this feature (and the rest of the Storyline I am designing) offline.  I have Published just the files you provided as 'CD' and this will not work, but again, it does work when I upload to Articulate Review. Is this because the web object needs the internet to work, or is there something I am missing?  

Is there any sort of workaround for this?

I have tried a number of the different 'Certificate Generation' ideas people have had listed here - https://community.articulate.com/discussions/building-better-courses/six-ways-to-generate-a-certificate-of-completion and these will not work. I recently tried a solution that overlays Javascript over a GIF file, but there i am running into issues with printing (specifically the JS does not print) 

Any ideas?  

Thanks!

Ryan Lowry
almost 6 years ago07/03/18 at 8:41 am (UTC)
Patrick Henning

I know this is an older thread, however i need some help.  Ryan it seems i am able to use this when I upload to Articulate Review, however I have a client that will be using this feature (and the rest of the Storyline I am designing) offline.  I have Published just the files you provided as 'CD' and this will not work, but again, it does work when I upload to Articulate Review. Is this because the web object needs the internet to work, or is there something I am missing?  

Is there any sort of workaround for this?

I have tried a number of the different 'Certificate Generation' ideas people have had listed here - https://community.articulate.com/discussions/building-better-courses/six-ways-to-generate-a-certificate-of-completion and these will not work. I recently tried a solution that overlays Javascript over a GIF file, but there i am running into issues with printing (specifically the JS does not print) 

Any ideas?  

Thanks!

Just had a quick play and confirm that certificate generation doesn't work when publishing to CD. I think launch_story.exe effectively opens the content using Internet Explorer. However if you open story.html directly with IE the certificate downloads fine. Access to developer tools is blocked when accessing with launch_story.exe as well so i can't see if there are any error messages in the console.

Patrick Henning
over 5 years ago09/05/18 at 7:49 pm (UTC)

I was wondering if anyone would be able to help me out with an issue i am having with generating a PDF certificate using Javascript.  This is the same problem I was having before and I was wondering if anyone could give me a hand getting this to work (I am not all that savvy with Javascript) 

In the story_content folder i added a folder called certificate.  In that file is a .gif file of the certificate i want to use and a JS file that would put the learners name and date overlayed over the .gif.  The name is pulled from a variable entry on the first slide. This also has to be able to be done OFFLINE, and then printed, hence the reason I am using this method. 

In the attached zipped folder is a published version of the storyline, as well as the .Story file itself. 

Any help would be greatly appreciated! Thanks!

Michael Rische
over 5 years ago10/08/18 at 8:42 am (UTC)

Thanks for this input!

I'm quite new to Articulate and I was working on this solution to get a certificate at the end of the training. But it seems that I'm doing something wrong. 

I already changed the link to the folder with the certificate.html on the success layer but nothing happens when I click on the download button after finishing the training. 

I tried different settings when I include the web object, but it still doesn't work.

If someone could give me a hint, what else I could try, I would be more than grateful!

Chris Clift
over 5 years ago01/18/19 at 3:27 pm (UTC)

Hi Ryan

I have really enjoyed your pdf certificate print facility and I have designed a template that works fine when I click directly on the certificate.html (I've actually called it DCS_certificate(Master).html) but I don't think my issue is related to the name change. I have modified the Execute javascript accordingly to it now reads

// Name of the certificate html file
var certFilename = 'DCS_certificate(Master).html';

The issue I am having, and maybe I'm missing something here, is that when I delete the web object and insert a new one, Storyline says there is no 'index.html' file in the folder, whereas, looking at the examples you have produced there doesn't need to be one, since the web object should point to the DCS_certificate(Master).html. How do I get it to link back correctly?

Thanks in advance

Ryan Lowry
5 years ago02/19/19 at 9:49 am (UTC)
Chris Clift

Hi Ryan

I have really enjoyed your pdf certificate print facility and I have designed a template that works fine when I click directly on the certificate.html (I've actually called it DCS_certificate(Master).html) but I don't think my issue is related to the name change. I have modified the Execute javascript accordingly to it now reads

// Name of the certificate html file
var certFilename = 'DCS_certificate(Master).html';

The issue I am having, and maybe I'm missing something here, is that when I delete the web object and insert a new one, Storyline says there is no 'index.html' file in the folder, whereas, looking at the examples you have produced there doesn't need to be one, since the web object should point to the DCS_certificate(Master).html. How do I get it to link back correctly?

Thanks in advance

Hi Chris, sorry, I haven't been following this thread recently. Do you have more than one html file in the web object folder? In my testing Storyline 360 will allow you to add a web object with an html file of any name when there is only 1 html file present. If there is more than 1 then you must have an index.html file.

Chris Clift
5 years ago02/19/19 at 10:38 am (UTC)

Hi Ryan

Thanks for getting back to me and appreciate the time you have taken to answer my query. You were spot on, I had more than one HTML file in the folder and when I moved the certificate file and the pdfmake folder into their own new folder, it all linked as expected. Such a small mistake on my part!!!. Thanks again

Phil Mayor
over 4 years ago09/23/19 at 7:10 am (UTC)

This is on the very first slide of the course provided by Ryan

In this example the user is asked to enter their name and then answer a question. If the user scores 100% they can download the PDF certificate. The users name, project name and date are included on the certificate. (Note the project name is set in the variable projectTitle)

 

 

Sign In to Reply