更新studentAnswer; 更新questionBody

http-test/online-exam.http

@@ -75,6 +75,6 @@ Content-Type: application/json;charset=UTF-8
 token: {{token}}
 key: {{key}}
 
-{"stuAnswer": "C"}
+{"studentAnswer": "C"}
 
 

src/features/OnlineExam/Examing/BooleanQuestionView.vue

@@ -2,15 +2,15 @@
   <div class="question-view">
     <question-body :questionBody="question.body" :examQuestionId="examQuestion.id"></question-body>
     <div class="ops">
-      <div class="stu-answer">{{stuAnswer}}</div>
+      <div class="stu-answer">{{studentAnswer}}</div>
       <div class="score">({{question.questionScore}}分)</div>
     </div>
     <div @click="() => answerQuestion(examQuestion.id, '正确')">
-      <input type="radio" name="question" value="正确" :checked="stuAnswer === '正确'" />
+      <input type="radio" name="question" value="正确" :checked="studentAnswer === '正确'" />
       <span class="question-options">正确</span>
     </div>
     <div @click="() => answerQuestion(examQuestion.id, '错误')">
-      <input type="radio" name="question" value="错误" :checked="stuAnswer === '错误'" />
+      <input type="radio" name="question" value="错误" :checked="studentAnswer === '错误'" />
       <span class="question-options">错误</span>
     </div>
     <div class="reset">
@@ -37,7 +37,7 @@ export default {
     window.removeEventListener("keyup", this.keyup);
   },
   methods: {
-    ...mapMutations(["updateExamQuestionAnswer"]),
+    ...mapMutations(["updateExamQuestion"]),
     keyup(e) {
       // console.log(e);
       // console.log(document.activeElement.type);
@@ -56,18 +56,18 @@ export default {
         }
       }
     },
