章节考试提交

src/pages/course/test/components/CourseChapter.vue

@@ -60,8 +60,9 @@ export default {
         })
     },
     toExamPage(data, type) {
+      const path = type === 3 ? '/course/chapter/result' : '/course/exam/chapter'
       this.$router.push({
-        path: '/course/exam/chapter',
+        path: path,
         query: { course_id: this.courseId, chapter_id: data.id, type }
       })
     }

src/pages/exam/components/question.vue

@@ -29,7 +29,7 @@
       </ul>
     </template>
     <!-- 解析 -->
-    <div class="analysis" v-if="questionData.question_item_type != 5 && $route.query.id">
+    <div class="analysis" v-if="questionData.question_item_type != 5 && ($route.query.id || isAnalysis)">
       <div class="title">答案解析</div>
       <div class="analy-mian">
         <div class="txt1">正确答案：{{ questionData.question_answer }}</div>
@@ -50,7 +50,7 @@
         <div class="flex">
           <div class="stem" v-html="questionData.common_content"></div>
           <!-- 解析 -->
-          <div class="analysis" v-if="$route.query.id">
+          <div class="analysis" v-if="$route.query.id || isAnalysis">
             <div class="title">答案解析</div>
             <div class="analy-mian">
               <div class="txt1">正确答案：{{ questionData.question_answer }}</div>
@@ -108,7 +108,8 @@ export default {
   },
   data() {
     return {
-      questionData: {}
+      questionData: {},
+      isAnalysis: false
     }
   },
   created() {
@@ -117,6 +118,10 @@ export default {
   mounted() {
   },
   methods: {
+    // 查看解析
+    answerConfirm() {
+      this.isAnalysis = !this.isAnalysis
+    },
     // 自己选择的答案
     myAnswer() {
       const selectAnswer = this.questionParams.answerRecord
@@ -226,7 +231,7 @@ export default {
   watch: {
     changeQuestionIndex(newV, oldV) {
       this.questionData = this.questionParams.question
-      console.log(this.questionData)
+      this.isAnalysis = false
       this.$forceUpdate()
     }
   }

src/pages/exam/courseExam/chapter/result.vue

+<template>
+  <div class="result-box">
+    <div class="card-left">
+      <div class="title">成绩报告</div>
+      <div class="chart-box">
+        <chart :accuracy="accuracy">
+          <template v-slot:tips>
+            <div class="num">{{ accuracy }}%</div>
+            <div class="t">正确率</div>
+          </template>
+        </chart>
+      </div>
+      <!-- <div class="assess">测试评估</div>
+      <div class="assess-box">
+        <div class="prog">
+          <div class="line-box">
+            <div class="line" :style="setStyle"></div>
+          </div>
+          <div class="icon"></div>
+        </div>
+        <div class="text">{{ accuracy !== 100 ? '您离成功还有一段距离，继续努力！' : '成功近在眼前，再接再厉！' }}</div>
+        <div class="btn">全部考试服务</div>
+      </div> -->
+    </div>
+    <div class="card-right">
+      <card v-if="data.sheet" :data="data.sheet" @goQuestion="goPage">
+        <template v-slot:btnBox>
+          <div class="btn-box">
+            <div class="btn" @click="goPage('all')">全部解析</div>
+            <div class="btn" @click="goPage('err')">错误解析</div>
+          </div>
+        </template>
+      </card>
+    </div>
+  </div>
+</template>
+<script>
+import chart from '../../components/pieChart.vue'
+import card from '../../components/resultCard.vue'
+import * as api from '@/api/exam.js'
+export default {
+  components: {
+    chart,
+    card
+  },
+  data() {
+    return {
+      data: {},
+      accuracy: 0
+    }
+  },
+  created() {
+    this.getExamPapers()
+  },
+  computed: {
+    setStyle() {
+      return `width: ${this.accuracy}%`
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    goPage(param) {
+      const urlParam = this.$route.query
+      urlParam.id = param
+      this.$router.push({
+        path: '/course/exam/chapter',
+        query: urlParam
+      })
+    },
+    getExamPapers() {
+      const param = {
+        type: 1,
+        is_create: 0,
+        course_id: this.$route.query.course_id,
+        chapter_id: this.$route.query.chapter_id
+      }
+      api
+        .getCourseQuestion(param)
+        .then(response => {
+          const data = JSON.parse(response.data)
+          this.data = data
+          this.accuracy = parseInt(data.sheet.score) / parseInt(data.sheet.questions.total_score)
+        })
+        .finally(() => {
+        })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.result-box{
+  width: 100%;
+  display: flex;
+  .card-left{
+    position: relative;
+    box-sizing: border-box;
+    padding: 10px 30px 20px;
+    flex: 1;
+    background: #fff;
+    margin-right: 10px;
+    height: 560px;
+    border-radius: 8px;
+    .title{
+      font-size: 18px;
+      color: #222222;
+      line-height: 45px;
+      border-bottom: 1px solid #ccc;
+    }
+    .chart-box{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -webkit-transform: translate(-50%, -50%);
+      width: 148px;
+      // margin: 26px auto 0;
+    }
+    .assess{
+      font-size: 18px;
+      color: #222222;
+      line-height: 45px;
+      border-bottom: 1px solid #ccc;
+    }
+    .assess-box{
+      padding-top: 27px;
+      .prog{
+        width: 350px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .line-box{
+          width: 300px;
+          width: 300px;
+          height: 10px;
+          background: #F9F9F9;
+          border-radius: 5px;
+          .line{
+            width: 80%;
+            height: 10px;
+            background: linear-gradient(90deg, #F47C46 0%, #F22F48 100%);
+            border-radius: 5px;
+          }
+        }
+        .icon{
+          width: 41px;
+          height: 38px;
+          background: url(@/assets/images/res-icon.png);
+          background-size: 100% 100%;
+        }
+      }
+      .text{
+        font-size: 14px;
+        color: #222222;
+        line-height: 20px;
+        text-align: center;
+        margin: 50px 0 68px 0;
+      }
+      .btn{
+        cursor: pointer;
+        text-align: center;
+        line-height: 40px;
+        width: 144px;
+        height: 40px;
+        background: #C01540;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: bold;
+        color: #FFFFFF;
+        margin: 0 auto;
+      }
+    }
+  }
+  .card-right{
+    box-sizing: border-box;
+    flex: 1;
+    background: #fff;
+    height: 560px;
+    border-radius: 8px;
+    margin-left: 10px;
+    padding: 10px 30px 0;
+  }
+}
+</style>

src/router/routes.js

@@ -46,6 +46,11 @@ const examAnswer = [
   {
     path: '/mock/result',
     component: () => import(/* webpackChunkName: "exam" */ '@/pages/exam/mockExam/exam/result')
+  },
+  /* 章节测试结果页 */
+  {
+    path: '/course/chapter/result',
+    component: () => import(/* webpackChunkName: "exam" */ '@/pages/exam/courseExam/chapter/result')
   }
 ]
 
@@ -131,5 +136,10 @@ export default [
     path: '/course/exam/examSite',
     component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/exam/courseExam/examSite/index')
   },
+  /* 章节练习 */
+  {
+    path: '/course/exam/chapter',
+    component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/exam/courseExam/chapter/index')
+  },
   ...viewerRoutes
 ]