Screenshot of certificate.

Add a certificate to a Storyline course that works in Articulate Online

Recently I had the task of adding a printable certificate to a test my client had built in Storyline 2. The course would be deployed on Articulate Online. I had to put it together from various sets of instructions I found online for the different stages. This is how I did it. I hope it’s useful to someone else.

The stages

  1. Make the certificate in HTML
  2. Set it up in Storyline
  3. Prepare the package for manual upload to Articulate Online
  4. Upload and test on Articulate Online

Strategy and compromises

I searched for ways to do it and found a few suggestions on Elearning Heroes and other sites. There were three main approaches:

  1. the certificate as a Storyline slide, which some script enabling the user to print it (from Elearning Brothers)
  2. the certificate as an HTML/CSS file images (drawn mostly from this post by Steve Flowers and this post by Owen Holt)
  3. the certificate as a PDF (this post by Ryan Lowry)

There was a fourth method I found in forums, modifying the file report.html which is generated by Storyline (as in this article) . I didn’t try this as I couldn’t find report.html in any outputs from any of my Storyline courses.

We first used the ‘certificate as Storyline slide’ approach. The printing worked but the ‘print’ button was still visible on the printed output, as an empty rectangle. I couldn’t get any of the workarounds suggested to remove it, so I went onto the second strategy, which was more successful. It gave us more control over the layout and appearance of the certificate and also meant the same certificate could be used for different courses. Once this was working we stopped investigating, so we didn’t try the PDF method. I might still try that in future as it would give some protection against the user’s printer failing if they could download and save the certificate.

My client hoped the certificate might capture the user’s name from Articulate Online but after several failed attempts using instructions meant for other LMSs, he said it wasn’t so important and we could just ask the user to input their name as they would like to see it on the certificate. This method doesn’t work in the mobile Articulate player, unfortunately, but my client wasn’t concerned about this.

Stage 1: Preparing the certificate

Screenshot of certificate.
The certificate (client logo replaced with mine)

My client gave me a certificate created in Word and asked me to make the certificate as close to this as possible.  I was able to do this with the basic HTML and CSS I could still remember from my days of web development. In the end three files were necessary for the certificate – the certificate itself and image files for the logo and HR manager’s signature. You may not need so many images.

  • certificate.html
  • logo.jpg
  • signature.jpg

Adapting Steve’s template files, I set up the certificate to receive two variables from the Storyline course itself – user (the user’s name) and title (the course title)

var learnerName=player.GetVar("learner").replace(/(\r\n|\r|\n)/g, '<br />');
var courseName=player.GetVar("title").replace(/(\r\n|\r|\n)/g, '<br />');

It then posts them into the certificate with the Javascript document.write() method:

document.write("<div class='name'>" +learnerName+"</div>")document.write("<div class='name'>" +learnerName+"</div>")
document.write("<div class='body'>has completed the following training course:</div>") document.write("<div class='title'>" + courseName + "</div>")

The certificate can take any visual form you like, as long as it has this code in it. I kept the CSS governing its appearance in the header of file. You could keep it in a separate style sheet, which would become another file to be uploaded with the HTML and image files.

Stage 2: setting it up in Storyline

My client had already created a Storyline quiz with a results slide. For me, this stage consisted of two steps:

  1. amend the results slide to offer the certificate if the user has passed
  2. create a new slide GenerateCertificate to capture the user’s name and print the certificate

Amend the results slide

Storyline results screen with Pass layer showingThis shows the result from the test, compared with the pass mark. The user has the option to review answers, retry or exit.I added two new layers to the results slide: Success and Failure.

Storyline triggers to show success or failure layers in results screen for quiz.The two layers Success and Failure add some text to the right of the word Result, above the three buttons.  Success is shown if the pass mark is achieved. This is done by a trigger in the main slide body.

The Failure layer just says you didn’t pass, and suggests you review or retry.

