How to Create a FREE Leaderboard for eLearning with Google

Jan 20, 2016

This is the intro. Read the full article, watch the videos, and download the sample files from here: http://elearningbrothers.com/how-to-create-a-leaderboard-elearning-google/

Play with a live Storyline example here and see how you rank! http://elbrotherscustom.com/jk/blogs/leaderboard/story.html

 “Gamification.” We recognize the benefits (even through all the hype) and we would like to add it to our courses. But where to begin? It is not enough just to add a game to your course. We need a way to make it social. After all, bragging rights go a long way towards reinforcing learning.

I think one of the easiest ways to tip your toe into eLearning gamification is to add a Leaderboard to your course. Leaderboards remind learners that they are not alone, others are completing the same training. They also create some friendly competition and let learners see how they rank among their peers. And often, if they rank low, they will go back and try again on all their own.

But how to add a Leaderboard? And how to do it for free? Google Sheets and a little code provide the solution. I know a lot of you use Google Docs every day. You may not realize that Google allows users to develop add-ons and applications on top of Docs using Google Apps Script (GAS). GAS looks a lot like JavaScript and it hooks into Google Docs to enable you to create all sorts of new tools. I have used it in the past to create printable certificates, detailed course interaction reports, and even a sort of scaled down LMS.

I decided to use Google Sheets and GAS to create a sort of database and API for a Leaderboard. With GAS I was able to turn a spreadsheet into a web application that will receive data from a course and send back a list of the top ten users. I added some JavaScript to my course to handle the sending and receiving from that end. I packaged it all up for you and wrote some directions, which you’ll find below. This week I am adding a Leaderboard to Storyline 2. If you are familiar with JavaScript and feel adventurous you can adapt this to work for Captivate, Lectora, HTML5, etc. And soon I will post code and videos for those tools as well.

The files linked in the resources section of this post have the GAS code and JavaScript in them.  Using the instructions below (and watching the videos) you will be able to learn how to create a leaderboard for eLearning with Google:

Create a Google Sheet
Add GAS to the Sheet
Setup the Sheet
Deploy the Sheet as a Web App
Add the required variables to your Storyline 2 course
Trigger the JavaScript to send and receive the data
Display the Leaderboard to learners
Read the full article, watch the videos, and download the sample files from here:http://elearningbrothers.com/how-to-create-a-leaderboard-elearning-google/

8 Replies
Abhishek Roy

I have implemented in my LMS and it’s working absolutely fine. Thanks for the great tutorial.

However could you help me with the following two things?

1.) Feature request:

However, i found out that it would have been great if i could have added a refresh / reload button on leaderboard slide which will automatically scan through all the user scores and update the rank in realtime while the window is still open. At the moment it does not reflect if some other user have taken the same course at same time or may be few secs after me. i have to restart the course to see the update.

2.) Issue:

I am facing an issue where it’s adding duplicate name of same user. Means if i retake the quiz as same user, it will add my name 2nd time and two users of same name are being showed in top 10 list. i want to remove the name automatically from the 1st attempt so that only one name (the current attempt) will be showed in list. Can it be done through some coding in the spreadsheet and / or storyline ?

I shall be grateful if someone helps me with this.

Thanks.

This discussion is closed. You can start a new discussion or contact Articulate Support.