[Anki Deck Template] WK Anki, Crihak's Flavor

:warning: This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely.

So what is this?

Hello there, fellow Wanikanizens!

Recently, for my own nefarious purposes, I’ve been building on this Wanikani template for Anki. In case anyone finds it useful I thought I’d share it with you. You can get it here.

If you intend to run in the desktop client, you will need JS Booster.

It (hopefully!) looks like this:

OK, so now for the details:

This is heavily based on the Anki+WaniKani templates by @hinekidoriさん and @eminさん. I started from those, but because I am super-picky about just about everything, I ended up rewriting almost all of it. (The super-handy code that lets you enter your answer and style the input box according to correctness remains largely untouched).

I also totally am a thief and brazenly stole even more of WK’s look. Including the info box for items.

Let me know if nothing works and I’ll try to fix it… If this is the case then I guess the below will have been kinda wasted.

Here’s some of the stuff that I’ve added or changed:

I added a countdown timer. This may not be your cup of tea, but the good news is that you can disable it and that I will teach you how.

I added multiple choice questions. I’m still not 100% sure how I feel about these and like the timer they can be removed. The drawback is obvious: you’re not forced to remember the answer perfectly. However I feel that they have two benefits:

  1. You’re not forced to remember the exact english wording used in the definition.
  2. It will randomly choose between all available definitions, so it will expose you to more alternative meanings than if you just stick to your favorite one each time.

These are kind of a hack solution, basically I’ve hard-coded a list of a bunch of the core10k definitions and their corresponding part of speech. It then matches some of these up with the current word’s part of speech (since it’s often super-easy to tell if a japanese word is a verb or adjective etc, it’ll at least make it somewhat hard for you to blindly guess). This requires part of speech to be filled in for it to not just choose any word completely at random.

I created a card type that tests you for both reading and meaning on the same card, removing the need for multiple cards for the same item. This won’t work without the multiple choice stuff though, since I couldn’t figure out a decent way to have two text inputs on the same card.

I added a WK-alike info box. It even includes some mnemonics I wrote for some of the kanji!

I made it so context sentence audio is played when the card is flipped. I never read them, but when they’re spoken I kinda feel obliged to at least try to understand.

A few customizations you can make:

I guess the first thing you might want to do is to actually add something. You can do this manually, but I have made these CSV files that contain the core10k vocab, you should be able to pretty much straight import these. The kanji you’ll need to add yourself though.

Since they need to use different card types, I’ve split them into Core10k and Core10k Kana Only.

Other than that, you can change a lot of the stuff around. Unfortunately I made it perhaps a bit too “coder-friendly”, but I’ll at least try to explain how to change the stuff you’re most likely to dislike.

If you don’t like the timer, delete this line from the front and back of the relevant card:

<script src="_wk_countdown.js"></script>

If you do like the timer, but wish it was faster or slower, change the very top line of the front from this: ([…] indicates stuff you don’t need to care about).

<div id="front" class="[...]">

To

<div id="front" class="[...]" data-coundown="15" data-countdown-mobile="10">

Where 15 and 10 are the time in seconds for the desktop and mobile versions respectively.

This is a bit more of a pain, and if I hadn’t made this for myself intially I’d totally have made it easier, but if you don’t like the multiple choice stuff, remove this line from the front and back of the relevant card (wordlist only appears on the front)

<script src="_wk_wordlist.js"></script>
<script src="_wk_multichoice.js"></script>

And also take this part ([…] indicates stuff you don’t need to care about).

    <div id="answer-wrap">
       <div style="display:none">{{type:[...]}}</div>
       <ul id="choices"></ul>
    </div>

And remove the display:none part, as well as this part:

<ul id="choices"></ul>

It should look like this

    <div id="answer-wrap">
       <div style="">{{type:[...]}}</div>
    </div>

Finally, if you wish Anki had shorter intervals than one day:

This took me more than a year to notice, but you can build temporary decks containing recently failed items!

