答题-添加标识对错

src/components/student/answer.vue

@@ -73,20 +73,18 @@
         <transition name="slider-fade">
         <div class="right">
           <div class="title">
-<!--            ({{optionValue}})-->
-            <p>{{title}}</p>
+            <p>{{title}}({{optionValue}})</p>
             <i class="iconfont icon-right auto-right"></i>
             <span>全卷共{{topicCount[0] + topicCount[1] + topicCount[2]}}题  <i class="iconfont icon-time"></i><!--倒计时：<b>{{time}}</b>分钟--></span>
           </div>
           <div class="content">
             <p class="topic">{{showQuestion}}</p>
-<!--            && optionValue == '单选题'-->
-            <div v-if="currentType == 1 ">
+            <div v-if=" optionValue == '单选题'">
               <el-radio-group v-model="radio[index]" @change="getChangeLabel" >
-                <el-radio :label="1" :disabled='radioFlag'>{{showAnswer.answerA}}</el-radio>
-                <el-radio :label="2" :disabled='radioFlag'>{{showAnswer.answerB}}</el-radio>
-                <el-radio :label="3" :disabled='radioFlag'>{{showAnswer.answerC}}</el-radio>
-                <el-radio :label="4" :disabled='radioFlag'>{{showAnswer.answerD}}</el-radio>
+                <el-radio :label="1" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='A' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerA}}</el-radio>
+                <el-radio :label="2" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='B' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerB}}</el-radio>
+                <el-radio :label="3" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='C' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerC}}</el-radio>
+                <el-radio :label="4" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='D' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerD}}</el-radio>
               </el-radio-group>
               <div class="analysis"  id="topic1Right" style="display: none">
                 <ul>
@@ -98,14 +96,23 @@
                 </ul>
               </div>
             </div>
-        <!--    <div v-if="currentType == 1 && optionValue == '多选题'" >
+            <div v-if=" optionValue == '多选题'" >
               <el-checkbox-group v-model="checkList" @change="handleCheckboxChange" >
-                <el-checkbox  :label="1" :disabled='radioFlag'>{{showAnswer.answerA}}</el-checkbox >
-                <el-checkbox  :label="2" :disabled='radioFlag'>{{showAnswer.answerB}}</el-checkbox >
-                <el-checkbox  :label="3" :disabled='radioFlag'>{{showAnswer.answerC}}</el-checkbox >
-                <el-checkbox  :label="4" :disabled='radioFlag'>{{showAnswer.answerD}}</el-checkbox >
+                <el-checkbox :label="1" :disabled='radioFlag'
+                             :class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('A') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
+                            {{showAnswer.answerA}}
+                </el-checkbox>
+                <el-checkbox  :label="2" :disabled='radioFlag'
+                              :class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('B') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
+                              {{showAnswer.answerB}}</el-checkbox >
+                <el-checkbox  :label="3" :disabled='radioFlag'
+                              :class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('C') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
+                  {{showAnswer.answerC}}</el-checkbox >
+                <el-checkbox  :label="4" :disabled='radioFlag'
+                              :class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('D') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
+                  {{showAnswer.answerD}}</el-checkbox >
               </el-checkbox-group>
-              <button style="z-index: 50" v-show="isOptionSelected" @click="submitAnswer" >提交</button>
+              <el-button class="submitAnswerClass" type="primary" plain v-show="isOptionSelected" @click="submitAnswer" >提交</el-button>
 
               <div class="analysis"  id="topic1Right" style="display: none">
                 <ul>
@@ -115,7 +122,7 @@
                   </li>
                 </ul>
               </div>
-            </div>-->
+            </div>
 
             <!-- <div class="fill" v-if="currentType == 2">
               <div v-for="(item,currentIndex) in part" :key="currentIndex">
@@ -133,7 +140,7 @@
                 </ul>
               </div>
             </div> -->
-            <!-- <div class="judge" v-if="currentType == 3">
+<!--             <div class="judge" v-if="currentType == 3">
               <el-radio-group v-model="judgeAnswer[index]" @change="getJudgeLabel" v-if="currentType == 3">
                 <el-radio :label="1">正确</el-radio>
                 <el-radio :label="2">错误</el-radio>
@@ -145,7 +152,7 @@
                   <li>{{topic[3][index].analysis == null ? '暂无解析': topic[3][index].analysis}}</li>
                 </ul>
               </div>
-            </div> -->
+            </div>-->
           </div>
         <!--  <div class="operation">
             <ul class="end">
