Introduction
This is a JavaScript I coded to work with Anki. It is basically something extra you can add to any of your vocabulary card types. It works by getting the vocab word from the back of your card by adding an html tag or an ID to the html tag surrounding your {{Word/Vocabulary}} on the back of your card type with an ID matching the one in the code I am going to provide.
The information is the following:
- Kanji meaning (from WK or Jisho)
- Kanji radicals/components (from WK or KanjiDamage)
- Kanji readings (from WK or Jisho)
- Kanji mnemonic (from WK or KanjiDamage)
The information is from WaniKani, KanjiDamage, and from the https://kanjiapi.dev which if I am not mistaken uses Jisho as source.
If you do not add a WaniKani API key to the code, then it would by default use KanjiDamage for the mnemonics and radicals if available, while the other information is going to be from Jisho.org
KanjiDamage/Jisho example
If you add a WK API key then it would use WaniKani its primary source to fill the box, and if the kanji is not available on WaniKani it would try with KanjiDamage and Jisho.org.
WankiKani example
Installation
To install or add the script to your card type is simple.
Start by copyng and pasting the following code on the back template of your card type. Be careful to not delete any code you already have there, this is an addition, you do not need to replace anything!
Code:
<script>
var apiToken = "YOU CAN LEAVE THIS AS IT IS OR ADD YOUR WANIKANI API KEY";
var kanji = document.getElementById("word").textContent;
</script>
<div id="kanjiInfo"></div>
<script type="text/javascript" src="https://damiansh.github.io/js/jquery.min.js"></script>
<script src="https://damiansh.github.io/waniAnki/waniAnki.js"></script>
<link rel="stylesheet" href="https://damiansh.github.io/waniAnki/waniAnki.css">
I would recommend that you place after the last element on your back template.
Example:
<div class="image">{{Image}}</div>
<p id="sentence">{{Sentence}}</p>
<p id="reading">{{Reading}}</p>
<span>{{Word}}</span>
{{Audio}}
<p>{{Meaning}</p>
Imagine that's your back template. As you see here {{Word}} is the vocab on the card, it is what we want the script to find. On your anki card type it may have a different name depending on how it is designed, but you probably can figure out which one is by the name alone or by the preview Anki offers of the template.
So, we would past then our script after the meaning. We can see that {{Word}} is inside an <span> html tag.
If you take attention to the code provided you can see that there is the following line:
document.getElementById("word").textContent
Basically, the code is finding the an html tag with the "word" id, so you would have to add the same id to the span where {{Word}} is.
Example:
<div class="image">{{Image}}</div>
<p id="sentence">{{Sentence}}</p>
<p id="reading">{{Reading}}</p>
<span id="word" >{{Word}}</span>
{{Audio}}
<p>{{Meaning}}</p>
<script>
var apiToken = "YOU CAN LEAVE THIS AS IT IS OR ADD YOUR WANIKANI API KEY";
var kanji = document.getElementById("word").textContent;
</script>
<div id="kanjiInfo"></div>
<script type="text/javascript" src="https://damiansh.github.io/js/jquery.min.js"></script>
<script src="https://damiansh.github.io/waniAnki/waniAnki.js"></script>
<link rel="stylesheet" href="https://damiansh.github.io/waniAnki/waniAnki.css">
Basically, add the code, see where the field you want to pass to the script is, and make it so it has an html element with an id matching the document.getElementById line on the code provided, and that's it
If you got any questions or there is an issue with the script, let me know on my Discord: Damian#0623
