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. In the various sections in 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>
Create your own scriptDB for badgesThis is described in Creating badge environment from a spreadsheet.
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 badgesNext 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 infrastructureThis 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
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);
Here's the code for the php files you'll need. Note that the extension should be .php Directory structureHere'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 |
Services > Desktop Liberation - the definitive resource for Google Apps Script and Microsoft Office automation > Things that have been deprecated > Badges >