How to Create a FREE Leaderboard for eLearning with Google

Jan 19, 2016

onEnterFrame (James Kingsley)
By onEnterFrame (James Kingsley)

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/

41 Replies
Elisa Medina
4 years ago04/14/20 at 8:34 pm (UTC)

I'm working with Storyline360 and running into some hiccups. Mostly, the score value is pulling back Null. Within the SL file it lets me know the score is 130 so the hiccup is somewhere in the java or in the GAS, there's some sort of issue with sending and retrieving from what I can tell?

 

Laura Ingle
almost 3 years ago04/27/21 at 10:18 pm (UTC)

Hi James,

I followed this a few years back and am looking to test this again in my gamification courses. I can't locate the sample files I had. The link you share is no longer available. Is it possible for you to share the GAS and Javascript for this process. I'd love to be able to test this again in SL360.

Thanks!

Laura

 

Paul Kizilos
over 2 years ago11/09/21 at 4:42 pm (UTC)

Okay. I will write it up for you, but here is a quick summary. I just completed a leaderboard for a game project, and it worked out great. It uses a free data store on the web (Airtable or Baserow both work). I chose Baserow because I found it easier to use plain javascript in my course. The leaderboard gets included wherever I need it as an HTML and javascript web object that retrieves (via Baserow API) and displays the leaderboard data. There is some data parsing that happens here, but it is very straightforward. Javascript interactions in the game capture and post the score to the data store via the Baserow API. I also allow the user to delete their data from the leaderboard for any reason (again via the API). The trick is that a web object is static when included in the project and published. But the javascript in the web object dynamically adjusts the DOM (HTML page elements) based on the retrieved leaderboard results, whenever that happens. I show the leaderboard at the end of the game, after the current user has posted their score.

Fiona Cross
over 1 year ago12/28/22 at 12:13 pm (UTC)

I gave this a try a few years ago because i wanted a way to send and obtain values from google sheets but since then i've forgotten how it works so i've gone back digging. Sadly yes it seems all the links on this thread are dead. However incase anyone wanted to give this another try I've managed to find the new link to the tutorial but disclaimer - the file uploads are dead: https://blog.elblearning.com/blog/how-to-create-a-leaderboard-elearning-google

Regardless, I've managed to re-create the storyline file, javascript, and google application script and made a video walkthrough of all the steps i've taken to get it to work:

https://www.loom.com/share/47ba91a8a4234651b533cdbbb8dbf8d2

My demo files attached and i've included the scorm file test which is currently connected to my own google sheet as of the 29th of Dec 2022. For any travellers of the future be warned! it may no longer be the case and my google sheet connection may die whenever you're viewing this.

Goodluck trying this friends!

Sign In to Reply