Open Badge Generator & Issuer using Google Sites/Forms + Source Code

So, the rationale for building this system came from a need for our institution to be able to issueOpen Badges, an initiative backed by the Mozilla foundation for standardising the issuing of badges for 'verifying learning'.

All the systems that allow you to issue badges to users are all tied in to big and bulky VLEs such as BlackBoard. So what happens when it's a face to face session? How can we issue a badge to a user when they aren't in the ecosphere of the VLE or institution for that matter? We didn't want to have to worry about usernames, registrations, training on another system etc

So I had a scout around to see what was about. I came across work by +Martin Hawksey where he used Google Sites to wrap up Mozilla's Open Badges Issuer api and a Google Form to serve this api with the correct badge details. 

Fab, this is 'sort of' exactly what we wanted. I mean 'sort of' in the greatest respect to Martin's work, simply put, I needed the start and middle to work very differently. We wanted to have a system where we could create the badges on the fly, and issue them without the end user ever having to fill anything out other than a name and email address when they register for one of our face to face sessions or workshops, which they do anyway.

Even though the end product is quite different from Martin's initial system, the core is based on his foundations, so props to +Martin Hawksey and his work here --> http://mashe.hawksey.info/2012/12/open-badges-issuer-gadget-google-sites/

Below is how the system now currently works after building on top Martin's original work, from start to finish. 

----------------------------

Scenario: Our team have just opened up registrations for our 2 hour workshop 'Social Media for Researchers'. Five people have registered (Different from this system) with their name and email address. 

Before the workshop date, a member of the team visits the Badge Generator to create a new 'Social Media for Researchers' badge. They give the badge a name, description, a URL to where the badge image (PNG) is hosted and a URL to where the criteria for the badge can be seen.

When submitted the script behind the form populates the Badge Issuer with the inputted badge data.

The workshop is now over and 4 out of the 5 people attended. A member of the team can now use the Badges Issuer to input what badge they would like to issue (Social Media for Researchers), the recipients name and email address then submit.

The recipients who attended the workshop will now get an email with a custom link in it. This link takes the recipient to a Google Site which has a 'Claim your badge' link. This allows them to push the workshop badge to their Mozilla Backpack.

----------------------------

In a nutshell, that's it. Of course behind this is a layer of script, an api, some proxy code etc

The two forms use a little validation code to stop spamming and unauthorised use, a form question which has been validated to contain certain text.

But before I get started with how it all works, be aware that I haven't coded for quite some time plus this was my first venture into Google Apps Script territory. There are bound to be more efficient ways of completing the tasks I wanted to achieve. I tend to change things until they work the way I want rather than hardcode from scratch pulling syntax out my ears knowing exactly where everything goes. I mean It took me a while to realise I could log errors and see an execution log :D

However, it works, and well I might add!

The full source code link will come in another post as I have to do some tidying, commenting, making sure attributions are in place and host it somewhere. It will of course be served under a Creative Commons Attribution 3.0 Unported License. CC-BY

I'll try to articulate the process without getting too much into scriptsville!

Right, the components:

2x Google Forms

3x Linked Sheets

1x Google Apps Script Project (Deployed Web App)

1x Google Site

1x Externally hosted API wrapper Gadget

1x Externally hosted proxy file for parsing JSON (php)

The whole system is laid out pretty much like this:

Click to Zoom

Hopefully you can tie up my dodgy diagram above with the scenario. Once the first form is filled in to 'create' the badge, the form stores the required badge information. This info is then pulled using the Google Sheets '=IMPORTRANGE' formula, into a 'Badges' sheet which sits neatly within the linked form for the issuer. I did this instead of pulling info directly from the 'New Badges' sheet as I wanted the freedom to detach the issuer from the generator at any point. I would then only have to remove the importrange function from the sheet and the issuer would still work with a manual badge setup.

Once the badge info has been pulled a timed trigger fires every 60 seconds:

This updates the 'Choose Badge' drop down list with the name of each badge in the 'Badges' sheet, meaning when a team member goes to issue a badge you avoid any spelling mistakes or hidden spaces. The timing can be suited to the frequency of potential new badges. 60 seconds was used for development purposes, realistically it could be daily.

Next on the Badge Issuer form the badge can be selected along with the name of the recipient (User who gets the badge) and their email address, once inputted, the form can be submitted.

The form will then base64 encode a string including the row in the 'Data' sheet which contains the users name and email address. This URL is built with a querystring popped on the end and emailed to the recipient of the badge.

This next section all revolves around the '?claim_code=' querystring which is appended to the URL above.

Once the link has been clicked it will land on the Google Sites page which holds the Open Badges Issuer Gadget, as Martin said in his article "Essentially it’s a wrapper for Mozilla’s Issuer API"

The api needs to be fed a validated JSON file which holds the badge information.

This api is wrapped in an XML compliant script that holds a 'base_url', the base url is where this proxy php file comes in. Martin stated that "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". I'm not sure if this is still the case and it is something I tend on revisiting as part of the roadmap for this system. 

Regardless, it works and it's using this php proxy file.

Once this file is accessed it takes the code after the '?claim_code=' and sends it to the deployed Google Apps Script URL.

The deployed web app (Code sitting behind the Issuer form/spreadsheet) then base64 decodes the querystring, extrapolates the row containing the badge name, the name of the recipient and their email address. Before the JSON blob is created, a small script searches the 'Badges' sheet to grab the relevant badge information. The script then bundles all this information together and returns a static JSON blob that sits as a URL.

This all gets returned and gobbled up by the Issuer API that sits on the Google Sites page.

Recipient can now click the 'Claim your badge' link and voila, one badge issued :D

Click to Zoom

We have now written up a small guide to help anyone who would like to implement this elsewhere. The system we have built and documented is still in it's initial pilot/proof of concept phase so expect there to be some discrepancies in the source code.

Here is the link to the guide:
https://docs.google.com/document/d/12qRhAc9rzUH7FXBW0J4NtLkY-8RoQVw-Z4yOk3mTJmA/edit?usp=sharing

And here is a link to the source code:
https://gist.github.com/thedavidmullett/54a5153f6298539ce05d

This documentation is provided on the basis that the viewer has some technical knowledge of Javascript Syntax, basic Google Apps Script and basic HTML/CSS knowledge.

If anyone has any comments, please let me know :)