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

[hugolpz]

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]

👍 Good idea! I'll work on this soon. The tricky part is that the strokes are drawn in the character reference frame rather than the document's reference frame, but maybe we can return the set of points in both systems for maximum flexibility. This will also make it easier for us to track if stroke matching is working well or needs to be tweaked.

[hugolpz]

Returned data could be to :

• data string : "45.45,35.12 44.20,31.56 ....." (my favorite)
• data path : <path d=""45.45,35.12 44.20,31,56 ....."></path>

Please share a concrete example for "character reference frame rather than the document's reference frame".

[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

[hugolpz]

😻
Please ping me when published.
Or can I test this HanziWriter.js for testing ? :D

[chanind]

You'll need to run the build locally first. You can do that with:

yarn
yarn build

Otherwise, I'll publish a build in the next hour or so.

[chanind]

Just published v0.8.0 with these changes

[hugolpz]

I downloaded v.0.8 from the cdn. On onCorrectStroke, where is located the drawnPath ? Within onCorrectStroke, I do :

function(data) { console.log(data) }

but it just prints me

{character: "中", strokeNum: 3, mistakesOnStroke: 0, totalMistakes: 0, strokesRemaining: 0}

[chanind]

I don't see how that's possible. I just double-checked and loaded the JS from <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@0.8/dist/hanzi-writer.min.js"></script> and it's showing the drawnPath in the callback for me:

[chanind]

Does it work if you load from github? https://github.com/chanind/hanzi-writer/blob/master/dist/hanzi-writer.min.js

[hugolpz]

Ok. Sorry for the wrong start.
Feture is live !
Starting to record stuffs! 😄

[chanind]

Awesome, glad to hear it!