[UserScript] Stroke animation for reviews and lessons

I saw this website: http://nippongrammar.appspot.com/
I saw that its Github project was released on an MIT license.
I adapted it into a userscript for Wanikani: https://greasyfork.org/en/scripts/12034-wanikani-nippongrammar-extension


Now with hotkeys:

  • Shift + left/right to switch between original and strokes.
  • Click on the strokes to make it play again.


Pictures of it in action:



Note: Depending on your internet connection, it might take a while to load, and there is currently no indication whether it is loading at all.
I will look into it for the next update, but I don’t know when that will be.

9 Likes

It’s a lot slower in Firefox. Change ‘30’ to something lower if it’s unbearable, I’ll make it automatic in the future, and add options for colour and stroke width.

Also I’ll include the radical images in future (when I have time to mess around with it), but for now they just display as normal.
I’ll put a switch in there too for when you want to do your reviews at a decent pace (It will obviously slow down your reviews if you have to wait for every word to animate).

Note: If some of the libraries haven’t loaded, it just won’t draw the kanji, which I will also need to put a check for in the future. (you might get gaps in the words, or they just won’t show up)

1 Like

Wow, this looks awesome. Does it also have a “replay” button to trigger the animation again once it’s over?

This is honestly really cool and a great way to learn stroke order if you also want to learn to write, like me. Honestly though, I just tried it for a couple reviews and a replay function would be such a huge help. Especially if you’re seeing some kanji stroke orders for the first time. I’m not sure how plausible it is, but it would really be a great and needed addition.

Rouz275 said... This is honestly really cool and a great way to learn stroke order if you also want to learn to write, like me. Honestly though, I just tried it for a couple reviews and a replay function would be such a huge help. Especially if you're seeing some kanji stroke orders for the first time. I'm not sure how plausible it is, but it would really be a great and needed addition.
Updated. Now clicking on the word will replay the animation. 

Nice job! This will be a great help, especially when learning new kanji in lessons. Thanks so much!

Ooh, this is great. Nice work.

Thanks for sharing it.

Awesome! Thanks so much! 

I’m bit lazy right now but how is the stroke show speed controlled, via animateWriting? Bit fast for me in current Chrome.

henrikp said... I'm bit lazy right now but how is the stroke show speed controlled, via animateWriting? Bit fast for me in current Chrome.
 I'm going to add an option in the future but for now you'd have to change it in the code.
Where it says:
        animateWriting(text,'strokeChar',15),
The number controls the speed. The higher the number, the slower the stroke.

Increase the number to make it draw slower.

Edit: I truly am stupid, I got tampermonkey and installed the scripts. Ignore my post below, unless you want a good laugh, in which case, go crazy.

I am sorry, but I am completely ignorant of how this kind of thing works… How would I activate this?
I tried opening it but got this:

Line: 15
Char: 1
Error: Object expected
Code: 800A138F
Source: Microsoft Jscript runtime error.

Do I have to activate the script whilst in a lesson? Or how does it work. So sorry for my newbness. I am level 1, and everything is incredibly easy, so I am in no rush to get this running, but if someone can shoot me a way to fix my stupidity, that would be appreciated.

This is beautiful. Thank you for your work.

This looks soooo beautiful - - 
Thank you for creating it! :3

Looks amazing!
One thing I have to now consider… I can no longer quickly rikaichan things I get wrong, I must click the lower WK taskbar… I guess I’ll have to get used to that.

edit: I’m a pro at not reading everything
> Shift + left/right to switch between original and strokes.
A little finicky, but it kinda works.

I installed the script and the animated words are really small on my screen, smaller than the translation below. Is there any way I can change the size value or anything? I’m not a programmer or anything myself so if there’s a simple way to change it, please tell me. I know I can use ctrl + mouse wheel to change the overall size of text but I would like to apply it only on the animated stroke order words. 
I noticed shift + left/right doesn’t work for me either. Not sure why. 

By the way, thank you very much for the script! 

Nanati said... I installed the script and the animated words are really small on my screen, smaller than the translation below. Is there any way I can change the size value or anything? I'm not a programmer or anything myself so if there's a simple way to change it, please tell me. I know I can use ctrl + mouse wheel to change the overall size of text but I would like to apply it only on the animated stroke order words. 
I noticed shift + left/right doesn't work for me either. Not sure why. 

By the way, thank you very much for the script! 
Which browser are you using?
Can you open the  console and see if any errors come up?
Yabba said...> Shift + left/right to switch between original and strokes.
A little finicky, but it kinda works.

 Happy to take suggestions. :-)

I’m using Chrome. No errors came up if I looked it up correctly. The size on the reviews is fine but way too small on the lessons.
No error on lessons but if I do the reviews, the console says: Uncaught ReferenceError: animateWriting is not defined session:46

A somewhat serious error I’ve encountered: with vocab with ~ before it (~台, etc.), it completely screws up and displays the wrong (previous?) item in the normal font once that answer’s been inputted (for every single subsequent item until you refresh). Switching with shift-right doesn’t fix it.

Also, sometimes, the answer box shakes as if a wrong answer’s been inputted, and it only loads the default font. This gets fixed by refreshing and doesn’t actually get in the way of anything, but it’s still a thing you might wanna know.

Oh yeah, and the first item is always in the default font, but that’s not really an issue.

optosi said... A somewhat serious error I've encountered: with vocab with ~ before it (~台, etc.), it completely screws up and displays the wrong (previous?) item in the normal font once that answer's been inputted (for every single subsequent item until you refresh). Switching with shift-right doesn't fix it.

Also, sometimes, the answer box shakes as if a wrong answer's been inputted, and it only loads the default font. This gets fixed by refreshing and doesn't actually get in the way of anything, but it's still a thing you might wanna know.

Oh yeah, and the first item is always in the default font, but that's not really an issue.
 by "the first item" you mean the ~ right? I think that is because there isn't stroke information for it.
I noticed that the one time I remember getting a ~ word, the original didn't show up at all when trying to switch back so I'll have to replicate it in my browser and sort it out.