<header>
  <h2>Draw with your finger.</h2>
</header>
<section role="draw" style="position:relative">
  <canvas id="bgcanvas"> </canvas>
  <p ng-bind-template="write {{currentCharacter.romaji}} in {{currentCharacter.type}}" style="position: absolute; top: 0px; width: 100%; text-align: center;"></p>
  <canvas id="canvas" data-ng-init="init()"> </canvas>
</section>
<section role="status">
  <p id="caption" class="small" ng-bind-template="{{currentCharacter.caption}}"></p>
  <p id="buttonbar">
    <button class="wrong" style="min-width: 9rem" ng-click="onMarkWrong()" ng-show="answerShowing">wrong</button>
    <button               style="min-width: 9rem" ng-click="onDone()" ng-bind-template="{{answerShowing | iif : 'skip':'done'}}"></button>
    <button class="right" style="min-width: 9rem" ng-click="onMarkRight()" ng-show="answerShowing">right</button>
  </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>