@@ -166,6 +173,8 @@ import {mapState} from 'vuex'
 export default {
   data() {
     return {
+      isradio:false, //默认为false 。。点击后改为true
+      ischeckBox:false, //默认为false 。。点击后改为true
       startTime: null, //考试开始时间
       endTime: null, //考试结束时间
       time: null, //考试持续时间
@@ -257,6 +266,7 @@ export default {
           this.topic = {...res.data}
           let reduceAnswer = this.topic[1][this.index]
           this.reduceAnswer = reduceAnswer
+          console.log(this.reduceAnswer)
           let keys = Object.keys(this.topic) //对象转数组
           // console.log(this.topic[1][0]) //获取第一个题干类型
           this.optionValue = this.topic[1][0].oneOrMore
@@ -283,7 +293,7 @@ export default {
         })
       })
     },
-    change(index) { //选择题
+ /*   change(index) { //选择题
      if(index == -1){
         this.index = 1
      }else{
@@ -381,7 +391,7 @@ export default {
         this.index = 0
         this.change(this.index)
       }
-    },
+    },*/
     handleCheckboxChange(val) {
       console.log('多选中的值为：', val);
       this.radio[this.index] = val  //当前选择的序号
@@ -403,8 +413,9 @@ export default {
       this.isOptionSelected = false
       //点击提交禁止选择
       this.radioFlag = true
+      this.ischeckBox = true
+      this.commit()
       // console.log(this.topic1Answer[this.index])
-      this.checkList.push(this.topic1Answer[this.index])
       // this.radio[this.index] =  this.topic1Answer[this.index]
       // const dasd  = this.radio[this.index]
       /* 保存学生答题选项 */
@@ -430,8 +441,9 @@ export default {
       }
       /* 保存学生答题选项 */
       this.topic1Answer[this.index] = val
+      this.commit()
     },
-    getJudgeLabel(val) {  //获取判断题作答选项
+ /*   getJudgeLabel(val) {  //获取判断题作答选项
       this.judgeAnswer[this.index] = val
       if(val) {
         let data = this.topic[3]
@@ -480,11 +492,12 @@ export default {
         case 3:
           this.topic[3][this.index]["isMark"] = true //判断题标记
       }
-    },
+    },*/
     commit() { //答案提交计算分数
       /* 计算选择题总分 */
+      let finalScore = 0  //分数
+      if (this.optionValue=="单选题"){
         let topic1Answer = this.topic1Answer
-      let finalScore = 0
         topic1Answer.forEach((element,index) => { //循环每道选择题根据选项计算分数
           let right = null
           if(element != null) {
@@ -504,10 +517,23 @@ export default {
             if(right == this.topic[1][index].rightAnswer) { // 当前选项与正确答案对比
               finalScore += this.topic[1][index].score // 计算总分数
             }
+            this.isradio = true
+
+            console.log(this.reduceAnswer.rightAnswer) //题的答案
             console.log(right,this.topic[1][index].rightAnswer)
           }
-        // console.log(topic1Answer)
         })
+      } else if (this.optionValue == "多选题") {
+        //正确答案
+        const truwAnswer = this.reduceAnswer.rightAnswer.replace(/\s/g, "")
+        //选中的
+        const result = this.checkList.map(number => String.fromCharCode(64 + parseInt(number, 10))).join(",");
+        if (result == truwAnswer) {
+          console.log("回答正确")
+          finalScore = 1
+        }
+      }
+
       // /**计算判断题总分 */
       // // console.log(`this.fillAnswer${this.fillAnswer}`)
       // // console.log(this.topic[2][this.index])
@@ -592,13 +618,166 @@ export default {
           }
         }
       },1000 * 60)
+    },
+/*    MoreTrueOrFalse(boo){
+      if (boo){
+        //定位目标元素，并获取它的样式对象：
+        var myElement = document.querySelector(".is-checked");
+        var inputElement = myElement.querySelector('.el-checkbox__input');
+        var innerElement = inputElement.querySelector('.el-checkbox__inner');
+        console.log(innerElement)
+        // 创建一个<style>标签
+        var styleTag = document.createElement('style');
+        document.head.appendChild(styleTag);
+        // 动态生成的内联样式规则
+        styleTag.innerHTML = `
+                  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::before {
+                       content: "";
+                       position: absolute;
+                       top: -10px;
+                       left: 3px;
+                       width: 12px;
+                       height: 25px;
+                       border: 2px solid transparent;
+                       border-bottom: 5px solid #f50808;
+                       border-right: 5px solid #fa0909;
+                       transform: rotate(45deg);
+                    }`;
+        // 将样式规则应用到页面上的元素
+        innerElement.classList.add('styleTag');
+      }else {
+
+      }
+
+    },
+    //动态添加是否对错
+    OnetrueOrFalse(boo){
+      if (boo){
+    /!*    var myElements = document.querySelectorAll(".el-radio__input");
+        var uncheckedElements = Array.from(myElements).filter(function(element) {
+          return !element.classList.contains('is-checked');
+        });
+        console.log(uncheckedElements)
+        var styleTag2 = document.createElement('style2');
+        document.head.appendChild(styleTag2);
+        // 动态生成的内联样式规则
+        styleTag2.innerHTML = `
+                  .el-radio__input.is-disabled .el-radio__inner::before {
+                      content: "×";
+                        position: absolute;
+                        top: -8px;
+                        left: -5px;
+                        color: #f50808;
+                        font-size: 30px;
+                        text-shadow:
+                            -1px -1px 0 #f50808,
+                            1px -1px 0 #f50808,
+                          -1px 1px 0 #f50808,
+                          1px 1px 0 #f50808;
+                    }`;
+        uncheckedElements.forEach(e=>{
+          var innerElements = e.querySelectorAll(".el-radio__inner");
+          Array.from(innerElements).forEach(function(element) {
+            console.log(element)
+            element.classList.add("style2");
+          });
+        })*!/
+
+        //定位目标元素，并获取它的样式对象：
+        var myElement = document.querySelector(".is-checked");
+        var inputElement = myElement.querySelector('.el-radio__input');
+        var innerElement = inputElement.querySelector('.el-radio__inner');
+        // console.log(innerElement)
+        // 创建一个<style>标签
+        var styleTag = document.createElement('style');
+        document.head.appendChild(styleTag);
+        // 动态生成的内联样式规则
+        styleTag.innerHTML = `
+                  .el-radio__input.is-disabled.is-checked .el-radio__inner::before {
+                       content: "";
+                       position: absolute;
+                       top: -20px;
+                       left: 3px;
+                       width: 10px;
+                       height: 25px;
+                       border: 2px solid transparent;
+                       border-bottom: 5px solid #f50808;
+                       border-right: 5px solid #fa0909;
+                       transform: rotate(45deg);
+                    }`;
+        // 将样式规则应用到页面上的元素
+        console.log(innerElement)
+        innerElement.classList.add('style');
+      }else {
+        var myElement = document.querySelector(".is-checked");
+        var inputElement = myElement.querySelector('.el-radio__input');
+        var innerElement = inputElement.querySelector('.el-radio__inner');
+        console.log(innerElement)
+        // 创建一个<style>标签
+        var styleTag = document.createElement('style');
+        document.head.appendChild(styleTag);
+        // 动态生成的内联样式规则
+        styleTag.innerHTML = `
+                  .el-radio__input.is-disabled.is-checked .el-radio__inner::before {
+                        content: "×";
+                        position: absolute;
+                        top: -8px;
+                        left: -5px;
+                        color: #f50808;
+                        font-size: 30px;
+                        text-shadow:
+                            -1px -1px 0 #f50808,
+                            1px -1px 0 #f50808,
+                          -1px 1px 0 #f50808,
+                          1px 1px 0 #f50808;
+                    }`;
+        // 将样式规则应用到页面上的元素
+        innerElement.classList.add('styleTag');
       }
+
+    }*/
   },
   computed:mapState(["isPractice"])
 }
 </script>
 
 <style lang="less">
+  .submitAnswerClass{
+    /*background-color: red;*/
+    margin-top: 15px;
+  }
+  .noStyle{
+
+  }
+  //对号
+  .checkboxTrueStyle::before{
+    content: "";
+    position: absolute;
+    top: -10px;
+    left: 3px;
+    width: 12px;
+    height: 25px;
+    border: 2px solid transparent;
+    border-bottom: 5px solid #2776df;
+    border-right: 5px solid #2776df;
+    transform: rotate(45deg);
+    z-index: 2;
+  }
+  //错号
+  .checkboxFlaseStyle::before{
+    content: "×";
+    position: absolute;
+    top: -8px;
+    left: -5px;
+    color: #f50808;
+    font-size: 30px;
+    text-shadow:
+        -1px -1px 0 #f50808,
+        1px -1px 0 #f50808,
+      -1px 1px 0 #f50808,
+      1px 1px 0 #f50808;
+    z-index: 2;
+  }
 
   .iconfont.icon-time {
   color: #2776df;
@@ -632,7 +811,7 @@ export default {
   }
   .second{
 
-    /*align-items: flex-end;*/
+    align-items: flex-end;
     position: absolute;
     bottom: 0px;
     margin-right: 10px;