Coder Social home page Coder Social logo

openbadges-displayer.js's Introduction

Logo Open Badges Displayer


A Javascript client library for easily displaying meta-information about baked open badges.

Demo


https://curlee.github.io/openbadges-displayer.js/

Usage


bower install [email protected]:cmcavoy/openbadges-displayer.js.git

Download the latest release.

Insert openbadges-displayer.js at the bottom of your web page that contains badges.

<script type="text/javascript" src="openbadges-displayer.min.js" ></script>

Unbake (display) badges

<script type="text/javascript">
  window.openbadges.unbake([options]);
</script>

Badges will be unbaked and included in window.openbadges.badges which you can explore in the browser console.

Additionally, a lightbox will be added to the page. Partial badge info will be displayed when rolling over the badge, and full info will be displayed in the lightbox after clicking a badge.

Development


openbadges-displayer.js is under active development. To help out, fork this library and submit pull requests with new features. Get started by picking up an issue, or filing bug.

Requirements

Node v0.10.29

Installation

After cloning this repo:

npm start

This will install requirements and then use gulp to compile the code and run the server. Requirements will only install once (unless they change).

Gulp

openbadges-displayer.js uses Gulp. For available commands, take a look at gulpfile.litcoffee

Viewing the demo

After compiling and running the demo server (npm start or gulp) go to:

http://localhost:3000

Testing

gulp test or npm test

Tests are written using coffeescript and are run with gulp-mocha.

Future


Add more tests

Need more test coverage.

openbadges-displayer.js's People

Contributors

cmcavoy avatar

Watchers

James Cloos avatar Nate Otto avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.