Jump to content
Chinese-forums.com
Learn Chinese in China

  • Why you should look around

    Since 2003, Chinese-forums.com has been helping people learn Chinese faster and get to China sooner. Our members can recommend beginner textbooks, help you out with obscure classical vocabulary, and tell you where to get the best street food in Xi'an. And we're friendly about it too. 

    Have a look at what's going on, or search for something specific. We hope you'll join us. 
Matthias

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.

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)

Share this post


Link to post
Share on other sites
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:



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.

  • Like 1

Share this post


Link to post
Share on other sites
HerrPetersen

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

Share this post


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.

Guest
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...