<!--测试页面-->
<ion-header>

    <ion-navbar>
        <ion-title>学习测试</ion-title>
    </ion-navbar>

</ion-header>


<ion-content>
    <div class="main-container">
        <img class="bgc" src="./assets/imgs/learn/learning_background.png">
        <ion-slides (ionSlideDidChange)="slideChanged()">
            <ion-slide *ngFor="let item of list;let i = index;">
                <div class="learn-item">
                    <div class="learn-title">{{title}}</div>
                    <div class="item-container">
                        <div class="item-title">
                            <!--判断题目类型-->
                            <p>
                                <span class="color-red" *ngIf="item.isAns == 1">*</span>{{i +1}}、
                                <span *ngIf="item.questionType == 1">(单选)</span>
                                <span *ngIf="item.questionType == 2">(多选)</span>
                                <span *ngIf="item.questionType == 3">(填空)</span>
                                <span *ngIf="item.questionType == 4">(判断)</span>
                                <span *ngIf="item.questionType == 5">(问答)</span>
                                {{item.questionContent}}
                            </p>
                        </div>
                        <div class="item-content">
                            <div class="padding-0-20">
                                <!--单选题-->
                                <ng-container *ngIf="item.questionType == 1">
                                    <ng-container *ngFor=" let option1 of item.options;let optIndex = index;">
                                        <p>
                                            <label>
                                                <input [(ngModel)]="item.answer" type="radio" [value]="option1.option" [name]="item.questionId">
                                                <span class=" selectIndex">{{optIndex +1 | charCode}}</span>&nbsp;&nbsp;
                                                {{option1.comment}}
                                            </label>
                                        </p>
                                    </ng-container>
                                </ng-container>
                                <!--多选题-->
                                <ng-container *ngIf="item.questionType == 2">
                                    <ng-container *ngFor=" let option2 of item.options;let quesIndex = index;">
                                        <p>
                                            <label>
                                                <input type="checkbox" (change)="mutiSelect(i,option2.option)" [value]="quesIndex" [name]="item.questionId">
                                                <span class="input-duox selectIndex">{{quesIndex +1 | charCode}}</span>&nbsp;&nbsp;
                                                {{option2.comment}}
                                            </label>
                                        </p>
                                    </ng-container>
                                </ng-container>
                                <!--填空-->
                                <ng-container *ngIf="item.questionType == 3">
                                    <textarea [(ngModel)]="item.answer" class="content-textarea"></textarea>
                                </ng-container>
                                <!--判断题-->
                                <ng-container *ngIf="item.questionType == 4">
                                    <p>
                                        <label>
                                            <input [(ngModel)]="item.answer" [name]="item.questionId" value="1" type="radio">
                                            <span class=" selectIndex">A</span>&nbsp;&nbsp;
                                            是
                                        </label>
                                    </p>
                                    <p>
                                        <label>
                                            <input [(ngModel)]="item.answer" [name]="item.questionId" value="0" type="radio">
                                            <span class=" selectIndex">B</span>&nbsp;&nbsp;
                                            否
                                        </label>
                                    </p>
                                </ng-container>
                                <!--问答-->
                                <ng-container *ngIf="item.questionType == 5">
                                    <textarea [(ngModel)]="item.answer" class="content-textarea"></textarea>
                                </ng-container>
                            </div>
                        </div>
                    </div>
                </div>
            </ion-slide>
        </ion-slides>
        <div class=" button-error">
            <button (click)="error = true;" class="submit-error">我要纠错</button>
        </div>
    </div>
    <div class="footer-subject">
        <div (click)="prev()" class="prev">上一题</div>
        <div class="index">{{index +1}} / {{list.length}}</div>
        <div (click)="next()" class="next">下一题</div>
    </div>
    <div class="footer-submit">
        <div class="time">{{timeText}}</div>
        <div class="submit" (click)="handleSubmit()">
            <span>交卷</span>
        </div>
    </div>

    <div class="error-text" *ngIf="error">
        <div class="error-flex">
            <div class="error-title">纠错内容</div>
            <div class="padding-10">
                 <textarea [(ngModel)]="errorContent" class="content-textarea"></textarea>
            </div>
            <div class="error-footer">
                <ion-row>
                    <ion-col col-6>
                        <button (click)="sure()" class="sure">确定</button>
                    </ion-col>
                    <ion-col col-6>
                        <button (click)="cancel()" class="cancel">取消</button>
                    </ion-col>
                </ion-row>
            </div>
        </div>
    </div>
</ion-content>
