Stroke Quizzes

Setting up a Quiz

The easiest way to set up a quiz is using the CdlUtils.Quizzer.setupQuiz method. An example is shown below:

var quizzer = CdlUtils.Quizzer.setupQuiz('target-element-id', '我', {
  width: 200, // px
  height: 200, // px
  apiKey: 'your-api-key',
  highlightOnComplete: true,
  showHintAfterMisses: 1,
  showOutline: true
});

In this case, the HTML would look like:

<div id="target-element-id"></div>

And here's what it looks like in action. Try drawing the character 我 below with your mouse or finger:

If you've been following along in the docs by now you're probably familiar with the width, height, and apiKey options, but highlightOnComplete, showHintAfterMisses and showOutline are specific to quizzing.

• highlightOnComplete: true means the quiz will flash blue when the user successfully completes the quiz.
• showHintAfterMisses: 1 means the quiz will flash the correct stroke in blue if a user makes 1 mistakes in a row. Increasing this number means the quiz will wait longer to show a hint. Setting this to false will disable hints entirely.
• showOutline: true means the quiz will have a gray outline of the character being tested. To make it harder, set showOutline: false to force the user to draw the character completely from memory.

Controlling the quiz

If you're adding a stroke quiz to your app or website you will likely want to know when the user completes the quiz or makes mistakes. Fortunately there's a few callback functions you can pass into the quiz options that makes this easy. For instance, in the example below when a user finishes a quiz we ask them if they'd like to do it again:

var onComplete = function(info) {
  if (confirm('You finished the quiz! Want to do it again?')) {
    quizzer.resetQuiz();
  }
};

var onMissedStroke = function(info) {
  console.log('You missed a stroke!', info);
};

var onCorrectStroke = function(info) {
  console.log('You got a stroke right!', info);
};

var quizzer = CdlUtils.Quizzer.setupQuiz('target-element-id', '你', {
  width: 200, // px
  height: 200, // px
  apiKey: 'your-api-key',
  showOutline: true,
  onComplete: onComplete,
  onMissedStroke: onMissedStroke,
  onCorrectStroke: onCorrectStroke
});

And here's what it looks like in action. Try drawing the character 你 below with your mouse or finger. If you want to see the messages for getting strokes right or wrong open up your developer console.

For more information on everything that you can do with the CdlUtils.Quizzer class check out the API docs for CdlUtils.Quizzer.