[Version 1.05 | 2016-01-31] Anki deck for kanji writing practice

WaniKani API And Third-Party Apps
101

Perfect! Thank you so much for your help.

102

No problem. I really should get around to fixing all of the issues since 1.05 and wrapping them up into a 1.06 release.

1 Like
103

Hi! Thank you so much for this @cemmy410, this is exactly the kind of WaniKani-companion writing practice app I’ve been looking for. I just have two small questions:

  1. On my (Android) phone, the stroke order font shows if I click on the ‘grey’ kanji once the answer is shown. On my (Android) tablet, though, I only get a black kanji in the same font - no stroke order. Do I just not have the font installed? And if not, where can I get the Android-compatible font from?

  2. I feel like it’s been asked many times, but I don’t think I’m getting kanji in the WK order, and I can’t find instructions to change this for AnkiDroid mobile app users - it looks like for most it just hasn’t been a problem. Any advice?

104

Is there anyway to add your own vocab into this?

105

Is there a way to set the answer to display the stroke order immediately?

106

I assume so if you edit the Card Template, but I wouldn’t specifically know how.

…speaking of which, does anyone know how to edit the layout to add extra padding to the top? The scratchpad on iOS doesn’t span the entirety of the screen and the only solution is to scale the card so large that my stroke practice feels rather cartoonish :S

EDIT - Figured it out, ill let you know how in a bit @okazaki.

107

Hey, try viewing the card template and editing the following:

FRONT SIDE (replace the “answer id” block with this)


<p id="Answer">
  <div class="whiteboard">
    <span id="wArea" class="strokeOrder" onclick="tStroke(1)">{{Kanji}}</span>
    <span id="sOrder" class="writingArea" onclick="tStroke(0)">{{Kanji}}</span>
  </div>
</p>

BACK SIDE (replace the line after the script block with this)

  // Show the correct kanji and Resources
  document.getElementById("wArea").className = "strokeOrder ans";

Not elegant but it works, still learning how to edit Anki templates ^-^

108

I appreciate this! Unfortunately I’m new to Anki and extremely not tech savvy. I thought I was following your directions but I ended up ruining the deck. Ctrl+z doesn’t work…

109

Thats okay, the only reason I didn’t link you the entire template code was because I was working on a re-write of the template so it adapts to different screen sizes and so you can scale and move the whiteboard depending on the device you’re using.

There’s a few issues with the layout but most of it is done so if you dont mind a few weird layout issues (depending on the device you’re using that is) then use the card template code below.

Right at the top of the Styling code you’ll notice two whiteboard properties - you can adjust those values to scale the whiteboard and move it up and down.

FRONT SIDE


<script>
  // Config: change these values to "true" to hide them

  var hideMeaning=false;
  var hideReadings=false;
  var hideResources=false;
</script>

