Saving a Certificate

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.

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?

Hi Mackenzie,

We use Moodle as our LMS. It has a custom certificate plugin that allows us to set it up to do everything you want.

Russ

Hi - just one issue with this. The updated project you've provided me with doesn't work. The save button doesn't work. It's perfect for what I want except the button doesn't work.

Why?

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.

Save button downloads a certificate for me. jS PDF seems faster than pdfMake.

How are you reviewing? Have you edited anything in the file?

I published the certificate page and works fine 

https://360.articulate.com/review/content/1d1794ee-4148-4a6d-a49a-c8655ac528eb/review

Hi.

I've just opened it in Storyline and then published that as a HTML and nothing. I don't think so.

I've just used that link and it worked and it's exactly what I wanted so how do I get that from there to my project?

Are you testing on a web server? It needs to run on a server to work.

Have you go any other javascript in your course? 

What do you mean a web server? I'm just opening the HTML. 

The date as far as I can tell and that's it. 

I've attached the files that I'm opening.

Have you uploaded the course to view it on the internet or are you working locally? It will not work locally.

Does the date script work? Any javascript errors will stop the others working.

Ah, okay.

I'm working locally, I didn't know it doesn't work locally. So if I uploaded it to say Moodle or any website which supports Articulate, it would work there and you could save the certificate?

The date script does work, yes.

Yes, should work fine

I will need a series of at least 4 of these certificates, each with a different unit number and title. So how would I do this?

Unless Russell is generous to Create these for you, it may be time to learn how to do some rudimentary coding.

I am looking into jsPDF to see if I can figure how Russell created the first certificate to then make the rest of them. As a non coder though, I have no idea what I'm doing.

I am sure when Russell comes online he can help point you in the right direction. I have never used jsPDF, I presume it is not too different to pdfMake and you edit an HTML page. 

I think any image will need to be base64

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

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.

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.)

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.

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!

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

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.

Hi Mackenzie,

Here's Unit 3.