Friday, June 08, 2012

Open Badges for a Wikiversity course

This post describes implementing Open Badges within a Wikiversity course. It takes a very simple approach by issuing the badges manually. It looks at two approaches to creating the required json files; one using a simple plain text recipient and the other using an encrypted recipient. The technologies required to implement open badges within wikiversity include; json, HTML, JavaScript and PhP.

The course
The course is Mobile Web Applications. I have been slowly developing this course to provide an Open Educational Resource (OER) for implementing HTML5 mobile applications within an Model View Controller (MVC) pattern. And how the MVC pattern fits within a multi-tier architecture. The course was inspired by two of my most viewed blog posts from last year (these two posts have attracted thousands of views over the the last nine months);
The course is far from finished, and whenever I have a few spare cycles I try to add to the course. My latest effort toward this course was to implement open badges for completing the quizzes and projects from within each chapter.

The badges
After considerable thought I came up with a badge system for the course and I document my approach to this badge systems design through two post within this blog.
The courses badge taxonomy became a part of the course wiki; http://en.wikiversity.org/wiki/MWA/Badges

The criteria
For each chapter will be added a criteria page and this page will point to both the projects and quizzes. The quiz results are not saved as they are widgets built from wikiversity templates. The quizzes are mostly to test your understanding and prompt you to review the modules contents. A little reflection to deepen learning. The projects become the key part of the criteria. With the projects you need to build working software, and it is this working software that will become the evidence to be evaluated against the criteria.

The evidence
To be awarded the badge you need to complete all the projects for the chapter. As the course is about building mobile web applications, the evidence is a working mobile web application. Once all the criteria has been met the learner will create an evidence URL for review to be awarded the badge. The evidence I provided for the course can be found at; http://books.bit.bc.ca/ which implements all the requirements requested in the chapter projects. Try viewing the evidence in a browser and on your mobile device.

The 1st json file
There are two ways to prepare a json file for submission to you digital backpack. The first way is to use the URL approach to baking a badge. This is best described in a blog post by Billy Meinke. This blog post walks you through the process of hand baking a badge. The difference between the two methods is the first, described here, requires no coding or javascript, it just requires the correct creation of the json file and submitting it to be baked through well formed URL.

The 2nd json file
The second approach is by hashing the recipient attribute, inserting it into the json file and submitting the file by using the correct JavaScript call. The recipient attribute is hashed using a one way hash with a select number of hashing algorithms, in this case sha256. The recipient attribute will look something like the following;

sha256$b42062d4b8b9b45560d202243720e7f94f139ce0c7363fa4171daf1f6fcaaef5

The Code
The below block of code does two things; first it shows the line of php code that creates the hash for the recipient and second, it shows the javascript to load the json into the backpack. The php serves as an example of how to create a hashed recipient and the javascript works at submitting the json to the OBI.

Please Note that the hashing line does not automatically insert the hashed string into the json file. That needs to be done by hand. This block of code is for example purposes only.

<html>
<body>
<?php
echo hash("sha256", "peter@rawsthorne.org"."mwach01");
?>
<br/>
Peter Rawsthorne <a href="javascript:OpenBadges.issue(['http://badges.bit.bc.ca/mwa/mwa-pjrch01.json'], function(errors, successes) {  });">, claim your badge.</a></p>
<p><script src="http://beta.openbadges.org/issuer.js"></script></p> 
</body>
</html>

The PhP
hash("sha256", "peter@rawsthorne.org"."mwach01");

This line of php code simply hashes the earners email address with the seed value using the sha256 hash algorithm. This code creates a string of text that should be embedded in the json file to be submitted to the OBI.

The JavaScript
The javascript has two main parts; referencing the script library and calling the issuer of the badges software module.

this line includes the open badges issuer javascript library.
<script src="http://beta.openbadges.org/issuer.js"></script>

this line sets up the call to submit the json file.
Peter Rawsthorne
<a href="javascript:OpenBadges.issue(['http://badges.bit.bc.ca/mwa/mwa-pjrch01.json'], function(errors, successes)
 {  });">, claim your badge.</a></p>

The json file
Follow this link if you want to look at the json file, as required for the 2nd approach, that would be submitted to the OBI; http://badges.bit.bc.ca/mwa/mwa-pjrch01.json

The Success
After using either of these two methods for submitting the correctly formatted json file, a new badge will be in the backpack.


Wikiversity as an Issuer
Wikiversity and Wikipedia are already (in a way) badge issuers, they call their badges "Userboxes". They have many Userboxes that can be put on a contributors profile.It would be great if these could become a part of a persons digital backpack.