<div id="Prompt" class="promptContainer">
  <span id="Meaning" class="meaning">{{Meaning}}<br /></span>
  <span id="Readings" class="reading">
    {{#ONyomi}}<span id="onYomi" class="readingHighlight rOn">{{ONyomi}}</span>{{/ONyomi}}
    {{#KUNyomi}}<span id="kunYomi" class="readingHighlight rKun">{{KUNyomi}}</span>{{/KUNyomi}}
  </span>
</div>

<p id="Answer" class="whiteboardContainer">
  <div class="whiteboard">
    <span id="wArea" class="strokeOrder" onclick="tStroke(1)">{{Kanji}}</span>
    <span id="sOrder" class="writingArea" onclick="tStroke(0)">{{Kanji}}</span>
  </div>
</p>

<div id="Resources" class="referenceContainer">
  <a class="referenceHighlight button" href="https://www.wanikani.com/kanji/{{Kanji}}">
    <img src="_shvelven.japanese.kanji.wanikani.png" />
  </a>
  <a class="referenceHighlight button" href="http://kanji.koohii.com/study/kanji/{{Kanji}}">
    <img src="_shvelven.japanese.kanji.koohi.png" />
  </a>
  <a class="referenceHighlight button" href="http://www.kanjidamage.com/kanji/search?q={{Kanji}}">
    <img src="_shvelven.japanese.kanji.damage.png" />
  </a>
  <a class="referenceHighlight button" href="http://jisho.org/kanji/details/{{Kanji}}">
    <img src="_shvelven.japanese.kanji.jisho.png" />
  </a>
  <a class="referenceHighlight button" href="https://en.wiktionary.org/wiki/{{Kanji}}">
    <img src="_shvelven.japanese.kanji.wiktionary.png" />
  </a>
  <a class="referenceHighlight button" href="http://www.chineseetymology.org/CharacterEtymology.aspx?submitButton1=Etymology&characterInput={{Kanji}}">
    <img src="_shvelven.japanese.kanji.etym.png" />
  </a>
</div>



<!-- Don't mess with anything below this line! -->



<script>
  // Logic to hide parts of the card (customize at top)
  if ( hideMeaning ) { document.getElementById("Meaning").style.display = "none";  }
  if ( hideReadings ) { document.getElementById("Readings").style.display = "none";  }
  if ( hideResources ) { document.getElementById("Resources").style.display = "none";  }
  
  // Special case... IDK why you would you hide both, but just in case :P
  if ( hideMeaning && hideReadings) {
    document.getElementById("Prompt").style.display = "none";
  }
  

  // Function to convert Hiragana to Katakana by subtracting 96
  // from the Unicode character codes. Quick and dirty hack :D
  function HtoK(id) {
    hString = document.getElementById(id).innerHTML;
    kString = "";

    for (var i = 0, len = hString.length; i < len; i++) {
      theChar = hString.charCodeAt(i);

      // If character is Hiragana, add 96 to get its katakana equivalent
      if (theChar >= 12353 && theChar <= 12453) {
        theChar += 96;
      }

      kString = kString + String.fromCharCode(theChar);
    }

    document.getElementById(id).innerHTML = kString;
    return (0);
  }

  // Run the function on the onYomi box
  HtoK("onYomi");



  // Auto text size. Makes text half as big if longer than x words
  function autoSize(id, maxLen) { 
    el = document.getElementById(id);
    wordC = el.innerHTML.split(" ").length;

    if( wordC > maxLen ) {
      el.style.fontSize = "2em";
    }

    return(0);
  }

  // Run it on the meaning
  autoSize("Meaning", 3);
</script>

BACK SIDE


<!-- 
You probably don't have to edit anything here—it's just  some javascript
to display the hidden the areas on the front of the card and a function to
toggle between the correct kanji and the stroke order diagram. Make
any changes on the front side of the card.
-->

{{FrontSide}}

<script>
  // Show the correct kanji and Resources
  document.getElementById("wArea").className = "strokeOrder answer";
  document.getElementById("Resources").style.visibility = "visible";

  // Function to toggle between kanji and stroke order diagram
  function tStroke(state) {

    if (state==1) {
      document.getElementById("wArea").style.display = "none";
      document.getElementById("sOrder").style.display = "block";
    }
    else {
      document.getElementById("sOrder").style.display = "none";
      document.getElementById("wArea").style.display = "block";
    }

  return 0;
}

</script>

STYLING



/* USE THE PROPERTIES BELOW TO CHANGE THE WHITEBOARD HEIGHT AND SIZE */
:root {
	--whiteboard-size: 70pt;
	--whiteboard-height-diff: 0vh;
}


/* DONT CHANGE THE CODE BELOW UNLESS YOU KNOW WHAT YOU'RE DOING */


#Resources { visibility: hidden }
#wArea { visibility: hidden }
#sOrder { display: none }

/* This kind of acts as a parent only not really?  idk yet */
.card {
	/* original font family was Mincho, ehh. */
	font-size: 10pt;
	font-family: Helvetica;
	text-align: center;
	background-color: #EEE;
} 

.card.nightMode { 
	background-color: #222; 
}

/* CONTAINERS */
/* Used to align and anchor the top and bottom of the card, leaving the whiteboard adjustable */

.whiteboard {

	/* if true, content it contains will be masked within itself */
	overflow: hidden;

	/* calc(50vw - ( var(--whiteboard-size) ) - 0.25em) */

	position: absolute;
	left: calc(50vw - ( var(--whiteboard-size) / 2 ) - 0.5em + 4pt); 
	top: calc(50vh - var(--whiteboard-size) - var(--whiteboard-height-diff) ); 

	font-size: var(--whiteboard-size);
	line-height: 1.05em;
	
	/* adjusts the margins of the interior space */
	padding: 0.15em;
	width: 1em;
	height: 1em;
	
	border-radius: .05em;
	background-color: #DDD;

	display: flex;
}

.nightMode .whiteboard {
	background-color: #333;
	border-color: #EEE;
}

.promptContainer {
	position: absolute;
	top: 10px;
	left: 10pt;
	right: 10pt;
}

.referenceContainer {
	position: absolute;
	top: 72vh; /* needs changing, smh */
	left: 0pt;
	right: 0pt;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;


}


.meaning { 
	font-size: 2.5em;
}

.reading { 
	font-size: 1.25em;
}

.button { 
	font-size: 1em;
	padding: 0.1em 0.1em; 
}

.rOn { 
	background-color: magenta; 
	border-color: darkmagenta !important; 
}

.rKun { 
	background-color: darkviolet; 
	border-color: indigo !important; 
}

.button { 
	margin-bottom: .10em; 
	background-color: #333;   
	border-color: black !important;  
}

/* stroke order overlay font */
.strokeOrder { 
	font-family: KanjiStrokeOrders, kStrokes;
	color: #111;
	font-size: 1em;
	text-align: center;
	
	margin: auto auto;
}

.nightMode .strokeOrder { 
	font-family: KanjiStrokeOrders, kStrokes;
	color: #BBB;
}

/* stroke answer overlay font */
.answer {
	font-family: Mincho;
	color: darkgrey; 
	visibility: visible !important;
	font-size: 1em;
	text-align: center;

}

.nightMode .answer {
	color: #BBB;
}

/* link button text */
a { 
	text-decoration: none; 
	color: white; 
	font-weight: bold; 
}

/* reference button images */
img {
	width: 2em; 
	height: 2em; 
	vertical-align: top; 
	padding-top: .1em
}

/* button frames and reading text */
.readingHighlight {
	display: inline-block;
	border: 5px solid;
	border-radius: .9em;
	padding: .05em .75em;
	margin-left: .3em;
	margin-right: .3em;
	margin-top: .5em;
	color: #111;
}

.nightMode .readingHighlight {
	color: #DDD;
}

.referenceHighlight {
	display: inline-block;
	border-radius: .4em;
	padding: .3em .3em;
	margin: .5em;
	color: #111;
	background-color: #DDD;

	flex: 10pt;
}

.nightMode .referenceHighlight {
	color: #DDD;
	background-color: #333;
}

@font-face { font-family: kStrokes; src: url('_KanjiStrokeOrders.ttf'); }
110

It was looking good until I copy pasted the styling section. Again, I thank you!

image
image1333×750 129 KB

111

I tested the code and it works for me, so i’m not sure what’s happened here. Make sure you only copy and paste whats in the code boxes, and make sure all of it has been copied and pasted.

112

Is it doing what you want it to? Because it has changed the card for me, but instead of displaying the stroke order first, it took that feature away.

113

Hmm…

Try this?

FRONT SIDE



<script>
    // Config: change these values to "true" to hide them
  
    var hideMeaning=false;
    var hideReadings=false;
    var hideResources=false;
</script>

<meta name="viewport" content="viewport-fit=cover" />
  
<div id="Prompt" class="promptContainer">
    <span id="Meaning" class="meaning">{{Meaning}}<br /></span>
    <span id="Readings" class="reading">
      {{#ONyomi}}<span id="onYomi" class="readingHighlight rOn">{{ONyomi}}</span>{{/ONyomi}}
      {{#KUNyomi}}<span id="kunYomi" class="readingHighlight rKun">{{KUNyomi}}</span>{{/KUNyomi}}
    </span>
  </div>
  
  <div id="Answer">
    <div class="whiteboard">
      <span id="wArea" class="strokeOrder" onclick="tStroke(1)">{{Kanji}}</span>
      <span id="sOrder" class="writingOrder" onclick="tStroke(0)">{{Kanji}}</span>
    </div>
  </div>
  
  <div id="Resources" class="referenceContainer">
    <a class="referenceHighlight button" href="https://www.wanikani.com/kanji/{{Kanji}}">
      <img src="_shvelven.japanese.kanji.wanikani.png" />
    </a>
    <a class="referenceHighlight button" href="http://kanji.koohii.com/study/kanji/{{Kanji}}">
      <img src="_shvelven.japanese.kanji.koohi.png" />
    </a>
    <a class="referenceHighlight button" href="http://www.kanjidamage.com/kanji/search?q={{Kanji}}">
      <img src="_shvelven.japanese.kanji.damage.png" />
    </a>
    <a class="referenceHighlight button" href="http://jisho.org/kanji/details/{{Kanji}}">
      <img src="_shvelven.japanese.kanji.jisho.png" />
    </a>
    <a class="referenceHighlight button" href="https://en.wiktionary.org/wiki/{{Kanji}}">
      <img src="_shvelven.japanese.kanji.wiktionary.png" />
    </a>
    <a class="referenceHighlight button" href="http://www.chineseetymology.org/CharacterEtymology.aspx?submitButton1=Etymology&characterInput={{Kanji}}">
      <img src="_shvelven.japanese.kanji.etym.png" />
    </a>
  </div>
  
  
  
  <!-- Don't mess with anything below this line! -->
  
  
  
  <script>
    // Logic to hide parts of the card (customize at top)
    if ( hideMeaning ) { document.getElementById("Meaning").style.display = "none";  }
    if ( hideReadings ) { document.getElementById("Readings").style.display = "none";  }
    if ( hideResources ) { document.getElementById("Resources").style.display = "none";  }
    
    // Special case... IDK why you would you hide both, but just in case :P
    if ( hideMeaning && hideReadings) {
      document.getElementById("Prompt").style.display = "none";
    }
    
  
    // Function to convert Hiragana to Katakana by subtracting 96
    // from the Unicode character codes. Quick and dirty hack :D
    function HtoK(id) {
      hString = document.getElementById(id).innerHTML;
      kString = "";
  
      for (var i = 0, len = hString.length; i < len; i++) {
        theChar = hString.charCodeAt(i);
  
        // If character is Hiragana, add 96 to get its katakana equivalent
        if (theChar >= 12353 && theChar <= 12453) {
          theChar += 96;
        }
  
        kString = kString + String.fromCharCode(theChar);
      }
  
      document.getElementById(id).innerHTML = kString;
      return (0);
    }
  
    // Run the function on the onYomi box
    HtoK("onYomi");
  
  
  
    // Auto text size. Makes text half as big if longer than x words
    function autoSize(id, maxLen) { 
      el = document.getElementById(id);
      wordC = el.innerHTML.split(" ").length;
  
      if( wordC > maxLen ) {
        el.style.fontSize = "2em";
      }
  
      return(0);
    }
  
    // Run it on the meaning
    autoSize("Meaning", 3);
</script>

BACK SIDE

<!-- 
You probably don't have to edit anything here—it's just  some javascript
to display the hidden the areas on the front of the card and a function to
toggle between the correct kanji and the stroke order diagram. Make
any changes on the front side of the card.
-->

{{FrontSide}}

<script>
  // Show the correct kanji and Resources
  document.getElementById("wArea").className = "strokeOrder ans";
  document.getElementById("Resources").style.visibility = "visible";

  // Function to toggle between kanji and stroke order diagram
  function tStroke(state) {

    if (state==1) {
      document.getElementById("wArea").style.display = "none";
      document.getElementById("sOrder").style.display = "block";
    }
    else {
      document.getElementById("sOrder").style.display = "none";
      document.getElementById("wArea").style.display = "block";
    }

  return 0;
}

</script>

STYLING


/* USE THE PROPERTIES BELOW TO CHANGE THE WHITEBOARD HEIGHT AND SIZE */
:root {
	--whiteboard-size: 10em;
	--whiteboard-height-diff: -8pt;
}


#Resources { visibility: hidden }
#wArea { visibility: hidden }
#sOrder { display: none }

/* This kind of acts as a parent only not really?  idk yet */
.card {
	/* original font family was Mincho, ehh. */
	font-size: 10pt;
	font-family: Helvetica;
	text-align: center;
	background-color: #EEE;

	margin: 10pt;
} 

.card.nightMode { 
	background-color: #222; 
}

/* CONTAINERS */
/* Used to align and anchor the top and bottom of the card, leaving the whiteboard adjustable */

.whiteboard {
	
	position: absolute;
	display: flex;
	left: calc(50% - 0.5em - 0.14em); /*  half screen - half font - borders */
	top: calc(45% - 0.5em - var(--whiteboard-height-diff)); 

	/* if true, content it contains will be masked within itself */
	overflow: hidden;

	/* The font size of the item */
	font-size: var(--whiteboard-size);
	
	/* Global scale for the height and width of the item */
	height: 1em;
	width: 1em;
	
	/* adjusts the margins of the interior space */
	padding: 0.15em;

	border-radius: .05em;
	background-color: #DDD;

	flex: 10pt;
}

.nightMode .whiteboard {
	background-color: #333;
}

.promptContainer {
	position: absolute;
	top: 10px;
	left: 10pt;
	right: 10pt;
}

.referenceContainer {
	position: absolute;
	top: 88%; /* needs changing, smh */
	left: 30pt;
	right: 30pt;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;


}


.meaning { 
	font-size: 2.5em;
}

.reading { 
	font-size: 1.25em;
}

.button { 
	font-size: 1em;
	padding: 0.1em 0.1em; 
}

.rOn { 
	background-color: magenta; 
	border-color: darkmagenta !important; 
}

.rKun { 
	background-color: darkviolet; 
	border-color: indigo !important; 
}

.button { 
	margin-bottom: .10em; 
	background-color: #333;   
	border-color: black !important;  
}

/* stroke order overlay font */
.strokeOrder { 
	font-family: KanjiStrokeOrders, kStrokes;
	color: #111;
	font-size: 1em;
	text-align: center;
	
	margin: auto auto;
}

.nightMode .strokeOrder { 
	font-family: KanjiStrokeOrders, kStrokes;
	color: #BBB;
}

/* stroke answer overlay font */
.ans {
	font-family: Mincho;
	color: darkgrey; 
	visibility: visible !important;
	font-size: 1em;
}

.nightMode .ans {
	color: #BBB;
}

/* link button text */
a { 
	text-decoration: none; 
	color: white; 
	font-weight: bold; 
}

/* reference button images */
img {
	width: 2em; 
	height: 2em; 
	vertical-align: top; 
	padding-top: .1em
}

/* button frames and reading text */
.readingHighlight {
	display: inline-block;
	border: 5px solid;
	border-radius: .9em;
	padding: .05em .75em;
	margin-left: .3em;
	margin-right: .3em;
	margin-top: .5em;
	color: #111;
}

.nightMode .readingHighlight {
	color: #DDD;
}

.referenceHighlight {
	display: inline-block;
	border-radius: .4em;
	padding: .3em .3em;
	margin: .5em;
	color: #111;
	background-color: #DDD;

	flex: 10pt;
}

.nightMode .referenceHighlight {
	color: #DDD;
	background-color: #333;
}

@font-face { font-family: kStrokes; src: url('_KanjiStrokeOrders.ttf'); }
114

First image is when you show answer and second is when you click.

image
image1333×750 18.1 KB

image
image1333×750 17.9 KB

116

I’ve been working on a brand new template for this Anki deck called Tranquility and here’s a preview:

image
image1166×857 233 KB

It features calm colours and lines using vector images and randomized backgrounds based on traditional Japanese woodblock prints. Ill also at some point add the ability to switch whether the stroke order appears first, as well as add additional font options so you can compare your handwriting to other common styles.

(im also adapting this theme for other general Anki study purposes but this is the first)

5 Likes
117

I’ve just starting using this deck on windows pc, there is one card that doesnt work. It’s the Repeater Kanji, 々. The card just displays “Html error”. Could someone help me out with this?

Edit: Also, the Kanji 久, or “Long time” is shown in “Level 3”, but according to wanikani it’s not learned until level 32.

118

The innerHTML error occurs on any card that has no on’yomi reading. There’s an error in the way the card is set up to convert the on’yomi readings to katakana because it does not account for when the on’yomi field is blank. You can work around this by editing the card.

Open the card editor and in the “Front Template” section look for the following lines:

// Run the function on the onYomi box
HtoK(“onYomi”)

Replace that with:

// Run the function on the onYomi box
{{#ONyomi}}HtoK(“onYomi”); {{/ONyomi}}

As for 久 this deck was last updated in 2016 and since then they have shuffled around the levels for a few kanji. The deck is also missing the kanji that were added more recently such as 斤喉叩飴匂 etc.

3 Likes
119

This is looking great! Do you know when you might release it? I know it sort of goes against the design aesthetic but would you also consider making a version with the on/kun readings centered or at least a bit more prominent? There are quite a few characters with same/similar English meanings that I use the readings in order to distinguish (e.g. both 妊（ニン） and 娠（シン） are listed in WaniKani as “Pregnant”) so having them be more visible could be helpful.

120

@Takanu this looks really good—I like it a lot!

Feel free to take over this deck and make it your own, because I’m very unlikely to ever pick it back up again. Consider it officially abandoned as of today.

Good luck!

1 Like
121

ありがとうございます！