-    async answerQuestion(examQuestionId, stuAnswer) {
-      if (stuAnswer !== this.examQuestion.stuAnswer) {
+    async answerQuestion(examQuestionId, studentAnswer) {
+      if (studentAnswer !== this.examQuestion.studentAnswer) {
         await this.$http.put("/api/exam_question/" + examQuestionId, {
-          stuAnswer
+          studentAnswer
         });
-        this.updateExamQuestionAnswer({ examQuestionId, stuAnswer });
+        this.updateExamQuestion({ examQuestionId, studentAnswer });
       }
     }
   },
   computed: {
-    stuAnswer() {
-      return this.examQuestion.stuAnswer;
+    studentAnswer() {
+      return this.examQuestion.studentAnswer;
     }
   },
   components: {

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -15,7 +15,7 @@
         <QuestionNavView :paperStruct="paperStruct" />
       </div>
       <div class="camera">
-        <FaceRecognition width="100%" height="100%" :showRecognizeButton="false" />
+        <!-- <FaceRecognition width="100%" height="100%" :showRecognizeButton="false" /> -->
       </div>
     </div>
   </div>
@@ -93,9 +93,9 @@ export default {
       // 初始化套题的答案，为回填部分选项做准备
       // for (let q of this.examQuestionList) {
       //   if (q.subQuestionList.length > 0) {
-      //     q.stuAnswer = [];
+      //     q.studentAnswer = [];
       //     for (let sq of q.subQuestionList) {
-      //       q.stuAnswer.push(sq.stuAnswer);
+      //       q.studentAnswer.push(sq.studentAnswer);
       //     }
       //   }
       // }
@@ -167,6 +167,9 @@ export default {
       if (val) {
         this.submitPaper();
       }
+    },
+    examQuestionList(val, oldVal) {
+      // console.log(val, oldVal);
     }
   },
   components: {

src/features/OnlineExam/Examing/FillBlankQuestionView.vue

@@ -4,14 +4,14 @@
     <div class="ops">
       <div class="score">({{question.questionScore}}分)</div>
     </div>
-    <div v-for="(option, index) in stuAnswer.split('##')" :key="examQuestion.id + index" class="option">
+    <div v-for="(option, index) in studentAnswer.split('##')" :key="examQuestion.id + index" class="option">
       <span class="question-options">{{index+1}}. </span>
       <input type="text" name="question" class="input-answer" :value="option" @input="inputAnswer" @blur="submitAnswer" />
     </div>
-    <div class="reset">
-      <i-button type="warning" size="large" @click="() => answerQuestion(examQuestion.id, null)">重置答案</i-button>
+      <div class="reset">
+        <i-button type="warning" size="large" @click="() => answerQuestion(examQuestion.id, null)">重置答案</i-button>
+      </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -20,10 +20,10 @@ import { createNamespacedHelpers } from "vuex";
 const { mapMutations } = createNamespacedHelpers("examingHomeModule");
 
 /**
- * 1. 进入页面，this.stuAnswer从examQuestion.stuAnswer获得数据
- * 2. 输入答案，this.stuAnswer更新，同时questionbody更新，但不提交答案
+ * 1. 进入页面，this.studentAnswer从examQuestion.studentAnswer获得数据
+ * 2. 输入答案，this.studentAnswer更新，同时questionbody更新，但不提交答案
  * 3. 输入框失去焦点，提交答案
- * 4. 切换页面，this.stuAnswer从examQuestion获得数据
+ * 4. 切换页面，this.studentAnswer从examQuestion获得数据
  *
  * FIXME: question没有更新。。。。
  * */
@@ -32,7 +32,7 @@ export default {
   name: "FillBlankQuestionView",
   data() {
     return {
-      stuAnswer: "",
+      studentAnswer: "",
       questionBody: ""
     };
   },
@@ -45,20 +45,20 @@ export default {
   },
   // beforeUpdate() {
   //   this.prepareData();
-  // const realAnswer = this.stuAnswer.replace(/##/g, "").trim() || null;
-  // if (realAnswer !== this.examQuestion.stuAnswer) {
+  // const realAnswer = this.studentAnswer.replace(/##/g, "").trim() || null;
+  // if (realAnswer !== this.examQuestion.studentAnswer) {
   //   this.answerQuestion(this.examQuestion.id, realAnswer);
   // }
   // },
   methods: {
-    ...mapMutations(["updateExamQuestionAnswer"]),
+    ...mapMutations(["updateExamQuestion"]),
     prepareData() {
       const questionNumber = this.question.body.split(/_{5,}/).length - 1;
 
-      this.stuAnswer =
-        this.examQuestion.stuAnswer || "##".repeat(questionNumber - 1);
+      this.studentAnswer =
+        this.examQuestion.studentAnswer || "##".repeat(questionNumber - 1);
 
-      const answers = this.stuAnswer.split("##");
+      const answers = this.studentAnswer.split("##");
       this.questionBody = this.question.body.replace(
         /_{5,}/g,
         () =>
@@ -67,11 +67,11 @@ export default {
           "</span>"
       );
     },
-    async answerQuestion(examQuestionId, stuAnswer) {
+    async answerQuestion(examQuestionId, studentAnswer) {
       await this.$http.put("/api/exam_question/" + examQuestionId, {
-        stuAnswer
+        studentAnswer
       });
-      this.updateExamQuestionAnswer({ examQuestionId, stuAnswer });
+      this.updateExamQuestion({ examQuestionId, studentAnswer });
     },
     inputAnswer: function() {
       const questionNumber = this.question.body.split(/_{5,}/).length - 1;
@@ -79,8 +79,8 @@ export default {
       document
         .querySelectorAll(".option input")
         .forEach(e => (ans += e.value + "##"));
-      this.stuAnswer = ans.slice(0, -2);
-      const answers = this.stuAnswer.split("##");
+      this.studentAnswer = ans.slice(0, -2);
+      const answers = this.studentAnswer.split("##");
       this.questionBody = this.question.body.replace(
         /_{5,}/g,
         () =>
@@ -90,8 +90,8 @@ export default {
       );
     },
     submitAnswer() {
-      const realAnswer = this.stuAnswer.replace(/##/g, "").trim() || null;
-      if (realAnswer !== this.examQuestion.stuAnswer) {
+      const realAnswer = this.studentAnswer.replace(/##/g, "").trim() || null;
+      if (realAnswer !== this.examQuestion.studentAnswer) {
         this.answerQuestion(this.examQuestion.id, realAnswer);
       }
     }

src/features/OnlineExam/Examing/MultipleQuestionView.vue

@@ -2,11 +2,11 @@
   <div class="question-view">
     <question-body :questionBody="question.body" :examQuestionId="examQuestion.id"></question-body>
     <div class="ops">
-      <div class="stu-answer"> {{stuAnswer}}</div>
+      <div class="stu-answer"> {{studentAnswer}}</div>
       <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 && stuAnswer.includes(optionName[index])" />
+      <input type="checkbox" name="question" value="optionName[index]" :checked="studentAnswer && studentAnswer.includes(optionName[index])" />
       <span style="padding: 0 10px;">{{optionName[index]}}: </span>
       <span class="question-options" v-html="option.content"></span>
     </div>
@@ -27,7 +27,7 @@ export default {
   data() {
     return {
       optionName,
-      stuAnswer: this.examQuestion.stuAnswer || ""
+      studentAnswer: this.examQuestion.studentAnswer || ""
     };
   },
   props: {
@@ -41,10 +41,10 @@ export default {
     window.removeEventListener("keyup", this.keyup);
   },
   beforeUpdate() {
-    this.answerQuestion(this.examQuestion.id, this.stuAnswer);
+    this.answerQuestion(this.examQuestion.id, this.studentAnswer);
   },
   methods: {
-    ...mapMutations(["updateExamQuestionAnswer"]),
+    ...mapMutations(["updateExamQuestion"]),
     keyup(e) {
       // console.log(e);
       // console.log(document.activeElement.type);
@@ -60,10 +60,10 @@ export default {
             .slice(0, this.question.options.length)
             .includes(e.code)
         ) {
-          if (this.stuAnswer.includes(e.code[3])) {
-            this.stuAnswer = this.stuAnswer.replace(e.code[3], "");
+          if (this.studentAnswer.includes(e.code[3])) {
+            this.studentAnswer = this.studentAnswer.replace(e.code[3], "");
           } else {
-            this.stuAnswer = this.stuAnswer
+            this.studentAnswer = this.studentAnswer
               .concat(e.code[3])
               .split("")
               .sort()
@@ -73,36 +73,36 @@ export default {
       }
     },
     toggleAnswer: function(index) {
-      if (this.stuAnswer.includes(optionName[index])) {
-        this.stuAnswer = this.stuAnswer.replace(optionName[index], "");
+      if (this.studentAnswer.includes(optionName[index])) {
+        this.studentAnswer = this.studentAnswer.replace(optionName[index], "");
       } else {
-        this.stuAnswer = this.stuAnswer
+        this.studentAnswer = this.studentAnswer
           .concat(optionName[index])
           .split("")
           .sort()
           .join("");
       }
-      // this.answerQuestion(this.examQuestion.id, this.stuAnswer);
+      // this.answerQuestion(this.examQuestion.id, this.studentAnswer);
     },
-    async answerQuestion(examQuestionId, stuAnswer) {
-      let realAnswer = stuAnswer;
-      if (stuAnswer === "") {
+    async answerQuestion(examQuestionId, studentAnswer) {
+      let realAnswer = studentAnswer;
+      if (studentAnswer === "") {
         realAnswer = null;
       }
-      if (realAnswer !== this.examQuestion.stuAnswer) {
+      if (realAnswer !== this.examQuestion.studentAnswer) {
         await this.$http.put("/api/exam_question/" + examQuestionId, {
-          stuAnswer: realAnswer
+          studentAnswer: realAnswer
         });
-        this.updateExamQuestionAnswer({
+        this.updateExamQuestion({
           examQuestionId,
-          stuAnswer: realAnswer
+          studentAnswer: realAnswer
         });
       }
     }
   },
   watch: {
     examQuestion: function() {
-      this.stuAnswer = this.examQuestion.stuAnswer || "";
+      this.studentAnswer = this.examQuestion.studentAnswer || "";
     }
   },
   components: {

src/features/OnlineExam/Examing/NestedQuestionView.vue

@@ -39,13 +39,13 @@ export default {
   methods: {
     answerQuestion: function() {
       this.$http.put("/api/exam_question/" + this.examQuestion.id, {
-        stuAnswer: this.stuAnswer
+        studentAnswer: this.studentAnswer
       });
     },
     resetQuestion: function(examQuestionId) {
-      this.stuAnswer = "";
+      this.studentAnswer = "";
       this.$http.put("/api/exam_question/" + examQuestionId, {
-        stuAnswer: null
+        studentAnswer: null
       });
     }
   },

src/features/OnlineExam/Examing/QuestionBody.vue

@@ -76,7 +76,7 @@ export default {
   },
   computed: {},
   watch: {
-    $route() {
+    questionBody() {
       this.parseQuestion();
     }
   }

src/features/OnlineExam/Examing/QuestionNavView.vue

@@ -53,7 +53,10 @@ export default {
       let q = this.getQuestionNum(index1, index2);
 
       if (this.questionFilterType === "ALL") return true;
-      else if (this.questionFilterType === "ANSWERED" && q.stuAnswer !== null) {
+      else if (
+        this.questionFilterType === "ANSWERED" &&
+        q.studentAnswer !== null
+      ) {
         return true;
       } else if (this.questionFilterType === "SIGNED" && q.isSign) {
         return true;
@@ -67,12 +70,13 @@ export default {
     },
     itemClass(index1, index2) {
       const isCurrentQuestion =
-        this.$route.query.order == this.getQuestionNum(index1, index2).order; // 故意用的 ==
+        this.$route.params.order == this.getQuestionNum(index1, index2).order; // 故意用的 ==
       return {
         item: true,
         "current-question": isCurrentQuestion,
         "star-question": this.getQuestionNum(index1, index2).isSign,
-        "is-answered": this.getQuestionNum(index1, index2).stuAnswer !== null
+        "is-answered":
+          this.getQuestionNum(index1, index2).studentAnswer !== null
       };
     },
     sectionQuestions(section) {

src/features/OnlineExam/Examing/QuestionView.vue

@@ -31,7 +31,8 @@ import BooleanQuestionView from "./BooleanQuestionView";
 import FillBlankQuestionView from "./FillBlankQuestionView";
 import TextQuestionView from "./TextQuestionView";
 import NestedQuestionView from "./NestedQuestionView";
-import { mapState } from "vuex";
+import { createNamespacedHelpers } from "vuex";
+const { mapMutations } = createNamespacedHelpers("examingHomeModule");
 
 export default {
   name: "QuestionView",
@@ -47,10 +48,8 @@ export default {
     this.updateQuestion();
   },
   methods: {
+    ...mapMutations(["updateExamQuestion"]),
     async updateQuestion() {
-      if (!this.examQuestion) {
-        return;
-      }
       const res = await this.$http.get(
         "/api/ecs_oe_student/examQuestion/getQuestionContent?questionId=" +
           this.examQuestion.questionId
@@ -124,10 +123,19 @@ export default {
       this.question = question.questionUnitList[0];
     },
     async toggleSign() {
-      await this.$http.put("/api/exam_question/" + this.examQuestion.id, {
+      await this.$http.post(
+        "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
+        [
+          {
+            order: this.examQuestion.order,
+            isSign: !this.examQuestion.isSign
+          }
+        ]
+      );
+      this.updateExamQuestion({
+        order: this.$route.params.order,
         isSign: !this.examQuestion.isSign
       });
-      this.examQuestion.isSign = !this.examQuestion.isSign;
     }
   },
   watch: {
@@ -142,9 +150,6 @@ export default {
     FillBlankQuestionView,
     TextQuestionView,
     NestedQuestionView
-  },
-  computed: {
-    ...mapState(["user"])
   }
 };
 </script>

src/features/OnlineExam/Examing/SingleQuestionView.vue

@@ -2,16 +2,16 @@
   <div class="question-view">
     <question-body :questionBody="questionBody" :examQuestionId="examQuestion.id"></question-body>
     <div class="ops">
-      <div class="stu-answer">{{stuAnswer}}</div>
+      <div class="stu-answer">{{studentAnswer}}</div>
       <div class="score">({{examQuestion.questionScore}}分)</div>
     </div>
-    <div v-for="(option, index) in question.questionOptionList" :key="option.id" class="option" @click="() => answerQuestion(examQuestion.id, optionName[index])">
-      <input type="radio" name="question" value="optionName[index]" :checked="stuAnswer === optionName[index]" />
+    <div v-for="(option, index) in question.questionOptionList" :key="option.id" class="option" @click="() => answerQuestion(optionName[index])">
+      <input type="radio" name="question" value="optionName[index]" :checked="studentAnswer === optionName[index]" />
       <span style="padding: 0 10px;">{{optionName[index]}}: </span>
       <span class="question-options" v-html="option.body"></span>
     </div>
     <div class="reset">
-      <i-button type="warning" size="large" @click="resetQuestion(examQuestion.id)">重置答案</i-button>
+      <i-button type="warning" size="large" @click="() => answerQuestion(null)">重置答案</i-button>
     </div>
   </div>
 </template>
@@ -28,7 +28,7 @@ export default {
     return {
       questionBody: this.question.body,
       optionName,
-      stuAnswer: this.examQuestion.studentAnswer
+      studentAnswer: this.examQuestion.studentAnswer
     };
   },
   props: {
@@ -42,10 +42,10 @@ export default {
     window.removeEventListener("keyup", this.keyup);
   },
   beforeUpdate() {
-    this.answerQuestion(this.examQuestion.id, this.stuAnswer);
+    this.answerQuestion(this.studentAnswer);
   },
   methods: {
-    ...mapMutations(["updateExamQuestionAnswer"]),
+    ...mapMutations(["updateExamQuestion"]),
     keyup(e) {
       if (
         ["BODY", "A", "BUTTON", "DIV"].includes(
@@ -59,29 +59,35 @@ export default {
             .slice(0, this.question.questionOptionList.length)
             .includes(e.code)
         ) {
-          this.stuAnswer = e.code[3];
+          this.studentAnswer = e.code[3];
         }
       }
     },
-    async answerQuestion(examQuestionId, stuAnswer) {
-      if (stuAnswer !== this.examQuestion.studentAnswer) {
+    async answerQuestion(studentAnswer) {
+      if (studentAnswer !== this.examQuestion.studentAnswer) {
         await this.$http.post(
           "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
           [
             {
               order: this.examQuestion.order,
-              studentAnswer: stuAnswer
+              studentAnswer: studentAnswer
             }
           ]
         );
-        this.updateExamQuestionAnswer({ examQuestionId, stuAnswer });
+        this.updateExamQuestion({
+          order: this.$route.params.order,
+          studentAnswer
+        });
       }
     }
   },
   watch: {
-    examQuestion: function() {
-      this.stuAnswer = this.examQuestion.studentAnswer;
-      this.questionBody = this.question.body;
+    examQuestion: function(examQuestion) {
+      this.studentAnswer = examQuestion.studentAnswer;
+    },
+    question(question) {
+      this.questionBody = question.body;
+      console.log(this.questionBody);
     }
   },
   computed: {

src/features/OnlineExam/Examing/TextQuestionView.vue

@@ -5,8 +5,8 @@
       <div class="score">({{question.questionScore}}分)</div>
     </div>
     <div class="option">
-      <textarea v-model="stuAnswer" class="stu-answer" type="text" />
-    </div>
+      <textarea v-model="studentAnswer" class="stu-answer" type="text" />
+      </div>
     <div class="reset">
       <i-button type="warning" size="large" @click="resetQuestion(examQuestion.id)">重置答案</i-button>
     </div>
@@ -20,7 +20,7 @@ export default {
   name: "TextQuestionView",
   data() {
     return {
-      stuAnswer: this.examQuestion.stuAnswer
+      studentAnswer: this.examQuestion.studentAnswer
     };
   },
   props: {
@@ -30,13 +30,13 @@ export default {
   methods: {
     answerQuestion: function(examQuestionId) {
       this.$http.put("/api/exam_question/" + examQuestionId, {
-        stuAnswer: this.stuAnswer
+        studentAnswer: this.studentAnswer
       });
     },
     resetQuestion: function(examQuestionId) {
-      this.stuAnswer = null;
+      this.studentAnswer = null;
       this.$http.put("/api/exam_question/" + examQuestionId, {
-        stuAnswer: null
+        studentAnswer: null
       });
     }
   },

src/store.js

@@ -39,13 +39,20 @@ const examingHomeModule = {
     updateQuestionFilter(state, type) {
       state.questionFilterType = type;
     },
-    updateExamQuestionAnswer(state, { order, studentAnswer }) {
-      state.examQuestionList = state.examQuestionList.map(eq => {
-        if (eq.order === order) {
-          return Object.assign({}, eq, { studentAnswer });
+    updateExamQuestion(state, { order, studentAnswer, isSign }) {
+      const examQuestionList = state.examQuestionList.map(eq => {
+        // console.log(eq.order, order);
+        if (eq.order == order) {
+          return Object.assign(
+            {},
+            eq,
+            studentAnswer !== undefined && { studentAnswer },
+            isSign !== undefined && { isSign }
+          );
         }
         return eq;
       });
+      state = Object.assign(state, { examQuestionList });
     },
     shouldSubmitPaper(state) {
       state.shouldSubmitPaper = !state.shouldSubmitPaper;