Saving a Certificate

I want to add an option to save a certificate which I have put in my course. I have got the Print option but the clients want the users to be able to save it as well. I will be publishing it as an LMS file so it will be a HTML format. Would you be able to help me with how the certificate could be saved, please?

25 Replies
Russell Killips

Hello Mackenzie,

Creating a certificate that can be downloaded is a little bit difficult. It requires some javascript programming skills and using a javascript library.

I like to have certificates downloaded as a pdf. There are a couple of popular javascript libraries out there. PDFMake and jsPDF.

I haven't used PDFMake, but I know others in this community have.

I have attached an updated project for you to take a look at. Here I used a WebObject with jsPDF.

Alexandra Campbell

Does your LMS have a setting for users to be able to download and save a certificate once they have completed the course? If not, what if you created the certificate and hosted it on a sharepoint page (or other internal company wiki or page). Then once the user finishes the course, on the last slide/exit slide/course congrats slide, you can direct learners to that page where the certificate is hosted so that they may download it?

Mackenzie Barraclough

Hi,

As I've downloaded it, that's not Russell's example. Russell's example looks how I want it to look, from what I can tell, but even so, there is a button on the final page with a save symbol on it (bottom right) and for me, that is the button which doesn't work in his example file.

This is when it's open on the internet as a HTML and when I click the button, nothing happens.

Russell Killips

Hello Mackenzie,

I can help you with creating your other certificates.

1st, I created the Certificate template in PowerPoint. If you choose File>Save As, you can choose to save the slide as a png.

Phil is correct, the next step was to convert the png image into base64. To do this, I used an online utility. Check out: https://www.base64-image.de/
At this site, you can upload the png and it will convert it to base64 code. There is a button on their site that you can click (show code). I copied this img code and saved it for later use.

Now it is time for some coding. The main file that you need to look at is called certificate.js
You will find this file inside the WebObject folder. I prefer to use a program called Sublime Text for coding javascript. However, it is possible to use Notepad.

Here is a picture of the code in certificate.js

Code

Line 4 of the code is where the base64 code is.

Line 6 creates a new pdf in landscape.

Lines 8 and 9 retrieves the Name and Date variables from Storyline.

Line 11 adds the base64 png to the PDF. The 0, 0 are the x and y positions for the image, 300 is for the width, and 210 is for the height.

Line 12 sets the font size to 24

Line 13 adds the name to the pdf.

Line 14 sets the font size smaller for the date.

Line 15 adds the date to the pdf.

Finally Line 18, saves the pdf.

The webobject is then added to your storyline certificate slide.

I made the webobject small and placed it behind an image on the slide.

The save button has some javascript code that calls the CreateCertificate function.

Mackenzie Barraclough

Hi Russell,

I'm having issues with this. I have created the certificate and that's all fine. My only issue now is how do I get that certificate to download? When I click the save button, it downloads the Unit 1 certificate rather than the Unit 2. I'm guessing it has something to do with the index file in your example but I can't figure out what to do to fix it. HELP!

(I forgot my account, hence why I'm using a new one. It's still the same author though.)

Russell Killips

Hello Mackenzie,

There were a few things wrong.
Your Unit 2 Certificate WebObject was missing the jspdf library (jspdf.min.js).
Also, you cannot rename the files. certificate 2.js needs to be named certificate.js

The line of code for the base64 image was missing a closing quote and semi-colon at the end.

Also the line of code for: var doc = new jsPDF('landscape'); was missing.

The unit 1 webobject was still on your slide. That's why it was still downloading that certificate.
I deleted both WebObjects and added the new WebObject for Unit 2.

 

Mackenzie Barraclough

Hi Russell,

Thanks for the help. 

So I'm fine with making sure the code is right and not renaming the file, that's all good. I'll check the code carefully next time. Also, I can definitely make sure the webobject for 1 isn't there because I know where it's hiding.

But how do I get the jspdf library? That's one thing I'm unsure about. Can I just copy that from one of the files you sent met? Same with the index. Can they both be copies or do they have to be specific to that certificate? In which case, how and where do I get them? 

Hopefully once I know that, the certificate should be fine and all should work.

I'm sorry for being so useless at this - I've never used code before in my life and so this is like my worst nightmare and majorly stressful. 

Please excuse me if I have to contact you again because I've broken something and nothing is working!

 

Russell Killips

When you are ready to do unit 3, just copy the whole WebOject for Unit 2 into another folder for Unit 3. The WebOject should consist of 3 files:

1. certificate.js
2. index.html
3. jspdf.min.js (this is the jspdf library)

The only code that you need to change is inside of certificate.js

Mackenzie Barraclough

Guess what, I'm back.

I was doing Unit 3 and changed the code in certificate.js and now when I test it online, it doesn't work and the certificate doesn't look normal.  I just don't know what to do and I don't know why it's not working.

I've now also tried Unit 4 certificate and that's doing exactly the same. I am unbelievably frustrated and extremely sorry because at this point, you're basically doing it all for me which I didn't want but apparently I mess it up somehow when I try.

I'm so sorry.