<!--
  Generated template for the Qa page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
    <ion-navbar color="primary">
        <ion-title>{{title}}</ion-title>

        <ion-buttons end>
          <button ion-button icon-left (click)="backToTop()">
            <ion-icon name="home"></ion-icon>
              <div class="qa-header">Top</div>
          </button>
        </ion-buttons>

    </ion-navbar>
</ion-header>

<ion-content padding class="qa-page">
    <ion-card class="question-card">
        <ion-card-content class="question-content">
            <ion-row>
                <ion-col>
                    <p>
                        問題  {{index+1}}　/　全  {{qaList.length}}  問
                    </p>
                </ion-col>
                <ion-col text-right>
                    <ion-badge *ngIf="qaInfoList[index] != null && qaInfoList[index].positiveFlg == 1">
                    過去の結果：正解
                    </ion-badge>
                    <ion-badge *ngIf="qaInfoList[index] != null && qaInfoList[index].positiveFlg == 0">
                    過去の結果：不正解
                    </ion-badge>
                    <ion-badge *ngIf="qaInfoList[index] != null && qaInfoList[index].positiveFlg == 2">
                    過去の結果：未解答
                    </ion-badge>
                </ion-col>
            </ion-row>
            <br />
            <font size=4 [innerHTML] = "qa1.questionString"></font>
            <br /><br />

            <img src="assets/img/q/{{qa1.questionImage}}" *ngIf="qa1.questionImage != ''" />
            <br />

            <ion-row *ngFor="let choice of qa1.choicesId">
                <ion-col col-auto><font size=4 [innerHTML] = "selection[choice] + '.'"></font></ion-col>
                <ion-col><font size=3 [innerHTML] = "qa1.choicesString[choice]"></font></ion-col>
            </ion-row>

        </ion-card-content>
        <br /><br />
        <p *ngFor="let choice of qa1.choicesId">
            <button ion-button full color="secondary" (click)="itemSelected(choice)" [outline]="selectstate[choice]" [disabled]="buttonDisabled" large>
                {{selection[choice]}}
            </button>
        </p>

        <ion-buttons end padding class="question-button">
            <button ion-button icon-left (click)="openAnswer(0)" [disabled]="buttonDisabled">
                <ion-icon name="redo"></ion-icon>
                解説へ
            </button>
        </ion-buttons>
    </ion-card>

    <ion-card *ngIf="buttonDisabled" class="answer-card">
        <ion-card-content class="answer-content">
            <ion-grid>
                <ion-row align-items-center>
                    <ion-col>
                        <img src="assets/img/ok.png" *ngIf="result == '正解'">
                        <img src="assets/img/ng.png" *ngIf="result == '不正解'">
                    </ion-col>
                    <ion-col col-auto><font size=5 [innerHTML] = "result" [color]="result != '正解' ? 'blue' : 'red'"></font></ion-col>
                    <ion-col>
                    </ion-col>
                </ion-row>
            </ion-grid>

            <p><br>正解：<font size=5 [innerHTML] = "selection[qa1.answerId]"></font></p>
            <br /><br />
            <font size=4 [innerHTML] = "qa1.answerString"></font>
            <br /><br />
            <img src="assets/img/a/{{qa1.answerImage}}" *ngIf="qa1.answerImage != ''" />
        </ion-card-content>

        <ion-buttons end padding class="answer-button">
            <button ion-button *ngIf="index < (qaList.length-1)" color="dark" icon-left (click)="goToNext()">
                <ion-icon name="arrow-forward"></ion-icon>
                次の問題
            </button>
            <button ion-button *ngIf="index >= (qaList.length-1)" color="dark" icon-left (click)="backToUnit()">
                <ion-icon name="done-all"></ion-icon>
                終了
            </button>
        </ion-buttons>
    </ion-card>
</ion-content>

<ion-footer>
  <ion-toolbar color="primary">

    <ion-buttons >
      <button ion-button icon-left (click)="goToPrev()" *ngIf="index > 0">
        <ion-icon name="skip-backward"></ion-icon>
          戻る
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button icon-right (click)="goToNext()" *ngIf="index < (qaList.length-1)">
          進む
        <ion-icon name="skip-forward"></ion-icon>
      </button>
    </ion-buttons>

  </ion-toolbar>
</ion-footer>