Skip to main content
Home About Privacy Contact

Adding writing components to existing RTK Kanji deck



Note:
View this updated page and video (Version 2.0)


In this post learn to add the writing component like this Anki-xiehanzi. Before proceeding make backups with scheduling information. 

1. First download and import the deck from https://ankiweb.net/shared/info/1862058740 into Anki. Then open editor to edit HTML, CSS and JS.

2. Download Write-Kanji.zip. Extract and copy the following _hanzi_writer_xiehanzi.js and Material Icons Font files from Add to Existing Deck (Kanji) folder and paste it to Anki/collection.media folder.
Download

To more about collection.media. View Anki Manual. https://docs.ankiweb.net/#/files?id=file-locations

3. Front Side
Then inside editor copy and add following code to front side of card.
Note: The front side should contain kanji. Like this one.
View front.html

4. Styling
Now copy the following CSS and paste it to Styling.
View card.css

5. Back Side
In back only remove the following line.
{{Frontside}}
<hr id=answer>
View Demo

To add this writing Component to Recognition RTK by MIA

View above demo for copying js and font file to collection.media folder
1. Front.html
Copy the front.html contents from zip file downloaded from GitHub release page.

2. Style Card.css
Copy the card.css contents from zip file downloaded from GitHub release page.

3. Back.html
Add the following to back side. To hide the following.
<script>
document.getElementById("ch_kanji").style.display = "none";
document.getElementById("character-target-div").style.display = "none";
document.getElementById("btnRevealChar").style.display = "none";
document.getElementById("btnGoNextCard").style.display = "none";
document.getElementById("ch_load_status").style.display = "none";
</script>

Demo

After successfully copy and paste, deck will available for practicing and drawing strokes of Kanji.


Note:  Add to front side of card containing Kanji only.

Any issues?

Related Links:

Labels:

Comments

Post a Comment

Popular posts from this blog

Sentence Adder Anki Addon: Add sentence in Anki editor in one click

Add sentences to Anki editor window in one click with batch adder option Select a word in edit field and click add button to add sentences to that fields matching the words. Also create/add sentences for any languages. The sentences database created using tatoeba language tsv files. Download language tsv file from tatoeba . Install Download addon from AnkiWeb  Sentence Adder Anki Addon Download from GitHub release page  Sentence Adder Anki Addon Features Create new language database Add random sentence in one click View list of all sentences matching the selected word Change language (Require restart of Anki to apply changes) Change color of sentences Batch sentences adder Sentences containing spaces Usage Install 1. Install Addon from AnkiWeb Anki -> Tools -> Add-ons -> Get Add-ons... Paste the code 1682655437 and install. 2. Restart Anki and open the Addon to add new languages. 3. Download language of ch...
Post a Comment
Read more

Anki JS API addon for getting decks and cards info like AnkiDroid JS API

AnkiDroid JavaScript API allow deck developer to add functionality to cards that can call native functions defined in AnkiDroid. This can be used to design whole new layout for buttons, cards info, top bar card counts, mark, flag etc. But Anki Desktop there are no official support like this JS API.  So, this is Anki addon for supporting the AnkiDroid-JS-API . Download AnkiJS API Addon View Source Code Usages To know more about the options view  AnkiDroid-JS-API .  New Count pycmd("AnkiJS.ankiGetNewCardCount()", (ret) => { console.log(ret); }); Learn Count pycmd("AnkiJS.ankiGetLrnCardCount()", (ret) => { console.log(ret); }); Review Count pycmd("AnkiJS.ankiGetRevCardCount()", (ret) => { console.log(ret); }); Mark pycmd("AnkiJS.ankiGetCardMark()", (ret) => { console.log(ret); }); Flag pycmd("AnkiJS.ankiGetCardFlag()", (ret) => { console.log(ret); }); Card Id pycmd("AnkiJS.ankiGe...
Post a Comment
Read more

Add progress bar in AnkiDroid decks

For Anki Desktop there is already addons for showing progress bar. But in AnkiDroid there is no addons support so many cool features are not available for AnkiDroid. In this post, learn to add Progress Bar to AnkiDroid.  1. Download _js_addon_progress_bar.js scripts. Download 2. Extract the downloaded zip file and copy  _js_addon_progress_bar.js . 3. Paste it inside AnkiDroid/collection.media folder 4. Add this single line to front and back side of cards <script src="_js_addon_progress_bar.js"></script> Note: If backside of card template contains {{FrontSide}} Then don't add the above line. <script src="_js_addon_progress_bar.js"></script> 5. Turn on fullscreen 6. Restart reviewing View JavaScript Code Demo
Post a Comment
Read more