Assigning badges to pages

One of the things we need to be able to do is to assign a set of badges that can be earned on a web site, know which badges have already been earned, and allow the opportunity for the badge to be earned.

Page Content hide
1 Implementation
2 A badge
3 A badge collection
4 PanelSets
5 Querying the badge database
6 A container
7 Putting it all together

Implementation

I plan to use exactly the same infrastructure to display badges on Google Sites, any web site, or even in desktop applications. That means that I’ll create a small web application for assembling and creating the badge status associated with any page. In fact it may be that multiple badge sets can be earned on a single page, so I’m going to talk about these concepts.
  • A badge. This is the data about the badge as defined in Mozilla’s open badges.org
  • A badge instance. This is a badge as assigned to an individual
  • A badge collection. This is a collection of badges that naturally fit together – for example different levels of the sane skill
  • A panelSet. This is a list of badge collections that describes which badges should be displayed in any page or part of a page.

All this is managed in a Google Apps ScriptDB instance. Here is the contents of  a badgeManager scriptdb. This contains all the above.

A badge

For each badge, you need to create an object that describes it. Here is a snippet to create a few badges. However, a better way may be to create your badges through a spreadsheet.


and here is the badge constructor.

A badge collection

This is a collection of badges that are likely to be used together. Here is how to create some collections.

PanelSets

Finally this defines which collections of badges should be shown in any given panel set.

Querying the badge database

Since this is going to be general (not google sites specific), we need to be able to expose the contents of the scriptdb as json (or more likely jsonp). Using the same technique as for Proxy jsonp , we can coerce a GAS webapp to share selected contents as follows

A container

We will be using iframes to encapsulate the badge panels, so we need a small web app to query scriptdb, and format the selected badges. Each PanelSet will have a unique ID that can be used to identify exactly which collection(s) of badges are needed on any given page and are passed to the container as a parameter. Here is the container code

Putting it all together

To be able to include an appropriate set of badges on any web page, all that is required is to create an iFrame with a source that looks something like this.
https://storage.googleapis.com/toasty/s/badgemanager.html ?panelset=xliberation_panel
The code doesn’t work anymore due to a change of API from Mozilla.

The next step will be to work through the recording of a badge instance, and its assertion and storage in the Mozilla backback.
Once this is all complete I will create a library you can use to build up your own badge management resource.