The Success layer includes a button saying ‘Get your certificate’ which jumps to slide 2.1 GenerateCertificate

Create slide GenerateCertificate

Screen from Storyline: enter your name as you would like to see it on your certificate, followed by button saying Generate my Certificate. The certificate will open in a new window. When it does, press Ctrl_P to print it.

It asks for the name you’d like to see on the certificate. The button Generate My Certificate executes a line of  Javascript which opens the HTML file certificate.html in a new window.

This won’t work in preview mode – you can only test it when it’s fully published.

Stage 3: Preparing the package for manual upload to Articulate Online

I found how to do this in several articles such as this.

The steps at this stage

  1. Enable manual upload to Articulate Online (a one-off operation)
  2. Publish to a local folder
  3. Unzip, add the essential files, and rezip

If you normally upload to Articulate Online using the default Articulate Online publishing option, you may have to enable manual upload, both in Storyline and Articulate Online itself. First we’ll deal with Storyline.

Enable manual upload to Articulate Online

Storyline File menu showing Storyline Options linkStoryline options window showing Enable publishing for manual upload to Articulate Online option box ticked.

 

 

 

 

 

 

 

 

You only have to do this once in Storyline, but if you amend the course on a different PC you’ll have to do it on that.

From the File menu, select Storyline Options.

From there tick Enable Publishing for Manual Upload to Articulate Online.

Now that’s done you won’t have to do it again in the same Storyline install.

Publish to a local folder

Storyline publishing window showing fields for manual upload to Articulate OnlineSelect the Articulate Online tab and a local folder to publish to.

This will create a file in your chosen folder with the extension SL1. It’s actually a zip file.

Unzip, add the essential files, and rezip

I use 7zip for this but you can use any zipping app.

  1. Rename the zip to change the extention from SL1 to zip e.g. myquiz.zip
  2. Right-click and select Extract All …
  3. Go to where you saved the extra files – certificate.html and any images or css files.
  4. Copy them
  5. Go to the folder of extracted files.
  6. Paste the files you copied so they’re in the folder at the same level as story.html
  7. While you’re still in that folder, select everything, right click and zip the files to a new zip file. Call it anything e.g. myquiz_with_cert.zip
  8. Rename that file myquiz_with_cert.SL1

If story.html and your certificate files aren’t in the root of your zip file, it won’t work. That’s why it’s best to create it from that folder, not the folder above.

Stage 4: Upload and test on Articulate Online

 

 

Again you have a one-off change to make to your settings on Articulate Online.

  1. Log in to your Articulate Online account and select the Settings tab. 
  2. Choose Other Settings.
  3. Check the box next to Enable manual uploading. Then hit SaveArticulate Online Other Settings screen showing tick box for Enable manual uploading

Now to upload our module:

  1. Click the Content tab Articulate Online menu showing Content highlighted.
  2. Choose Manual Upload (it’ll be at the very bottom of your content list).
    In the window that appears, enter a name for your content and then click Browse to find the compressed SL1 file you created earlier when you published. Select the file and click Open.Articulate Online window to do manual uploading, selecting content name and file to upload.
  3. Click Upload.

That’s it! If you click the Content tab, you’ll now see your newly uploaded content in the list.

Sample files

Some sample files are available on Steve Flowers’ post. These are the ones I adapted for my purposes. If you want to adapt them you need some knowledge of HTML, CSS and Javascript. If the one I’ve shown above is closer to what you want, get the HTML and graphics here.

There you are. I’ve pulled together various helpful tips by more experienced people. It’s not perfect but I hope it gets you on the way to adding a certificate. If anyone has better methods, or variations for Storyline 3 or other versions, (this doesn’t work in the mobile player) please add links in the Comments. Likewise if you can share how to get the user’s name from Articulate Online, please!

Free elearning scenario template

Just follow Designing Predicaments step by step for a believable, engaging learning scenario.

Powered by ConvertKit

Leave a Comment