考试成绩

src/containers/center/exam/components/util.js

@@ -56,3 +56,16 @@ export function getSelect( answers ){
   }
   return select
 }
+
+
+export function filterSelect( select ){
+  const mapData ={'1':'A','2':'B','3':'C','4':'D','5':'E','6':'F'}
+  const mlist = (''+select).split('');
+  let data = []
+  for( let i in mlist){
+    let nstr = mapData[mlist[i]]
+    if( nstr) data.push(nstr)
+  }
+  if( data.length <1) return "空"
+  return data.join(',')
+}

src/containers/center/exam/index.css

@@ -76,6 +76,15 @@
 .finish {
   background-color: #add8e6 !important;
 }
+
+.correct {
+  background-color: #67c23acc !important;
+}
+
+.error {
+  background-color: #e7969659 !important;
+}
+
 .el-radio__inner{
   border: 1px solid #1c1c1d;
   border-radius: 100%;

src/containers/center/exam/index.vue

@@ -8,12 +8,16 @@
                 <div slot="header" class="clearfix">
                   <span>第{{currentQuestion.index+1}}题（{{currentQuestion.type|getType}}）</span>
 
-                  <span style="float: right;">
+                  <span style="float: right;" v-if="!finishExamFlag">
                     <span> 剩余时间： <span class="ltime">{{end.h}}: {{end.m}}:{{end.s}}</span> </span>
+                    <el-button  type="danger" @click="submitPaper" class="ml20">交卷</el-button>
+                  </span>
 
-                    <el-button type="danger" @click="submitPaper" class="ml20">交卷</el-button>
-
+                  <span style="float: right;" v-else>
+                    <span> 我的成绩： <span class="ltime">{{info.score}} 分</span> </span>
+                    <el-button  type="primary" @click="leavePage" class="ml20">离开</el-button>
                   </span>
+
                 </div>
 
                 <div class="q-single">
@@ -24,7 +28,7 @@
 
                   <div class="answer" v-if="currentQuestion.type==1">
                     <div class="answer-item" v-for="(item,index) in currentQuestion.choice" :key="index">
-                      <el-radio v-model="radio" :label="index+1">
+                      <el-radio v-model="radio" :label="index+1" :disabled="finishExamFlag">
                         <span class="answer-title">{{transformChar[index]+'、 '+item}}</span>
                       </el-radio>
                     </div>
@@ -33,7 +37,7 @@
                   <!-- 当选题 -->
                   <div class="answer" v-if="currentQuestion.type==2">
                     <div class="answer-item" v-for="(item,index) in currentQuestion.choice" :key="index">
-                      <el-radio v-model="radio" :label="index+1">
+                      <el-radio v-model="radio" :label="index+1" :disabled="finishExamFlag">
                         <span class="answer-title">{{transformChar[index]+'、 '+item}}</span>
                       </el-radio>
                     </div>
@@ -42,12 +46,23 @@
                   <!-- 多选题 -->
                   <div class="answer" v-if="currentQuestion.type==3">
                     <div class="answer-item" v-for="(item,index) in currentQuestion.choice" :key="index">
-                       <el-checkbox  v-model="checked[index]" :label="index+1">
+                       <el-checkbox  v-model="checked[index]" :label="index+1" :disabled="finishExamFlag">
                           <span class="answer-title">{{transformChar[index]+'、 '+item}}</span>
                        </el-checkbox>
                     </div>
                   </div>
 
+                  <div class="p20" v-if="finishExamFlag">
+                    <p>
+                      答案:
+                      <span class="ml20">{{currentQuestion.result|filterSelect}}</span>
+                      <span class="ml20" > 我答案:</span>
+                      <span class="ml20" :style="{color:currentQuestion.correct?'green':'red'}"> {{(commitMap[currentQuestion.id]||'空')|filterSelect}}</span>
+                      <span class="ml20" > 结果:</span>
+                      <span class="ml20" v-if="currentQuestion.correct" style="color:green">正确</span>
+                      <span class="ml20" v-else style="color:red">错误</span>
+                    </p>
+                  </div>
 
                   <div class="mark" >
                     <el-checkbox v-model="currentQuestion.marked" @change="changeMark" :checked="currentQuestion.marked">
@@ -108,7 +123,7 @@
         </el-row>
      </div>
 
-    <my-dialog style="margin-top:20vh" :dialogVisible="dialogVisible" :info="info" :start="start" :end="end" @leavePage="leavePage" >
+    <my-dialog style="margin-top:20vh" :dialogVisible="dialogVisible" :info="info" :start="start" :end="end" @leavePage="finishExam" >
 
 
     </my-dialog>
@@ -119,7 +134,7 @@
 import { Message, MessageBox } from "element-ui";
 import {httpServer } from "@/components/httpServer/httpServer.js";
 import md5 from 'js-md5';
-import { getTime, packTime, time2str, saveExam, getExam,getSelect,delExam } from "./components/util.js";
+import { getTime, packTime, time2str, saveExam, getExam,getSelect,delExam,filterSelect } from "./components/util.js";
 import headline from "./components/headline.vue";
 import myDialog from "./components/my-dialog.vue";
 const defAnswer = [false,false,false,false,false];
@@ -133,16 +148,18 @@ export default {
     getType( val ){
       const d = {1:'判断题', 2:'单选题', 3:'多选题'}
       return d[val]
-    }
+    },
+    filterSelect
   },
   data() {
     return {
       uuid:0,
       examId:0,
+      finishExamFlag: false,
       startExam: false,
       dialogVisible: false,
       info: {},
-      currentQuestion: {index:0, choice: [], marked: false},
+      currentQuestion: {index:0, choice: [], marked: false,correct:false},
       questionList: [],
       questionLen: 0,
       questionType: '单选题',
@@ -206,11 +223,13 @@ export default {
       this.currentQuestion.marked = !!item.marked
     },
     loadQuestion( index ) {
+      let examId = this.info.examId;
       let item = this.questionList[index];
       item.index = index;
-      if( !item.title ){
+      let reloadFlag = (this.info.endTime>0 && item.result===0) || !item.title;
+      if( reloadFlag ){
         let {id} = item;
-        httpServer("course.loadAnswer", {id} ).then(res => {
+        httpServer("course.loadAnswer", {id, examId} ).then(res => {
           if( res.code != 200) return;
           Object.assign( item, res.data, {id})
           this.doLoadQuestion( item )
@@ -227,9 +246,13 @@ export default {
     getStyle: function(i) {
       let item = this.questionList[i];
       let select = getSelect( item.answer )
+      if( this.info.endTime >0 ){
+        return item.correct?'correct':'error';
+      }
       return select ? "finish" : "unfinish";
     },
     checkCommit( ){
+      if( this.info.endTime ) return;
       let {id, answer, exmaId} = this.currentQuestion
       let select = getSelect(answer);
       if( !select ) return
@@ -239,6 +262,31 @@ export default {
         this.commitMap[id] = select;
       })
     },
+    updateResult( resultList ){
+      let results = {};
+      for( let i in resultList){
+        let item = resultList[i]
+        results[item.answerId] = item;
+      }
+      for( let index in this.questionList){
+        let question = this.questionList[index];
+        if( question.answerId>0){
+          let result = results[question.answerId]
+          if(result){
+            question.result = result.answer
+            question.correct = !!result.correct
+            this.questionList[index] = question
+            this.commitMap[question.id] =  result.result;
+          }
+        }
+      }
+      saveExam( this.info, this.questionList );
+    },
+    finishExam(){
+      this.timer &&  window.clearInterval(this.timer);
+      this.finishExamFlag = true;
+      this.dialogVisible = false;
+    },
     leavePage(){
       let courseId = this.info.courseId
       this.timer &&  window.clearInterval(this.timer);
@@ -261,7 +309,6 @@ export default {
             done();
             instance.confirmButtonLoading = false;
             that.dialogVisible = true;
-
           } else{
             done();
           }
@@ -276,8 +323,10 @@ export default {
           let { score, useTime } = res.data;
           this.info.score = score;
           this.info.useTime = useTime;
+          this.info.endTime = parseInt(Date.now()/1000);
           this.info.isFinish = 1;
           this.timer &&  window.clearInterval(this.timer);
+          this.updateResult( res.data.result ||[])
         }
       });
     },
@@ -298,10 +347,14 @@ export default {
     doStartExam( info ){
       this.info = info
       this.questionList = info.answers
+      for( let i in this.questionList){
+        let question = this.questionList[i]
+        if( question.answer ) this.commitMap[question.id] = getSelect( question.answer )
+      }
+      this.finishExamFlag = info.endTime>0;
       this.loadQuestion(0);
       this.startTime = info.startTime;
-      saveExam( this.info, this.questionList );
-      this.initTimer();
+      !this.finishExamFlag && this.initTimer();
     }
   },
   destroyed(){
@@ -337,6 +390,7 @@ export default {
       if (this.currentQuestion){
         this.currentQuestion.answer = answer;
         this.questionList[ this.currentQuestion.index].answer = answer
+        saveExam( this.info, this.questionList)
         this.checkCommit()
        }
     },
@@ -345,6 +399,7 @@ export default {
       if (this.currentQuestion) {
         this.currentQuestion.answer = answer;
         this.questionList[ this.currentQuestion.index].answer = answer
+        saveExam( this.info, this.questionList)
         this.checkCommit()
       }
     }
@@ -355,4 +410,12 @@ export default {
 <style lang="css">
   @import url("./index.css");
   @import url("../../../assets/css/base.css");
+  .el-radio__input.is-disabled+span.el-radio__label {
+    color: #333;
+    cursor: not-allowed;
+  }
+  .el-checkbox__input.is-disabled+span.el-checkbox__label {
+    color: #333;
+    cursor: not-allowed;
+}
 </style>