DoJG anki deck

set up
styles

The DoJG deck allows you to review the contents of the Dictionary of Japanese Grammar through Anki. Download it here.

How to use

By default, the deck includes two types of card for each grammar point:

Cloze deletion: The front of the card shows a sentence with a grammatical term blanked out, alongside a description of that term's meaning. You have to fill in the blank.
Recognition: One of the Japanese example sentences is on the front of the card in full. Depending on the style you choose, the grammatical explanation may be on either the front (default) or the back (sentence/random styles below).

You may want to suspend one of these two types depending on your preference (either will be effective so long as you read the example sentences):

On the Anki start screen, click Browse.
Select the DoJG deck from the left list.
Click Cards...
There are "recognition" and "cloze" tabs at the top; click X on the type you want to delete.

Styles

To change styles:

On the Anki start screen, click Browse.
Select the DoJG deck from the left list.
Click Cards...
Replace the template/styling for each card type (tabs at top) with the appropriate field below.

The styles available are:

Core Exposure [Default]: Cloze and exposure (answer on front) cards.
Core Sentence: Cloze and sentence (answer on back) cards.
Core Random: Cloze and sentence cards. Instead of testing on the first example sentence every time, a random sentence is picked. This encourages you to memorize the grammar point rather than the sentence.
Classic: Cloze and exposure cards. The original style.
Anon Random: For sentence cards only. Between 1 and 6 sentence are randomly selected for the front of the card. Unlike the Core Random style above, the sentences will remain consistent across devices per day. Source.

