完成试题UI

src/features/OnlineExam/Examing/ArrowNavView.vue

@@ -78,5 +78,13 @@ export default {
   display: grid;
   grid-template-columns: 120px 1fr 120px;
   place-items: center;
+
+  border-top: 1px solid #eeeeee;
+}
+.prev,
+.tips,
+.next {
+  display: grid;
+  place-items: center;
 }
 </style>

src/features/OnlineExam/Examing/BooleanQuestionView.vue

@@ -3,7 +3,6 @@
     <div class="question-body" v-html="question.body"></div>
     <div class="ops">
       <div class="stu-answer"> {{stuAnswer}}</div>
-      <i-button @click="resetQuestion(examQuestion.id)">重置</i-button>
       <div class="score">({{question.questionScore}}分)</div>
     </div>
     <div @click="answerQuestion(examQuestion.id, '正确')">
@@ -14,7 +13,9 @@
       <input type="radio" name="question" value="错误" :checked="stuAnswer === '错误'" />
       <span class="question-options">错误</span>
     </div>
-
+    <div class="reset">
+      <i-button type="warning" size="large" @click="resetQuestion(examQuestion.id)">重置答案</i-button>
+    </div>
   </div>
 </template>
 
@@ -48,7 +49,13 @@ export default {
 
 <style scoped>
 .question-view {
-  display: block;
+  display: grid;
+  grid-row-gap: 10px;
+}
+
+.question-body {
+  font-size: 18px;
+  margin-bottom: 10px;
 }
 
 .ops {
@@ -59,6 +66,7 @@ export default {
 .stu-answer {
   width: 100px;
   border-bottom: 1px solid black;
+  text-align: center;
 }
 
 .option {
@@ -66,6 +74,6 @@ export default {
 }
 .question-options {
   text-align: left;
-  padding-left: 10px;
+  margin-left: 10px;
 }
 </style>

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -46,11 +46,10 @@ export default {
     this.init();
   },
   beforeRouteUpdate(to, from, next) {
-    this.init();
-    next();
+    this.init(next);
   },
   methods: {
-    init: async function() {
+    init: async function(next) {
       const exam = await this.$http.get(
         "/api/ecs_exam_work/exam/" + this.$route.params.examId
       );
@@ -90,6 +89,7 @@ export default {
         );
         return;
       }
+      next && next();
       this.examQuestion = this.examQuestionList.find(
         eq => eq.id == this.$route.query.examQuestionId // number == string
       );

src/features/OnlineExam/Examing/FillBlankQuestionView.vue

@@ -2,14 +2,15 @@
   <div class="question-view">
     <div class="question-body" v-html="questionBody"></div>
     <div class="ops">
-      <i-button @click="resetQuestion(examQuestion.id)">重置</i-button>
       <div class="score">({{question.questionScore}}分)</div>
     </div>
-    <div v-for="(option, index) in stuAnswer.split('##')" :key="index" class="option">
+    <div v-for="(option, index) in stuAnswer.split('##')" :key="examQuestion.id + index" class="option">
       <span class="question-options">{{index+1}}. </span>
-      <input type="text" name="question" :value="option" @input="inputAnswer" />
+      <input type="text" name="question" class="input-answer" :value="option" @input="inputAnswer" />
+    </div>
+    <div class="reset">
+      <i-button type="warning" size="large" @click="resetQuestion(examQuestion.id)">重置答案</i-button>
     </div>
-
   </div>
 </template>
 
@@ -25,7 +26,7 @@ export default {
     let questionBody = this.question.body.replace(
       /_{5,}/g,
       () =>
-        "<span style='display: inline-block; min-width: 80px; border-bottom: 1px solid black'>" +
+        "<span style='display: inline-block; min-width: 80px; border-bottom: 1px solid black; text-align: center'>" +
         (answers.shift() || questionNumber - answers.length) +
         "</span>"
     );
@@ -63,15 +64,15 @@ export default {
       this.questionBody = this.question.body.replace(
         /_{5,}/g,
         () =>
-          "<span style='display: inline-block; min-width: 80px; border-bottom: 1px solid black'>" +
+          "<span style='display: inline-block; min-width: 80px; border-bottom: 1px solid black; text-align: center'>" +
           (answers.shift() || questionNumber - answers.length) +
           "</span>"
       );
     }
   },
   watch: {
-    stuAnswer: function() {
-      // question.body =
+    examQuestion: function() {
+      this.stuAnswer = this.examQuestion.stuAnswer;
     }
   }
 };
@@ -79,7 +80,13 @@ export default {
 
 <style scoped>
 .question-view {
-  display: block;
+  display: grid;
+  grid-row-gap: 10px;
+}
+
+.question-body {
+  font-size: 18px;
+  margin-bottom: 10px;
 }
 
 .ops {
@@ -90,13 +97,17 @@ export default {
 .stu-answer {
   width: 100px;
   border-bottom: 1px solid black;
+  text-align: center;
 }
 
 .option {
-  /* display: flex; */
+  display: flex;
+  line-height: 24px;
+}
+.input-answer {
+  width: 400px;
 }
 .question-options {
-  text-align: left;
-  padding-left: 10px;
+  padding-right: 10px;
 }
 </style>

src/features/OnlineExam/Examing/MultipleQuestionView.vue

@@ -3,15 +3,16 @@
     <div class="question-body" v-html="question.body"></div>
     <div class="ops">
       <div class="stu-answer"> {{stuAnswer}}</div>
-      <i-button @click="resetQuestion(examQuestion.id)">重置</i-button>
       <div class="score">({{question.questionScore}}分)</div>
     </div>
     <div v-for="(option, index) in question.options" :key="option.id" class="option" @click="toggleAnswer(index)">
-      <input type="checkbox" name="question" value="optionName[index]" :checked="stuAnswer.includes(optionName[index])" />
-      <span>{{optionName[index]}}: </span>
+      <input type="checkbox" name="question" value="optionName[index]" :checked="stuAnswer && stuAnswer.includes(optionName[index])" />
+      <span style="padding: 0 10px;">{{optionName[index]}}: </span>
       <span class="question-options" v-html="option.content"></span>
     </div>
-
+    <div class="reset">
+      <i-button type="warning" size="large" @click="resetQuestion(examQuestion.id)">重置答案</i-button>
+    </div>
   </div>
 </template>
 
@@ -21,7 +22,6 @@ export default {
   name: "MultipleQuestionView",
   data() {
     return {
-      // question: null
       optionName,
       stuAnswer: this.examQuestion.stuAnswer || ""
     };
@@ -33,7 +33,7 @@ export default {
   methods: {
     toggleAnswer: function(index) {
       if (this.stuAnswer.includes(optionName[index])) {
-        this.stuAnswer.replace(optionName[index], "");
+        this.stuAnswer = this.stuAnswer.replace(optionName[index], "");
       } else {
         this.stuAnswer = this.stuAnswer
           .concat(optionName[index])
@@ -55,13 +55,23 @@ export default {
       });
     }
   },
-  watch: {}
+  watch: {
+    examQuestion: function() {
+      this.stuAnswer = this.examQuestion.stuAnswer;
+    }
+  }
 };
 </script>
 
 <style scoped>
 .question-view {
-  display: block;
+  display: grid;
+  grid-row-gap: 10px;
+}
+
+.question-body {
+  font-size: 18px;
+  margin-bottom: 10px;
 }
 
 .ops {
@@ -72,6 +82,7 @@ export default {
 .stu-answer {
   width: 100px;
   border-bottom: 1px solid black;
+  text-align: center;
 }
 
 .option {
@@ -79,6 +90,5 @@ export default {
 }
 .question-options {
   text-align: left;
-  padding-left: 10px;
 }
 </style>

src/features/OnlineExam/Examing/NestedQuestionView.vue

@@ -65,7 +65,13 @@ export default {
 
 <style scoped>
 .question-view {
-  display: block;
+  display: grid;
+  grid-row-gap: 10px;
+}
+
+.question-body {
+  font-size: 18px;
+  margin-bottom: 10px;
 }
 
 .ops {
@@ -76,6 +82,7 @@ export default {
 .stu-answer {
   width: 100px;
   border-bottom: 1px solid black;
+  text-align: center;
 }
 
 .option {
@@ -83,6 +90,5 @@ export default {
 }
 .question-options {
   text-align: left;
-  padding-left: 10px;
 }
 </style>

src/features/OnlineExam/Examing/QuestionNavView.vue

@@ -5,7 +5,7 @@
         <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">
+            <div v-for="(_, index2) in new Array(struct.questionCount)" :key="index2" :class="itemClass(index1, index2)">
               <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>
@@ -41,8 +41,17 @@ export default {
       }
       // console.log(section, index, total + index);
       return this.validQuestions[total + index].id;
+    },
+    itemClass(index1, index2) {
+      return {
+        item: true,
+        "current-question":
+          this.$route.query.examQuestionId ==
+          this.getQuestionNum(index1, index2) // 故意用的 ==
+      };
     }
-  }
+  },
+  computed: {}
 };
 </script>
 
@@ -73,4 +82,7 @@ export default {
   margin-right: 5px;
   margin-bottom: 5px;
 }
+.current-question {
+  background-color: white;
+}
 </style>

src/features/OnlineExam/Examing/QuestionView.vue

@@ -1,7 +1,5 @@
 <template>
   <div v-if="question && examQuestion" class="question-view">
-    <div class="question-group">{{"大题占位"}}</div>
-    <div class="question-group-progress">{{"大题进度占位"}}</div>
     <template v-if="question.questionType === 'SINGLE_ANSWER_QUESTION'">
       <single-question-view :question="question" :examQuestion="examQuestion" />
     </template>
@@ -139,8 +137,9 @@ export default {
 </script>
 
 <style scoped>
-question-view {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+.question-view {
+  padding: 20px;
+  font-size: 16px;
+  text-align: left;
 }
 </style>

src/features/OnlineExam/Examing/SingleQuestionView.vue

@@ -3,15 +3,16 @@
     <div class="question-body" v-html="question.body"></div>
     <div class="ops">
       <div class="stu-answer"> {{stuAnswer}}</div>
-      <i-button @click="resetQuestion(examQuestion.id)">重置</i-button>
       <div class="score">({{question.questionScore}}分)</div>
     </div>
     <div v-for="(option, index) in question.options" :key="option.id" class="option" @click="answerQuestion(examQuestion.id, optionName[index])">
       <input type="radio" name="question" value="optionName[index]" :checked="stuAnswer === optionName[index]" />
-      <span>{{optionName[index]}}: </span>
+      <span style="padding: 0 10px;">{{optionName[index]}}: </span>
       <span class="question-options" v-html="option.content"></span>
     </div>
-
+    <div class="reset">
+      <i-button type="warning" size="large" @click="resetQuestion(examQuestion.id)">重置答案</i-button>
+    </div>
   </div>
 </template>
 
@@ -21,7 +22,6 @@ export default {
   name: "SingleQuestionView",
   data() {
     return {
-      // question: null
       optionName,
       stuAnswer: this.examQuestion.stuAnswer
     };
@@ -42,13 +42,23 @@ export default {
       });
     }
   },
-  watch: {}
+  watch: {
+    examQuestion: function() {
+      this.stuAnswer = this.examQuestion.stuAnswer;
+    }
+  }
 };
 </script>
 
 <style scoped>
 .question-view {
-  display: block;
+  display: grid;
+  grid-row-gap: 10px;
+}
+
+.question-body {
+  font-size: 18px;
+  margin-bottom: 10px;
 }
 
 .ops {
@@ -59,6 +69,7 @@ export default {
 .stu-answer {
   width: 100px;
   border-bottom: 1px solid black;
+  text-align: center;
 }
 
 .option {
@@ -66,6 +77,5 @@ export default {
 }
 .question-options {
   text-align: left;
-  padding-left: 10px;
 }
 </style>

src/features/OnlineExam/Examing/TextQuestionView.vue

@@ -2,13 +2,14 @@
   <div class="question-view">
     <div class="question-body" v-html="question.body"></div>
     <div class="ops">
-      <i-button @click="resetQuestion(examQuestion.id)">重置</i-button>
       <div class="score">({{question.questionScore}}分)</div>
     </div>
     <div class="option">
-      <input :model="stuAnswer" type="text" name="question" />
+      <textarea v-model="stuAnswer" class="stu-answer" type="text" />
+    </div>
+    <div class="reset">
+      <i-button type="warning" size="large" @click="resetQuestion(examQuestion.id)">重置答案</i-button>
     </div>
-
   </div>
 </template>
 
@@ -42,7 +43,13 @@ export default {
 
 <style scoped>
 .question-view {
-  display: block;
+  display: grid;
+  grid-row-gap: 10px;
+}
+
+.question-body {
+  font-size: 18px;
+  margin-bottom: 10px;
 }
 
 .ops {
@@ -51,15 +58,14 @@ export default {
 }
 
 .stu-answer {
-  width: 100px;
-  border-bottom: 1px solid black;
+  width: 500px;
+  min-height: 300px;
 }
 
 .option {
-  /* display: flex; */
+  display: flex;
 }
 .question-options {
   text-align: left;
-  padding-left: 10px;
 }
 </style>