Anki Theme Sharealong

[konekush]

This is a thread for people to share their Anki themes. Anki is an SRS application that’s often touted for learning languages, but it can also be used for other types of learning. Anki, to put it simply, can do everything. And then some.

The problem is, that Anki has a bit of a … steep … learning curve that delves into web design (specifically CSS and HTML).
A very steep learning curve.

So. Share here your themes, tricks, screenshots, and code. Ask questions on how to do things. Share relevant HTML, CSS and JavaScript resources.

(To paste code, use this ` apostrophe at the start of it, and another at the end. <code style="background:blue">It will end up looking something like this</code>)

The next post will be a Wiki post for aggregating everything, so please refer to it when looking for something or for getting new ideas!

[konekush]

This is an editable Wiki post - any user at trust level Basic and above can edit it at will.
Simply add whatever your resource/request/link you have under the appropriate category. If nothing fits, make a new one.

Resources

• Download location
• Forvo - audio from native speakers

Add-ons

• Yes/No Buttons - Reduces buttons to only two
• Yomichan - addon for using dictionaries to create cards.
• AnkiConnect - allows Yomichan to communicate with Anki
• Japanese Support - an addon to assist with furigana flexibility

Guides/Tutorials

• Official Anki support (multiple medias)
• Official Anki user manual (text)
• @hinekidori’s Anki tutorials (video)
• @Fugdkn - Make Wanikani Style Anki Flashcards in One Click (Yomichan)(text)

Web Design
HTML

• [Hover Over Furigana] ruby rt { visibility: hidden; } ruby:hover rt { visibility: visible; }

CSS

JavaScript

• WanaKana by Viet: An IME that transforms romaji into either hiragana or katakana (can be adjusted).
• WanaKata - WanaKana set up to input as Katakana
• Input Box - used to style the correct/incorrect answer boxes

People’s Shared Themes

How do I … ?

[hinekidori]

An important JavaScript for our forum specifically is WanaKana provided by Viet. It’s what I use for the internal IME in my decks. It can be altered to type hiragana or katakana. Really useful.

Check it out!

[WanaKana]

[hinekidori]

I made a series of video tutorials and feature breakdowns that I suppose I could leave here. Please ignore my awkward narration. I have a new found respect for those who do that for a living.

[[Anki] Tutorials]

[Ncastaneda]

This is great!!!

One of the problems I dealed first with Anki was the boring basic theme.
Then when working with the Core10K was better, but my own vocab cards always looked like crap in comparision.

This is the theme I’ve been using this last days. Mainly because you can hover over the Kanji vocab to get the furigana (must have the japanese support addon to get the correct furigana in your sentences first), thus you can really try to read the sentences, and get the furigana only when need it.

Here some sample cards so you can get the card style into Anki (probably there’s more than one bit of redundant code, since I’ve limited myself to copy and paste, mixing one style with the other, until it worked ok)

Of course I didn’t came up with this. My nonexistent coding skills don’t allow me to create this from the scratch. I copied the style and adapt it from a shared Subs2SRS deck I downloaded recently.

The original style resembles something like this.

First for Subs2SRS cards

Front

Phrase alone with the audio/ image and you can hover over kanji to get the reading.

Back

Translation (dimmed) that can get bigger if you hover over as well.

And for vocab (adapted to the original Core10K style)

Front

Back

Since most of my cards come from Subs2SRS for sentences and Core10K for vocab, spending this extra time to make them like good it’s totaly worth it, since the rest of the process it’s really quick by now.

Will love to see what some of you guys use!!

[Syphus]

@hinekidori

So I’m just spitballing here. To pick an example I have a grammar point of を問わず with the explanation 〜がどうかは問題ではなく、どれにも同じことが言える and an English translation of “Regardless of”

And an example sentence of このドッグショーには種類（を問わず）、どんな犬でも参加できます。

So I’m thinking maybe just filling the parenthesis in with the English translation, or even part of the Japanese translation on one side of the card to start with to start with

[hinekidori]

So here is what I have so far. I think it is also possible for me to leave a blank underlined space and you can click on it for an english hint. I would need to do some more research for that.

[konekush]

Did you do this with pure CSS or peppered with JS?

[hinekidori]

It’s mostly CSS. The input box and IME are javascript, and the buttons are placed in a table.

[Syphus]

Yea I’ve heard that’s possible too. I’m also wondering what more I can do to make sure I’m not just memorizing sentences.

[hinekidori]

Honestly at your level, finding a way to use it is best. Like in conversation or writing and then get feedback so you can adjust accordingly.

[Syphus]

Yea I know, but starting in N2 and definitely in N1, you get a lot of things that really aren’t that easy to work into a conversation.

[hinekidori]

Hmm, I think what you need then is multiple context sentences that focus on the same grammar point. In this case I would create a Note for the grammar point in question and within that Note create lets say 10 cards with a different context sentence. This would give you a variety so you are not constantly seeing the same sentence for the one piece of grammar and end up memorizing.

What you have done then is create what Anki refers to as siblings. There is a function in Anki that allows you to bury related cards until the following day which would work well for this.

If you do find that you are memorizing a sentence I would recommend suppressing the card or just editing it and replacing the sentence in question.

[Syphus]

Ahh that’s a good idea too, so I could in this case add the other two examples:

このクレジットカードは国内、国外を問わず、色々な場所で使える。
このマラソン大会には、性別、年齢を問わず、誰でも参加できます

And just add them as well. And then from there add other examples I can find. I suppose I can see how it goes and then from there just tweak as necessary.

[hinekidori]

Yes exactly. I quickly pulled examples from WebLio and placed them in the deck linked below as an example. You can go into the browser and preview them to see how it all breaks down.

Let me know if you want any adjustments.

[Syphus Grammar]

Here is another sample image. I adjusted some fonts for readability.

[Syphus]

I just downloaded it, I’ll screw around with it as soon as I get a chance. Also some of those example sentences, 容貌の美醜を問わず are rather…intersting

Also I see the field “Expression” and then the field “Context Sentence” what’s the difference? They seem to have the same thing

[hinekidori]

Just their placement in the card for convenience. Expression is what you see on the front of the card. Context Sentence is placed on the back. This allows you to adjust them separately if need be.

I gathered those sentences from Weblio. I have no idea how accurate they are. lol They were more meant as examples for what could be done than anything else.

[hinekidori]

I have used the hover over furigana code you speak of. I believe it is the following.

ruby rt { visibility: hidden; } ruby:hover rt { visibility: visible; }

[Ncastaneda]

Not knowing CSS I can only presume … but yes, looks like it. You can control the opacity and text atributes as well over hovering.

It came in a Subs2SRS deck I downloaded this week. A nice surprise to find such a useful adition in the deck.

I’m sure someone with more knowledge could make a great use of it.

[konekush]

Yep. In CSS-speak it means:
hide every rt element that is contained inside (=a child of) a ruby element
and
show every rt element that is contained inside (=a child of) a ruby element only when the user hovers their cursor over it.

ETA: d’oh, I meant to say it in reply to @Ncastaneda!

ETA 2: an “element” is an HTML command that opens and closes: <big>this is an HTML element that makes stuff big</big>.