On `onCorrectStroke` and `onMistake` events, also return drawingPath's data

For scientific purpose at least, it would be interesting to return the path of the user correct and mistake drawing. Beyond the current binary onCorrectStroke or onMistake, paths would provide insight on what the learners draw, why do they fails.

Currently

writer.quiz(options) :

• onCorrectStroke: function(data). Called when the user draws a stroke correctly. The function is called with an object containing totalMistakes which is the total mistakes made during the quiz so far, strokeNum the current stroke number, mistakesOnStroke the number of mistakes the user made drawing this stroke, and strokesRemaining the number of strokes left until the quiz is complete.
• onMistake: function(data). Called when the user makes a mistake drawing a stroke. The function is called with an object containing totalMistakes which is the total mistakes made during the quiz so far, strokeNum the current stroke number, mistakesOnStroke the number of mistakes the user made drawing this stroke so far, and strokesRemaining the number of strokes left until the quiz is complete.

Suggestion

On onCorrectStroke and onMistake events, the function(data) is called when the user draws a stroke correctly or incorectly. In data, add a key-value drawingPath : the path’ s data for the last drawing made by the user.

Direct use

I would like to use these data to later on plot student’s nth stroke’s (strokeNum) drawing path, correct or mistakes, via d3js. The end rendering being something such :

{ character: ‘馬’, strokeNum: 0, strokeNumColor: ‘lightblue’, drawingWidth: ‘1’, drawingColor: ‘#B10000’ }

In language learning, it’s the field of error analysis.

[chanind]

Just published v0.8.0 with these changes

[chanind]

Please share a concrete example for “character reference frame rather than the document’s reference frame”.

I mean, the MakeMeAHanzi character data is in terms of a 1024 x 1024 grid. So, to compare the stroke the user drew with the strokes from MakeMeAHanzi the user drawing needs to be converted to the same coordinate system as MakeMeAHanzi . In the SVG there’s a <g> element with a transform on it which handles that. But, for users of Hanzi Writer, they probably want to see the user stroke in terms of the raw coordinates that the user drew on the screen if they want to draw the SVG path later.

#63 tries to address that by including a drawnPath key which looks like:

drawnPath: {
  points: [{x: 10, y: 10}, ...],
  pathString: 'M 0 100 L 200 210 L ...'
}

pathString is an SVG path string in terms of the page’s coordinates, and points is in terms of MakeMeAHanzi’s coordinates