feat: add do exam page

USNightOwl · Jun 20, 2024 · 04997db · 04997db
1 parent 4abfc24
commit 04997db
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="./src/assets/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Thi thử, làm trắc nghiệm online 100% miễn phí</title>
+
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/api/examsRepository.ts b/src/api/examsRepository.ts
@@ -5,6 +5,9 @@ const resource = "/category";
 export default {
   get(classId: string, currentPage: number) {
     return AxiosClient.get(`${resource}/${classId}/exams?page=${currentPage}`);
+  },
+  getOne(exerciseId: string) {
+    return AxiosClient.get(`/exam/${exerciseId}`);
   }
 }
 
diff --git a/src/components/Box.vue b/src/components/Box.vue
@@ -1,5 +1,5 @@
 <template lang="">
-    <router-link to="/" >
+    <router-link :to="`/lam-bai/${slug}`" >
       <div class="md:flex mb-6 gap-6 p-2 hover:bg-slate-100 rounded-md">
         <div class="md:w-3/12">
           <img
@@ -33,6 +33,10 @@
     description: {
       type: String,
       required: true,
+    },
+    slug: {
+      type: String,
+      required: true,
     }
   });
 </script>
diff --git a/src/components/DoExercise/Question.vue b/src/components/DoExercise/Question.vue
@@ -0,0 +1,42 @@
+<template lang="">
+  <div class="mb-4">
+    <h1 v-html="props.name" class="mb-2"></h1>
+    <p v-for="(ans, idx) in props.answers" :key="ans.id" class="text-sm mb-4 px-1 flex items-center">
+      <input 
+        :id="'question-'+props.questionId" 
+        type="radio" 
+        :value="idx" 
+        :name="'question-'+props.questionId" 
+        v-model="checked"
+        class="w-4 h-4 bg-gray-100 border-gray-300 cursor-pointer focus:outline-none"
+      />
+
+      <label 
+        :for="'question-'+props.questionId" 
+        :class="'ms-2 cursor-pointer ' + (checked===idx && 'text-[#67c23a]')"
+      >
+        {{ ans.name }}
+      </label>
+    </p>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from "vue";
+  const props = defineProps({
+    name: {
+      type: String,
+      required: true,
+    },
+    answers: {
+      type: Array,
+      required: true,
+    },
+    questionId: {
+      type: Number,
+      required: true,
+    }
+  });
+
+  const checked = ref();
+</script>
diff --git a/src/components/DoExercise/Title.vue b/src/components/DoExercise/Title.vue
@@ -0,0 +1,22 @@
+<template lang="">
+  <div class="my-5 flex md:gap-2 gap-4 items-center">
+    <h1 class="md:text-2xl text-xl font-bold text-center flex-1">
+      {{ props.name }}
+    </h1>
+    <router-link to="/" class="w-1/12">
+      <Icon icon="pi-home" className="md:text-2xl text-xl"/>
+    </router-link>
+  </div>
+
+</template>
+
+<script setup>
+  import Icon from "@/components/Icon.vue";
+
+  const props = defineProps({
+    name: {
+      type: String,
+      required: true,
+    }
+  });
+</script>
diff --git a/src/components/ListBox.vue b/src/components/ListBox.vue
@@ -6,6 +6,7 @@
       :name="exam.name"
       :avatar="exam.avatar"
       :description="exam.description || exam.meta_description"
+      :slug="exam.slug"
     />
 
     <custom-pagination 

diff --git a/src/layout/DefaultLayout.vue b/src/layout/DefaultLayout.vue
@@ -1,7 +1,7 @@
 <template lang="">
   <div>
     <Header/>
-    <div class="pt-12 min-h-screen px-5 md:px-20 mt-2">
+    <div class="pt-14 min-h-screen px-5 md:px-20">
       <router-view/>
     </div>
     <Footer/>

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -17,6 +17,11 @@ const routes = [
       },
     ]
   },
+  {
+    path: "/lam-bai/:exerciseId",
+    name: "do-exercise",
+    component: () => import("@/views/DoExercisePage.vue"),
+  },
   {
     path:"/:pathMatch(.*)*",
     name: "notfound",

diff --git a/src/style.css b/src/style.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+body {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+input[type='radio'] {
+  accent-color: green;
+}
diff --git a/src/views/DoExercisePage.vue b/src/views/DoExercisePage.vue
@@ -0,0 +1,63 @@
+<template lang="">
+  <div class="bg-slate-50 m-0 py-2 px-1">
+    <div class="md:w-9/12 rounded  mx-auto box-shadow bg-white text-[#606266] flex flex-col">
+      <div v-if="!loadingStore.isLoading && examData">
+        <Title :name="examData.value.exam.name"/>
+        <div class="md:px-4 px-2 text-lg mb-8">
+          <i class="font-medium">Thí sinh đọc kỹ đề trước khi làm bài.</i>
+          <div class="my-3">
+            <Question 
+              v-for="q in examData.value.exam.pages[0].questions"
+              :key="q.id"
+              :name="q.name"
+              :answers="q.answers"
+              :question-id="q.id"
+            />
+          </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">
+            <Icon icon="pi-check"/>
+            Nộp bài
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { useRoute } from 'vue-router';
+  import { watch, reactive } from "vue";
+  import { RepositoryFactory } from "@/api/RepositoryFactory";
+  import { useLoadingStore } from "@/store/loading";
+  import Title from "@/components/DoExercise/Title.vue";
+  import Question from "@/components/DoExercise/Question.vue";
+  import Icon from "@/components/Icon.vue";
+
+  const examData = reactive([]);
+  const loadingStore = useLoadingStore();
+  const route = useRoute();
+
+  watch(() => [route.path, route.query], async () => {
+    const exerciseId = route.params.exerciseId;
+    const ExamRepository = RepositoryFactory.get("exams");
+
+    loadingStore.changeLoadingState(true);
+    const { data } = await ExamRepository.getOne(exerciseId);
+    loadingStore.changeLoadingState(false);
+
+    examData.value = data;
+  }, { immediate: true });
+
+  function submitExam() {
+    alert("This feature will implement later");
+  }
+</script>
+
+<style lang="scss">
+  .box-shadow {
+    box-shadow: 0 0 10px rgba(37, 41, 45, .1);
+  }
+</style>
diff --git a/src/views/ExercisePage.vue b/src/views/ExercisePage.vue
@@ -10,7 +10,7 @@
 <script setup>
   import ListBox from "@/components/ListBox.vue";
   import { useRoute } from 'vue-router';
-  import { computed, watch, reactive, ref } from "vue";
+  import { watch, reactive, ref } from "vue";
   import { RepositoryFactory } from "@/api/RepositoryFactory";
   import { useLoadingStore } from "@/store/loading";
 
@@ -35,6 +35,4 @@
 
     examsData.value = data;
   }, { immediate: true });
-  
-  
 </script>
diff --git a/yarn.lock b/yarn.lock
@@ -1997,6 +1997,11 @@ vue-demi@^0.12.5:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
   integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
 
+vue-mathjax-next@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/vue-mathjax-next/-/vue-mathjax-next-0.0.6.tgz#6f0d7b2bc30edd363bd94ab60ad42a5c2ccb6ade"
+  integrity sha512-H4nZ8t31TmBJgiR6pHrOGz+RWhlw34d0yhD8fi8CnXoGOydGFreNH/Crd/9Jfd2IMSu/I0AC3ymT9D09JRMIrw==
+
 vue-router@4:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.3.3.tgz#7505509d429a36694b12ba1f6530016c5ce5f6bf"