How to Create a FREE Leaderboard for eLearning with Google
Jan 19, 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/
41 Replies
Thanks James for sharing here - it's always great to see more examples. :-)
Good point Ashley!
You can play with a live Storyline example here and see how you rank! http://elbrotherscustom.com/jk/blogs/leaderboard/story.html
Hi, James! This is awesome, and I wanted to note that you would also be welcome to post over in our Building Better Courses forum to share with even more folks! :)
Thanks Christie! I will post it there now.
Thank you very much for sharing this, it works great and opens up a whole other world for anyone who wants to save / restore values. As much as I use Google Docs, etc., I was not aware of this capability. Thanks again!
Glad that you found value in this older post Jack :) Thanks for popping in to share. I saw you mention in another thread wanting the leaderboard functionality.
Yes, it is great. Had (have) it up and running in less than 1/2 hour, start to finish.
Oh, that is great! Thanks for the update Jack :)
Hi Jack I tried this and Yes this great! but if I choose- Only myself or Anyone option. I can't get scores in spreadsheet. Is there any other way to do this. because I can't get 3rd option (anyone, even anonymous) in my client google id.
Hello Ashok - Hopefully Jack is still subscribed here and will be able to pop in and assist you here. If you do not hear back soon, please feel free to reach out to the user directly via the 'Contact Me' option on the user profile.
Hi Ashok,
Unfortunately that is the only way it will work unless you tie into
Google's User API and get your learners to sign in with their Google
account. The JavaScript posts the data anonymously (it doesn't have a
Google account).
There are a few ways you maybe able to work around it.
1. Set up the whole system in your Google account and then pass
ownership of the doc to your client. I am not sure if the doc ID will
change.
2. Help your client install the code in their account. Then update your
JS with the new document ID.
Thank you,
James Kingsley
Need an awesome way to collect feedback?
Don't just collect feedback. Start a conversation.
ReviewMyElearning.com
Hi James,
It appears the leaderboard for the Storyline game you shared no longer works. In looking at the eLearning Bros site, I found the following comment by a member who had the same issue with the leaderboard screen stuck on "Loading..."
"Data wouldn’t send or receive and instead, my projects would just show the “Loading…” message. On these same projects, I noticed that the ‘/exec’ address generated by Google sheets contained ‘macros/s/u/0/’. I put the address in my browser, and found out it was incorrect. I figured out that when there’s a ‘u/0/’ in the address, the app wouldn’t work. The correctly working address always seems to just contain ‘macros/s’ (no ‘u/0’ in sight). I now delete the ‘u/0/’ section in the addresses generated and the projects and respective apps work perfectly."
Hi Pano,
In case you don't hear back from James, you may want to message him directly using the Contact me button on his profile.
Best of luck with your project!
I would be curious to know if anyone has fashioned a version of this for themselves that allows learners ("players") to complete milestones of a game/quest at their own pace, while the module reports their progress/score along the way, updating their established/existing leaderboard record dynamically. That is my particular challenge beyond the reporting/recalling of leaderboard stats within the game. Thanks in advance for your insight.
-tvt
I've been using this fantastic leaderboard code for a long time in my storyline projects but have come across a problem since upgrading to Storyline 3.
In the storyline 2 output, the %TextEntry% variable displays perfectly with every person on the leaderboard appearing on their own line. But in the storyline 3 output there are no line breaks and it is displaying as one big paragraph - making it difficult for the user to read.
Has anyone else come across this?
Due to the issues with formatting the leader board in SL I have started building a separate web page to display it.
Then the course devs can insert it as a web object in the course.
That sounds great! The leaderboard is excellent and adds such a lot to my storyline interactions so thank you for showing us how to do it :)
Not working. Leaderboard is not loading.
Has anyone been able to get this to work in Storyline 360?
Got it to work. Apparently you need to set up ALL of the variables in storyline 360, not just the three (userName, userScore, and topTen). I had to set up ALL the variables outlined in the javascript that reference those three storyline variables. (i.e., scoreVarName, userVarName, topTenVarName, topTenMsg). After I added all of the variables to storyline, then everything worked.
Hi, Glad you got it working!
I think it should have been working without setting up the JS vars in SL. The SL var names go in the first lines of the javascript (along with your sheet URL)
If you want me (or anyone on this thread) to take a look at it you can upload your file here.
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
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 :-/
Yes, you are correct. It's working now and also with just the SL variables. Thanks!
I really like this and would love to customize this even further to show data by challenges in the game. I guess I'd add more columns. Would also like to style it up more, show badges, and player avatars. But that's a bit out of my league. ha! Someday!
Can this be done with an Excel Spreadsheet and hosted from a private server to collect data? Maybe with Javascript instead of GAS?
It would be pretty hard to use an .xlsx on a web server. You would need server side code to open and edit the file :-/ If you were to go that far then you might as well use a database.
My current top favorites for "free" simple Database as a Service (DaaS) are FireBase and Airtable.
Airtable is really cool in that you can easily create customized "views" that you can embed right into your course. The downside is that the free level has their branding on it.
Another tool with a TON of promise is Glide. It lets you create mobile "apps" from google spreadsheets. It's amazing and very powerful. But as of now you can't really embed it in your course (it looks weird when embedded).