For a long time, I’ve wanted to use sentence cards to study grammar. However, whenever I tried to use sentence cards, I had the problem of remembering the sentence, without really remembering the grammar point I was trying to study. For example if I had a card to study the grammar point ～によると with the example sentence 天気予報＿＿＿＿明日は雨だ, I could remember that によると belongs in this sentence, but if I encountered によると in some other sentence that had nothing to do with a weather report, I couldn’t remember what it meant. For that reason, I wanted to break the connection in my mind between によると and weather reports and practice seeing the grammar point in other contexts. I thought about creating multiple cards for each grammar point, but that would result in over-studying that point since it would come up too often (not to mention all the extra time it would take up). It would be better to have several example sentences for each grammar point but put them on the same card and show one of the example sentences at random each time the card came up for review. It turns out you can put javascript on Anki cards that is capable of doing just that.

Below, I’ve included a sample card template that will show one of two sentences randomly. The sentence is displayed with the target grammar point removed from the sentence and replaced with circles. On the front and back of the card, the English translations of the sentences are hidden, but will appear if you mouse-over the Japanese.

Front of card:

Back of Card:

Here are the templates:
Front Template:

<div class="example" id="ex1">
  <span class="jp">{{ex1_jp}}</span><br />
  <span class="jp">{{ex1_en}</span></div>
<div class="example" id="ex1">
  <span class="jp">{{ex2_jp}}</span><br />
  <span class="jp">{{ex2_en}}</span></div>
<script>
  var exFields = 2;
  var exCount = 0;
  for(var i=1;i<=exFields;i++){
    var divid = "ex"+i;
    var divText =document.getElementById(divid).innerText.trim();
    if(divText!=""){
      exCount += 1;}
    else{break;}};
  var x = Math.floor(exCount*Math.random())+1;
  var divToShowId = "ex"+x;
  divToShow = document.getElementById(divToShowId);
  divToShow.style.display = 'block';
  var clozeElements = document.getElementsByClassName("cloze");
  for(var j=0;j<clozeElements.length;j++){
    var charCount = clozeElements[j].innerText.length;
    var circleString = "";
    for (var k=0;k<charCount;k++){
      circleString += "◯";}
    clozeElements[j].innerText = circleString;}
</script>

Styling:

.cloze {
color:blue;}
.example .en{
visibility:hidden;}
.jp:hover ~ .en{
visibility:visible;}

Back Template:

<div id=grammar>
  <span class="jp">{{grammarPoint}}</span></div>
<div id=usage>
  <span class="en">{{explanation}}</span></div>
<br />
<span class="jp">―例文―</span>
<div id="ex1" class="example">
  <span class="jp">{{ex1_jp}}</span><br / >
  <span class="en">{{ex1_en}}</span></div>
<div id="ex2" class="example">
  <span class="jp">{{ex2_jp}}</span><br / >
  <span class="en">{{ex2_en}}</span></div>
<script>
  var exFields = 2;
  var exCount = 0;
  for(var i=1;i<=exFields;i++){
    var divid = "ex"+i;
    var divText =document.getElementById(divid).innerText.trim();
    if(divText!=""){
      exCount += 1;}
    else{
      document.getElementById(divid).style.display = "none";}};
</script>

The cards I actually study can have up to ten example sentences, but I limited the code below to 2, just to save space. You can see the fields that I use are grammarPoint, explanation, ex_1jp, ex1_en, ex2_jp, and ex2_en. If you wanted to include more example sentence, you would add the fields ex#_jp and ex#_en, duplicate the example div elements on the front and the back templates, and increase the value of the exFields variable from 2 to #, where # is the maximum number of example sentences you want.

• This topic was modified 8 years, 7 months ago by  thisiskyle.
• This topic was modified 8 years, 7 months ago by  thisiskyle.
• This topic was modified 8 years, 7 months ago by  thisiskyle.
• This topic was modified 8 years, 7 months ago by  thisiskyle.
• This topic was modified 8 years, 7 months ago by  thisiskyle.
• This topic was modified 8 years, 7 months ago by  thisiskyle.
• This topic was modified 8 years, 7 months ago by  thisiskyle.
• This topic was modified 8 years, 7 months ago by  thisiskyle.
• This topic was modified 8 years, 7 months ago by  thisiskyle.
• This topic was modified 8 years, 7 months ago by  thisiskyle.
• This topic was modified 8 years, 7 months ago by  thisiskyle.