jivanrij/go-no-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

plan implementation 6, 7, 8, 9, 10

Browse Source
This commit is contained in:
Jonathan van Rij
2026-02-03 10:50:56 +01:00
parent e8be239c32
commit 0b6c6736ef
16 changed files with 2665 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
resources/js/Pages/Screening/Result.vue
View File

@@ -10,6 +10,18 @@ const props = defineProps({
type: Object,
required: true,
},
passed: {
type: Boolean,
required: true,
},
score: {
type: Number,
required: true,
},
totalQuestions: {
type: Number,
required: true,
},
categories: {
type: Array,
required: true,
@@ -28,23 +40,44 @@ const handleStartCategory = (categoryId) => {
<Head title="Screening Result" />
<div class="max-w-4xl mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-white mb-6">Screening Result</h1>
<h1 class="text-3xl font-bold text-white mb-6">Pre-Screening Result</h1>
<div class="bg-surface/50 rounded-lg p-6 mb-8">
<p class="text-gray-400 text-center mb-4">Your screening result: Passed</p>
<!-- Score Display -->
<div class="rounded-lg p-6 mb-8" :class="passed ? 'bg-green-500/10 border border-green-500/30' : 'bg-red-500/10 border border-red-500/30'">
<div class="text-center">
<p class="text-5xl font-bold mb-2" :class="passed ? 'text-green-500' : 'text-red-500'">
{{ score }} / {{ totalQuestions }}
</p>
<p class="text-xl font-semibold" :class="passed ? 'text-green-400' : 'text-red-400'">
{{ passed ? 'Passed' : 'No Go' }}
</p>
<p class="text-gray-400 mt-2">
{{ passed ? 'You may proceed to select a category for detailed assessment.' : 'The pre-screening score is below the required threshold. You cannot proceed at this time.' }}
</p>
</div>
</div>
<div class="space-y-4">
<!-- Failed: Show Again button -->
<div v-if="!passed" class="flex justify-center">
<AppButton size="lg" href="/">
Again
</AppButton>
</div>
<!-- Passed: Show category picker -->
<div v-else>
<h2 class="text-2xl font-semibold text-white mb-4">Select a Category</h2>
<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"
>
<span class="text-white font-medium">{{ category.name }}</span>
<AppButton size="md" @click="handleStartCategory(category.id)">
Start
</AppButton>
<div class="space-y-3">
<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"
>
<span class="text-white font-medium">{{ category.name }}</span>
<AppButton size="md" @click="handleStartCategory(category.id)">
Start
</AppButton>
</div>
</div>
</div>
</div>

68
resources/js/Pages/Screening/Show.vue
View File

@@ -1,5 +1,6 @@
<script setup>
import { Head, router } from '@inertiajs/vue3'
import { computed } from 'vue'
import { Head, useForm } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'
@@ -10,25 +11,80 @@ const props = defineProps({
type: Object,
required: true,
},
questions: {
type: Array,
required: true,
},
})
// Initialize form with empty answers for all questions
const initialAnswers = {}
props.questions.forEach((_, index) => {
initialAnswers[index + 1] = null
})
const form = useForm({
answers: initialAnswers,
})
const handleSubmit = () => {
router.put(`/screening/${props.screening.id}`)
form.put(`/screening/${props.screening.id}`)
}
const allAnswered = computed(() => {
return Object.values(form.answers).every(v => v !== null)
})
</script>
<template>
<Head title="Pre-Screening Questions" />
<div class="max-w-4xl mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-white mb-6">Pre-Screening Questions</h1>
<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>
<div class="bg-surface/50 rounded-lg p-6 mb-8">
<p class="text-gray-400 text-center">10 Yes/No questions will appear here</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"
>
<div class="flex items-start gap-4">
<span class="text-gray-400 font-mono text-sm mt-1 shrink-0">{{ index + 1 }}.</span>
<div class="flex-1">
<p class="text-white mb-3">{{ question }}</p>
<div class="flex gap-4">
<label class="flex items-center gap-2 cursor-pointer">
<input
type="radio"
:name="`question-${index + 1}`"
value="yes"
v-model="form.answers[index + 1]"
class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
/>
<span class="text-white">Yes</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input
type="radio"
:name="`question-${index + 1}`"
value="no"
v-model="form.answers[index + 1]"
class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
/>
<span class="text-white">No</span>
</label>
</div>
<p v-if="form.errors[`answers.${index + 1}`]" class="text-red-500 text-sm mt-1">
{{ form.errors[`answers.${index + 1}`] }}
</p>
</div>
</div>
</div>
</div>
<div class="flex justify-end">
<AppButton size="lg" @click="handleSubmit">
<AppButton size="lg" @click="handleSubmit" :loading="form.processing" :disabled="!allAnswered || form.processing">
Submit
</AppButton>
</div>