app-自测练习

parth5/parth5/src/app/app.scss

@@ -524,3 +524,10 @@ ion-list {
     left: 0;
   }
 }
+.testresult-modal {
+  .modal-wrapper {
+    height: 45% !important;
+    width: 80% !important;
+    border-radius: 8px;
+  }
+}

parth5/parth5/src/app/views/pages/examtest/examtest.component.html

@@ -18,31 +18,35 @@
           <ion-icon name="grid-outline"></ion-icon>
         </div>
       </ion-item>
-      <ion-item button detail="true" detail-icon="close-outline"  *ngFor="let qt of selectLibaryList;" (click)="remove(qt,false)">
+      <ion-item button detail="true" detail-icon="close-outline" *ngFor="let qt of selectLibaryList;"
+                (click)="remove(qt,false)">
         <ion-label>
           <h3> {{ qt.name }}</h3>
         </ion-label>
       </ion-item>
-    <!--  <span *ngFor="let qt of selectLibaryList;" style="text-wrap: nowrap;">
-                <ion-col size="2">  {{ qt.name }}
-                  <ion-icon name="close-outline" (click)="remove(qt,false)"></ion-icon></ion-col>
-      </span>-->
+      <!--  <span *ngFor="let qt of selectLibaryList;" style="text-wrap: nowrap;">
+                  <ion-col size="2">  {{ qt.name }}
+                    <ion-icon name="close-outline" (click)="remove(qt,false)"></ion-icon></ion-col>
+        </span>-->
       <ion-item mode="md">
         <ion-label>选择题型
           <span class="danger">*</span>
         </ion-label>
       </ion-item>
-      <span *ngFor="let qt of questionTypeList;" style="text-wrap: nowrap;">
-            <ion-col size="1">
-              <ion-checkbox color="danger" labelPlacement="end"
-                            (click)="qt.checked=!qt.checked"></ion-checkbox></ion-col>
-            <ion-col size="2">  {{ qt.name }}</ion-col>
-      </span>
+      <div style="display: flex;justify-content: space-evenly">
+        <ng-container *ngFor="let qt of questionTypeList;">
+        <span>
+          <ion-checkbox color="danger" labelPlacement="end"
+                        (click)="qt.checked=!qt.checked"></ion-checkbox>
+          {{ qt.name }}
+        </span>
+        </ng-container>
+      </div>
       <ion-item mode="md">
         <ion-label>题目数量
           <span class="danger">*</span>
         </ion-label>
-        <ion-input type="number" [(ngModel)]="questionnumber" name ="questionnumber" required></ion-input>
+        <ion-input type="number" [(ngModel)]="questionnumber" name="questionnumber" required></ion-input>
       </ion-item>
       <div style="display:flex;align-items: center;margin-top: 10px">
         <ion-icon name="alert-outline" size="small"></ion-icon>

parth5/parth5/src/app/views/pages/examtest/show/card/card.component.html

@@ -1,10 +1,15 @@
-<ion-header color="danger" style="text-align: center">
-  共{{ doneQuestionNumber + unNumber }}道题
+<ion-header class="header-theme2" id="main-content">
+  <ion-toolbar>
+    <ion-title>
+      共{{ doneQuestionNumber + unNumber }}道题
+    </ion-title>
+  </ion-toolbar>
 </ion-header>
 <ion-content>
   <ion-list>
     <div class="card-body">
       <div class="card-total">
+        客观题：
         <div>
           <ion-icon name="ellipse-outline" style="color: deepskyblue;vertical-align: middle;"></ion-icon>
           正确{{ rightNumber }}道
@@ -23,7 +28,10 @@
         <div class="question-num">
           <div *ngFor="let ques of it.question"
                (click)="selectQuestion(ques)"
