答题导航

src/features/OnlineExam/Examing/ArrowNavView.vue

@@ -1,17 +1,20 @@
 <template>
-  <div>
+  <div class="arrow-container">
     <div class="prev">
       <template v-if="previousExamQuestion">
-        <router-link :to="{ path: '/online-exam/exam/' + this.$route.params.examId, query: { 'examRecordId': this.$route.query.examRecordId, 'examQuestionId': previousExamQuestion.id }}">上一题</router-link>
+        <router-link class="qm-primary-button" :to="{ path: '/online-exam/exam/' + this.$route.params.examId, query: { 'examRecordId': this.$route.query.examRecordId, 'examQuestionId': previousExamQuestion.id }}">上一题</router-link>
       </template>
 
       <template v-else>
         <div>上一题</div>
       </template>
     </div>
+    <div class="tips">
+      方向键 → 下一题。方向键 ← 上一题。<br>A、B、C、D来勾选选项。Y、N来勾选判断题。
+    </div>
     <div class="next">
       <template v-if="nextExamQuestion">
-        <router-link :to="{ path: '/online-exam/exam/' + this.$route.params.examId, query: { 'examRecordId': this.$route.query.examRecordId, 'examQuestionId': nextExamQuestion.id }}">下一题</router-link>
+        <router-link class="qm-primary-button" :to="{ path: '/online-exam/exam/' + this.$route.params.examId, query: { 'examRecordId': this.$route.query.examRecordId, 'examQuestionId': nextExamQuestion.id }}">下一题</router-link>
       </template>
 
       <template v-else>
@@ -31,6 +34,49 @@ export default {
   props: {
     previousExamQuestion: Object,
     nextExamQuestion: Object
+  },
+  created: function() {
+    window.addEventListener("keyup", this.keyup);
+  },
+  destroyed() {
+    window.removeEventListener("keyup", this.keyup);
+  },
+  methods: {
+    keyup(e) {
+      // console.log(e);
+      if (e.code === "ArrowRight" && this.nextExamQuestion) {
+        this.goToNextQuestion();
+      }
+      if (e.code === "ArrowLeft" && this.previousExamQuestion) {
+        this.goToPreviousQuestion();
+      }
+    },
+    goToNextQuestion() {
+      this.$router.push({
+        path: "/online-exam/exam/" + this.$route.params.examId,
+        query: {
+          examRecordId: this.$route.query.examRecordId,
+          examQuestionId: this.nextExamQuestion.id
+        }
+      });
+    },
+    goToPreviousQuestion() {
+      this.$router.push({
+        path: "/online-exam/exam/" + this.$route.params.examId,
+        query: {
+          examRecordId: this.$route.query.examRecordId,
+          examQuestionId: this.previousExamQuestion.id
+        }
+      });
+    }
   }
 };
 </script>
+
+<style scoped>
+.arrow-container {
+  display: grid;
+  grid-template-columns: 120px 1fr 120px;
+  place-items: center;
+}
+</style>

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -12,7 +12,7 @@
     </div>
     <div class="side">
       <div class="question-nav">
-        question nav
+        <QuestionNavView :paperStruct="paperStruct" :validQuestions="validQuestions" />
       </div>
       <div class="camera">
         camera
@@ -27,6 +27,7 @@ import OverallProgress from "./OverallProgress.vue";
 import QuestionFilters from "./QuestionFilters.vue";
 import QuestionView from "./QuestionView.vue";
 import ArrowNavView from "./ArrowNavView.vue";
+import QuestionNavView from "./QuestionNavView.vue";
 
 export default {
   name: "ExamingHome",
@@ -101,7 +102,8 @@ export default {
     OverallProgress,
     QuestionFilters,
     QuestionView,
-    ArrowNavView
+    ArrowNavView,
+    QuestionNavView
   }
 };
 </script>
@@ -129,17 +131,21 @@ export default {
   grid-area: header;
 
   height: 80px;
+  background-color: #f5f5f5;
 }
 
 .main {
   display: grid;
 
   grid-area: main;
+
+  grid-template-rows: 1fr 50px;
 }
 
 .side {
   display: grid;
 
   grid-area: side;
+  background-color: #f5f5f5;
 }
 </style>

src/features/OnlineExam/Examing/FillBlankQuestionView.vue

@@ -14,7 +14,6 @@
 </template>
 
 <script>
-const optionName = ["A", "B", "C", "D", "E", "F"];
 export default {
   name: "FillBlankQuestionView",
   data() {
@@ -52,7 +51,7 @@ export default {
         stuAnswer: null
       });
     },
-    inputAnswer: function(e) {
+    inputAnswer: function() {
       const questionNumber = this.question.body.split(/_{5,}/).length - 1;
       let ans = "";
       document

src/features/OnlineExam/Examing/QuestionNavView.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="container">
+      <template v-if="paperStruct && validQuestions">
+        <div v-for="(struct, index1) in paperStruct" :key="index1" class="section">
+          <div class="title">{{struct.title}} ({{struct.totalScore}}分)</div>
+          <div class="list">
+            <div v-for="(_, index2) in new Array(struct.questionCount)" :key="index2" class="item">
+              <router-link :to="{ path: '/online-exam/exam/' + $route.params.examId, query: { 'examRecordId': $route.query.examRecordId, 'examQuestionId': getQuestionNum(index1, index2) }}">{{index2+1}}</router-link>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "QuestionNavView",
+  data() {
+    return {};
+  },
+  props: {
+    paperStruct: Array,
+    validQuestions: Array
+  },
+  methods: {
+    getQuestionNum: function(section, index) {
+      if (
+        !this.paperStruct ||
+        !this.validQuestions ||
+        this.validQuestions.length === 0
+      ) {
+        return 0;
+      }
+      let total = 0;
+      for (var i = 0; i < section; i++) {
+        total += this.paperStruct[i].questionCount;
+      }
+      // console.log(section, index, total + index);
+      return this.validQuestions[total + index].id;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  display: grid;
+}
+.section {
+  display: grid;
+  place-items: flex-start;
+  margin: 0 20px;
+  margin-bottom: 20px;
+}
+.title {
+  margin-bottom: 5px;
+}
+.list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.item {
+  border-radius: 50%;
+  border: 1px solid #cccccc;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+}
+</style>

src/features/OnlineExam/Examing/QuestionView.vue

@@ -52,7 +52,7 @@ export default {
             this.examQuestion.parentQuestion.questionId)
       );
       const question = res.data;
-      const examQuestion = this.examQuestion;
+      // const examQuestion = this.examQuestion;
 
       const transferWellNumberAndTrustInBody = function(repQuestion) {
         //将题干中的三个#替换为下划线
@@ -65,7 +65,7 @@ export default {
             .toString()
             .replace(new RegExp("###", "g"), "_______");
           //将题干中的两个##数字##替换为下划线
-          var baseIndex = examQuestion.orders - 1;
+          // var baseIndex = examQuestion.orders - 1;
           repQuestion.body = repQuestion.body
             .toString()
             .replace(/##(\d+)##/g, function(a, b) {

src/features/OnlineExam/Examing/TextQuestionView.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script>
-const optionName = ["A", "B", "C", "D", "E", "F"];
 export default {
   name: "TextQuestionView",
   data() {

src/styles/global.css

@@ -49,6 +49,7 @@
 
 .qm-primary-button {
   /* font-size: 36px; */
+  display: inline-block;
   height: 36px;
   font-size: 14px;
   color: #ffffff;