显示选项中的音频。需后端做对应改动。

src/features/OnlineExam/Examing/FaceTracking.vue

@@ -54,9 +54,12 @@ export default {
           }
 
           if (trackMultiplePerson) {
-            that.$Message.warning("请独立完成考试");
+            that.$Message.warning({ content: "请独立完成考试", duration: 15 });
           } else {
-            that.$Message.warning("请调整坐姿，诚信考试");
+            that.$Message.warning({
+              content: "请调整坐姿，诚信考试",
+              duration: 15
+            });
           }
           trackWarnings = 0;
           trackMultiplePerson = false;

src/features/OnlineExam/Examing/MultipleQuestionView.vue

@@ -6,10 +6,12 @@
       <div class="score">({{examQuestion.questionScore}}分)</div>
     </div>
     <div v-for="(option, index) in newQuestionOptions" :key="index" class="option" @click="toggleAnswer(option.oldIndex)">
-      <div :class="studentAnswer.includes(option.oldIndex) && 'row-selected'">
-        <input type="checkbox" name="question" value="option.oldIndex" :checked="studentAnswer && studentAnswer.includes(option.oldIndex)" />
+      <div :class="studentAnswer.includes(option.oldIndex) && 'row-selected'" style="display: flex;">
+        <input type="checkbox" name="question" value="option.oldIndex" :checked="studentAnswer && studentAnswer.includes(option.oldIndex)" style="margin-top: 4px" />
         <span style="padding: 0 10px;">{{optionName[index]}}: </span>
-        <span class="question-options" v-if="option.value" v-html="option.value.body"></span>
+        <div class="question-options" v-if="option.value">
+          <question-body :questionBody="option.value.body" :examQuestion="examQuestion"></question-body>
+        </div>
       </div>
     </div>
     <div class="reset">
@@ -201,4 +203,9 @@ export default {
 .question-options {
   text-align: left;
 }
+
+.question-options > .question-body {
+  text-align: left;
+  font-size: 16px !important;
+}
 </style>

src/features/OnlineExam/Examing/QuestionBody.vue

@@ -2,10 +2,10 @@
   <div v-if="questionDetail" class="question-body" :key="examQuestion.order">
     <div v-html="questionDetail.text"></div>
     <!-- <div v-html="questionDetail.audio"></div> -->
-    <div v-for="(ad, index) in questionDetail.audio" :key="ad" class="audio-div">
-      <audio controls preload="auto" controlsList='nodownload' :src="ad" @play="($event) => played(index, $event)"></audio>
+    <div v-for="({src, name}, index) in questionDetail.audio" :key="name" class="audio-div">
+      <audio controls preload="auto" controlsList='nodownload' :name="name" :src="src" @play="($event) => played(index, $event)"></audio>
       <span>（剩余播放次数：{{examQuestion.limitedPlayTimes -
-        audioPlayTimes[index]}}）</span><br />
+        (audioPlayTimes.find(a => a.name === name) || { times: 0 }).times}}）</span><br />
     </div>
   </div>
 
@@ -79,12 +79,13 @@ export default {
         // /question-audio.*?url="[^"]*"/.exec(this.questionBody)
 
         question.audio = [];
-        let re = /question-audio.*?url="([^"]*)"/g;
+        let re = /name="([^"]*)".*question-audio.*?url="([^"]*)"/g;
         let array1;
         while ((array1 = re.exec(this.questionBody)) !== null) {
           // console.log(`Found ${array1[0]}. Next starts at ${re.lastIndex}.`);
           // console.log(array1[1]);
-          question.audio.push(array1[1]);
+          question.audio.push({ name: array1[1], src: array1[2] });
+          console.log(question.audio);
           // expected output: "Found foo. Next starts at 9."
           // expected output: "Found foo. Next starts at 19."
         }
@@ -130,15 +131,24 @@ export default {
       const limitedPlayTimes = this.examQuestion.limitedPlayTimes;
       let audioPlayTimes = this.audioPlayTimes;
       console.log("开始播放");
-      if (limitedPlayTimes - audioPlayTimes[index] <= 0) {
+      // console.log($event.target.attributes.name.value);
+      const name = $event.target.attributes.name.value;
+      // console.log(name);
+      const theAudio = audioPlayTimes.find(a => a.name === name);
+      const playedTimes = (theAudio || { times: 0 }).times;
+      if (limitedPlayTimes - playedTimes <= 0) {
         console.log("无剩余播放次数");
         $event.target.pause();
         return;
       }
-      audioPlayTimes[index] = audioPlayTimes[index] + 1;
+      if (theAudio) {
+        theAudio.times = playedTimes + 1;
+      } else {
+        this.audioPlayTimes.push({ name: name, times: 1 });
+      }
       this.updateExamQuestion({
         order: this.examQuestion.order,
-        audioPlayTimes: audioPlayTimes
+        audioPlayTimes: this.audioPlayTimes
       });
     }
   },

src/features/OnlineExam/Examing/SingleQuestionView.vue

@@ -6,10 +6,12 @@
       <div class="score">({{examQuestion.questionScore}}分)</div>
     </div>
     <div v-for="(option, index) in newQuestionOptions" :key="index" class="option" @click="() => {answerQuestion(option.oldIndex);}">
-      <div :class="studentAnswer === option.oldIndex && 'row-selected'">
-        <input type="radio" name="question" :value="option.oldIndex" :checked="studentAnswer === option.oldIndex" />
+      <div :class="studentAnswer === option.oldIndex && 'row-selected'" style="display: flex;">
+        <input type="radio" name="question" :value="option.oldIndex" :checked="studentAnswer === option.oldIndex" style="margin-top: 4px" />
         <span style="padding: 0 10px;">{{optionName[index]}}: </span>
-        <span class="question-options" v-if="option.value" v-html="option.value.body"></span>
+        <div class="question-options" v-if="option.value">
+          <question-body :questionBody="option.value.body" :examQuestion="examQuestion"></question-body>
+        </div>
       </div>
     </div>
     <div class="reset">
@@ -174,7 +176,8 @@ export default {
   width: 100%;
 }
 
-.question-options {
+.question-options > .question-body {
   text-align: left;
+  font-size: 16px !important;
 }
 </style>