<!--
  Generated template for the Extqa 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-navbar>

</ion-header>


<ion-content padding class="extqa-page">

    <ion-card class="question-card">
        <ion-card-content class="question-content">
            <p>
                問題  {{qa1.qaId+1}}　/　全  {{qaList.length}}  問
            </p>
            <font size="5" [innerHTML] = "qa1.questionString"></font>

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

        </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>
                {{qa1.choicesString[choice]}}
            </button>
        </p>

        <ion-buttons end padding class="question-button">
            <button ion-button icon-left (click)="openAnswer()" [disabled]="buttonDisabled">
                <ion-icon name="checkmark"></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>解答</p>
            <font size="5" [innerHTML] = "qa1.answerString"></font>
            <br /><br />
            <img src="assets/img/exta/{{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>