To do this, go to the relevant deck, choose “Custom Study” → “Review Forgotten Cards” and select how many days back you want them from (I usually go with 2-3).

Once created you can select “Options” and add custom steps, in order to study them more than once (for instance, entering “1 10 60” will make them pop up ten minutes later and the yet again an hour later). Or you can just rebuild the deck in its entirety a few times per day.

By default, you won’t change the item’s due date in the “real” deck if you get them right or wrong during this extra practice (I kinda like this), but if you want to change this, check the “Reschedule cards based on my answers in this deck” box.

##And, a question:
Does anybody know a good place to host this kind of stuff outside of my own Google Drive? I would be thankful for suggestions! :slight_smile:

34 Likes

I had an opportunity to try this out. The features you have added are very cool and I like some of the layout choices you made. I have seen many people who have requested a multiple choice option, so I know where to send them the next time they ask. Great job! :grinning:

4 Likes

Thanks a lot! :slight_smile:

嬉しいです!

1 Like

Hi. I was dealing with the layout that Hinekedori created, and I was wondering if you may be able to help me. Using Hinekedori’s layout, do you know if there is a way to make the ‘Kanji’ text on the frontside, such that no matter how big it is, it will fit on the frontside of the card? My reasons for asking this is because I want to use yomichan to insert English definitions in place of where the Kanji text is, but the definitions vary in size quite greatly, so I would need automatic sizing for it to work. If it’s too complicated, I will probs just leave it though.

Also, I saw another thread here (Some Supplemental Material by Hinekedori):
https://community.wanikani.com/t/Some-Supplemental-Material/8121

I was wondering if you happende to have some of the files from there like the audio listening deck and some of the others (because the links are currently encrypted and Hinekedori isn’t able to change it at the moment). Thanks :slight_smile:

I missed this when you originally posted it. I have good success hosting on MegaUpload.

Thanks for the recommendation, I’ll look into it!

I think you could do it with javascript, by having the text element hidden first, and then measuring the width while successively decreasing the font size until it fits… I’m thinking this probably qualifies as difficult though? :slight_smile: I tried it a bit, but couldn’t quite get it working…

Also, if you download the 10k deck from anki, the audio filles and images should be put in your anki media folder… that’s how I got a hold of them at least…

Ah fair enough. By the way, I basically figured it out (not the sizing, but a different way of getting the english text), but I have one small aesthetic problem that doesn’t really make any sense.

My Kanji to keyword card works fine with yomichan:

I just type the meaning into the meaning box afterwards and everything is fine. Once I get to the Kanji to Kana version, however, this happens:

It still works, but there is this massive gap between the text box. If I remove the line of code:

{{furigana:Definition}}{{furigana:Raw Kanji}}{{furigana:Sentence}}

that gets rid of the problem,but then the answer looks like this: https://gyazo.com/e65e4c0e17314e21a73f161e54e1dc31

It looks all nasty and stuff in the bottom box. Do you have any idea how I could rectify this problem? Once I can figure this out, my yomichan wanikani flashcard system should be working fully. Thanks ever so much if you can help!

