Skip to main content

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.

The supposed easiest way is to simply create your course certificate on a slide within a course itself, and then write a JavaScript trigger to sit behind a button click that will simply print that page.

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:

Before attempting to amend this layout using my print options, this is how a slide by default wants to print directly from Storyline 360. If this happens for other users, how can we get the print to be uniform and consistent?

The key to what we want here is consistency, ensuring the end certificate is going to look exactly as you the designer intend, no matter who opens the document and on what device. This is why I feel the most superior option that I have found to date when generating certificate PDFs directly in Articulate Storyline 360 is to use a JavaScript library called jsPDF.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.0/jspdf.umd.min.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="story_content/FileSaver.js" type="text/javascript"></script>
<script src="story_content/split_text_to_size.js" type="text/javascript"></script>

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

Step 2 – Building Your PDF in JavaScript

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.

The good news is that you don’t have to keep making your code changes within Storyline and republishing to make your design changes. Any Execute JavaScript lines that you write as a trigger in a Storyline project are all contained within your published project’s ‘story_content’ folder in the user.js file.

To get started, go ahead and make a button in your project, ideally on the first page of the course for now (we can move it somewhere else later), and add an Execute JavaScript trigger to the button.

Go ahead and type REPLACE ME, into the box. Save and Publish.

   

 

Now that we have found our temp text, we can go ahead and edit directly inside the user.js to build our certificate as we wish. Due to the fact that the Execute JavaScript window in Storyline does have an eventual line limit, and certificates depending on how many images are included in the code could overtake this limit, it is actually recommended that you do all of your jsPDF coding directly in the user.js file as we are now.

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");

You can import variables from storyline to use in your certificate PDF document dynamically. Just use the usual GetVar method as documented in many of Storyline’s online JavaScript guides.

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.

doc.setFillColor(51,204,255);

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.

doc.save('MyCertificate.pdf');

This will be the final line in your JavaScript function, which will generate your PDF file using the jsPDF library. The name of the file is defined by what you have typed into the parentheses.

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.

Chris Hodgson

Chris Hodgson

Chris Hodgson is an award-winning Digital learning Solutions Developer and Director of Discover eLearning Ltd. He supports SMEs and large firms through the process of integrating eLearning into their organisation. Chris has over 10 years experience working in Higher Education, Independent Training Provider Sector and Charity Sector learning and development.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.