result - show if chosen correct/incorrect answer

app.vue

@@ -11,4 +11,13 @@
   @apply absolute top-[50%] left-[50%];
   transform: translate(-50%, -50%);
 }
+/* .page-enter-active,
+.page-leave-active {
+  transition: all 0.4s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+} */
 </style>

components/RightBarResult.vue

@@ -23,6 +23,16 @@ const boxesAmount = computed(() => {
     return 0;
   }
 });
+
+const countSwitchable = computed(() => {
+  if (isBasic.value) {
+    return props.countBasic;
+  } else if (isAdvanced.value) {
+    return props.countAdvanced;
+  } else {
+    return 0;
+  }
+});
 </script>
 
 <template>
@@ -30,8 +40,9 @@ const boxesAmount = computed(() => {
     class="flex flex-col items-center p-4 gap-6 border-l border-slate-300 bg-slate-100"
   >
     <div>
-      <button @click="" class="btn-major">Wróć na stronę główną</button>
-      <button @click="" class="btn-major">Rozpocznij jeszcze raz</button>
+      <button @click="$emit('nav', '/')" class="btn-major">
+        Wróć na stronę główną
+      </button>
     </div>
     <div class="flex flex-row gap-6 *:flex-1 w-full">
       <button
@@ -52,23 +63,57 @@ const boxesAmount = computed(() => {
     >
       <div
         v-for="num in range(1, boxesAmount)"
-        class="p-1 bg-blue-500 text-white text-center"
+        class="p-1 bg-blue-500 text-white text-center cursor-pointer"
+        @click="$emit('change-count', num - 1)"
+        :class="`${
+          isBasic
+            ? result.basic[num - 1].question?.poprawna_odp.toLowerCase() ==
+              result.basic[num - 1].chosen_answer
+              ? 'bg-green-500'
+              : 'bg-red-500'
+            : ''
+        }${
+          isAdvanced
+            ? result.advanced[num - 1].question?.poprawna_odp.toLowerCase() ==
+              result.advanced[num - 1].chosen_answer
+              ? 'bg-green-500'
+              : 'bg-red-500'
+            : ''
+        } ${countSwitchable + 1 == num ? '!bg-orange-500' : ''}`"
       >
         {{ num }}
       </div>
     </div>
-    <div class="flex flex-row gap-6 *:flex-1 w-full">
+    <!-- <div class="flex flex-row gap-6 *:flex-1 w-full">
       <button class="text-md text-white bg-blue-400">
         Odtwórz film ponownie
       </button>
       <button class="text-md text-white bg-blue-400">
         Pokaż poprawną odpowiedź
       </button>
+    </div> -->
+    <div class="text-center text-4xl flex flex-col gap-5">
+      <span class="block">Poprawna odpowiedź</span>
+      <span class="block">{{ question?.poprawna_odp }}</span>
+      <span class="block">Zaznaczona odpowiedź</span>
+      <span class="block">
+        {{
+          isBasic
+            ? result.basic[countBasic].chosen_answer.trim() == ""
+              ? "BrakBasic"
+              : result.basic[countBasic].chosen_answer
+            : isAdvanced
+            ? result.advanced[countAdvanced].chosen_answer.trim() == ""
+              ? "BrakAdvanced"
+              : result.advanced[countAdvanced].chosen_answer
+            : "Błąd"
+        }}
+      </span>
     </div>
     <div>
-      Poprawna odpowiedź
-      <br />
-      Zaznaczona odpowiedź
+      <button @click="$emit('nav', '/exam')" class="btn-major">
+        Rozpocznij jeszcze raz
+      </button>
     </div>
   </div>
 </template>

nuxt.config.ts

@@ -10,6 +10,9 @@ export default defineNuxtConfig({
   imports: {
     dirs: ["types/*.ts", "store/*.ts", "types/**/*.ts"],
   },
+  // app: {
+  //   pageTransition: { name: "page", mode: "out-in" },
+  // },
   runtimeConfig: {
     public: {
       cdn_url: process.env.CDN_URL,

pages/result.vue

@@ -97,6 +97,18 @@ open();
 function changeNow(to: string) {
   now.value = to;
 }
+
+function changeCount(num: number) {
+  if (now.value == "basic") {
+    countBasic.value = num;
+  } else if (now.value == "advanced") {
+    countAdvanced.value = num;
+  }
+}
+
+function nav(route: string) {
+  return navigateTo(route);
+}
 </script>
 
 <template>
@@ -130,6 +142,8 @@ function changeNow(to: string) {
           :count-advanced="countAdvanced"
           :now="now"
           @change-now="changeNow"
+          @change-count="changeCount"
+          @nav="nav"
         />
       </div>
     </div>