Storyline 360 - Generating a PDF Certificate using JavaScript

Hi Doug, it looks like you replaced the background image certificate.jpg with certificate.png. In the browsers console we can see this is causing an error as the image file cannot be found.

You either need to convert your image to a .jpg called certificate.jpg or update line 53 of certifciate.js in the web object source files to reflect the filename of the image you wish to use for the certificates background.

You also need to update line 35 of certificate.js to reflect the name of the variable you are using for the learners name ("uName").

Remember you will need to first delete and then re-add the web object when you make any changes to it.

Hi Ryan, thank you so much for your assistance and patience in walking me through this. I've been able to make it generate the PDF certificate! The formatting is off for the text placement and paper size but think we can fix that. I assume we would update the "certificate.js file for this correct and not the js in the Storyline trigger? 

I think this is where I get confused, there are two places for the js content, one in the Storyline course success layer that executes the js file that is in the web object folder. The one in Storyline is just used to trigger the js in the folder, any modifications to the certificate and content on the certificate would be then done to the file in the folder, would this be an accurate assumption?

No problem at all Doug.

You're right, the JavaScript in the storyline trigger only calls the generatePDF function in certificate.js which generates the PDF.

Any changes you need to make to the format of the certifcate should be made in certificate.js.

HI - me again - so the trigger to run the weboject is no longer the simple:

window.frames[0].frameElement.contentWindow.createPDF();

As i note in the source file it is a WHOLE lot more complicated than before! (is that because the number of iframes within the file could be >1? )

Hey Matt - glad it's you!  yes - all our videos are webojects. (Vimeos - need to talk to you about that too - covid got me)

Doh should have replied using this function - SOZ

Hi Ryan, just curious, are you aware of any way to make the course email a participant their certificate rather than download it?

Hey Doug, can't say it's something I've looked into. I don't think it will be possible to attach a PDF certificate generated on the client side to an email and send it. Others on the thread might have some bright ideas.

It might be better to let an LMS handle the certificate side of things if you have that option? Moodle for example with an appropriate plugin provides the option to issue certificates based on completion of an activity such as a Storyline SCORM. These is an option to email certificates and you get the benefit of centralised recording of learner progress.

Thanks Ryan, yes ideally we would have hoped the LMS would do that however ours does not. We use Workday Learning. WDL says the authoring software should do the certificate functionality and Articulate Storyline says the LMS should be performing the certificate functionality, so neither seems to want to own this with seems very odd to me as so many people require this functionality. Once again, thank you for all your help and insight in finding this solution to address the gap!

Hi there. My pdf works when I used the pdfmake route. I need to change the font that the pdf is using though. The default font is Roboto and I would like to use a custom font. Does anyone know how to do this? Your help would be appreciated.

There is a lot of documentation on the PDFmake site to do this. You can generate base64 fonts and then reference these in your files. There are also GitHub files with other fonts installed.

Sent from my iPhone

Here is most easiest way to print certificate in storyline: https://www.qcelearning.com/2022/11/04/how-do-i-print-certificate-in-articulate-storyline/ 

Hi Chris, 

I realise, I am trying to sort this out for a project.  Wondering if you can print screen your file folder structure?   I am tinkering with the set up but still not there.  

Lara

Hi,

I'm building a course that will have an auto-generated PDF certificate.

Thanks to this discussion I finally get some results, but I want to understand how it works and why?

I wonder how toryline knows to include data, files etc from an external folder when publishing, in this case a folder called "certificate"?

Why does torylineline not include my files, placed in the "certificate" folder when publishing so they are not includ automaticly in to the final project (in contrast to the files placed by the author of the project wchich are automaticly include)?

I thought it was somehow defined in the webobject (since after publishing all the data is in the story_content\WebObjects folder), but in the project there is only one web object which only contains a reference to the drive location of probably the creator of the project.

Can someone smarter can explaind me how dose it work?

I cannot figure out how to resize the pdf properly. Does anyone know how?  I have an image that is 2500 pixels wide, but it only shows the top left corner of it. I changed the code in the certificate javascript file to the below, but again it only shows the top left corner. Is there something else that needs to change? Thanks for any help! (I also don't know what the ".89" is for after the width, but when I remove it, no pdf is created)

background: [
{
image: 'certBackground',
width: 2500.89,
height: 1768.28
}
],

Has anyone had success changing the size of the background?

Hi Hero's, hoping someone could steer me in the right direction. Ryan was so helpful a few years back in assisting us in developing a PDF certificate for a course we designed. The test file worked for us at the time. As it's been a long time I can't seem to reproduce the function in a new course. I have everything exactly as the previous but when I publish to review it doesn't produce the certificate. I know there was some steps required prior to publishing to enable the java script to pull the certificate detail - but my notes are unclear on how this works when publishing to review and was hoping someone would be able to provide some clarity on this. Fingers crossed. 

Using the pdfmake JavaScript library involves including code that generates the pdf certificate from a base image and then carefully overlaying and positioning the text you want to appear on the page. This is a great approach but...

...there is an alternative approach which involves creating the certificate outside of Storyline just as a pdf form and then using the pdf-lib Javascript library inside Storyline to fill in the fields in the form.

This has a number of advantages:

1. The JavaScript code is easier.
2. You can change the certificate layout and edit the pdf without having to modify your JavaScript code.
3. The same JavaScript code can be used for multiple certificate layouts so long as the field names are the same.
4. The pdf-lib JavaScript library is built so you can load the rotines you need (and only those you need) at run-time. This means you don't need to modify the HTML after publishing.

I don't have a certificate example but I am running a FREE on-line workshop/ discussion next week (Tuesday) that will walk through and demonstrate the steps to create a downloadable course handout including learner's own notes using pdf-lib. The principle is the same as creating a certificate.

If anyone is interesting in joining this workshop please send me a message and I will provide a link.

Thanks John, I would be interested in attending that workshop, ideally I would like to get the existing solution working so we can close off this project and perhaps look at the alternative approach in follow up as everything is built currently. I think I'm just not recalling the step you need to perform prior to publishing that pulls the cert data into the publish file. (Should have made better notes 2 years ago) :)