Fixes the configuration file

resources/js/Pages/Screening/Result.vue

@@ -71,7 +71,7 @@ const handleStartCategory = (categoryId) => {
                 <div
                     v-for="category in categories"
                     :key="category.id"
-                    class="bg-surface/50 rounded-lg p-4 flex items-center justify-between hover:bg-surface/70 transition-colors"
+                    class="rounded-lg p-4 flex items-center justify-between hover:bg-white/5 transition-colors"
                 >
                     <span class="text-white font-medium">{{ category.name }}</span>
                     <AppButton size="md" @click="handleStartCategory(category.id)">

resources/js/Pages/Screening/Show.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { Head, useForm } from '@inertiajs/vue3'
 import AppLayout from '@/Layouts/AppLayout.vue'
 import AppButton from '@/Components/AppButton.vue'
@@ -32,6 +32,18 @@ const handleSubmit = () => {
   form.put(`/screening/${props.screening.id}`)
 }
 
+const currentScore = computed(() => {
+  return Object.values(form.answers).reduce((score, value) => {
+    if (value === 'yes') return score + 1
+    if (value === 'unknown') return score + 0.5
+    return score
+  }, 0)
+})
+
+watch(currentScore, (score) => {
+  console.log('Current screening score:', score)
+})
+
 const allAnswered = computed(() => {
   return Object.values(form.answers).every(v => v !== null)
 })
@@ -42,13 +54,13 @@ const allAnswered = computed(() => {
 
     <div class="max-w-4xl mx-auto px-4 py-8">
         <h1 class="text-3xl font-bold text-white mb-2">Pre-Screening Questions</h1>
-        <p class="text-gray-400 mb-8">Answer all 10 questions to proceed. Each "Yes" answer scores 1 point. You need at least 5 points to pass.</p>
+        <p class="text-gray-400 mb-8">Answer all 10 questions to proceed. Each "Yes" scores 1 point, "I don't know" scores half a point. You need at least 5 points to pass.</p>
 
         <div class="space-y-4 mb-8">
             <div
                 v-for="(question, index) in questions"
                 :key="index"
-                class="bg-surface/50 rounded-lg p-5"
+                class="rounded-lg p-5"
                 :data-cy="`screening-answer-${index + 1}`"
             >
                 <div class="flex items-start gap-4">
@@ -60,6 +72,7 @@ const allAnswered = computed(() => {
                             :name="`question-${index + 1}`"
                             :options="[
                                 { value: 'yes', label: 'Yes' },
+                                { value: 'unknown', label: 'I don\'t know' },
                                 { value: 'no', label: 'No' },
                             ]"
                         />