feat: see detailed answer

USNightOwl · Jun 26, 2024 · b625971 · b625971
1 parent 27c744b
commit b625971
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 5 deletions.
diff --git a/src/components/DoExercise/Question.vue b/src/components/DoExercise/Question.vue
@@ -1,6 +1,5 @@
 <template lang="">
-  <div class="mb-5">
-
+  <div class="mb-5" v-if="props.result == null">
     <h1 
       v-html="props.name"
       :class="{'text-red-500' : props.warning}"
@@ -22,10 +21,36 @@
       </label>
     </p>
   </div>
+
+  <div v-else>
+    <div class="flex items-center gap-3">
+      <Icon icon="pi-check" v-if="props.result.answer === props.result.answered" class="text-green-500 font-black"/>
+      <Icon icon="pi-times" v-else class="text-red-500 font-black"/>
+      <h1 v-html="props.name"></h1>
+    </div>
+    <p v-for="(ans, idx) in props.answers" :key="ans.id" class="text-[1rem] leading-4 mb-4 px-1 flex items-center mt-2 cursor-not-allowed">
+      <input 
+        :id="'question-'+props.questionId+'-'+idx" 
+        type="radio" 
+        :checked="ans.name===props.result.answered||ans.name===props.result.answer"
+        :class="'w-4 h-4 bg-gray-100 border-gray-300 cursor-not-allowed focus:outline-none ' +(ans.name===props.result.answered?'success':ans.name===props.result.answer?'error':'')"
+        autocomplete="off"
+        :disabled="!(ans.name===props.result.answered||ans.name===props.result.answer)"
+      />
+
+      <label 
+        :for="'question-'+props.questionId+'-'+idx"  
+        :class="'ms-2 cursor-not-allowed ' +(ans.name===props.result.answered?'text-[#48c00c]':ans.name===props.result.answer?'text-red-500':'')"
+      >
+        {{ ans.name }}
+      </label>
+    </p>
+  </div>
 </template>
 
 <script setup>
   import { ref, watch } from "vue";
+  import Icon from "@/components/Icon.vue";
   const emit = defineEmits(["update-answer"]);
 
   const props = defineProps({
@@ -51,6 +76,9 @@
     },
     warning: {
       type: Boolean,
+    },
+    result: {
+      type: Object || null,
     }
   });
 
@@ -59,4 +87,13 @@
   watch(() => checked.value, ()=>{
     emit("update-answer", checked.value, props.pageIdx, props.questionIdx)
   })
-</script>
+</script>
+
+<style scoped>
+  .error {
+    accent-color: red!important;
+  }
+  .success {
+    accent-color: green!important;
+  }
+</style>
diff --git a/src/components/DoExercise/Results.vue b/src/components/DoExercise/Results.vue
@@ -43,6 +43,7 @@
   import Quote from "@/components/DoExercise/Quote.vue";
   import router from "@/router";
 
+  const emit = defineEmits(["change-show-results"]);
   const props = defineProps({
     slug: {
       type: String,
@@ -67,7 +68,7 @@
   }
 
   function handleShowResults() {
-    alert("This feature will show the results and implement later");
+    emit("change-show-results");
   }
 
 </script>
diff --git a/src/views/DoExercisePage.vue b/src/views/DoExercisePage.vue
@@ -20,23 +20,33 @@
                 :question-idx="questionIdx"
                 :warning="q.warning==false||!isFirstSubmit?false:true"
                 @update-answer="handleUpdateAnswer"
+                :result="resultsData.value?.exam?.pages[pageIdx]?.questions[questionIdx]||null"
               />
             </div>
           </div>
         </div>
 
         <div class="flex justify-center mb-3">
-          <button @click="submitExam" type="button" class="px-4 py-1.5 rounded bg-[#67c23a] text-white hover:bg-[#67c23a]/80 flex items-center gap-2 text-base">
+          <button @click="submitExam" type="button" class="px-4 py-1.5 rounded bg-[#67c23a] text-white hover:bg-[#67c23a]/80 flex items-center gap-2 text-base"
+          v-if="resultsData.value?.exam==null"
+          >
             <Icon icon="pi-check"/>
             Nộp bài
           </button>
+          <router-link v-else class="border px-4 py-1.5 rounded flex items-center gap-2 text-base bg-[#f4f4f5] border-[#909399] hover:bg-[#909399] text-[#909399] hover:text-white"
+          :to="{ name: 'exercise', params: { classId: examData.value.category.slug } }"
+          >
+            <Icon icon="pi-send"/>
+            Làm các đề khác
+          </router-link>
         </div>
       </div>
 
       <div v-else-if="!loadingStore.isLoading && isShowResults">
         <Results
           :slug="examData.value.category.slug"
           :results="resultsData.value"
+          @change-show-results="isShowResults=false"
         />
       </div>
     </div>
@@ -106,6 +116,9 @@
     loadingStore.changeLoadingState(false);
 
     resultsData.value = data;
+
+    console.log(resultsData.value);
+
     isShowResults.value = true;
     toast.success("Nộp bài thành công", {
       toastStyle: {