LLearn Japanese

Figured out how to automate the creation of Anki cards using Jisho

Recently I found this plugin:

[https://ankiweb.net/shared/info/1262434132](https://ankiweb.net/shared/info/1262434132)

Which turned out to be pretty amazing, as you can create cards inside Anki desktop using the Jisho API by simply pressing a button that auto-completes the fields of a card. It works with the latest Anki version but is a bit rough to get started with as it requires you to setup up your own study cards/configure fields.

I took some time to do that now and it works as expected, though it’s a slight hassle to call up the API for every single card (no batch option seemingly available).

Despite that, I’d still recommend it for anyone trying to make their own cards, as it removes the hassle of copy-pasting every single definition and also provides a great way of adding metadata to your study cards.

I also know Yomichan, but I sadly was unable to get it working with my Anki installation, as it just blew my Anki installation immediately despite trying multiple configurations, so for just simply making cards inside Anki this is a pretty good add-on I’d say.

For anyone that needs them here are the study cards I’m currently using (Requires some changes to \_\_init\_\_.py though of the add-on, but it’s a simple copy-paste):

– Meanings->Word:

Front:
“`html
<span id=”m” style=”font-size: 20px;”>{{Meaning}}<br></span>
<span id=”pos” style=”font-size: 16px;”>{{PartOfSpeech}}</span>
<span id=”tags” style=”font-size: 16px;”>ー {{Tags}}</span>

<span id=”m1″ style=”font-size: 20px;”><br><br>{{Meaning1}}<br></span>
<span id=”pos1″ style=”font-size: 16px;”>{{PartOfSpeech1}}</span>
<span id=”tags1″ style=”font-size: 16px;”>ー {{Tags1}}</span>

<span id=”m2″ style=”font-size: 20px;”><br><br>{{Meaning2}}<br></span>
<span id=”pos2″ style=”font-size: 16px;”>{{PartOfSpeech2}}</span>
<span id=”tags2″ style=”font-size: 16px;”>ー {{Tags2}}</span>

<span id=”m3″ style=”font-size: 20px;”><br><br>{{Meaning3}}<br></span>
<span id=”pos3″ style=”font-size: 16px;”>{{PartOfSpeech3}}</span>
<span id=”tags3″ style=”font-size: 16px;”>ー {{Tags3}}</span>

<span id=”m4″ style=”font-size: 20px;”><br><br>{{Meaning4}}<br></span>
<span id=”pos4″ style=”font-size: 16px;”>{{PartOfSpeech4}}</span>
<span id=”tags4″ style=”font-size: 16px;”>ー {{Tags4}}</span>

<span id=”m5″ style=”font-size: 20px;”><br><br>{{Meaning5}}<br></span>
<span id=”pos5″ style=”font-size: 16px;”>{{PartOfSpeech5}}</span>
<span id=”tags5″ style=”font-size: 16px;”>ー {{Tags5}}</span>

<span id=”m6″ style=”font-size: 20px;”><br><br>{{Meaning6}}<br></span>
<span id=”pos6″ style=”font-size: 16px;”>{{PartOfSpeech6}}</span>
<span id=”tags6″ style=”font-size: 16px;”>ー {{Tags6}}</span>

<span id=”m7″ style=”font-size: 20px;”><br><br>{{Meaning7}}<br></span>
<span id=”pos7″ style=”font-size: 16px;”>{{PartOfSpeech7}}</span>
<span id=”tags7″ style=”font-size: 16px;”>ー {{Tags7}}</span>

<span id=”m8″ style=”font-size: 20px;”><br><br>{{Meaning8}}<br></span>
<span id=”pos8″ style=”font-size: 16px;”>{{PartOfSpeech8}}</span>
<span id=”tags8″ style=”font-size: 16px;”>ー {{Tags8}}</span>

<span id=”m9″ style=”font-size: 20px;”><br><br>{{Meaning9}}<br></span>
<span id=”pos9″ style=”font-size: 16px;”>{{PartOfSpeech9}}</span>
<span id=”tags9″ style=”font-size: 16px;”>ー {{Tags9}}</span>

<script>
for (let i = 0; i < 10; i++) {
let suffix = (i !== 0 ? i : “”);
let meaning = document.getElementById(“m” + suffix);
let partOfSpeech = document.getElementById(“pos” + suffix);
let tags = document.getElementById(“tags” + suffix);

// If the content is empty (anki field is empty), hide it
if (meaning.innerHTML === “<br><br><br>”) {
meaning.style.display = “none”;
meaning.style.visibility = “hidden”;
partOfSpeech.style.display = “none”;
partOfSpeech.style.visibility = “hidden”;
tags.style.display = “none”;
tags.style.visibility = “hidden”;
}

/* If there are no tags, hide the field */
if (tags.innerHTML === “ー “) {
tags.style.display = “none”;
tags.style.visibility = “hidden”;
}
}
</script>
“`
Back:
“`html
{{FrontSide}}

<hr id=answer>

<span style=”font-size: 32px;”>{{Expression}}<br></span>
<span style=”font-size: 24px;”>{{JishoReading}}<br></span>
<span id=”jlpt” style=”font-size: 16px; position: relative; top: 8px; padding: 2px 5px 3px 5px; color: #fff; border-radius: 3px; background-color: #909dc0;”>{{JLPT}}</span>
<span id=”wanikani” style=”font-size: 16px; position: relative; top: 8px; padding: 2px 5px 3px 5px; color: #fff; border-radius: 3px; background-color: #909dc0;”>{{Wanikani}}</span>
<span><br><br>{{Sound}}</span>

<script>
{
/* Hide JLPT Banner if the field is not present */
let jlpt = document.getElementById(“jlpt”);
if (jlpt.innerHTML === “”) {
jlpt.style.display = “none”;
jlpt.style.visibility = “hidden”;
}

/* Hide Wanikani Banner if the field is not present */
let wanikani = document.getElementById(“wanikani”);
if (wanikani.innerHTML === “”) {
wanikani.style.display = “none”;
wanikani.style.visibility = “hidden”;
}
}
</script>
“`
– Word->Meanings:
Front:
“`html
<span style=”font-size: 32px;”>{{Expression}}</span>
“`
Back:
“`html
{{FrontSide}}

<hr id=answer>

<span style=”font-size: 32px;”>{{Expression}}<br></span>
<span style=”font-size: 24px;”>{{JishoReading}}<br></span>
<span id=”jlpt” style=”font-size: 16px; position: relative; top: 8px; padding: 2px 5px 3px 5px; color: #fff; border-radius: 3px; background-color: #909dc0;”>{{JLPT}}</span>
<span id=”wanikani” style=”font-size: 16px; position: relative; top: 8px; padding: 2px 5px 3px 5px; color: #fff; border-radius: 3px; background-color: #909dc0;”>{{Wanikani}}</span>
<span><br><br></span>

<span id=”m” style=”font-size: 20px;”>{{Meaning}}<br></span>
<span id=”pos” style=”font-size: 16px;”>{{PartOfSpeech}}</span>
<span id=”tags” style=”font-size: 16px;”>ー {{Tags}}</span>

<span id=”m1″ style=”font-size: 20px;”><br><br>{{Meaning1}}<br></span>
<span id=”pos1″ style=”font-size: 16px;”>{{PartOfSpeech1}}</span>
<span id=”tags1″ style=”font-size: 16px;”>ー {{Tags1}}</span>

<span id=”m2″ style=”font-size: 20px;”><br><br>{{Meaning2}}<br></span>
<span id=”pos2″ style=”font-size: 16px;”>{{PartOfSpeech2}}</span>
<span id=”tags2″ style=”font-size: 16px;”>ー {{Tags2}}</span>

<span id=”m3″ style=”font-size: 20px;”><br><br>{{Meaning3}}<br></span>
<span id=”pos3″ style=”font-size: 16px;”>{{PartOfSpeech3}}</span>
<span id=”tags3″ style=”font-size: 16px;”>ー {{Tags3}}</span>

<span id=”m4″ style=”font-size: 20px;”><br><br>{{Meaning4}}<br></span>
<span id=”pos4″ style=”font-size: 16px;”>{{PartOfSpeech4}}</span>
<span id=”tags4″ style=”font-size: 16px;”>ー {{Tags4}}</span>

<span id=”m5″ style=”font-size: 20px;”><br><br>{{Meaning5}}<br></span>
<span id=”pos5″ style=”font-size: 16px;”>{{PartOfSpeech5}}</span>
<span id=”tags5″ style=”font-size: 16px;”>ー {{Tags5}}</span>

<span id=”m6″ style=”font-size: 20px;”><br><br>{{Meaning6}}<br></span>
<span id=”pos6″ style=”font-size: 16px;”>{{PartOfSpeech6}}</span>
<span id=”tags6″ style=”font-size: 16px;”>ー {{Tags6}}</span>

<span id=”m7″ style=”font-size: 20px;”><br><br>{{Meaning7}}<br></span>
<span id=”pos7″ style=”font-size: 16px;”>{{PartOfSpeech7}}</span>
<span id=”tags7″ style=”font-size: 16px;”>ー {{Tags7}}</span>

<span id=”m8″ style=”font-size: 20px;”><br><br>{{Meaning8}}<br></span>
<span id=”pos8″ style=”font-size: 16px;”>{{PartOfSpeech8}}</span>
<span id=”tags8″ style=”font-size: 16px;”>ー {{Tags8}}</span>

<span id=”m9″ style=”font-size: 20px;”><br><br>{{Meaning9}}<br></span>
<span id=”pos9″ style=”font-size: 16px;”>{{PartOfSpeech9}}</span>
<span id=”tags9″ style=”font-size: 16px;”>ー {{Tags9}}</span>

<span style=”font-size: 20px;”><br><br>{{Sound}}</span>

<script>
{
/* Hide JLPT Banner if the field is not present */
let jlpt = document.getElementById(“jlpt”);
if (jlpt.innerHTML === “”) {
jlpt.style.display = “none”;
jlpt.style.visibility = “hidden”;
}

/* Hide Wanikani Banner if the field is not present */
let wanikani = document.getElementById(“wanikani”);
if (wanikani.innerHTML === “”) {
wanikani.style.display = “none”;
wanikani.style.visibility = “hidden”;
}
}

for (let i = 0; i < 10; i++) {
let suffix = (i !== 0 ? i : “”);
let meaning = document.getElementById(“m” + suffix);
let partOfSpeech = document.getElementById(“pos” + suffix);
let tags = document.getElementById(“tags” + suffix);

/* If the content is empty (anki field is empty), hide it */
if (meaning.innerHTML === “<br><br><br>”) {
meaning.style.display = “none”;
meaning.style.visibility = “hidden”;
partOfSpeech.style.display = “none”;
partOfSpeech.style.visibility = “hidden”;
tags.style.display = “none”;
tags.style.visibility = “hidden”;
}

/* If there are no tags, hide the field */
if (tags.innerHTML === “ー “) {
tags.style.display = “none”;
tags.style.visibility = “hidden”;
}
}

</script>
“`
– Global CSS:
“`css
.card {
font-family: “Noto Sans JP”, “Liberation Sans”, arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}

.card1 { background-color: #ffffff; }
.card2 { background-color: #ffffff; }
.card3 { background-color: #ffffff; }
“`
– Modified \_\_init\_\_.py required for the JLPT and Wanikani extension (Credit to one of the commenters on the anki deck webpage): [`__init__.py`](https://gist.githubusercontent.com/Luna-Klatzer/c49ab7b032fb1bcc92be5b0df5864309/raw/18c31af1a23092e5fa1054fab9115d277aff7744/__init__.py)

EDIT: Fixed some minor issues in the HTML I provided.

1 comment

  1. nice script,

    For some reason I want to tell you, you can actually format code a bit better in reddit

    // here is some code
    int main(void)
    {
    return 0;
    }

    you put some spaces in the front of each line and it turns it into code

Leave a Reply
— Previous article

Part 2- 16 day trip report- Tokyo, Kyoto, Osaka, Hiroshima/Miyajima, and Kinosaki
Next article —

Advice on Naruto day trip from Osaka

You May Also Like