In this video, I’ll show you step by step how you can add a printable certificate of completion to your Articulate Storyline course, with variables on the certificate for a username, a course name, and a user score.
cta under video
A Printable Certificate
If you want to add a printable certificate to your Storyline course with the current data on the certificate and also the user name, there are different ways to accomplish this. Now in this video, I’ll show you how to add a HTML certificate to your Storyline course and how you can post Storyline variables to HTML. At the end of this video, I’ll show you the link where you can download my solution that you can use in your next Storyline course.
Sample course
Now, let’s see what I’ve got here. I’ve got here a a really simple Storyline project with a starting slide where a user has to fill in his name. That is on the certificate at the end. What you also can do is, with some JavaScript codes, get the username from the LMS and a user don’t has to fill in his name on the first slide.
Now, a second slide is one question and on the last slide you see here, a “Well done!” and here’s a button to print a certificate. On the button to print a certificate, there is an execute JavaScript. What I will do now is I will show you my HTML certificate, and then I will return to Storyline.
The HTML Certificate
This is the HTML certificate that I have created. You see here we will fill in the user name, the name of the course where the certificate is for, and there is also a place for the score. That our three variables.
Create variables
Now let’s go back to Articulate Storyline and let’s see how I’ve done this with these variables. What I’ve done in Articulate Storyline here, you have my first variable. A user fill in in his name and the contents will be saved in the variable Student Name.
What I’ve done next is I’ve created two other variables. I have here a variable Course Name, which contains the name of this course. You can edit and it will be on the certificate. I’ve also created a variable Course Score, with the default value of 80%, but you can also create a variable score and input the score of result slide in it. With these three variables, I’ll go to the last page. Here is a Print Certificate button. This one. If user clicks on it, JavaScript will be executed. So let’s open the JavaScript window. Now, what you see here is that the first line JavaScript get var player means that it will receives all Storyline variables. On the next free lines I have here the Storyline variable Student Name, Course Name and Course Score. I will save them in JavaScript variables, You name, See name, and Score.
Add Javascript
Then, what I’ll do here is I’ll create one JavaScript variable and that says Story Content X slash external HTML files slash certificate. Put HTML because that’s the path where you can find my certificate print HTML when I’ve published my course. And what I will do is I’ll pass the variables through the query string in my browser so I can show you how that looks like. One moment.
Variables in Querystring
Here you see my certificate. What you see here is that in the query string, here are the variables. You see You name with the content, See name with the content, with the name of the course, and at the end there’s also Score which is 80. On my certificate HTML, I will retrieve these values and set it in HTML. That’s the next step I want to show you.
When a user clicks on the button, this JavaScript will be executed. On the last line of JavaScript, JavaScript says “A window open” and what he must open is this URL and certificate dot HTML. Now, let’s click on Okay and let’s check the HTML file that I’ve created right now so that you can do a Notepad++ and Notepad or any other HTML editor.
HTML certificate structure
Myself, I use Sublime Text. Now what you see here, you’ll see this is HTML document with the title of the HTML document. Here, there are some style sheets and from here there is a JavaScript that catches the values from the variables in the URL string. I don’t going to explain this because you can find it on the internet and paste it here. Here, I’ll have defined my own variables. JavaScript variable username where I’ll set the contents of You name in it, same for the See name and Course Name, and the same for Course Score for the score. Here, I’ll get the date for today. And here you see my body of my HTML document where I’ll create Print My Certificate.
What I do here, for instance, with the username is that I’ll paste the contents of the variable here. I’ll do it here for the Course Name, and I’ll do it here for the Course Score. Here, I’ll do it for the dates, and here for the User Name so he can sign his own certificate if you want to. Here what I’ll do is I’ll add my logo to it.
Preview the course
Now, what happens if a user clicks on the button? Let’s preview now the Articulate Storyline course and let’s see what happens. So, I publish my course. I click on Open here. Now, I’ll go to the folder where my course is open. Let’s see why … No, it’s on my other screen right now so all I have to drag it here. What I’ll do now is I click the story dot HTML and it will open in a browser. Also, in my other windows. Let’s drag it to this window. One moment. There it is. So what you see here is my course. I can fill in my name here. I have to do it right. That’s my name. Click on Continue.
Now, in a real course, you get a bunch of questions. Now, I have only one question so I click, this is correct, submit, and it can go to the next page. The next page is my Well done slide. What happens if I click on the Print Certificate button, the JavaScript opens a new a window and it loads my certificate dot HTML file where you see that in the query string there are different variables and I catch the variables and place it in the HTML file. You see here the name, the title of the course, and also a course score. Here is the current date, the date of today, generated by JavaScript.
Now, normally what you have to do is the certificate dot HTML is not a standard Storyline HTML file so you have to put it manually in the published folder every time you publish a course. But I have a solution for you that you have to only do it once and then you cannot forget it.
Let’s go back to Storyline for a moment. What I’ve done here in Storyline, you see, there is a page that’s not in my flow, let’s say. If you go to the page, there is nothing on it but I has changed the properties. The player features here I have set it on custom for selected slides and here I’ll check the resources for this one. Only on this slide, the resources will be shown, but a user will not see this slide in his course. On all the other slides, the resources are not shown but because Storyline sees that the resources are here, it will load the resources. What you can do is you can go to your player.
Here on the resources, I have here uploaded my certificate dot HTML file. I’ve done this once and now I can publish my course and Articulate Storyline automatically adds the certificate dot HTML file to my published project. This way, I cannot forget to add it because otherwise a user cannot see his certificate. In this way you can add HTML certificate to your Articulate Storyline course where the other user can print.
Download Javascript and HTML certificate
Now, I promised that I would share the JavaScript file and also the certificate dot HTML file. You can download it from upwardonlinelearning.com/storyline-certificate-ofcompletion and you can see the link in the video. I will also share the link in the description of this video below.
Click to download the javascript and the HTML certificate
Now, did you find these slides really attractive and will you also use these slides? I’ll use team by Faster Course. They have a bunch of Articulate Storyline templates that I think are really nice and you can purchase them now with 10% discount. If you go to FasterCourse.com and purchase the Storyline templates, if you fill in the coupon code upwardonline, you’ll get a 10% discount for now. I’ll hope you can use this HTML certificate in your next e-learning project.
