Mozilla Open Badges Issuer Gadget for Google Sites (and issuing Badges using a Google Spreadsheet)

Update 16/06/2014: This idea has been revisited by the Elevate team at University Campus Suffolk. You can read more about and get a copy of the code here

Update 18/02/2015: I’ve revisited the idea of issuing Open Badges with Google Apps Script and embedding in Google Sites which improves this idea further. You can read more about this here.

 Open Badges Issuer Gadget for Google SitesWant to issue badges in Google Sites? That was the challenge I set myself. My solution is the Open Badges Issuer Gadget for Google Sites. This gadget wraps the Mozilla Issuer API to allow you to issue badges from a Google Site. To use the gadget is insert into a Google Site and prefix (base url) is set for your Assertion JSON. To allow users to collect their badges direct them to the web address of your Site page containing the gadget adding ?claim_code={assertion url post fix}.
For example, if my Site page with the Issuer Gadget is found at https://sites.google.com/a/hawksey.info/openbadges and by Assertion files are all found in the directory http://mysite.ac.uk/badges/ this would be my base url. If one of my Assertion files in this directory was v1mhaws.json, to claim the badge for that person I’d send them a link to https://sites.google.com/a/hawksey.info/openbadges?claim_code=v1mhaws.json

Get the Open Badges Issuer Gadget for Google Sites

The Open Badges Issuer Gadget for Google Sites is located here:

http://hosting.gmodules.com/ig/gadgets/file/108150762089462716664/openbadges.xml

To add to your own site

  1. Open/create a page on your Google Site
  2. Selecting Insert > More gadgets,
  3. Add gadget by URL inserting the address http://hosting.gmodules.com/ig/gadgets/file/108150762089462716664/openbadges.xml
  4. Insert a prefix (base url) for your Assertion JSON files (you can leave this blank if the host site varies) and click ‘Ok’
  5. For each or collections of Assertions direct users to visit the page your gadget is hosted on adding ?claim_code= followed by a comma separated list of the remainder of you Assertion file locations

Try it

If you’d like to try the gadget complete this form and you’ll be issued with a Gadget Issuer User Badge. Get the question right and you’ll also get the Gadget Issuer Gold Badge.

How the gadget works

For those of you unfamiliar with gadgets/widgets they are an easy way to embed content in other gadget/widget compatible sites. The majority of gadgets are simply XML wrappers for HTML content. The great thing is that gadgets can include JavaScript that doesn’t get sanitized/stripped out. If you want more information about making gadgets see My First Google Gadget. The source code for the is linked to above but can also be viewed on GitHub. Essentially it’s a wrapper for Mozilla’s Issuer API

The Issuer API is a script that can be dropped-in to any badge issuer’s website to provide a way for users to add an issuer’s badges to their backpack.

Feel free to modify the gadget code to handle the success and error callbacks.

Yep I’m issuing badges from a Google Form/Spreadsheet, here’s how

If you tried the demo you might be wondering how I went from a Google Form to issuing some badges. Here’s how. Google Spreadsheets includes Google Apps Script, a cloud scripting language with uses the JavaScript Syntax to automate processes across Google products and third party services and deploy/publish custom applications and data. Apps Script includes a Content Service, which amongst other things lets you publish JSON data. As the metadata blobs behind open badges are JSON based we can use Apps Script to process the form responses, email the recipient and create the JSON … well almost.
An issue with JSON files generated by App Script  is security measures put in place by Google prevent the cross-domain use when called by AJAX as used by the Issuer API. So currently I have to proxy the JSON via my webhost (Mozilla could fix this by also permitting JSONP, which can also be produced by Apps Script. I imagine this is however low priority. If you have any thoughts on other ways leave a comment).
Here’s a copy of the code running behind my Google Form (you’ll also need to include a rollup of the CryptoJS sha256 library to hash and salt the recipient’s email address).
[A pointer if you want to extend this work is you might want to use the native NoSQL style ScriptDb Service part of Google Apps Script to prepare and serve assertions. Also I found the Open Badges Validator is very useful for testing your Assertions.]

Related work

Some recent posts/upcoming events that have influenced this post are:

So what do you think? Inspired to issue badges from Google Apps? Have I missed anything? What isn’t clear? I look forward to your thoughts 😉

chevron_left
chevron_right

Join the conversation

comment 9 comments
  • bruce

    Great stuff Martin. Coincidentally I’m working on something very similar -http://ramblings.mcpher.com/Home/excelquirks/badges – still at planning stages at the moment. Maybe we can collaborate.
    Bruce

    • Martin Hawksey

      Ah interesting! One of the things at the back of my mind was templating badge creation to make it easy to hook into other Google Apps based scenarios (perhaps a Managed Library w/h GUI). The issue with x-domain block on the ajax call for the assertion made in the apps script put me off for now … but perhaps you have a clever workaround?
      Martin

  • Baci

    Really coll! I’d love to embed an open badges backpack group in my Google Mail Signature. Ideas?

    • Guy Shearer

      I’d agree with that – I love the idea of integrating badges with Google Apps and could see that being really useful but our (primary age) pupils don’t have a blog home page or similar to host their awards in (yet – I can see this being the spur to make us sort that out!) – but if they could add them to their Gmail sig it would be so motivational….
      Thank you for the post – I’m not especially technical but I understood it (I hope!) and am inspired to try something over the holidays!

      • Guy Shearer

        Actually all I had to do was paste a link to my backpack group into the signature box….

  • Juan Carlos Zuluaga

    Es un articulo interesante y pues me gustaria saber si puedo referenciarlo desde mi pequeño blog.
    Saludos

  • Mozilla Open Badges Issuer Gadget for Google Si...

    […] Want to issue badges in Google Sites? That was the challenge I set myself. My solution is the Open Badges Issuer Gadget for Google Sites. This post outlines my solution and even lets you recieve a …  […]

Comments are closed.

css.php