Adding writing components to existing RTK Kanji deck

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

• Watch demo video to add writing component to exisitng deck
• View Readme.md

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?

https://github.com/infinyte7/Write-Kanji/issues

Related Links:

Write Kanji

Add to Existing Deck

All in One Kanji Deck (Heisig's RTK Order, 6th edition)