<header>
  <h2>
    <label style="float:right">
      <input type="radio"  name="inverseQuestion" ng-value="true" ng-model="inverseQuestion"/>a>あ
    </label>
    <label style="float:right">
      <input type="radio" name="inverseQuestion" ng-value="false" ng-model="inverseQuestion"/>あ>a
    </label>      
    Memorize!</h2>
</header>
<section role="memory">
  <div>
  <button ng-bind-template="{{inverseQuestion | iif : box0.romaji : box0.symbol}}" class="box" disabled="true"></button>
  </div>
  <button 
    ng-click="onBoxSelection(box1)" 
    ng-bind-template="{{inverseQuestion | iif : box1.symbol : box1.romaji}}" 
    ng-class="{'box-wrong': box1.wrong, 'box-right': box1.right}" class="box"></button>
  
  <button 
    ng-click="onBoxSelection(box2)" 
    ng-bind-template="{{inverseQuestion | iif : box2.symbol : box2.romaji}}" 
    ng-class="{'box-wrong': box2.wrong, 'box-right': box2.right}" class="box"></button>
  
  <button ng-click="onBoxSelection(box3)" 
    ng-bind-template="{{inverseQuestion | iif : box3.symbol : box3.romaji}}" 
    ng-class="{'box-wrong': box3.wrong, 'box-right': box3.right}" class="box"></button>

  <button 
    ng-click="onBoxSelection(box4)" 
    ng-bind-template="{{inverseQuestion | iif : box4.symbol : box4.romaji}}" 
    ng-class="{'box-wrong': box4.wrong, 'box-right': box4.right}" class="box"></button>

  <button 
    ng-click="onBoxSelection(box5)" 
    ng-bind-template="{{inverseQuestion | iif : box5.symbol : box5.romaji}}" 
    ng-class="{'box-wrong': box5.wrong, 'box-right': box5.right}" class="box"></button>

</section>
<section role="status">
  <p id="caption" class="small" ng-bind-template="{{box0.caption}}"></p>
  <p>
    right: <span class="right" ng-bind-template="{{trainingStatistics.right}}"></span> 
    wrong: <span class="wrong" ng-bind-template="{{trainingStatistics.wrong}}"></span> 
    (<span ng-bind-template="{{trainingStatistics.score}}"></span>%) 
    &nbsp;&nbsp;<button ng-click="onResetSession()">reset</button>
  </p>
</section>
