320 lines
20 KiB
Vue
320 lines
20 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file quiz.vue
|
|
* @description Quiz Interface.
|
|
* Manages the entire quiz lifecycle: Start -> Taking -> Results -> Review.
|
|
* Features a timer, question navigation, and detailed result analysis.
|
|
*/
|
|
|
|
definePageMeta({
|
|
layout: false,
|
|
middleware: 'auth'
|
|
})
|
|
|
|
useHead({
|
|
title: 'แบบทดสอบ - e-Learning'
|
|
})
|
|
|
|
const router = useRouter()
|
|
|
|
// Quiz State Management
|
|
// Tracks the current screen/step in the quiz flow
|
|
const currentScreen = ref<'start' | 'taking' | 'result' | 'review'>('start')
|
|
const timeLeft = ref(30 * 60) // 30 minutes in seconds
|
|
let timerInterval: ReturnType<typeof setInterval> | null = null
|
|
|
|
// Display formatted time (MM:SS)
|
|
const timerDisplay = computed(() => {
|
|
const minutes = Math.floor(timeLeft.value / 60)
|
|
const seconds = timeLeft.value % 60
|
|
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
|
|
})
|
|
|
|
const showReview = () => {
|
|
currentScreen.value = 'review'
|
|
}
|
|
|
|
const startQuiz = () => {
|
|
currentScreen.value = 'taking'
|
|
// Start countdown
|
|
timerInterval = setInterval(() => {
|
|
if (timeLeft.value > 0) timeLeft.value--
|
|
else submitQuiz(true)
|
|
}, 1000)
|
|
}
|
|
|
|
const submitQuiz = (auto = false) => {
|
|
if (auto || confirm('คุณแน่ใจหรือไม่ว่าต้องการส่งคำตอบ?')) {
|
|
if (timerInterval) clearInterval(timerInterval)
|
|
currentScreen.value = 'result'
|
|
}
|
|
}
|
|
|
|
const route = useRoute()
|
|
|
|
const confirmExit = () => {
|
|
const courseId = route.query.course_id
|
|
const target = courseId ? `/classroom/learning?course_id=${courseId}` : '/classroom/learning'
|
|
|
|
if (currentScreen.value === 'taking') {
|
|
if (confirm('คุณกำลังทำแบบทดสอบอยู่ หากออกตอนนี้ความคืบหน้าจะหายไป ยืนยันที่จะออก?')) {
|
|
router.push(target)
|
|
}
|
|
} else {
|
|
router.push(target)
|
|
}
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
if (timerInterval) clearInterval(timerInterval)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="quiz-shell min-h-screen bg-slate-50 dark:bg-[#0b0f1a] text-slate-900 dark:text-slate-200 font-main antialiased selection:bg-blue-500/20 transition-colors">
|
|
<!-- Header -->
|
|
<header class="h-14 bg-white dark:bg-[#161b22] fixed top-0 inset-x-0 z-[100] flex items-center px-6 border-b border-slate-200 dark:border-white/5 transition-colors">
|
|
<div class="flex items-center">
|
|
<button class="flex items-center gap-2 text-sm font-bold text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition-colors" @click="confirmExit">
|
|
<span>←</span>
|
|
<span>ออกจากแบบทดสอบ</span>
|
|
</button>
|
|
<div class="w-[1px] h-4 bg-slate-300 dark:bg-white/10 mx-4"/>
|
|
<h1 class="text-base font-black text-slate-900 dark:text-white uppercase tracking-tight">แบบทดสอบท้ายบท: พื้นฐาน UX</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="pt-14 h-screen flex items-center justify-center overflow-y-auto px-4 custom-scrollbar">
|
|
|
|
<!-- 1. START SCREEN -->
|
|
<div v-if="currentScreen === 'start'" class="w-full max-w-[640px] animate-fade-in py-12">
|
|
<div class="bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[32px] p-8 md:p-14 shadow-lg dark:shadow-2xl relative overflow-hidden transition-colors">
|
|
|
|
<!-- Top Icon Wrapper -->
|
|
<div class="flex justify-center mb-10">
|
|
<div class="w-20 h-20 rounded-3xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center shadow-inner">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue-600 dark:text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
|
|
<polyline points="14 2 14 8 20 8"/>
|
|
<path d="M10 12h4"/><path d="M10 16h4"/><path d="M10 8h1"/>
|
|
<circle cx="16" cy="16" r="3" fill="currentColor" class="text-orange-500 opacity-80" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mb-10">
|
|
<h2 class="text-[32px] font-black text-slate-900 dark:text-white mb-2 tracking-tight">แบบทดสอบท้ายบท</h2>
|
|
<p class="text-[13px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest leading-none">เบื้องต้นการออกแบบ UX/UI</p>
|
|
</div>
|
|
|
|
<!-- Instruction Box -->
|
|
<div class="bg-slate-50 dark:bg-[#0b121f]/80 p-8 rounded-3xl mb-8 border border-slate-100 dark:border-white/5">
|
|
<h3 class="text-[12px] font-black text-slate-500 dark:text-slate-400 mb-6 uppercase tracking-[0.2em] flex items-center gap-2">
|
|
คำชี้แจง
|
|
</h3>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 flex-shrink-0"/>
|
|
<span class="text-[14px] text-slate-600 dark:text-slate-300 font-medium leading-relaxed">แบบทดสอบนี้มีทั้งหมด <strong class="text-slate-900 dark:text-white">10 ข้อ</strong></span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 flex-shrink-0"/>
|
|
<span class="text-[14px] text-slate-600 dark:text-slate-300 font-medium leading-relaxed">เกณฑ์การผ่าน <strong class="text-slate-900 dark:text-white">80% ขึ้นไป</strong></span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 flex-shrink-0"/>
|
|
<span class="text-[14px] text-slate-600 dark:text-slate-300 font-medium leading-relaxed">เวลาในการทำ: <strong class="text-slate-900 dark:text-white">30 นาที</strong></span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 flex-shrink-0"/>
|
|
<span class="text-[14px] text-slate-600 dark:text-slate-300 font-medium leading-relaxed">ไม่สามารถหยุดเวลาชั่วคราวได้เมื่อเริ่มทำแบบทดสอบแล้ว</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="text-[13px] font-black text-slate-400 dark:text-slate-500 mb-10 flex items-center justify-between px-2">
|
|
<span>คะแนนที่ดีที่สุด: <span class="text-slate-900 dark:text-white">-</span></span>
|
|
</div>
|
|
|
|
<!-- Action Button -->
|
|
<button
|
|
class="w-full py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[20px] font-black text-[14px] tracking-wider transition-all shadow-xl shadow-blue-600/20 active:scale-[0.98]"
|
|
@click="startQuiz"
|
|
>
|
|
เริ่มทำแบบทดสอบ
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. TAKING SCREEN -->
|
|
<div v-if="currentScreen === 'taking'" class="w-full max-w-[840px] animate-fade-in py-12">
|
|
<div class="bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[32px] p-8 md:p-14 shadow-2xl backdrop-blur-sm">
|
|
<div class="flex items-center justify-between mb-10 pb-6 border-b border-slate-100 dark:border-white/5">
|
|
<div>
|
|
<div class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-2">ข้อที่ 1 จาก 10</div>
|
|
<!-- Progress Line -->
|
|
<div class="w-48 h-1 bg-slate-100 dark:bg-white/5 rounded-full overflow-hidden">
|
|
<div class="h-full bg-blue-500" style="width: 10%;"/>
|
|
</div>
|
|
</div>
|
|
<!-- Timer Display -->
|
|
<div class="flex items-center gap-3 px-5 py-2.5 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 rounded-2xl text-amber-600 dark:text-amber-500">
|
|
<span class="text-sm">⏱</span>
|
|
<span class="text-[15px] font-black font-mono tracking-widest">{{ timerDisplay }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-12">
|
|
<h2 class="text-[22px] font-black text-slate-900 dark:text-white leading-tight mb-8">ข้อใดต่อไปนี้คือหลักการแรกของ User Experience (UX) ตามโมเดลของ Peter Morville?</h2>
|
|
|
|
<!-- Question Options -->
|
|
<div class="space-y-4">
|
|
<button v-for="i in 4" :key="i" class="w-full p-6 text-left rounded-2xl border border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 hover:bg-white hover:border-blue-500 hover:shadow-lg dark:hover:bg-white/10 transition-all flex items-center gap-4 group">
|
|
<div class="w-6 h-6 rounded-full border-2 border-slate-300 dark:border-slate-700 flex items-center justify-center group-hover:border-blue-500 transition-colors">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-blue-500 opacity-0 group-focus:opacity-100"/>
|
|
</div>
|
|
<span class="text-[15px] font-medium text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white">ตัวเลือกที่ {{ i }} สำหรับคำตอบที่เป็นไปได้</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<button class="px-8 py-3 text-slate-400 dark:text-slate-500 font-bold hover:text-slate-600 dark:hover:text-white transition-colors">ย้อนกลับ</button>
|
|
<button class="px-10 py-4 bg-blue-600 text-white rounded-2xl font-black text-sm shadow-lg shadow-blue-600/20" @click="submitQuiz(false)">ถัดไป</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. RESULT SCREEN -->
|
|
<div v-if="currentScreen === 'result'" class="w-full max-w-[640px] animate-fade-in py-12">
|
|
<div class="bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[40px] p-10 md:p-14 shadow-2xl text-center backdrop-blur-sm">
|
|
<!-- Trophy Icon -->
|
|
<div class="w-20 h-20 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mx-auto mb-10 shadow-inner">
|
|
<span class="text-4xl">🏆</span>
|
|
</div>
|
|
|
|
<h2 class="text-[32px] font-black text-slate-900 dark:text-white mb-2 tracking-tight">ยินดีด้วยคุณสอบผ่าน!</h2>
|
|
<p class="text-[13px] font-bold text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-12">คุณทำคะแนนได้ยอดเยี่ยมและผ่านเกณฑ์การทดสอบ</p>
|
|
|
|
<!-- Stats Boxes -->
|
|
<div class="grid grid-cols-3 gap-4 mb-14">
|
|
<div class="p-6 rounded-[24px] bg-slate-50 dark:bg-[#0b121f]/60 border border-slate-100 dark:border-white/5 shadow-inner">
|
|
<div class="text-[9px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-3">คะแนน</div>
|
|
<div class="text-[20px] font-black text-blue-600 dark:text-blue-500">90%</div>
|
|
</div>
|
|
<div class="p-6 rounded-[24px] bg-slate-50 dark:bg-[#0b121f]/60 border border-slate-100 dark:border-white/5 shadow-inner">
|
|
<div class="text-[9px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-3">ตอบถูก</div>
|
|
<div class="text-[20px] font-black text-emerald-600 dark:text-emerald-500">9/10</div>
|
|
</div>
|
|
<div class="p-6 rounded-[24px] bg-slate-50 dark:bg-[#0b121f]/60 border border-slate-100 dark:border-white/5 shadow-inner">
|
|
<div class="text-[9px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-3">เวลาที่ใช้</div>
|
|
<div class="text-[20px] font-black text-slate-900 dark:text-white">12:45</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="space-y-4">
|
|
<button
|
|
class="w-full py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[24px] font-black text-[14px] tracking-wider transition-all shadow-xl shadow-blue-600/20"
|
|
@click="showReview"
|
|
>
|
|
ดูเฉลย
|
|
</button>
|
|
<NuxtLink
|
|
to="/dashboard"
|
|
class="w-full py-5 bg-slate-100 dark:bg-[#1e293b] hover:bg-slate-200 dark:hover:bg-[#253347] text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white rounded-[24px] font-black text-[14px] tracking-wider transition-all border border-slate-200 dark:border-white/5 block"
|
|
>
|
|
กลับไปหน้าหลัก
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. REVIEW SCREEN -->
|
|
<div v-if="currentScreen === 'review'" class="w-full max-w-[840px] animate-fade-in py-12">
|
|
<div class="mb-10 flex items-center justify-between">
|
|
<h2 class="text-[24px] font-black text-slate-900 dark:text-white tracking-tight">ดูเฉลยและทบทวนรายข้อ</h2>
|
|
<button class="text-[13px] font-black text-slate-400 hover:text-slate-600 dark:hover:text-white transition-colors flex items-center gap-2" @click="currentScreen = 'result'"/>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Review Item: Correct Answer -->
|
|
<div class="bg-white dark:bg-[#1e293b]/40 border border-emerald-500/20 rounded-[32px] p-8 md:p-10 shadow-xl backdrop-blur-sm relative overflow-hidden group">
|
|
<div class="absolute left-0 top-0 bottom-0 w-1.5 bg-emerald-500"/>
|
|
<div class="flex items-center gap-2 mb-6 text-[10px] font-black uppercase tracking-widest">
|
|
<span class="text-emerald-500">✓ ตอบถูก</span>
|
|
<span class="text-slate-600 dark:text-slate-500">• ข้อที่ 1</span>
|
|
</div>
|
|
<h3 class="text-[18px] font-black text-slate-900 dark:text-white leading-tight mb-8">ข้อใดต่อไปนี้อธิบายกระบวนการออกแบบ "Double Diamond" ได้ดีที่สุด?</h3>
|
|
|
|
<div class="space-y-3 mb-8">
|
|
<div class="p-5 rounded-2xl bg-emerald-50 dark:bg-emerald-500/5 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 font-bold text-[14px] flex items-center justify-between">
|
|
<span>กระบวนการแตกประเด็นเพื่อค้นหา/พัฒนา และสรุปประเด็นเพื่อกำหนด/ส่งมอบ</span>
|
|
<span class="text-xs">✓</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 dark:bg-[#0b121f]/60 p-6 rounded-2xl border border-slate-100 dark:border-white/5">
|
|
<h4 class="text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-3">คำอธิบาย:</h4>
|
|
<p class="text-[14px] text-slate-600 dark:text-slate-400 leading-relaxed font-medium">
|
|
Double Diamond ประกอบด้วย 4 ขั้นตอนหลัก: Discover, Define, Develop และ Deliver ซึ่งเน้นการสลับกันระหว่างความคิดสร้างสรรค์แบบเปิดกว้าง (Divergent) และการคัดกรองเพื่อให้ได้ข้อสรุป (Convergent)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review Item: Incorrect Answer -->
|
|
<div class="bg-white dark:bg-[#1e293b]/40 border border-red-500/20 rounded-[32px] p-8 md:p-10 shadow-xl backdrop-blur-sm relative overflow-hidden">
|
|
<div class="absolute left-0 top-0 bottom-0 w-1.5 bg-red-500"/>
|
|
<div class="flex items-center gap-2 mb-6 text-[10px] font-black uppercase tracking-widest">
|
|
<span class="text-red-500">✗ ตอบผิด</span>
|
|
<span class="text-slate-600 dark:text-slate-500">• ข้อที่ 2</span>
|
|
</div>
|
|
<h3 class="text-[18px] font-black text-slate-900 dark:text-white leading-tight mb-8">เป้าหมายหลักของ User Research คืออะไร?</h3>
|
|
|
|
<div class="space-y-3 mb-8">
|
|
<div class="p-5 rounded-2xl bg-red-50 dark:bg-white/5 border border-red-500/30 text-red-500 dark:text-red-400 font-medium text-[14px]">
|
|
<span class="opacity-50 line-through">เพื่อให้แน่ใจว่าดีไซน์ที่ทำออกมาสวยงามที่สุด</span>
|
|
<span class="ml-2 text-[10px] bg-red-500/20 px-2 py-0.5 rounded text-red-600 dark:text-red-500">คำตอบของคุณ</span>
|
|
</div>
|
|
<div class="p-5 rounded-2xl bg-emerald-50 dark:bg-emerald-500/5 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 font-bold text-[14px] flex items-center justify-between">
|
|
<span>เพื่อทำความเข้าใจความต้องการ ปัญหา และพฤติกรรมของผู้ใช้ที่แท้จริง</span>
|
|
<span class="text-[10px] bg-emerald-500/20 px-2 py-0.5 rounded text-emerald-600 dark:text-emerald-400">คำตอบที่ถูกต้อง</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 dark:bg-[#0b121f]/60 p-6 rounded-2xl border border-slate-100 dark:border-white/5">
|
|
<h4 class="text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-3">คำอธิบาย:</h4>
|
|
<p class="text-[14px] text-slate-600 dark:text-slate-400 leading-relaxed font-medium">
|
|
User Research ไม่ใช่แค่การดูความสวยงาม แต่คือการหา "Insights" เพื่อนำมาแก้ปัญหาให้ตรงจุด ลดความเสี่ยงในการสร้างของที่ผู้ใช้งานไม่ได้ต้องการจริงๆ
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mt-12 flex justify-center">
|
|
<button class="px-10 py-4 bg-slate-100 hover:bg-slate-200 dark:bg-white/5 dark:hover:bg-white/10 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white rounded-[20px] font-black text-sm border border-slate-200 dark:border-white/5 transition-all" @click="currentScreen = 'result'">กลับไปหน้าสรุปผล</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 10px;
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.4s ease-out forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|