# 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.

• All the fancy UI components are supported by the phenomenally good Dojo toolkit.
• The navigation and score icons are open source images from the Open Icon Library.
• Various forms of rendered Mathematics are managed by the MathJax toolkit.

### 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 );


### A rough TODO list

• Currently the application itself seems to work okay with WebKit-based web-browsers; making it work cross-browser is a tricky longer-term goal.
• It would be nice to hook-up either the questions and/or results to a database somehow; on the other hand, there's no notion of security so formally recording results is a bit dubious. Maybe it could generate a QR-code style "certificate" or something, just for fun?
• One idea is to include some sort of time limit for each questions, which can be enabled or disabled as appropriate.
• At the moment, the configuration doesn't know the score: if it *did* then this allows some fancy options such as difficulty level tuning.