How to set up your own badge environment

In the various sections in Badges I showed the detail behind creating a badge environment. Now, let's say you wanted to implement your own badge issuing environment. You can use some or all of the xLiberation environment, or host other parts of it yourself.  Here are some options. I'll order them in such a way that you can progressively apply them step by step, rather than having to do the whole lot all in one shot.  

Use the xLiberation environment as is. 

You could of course start issuing badges right away, by including this code on any web page

<iframe src="http://xliberation.com/s/badgemanager.html?panelset=xliberation_panel" style="borders: none;height:300;width:300"></iframe>

This will give a panel like the one on the right. 

Of course the badges that will be awarded will be the ones in the xliberation environment. Nothing wrong with that if that's what you want to do, but I assume you will want to issue your own badges and setup your own questions (although you are perfectly welcome to issue xLiberation badges)

To do that you need to create your own scriptDB, which I suggest you populate from a spreadsheet as described in Creating badge environment from a spreadsheet.

Create your own scriptDB for badges

badgesFromSheet


  • Make your own copy of this spreadsheet, which should be private to you.
  • Create your own badgeOrganizer script by copying this one and renaming it to something - this will be your google apps script badge organizer/manager. The ScriptDB associated with it will be the one in which you store your badge environment. This script should be private to you.  Take a note of the project properties associated with this script as we are going to include this as a library in the spreadsheet script.
  • Save a version in manage versions, and deploy your badgeOrganizer as a web app, public, even anonymous. Run testGet to authorize it. This is the badgeOrganizer web app URL and it will be needed later.
  • In the copy of the spreadsheet you made. open the script editor, go to manage resources and add a reference to your badgeManager/badgeOrganizer project properties, first deleting the one that is already there. Leave the reference to mcpher library in place.
  • You'll see this function below. Change  'badgeOrganizer' to whatever you have called the library you added the reference to. Now go to the first sheet and hit the button to  transfer all the badge data in the sheet - the message will tell you if all went well.
function makeMyBadgeData() {
 // this would be if you were populating a scriptdb in some other script
  mcpher.makeBadgesFromSheet(badgeOrganizer.publicStuffDb());
}

Now you have implemented the xLiberation badge data, but in your own environment. To test it, use the url of the published link you created from your badgemanager, and copy it into a browser.  You should get some jSon returned.

Use the xLiberation hosted files. 

Ideally you should host your own versions of these files, but if you don't have a web server, or if you want to do that later, you can use the xliberation ones by passing the url of your published web app as a parameter as below .. replacing the badgeOrganizer url with the uri encoded version of your own. You can use the converter below - just paste in your url.



http://xliberation.com/s/badgemanager.html?panelset=xliberation_panel&badgeOrganizer=your encoded uri

If all is good you should get a panel for awarding xLiberation badges. Except this time, the data has come from your spreadsheet via your scriptDB and has been processed by your copy of the badgeManager. 

Creating your own badges

Next you will probably want to create your own badges. For each badge you will need to create an image to the Mozilla open badge specification  (90x90) that you host somewhere. You will also need to create some questions, questionsets, badge collections and panelsets as defined in Creating badge environment from a spreadsheet. You can just update the spreadsheet,  rerun the step to recreate your scriptDB and try running this again. 

http://xliberation.com/s/badgemanager.html?panelset=your panel set&badgeOrganizer=your encoded uri


Now you are displaying your own badges, but the awards infrastructure is still mine. Try embedding in your web site or blog, using 


<iframe src="http://xliberation.com/s/badgemanager.html?panelset=your panel set&badgeOrganizer=your encoded uri" style="borders: none;height:300;width:300"></iframe>

Creating your own awards infrastructure

This is a very similar process to the one we have gone through for the badge infrastructure. In this case, you will have to create your own scriptDB to store awards and issue assertions back to Mozilla

  • Take a copy of the award/assertionOrganizer script, go to manage resources and include a reference to your own badgeOrganizer library, replacing the one that is there. This will allow the award organizer to access the scriptDB that is managed by your badgeOrganizer script.
  • You'll need to setup your own defaults. At the very least modifying the reference to whatever you have called your badgeOrganizer library. See the code below
  • You'll need to publish this and get the published URL

Assuming you are still using the xLiberation hosted files to pull this together, you need to now pass the url of the awards manager you've just created. You would now use something like this to get your badge infrastructure and your newly created award infrastructure.


http://xliberation.com/s/badgemanager.html?panelset=your panel set&badgeOrganizer=your encoded badge organizer uri&awardOrganizer=your encoded award organizer uri

You can use the converter below again to get the encoded uri of your published script - just paste in your url for your awards organizer below


Hosting your own html & php. 

Assuming that you have a server which can run php, you can complete the picture by hosting your own php, html, css or some combination of these. You'll need to take a copy of http://xliberation.com/s/badgemanager.html, and include the URIs of everything you are hosting yourself, by adapting the code below. This means that when you call your version of badgemanager, you wont need to pass encoded URIs of your GAS web apps, since you will set then up as defaults in the snippet below.


$.extend(o, {
  panelset : "xliberation",
  badgeOrganizer:
   "https://script.google.com/macros/s/AKfycbzc0yBs8FfUZyJP1IhGpeTx-MsC288Ml6VYHjnqN9B9Kl3phHuh/exec",
  awardOrganizer :
   "https://script.google.com/macros/s/AKfycbxZYXHPZrXkxJzeTiz7PJ-5th0g0w7s0DmxXR3o1v4AVSlmwBM/exec",
  proxy :
   "http://xliberation.com/s/proxyphp.php",
  signin :
   "http://xliberation.com/persona/signin.php",
  signout :
   "http://xliberation.com/persona/signout.php"
}, p);

  • badgeOrganizer : this is the URL of your published GAS badge organizer webapp.
  • awardOrganizer: the URL of your published GAS award organizer webapp.
  • proxyphp: this is a proxy to deal with cross domain cross requests.
  • signin: manages signin to persona
  • signout: manages signout from persona
Here's the code for the php files you'll need. Note that the extension should be .php






Directory structure

Here's the code of the badgemanager.html, which would need to be changed to reflect you directory structure and file names.

For minimum changes, you might want to consider keeping the directory structure I have used, as follows

s/badgemanager.html
s/proxyphp.html
s/img/ all badge .png
s/css/badge.css

persona/signin.php
persona/signout.php
persona/css/persona-buttons.css

These are open source libraries I am hosting. You can find them on some other public cdn, or copy them over and host them yourself.
cdn/js/CryptoJS.js
cdn/js/purl.js

This is a google analytics link. You can leave it, delete it, or substitute your own tracking code.
ga.gs

For help and more information join our forum,follow the blog or follow me on twitter .




Comments