Core Exposure [Default]
Template/Styling	Preview (Cloze)	Preview (Recognition)
Styling (both types) .card { font-family: "meiryo"; font-size:13pt; padding:.2em; } .equiv { margin-left:1em; font-style: italic; } #usage_header, #usage { width:80%; margin:auto; padding:1em; border-left: 4px solid #C8FAF5; } #usage_header { background-color: #e6ffff; margin-bottom:0; } #usage { margin-top:0; margin-bottom:1em; } #page { float:right; font-size:70%; } #main_concept { font-weight:bold; font-size:120%; } hr { color:blue; } #notes { margin-top:1em; } img { width: auto; height: auto; max-width: 100%; max-height: none; } table td { padding:8px; font-size:11pt; } table { border-collapse:collapse; } tr.head { border-bottom:1px solid #bbbbbb!important; background-color:#f3f3f3; } .green ,.numbers { color:#263e86!important; } .cloze, .concept { color: #0055FF; } .bold { font-weight: bold; } #cloze_reveal .cloze { font-weight:bold; } #formation_header { padding:7px; margin-left:.2em; border:none!important!; font-family:Verdana, sans-serif; font-size:95%; font-weight:bold; } .example_en { margin-left:3em; margin-bottom:7px; } .example_en a { text-decoration:none; } Cloze: Front Template <p class="close_sentence">{{close}}</p> <div id="usage_header">{{usage}} <div class="equiv">{{equivalent}}</div></div> Cloze: Back Template {{FrontSide}} <div id="usage"> <span id="main_concept">{{grammatical concept}}</span> <span id="page">{{part of speech}} ({{volume}} {{page}})</span> </div> <hr /> <div id="cloze_reveal"> {{expression_jp}} </div> <div class="example_en"> {{#expression_en}}{{hint:expression_en}}{{/expression_en}} </div> <hr /> {{#example 1_jp}} <div class="example_jp">{{example 1_jp}}</div> <div class="example_en">{{hint:example 1_en}}</div> {{/example 1_jp}} {{#example 2_jp}} <div class="example_jp">{{example 2_jp}}</div> <div class="example_en">{{hint:example 2_en}}</div> {{/example 2_jp}} {{#example 3_jp}} <div class="example_jp">{{example 3_jp}}</div> <div class="example_en">{{hint:example 3_en}}</div> {{/example 3_jp}} {{#example 4_jp}} <div class="example_jp">{{example 4_jp}}</div> <div class="example_en">{{hint:example 4_en}}</div> {{/example 4_jp}} {{#example 5_jp}} <div class="example_jp">{{example 5_jp}}</div> <div class="example_en">{{hint:example 5_en}}</div> {{/example 5_jp}} {{#example 6_jp}} <div class="example_jp">{{example 6_jp}}</div> <div class="example_en">{{hint:example 6_en}}</div> {{/example 6_jp}} {{#example 7_jp}} <div class="example_jp">{{example 7_jp}}</div> <div class="example_en">{{hint:example 7_en}}</div> {{/example 7_jp}} {{#example 8_jp}} <div class="example_jp">{{example 8_jp}}</div> <div class="example_en">{{hint:example 8_en}}</div> {{/example 8_jp}} {{#example 9_jp}} <div class="example_jp">{{example 9_jp}}</div> <div class="example_en">{{hint:example 9_en}}</div> {{/example 9_jp}} {{#example 10_jp}} <div class="example_jp">{{example 10_jp}}</div> <div class="example_en">{{hint:example 10_en}}</div> {{/example 10_jp}} {{#example 11_jp}} <div class="example_jp">{{example 11_jp}}</div> <div class="example_en">{{hint:example 11_en}}</div> {{/example 11_jp}} {{#example 12_jp}} <div class="example_jp">{{example 12_jp}}</div> <div class="example_en">{{hint:example 12_en}}</div> {{/example 12_jp}} {{#example 13_jp}} <div class="example_jp">{{example 13_jp}}</div> <div class="example_en">{{hint:example 13_en}}</div> {{/example 13_jp}} {{#example 14_jp}} <div class="example_jp">{{example 14_jp}}</div> <div class="example_en">{{hint:example 14_en}}</div> {{/example 14_jp}} {{#example 15_jp}} <div class="example_jp">{{example 15_jp}}</div> <div class="example_en">{{hint:example 15_en}}</div> {{/example 15_jp}} {{#formation}} <p id="formation_header">Formation</p> {{/formation}} <div id="formation"> {{formation}} </div> <div id="notes"> {{notes}} </div> Recognition: Front Template <p class="example_jp">{{expression_jp}}</p> <div class="example_en">{{hint:expression_en}}</div> <div id="usage_header"> <span id="main_concept">{{grammatical concept}}</span> <span id="page">{{part of speech}} ({{volume}} {{page}})</span> </div> <div id="usage">{{usage}} <div class="equiv">{{equivalent}}</div></div> Recogniton: Back Template {{FrontSide}} <hr /> {{#example 1_jp}} <div class="example_jp">{{example 1_jp}}</div> <div class="example_en">{{hint:example 1_en}}</div> {{/example 1_jp}} {{#example 2_jp}} <div class="example_jp">{{example 2_jp}}</div> <div class="example_en">{{hint:example 2_en}}</div> {{/example 2_jp}} {{#example 3_jp}} <div class="example_jp">{{example 3_jp}}</div> <div class="example_en">{{hint:example 3_en}}</div> {{/example 3_jp}} {{#example 4_jp}} <div class="example_jp">{{example 4_jp}}</div> <div class="example_en">{{hint:example 4_en}}</div> {{/example 4_jp}} {{#example 5_jp}} <div class="example_jp">{{example 5_jp}}</div> <div class="example_en">{{hint:example 5_en}}</div> {{/example 5_jp}} {{#example 6_jp}} <div class="example_jp">{{example 6_jp}}</div> <div class="example_en">{{hint:example 6_en}}</div> {{/example 6_jp}} {{#example 7_jp}} <div class="example_jp">{{example 7_jp}}</div> <div class="example_en">{{hint:example 7_en}}</div> {{/example 7_jp}} {{#example 8_jp}} <div class="example_jp">{{example 8_jp}}</div> <div class="example_en">{{hint:example 8_en}}</div> {{/example 8_jp}} {{#example 9_jp}} <div class="example_jp">{{example 9_jp}}</div> <div class="example_en">{{hint:example 9_en}}</div> {{/example 9_jp}} {{#example 10_jp}} <div class="example_jp">{{example 10_jp}}</div> <div class="example_en">{{hint:example 10_en}}</div> {{/example 10_jp}} {{#example 11_jp}} <div class="example_jp">{{example 11_jp}}</div> <div class="example_en">{{hint:example 11_en}}</div> {{/example 11_jp}} {{#example 12_jp}} <div class="example_jp">{{example 12_jp}}</div> <div class="example_en">{{hint:example 12_en}}</div> {{/example 12_jp}} {{#example 13_jp}} <div class="example_jp">{{example 13_jp}}</div> <div class="example_en">{{hint:example 13_en}}</div> {{/example 13_jp}} {{#example 14_jp}} <div class="example_jp">{{example 14_jp}}</div> <div class="example_en">{{hint:example 14_en}}</div> {{/example 14_jp}} {{#example 15_jp}} <div class="example_jp">{{example 15_jp}}</div> <div class="example_en">{{hint:example 15_en}}</div> {{/example 15_jp}} {{#formation}} <p id="formation_header">Formation</p> {{/formation}} <div id="formation"> {{formation}} </div> <div id="notes"> {{notes}} </div>	Front Back	Front Back
Core Sentence
Template/Styling	Preview (Cloze)	Preview (Recognition)
Styling (both types) .card { font-family: "meiryo"; font-size:13pt; padding:.2em; } .equiv { margin-left:1em; font-style: italic; } #usage_header, #usage { width:80%; margin:auto; padding:1em; border-left: 4px solid #C8FAF5; } #usage_header { background-color: #e6ffff; margin-bottom:0; } #usage { margin-top:0; margin-bottom:1em; } #page { float:right; font-size:70%; } #main_concept { font-weight:bold; font-size:120%; } hr { color:blue; } #notes { margin-top:1em; } img { width: auto; height: auto; max-width: 100%; max-height: none; } table td { padding:8px; font-size:11pt; } table { border-collapse:collapse; } tr.head { border-bottom:1px solid #bbbbbb!important; background-color:#f3f3f3; } .green ,.numbers { color:#263e86!important; } .cloze, .concept { color: #0055FF; } .bold { font-weight: bold; } #cloze_reveal .cloze { font-weight:bold; } #formation_header { padding:7px; margin-left:.2em; border:none!important!; font-family:Verdana, sans-serif; font-size:95%; font-weight:bold; } .example_en { margin-left:3em; margin-bottom:7px; } .example_en a { text-decoration:none; } Cloze: Front Template <p class="close_sentence">{{close}}</p> <div id="usage_header">{{usage}} <div class="equiv">{{equivalent}}</div></div> Cloze: Back Template {{FrontSide}} <div id="usage"> <span id="main_concept">{{grammatical concept}}</span> <span id="page">{{part of speech}} ({{volume}} {{page}})</span> </div> <hr /> <div id="cloze_reveal"> {{expression_jp}} </div> <div class="example_en"> {{#expression_en}}{{hint:expression_en}}{{/expression_en}} </div> <hr /> {{#example 1_jp}} <div class="example_jp">{{example 1_jp}}</div> <div class="example_en">{{hint:example 1_en}}</div> {{/example 1_jp}} {{#example 2_jp}} <div class="example_jp">{{example 2_jp}}</div> <div class="example_en">{{hint:example 2_en}}</div> {{/example 2_jp}} {{#example 3_jp}} <div class="example_jp">{{example 3_jp}}</div> <div class="example_en">{{hint:example 3_en}}</div> {{/example 3_jp}} {{#example 4_jp}} <div class="example_jp">{{example 4_jp}}</div> <div class="example_en">{{hint:example 4_en}}</div> {{/example 4_jp}} {{#example 5_jp}} <div class="example_jp">{{example 5_jp}}</div> <div class="example_en">{{hint:example 5_en}}</div> {{/example 5_jp}} {{#example 6_jp}} <div class="example_jp">{{example 6_jp}}</div> <div class="example_en">{{hint:example 6_en}}</div> {{/example 6_jp}} {{#example 7_jp}} <div class="example_jp">{{example 7_jp}}</div> <div class="example_en">{{hint:example 7_en}}</div> {{/example 7_jp}} {{#example 8_jp}} <div class="example_jp">{{example 8_jp}}</div> <div class="example_en">{{hint:example 8_en}}</div> {{/example 8_jp}} {{#example 9_jp}} <div class="example_jp">{{example 9_jp}}</div> <div class="example_en">{{hint:example 9_en}}</div> {{/example 9_jp}} {{#example 10_jp}} <div class="example_jp">{{example 10_jp}}</div> <div class="example_en">{{hint:example 10_en}}</div> {{/example 10_jp}} {{#example 11_jp}} <div class="example_jp">{{example 11_jp}}</div> <div class="example_en">{{hint:example 11_en}}</div> {{/example 11_jp}} {{#example 12_jp}} <div class="example_jp">{{example 12_jp}}</div> <div class="example_en">{{hint:example 12_en}}</div> {{/example 12_jp}} {{#example 13_jp}} <div class="example_jp">{{example 13_jp}}</div> <div class="example_en">{{hint:example 13_en}}</div> {{/example 13_jp}} {{#example 14_jp}} <div class="example_jp">{{example 14_jp}}</div> <div class="example_en">{{hint:example 14_en}}</div> {{/example 14_jp}} {{#example 15_jp}} <div class="example_jp">{{example 15_jp}}</div> <div class="example_en">{{hint:example 15_en}}</div> {{/example 15_jp}} {{#formation}} <p id="formation_header">Formation</p> {{/formation}} <div id="formation"> {{formation}} </div> <div id="notes"> {{notes}} </div> Recognition: Front Template <p class="example_jp">{{expression_jp}}</p> Recogniton: Back Template {{FrontSide}} <hr /> <div id="cloze_reveal"> {{expression_en}} </div> <hr /> <div id="usage_header"> <span id="main_concept">{{grammatical concept}}</span> <span id="page">{{part of speech}} ({{volume}} {{page}})</span> </div> <div id="usage">{{usage}} <div class="equiv">{{equivalent}}</div></div> {{#example 1_jp}} <div class="example_jp">{{example 1_jp}}</div> <div class="example_en">{{hint:example 1_en}}</div> {{/example 1_jp}} {{#example 2_jp}} <div class="example_jp">{{example 2_jp}}</div> <div class="example_en">{{hint:example 2_en}}</div> {{/example 2_jp}} {{#example 3_jp}} <div class="example_jp">{{example 3_jp}}</div> <div class="example_en">{{hint:example 3_en}}</div> {{/example 3_jp}} {{#example 4_jp}} <div class="example_jp">{{example 4_jp}}</div> <div class="example_en">{{hint:example 4_en}}</div> {{/example 4_jp}} {{#example 5_jp}} <div class="example_jp">{{example 5_jp}}</div> <div class="example_en">{{hint:example 5_en}}</div> {{/example 5_jp}} {{#example 6_jp}} <div class="example_jp">{{example 6_jp}}</div> <div class="example_en">{{hint:example 6_en}}</div> {{/example 6_jp}} {{#example 7_jp}} <div class="example_jp">{{example 7_jp}}</div> <div class="example_en">{{hint:example 7_en}}</div> {{/example 7_jp}} {{#example 8_jp}} <div class="example_jp">{{example 8_jp}}</div> <div class="example_en">{{hint:example 8_en}}</div> {{/example 8_jp}} {{#example 9_jp}} <div class="example_jp">{{example 9_jp}}</div> <div class="example_en">{{hint:example 9_en}}</div> {{/example 9_jp}} {{#example 10_jp}} <div class="example_jp">{{example 10_jp}}</div> <div class="example_en">{{hint:example 10_en}}</div> {{/example 10_jp}} {{#example 11_jp}} <div class="example_jp">{{example 11_jp}}</div> <div class="example_en">{{hint:example 11_en}}</div> {{/example 11_jp}} {{#example 12_jp}} <div class="example_jp">{{example 12_jp}}</div> <div class="example_en">{{hint:example 12_en}}</div> {{/example 12_jp}} {{#example 13_jp}} <div class="example_jp">{{example 13_jp}}</div> <div class="example_en">{{hint:example 13_en}}</div> {{/example 13_jp}} {{#example 14_jp}} <div class="example_jp">{{example 14_jp}}</div> <div class="example_en">{{hint:example 14_en}}</div> {{/example 14_jp}} {{#example 15_jp}} <div class="example_jp">{{example 15_jp}}</div> <div class="example_en">{{hint:example 15_en}}</div> {{/example 15_jp}} {{#formation}} <p id="formation_header">Formation</p> {{/formation}} <div id="formation"> {{formation}} </div> <div id="notes"> {{notes}} </div>	Front Back	Front Back
Core Random
Template/Styling	Preview (Cloze)	Preview (Recognition)
Styling (both types) #hidden { display:none; } .card { font-family: "meiryo"; font-size:13pt; padding:.2em; } .equiv { margin-left:1em; font-style: italic; } #usage_header, #usage { width:80%; margin:auto; padding:1em; border-left: 4px solid #C8FAF5; } #usage_header { background-color: #e6ffff; margin-bottom:0; } #usage { margin-top:0; margin-bottom:1em; } #page { float:right; font-size:70%; } #main_concept { font-weight:bold; font-size:120%; } hr { color:blue; } #notes { margin-top:1em; } img { width: auto; height: auto; max-width: 100%; max-height: none; } table td { padding:8px; font-size:11pt; } table { border-collapse:collapse; } tr.head { border-bottom:1px solid #bbbbbb!important; background-color:#f3f3f3; } .green ,.numbers { color:#263e86!important; } .cloze, .concept { color: #0055FF; } .bold { font-weight: bold; } #cloze_sentence .cloze { font-weight:bold; } #formation_header { padding:7px; margin-left:.2em; border:none!important!; font-family:Verdana, sans-serif; font-size:95%; font-weight:bold; } .example_en { margin-left:3em; margin-bottom:7px; } .example_en a { text-decoration:none; } Cloze: Front Template <p id="cloze_sentence"></p> <div id="usage_header">{{usage}} <div class="equiv">{{equivalent}}</div></div> <div id="hidden"> {{#expression_jp}} <div class="jp_hidden" id="s0">{{expression_jp}}</div> <div id="engs0">{{expression_en}}</div> {{/expression_jp}} {{#example 1_jp}} <div class="jp_hidden" id="s1">{{example 1_jp}}</div> <div id="engs1">{{example 1_en}}</div> {{/example 1_jp}} {{#example 2_jp}} <div class="jp_hidden" id="s2">{{example 2_jp}}</div> <div id="engs2">{{example 2_en}}</div> {{/example 2_jp}} {{#example 3_jp}} <div class="jp_hidden" id="s3">{{example 3_jp}}</div> <div id="engs3">{{example 3_en}}</div> {{/example 3_jp}} {{#example 4_jp}} <div class="jp_hidden" id="s4">{{example 4_jp}}</div> <div id="engs4">{{example 4_en}}</div> {{/example 4_jp}} {{#example 5_jp}} <div class="jp_hidden" id="s5">{{example 5_jp}}</div> <div id="engs5">{{example 5_en}}</div> {{/example 5_jp}} {{#example 6_jp}} <div class="jp_hidden" id="s6">{{example 6_jp}}</div> <div id="engs6">{{example 6_en}}</div> {{/example 6_jp}} {{#example 7_jp}} <div class="jp_hidden" id="s7">{{example 7_jp}}</div> <div id="engs7">{{example 7_en}}</div> {{/example 7_jp}} {{#example 8_jp}} <div class="jp_hidden" id="s8">{{example 8_jp}}</div> <div id="engs8">{{example 8_en}}</div> {{/example 8_jp}} {{#example 9_jp}} <div class="jp_hidden" id="s9">{{example 9_jp}}</div> <div id="engs9">{{example 9_en}}</div> {{/example 9_jp}} {{#example 10_jp}} <div class="jp_hidden" id="s10">{{example 10_jp}}</div> <div id="engs10">{{example 10_en}}</div> {{/example 10_jp}} {{#example 11_jp}} <div class="jp_hidden" id="s11">{{example 11_jp}}</div> <div id="engs11">{{example 11_en}}</div> {{/example 11_jp}} {{#example 12_jp}} <div class="jp_hidden" id="s12">{{example 12_jp}}</div> <div id="engs12">{{example 12_en}}</div> {{/example 12_jp}} {{#example 13_jp}} <div class="jp_hidden" id="s13">{{example 13_jp}}</div> <div id="engs13">{{example 13_en}}</div> {{/example 13_jp}} {{#example 14_jp}} <div class="jp_hidden" id="s14">{{example 14_jp}}</div> <div id="engs14">{{example 14_en}}</div> {{/example 14_jp}} {{#example 15_jp}} <div class="jp_hidden" id="s15">{{example 15_jp}}</div> <div id="engs15">{{example 15_en}}</div> {{/example 15_jp}} </div> <script> if (typeof japanese == 'undefined') { var sentences = document.querySelectorAll('.jp_hidden'); var japanese = sentences[Math.floor(Math.random() * sentences.length)]; var english = document.getElementById('eng' + japanese.id); var cloze = japanese.innerHTML.replace(/<span class="cloze">[\s\S]?<\/span>/g, '○○'); document.getElementById('cloze_sentence').innerHTML = cloze; } </script> Cloze: Back Template {{FrontSide}} <div id="usage"> <span id="main_concept">{{grammatical concept}}</span> <span id="page">{{part of speech}} ({{volume}} {{page}})</span> </div> <hr /> <div id="english_reveal"></div> <hr /> <div id="backs0"> <div class="example_jp">{{expression_jp}}</div> <div class="example_en">{{hint:expression_en}}</div> </div> <div id="backs1"> {{#example 1_jp}} <div class="example_jp">{{example 1_jp}}</div> <div class="example_en">{{hint:example 1_en}}</div> {{/example 1_jp}} </div> <div id="backs2"> {{#example 2_jp}} <div class="example_jp">{{example 2_jp}}</div> <div class="example_en">{{hint:example 2_en}}</div> {{/example 2_jp}} </div> <div id="backs3"> {{#example 3_jp}} <div class="example_jp">{{example 3_jp}}</div> <div class="example_en">{{hint:example 3_en}}</div> {{/example 3_jp}} </div> <div id="backs4"> {{#example 4_jp}} <div class="example_jp">{{example 4_jp}}</div> <div class="example_en">{{hint:example 4_en}}</div> {{/example 4_jp}} </div> <div id="backs5"> {{#example 5_jp}} <div class="example_jp">{{example 5_jp}}</div> <div class="example_en">{{hint:example 5_en}}</div> {{/example 5_jp}} </div> <div id="backs6"> {{#example 6_jp}} <div class="example_jp">{{example 6_jp}}</div> <div class="example_en">{{hint:example 6_en}}</div> {{/example 6_jp}} </div> <div id="backs7"> {{#example 7_jp}} <div class="example_jp">{{example 7_jp}}</div> <div class="example_en">{{hint:example 7_en}}</div> {{/example 7_jp}} </div> <div id="backs8"> {{#example 8_jp}} <div class="example_jp">{{example 8_jp}}</div> <div class="example_en">{{hint:example 8_en}}</div> {{/example 8_jp}} </div> <div id="backs9"> {{#example 9_jp}} <div class="example_jp">{{example 9_jp}}</div> <div class="example_en">{{hint:example 9_en}}</div> {{/example 9_jp}} </div> <div id="backs10"> {{#example 10_jp}} <div class="example_jp">{{example 10_jp}}</div> <div class="example_en">{{hint:example 10_en}}</div> {{/example 10_jp}} </div> <div id="backs11"> {{#example 11_jp}} <div class="example_jp">{{example 11_jp}}</div> <div class="example_en">{{hint:example 11_en}}</div> {{/example 11_jp}} </div> <div id="backs12"> {{#example 12_jp}} <div class="example_jp">{{example 12_jp}}</div> <div class="example_en">{{hint:example 12_en}}</div> {{/example 12_jp}} </div> <div id="backs13"> {{#example 13_jp}} <div class="example_jp">{{example 13_jp}}</div> <div class="example_en">{{hint:example 13_en}}</div> {{/example 13_jp}} </div> <div id="backs14"> {{#example 14_jp}} <div class="example_jp">{{example 14_jp}}</div> <div class="example_en">{{hint:example 14_en}}</div> {{/example 14_jp}} </div> <div id="backs15"> {{#example 15_jp}} <div class="example_jp">{{example 15_jp}}</div> <div class="example_en">{{hint:example 15_en}}</div> {{/example 15_jp}} </div> {{#formation}} <p id="formation_header">Formation</p> {{/formation}} <div id="formation"> {{formation}} </div> <div id="notes"> {{notes}} </div> <script> document.getElementById('cloze_sentence').innerHTML = japanese.innerHTML; document.getElementById('english_reveal').innerHTML = english.innerHTML; document.getElementById('back' + japanese.id).innerHTML = ''; japanese = undefined; </script> Recognition: Front Template <p id="sentence"></p> <div id="hidden"> {{#expression_jp}} <div class="jp_hidden" id="s0">{{expression_jp}}</div> <div id="engs0">{{expression_en}}</div> {{/expression_jp}} {{#example 1_jp}} <div class="jp_hidden" id="s1">{{example 1_jp}}</div> <div id="engs1">{{example 1_en}}</div> {{/example 1_jp}} {{#example 2_jp}} <div class="jp_hidden" id="s2">{{example 2_jp}}</div> <div id="engs2">{{example 2_en}}</div> {{/example 2_jp}} {{#example 3_jp}} <div class="jp_hidden" id="s3">{{example 3_jp}}</div> <div id="engs3">{{example 3_en}}</div> {{/example 3_jp}} {{#example 4_jp}} <div class="jp_hidden" id="s4">{{example 4_jp}}</div> <div id="engs4">{{example 4_en}}</div> {{/example 4_jp}} {{#example 5_jp}} <div class="jp_hidden" id="s5">{{example 5_jp}}</div> <div id="engs5">{{example 5_en}}</div> {{/example 5_jp}} {{#example 6_jp}} <div class="jp_hidden" id="s6">{{example 6_jp}}</div> <div id="engs6">{{example 6_en}}</div> {{/example 6_jp}} {{#example 7_jp}} <div class="jp_hidden" id="s7">{{example 7_jp}}</div> <div id="engs7">{{example 7_en}}</div> {{/example 7_jp}} {{#example 8_jp}} <div class="jp_hidden" id="s8">{{example 8_jp}}</div> <div id="engs8">{{example 8_en}}</div> {{/example 8_jp}} {{#example 9_jp}} <div class="jp_hidden" id="s9">{{example 9_jp}}</div> <div id="engs9">{{example 9_en}}</div> {{/example 9_jp}} {{#example 10_jp}} <div class="jp_hidden" id="s10">{{example 10_jp}}</div> <div id="engs10">{{example 10_en}}</div> {{/example 10_jp}} {{#example 11_jp}} <div class="jp_hidden" id="s11">{{example 11_jp}}</div> <div id="engs11">{{example 11_en}}</div> {{/example 11_jp}} {{#example 12_jp}} <div class="jp_hidden" id="s12">{{example 12_jp}}</div> <div id="engs12">{{example 12_en}}</div> {{/example 12_jp}} {{#example 13_jp}} <div class="jp_hidden" id="s13">{{example 13_jp}}</div> <div id="engs13">{{example 13_en}}</div> {{/example 13_jp}} {{#example 14_jp}} <div class="jp_hidden" id="s14">{{example 14_jp}}</div> <div id="engs14">{{example 14_en}}</div> {{/example 14_jp}} {{#example 15_jp}} <div class="jp_hidden" id="s15">{{example 15_jp}}</div> <div id="engs15">{{example 15_en}}</div> {{/example 15_jp}} </div> <script> if (typeof japanese == 'undefined') { var sentences = document.querySelectorAll('.jp_hidden'); var japanese = sentences[Math.floor(Math.random() sentences.length)]; var english = document.getElementById('eng' + japanese.id); document.getElementById('sentence').innerHTML = japanese.innerHTML; } </script> Recogniton: Back Template {{FrontSide}} <hr /> <div id="english_reveal"></div> <hr /> <div id="usage_header"> <span id="main_concept">{{grammatical concept}}</span> <span id="page">{{part of speech}} ({{volume}} {{page}})</span> </div> <div id="usage">{{usage}} <div class="equiv">{{equivalent}}</div></div> <div id="backs0"> <div class="example_jp">{{expression_jp}}</div> <div class="example_en">{{hint:expression_en}}</div> </div> <div id="backs1"> {{#example 1_jp}} <div class="example_jp">{{example 1_jp}}</div> <div class="example_en">{{hint:example 1_en}}</div> {{/example 1_jp}} </div> <div id="backs2"> {{#example 2_jp}} <div class="example_jp">{{example 2_jp}}</div> <div class="example_en">{{hint:example 2_en}}</div> {{/example 2_jp}} </div> <div id="backs3"> {{#example 3_jp}} <div class="example_jp">{{example 3_jp}}</div> <div class="example_en">{{hint:example 3_en}}</div> {{/example 3_jp}} </div> <div id="backs4"> {{#example 4_jp}} <div class="example_jp">{{example 4_jp}}</div> <div class="example_en">{{hint:example 4_en}}</div> {{/example 4_jp}} </div> <div id="backs5"> {{#example 5_jp}} <div class="example_jp">{{example 5_jp}}</div> <div class="example_en">{{hint:example 5_en}}</div> {{/example 5_jp}} </div> <div id="backs6"> {{#example 6_jp}} <div class="example_jp">{{example 6_jp}}</div> <div class="example_en">{{hint:example 6_en}}</div> {{/example 6_jp}} </div> <div id="backs7"> {{#example 7_jp}} <div class="example_jp">{{example 7_jp}}</div> <div class="example_en">{{hint:example 7_en}}</div> {{/example 7_jp}} </div> <div id="backs8"> {{#example 8_jp}} <div class="example_jp">{{example 8_jp}}</div> <div class="example_en">{{hint:example 8_en}}</div> {{/example 8_jp}} </div> <div id="backs9"> {{#example 9_jp}} <div class="example_jp">{{example 9_jp}}</div> <div class="example_en">{{hint:example 9_en}}</div> {{/example 9_jp}} </div> <div id="backs10"> {{#example 10_jp}} <div class="example_jp">{{example 10_jp}}</div> <div class="example_en">{{hint:example 10_en}}</div> {{/example 10_jp}} </div> <div id="backs11"> {{#example 11_jp}} <div class="example_jp">{{example 11_jp}}</div> <div class="example_en">{{hint:example 11_en}}</div> {{/example 11_jp}} </div> <div id="backs12"> {{#example 12_jp}} <div class="example_jp">{{example 12_jp}}</div> <div class="example_en">{{hint:example 12_en}}</div> {{/example 12_jp}} </div> <div id="backs13"> {{#example 13_jp}} <div class="example_jp">{{example 13_jp}}</div> <div class="example_en">{{hint:example 13_en}}</div> {{/example 13_jp}} </div> <div id="backs14"> {{#example 14_jp}} <div class="example_jp">{{example 14_jp}}</div> <div class="example_en">{{hint:example 14_en}}</div> {{/example 14_jp}} </div> <div id="backs15"> {{#example 15_jp}} <div class="example_jp">{{example 15_jp}}</div> <div class="example_en">{{hint:example 15_en}}</div> {{/example 15_jp}} </div> {{#formation}} <p id="formation_header">Formation</p> {{/formation}} <div id="formation"> {{formation}} </div> <div id="notes"> {{notes}} </div> <script> document.getElementById('sentence').innerHTML = japanese.innerHTML; document.getElementById('english_reveal').innerHTML = english.innerHTML; document.getElementById('back' + japanese.id).innerHTML = ''; japanese = undefined; </script>	Front Back	Front Back
Classic Exposure
Template/Styling	Preview (Cloze)	Preview (Recognition)
Styling (both types) .card { background: white; font-family: "meiryo"; padding-top:1em; } .hint { font-size:10.0pt; color:black; padding: 1px; } #header { display:inline; font-size:12.0pt; color:#666666; border: 2px solid; padding: 10px; background: #ddd; border-top-right-radius:2em; border-top-left-radius:2em; } #usage_wrapper { width:52%; margin: 0 auto; } #usage_header { margin-top:42.0pt; margin-left:180.0pt; font-size:20.0pt; color:#6B3948; font-weight:bold; border: 2px solid; padding: 10px; background: #C1ADB3; border-top-right-radius: 1em; } p.usage_header { margin-top:42.0pt; margin-bottom:0; font-size:20.0pt; color:#6B3948; font-weight:bold; border: 2px solid; padding: 10px; background: #C1ADB3; border-top-right-radius: 1em; } .usage { margin-top:0; line-height:150%; font-size:10.0pt; color:#44546A; border: 2px solid; padding: 10px; background: #ddd; border-bottom-left-radius: 1em; } .equiv { font-style:italic; margin-left:1em; } .cloze, .concept { color: #0055FF; } .green { color: #70AD47; font-size:10.0pt; } p.close_sentence { margin-bottom:6.0pt; font-size:15.0pt; padding: 10px; } .example_jp { margin-bottom:6.0pt; font-size:13.0pt; padding: 10px; } #textnotes { word-wrap: break-word; max-width: 700px; margin-top:2.0pt; margin-bottom:6.0pt; font-size:12.0pt; padding: 10px; } #notes { margin-top:1em; } img { width: auto; height: auto; max-width: 100%; max-height: none; } table td { padding:8px; font-size:11pt; } table { border-collapse:collapse; margin-top:2em; } tr.head { border-bottom:1px solid #bbbbbb!important; background-color:#f3f3f3; } .numbers { color: #7b2525; } Cloze: Front Template <div id="header"> {{volume}} {{page}} </div> <p class="close_sentence">{{close}}</p> <div id="usage_wrapper"> <div class="usage">{{usage}} <div class="equiv">{{equivalent}}</div></div> </div> Cloze: Back Template {{FrontSide}} <hr> {{#expression_jp}} <div class="example_jp"> {{expression_jp}} </div> {{hint:expression_en}} <div id="usage_wrapper"> <p class="usage_header">{{grammatical concept}} <div class="usage">{{usage}} <div class="equiv">{{equivalent}}</div></div> </div> {{#example 1_jp}} <div class="example_jp">{{example 1_jp}}</div> <div class="example_en">{{hint:example 1_en}}</div> {{/example 1_jp}} {{#example 2_jp}} <div class="example_jp">{{example 2_jp}}</div> <div class="example_en">{{hint:example 2_en}}</div> {{/example 2_jp}} {{#example 3_jp}} <div class="example_jp">{{example 3_jp}}</div> <div class="example_en">{{hint:example 3_en}}</div> {{/example 3_jp}} {{#example 4_jp}} <div class="example_jp">{{example 4_jp}}</div> <div class="example_en">{{hint:example 4_en}}</div> {{/example 4_jp}} {{#example 5_jp}} <div class="example_jp">{{example 5_jp}}</div> <div class="example_en">{{hint:example 5_en}}</div> {{/example 5_jp}} {{#example 6_jp}} <div class="example_jp">{{example 6_jp}}</div> <div class="example_en">{{hint:example 6_en}}</div> {{/example 6_jp}} {{#example 7_jp}} <div class="example_jp">{{example 7_jp}}</div> <div class="example_en">{{hint:example 1_en}}</div> {{/example 7_jp}} {{#example 8_jp}} <div class="example_jp">{{example 8_jp}}</div> <div class="example_en">{{hint:example 8_en}}</div> {{/example 8_jp}} {{#example 9_jp}} <div class="example_jp">{{example 9_jp}}</div> <div class="example_en">{{hint:example 9_en}}</div> {{/example 9_jp}} {{#example 10_jp}} <div class="example_jp">{{example 10_jp}}</div> <div class="example_en">{{hint:example 10_en}}</div> {{/example 10_jp}} {{#example 11_jp}} <div class="example_jp">{{example 11_jp}}</div> <div class="example_en">{{hint:example 11_en}}</div> {{/example 11_jp}} {{#example 12_jp}} <div class="example_jp">{{example 12_jp}}</div> <div class="example_en">{{hint:example 12_en}}</div> {{/example 12_jp}} {{#example 13_jp}} <div class="example_jp">{{example 13_jp}}</div> <div class="example_en">{{hint:example 13_en}}</div> {{/example 13_jp}} {{#example 14_jp}} <div class="example_jp">{{example 14_jp}}</div> <div class="example_en">{{hint:example 14_en}}</div> {{/example 14_jp}} {{#example 15_jp}} <div class="example_jp">{{example 15_jp}}</div> <div class="example_en">{{hint:example 15_en}}</div> {{/example 15_jp}} {{#formation}} <p id="formation_header">Formation</p> {{/formation}} <div id="formation"> {{formation}} </div> <div id="notes"> {{notes}} </div> Recogniton: Front Template <div id="header"> {{volume}} {{page}} </div> <p class="example"> {{#expression_jp}} {{expression_jp}}{{/expression_jp}} </p> {{#expression_en}}{{hint:expression_en}}{{/expression_en}} <div id="usage_wrapper"> <p class="usage_header">{{grammatical concept}} <div class="usage">{{usage}} <div class="equiv">{{equivalent}}</div></div> </div> Recogniton: Back Template {{FrontSide}} <hr> {{#example 1_jp}} <div class="example_jp">{{example 1_jp}}</div> <div class="example_en">{{hint:example 1_en}}</div> {{/example 1_jp}} {{#example 2_jp}} <div class="example_jp">{{example 2_jp}}</div> <div class="example_en">{{hint:example 2_en}}</div> {{/example 2_jp}} {{#example 3_jp}} <div class="example_jp">{{example 3_jp}}</div> <div class="example_en">{{hint:example 3_en}}</div> {{/example 3_jp}} {{#example 4_jp}} <div class="example_jp">{{example 4_jp}}</div> <div class="example_en">{{hint:example 4_en}}</div> {{/example 4_jp}} {{#example 5_jp}} <div class="example_jp">{{example 5_jp}}</div> <div class="example_en">{{hint:example 5_en}}</div> {{/example 5_jp}} {{#example 6_jp}} <div class="example_jp">{{example 6_jp}}</div> <div class="example_en">{{hint:example 6_en}}</div> {{/example 6_jp}} {{#example 7_jp}} <div class="example_jp">{{example 7_jp}}</div> <div class="example_en">{{hint:example 1_en}}</div> {{/example 7_jp}} {{#example 8_jp}} <div class="example_jp">{{example 8_jp}}</div> <div class="example_en">{{hint:example 8_en}}</div> {{/example 8_jp}} {{#example 9_jp}} <div class="example_jp">{{example 9_jp}}</div> <div class="example_en">{{hint:example 9_en}}</div> {{/example 9_jp}} {{#example 10_jp}} <div class="example_jp">{{example 10_jp}}</div> <div class="example_en">{{hint:example 10_en}}</div> {{/example 10_jp}} {{#example 11_jp}} <div class="example_jp">{{example 11_jp}}</div> <div class="example_en">{{hint:example 11_en}}</div> {{/example 11_jp}} {{#example 12_jp}} <div class="example_jp">{{example 12_jp}}</div> <div class="example_en">{{hint:example 12_en}}</div> {{/example 12_jp}} {{#example 13_jp}} <div class="example_jp">{{example 13_jp}}</div> <div class="example_en">{{hint:example 13_en}}</div> {{/example 13_jp}} {{#example 14_jp}} <div class="example_jp">{{example 14_jp}}</div> <div class="example_en">{{hint:example 14_en}}</div> {{/example 14_jp}} {{#example 15_jp}} <div class="example_jp">{{example 15_jp}}</div> <div class="example_en">{{hint:example 15_en}}</div> {{/example 15_jp}} {{#formation}} <p id="formation_header">Formation</p> {{/formation}} <div id="formation"> {{formation}} </div> <div id="notes"> {{notes}} </div>	Front Back	Front Back
Anon Random
Template/Styling	Preview (Recognition only)
Styling /* Change the fonts to suit your preference. I like VL PGothic for both. / @font-face { src: url('_VLPGothic.ttf'); font-family: jpfont; } @font-face { src: url('_VLPGothic.ttf'); font-family: engfont; } html { height: 100%; } .card { height: 100%; display: -webkit-box; -webkit-box-align: stretch; -webkit-box-pack: center; -webkit-box-orient: vertical; margin: 0; padding: 0; font-family: engfont; text-align: center; background-color: #fcfaf0; } .card.night_mode { background-color: #000; } #vol_and_page { color: #666; font-size: 80%; position: absolute; top: 0.5em; right: 0.5em; } .night_mode #vol_and_page { color: #ccc; } #concept { font-size: 140%; color: #6B3948; font-weight: bold; margin: 1.5em 0; } .night_mode #concept { color: #5566EE; } .example { position: relative; padding: 1em 0; margin: 1% 3% 1% 3%; border-radius: .3em; background-color: #fffff6; } .night_mode .example { background-color: #111; } .example .example_jp { font-size: 140%; font-family: jpfont; color: #346; } .night_mode .example .example_jp { color: #ccd; } .example .example_en { font-size: 110%; color: #343; padding: 0.2em; visibility: hidden; } .night_mode .example_en { color: #888; } .example:hover .example_en { visibility: visible; } / Put a marker on the key sentence/ #expression:after { content: "KS"; font-size: 60%; color: #aaaaaa; position: absolute; left: 1em; bottom: 0.5em; } .night_mode #expression:after { color: #555; } .cloze { color: #6B3948; } .night_mode .cloze { color: #5566EE; } #usage { padding: 3% 10%; margin: 3% 5%; color: #000; background-color: #fdffff; } .night_mode #usage { color: #efe; background-color: #151515; } #bookImage { margin-top: 2em; text-align: center; } .night_mode #bookImage { filter: invert(1); -webkit-filter:invert(1); } / Make better use of space when on mobile. / @media screen and (orientation:portrait) { .mobile #content { margin: 0; } .mobile .example { font-size: 85%; margin: 1% 0.5%; } } / This is so the usage box isn't at the very top when the card is flipped. It looks better if it's as far down as its padding. '/ #answer { position: relative; top: -1em; } / Hide the answer side if we're on the question side. / :not(#answerSide) > #questionSide #answerBox { display: none; } Recognition: Front Template <!-- Use this to assist in making changes: http://codepen.io/hssm/pen/rrrkpR --> <div id="questionSide"> <div id="vol_and_page">{{volume}} {{page}}</div> <div id="concept">{{grammatical concept}}</div> <!-- We fill this in with JavaScript --> <div id="questionBox"></div> <div id="answerBox"> <!-- Anchor to this on card flip --> <div id="answer"></div> <div id="usage">{{usage}}<p id="equiv">{{equivalent}}</p></div> {{#expression_jp}} <div class="example" id="expression"> <div class="example_jp">{{expression_jp}}</div> <div class="example_en">{{expression_en}}</div> </div> {{/expression_jp}} {{#example 1_jp}} <div class="example"> <div class="example_jp">{{example 1_jp}}</div> <div class="example_en">{{example 1_en}}</div> </div> {{/example 1_jp}} {{#example 2_jp}} <div class="example"> <div class="example_jp">{{example 2_jp}}</div> <div class="example_en">{{example 2_en}}</div> </div> {{/example 2_jp}} {{#example 3_jp}} <div class="example"> <div class="example_jp">{{example 3_jp}}</div> <div class="example_en">{{example 3_en}}</div> </div> {{/example 3_jp}} {{#example 4_jp}} <div class="example"> <div class="example_jp">{{example 4_jp}}</div> <div class="example_en">{{example 4_en}}</div> </div> {{/example 4_jp}} {{#example 5_jp}} <div class="example"> <div class="example_jp">{{example 5_jp}}</div> <div class="example_en">{{example 5_en}}</div> </div> {{/example 5_jp}} {{#example 6_jp}} <div class="example"> <div class="example_jp">{{example 6_jp}}</div> <div class="example_en">{{example 6_en}}</div> </div> {{/example 6_jp}} {{#example 7_jp}} <div class="example"> <div class="example_jp">{{example 7_jp}}</div> <div class="example_en">{{example 7_en}}</div> </div> {{/example 7_jp}} {{#example 8_jp}} <div class="example"> <div class="example_jp">{{example 8_jp}}</div> <div class="example_en">{{example 8_en}}</div> </div> {{/example 8_jp}} {{#example 9_jp}} <div class="example"> <div class="example_jp">{{example 9_jp}}</div> <div class="example_en">{{example 9_en}}</div> </div> {{/example 9_jp}} {{#example 10_jp}} <div class="example"> <div class="example_jp">{{example 10_jp}}</div> <div class="example_en">{{example 10_en}}</div> </div> {{/example 10_jp}} {{#example 11_jp}} <div class="example"> <div class="example_jp">{{example 11_jp}}</div> <div class="example_en">{{example 11_en}}</div> </div> {{/example 11_jp}} {{#example 12_jp}} <div class="example"> <div class="example_jp">{{example 12_jp}}</div> <div class="example_en">{{example 12_en}}</div> </div> {{/example 12_jp}} {{#example 13_jp}} <div class="example"> <div class="example_jp">{{example 13_jp}}</div> <div class="example_en">{{example 13_en}}</div> </div> {{/example 13_jp}} {{#example 14_jp}} <div class="example"> <div class="example_jp">{{example 14_jp}}</div> <div class="example_en">{{example 14_en}}</div> </div> {{/example 14_jp}} {{#example 15_jp}} <div class="example"> <div class="example_jp">{{example 15_jp}}</div> <div class="example_en">{{example 15_en}}</div> </div> {{/example 15_jp}} <div id="bookImage">{{notes}}</div> <script> // Make a mutable array of fields var fields = []; var nodes = document.getElementsByClassName("example"); for (i = 0; i < nodes.length; i++) { fields.push(nodes[i]); } var count = Math.floor(1 + (fields.length / 4)); // Here is some garbage for ensuring the random indices are // the same for each day and different for each card. // -- -- var oneDayInMs = 1000 60 * 60 * 24; var currentTimeInMs = new Date().getTime(); var timeInDays = Math.floor(currentTimeInMs / oneDayInMs); var numberForToday = timeInDays % 9999; // This should be """"random enough"""" var seed = numberForToday + fields[0].innerHTML.length; function random() { var x = Math.sin(seed++) * 10000; return x - Math.floor(x); } // -- End of garbage -- // Pluck out random examples and insert them in our question container var qBox = document.getElementById("questionBox"); for (i = 0; i < count; i++) { // Min:Max = 1:field.length-1 var r = Math.floor(random() * fields.length - 1) + 1; qBox.appendChild(fields[r]); fields.splice(r, 1); // Remove to avoid dupes } </script> </div> </div> Recogniton: Back Template <div id="answerSide"> {{FrontSide}} </div>	Front, Back, Night Mode