feat(quiz): completion + score

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>
 

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>

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'),