HTML Javascript Jquery Programming

Google Sign – working with JQuery

Google prompted me today to update the Google Sign-in at Clickschool. This is long overdue anyway as currently it does not work with mobile devices.

I found that when adding a DIV using JQuery to use for the sign-in button and then making subsequent calls to google resulted in the button not being rendered for some reason I didn’t end up figuring out.

i.e. doing something like this didn’t work

$(‘buttonsContainer’).append(‘<div id=”gSignIn”>’){ …})“gSignIn”, {…});

My workaround was to add the standard HTML DIVs using JQuery and then load in the script without using the JS API call at all. Something like this:

var gsign = ‘<div id=”g_id_onload” data-callback=”onGoogleSignIn” data-context=”signin” data-ux_mode=”popup” data-client_id=”CLIENT_ID HERE” data-auto_prompt=”false”>

var gSignButton = ‘<div id=”gSignIn” class=”g_id_signin” data-width=”280″ data-type=”standard” data-size=”large” data-theme=”outline” data-text=”sign_in_with”data-shape=”rectangular” data-logo_alignment=”left”>’


‘loadScript’ is a custom function for loading the new Google Sign-in client.

The server-side is the same as before, and now it works on mobile devices (which previously didn’t work owing to the old way that Google used to display the popup used for signing in).

The Learning System

E-Learning: Gamification Points and Leaderboards best practice?

A vital and ashamedly missing part to my clickschool website is some kind of rewards mechanism. And so in the next update this piece of the jigsaw will be finally implemented. Hurrah!

e-Learning points statement
E-learning points statement


The term ‘gamification’ sounds great but what does it actually mean? I love the definition of it being ‘making non-game contexts more appealing‘. i.e. taking something that is clearly not a game, and making it more appealing. The easiest way of doing so is to add a rewards mechanism, and at its most basic level is to reward users with points.

An accumulation points can be used to achieve ‘levels‘.

And specific skills can be rewarded with ‘badges‘.

The above seem to be the three current holy grails of e-learning rewards.

I’m just working on the ‘points’ right now, which is what the rest of this is about along with good practice for when it comes to leaderboards.

Rewarding learners

The prospect of getting a piece of paper with a level/grade stamped on it two or three years down the line after hard-study can be all too much. We want something sooner. Learners want some kind of recognition at least.

Awarding ‘points’ has benefits to learners such as:

  • Feeling rewarded for putting in effort
  • Increased motivation
  • Increased engagement
  • Increased competitiveness (for those that are competitive, more on which later)
  • …and ultimately end up being more productive because they are engaging more.
Rewarding learners with points

And what’s interesting is that even if these points are essentially worthless, the very act of awarding them shows recognition and generally makes people happy and happier to engage than they’d otherwise do.

What will be interesting is how learners respond to points being issued by an insentient computer rather than a human. From a teaching point of view it is great as points are awarded automatically and consistently with absolutely zero effort.

However, with automatic points, leaderboards are generated with ease. These can be shared with a class to celebrate on a human-level.

Now of course you need to make it so that points aren’t too easy to get and learners can’t easily play the system. This is why I’ve implemented some limitations on the number of different types of points that can be awarded…all work in progress.

Doing something with those points

My idea is eventually for learners to be able to spend points on some kind of Tamagotchi type creature – perhaps by keeping it alive or furnishing its virtual house with virtual goodies. Considering it has taken me this long to implement points then this might be some way down the road… but just putting it out there if someone else wants to take this on.


I’ve seen leaderboards being done well and not so well. Let me explain.

When it comes to leaderboards, I’ve found that there are generally three camps.

Camp 1: Those that are crazily competitive and super motivated to want to beat others. They’re always within the top 20% of places on a leaderboard. You know the sort. Whilst waiting outside a shop, a friend of mine was pacing up and down outside, just so that they could beat a friend with their step-count app. To me, this seems like crazy, and as such I’m probably in camp 2 most of the time.

Camp 2: These are people who are indifferent about leaderboards and aren’t that competitive. They see little point in exerting energy to get to the top of what essentially is something that is not that meaningful to them. But they could be competitive with some nudges.

Camp 2 can be cajoled into camp 1 by either offering more tangible rewards or making them feel bad for not being in cajoling them towards camp 1. However, some will stubbornly sit in camp 2, which in the grand scheme of things is not a bad place to be.

Camp 3: These are people who are at the bottom of a leaderboard and discover that when all their friends are doing better than them, they feel inferior, demotivated and want to give up.

What does this mean in practice?

When implementing a leaderboard, I suggest the following:

  1. Only show (and make it clear) the top 20%ish of scores. That’s not the top 20 in a class (because if a class had 20 people it would make no sense). In this way, if people aren’t on it then there is no public shame about being at the bottom, they’re just not in the top 20%…which is no-where near as bad. This prevents a lot of ill-feeling about leaderboards. A lot of popular quiz apps don’t really get this idea, and they should.
  2. Give people the option to opt-out. If they really don’t like the competitive nature of leaderboards then don’t exacerbate the mental anguish.
  3. Have a fresh leaderboard every week/month/suitable time period. In his way, it’s a fresh challenge every week. This makes it harder for the same person to be at the top every week and gives others more of a chance to reach the top sports.
  4. Have a variety of leaderboards as to give more people the opportunity to shine. i.e. one for each quiz, one for points etc.
What my leaderboards currently look like

So, there we have it.

HTML Javascript Jquery Programming

Updated Table

I’ve spent these last few days refactoring and improving the table component over at Clickschool. It now renders the data over 20% faster than before and has increased functionality.

The improvements have largely been achieved by removing non-essential elements from the page and completely changing how events are handled when using the keyboard or mouse to navigate the table.

Yes I could have used a pre-made component, but where’s the fun in that? And would it have the functionality I wanted?

The table has editing capabilities (with control over which cells can or can’t be edited), validation and split navigation -just to name a few features.

It’s not supposed to act entirely as a spreadsheet but designed for specific tasks. It is all built from HTML elements but I guess for maximum flexibility you’d probably want to use the canvas.

I’m pretty pleased with it. It does what I need it to do at the moment.