quick, minor: result question choosing change & category in summary

components/ResultModal.vue

@@ -22,6 +22,7 @@ const emit = defineEmits<{
     :esc-to-close="false"
   >
     <h1 class="text-[1.5rem]">{{ title }}</h1>
+    <div class="*:inline">Kategoria: <slot name="category" /></div>
     <div class="*:inline">Punkty: <slot name="points" /> / 74</div>
     <div class="*:inline">Wynik: <slot name="resultTrueFalse" /></div>
     <div class="flex flex-row gap-2">

components/RightBarResult.vue

@@ -13,26 +13,6 @@ const props = defineProps<{
 
 const isBasic = computed(() => props.now == "basic");
 const isAdvanced = computed(() => props.now == "advanced");
-
-const boxesAmount = computed(() => {
-  if (isBasic.value) {
-    return 20;
-  } else if (isAdvanced.value) {
-    return 12;
-  } else {
-    return 0;
-  }
-});
-
-const countSwitchable = computed(() => {
-  if (isBasic.value) {
-    return props.countBasic;
-  } else if (isAdvanced.value) {
-    return props.countAdvanced;
-  } else {
-    return 0;
-  }
-});
 </script>
 
 <template>
@@ -60,26 +40,43 @@ const countSwitchable = computed(() => {
         type="radio"
         :aria-label="(num + 1).toString()"
         class="btn btn-md"
-        :name="`${now}-chooser`"
-        v-for="num in range(0, boxesAmount)"
-        @click="$emit('change-count', num)"
+        name="chooser"
+        v-for="num in range(0, 20)"
+        @click="
+          $emit('change-now', 'basic');
+          $emit('change-count', num);
+        "
         :class="`${
-          isBasic
-            ? result.basic[num].question?.poprawna_odp.toLowerCase() ==
-              result.basic[num].chosen_answer
-              ? 'btn-success'
-              : 'btn-error'
-            : ''
-        }${
-          isAdvanced
-            ? result.advanced[num].question?.poprawna_odp.toLowerCase() ==
-              result.advanced[num].chosen_answer
-              ? 'btn-success'
-              : 'btn-error'
-            : ''
+          result.basic[num].question?.poprawna_odp.toLowerCase() ==
+          result.basic[num].chosen_answer
+            ? 'btn-success'
+            : 'btn-error'
         }`"
-        :checked="countSwitchable == num"
-        :key="`choose-${num}-${now}`"
+        :checked="isBasic ? countBasic == num : false"
+        :key="`choose-${num}-basic`"
+      />
+    </div>
+    <div
+      class="grid grid-cols-[repeat(auto-fit,50px)] gap-2 justify-around w-full"
+    >
+      <input
+        type="radio"
+        :aria-label="`${num + 1}`"
+        class="btn btn-md"
+        name="chooser"
+        v-for="num in range(0, 12)"
+        @click="
+          $emit('change-now', 'advanced');
+          $emit('change-count', num);
+        "
+        :class="`${
+          result.advanced[num].question?.poprawna_odp.toLowerCase() ==
+          result.advanced[num].chosen_answer
+            ? 'btn-success'
+            : 'btn-error'
+        }`"
+        :checked="isAdvanced ? countAdvanced == num : false"
+        :key="`choose-${num}-advanced`"
       />
     </div>
     <div class="text-center text-4xl flex flex-col gap-5">

pages/result.vue

@@ -21,6 +21,13 @@ examStore.result.advanced.forEach((answer) => {
 
 const resultTrueFalse = ref(points.value >= 68 ? "pozytywny" : "negatywny");
 
+useHead({
+  title: `${
+    String(resultTrueFalse.value[0]).toUpperCase() +
+    String(resultTrueFalse.value).slice(1)
+  } (${points.value}/74)`,
+});
+
 const countBasic = ref(0);
 const countAdvanced = ref(0);
 
@@ -81,6 +88,7 @@ const { open, close } = useModal({
     },
   },
   slots: {
+    category: examStore.category,
     points: `${points.value}`,
     resultTrueFalse: resultTrueFalse,
   },