From 9393086d17df9524cfca4d37a4f4d1c40b477d3d Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Tue, 5 Mar 2024 13:59:36 +0100
Subject: [PATCH] feat(quiz): completion + score

---
 src/modules/http-status/pages/index.vue     | 16 ++++++++--
 src/modules/quiz/components/score-panel.vue | 33 +++++++++++++++++++++
 src/modules/quiz/composables/useQuiz.ts     | 12 ++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/quiz/components/score-panel.vue

diff --git a/src/modules/http-status/pages/index.vue b/src/modules/http-status/pages/index.vue
index 9652ea6..6cad05e 100644
--- a/src/modules/http-status/pages/index.vue
+++ b/src/modules/http-status/pages/index.vue
@@ -1,15 +1,27 @@
 <script setup lang="ts">
 import { getHttpCodeQuestions } from '../http-status.usecases';
 
-const { currentQuestion, selectAnswer, isAnswered, selectedAnswer, goToNextQuestion } = useQuiz({
+const questionCount = 10;
+
+const { currentQuestion, selectAnswer, isAnswered, selectedAnswer, goToNextQuestion, isFinished, reset, score, progress, currentQuestionIndex } = useQuiz({
   questionsBuilder: getHttpCodeQuestions,
+  questionCount,
 });
 </script>
 
 <template>
   <div class="flex flex-col items-center justify-center">
     <div class="flex flex-col items-center max-w-md text-center mt-12">
-      <ClientOnly>
+      <div v-if="isFinished">
+        <score-panel :score="score" :total="questionCount" />
+
+        <UButton @click="reset" size="lg" color="primary" trailingIcon="i-tabler-arrow-right"> Try again </UButton>
+      </div>
+
+      <ClientOnly v-else>
+        <UProgress :value="progress" class="w-full mb-4" />
+        <div class="text-gray-400 mb-4">Question {{ currentQuestionIndex + 1 }} of {{ questionCount }}</div>
+
         <h1 class="text-xl text-neutral-300">{{ currentQuestion.question }}</h1>
         <h2 class="text-4xl font-bold my-10">{{ currentQuestion.heading }}</h2>
 
diff --git a/src/modules/quiz/components/score-panel.vue b/src/modules/quiz/components/score-panel.vue
new file mode 100644
index 0000000..3e05907
--- /dev/null
+++ b/src/modules/quiz/components/score-panel.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const props = defineProps<{ score: number; total: number }>();
+const { score, total } = toRefs(props);
+
+const percentage = computed(() => (score.value / total.value) * 100);
+
+const sentence = computed(() => {
+  if (percentage.value === 100) {
+    return 'Congratulations! You got a perfect score!';
+  }
+
+  if (percentage.value > 80) {
+    return 'Great job!';
+  }
+
+  if (percentage.value > 50) {
+    return 'Good effort!';
+  }
+
+  if (percentage.value > 25) {
+    return 'You can do better!';
+  }
+
+  return 'If you would have answered randomly, you would have scored better!';
+});
+</script>
+
+<template>
+  <div>
+    <h1 class="text-3xl font-bold">You scored {{ score }}/{{ total }}</h1>
+    <p class="text-lg my-8 text-gray-400">{{ sentence }}</p>
+  </div>
+</template>
diff --git a/src/modules/quiz/composables/useQuiz.ts b/src/modules/quiz/composables/useQuiz.ts
index d35fef8..7c90d8f 100644
--- a/src/modules/quiz/composables/useQuiz.ts
+++ b/src/modules/quiz/composables/useQuiz.ts
@@ -10,6 +10,7 @@ function useQuiz({ questionsBuilder: createQuestions, questionCount = 10 }: { qu
   const selectedAnswer = ref<QuestionAnswer | undefined>(undefined);
   const state = ref<'answering' | 'answered' | 'finished'>('answering');
   const score = ref(0);
+  const progress = computed(() => (currentQuestionIndex.value / questions.value.length) * 100);
 
   const selectAnswer = ({ answer }: { answer: QuestionAnswer }) => {
     if (answer.isCorrect) {
@@ -30,14 +31,25 @@ function useQuiz({ questionsBuilder: createQuestions, questionCount = 10 }: { qu
     }
   };
 
+  const reset = () => {
+    questions.value = createQuestions({ questionCount: get(questionCount) });
+    currentQuestionIndex.value = 0;
+    selectedAnswer.value = undefined;
+    state.value = 'answering';
+    score.value = 0;
+  };
+
   return {
     questions,
     currentQuestion,
+    currentQuestionIndex,
     selectedAnswer,
     state,
     score,
     selectAnswer,
     goToNextQuestion,
+    reset,
+    progress,
     isAnswered: computed(() => state.value === 'answered'),
     isFinished: computed(() => state.value === 'finished'),
     isAnswering: computed(() => state.value === 'answering'),