CdlUtils.Quizzer

This class provides stroke order quizzes

CdlUtils.Quizzer.setupQuiz(targetElm, charOrUnicode, options)

A convenience wrapper around creating new CdlUtils.Quizzer(targetElm, options), then running renderCharacter(charOrUnicode, options), then running startQuiz(options).

targetElm is DOM node or id of the element where SVG should be rendered.

charOrUnicode can be either a single character such as "你", the unicode hex for a character such as "4F60", or a CdlChar object.

options is an object containing the keys from the options in new CdlUtils.Quizzer, renderCharacter, and startQuiz. See the options for these methods below.

Returns the CdlUtils.Quizzer instance that was created.

new CdlUtils.Quizzer(targetElm, options)

extends CdlUtils.Animator

targetElm is DOM node or id of the element where SVG should be rendered.

options is an object containing the following keys:

  • apiKey:Your developer API key. Required unless a custom dataLoader is used.
  • onError:An optional callback function in the event of an error. Typically this would occur if there is a network problem or if you attempt to load an invalid character. The callback is passed an Error object.
  • x:int, default 0. x-offset to begin rendering SVG from
  • y:int, default 0. y-offset to begin rendering SVG from
  • width:int, default 400,
  • height:int, default 400
  • fixMargin:boolean, default true. Whether to pad the returned SVG so it fits inside the bounds specified.
  • showOutline:boolean, default false. Whether to show a gray outline of the character.

attribute: cdlChar

The CdlUtils.CdlChar instance that is currently loaded

attribute: svg

The SVG DOM node in use

attribute: defs

The SVG defs DOM node used for masks

attribute: strokes

Array of CdlUtils.StrokeAnimator instances for the currently rendered character

method: renderCharacter(charOrUnicode, options)

charOrUnicode can be either a single character such as "你", the unicode hex for a character such as "4F60", or a CdlChar object.

options has only 1 attribute, "variant" which can be passed to load a different variant of the character if necessary

returns a promise resolving when the character is loaded and rendered

method: startQuiz(options)

options is an object containing the following keys:

  • onComplete:function, callback which is called when the user successfully completes the quiz. passes in 1 object parameter containing summary infomation about the quiz.
  • onMissedStroke:function, callback which is called when the user misses a stroke. passes in 1 object parameter containing summary infomation about the quiz.
  • onCorrectStroke:function, callback which is called when the user correctly draws a stroke. passes in 1 object parameter containing summary infomation about the quiz.
  • highlightOnComplete:boolean, determines whether to highlight the entire character at the end to indicate the user finished successfully. default false.
  • highlightOnCompleteDuration:number, how long the highlight should last in ms. Only relevant for highlightOnComplete: true. Default 1000.
  • showHintAfterMisses:number or false, show a hint by highlighting the correct next stroke after the user misses the correct strok this many times. Set to false to never show a hint. Defaut 3.
  • strokeStyles:object containing any CSS styles that should be applied to the strokes when they are initially drawn. This can be used to set stroke fill color or other attributes.
  • strokeOutlineStyles:object containing any CSS styles that should be applied to the stroke outlines when they are initially drawn. This can be used to set fill color or other attributes. Only relevant if showOutline: true is specified.
  • highlightStrokeStyles:object containing any CSS styles that should be applied to the highlighted strokes when they are initially drawn. This can be used to change the highlight fill color or other attributes.
  • highlightStrokeVelocity:number representing how fast to animate each hint when highlighting. Higher is faster. default 1.5.

method: resetQuiz()

Reset the currently running quiz to its initial state

method: stopQuiz()

Stop the currently running quiz but don't reset to its initial state

method: remove()

Delete all DOM elements created by this CdlUtils.Quizzer

method: showOutline()

Show the character outline.

method: hideOutline()

Hide the character outline.

method: setStyles(attrs)

attrs is an oject containg styles to set on all strokes instantly

method: setOutlineStyles(attrs)

attrs is an oject containg styles to set on all stroke outlines instantly

method: tweenStyles(attrs, options)

attrs is an oject containg styles to transition on all strokes

options is an oject containg one key, "duration", default 1000ms

Returns a promise which resolves when the tween finishes

method: tweenOutlineStyles(attrs, options)

attrs is an oject containg styles to transition on all stroke outlines

options is an oject containg one key, "duration", default 1000ms

Returns a promise which resolves when the tween finishes