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.
- Make the certificate in HTML
- Set it up in Storyline
- Prepare the package for manual upload to Articulate Online
- 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:
- the certificate as a Storyline slide, which some script enabling the user to print it (from Elearning Brothers)
- the certificate as an HTML/CSS file images (drawn mostly from this post by Steve Flowers and this post by Owen Holt)
- 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
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.
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 />');
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:
- amend the results slide to offer the certificate if the user has passed
- create a new slide GenerateCertificate to capture the user’s name and print the certificate
Amend the results slide
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
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
- Enable manual upload to Articulate Online (a one-off operation)
- Publish to a local folder
- 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
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
Select 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.
- Rename the zip to change the extention from SL1 to zip e.g. myquiz.zip
- Right-click and select Extract All …
- Go to where you saved the extra files – certificate.html and any images or css files.
- Copy them
- Go to the folder of extracted files.
- Paste the files you copied so they’re in the folder at the same level as story.html
- 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
- Rename that file myquiz_with_cert.SL1
Stage 4: Upload and test on Articulate Online
Again you have a one-off change to make to your settings on Articulate Online.
- Log in to your Articulate Online account and select the Settings tab.
- Choose Other Settings.
- Check the box next to Enable manual uploading. Then hit Save.
Now to upload our module:
- Click the Content tab
- 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.
- Click Upload.
That’s it! If you click the Content tab, you’ll now see your newly uploaded content in the list.
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.