测评

src/views/evaluation/evaluDetail.vue

@@ -14,9 +14,25 @@
     <div class="content">
         <template v-if="progress==='answer'">
             <div class="content-top">
-                <span class="chapter"> 2 / 30 </span>
+                <span class="chapter"> {{activeIndex+1}} / {{evaluData.length}} </span>
                 <span class="countdown">-29:54</span>
             </div>
+            <template v-for="(item,index) in evaluData">
+                <div class="content-center" :key="index" v-if="activeIndex===index">
+                    <template v-if="item.type==='single'">
+                        <div class="title-box">
+                            <b v-if="item.number">{{item.number}}.</b>
+                            <h5>{{item.title}}</h5>
+                        </div>
+                        <el-radio-group v-model="userSelect[index]">
+                            <el-radio :label="indexs" v-for="(items,indexs) in item.option" :key="indexs">
+                                <b v-if="items.number">{{items.number}}.</b>
+                                <span>{{items.title}}</span>
+                            </el-radio>
+                        </el-radio-group>
+                    </template>
+                </div>
+            </template>
             <div class="btn-box">
                 <el-button  size="small" @click="handlePrev">上一题</el-button>
                 <el-button type="primary" size="small" @click="handleNext">下一题</el-button>
@@ -27,15 +43,15 @@
             <div class="result-info">
                 <div class="result-item">
                     <p class="title">正确率</p>
-                    <span class="number">78<span class="unit">%</span></span>
+                    <span class="number">{{rightRate}}<span class="unit">%</span></span>
                 </div>
                 <div class="result-item">
                     <p class="title">正确数量</p>
-                    <span class="number">17<span class="unit">题</span></span>
+                    <span class="number">{{rightNumber}}<span class="unit">题</span></span>
                 </div>
                 <div class="result-item">
                     <p class="title">错误数量</p>
-                    <span class="number">4<span class="unit">题</span></span>
+                    <span class="number">{{errorNumber}}<span class="unit">题</span></span>
                 </div>
             </div>
             <div class="btn-box result-box">
@@ -60,7 +76,94 @@ export default {
     //这里存放数据
     return {
       title:this.$route.query.title?this.$route.query.title:'词汇测试',
-      progress:'result', // answer 答题， result 答题结果
+      progress:'answer', // answer 答题， result 答题结果
+      evaluData:[
+        {
+            number: '1',
+            title: 'Everyone has different _____.',
+            type: 'single',
+            option: [
+                {
+                    number: 'A',
+                    title: 'persons'
+                },
+                {
+                    number: 'B',
+                    title: 'personals'
+                },
+                {
+                    number: 'C',
+                    title: 'personalities'
+                }
+            ],
+            correct: 2
+        },
+        {
+            number: '2',
+            title: "I would listen to others' opinions before making a _____.",
+            type: 'single',
+            option: [
+                {
+                    number: 'A',
+                    title: 'decide'
+                },
+                {
+                    number: 'B',
+                    title: 'decision'
+                },
+                {
+                    number: 'C',
+                    title: 'deciding'
+                }
+            ],
+            correct: 1
+        },
+        {
+            number: '3',
+            title: 'The teacher gave me many _____ suggestions.',
+            type: 'single',
+            option: [
+                {
+                    number: 'A',
+                    title: 'help'
+                },
+                {
+                    number: 'B',
+                    title: 'helping'
+                },
+                {
+                    number: 'C',
+                    title: 'helpful'
+                }
+            ],
+            correct: 2
+        },
+        {
+            number: '4',
+            title: 'Their success was the _____ of years of hard work.',
+            type: 'single',
+            option: [
+                {
+                    number: 'A',
+                    title: 'result'
+                },
+                {
+                    number: 'B',
+                    title: 'change'
+                },
+                {
+                    number: 'C',
+                    title: 'serious'
+                }
+            ],
+            correct: 0
+        }
+      ],
+      userSelect:[],
+      activeIndex: 0,
+      rightNumber: 0,
+      errorNumber: 0,
+      rightRate: 0,
     }
   },
   //计算属性 类似于data概念
@@ -82,15 +185,71 @@ export default {
     // 重新测试
     retest(){
         this.progress = 'answer'
+        this.activeIndex = 0
+        this.handleUserSelect()
     },
     // 上一题
     handlePrev(){
-
+        if(this.activeIndex!==0){
+            this.activeIndex--
+        }else{
+            this.$message.warning('已经是第一题了')
+        }
     },
     // 下一题
     handleNext(){
-        this.progress = 'result'
+        if(this.activeIndex!==this.evaluData.length-1){
+            this.activeIndex++
+        }else{
+            this.progress = 'result'
+            this.handleCorrect()
+        }
+    },
+    // 给用户选项数组赋初始值
+    handleUserSelect(){
+        this.userSelect = []
+        this.evaluData.forEach(item => {
+            if(item.type==='single'){
+                this.userSelect.push(null)
+            }else{
+                let itemsOption = []
+                item.option.forEach(items=>{
+                    itemsOption.push(null)
+                })
+                this.userSelect.push(itemsOption)
+            }
+        });
     },
+    // 计算对错
+    handleCorrect(){
+        let total = 0
+        this.rightNumber=0
+        this.errorNumber=0
+        this.evaluData.forEach((item,index)=>{
+            if(item.type==='single'){
+                if(item.correct!==null){
+                    if(item.correct===this.userSelect[index]){
+                        this.rightNumber++
+                    }else{
+                        this.errorNumber++
+                    }
+                    total++
+                }
+            }else{
+                item.option.forEach((items,indexs)=>{
+                    if(items.correct!==null){
+                        if(items.correct===this.userSelect[index][indexs]){
+                            this.rightNumber++
+                        }else{
+                            this.errorNumber++
+                        }
+                        total++
+                    }
+                })
+            }
+        })
+        this.rightRate = Math.round(this.rightNumber/total *100 )
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -146,6 +305,52 @@ export default {
             min-width: 100px;
         }
     }
+    &-center{
+        height: calc(100vh - 350px);
+        padding: 100px 200px;
+        overflow: auto;
+        .title-box{
+            display: flex;
+            margin-bottom: 24px;
+            b{
+                margin-right: 8px;
+                color: #000;
+                font-size: 24px;
+                font-weight: 400;
+                line-height: 32px;
+            }
+            h5{
+                margin: 0;
+                color: #000;
+                font-size: 24px;
+                font-weight: 400;
+                line-height: 32px;
+            }
+        }
+        .el-radio-group{
+            width: 100%;
+        }
+        .el-radio{
+            width: 100%;
+            padding: 8px 12px;
+            border-radius: 4px;
+            margin-bottom: 16px;
+            color: #1D2129;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 24px;
+            b{
+                margin-right: 6px;
+                font-weight: 400;
+            }
+            &:hover{
+                background: #E5E6EB;
+            }
+            &.is-checked{
+                background: #E7EEFF;
+            }
+        }
+    }
     .btn-box{
         padding-top: 40px;
         text-align: right;
@@ -223,5 +428,12 @@ export default {
         line-height: 22px;
         color: #86909C;
     }
+    .el-radio__input.is-checked+.el-radio__label{
+        color: #1D2129;
+    }
+    .el-radio__input.is-checked .el-radio__inner{
+        border-color: #165DFF;
+        background: #165DFF;
+    }
 } 
 </style>