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

Create language database with translation using Google Sheets

In Chinese vocabulary Generator Anki Addon , I used python module to translate example sentences but it increases the time for list generation. So, in this post I will explain how to create database with translation using Google sheets. This will help in creating flashcards offline with sentences and translation. Also it can be used in Anki addon development for language learning. I will take example of creating Chinese language database. 1. Download the sentences database from tatoeba 2. Open it with Google sheets 3. Use Google Translate function to translate all the sentences.  = GOOGLETRANSLATE ( C1 , "zh" , "en" ) 4. Select first cell then click   CTRL + SHIFT + down arrow, after that  click  CTRL + D to copy formula to all cell in that column. 5. Wait for sometime to complete the translations 6. Download the sheets as TSV files 7. Use this python script to create sqlite db file from tsv file. Note: Change the fields and table ...
Post a Comment
Read more