app-自测练习

parth5/parth5/src/app/routes/exam.ts

@@ -1,8 +1,10 @@
 import {Routes} from "@angular/router";
 import {ExamtestComponent} from "../views/pages/examtest/examtest.component";
+import {ShowComponent} from "../views/pages/examtest/show/show.component";
 
 const routes: Routes = [
-  {path: 'exam/examtest', component: ExamtestComponent,},
+  {path: 'exam/examtest', component: ExamtestComponent},
+  {path: 'exam/examtest/show', component: ShowComponent},
 ];
 
 export default routes;

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

@@ -18,9 +18,15 @@
           <ion-icon name="grid-outline"></ion-icon>
         </div>
       </ion-item>
-      <span *ngFor="let qt of selectLibaryList;" style="text-wrap: nowrap;">
-                <ion-col size="2">  {{ qt.name }}</ion-col>
-      </span>
+      <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>-->
       <ion-item mode="md">
         <ion-label>选择题型
           <span class="danger">*</span>
@@ -36,7 +42,7 @@
         <ion-label>题目数量
           <span class="danger">*</span>
         </ion-label>
-        <ion-input type="number" placeholder="00" 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>
@@ -69,15 +75,18 @@
       <ion-item *ngFor="let it of typeList">
         <ion-label (click)="ShowKidsFileType(it)" [class]="{'filetype-selected':selectedItem(it)}">{{ it.name }}
         </ion-label>
-        <ion-checkbox *ngIf="!it.checked" color="danger" labelPlacement="end" (click)="checkedChange(it,true)"></ion-checkbox>
-        <ion-icon *ngIf="it.checked" (click)="checkedChange(it,false)" name="checkmark-outline" color="primary"></ion-icon>
+        <ion-checkbox *ngIf="!it.checked" color="danger" labelPlacement="end"
+                      (click)="checkedChange(it,true)"></ion-checkbox>
+        <ion-icon *ngIf="it.checked" (click)="checkedChange(it,false)" name="checkmark-outline"
+                  color="primary"></ion-icon>
         <ion-icon (click)="ShowKidsFileType(it)" [hidden]="it.childList==0" name="chevron-forward-outline"
                   slot="end"></ion-icon>
       </ion-item>
       <div style="margin-left: 10px;">
-      <ion-label >已选题库: </ion-label>
-      <span *ngFor="let qt of bakLibaryList;" style="text-wrap: nowrap;">
-                <ion-col size="2">  {{ qt.name }}</ion-col>
+        <ion-label>已选题库:</ion-label>
+        <span *ngFor="let qt of bakLibaryList;" style="text-wrap: nowrap;">
+                <ion-col size="2">  {{ qt.name }}
+                  <ion-icon name="close-outline" (click)="remove(qt,true)"></ion-icon></ion-col>
           </span>
       </div>
     </ion-list>

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

