On `onCorrectStroke` and `onMistake` events, also return drawingPath's data
See original GitHub issueFor 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 containingtotalMistakes
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, andstrokesRemaining
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 containingtotalMistakes
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, andstrokesRemaining
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.
Issue Analytics
- State:
- Created 6 years ago
- Comments:11 (7 by maintainers)
Just published v0.8.0 with these changes
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:pathString is an SVG path string in terms of the page’s coordinates, and points is in terms of MakeMeAHanzi’s coordinates