At some stage working as an eLearning Developer you may end up taking on a project for a client who does not have an LMS (as we recently did). They may instead simply operate a website, such as a WordPress platform, into which they want you to build their course.
The question is – what can you do if that client then tells you that they would like to have their course generate a Certificate Of Completion to hand to the learner after completing?
This is of course tricky without an LMS to manage the PDF generation process for you.
If you are using Articulate Storyline 360, there are many different methods that the Articulate Heroes Community would suggest that you can do this. I personally have tried several with varying results.
I have never had positive results attempting to do this myself. Maybe it’s the way that my PDF Printer setup is configured on my computer, but most of the time I find that my sides will end up being chopped and positioned horribly on a page like this:
Here’s how you can get started using this toolkit yourself, and some really handy tips for Storyline developers which I wish someone had laid out for me right from the start!
Step 1 – Linking the jsPDF library to your project
You are going to have to do some HTML editing of your published Storyline course files in order to accomplish this.
First, go ahead and download the latest versions of FileSaver.js (https://github.com/eligrey/FileSaver.js/) and split_text_to_size.js (https://artskydj.github.io/jsPDF/docs/modules_split_text_to_size.js.html). Once you have these you can go ahead and place them into your project’s ‘story_content’ folder.
FileSaver is a module which jsPDF is dependent on in order to generate the PDF file on the client-side. The Split Text To Size module will come in handy later, as by default the jsPDF engine will render text as one long string, which if too long can print right off the page, so defining a maximum width for text variables using this module really saves the day in these cases!
Now we are ready to link up all of the libraries/modules that we need into our Storyline project. To do this, open your story.html file in your favourite web development tool and add the following lines in your document’s header (The empty space in Line 15 is usually good!)
Instead of downloading the full jsPDF library into our project, we are instead linking directly to a cloud based instance of it on the Internet. This version number may update over time with improvements and new features, so be sure to check if you are using the most up-to-date version from time to time here: https://cdnjs.com/libraries/jspdf/2.3.0
This is by far the fiddliest part of the job, and will require you to keep testing your code by opening your project in a web browser to see how your published PDF looks.
Go ahead and type REPLACE ME, into the box. Save and Publish.
Ultimately the design is going to be up to you, so the best thing I can do is list some of the lines that you can enter as you build your certificate, and what the values mean in order to create your PDF:
var doc = new jsPDF('landscape');
The default layout is portrait, so if you would prefer to have your PDF be printed in portrait orientation go ahead and delete the word landscape and the quotation marks from inside the parentheses.
var player = GetPlayer(); namevar = player.GetVar("Name");
string1 = "Certificate of Excellence awarded to"; var split1 = doc.splitTextToSize(string1, 150);
For any string of text that is likely to exceed the width parameters of the document, we can go ahead and use the split_text_to_size.js module that we downloaded to keep the text block to a certain width. The 150 value in the parentheses is our defined width value in this case, meaning that if a line of text is about to exceed 150 pixels then the text will continue on the next line.
This is a background fill colour for the document in RGB numeric value.
doc.setFontStyle("normal"); doc.setFontSize(16); doc.setFont("helvetica"); doc.setTextColor(0, 0, 0); doc.text(split1,69,131);
This block of code shows how we can display our string of text from earlier, along with a number of styling options that we can define before adding our text using the doc.text instruction. These values can be edited per text line inclusion, so make sure to include each of the ‘set’ values for each piece of text you include in the document.
In the doc.text instruction, the first number is the left value in pixels and the second number is the top value in pixels. You may need to keep editing these numbers, saving and then re-opening your project in the browser in order to save your PDF and test where exactly your text string is being displayed in the document. If it’s not quite right, keep adjusting each number until you get the results you are after.
Step 3 – Adding Images To Your Certificate
Unfortunately adding an image to the certificate isn’t as easy as declaring the file path and inserting it into your design. We must instead convert any image file to be used into something called Base64 code. Thankfully there are many free online tools that can help you to do this, https://www.base64-image.de/ for example provides a drag and drop function which allows you to convert your image into code in seconds. Once you have copied this code, you can then include your image in your document by adding this code block:
var imgData ='PASTE YOUR BASE64 CODE INTO HERE'; doc.addImage(imgData, 'png', 1, 1, 295, 209);
The number values in this case define the left and top position of the image, which will place the image directly in the top left corner of the document. The third and fourth value allow you to define the width and height of the image.
A good tip which I would recommend is to not attempt to place many individual images onto your certificate this way, but to instead design your certificate in full in a program such as Adobe Photoshop, and create one single background image for your certificate. This can then be placed at position “1,1” in your document, and you can then proceed to use the doc.text instruction to add in your lines of text over the top of your certificate design.
Remember that the jsPDF library will build your certificate as you have instructed top to bottom in your coded function, so make sure that you include your image “doc.addImage” instruction first, before adding your “doc.text” instructions, otherwise your text will end up getting covered by your image.
Step 4 – Make sure to save copies of your work
You may need to update your project later down the line and end up generating a whole new user.js file, into which you will need to repeat the steps you took to code your course certificate. So make sure that you have a backup on hand to simply copy and paste back in when you need to do so.
It can also be helpful in future jobs where you may be able to reuse a certificate that you have designed using jsPDF for another client.