@@ -12,7 +12,9 @@ export class ExamtestComponent implements OnInit {
 
   getDataUrl = '/api/exammanage/questiontypeSetting/getList';
   getLibaryUrl = '/api/exampaper/getLibaryTree';
+
   questionTypeList: any = [];
+  questionnumber = null;
   fileTypeData: any = {
     title: '所有题库',
     pSelectedName: '所有题库',
@@ -24,9 +26,9 @@ export class ExamtestComponent implements OnInit {
   libaryTree = [];
   typeList: any[] = [];
   selectLibaryList = [];
-  bakLibaryList=[];
+  bakLibaryList = [];
 
-  constructor(private menu: MenuController, private router: Router, private configService: ConfigService, private routeInfo: ActivatedRoute) {
+  constructor(public alertController: AlertController, private menu: MenuController, private router: Router, private configService: ConfigService, private routeInfo: ActivatedRoute) {
   }
 
   ngOnInit() {
@@ -126,6 +128,26 @@ export class ExamtestComponent implements OnInit {
     }
   }
 
+  remove(it, isBak) {
+    this.bakLibaryList = this.bakLibaryList.filter(x => x.id != it.id);
+    if (!isBak) {
+      this.selectLibaryList = this.selectLibaryList.filter(x => x.id != it.id);
+    }
+    this.checkedLibaryTree(this.libaryTree, it.id, false);
+  }
+
+  checkedLibaryTree(treeList: any[], id: String, checked: boolean) {
+    treeList.forEach((item: any) => {
+      if (item.id == id) {
+        item.checked = checked;
+        return;
+      }
+      if (item.childList.length > 0) {
+        this.checkedLibaryTree(item.childList, id, checked);
+      }
+    })
+  }
+
   eachLibaryTree(treeList: any[]) {
     treeList.forEach((item: any) => {
       if (item.checked) {
@@ -137,7 +159,40 @@ export class ExamtestComponent implements OnInit {
     })
   }
 
+
+
   entryTest() {
 
+    var labaryidList = this.selectLibaryList.map(x => x.id);
+    var quesTypeIdList = this.questionTypeList.filter(x => x.checked).map(x => x.baseQuestionTypeId);
+
+    if (labaryidList.length == 0) {
+      this.presentAlert("请选择题库");
+      return;
+    }
+    if (quesTypeIdList.length == 0) {
+      this.presentAlert("请选择试题类型");
+      return;
+    }
+    localStorage.setItem('testSettings', JSON.stringify({
+      labaryidList: labaryidList,
+      typeList: quesTypeIdList,
+      questionnumber: this.questionnumber
+    }));
+    this.router.navigate(['show'], {
+      relativeTo: this.routeInfo,
+      queryParams: {id: 'id', random: Math.random()}
+    });
+  }
+
+  async presentAlert(msg: string) {
+    const alert = await this.alertController.create({
+      header: '提示',
+      subHeader: '',
+      message: msg,
+      buttons: ['确定']
+    });
+
+    await alert.present();
   }
 }

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

@@ -0,0 +1,143 @@
+<ion-header class="header-theme2" id="main-content">
+  <ion-toolbar>
+    <ion-label class="title-center">自测练习</ion-label>
+    <ion-buttons slot="start">
+      <ion-back-button icon="ios-back2" text="" mode="md"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-list>
+    <div class="question-body" *ngFor="let ques of testQuestionList;let i = index">
+
+      <div [ngSwitch]="ques.NAME">
+        <div *ngSwitchCase="'单选题'">
+          <span class="ion-text-wrap">{{ i + 1 }}.({{ 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"
+                   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>
+            <span class="isright-answer" *ngIf="ans.ISRIGHT&&ques.showAnswer">✔</span>
+          </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">
+            {{ i + 1 }}.({{ 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="请输入"></ion-input>
+              </ng-container>
+            </ng-container>
+          </div>
+        </div>
+        <div *ngSwitchCase="'判断题'">
+          <span class="ion-text-wrap">{{ i + 1 }}.({{ 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"
+                   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>
+            <span class="isright-answer" *ngIf="ans.ISRIGHT&&ques.showAnswer">✔</span>
+          </div>
+        </div>
+        <div *ngSwitchCase="'简答题'">
+          <span class="ion-text-wrap">{{ i + 1 }}.({{ ques.NAME }}){{ ques.CONTENT }}</span>
+          <div [class]="{'isright-answer':ans.ISRIGHT&&ques.showAnswer}"
+               *ngFor="let ans of ques.ANSWERS;let $index = index">
+            <ion-textarea readonly="false" placeholder="请填写" name="remark"
+                          [(ngModel)]="ans.useranswer"></ion-textarea>
+          </div>
+        </div>
+        <div *ngSwitchCase="'多选题'">
+          <span class="ion-text-wrap">{{ i + 1 }}.({{ 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"
+                   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>
+            <span class="isright-answer" *ngIf="ans.ISRIGHT&&ques.showAnswer">✔</span>
+          </div>
+        </div>
+      </div>
+      <div class="isright-answer" *ngIf="ques.showAnswer">参考答案：{{ parseAnswer(ques.ANSWERS, ques.NAME) }}</div>
+      <div class="isright-answer" *ngIf="ques.showAnswer">题目解析<br/>{{ ques.NOTE }}</div>
+    </div>
+  </ion-list>
+  <ion-button id="open-modal">Open Modal</ion-button>
+
+  <ion-modal #modal trigger="open-modal" >
+    <ng-template>
+      <ion-content>
+        <ion-searchbar placeholder="Search" ></ion-searchbar>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+<ion-footer>
+  <ion-toolbar style="display: flex;align-items: center">
+    <ion-icon name="reorder-four-outline" style="color: red;vertical-align: middle;" size="large"
+              aria-label="Favorite"></ion-icon>
+    <span>已答4/100</span>
+    <ion-button size="small" slot="end">
+      <ion-icon slot="start" name="star"></ion-icon>
+      上一题
+    </ion-button>
+    <ion-button size="small" slot="end">
+      下一题
+      <ion-icon slot="end" name="heart"></ion-icon>
+    </ion-button>
+  </ion-toolbar>
+</ion-footer>

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

@@ -0,0 +1,14 @@
+.isright-answer {
+  color: #00A8FF;
+}
+.question-body{
+  margin: 10px;
+}
+.question-body ion-input {
+  width: 100px;
+  display: inline-block;
+  border-bottom:1px solid rgb(118, 118, 118) ;
+}
+
+.input-container {
+}

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

@@ -0,0 +1,69 @@
+import {Component, ViewChild ,OnInit} from '@angular/core';
+import {ConfigService, RequsetData} from "../../../../service/config.service";
+import {AlertController,ModalController, MenuController} from "@ionic/angular";
+import {ActivatedRoute, Router} from "@angular/router";
+
+@Component({
+  selector: 'app-show',
+  templateUrl: './show.component.html',
+  styleUrls: ['./show.component.scss'],
+})
+export class ShowComponent implements OnInit {
+  getPracticeQuestionsUrl = '/api/examtest/getPracticeQuestions';
+
+  testQuestionList = [];
+  testSettings = {};
+
+  constructor(private modalController: ModalController,public alertController: AlertController, private menu: MenuController, private router: Router, private configService: ConfigService, private routeInfo: ActivatedRoute) {
+  }
+
+  ngOnInit() {
+    const testSettings = localStorage.getItem('testSettings');
+    if (testSettings) {
+      this.testSettings = JSON.parse(testSettings);
+    }
+    this.getPracticeQuestions(this.testSettings );
+  }
+
+  getPracticeQuestions(data) {
+    this.configService.HttpPostRomote(this.getPracticeQuestionsUrl, data).subscribe((data: RequsetData) => {
+      if (data.success) {
+        this.testQuestionList = data.item;
+        this.testQuestionList.forEach(x=>{
+          x.ANSWERS=this.sort(x.ANSWERS);
+        })
+      }
+    });
+  }
+  parseAnswer(answers:any[], questionType:string) {
+    answers = answers.filter(function (x) {
+      return x.ISRIGHT
+    });
+    var rightAnswers = answers.map(x=> {
+      return questionType == '判断题' ||questionType == '填空题'? x.ANSWER_NAME : this.options(x.ORDER - 1);
+    });
+    return rightAnswers.join("、");
+  }
+  options(index) {
+    return String.fromCharCode(65 + index);
+  }
+  sort(answers:any[]){
+    return  answers.sort((a, b) => a.ORDER - b.ORDER);
+  }
+  @ViewChild('myModal') modal: any;
+  async openModal() {
+    const modalElement = await this.modalController.create({
+      component: this.modal, // 注意：这里通常不是直接传递modal元素，而是传递一个组件
+      // 如果你的modal是一个组件，应该这样：
+      // component: SomeModalComponent,
+      // 如果是使用模板引用的modal，你可能需要另寻他法，因为通常我们不这样用
+      // 下面展示的是如果modal是一个组件的情况
+      cssClass: 'my-custom-class',
+      showBackdrop: true,
+      swipeToClose: true,
+      keyboardClose: true
+    });
+
+    return await modalElement.present();
+  }
+}

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

@@ -59,6 +59,7 @@ import {routes as StudyRoutes} from "../tab-study/tab-study.route";
 import {routes as UserRoutes} from "../tab-user/tab-user.route";
 
 import { ExamtestComponent} from "../../pages/examtest/examtest.component";
+import {ShowComponent as ExamtestShowComponent} from "../../pages/examtest/show/show.component";
 
 const pageComponents = [
   PositionComponent,
@@ -86,7 +87,8 @@ const pageComponents = [
   ShykDetailComponent,
   RecordComponent,
   PartyUserRewardComponent,
-  ExamtestComponent
+  ExamtestComponent,
+  ExamtestShowComponent
 ];
 
 const pubComponents = [

src/main/resources/mapping/TestExamTestCquery.xml

@@ -16,6 +16,7 @@
             answers
             from test_question_provid_answer ans
             group by ans.TEST_QUESTION_ID
+            order by ans.orderBy
             ) qans on ques.TEST_QUESTION_ID=qans.TEST_QUESTION_ID
             where ques.TEST_QUESTION_ID in(select tl.TEST_QUESTION_ID from TEST_QUESTION_LIBARY_QUESTION tl where
             tl.TEST_QUESTION_LIBARY_ID in(