Forum Discussion
How to Create a FREE Leaderboard for eLearning with Google
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/
- nicksolCommunity Member
There are now better options for creating a leaderboard, the Google Docs approach is way too complicated. You can just use a leaderboard widget, this is much easier to accomplish: https://cluelabs.com/leaderboard-high-scores-elearning-widget.html
- onEnterFrameCommunity Member
Wow you have some fun stuff on your site.
I would agree that the Google Docs approach is much more complicated. A lot of folks here are using these types of post as an opportunity to learn more skills so they can develop their own solutions.
And this way they will own the data captured in case they want to use it later in some other way.
Just wondering about your data storage... could you tell us a bit about the security and replication/backup?
Oh.. and when I tried the leaderboard widget from my phone it didn't say my favorite number :-/
- alphonsohendricCommunity Member
Wow James, can't believe this post escaped my notice and its been going for three years already. Cant wait to download and try it out. Thanx.
- LauraIngleCommunity Member
Thank you James for sharing this info. I appreciate it so much!
- ElisaMedina-562Community Member
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?
- LoriDresnerCommunity Member
If anyone has any updated solutions to creating a leaderboard, I'd love to hear them. It seems that the original steps outlined in this blog no longer work or maybe need updating.
- AriffKhalid-25fCommunity Member
Check out my latest reply hopefully it helps you
- AriffKhalid-25fCommunity Member
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!