Browse Source

套题切换时,不停止音频播放

Michael Wang 6 years ago
parent
commit
5bc7192a9d

+ 1 - 1
src/features/OnlineExam/Examing/QuestionBody.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="questionDetail" class="question-body" :key="examQuestion.order">
+  <div v-if="questionDetail" class="question-body" :key="examQuestion.questionId">
     <div v-html="questionDetail.text"></div>
     <!-- <div v-html="questionDetail.audio"></div> -->
     <div v-for="({src, name}, index) in questionDetail.audio" :key="name" class="audio-div">

+ 32 - 26
src/features/OnlineExam/Examing/QuestionView.vue

@@ -1,31 +1,37 @@
 <template>
-  <transition name="fade">
-    <div v-show="question && examQuestion" class="question-view" :key="examQuestion.order">
-      <div class="question-header">
-        <Icon :type="examQuestion.isSign ? 'ios-star':'ios-star-outline'" :style="{color: '#ffcc00'}" class="star" @click="toggleSign" />
-        <question-index :examQuestion="examQuestion" />
-      </div>
-      <div v-if="parentQuestionBody" class="question-view">
-        <question-body :questionBody="parentQuestionBody" :examQuestion="examQuestion" style="margin-bottom: 20px" :key="examQuestion.order"></question-body>
-        <div class="hr" />
-      </div>
-      <template v-if="question && question.questionType === 'SINGLE_CHOICE'">
-        <single-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
-      </template>
-      <template v-if="question && question.questionType === 'MULTIPLE_CHOICE'">
-        <multiple-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
-      </template>
-      <template v-if="question && question.questionType === 'TRUE_OR_FALSE'">
-        <boolean-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
-      </template>
-      <template v-if="question && question.questionType === 'FILL_UP'">
-        <fill-blank-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
-      </template>
-      <template v-if="question && question.questionType === 'ESSAY'">
-        <text-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
-      </template>
+
+  <div>
+    <div class="question-header">
+      <Icon :type="examQuestion.isSign ? 'ios-star':'ios-star-outline'" :style="{color: '#ffcc00'}" class="star" @click="toggleSign" />
+      <question-index :examQuestion="examQuestion" />
+    </div>
+    <div v-if="parentQuestionBody" class="question-view">
+      <question-body :questionBody="parentQuestionBody" :examQuestion="examQuestion" style="margin-bottom: 20px" :key="examQuestion.questionId"></question-body>
+      <div class="hr" />
     </div>
-  </transition>
+
+    <transition name="fade">
+
+      <div v-show="question && examQuestion" class="question-view" :key="examQuestion.order">
+
+        <template v-if="question && question.questionType === 'SINGLE_CHOICE'">
+          <single-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
+        </template>
+        <template v-if="question && question.questionType === 'MULTIPLE_CHOICE'">
+          <multiple-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
+        </template>
+        <template v-if="question && question.questionType === 'TRUE_OR_FALSE'">
+          <boolean-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
+        </template>
+        <template v-if="question && question.questionType === 'FILL_UP'">
+          <fill-blank-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
+        </template>
+        <template v-if="question && question.questionType === 'ESSAY'">
+          <text-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
+        </template>
+      </div>
+    </transition>
+  </div>
 </template>
 
 <script>