cs-quiz.js

UoB have selected and deployed Questionmark Perception for certain forms of online assessment. There are plenty of reasons why opting for a third-party solution might make sense, but also plenty of reasons why this solution isn't very attractive.

cs-quiz.js is a light-weight alternative, which is also good for some things and bad for others: the (very limited) remit is delivery of informal revision-style quizes. Although there is no actual assessment (e.g., user login, marks database etc.) it offers one crucial benefit in that questions (and associated help) can be dynamically generated: for the motivating use-case (conversion between number systems) this means random question instances can be generated so the quiz never gets stale. cs-quiz.js itself offers the framework, with support for free-form and multiple-choice style questions; you just need to write some JavaScript to drive it.

Example: end result

Example: configuration (./conf/example.js)

function trim( x ) {
  return x.replace( /^\s\s*/, '' ).replace( /\s\s*$/, '' );
}

// This JavaScript object (or associative array) defines a configuration
// for a specific quiz, which is then used to drive the general framework.

var conf = {
  version  : 1,          // integer version number (matched vs. framework)

  title    : "example",  // arbitrary string that acts as an identifier
  duration : 3,          // integer number of questions
  helped   : true,       // true if help is available, false if it isn't

  score_lo : 40,         // scores <  x are highlighted as notionally bad
  score_hi : 70,         // scores >= y are highlighted as notionally good

  generate : function( i, l ) {

    // We want to generate the i-th of l questions: just cycle through the
    // three possible question types.

    switch( i % 3 ) {

      // free-form input : Notice that no options are required, but we do 
      //                   need a check function in this case: this means 
      //                   the *question* decides whether the solution is 
      //                   correct (trimming space say, or ignoring case, 
      //                   as appropriate).

      case 0 : return { type     : CS_QUIZ_TYPE_STRING,

                        question : "type the string foo $$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$$",
                        solution : "foo",
                       
                        check    : function( q, a ) {
                                     return trim( q.solution ) == trim( a );
                                   },

                        help     : function( q, a ) {
                                     return "HTML-format help for " + a;
                                   }
                      };

      // select 1 from m : Notice that we need some options, which need 
      //                   to be value/label pairs (where value is used 
      //                   internally, and label is displayed); solution 
      //                   needs to be *one* of the values.

      case 1 : return { type     : CS_QUIZ_TYPE_SELECT_1,

                        question : "select the string foo $$x \\mapsto \\sum_{i=0}^{i < n} x_i \\cdot 2^i$$",
                        solution : [ "1" ],

                        options  : [ { value : "1", label : "foo" },
                                     { value : "2", label : "bar" },
                                     { value : "3", label : "baz" }
                                   ],

                        help     : function( q, a ) {
                                     return "HTML-format help for " + a;
                                   }
                      };

      // select n from m : Notice that we need some options, which need 
      //                   to be value/label pairs (where value is used 
      //                   internally, and label is displayed); solution 
      //                   needs to be a list of *all* the values.

      case 2 : return { type     : CS_QUIZ_TYPE_SELECT_N,

                        question : "select the strings foo and bar",
                        solution : [ "1", "2" ],

                        options  : [ { value : "1", label : "foo" },
                                     { value : "2", label : "bar" },
                                     { value : "3", label : "baz" }
                                   ],

                        help     : function( q, a ) {
                                     return "HTML-format help for " + a;
                                   }
                      };
    }
  }
};

// Finally, launch the quiz by providing the DOM identifier (of whatever
// div it should be placed into) and the configuration object above.

cs_quiz_launch( "cs_quiz", conf );