Writing Chinese characters in Anki stroke by stroke with instant feedback using JavaScript

[Matthias]

A couple of weeks ago I've found a way to implement natural handwriting into Anki using JavaScript. This has become possible because Shaunak Kishore provides a repository with stroke order information in form of SVG shapes. Here's a small video of what it looks like:

 

https://www.youtube.com/watch?v=02MLeRxgMK8

 

And here's my blog post where I write more about it:

 

http://abananablog.com/2016/12/31/anki-trace/

 

Happy Chinese learning and happy new year!

[HerrPetersen]

Hi Matthias,

 

Very nice, and pretty much what I asked for here:

http://www.chinese-forums.com/index.php?/topic/52390-inkstone-my-free-open-source-chinese-writing-app/page-3

 

Will try it out in a moment.

 

Edit: 

I tried it out. Unfortunatly it does not fully work here. I used your example deck "MandarinBanana" so I guess the front, back and styling in anki should be done right. What happens is the following:

 

On the front-side: I can draw into the specified square. However there is no feedback.

On the back-side: The correct charachter is shown, however it is grey and no animation is shown. I am also not able to draw over the square.

 

I am running anki on windows 10. Have not tried to import it to ankidroid.

 

Is it possible to make the code more readable by extracting most of it into a .js-file and importing it? (As proposed by skishore in above link)

[Matthias]

I've been thinking about your problem and I think it should have to do with event handling. So far I've only used it on Linux (Ubuntu) and Ankidroid, and since it's JavaScript it should be platform independent; however, I guess there is the possibility that different os' implement the event handling (clicking, touching, ...) differently and I would have to add additional code to cover these cases.

 

Okay, I've just fired up Windows XP and I see exactly the same as you. Let me tinker around for a bit. When I've got it running I'll share the deck again.

 

About importing the script from a file: this seems to be a good idea, as long as there are no performance issues from having to open the file for each single card. I'll try it out to see if I can make it work!

 

First edit:

 

It's indeed possible to externalize the JavaScript into an external file, and the best way to do it (see this discussion: https://www.reddit.com/r/Anki/comments/3q0fs8/how_to_load_external_javascript/) is to use the JS Booster plug-in (https://ankiweb.net/shared/info/1280253613). Fortunately Ankidroid natively supports importing JavaScript files, so this also works on Ankidroid. My front side e.g. now looks like this:

<script>
var data = {{text:strokeorder}};
// color of the animation:
var animcolor = "#000000";
// color of the strokes you draw:
var drawcolor = "#0000ff";
// speed of the animation:
var animation_speed = 50.0;
</script>

<script type="text/javascript" src="_ankitrace.front.js"></script>

However, about the actual problem: Since it is indeed possible to draw at the front side, this should not be a problem about the input event handling. Instead I suppose it has something to do with the animation feature itself. I'll investigate further.

 

Second Edit:

 

I got a console by installing Anki with wine (d'oh) and found the error message

JS error on line 0: ReferenceError: Can't find variable: requestAnimationFrame

which stinks like the web browser Anki uses on Windows platforms does not know the relatively new command "requestAnimationFrame" which I use to start the animation. I'm not sure how to handle this. One way would be to rewrite the animation part to use another technique, maybe something what Shaunak (skishore) uses (I think SVG animations), but I don't see myself doing this in the near future. Another option would be to somehow update the browser that is used by the Desktop application (so that it learns how to handle requestAnimationFrame), but I don't know if this is an issue of the operating system itself or of the libraries Anki uses.

 

I'll ask the Anki people on reddit to see if someone there knows something. Sorry I can't help you for now.

 

One last option: did you try Ankiweb? It works for me on Ubuntu with Firefox. It did not with a very old version of Firefox (many years old) on Windows XP, but it does work with the latest Firefox installed on Windows XP.

 

Third edit:

 

Okay. That was easier than I thought. What you're missing is the following code:

var lastTime = 0;
if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

This works! I'm sharing my deck now again to transmit the changes. Just download my deck again and see if it works now. Let me know if this works for you.

[HerrPetersen]

Nice, it works fine on windows now. Thanks for your time and happy late New Year

[Matthias]

Glad to hear that. Have fun learning!

[infinyte7]

I have implemented HanziWriter.js in Ankidroid for instant feedback of drawn stroke. 

Check my GitHub repo.

https://github.com/infinyte7/Anki-maobi