Challenger.js

Pop-up JavaScript challenges in your browser

Challenger is a drop-in JavaScript library that adds interactive programming challenges to any page. Challenges are flexible and expressive, and are super simple to write.

A challenge has requirements based on code structure and program output, and gives users a code editor to experiment in. When new code is written, it's run in a sandbox and the output is analyzed.

Challenges can be presented as one-off tests or linked together to form courses.

Usage

Writing challenges

Challenges are defined as simple JavaScript objects. The following optional keys can be set:

Running challenges

To load a single challenge, pass its object into the challenger function:

var challenger = require('challenger');

var newChallenge = {
  title: 'My new challenge',
  description: 'It\'s all about the Pentiums',
  whitelist: ['DoWhileStatement']
};

challenger.loadCourse(newChallenge);

To create a course out of multiple challenges in sequence, pass an array of challenges into the challenger function:

// ...
challenger.loadCourse([challenge1, challenge2, challenge3/*, ... */]);

The challenger function can accept an options object as its last argument. The following keys can be set:

Installation

To install the library, use npm or bower:

bower install challenger # or...
npm install challenger

Challenger is also hosted on GitHub and cdnjs.

All necessary files exist within the /client/dist/ directory:

Sadly if you need to use IE10 with output rules, require('challenger') won't work without also copying operative.min.js to the same folder as your script. Challenger runs all client code in a sandboxed Worker or iframe, and certain components need to be broken out and re-loaded into the sandbox. For more information on how sandboxing is implemented, check out operative.

Browser support

Mozilla Firefox Google Chrome Opera Internet Explorer Safari Mobile Safari
9+ 18+ 15+ 9+ 5.1+ 7+

If you need to support older browsers, include krisowal's es5-shim along with es5-sham.js from the same repository. You might also need to tweak the CSS.