plan implementation 6, 7, 8, 9, 10
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user