考试UI: 音频播放

src/App.vue

@@ -27,7 +27,6 @@ export default {
           this.transitionName = "slide-left";
         }
       }
-      console.log("App: " + this.transitionName);
     }
   }
 };

src/features/OnlineExam/Examing/BooleanQuestionView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="question-view">
-    <div class="question-body" v-html="question.body"></div>
+    <question-body :questionBody="question.body" :examQuestionId="examQuestion.id"></question-body>
     <div class="ops">
       <div class="stu-answer"> {{stuAnswer}}</div>
       <div class="score">({{question.questionScore}}分)</div>
@@ -20,6 +20,8 @@
 </template>
 
 <script>
+import QuestionBody from "./QuestionBody";
+
 export default {
   name: "BooleanQuestionView",
   data() {
@@ -68,7 +70,9 @@ export default {
       });
     }
   },
-  watch: {}
+  components: {
+    QuestionBody
+  }
 };
 </script>
 

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -81,11 +81,13 @@ export default {
       );
       this.exam = exam.data;
 
-      const paperStruct = await this.$http.get(
-        "/api/exam_question/paper_struct/?exam_record_id=" +
-          this.$route.query.examRecordId
-      );
-      this.paperStruct = paperStruct.data;
+      if (!this.paperStruct || this.paperStruct.length == 0) {
+        const paperStruct = await this.$http.get(
+          "/api/exam_question/paper_struct/?exam_record_id=" +
+            this.$route.query.examRecordId
+        );
+        this.paperStruct = paperStruct.data;
+      }
 
       // FIXME: global API processing. mock or not
       const examQuestionList = await this.$http.get(

src/features/OnlineExam/Examing/FillBlankQuestionView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="question-view">
-    <div class="question-body" v-html="questionBody"></div>
+    <question-body :questionBody="question.body" :examQuestionId="examQuestion.id"></question-body>
     <div class="ops">
       <div class="score">({{question.questionScore}}分)</div>
     </div>
@@ -15,6 +15,8 @@
 </template>
 
 <script>
+import QuestionBody from "./QuestionBody";
+
 export default {
   name: "FillBlankQuestionView",
   data() {
@@ -30,7 +32,6 @@ export default {
   },
   created() {
     const questionNumber = this.question.body.split(/_{5,}/).length - 1;
-    console.log(questionNumber);
 
     const answers = this.examQuestion.stuAnswer
       ? this.examQuestion.stuAnswer.split("##")
@@ -82,6 +83,9 @@ export default {
     examQuestion: function() {
       this.stuAnswer = this.examQuestion.stuAnswer || "";
     }
+  },
+  components: {
+    QuestionBody
   }
 };
 </script>

src/features/OnlineExam/Examing/MultipleQuestionView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="question-view">
-    <div class="question-body" v-html="question.body"></div>
+    <question-body :questionBody="question.body" :examQuestionId="examQuestion.id"></question-body>
     <div class="ops">
       <div class="stu-answer"> {{stuAnswer}}</div>
       <div class="score">({{question.questionScore}}分)</div>
@@ -17,6 +17,8 @@
 </template>
 
 <script>
+import QuestionBody from "./QuestionBody";
+
 const optionName = ["A", "B", "C", "D", "E", "F"];
 export default {
   name: "MultipleQuestionView",
@@ -92,6 +94,9 @@ export default {
     examQuestion: function() {
       this.stuAnswer = this.examQuestion.stuAnswer;
     }
+  },
+  components: {
+    QuestionBody
   }
 };
 </script>

src/features/OnlineExam/Examing/QuestionBody.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="question-body" :key="examQuestionId">
+    <div v-html="question.text"></div>
+    <div v-html="question.audio"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "QuestionBody",
+  props: {
+    questionBody: String,
+    examQuestionId: Number
+  },
+  mounted() {
+    const audio = document.getElementsByTagName("audio")[0];
+
+    audio &&
+      audio.addEventListener("play", () => {
+        console.log("开始播放");
+
+        //FIXME: error
+        this.$http
+          .post("/api/exam_question_playtimes", {
+            questionId: this.examQuestionId
+            // mediaName: mediaName
+          })
+          .then(
+            function() {
+              console.log("保存播放次数成功");
+            },
+            function() {
+              console.log("保存播放次数失败");
+            }
+          );
+      });
+  },
+  computed: {
+    question: function() {
+      let question = {};
+      if (this.questionBody.includes("question-audio")) {
+        const audioArray = this.questionBody.match(
+          /<a.*?question-audio.*?\/a>/g
+        );
+        question.text = this.questionBody.replace(
+          /<a.*?question-audio.*?\/a>/g,
+          ""
+        );
+        question.audio = audioArray
+          .join("")
+          .replace(/<a/g, "<audio controls controlsList='nodownload'")
+          .replace(/url=/g, "src=")
+          .replace(/a>/g, "audio>");
+
+        this.$http
+          .get("/api/exam_question_playtimes", {
+            params: {
+              questionId: this.examQuestionId
+            }
+          })
+          .then(res => {
+            //FIXME: audio playtimes
+            console.log(res.data);
+          });
+      } else {
+        question.text = this.questionBody;
+        question.audio = "";
+      }
+      return question;
+    }
+  }
+};
+</script>
+
+<style >
+.question-body audio {
+  width: 180px;
+}
+.question-body audio::-webkit-media-controls-timeline,
+.question-body audio::-webkit-media-controls-timeline-container {
+  display: none;
+}
+</style>

src/features/OnlineExam/Examing/SingleQuestionView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="question-view">
-    <div class="question-body" v-html="question.body"></div>
+    <question-body :questionBody="question.body" :examQuestionId="examQuestion.id"></question-body>
     <div class="ops">
       <div class="stu-answer">{{stuAnswer}}</div>
       <div class="score">({{question.questionScore}}分)</div>
@@ -17,6 +17,8 @@
 </template>
 
 <script>
+import QuestionBody from "./QuestionBody";
+
 const optionName = ["A", "B", "C", "D", "E", "F"];
 export default {
   name: "SingleQuestionView",
@@ -72,6 +74,9 @@ export default {
     examQuestion: function() {
       this.stuAnswer = this.examQuestion.stuAnswer;
     }
+  },
+  components: {
+    QuestionBody
   }
 };
 </script>

src/features/OnlineExam/Examing/TextQuestionView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="question-view">
-    <div class="question-body" v-html="question.body"></div>
+    <question-body :questionBody="question.body" :examQuestionId="examQuestion.id"></question-body>
     <div class="ops">
       <div class="score">({{question.questionScore}}分)</div>
     </div>
@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import QuestionBody from "./QuestionBody";
+
 export default {
   name: "TextQuestionView",
   data() {
@@ -37,6 +39,9 @@ export default {
         stuAnswer: null
       });
     }
+  },
+  components: {
+    QuestionBody
   }
 };
 </script>