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>




Styling template:

/* 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;
}





Rear template:

<div id="answerSide">
{{FrontSide}}
</div>