Jump to content
Learn Chinese in China

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


Recommended Posts

Site Sponsors:
Pleco for iPhone / Android iPhone & Android Chinese dictionary: camera & hand- writing input, flashcards, audio.
Study Chinese in Kunming 1-1 classes, qualified teachers and unique teaching methods in the Spring City.
Learn Chinese Characters Learn 2289 Chinese Characters in 90 Days with a Unique Flash Card System.
Hacking Chinese Tips and strategies for how to learn Chinese more efficiently
Popup Chinese Translator Understand Chinese inside any Windows application, website or PDF.
Chinese Grammar Wiki All Chinese grammar, organised by level, all in one place.


Hi Matthias,


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



Will try it out in a moment.



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)

Link to post
Share on other sites

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:

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 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); },
            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.

  • Like 1
Link to post
Share on other sites
  • 3 years later...
  • New Members

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

Check my GitHub repo.



Link to post
Share on other sites

Join the conversation

You can post now and select your username and password later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Click here to reply. Select text to quote.

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...