Are you saying you don’t like the part that’s marked blue in the second image to be above the text field? If so the problem is that it is literally like that in the code - the input field is the thing that starts with {{type:

It also seems like removing this messes with the javascript that reformats the answer on the backside of the card, although I don’t know why.

What I would do in this case is look closely on this part of the original version of the cards and see how yours is different. Perhaps even temporarily starting anew from hinekidori’s template building upwards to what you want until you see when and why it breaks. (Rename your deck and note types and import his deck again, and you should have both)

Thank you so much, I just figured it out (to some degree at least). It seems that maybe because I changed the Onyomi field to a Definition field, it started messing with stuff because a large English paragraph was in there rather than say some katakana or hiragana. By just having an additional empty field (Stroke Order) and replacing each of the three terms next to the furigana markers, the problem was solved.

Maybe I will make a thread later today or tomorrow on how people can use this setup with yomichan, because I reckon there are a lot of people who would probably like to be able to do this. Thanks once again!

1 Like

You’re welcome :slight_smile: Glad I could help at least a bit!

Everything is essentially ok with the deck, but I do have one small question. Do you know if it is possible to have a slightly different style one of the card types (so that the style isn’t necessarily shared across all for the card types)? I ask this because I my KanjiToKeyword adn KanjiToKana are fine as far as sizing goes, but my KeywordToKana can cause problems occasionally if the a word has a ‘slightly’ longer definition. One solution is to make the size smaller across all the card types, but I really like the Kanji being as large as it is. The other option is to write the meaning in short hand like “kpng up aprncs” and then have the alternate meaning as “keeping up appearances” which I guess could work, although it isn’t the best. Lastly, I can just make it fullscreen in all fairness, but it would still be nice if I could find a way to fix this (I have a picture below of the problem that occurs when the screen is too small):

So yeah, if you have any idea as to how I could change the text of the ‘Title’ on the Hinekedori style cards on a single card type, but not all of them, or even just to change the height and spacing so that it looks fine when it goes past the screen length, that would be great, but if not, that’s perfectly fine :slight_smile:

If I understand you correctly, can’t you just add different classes to the different card types, and then style based on that?

I would personally add a wrapper div around the entire card, put a type-specific class on it and then just target that.

I’m not sure how into css you are, so feel free to ask more if what I said made no sense.

In truth, I really don’t know anything about CSS, so if it possible to go into more detail that would be great, but if it would be too tedious, I completely understand

I’ll give you a quick example to illustrate what I mean.

Say you have this piece of html code:

<div class="some_class">
  <h1>Some header</h1>
</div>
<div class="some_other_class">
  <h1>Some other header</h1>
</div>

And you write this piece of css

h1 {
  font-size: 30px;
  color: red;
}
.some_class h1 {
  font-size: 20px; 
}
.some_other_class h1 {
  color: green;
}

This means the following:

  1. All h1 elements will have font size 30px and be red, unless otherwise stated
  2. All h1 elements contained within other elements with the class “some_class” will have font size 20px The color is not affected, it is still red as per rule 1.
  3. All h1 elements contained within other elements with the class “some_other_class” will be green. The font size is not affected. It is still 30px as per rule 1.

Note that classes in the css is preceded by a dot, while tag names are not. Hence the rule .test would match elements with the class “test” while the rule test would match the tag <test> (which doesn’t exist)

Also note that rules written later take precedence, so start with the more general and follow with the specific ones.

If this is still confusing. I would encourage you to look for a basic tutorial in html and css and fiddle with it a bit to get a feel for it. You can start with an empty text file, write some html and css, save it as somename.html and open it in a browser, so there’s not a huge barrier to entry.

I have been playing around with your template some today. One question I have is do you think it would be more pleasing visually if your multiple choice was placed in a table similar to the Example links I have in my templates?

I’m not sure exactly how you mean… aren’t both arranged in a horizontal line?

Yes, but if you compress the window for whatever reason the buttons will turn into two rows. I was having similar issues with my example links, so I ended up placing them in a table to avoid it. If you are always in full screen I suppose it doesn’t make a difference.

The computer I am on doesn’t have what I need to create examples of what I am talking about for you, or I would give you an example of what I am talking about. So hopefully I am making some kind of sense.

I see. I actually wanted them in multiple rows in order to not make them too narrow. You’re saying you’d prefer them to always be 1/4 of the width regardless?

I guess I’m also a bit reluctant to put non-tabular data in tables since it’s considered bad practise on actual web pages. But thar makes zero sense in this case :slight_smile:

I tried using button coding at first, but I had more success with tables for consistency, so I ended up sticking with that. But I must admit, all my coding experience is with playing with Anki. So, my knowledge of the rules and common practices have major holes.