-               [ngClass]="{'rightColor':ques.isRight,'unColor':ques.isRight==null,'errColor':ques.isRight==false}">
+               [ngClass]="{'rightColor':ques.isRight
+               ,'unColor':ques.isAnswer==null
+               ,'errColor':ques.isRight==false
+               ,'answerColor':ques.isAnswer&&ques.isRight==null}">
             {{ ques.order }}</div>
         </div>
       </div>

parth5/parth5/src/app/views/pages/examtest/show/card/card.component.scss

@@ -4,6 +4,8 @@
 .card-total{
   display: flex;
   flex-wrap: nowrap;
+  border-bottom: 1px solid #5e5c5c52;
+  padding-bottom: 10px;
 
   div{
     margin-right: 10px;
@@ -40,3 +42,6 @@
 .errColor{
   border: 2px solid red !important;
 }
+.answerColor{
+  border: 2px solid #00ff00 !important;
+}

parth5/parth5/src/app/views/pages/examtest/show/card/card.component.ts

@@ -24,8 +24,6 @@ export class CardComponent implements OnInit {
   ngOnInit() {
     this.autoReaderPaper().then(() => {
       this.getDoneNum();
-      this.unNumber = this.testQuestionList.length - this.doneQuestionNumber;
-      this.errNumber = this.testQuestionList.length - this.unNumber - this.rightNumber;
 
       this.getQuestionTypeList().then(()=>{
         this.questionTypeList = this.questionTypeList.sort((a, b) => a.diplayOrder - b.diplayOrder);
@@ -64,6 +62,10 @@ export class CardComponent implements OnInit {
           this.rightNumber = data.item.filter(function (x) {
             return x.isRight;
           }).length;
+          this.errNumber = data.item.filter(function (x) {
+            return x.isRight==false;
+          }).length;
+          this.unNumber =this.testQuestionList.length - data.item.filter(x => x.isAnswer).length;
         }
         resolve();
       });

parth5/parth5/src/app/views/pages/examtest/show/result/result.component.html

@@ -0,0 +1,22 @@
+<ion-header class="header-theme2" id="main-content">
+  <ion-toolbar>
+    <ion-title>
+      练习结果
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div class="card" style="margin-top: 10px;padding-bottom: 20px;">
+    <div class="result-body">
+      <div class="result-title">你已结束本次个人练习 </div>
+      <div class="result-correctrate">客观题的正确率：{{rightRate}}% </div>
+      <div class="result-questionnum">客观题正确题数：{{rightNumber}}题 </div>
+      <div class="result-questionnum">客观题错误题数：{{errNumber}}题 </div>
+      <div class="result-questionnum">客观题总题数：{{subjectiveCount}}题</div>
+      <div>
+        <ion-button size="small" slot="end" *ngIf="rightRate<100" (click)="dismiss(1);">查看错题</ion-button>
+        <ion-button size="small" slot="end" color="warning" (click)="dismiss(2)">结束考试</ion-button>
+      </div>
+    </div>
+  </div>
+</ion-content>

parth5/parth5/src/app/views/pages/examtest/show/result/result.component.scss

@@ -0,0 +1,15 @@
+.result-body{
+  display: flex;
+  flex-flow: column;
+  align-content: center;
+  justify-items: center;
+  font-size: 15px;
+  text-align: center;
+}
+.result-body >div{
+  padding: 10px 0px;
+}
+.result-body >.result-title{
+  font-size: 18px;
+  font-weight: bold;
+}

parth5/parth5/src/app/views/pages/examtest/show/result/result.component.ts

@@ -0,0 +1,70 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ConfigService, RequsetData} from "../../../../../service/config.service";
+import {ModalController} from "@ionic/angular";
+
+@Component({
+  selector: 'app-result',
+  templateUrl: './result.component.html',
+  styleUrls: ['./result.component.scss'],
+})
+export class ResultComponent implements OnInit {
+
+  @Input()
+  testQuestionList = [];
+  rightNumber = 0;
+  doneQuestionNumber = 0;
+  unNumber = 0;
+  errNumber = 0;
+  rightRate = 0;
+  subjectiveCount = 0;
+
+  constructor(private configService: ConfigService, public modalController: ModalController) {
+  }
+
+  ngOnInit() {
+    this.autoReaderPaper().then(() => {
+      this.getDoneNum();
+
+      this.subjectiveCount = this.testQuestionList.filter(function (type) {
+        return type.OBJECTIVE_TYPE == 2
+      }).length;
+      this.rightRate = this.rightNumber>0?Math.round(this.rightNumber / (this.rightNumber + this.errNumber) * 100):0;
+    })
+  }
+
+  //阅卷
+  autoReaderPaper() {
+    let pm = new Promise((resolve, reject) => {
+      this.configService.HttpPostRomote('/api/examtest/autoReaderPaper', {userQuestionList: this.testQuestionList,}).subscribe((data: RequsetData) => {
+        if (data.success) {
+          this.testQuestionList = data.item;
+          this.rightNumber = data.item.filter(function (x) {
+            return x.isRight;
+          }).length;
+          this.errNumber = data.item.filter(function (x) {
+            return x.isRight == false;
+          }).length;
+          this.unNumber = this.testQuestionList.length - data.item.filter(x => x.isAnswer).length;
+        }
+        resolve();
+      });
+    });
+    return pm;
+  }
+
+  getDoneNum() {
+    this.doneQuestionNumber = this.testQuestionList.filter(function (ques) {
+      return (ques.useranswer != null && ques.useranswer != "") || ques.ANSWERS.filter(function (ans) {
+        return ans.useranswer != null && ans.useranswer != ""
+      }).length > 0;
+    }).length;
+  }
+
+  dismiss(action) {
+    this.modalController.dismiss({
+      'dismissed': true,
+      'action': action,
+      'testQuestionList': this.testQuestionList
+    });
+  }
+}

parth5/parth5/src/app/views/pages/examtest/show/show.component.html

@@ -13,9 +13,6 @@
       <div [ngSwitch]="ques.NAME">
         <div *ngSwitchCase="'单选题'">
           <span class="ion-text-wrap">{{ ques.order }}.({{ ques.NAME }}){{ ques.CONTENT }}</span>
-          <div style="width: 100%;text-align: right;color:red;" (click)="ques.showAnswer=true">
-            <ion-icon name="checkbox-outline" size="large"></ion-icon>
-          </div>
           <div [class]="{'isright-answer':ans.ISRIGHT&&ques.showAnswer}"
                *ngFor="let ans of ques.ANSWERS;let $index = index">
             <input name="rd_p_{{ques.row_num}}_{{$index}}" type="radio" [(ngModel)]="ques.useranswer"
@@ -26,25 +23,24 @@
           </div>
         </div>
         <div *ngSwitchCase="'填空题'">
-          <div style="width: 100%;text-align: right;color:red;" (click)="ques.showAnswer=true">
-            <ion-icon name="checkbox-outline" size="large"></ion-icon>
-          </div>
           <div class="input-container">
             {{ ques.order }}.({{ ques.NAME }})
             <ng-container *ngFor="let word of ques.CONTENT.split('___'); let j = index">
               {{ word }}
               <!-- 如果当前是句子中的最后一个词前的下划线，则不添加输入框 -->
               <ng-container *ngIf="j < ques.CONTENT.split('___').length - 1">
-                <ion-input [(ngModel)]="ques.ANSWERS[j].useranswer" placeholder="请输入" (ngModelChange)="answer(ques)"></ion-input>
+                <ion-input [(ngModel)]="ques.ANSWERS[j].useranswer" placeholder="请输入"
+                           (ngModelChange)="answer(ques)"></ion-input>
               </ng-container>
             </ng-container>
           </div>
         </div>
         <div *ngSwitchCase="'判断题'">
-          <span class="ion-text-wrap">{{ ques.order}}.({{ ques.NAME }}){{ ques.CONTENT }}</span>
+          <span class="ion-text-wrap">{{ ques.order }}.({{ ques.NAME }}){{ ques.CONTENT }}</span>
           <div [class]="{'isright-answer':ans.ISRIGHT&&ques.showAnswer}"
                *ngFor="let ans of ques.ANSWERS;let $index = index">
-            <input name="rd_p_{{ques.row_num}}_{{$index}}" type="radio" [(ngModel)]="ques.useranswer" (ngModelChange)="answer(ques)"
+            <input name="rd_p_{{ques.row_num}}_{{$index}}" type="radio" [(ngModel)]="ques.useranswer"
+                   (ngModelChange)="answer(ques)"
                    value="{{ans.PROVID_ANSWER_ID}}"
                    class="with-gap" id="rd_p_{{ques.row_num}}_{{$index}}"/>
             <label for="rd_p_{{ques.row_num}}_{{$index}}">{{ options($index) }}、{{ ans.ANSWER_NAME }}</label>
@@ -61,12 +57,10 @@
         </div>
         <div *ngSwitchCase="'多选题'">
           <span class="ion-text-wrap">{{ ques.order }}.({{ ques.NAME }}){{ ques.CONTENT }}</span>
-          <div style="width: 100%;text-align: right;color:red;" (click)="ques.showAnswer=true">
-            <ion-icon name="checkbox-outline" size="large"></ion-icon>
-          </div>
           <div [class]="{'isright-answer':ans.ISRIGHT&&ques.showAnswer}"
                *ngFor="let ans of ques.ANSWERS;let $index = index">
-            <input name="ckb_{{ques.row_num}}_{{$index}}" type="checkbox" [(ngModel)]="ans.useranswer" (ngModelChange)="answer(ques)"
+            <input name="ckb_{{ques.row_num}}_{{$index}}" type="checkbox" [(ngModel)]="ans.useranswer"
+                   (ngModelChange)="answer(ques)"
                    value="{{ans.PROVID_ANSWER_ID}}"
                    class="with-gap" id="ckb_{{ques.row_num}}_{{$index}}"/>
             <label for="ckb_{{ques.row_num}}_{{$index}}">{{ options($index) }}、{{ ans.ANSWER_NAME }}</label>
@@ -81,15 +75,23 @@
 </ion-content>
 <ion-footer>
   <ion-toolbar style="display: flex;align-items: center">
-    <ion-icon (click)="presentModal()" name="reorder-four-outline" style="color: red;vertical-align: middle;"
-              size="large"
-              aria-label="Favorite"></ion-icon>
-    <span>已答{{ answerCount }}/{{ questionCount }}</span>
-    <ion-button size="small" slot="end" *ngIf="order>1" (click)="order=order-1;changeView();">
-      上一题
-    </ion-button>
-    <ion-button size="small" slot="end" *ngIf="questionCount>order" (click)="order=order+1;changeView();">
-      下一题
-    </ion-button>
+    <ng-container *ngIf="!showErrorQuestion">
+      <ion-icon (click)="presentModal()" name="reorder-four-outline" style="color: red;vertical-align: middle;"
+                size="large"
+                aria-label="Favorite"></ion-icon>
+      <span>已答{{ answerCount }}/{{ questionCount }}</span>
+      <ion-icon slot="end" name="checkbox-outline" size="large" (click)="showAnswer()"></ion-icon>
+      <ion-button size="small" slot="end" *ngIf="order>1" (click)="order=order-1;changeView();">
+        上一题
+      </ion-button>
+      <ion-button size="small" slot="end" *ngIf="questionCount>order" (click)="order=order+1;changeView();">
+        下一题
+      </ion-button>
+      <ion-button size="small" slot="end" color="warning" (click)="resultModal()">结束练习</ion-button>
+    </ng-container>
+    <ng-container *ngIf="showErrorQuestion">
+      <ion-icon slot="end" name="checkbox-outline" size="large" (click)="showAnswer()"></ion-icon>
+      <ion-button size="small" slot="end" color="warning" (click)="close()">退出练习</ion-button>
+    </ng-container>
   </ion-toolbar>
 </ion-footer>

parth5/parth5/src/app/views/pages/examtest/show/show.component.scss

@@ -4,6 +4,9 @@
 
 .question-body {
   margin: 10px;
+  div{
+    margin-top: 10px;
+  }
 }
 
 .question-body ion-input {

parth5/parth5/src/app/views/pages/examtest/show/show.component.ts

@@ -3,6 +3,7 @@ import {ConfigService, RequsetData} from "../../../../service/config.service";
 import {AlertController, ModalController, MenuController} from "@ionic/angular";
 import {ActivatedRoute, Router} from "@angular/router";
 import {CardComponent} from "./card/card.component";
+import {ResultComponent} from "./result/result.component";
 
 @Component({
   selector: 'app-show',
@@ -18,6 +19,7 @@ export class ShowComponent implements OnInit {
   curQuestionList = [];
   questionCount = 0;
   answerCount = 0;
+  showErrorQuestion =false;
 
 
   constructor(private modalController: ModalController, public alertController: AlertController, private menu: MenuController, private router: Router, private configService: ConfigService, private routeInfo: ActivatedRoute) {
@@ -72,8 +74,17 @@ export class ShowComponent implements OnInit {
     this.answerCount = this.testQuestionList.filter(x => x.isAnswer).length;
   }
 
-  async presentModal() {
+  showAnswer() {
+    this.curQuestionList.forEach(x => x.showAnswer = true);
+  }
+  close(){
+    this.router.navigate(['../'], {
+      relativeTo: this.routeInfo,
+      queryParams: {id: 'id', random: Math.random()}
+    });
+  }
 
+  async presentModal() {
     const modal = await this.modalController.create({
       component: CardComponent,
       cssClass: 'examtest-modal',
@@ -85,9 +96,31 @@ export class ShowComponent implements OnInit {
 
     const {data} = await modal.onWillDismiss();
 
-    if (data.dismissed) {
+    if (data!=undefined&&data.dismissed) {
       this.order = data.order;
       this.changeView();
     }
   }
+
+  async resultModal() {
+    const modal = await this.modalController.create({
+      component: ResultComponent,
+      cssClass: 'testresult-modal',
+      componentProps: {
+        'testQuestionList': this.testQuestionList
+      }
+    });
+    await modal.present();
+
+    const {data} = await modal.onWillDismiss();
+
+    if (data!=undefined&&data.dismissed) {
+      if (data.action == 1) {
+        this.showErrorQuestion=true;
+        this.curQuestionList = data.testQuestionList.filter(x => x.OBJECTIVE_TYPE == 2 && x.isRight == false);
+      } else {
+        this.close();
+      }
+    }
+  }
 }

parth5/parth5/src/app/views/tapp/tabs/tabs.module.ts

@@ -58,6 +58,7 @@ import {routes as MainRoutes} from "../tab-main/tab-main.route";
 import {routes as StudyRoutes} from "../tab-study/tab-study.route";
 import {routes as UserRoutes} from "../tab-user/tab-user.route";
 import {CardComponent} from "../../pages/examtest/show/card/card.component";
+import {ResultComponent} from "../../pages/examtest/show/result/result.component";
 
 import { ExamtestComponent} from "../../pages/examtest/examtest.component";
 import {ShowComponent as ExamtestShowComponent} from "../../pages/examtest/show/show.component";
@@ -90,7 +91,8 @@ const pageComponents = [
   PartyUserRewardComponent,
   ExamtestComponent,
   ExamtestShowComponent,
-  CardComponent
+  CardComponent,
+  ResultComponent
 ];
 
 const pubComponents = [