feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.
This commit is contained in:
supalerk-ar66
parent
aceeb80d9a
commit
ad11c6b7c5
44 changed files with 720 additions and 578 deletions
|
|
@ -22,7 +22,7 @@ const { user } = useAuth()
|
|||
const { fetchCourseLearningInfo, fetchLessonContent, saveVideoProgress, checkLessonAccess, fetchVideoProgress, fetchCourseAnnouncements, markLessonComplete, getLocalizedText } = useCourse()
|
||||
const $q = useQuasar()
|
||||
|
||||
// State management
|
||||
// การจัดการสถานะ (State management)
|
||||
const sidebarOpen = ref(false)
|
||||
const courseId = computed(() => Number(route.query.course_id))
|
||||
|
||||
|
|
@ -31,11 +31,11 @@ const courseId = computed(() => Number(route.query.course_id))
|
|||
// ==========================================
|
||||
// courseData: เก็บข้อมูลโครงสร้างคอร์ส (บทเรียนต่างๆ)
|
||||
const courseData = ref<any>(null)
|
||||
const announcements = ref<any[]>([]) // Announcements state
|
||||
const showAnnouncementsModal = ref(false) // Modal state
|
||||
const hasUnreadAnnouncements = ref(false) // Unread state tracking
|
||||
const announcements = ref<any[]>([]) // สถานะของประกาศ (Announcements state)
|
||||
const showAnnouncementsModal = ref(false) // สถานะของป๊อปอัป (Modal state)
|
||||
const hasUnreadAnnouncements = ref(false) // ติดตามสถานะที่ยังไม่ได้อ่าน (Unread state tracking)
|
||||
|
||||
// Helper for persistent read status
|
||||
// ฟังก์ชันช่วยเหลือสำหรับเก็บสถานะการอ่านถาวร (Helper for persistent read status)
|
||||
const getAnnouncementStorageKey = () => {
|
||||
if (!user.value?.id || !courseId.value) return ''
|
||||
return `read_announcements:${user.value.id}:${courseId.value}`
|
||||
|
|
@ -61,17 +61,17 @@ const checkUnreadAnnouncements = () => {
|
|||
const lastReadDate = new Date(lastRead).getTime()
|
||||
const hasNew = announcements.value.some(a => {
|
||||
const annDate = new Date(a.created_at || Date.now()).getTime()
|
||||
// Check if announcement is strictly newer than last read
|
||||
// ตรวจสอบว่าประกาศใหม่กว่าที่อ่านครั้งล่าสุดหรือไม่ (Check if announcement is strictly newer than last read)
|
||||
return annDate > lastReadDate
|
||||
})
|
||||
|
||||
hasUnreadAnnouncements.value = hasNew
|
||||
}
|
||||
|
||||
// Handler for opening announcements
|
||||
// ฟังก์ชันจัดการเมื่อเปิดประกาศ (Handler for opening announcements)
|
||||
const handleOpenAnnouncements = () => {
|
||||
showAnnouncementsModal.value = true
|
||||
hasUnreadAnnouncements.value = false // Clear unread badge on click
|
||||
hasUnreadAnnouncements.value = false // ลบป้ายแจ้งเตือนเมื่อคลิก (Clear unread badge on click)
|
||||
|
||||
const key = getAnnouncementStorageKey()
|
||||
if (key) {
|
||||
|
|
@ -98,7 +98,7 @@ const toggleSidebar = () => {
|
|||
sidebarOpen.value = !sidebarOpen.value
|
||||
}
|
||||
|
||||
// Logic Quiz Attempt Management
|
||||
// การจัดการตรรกะจำนวนครั้งในการทำแบบทดสอบ (Logic Quiz Attempt Management)
|
||||
const quizStatus = computed(() => {
|
||||
if (!currentLesson.value || currentLesson.value.type !== 'QUIZ' || !currentLesson.value.quiz) return null
|
||||
|
||||
|
|
@ -106,7 +106,7 @@ const quizStatus = computed(() => {
|
|||
const latestAttempt = quiz.latest_attempt
|
||||
const allowMultiple = quiz.allow_multiple_attempts
|
||||
|
||||
// If never attempted
|
||||
// หากยังไม่เคยทดสอบ (If never attempted)
|
||||
if (!latestAttempt) {
|
||||
return {
|
||||
canStart: true,
|
||||
|
|
@ -116,7 +116,7 @@ const quizStatus = computed(() => {
|
|||
}
|
||||
}
|
||||
|
||||
// If multiple attempts allowed
|
||||
// หากอนุญาตให้ทดสอบได้หลายครั้ง (If multiple attempts allowed)
|
||||
if (allowMultiple) {
|
||||
return {
|
||||
canStart: true,
|
||||
|
|
@ -128,8 +128,8 @@ const quizStatus = computed(() => {
|
|||
}
|
||||
}
|
||||
|
||||
// allowMultiple is false (Single attempt only)
|
||||
// Lock the quiz regardless of pass/fail once attempted
|
||||
// ไม่อนุญาตให้สอบได้หลายครั้ง (allowMultiple is false (Single attempt only))
|
||||
// ล็อกแบบทดสอบหลังทำเสร็จไม่ว่าจะผ่านหรือไม่ผ่าน (Lock the quiz regardless of pass/fail once attempted)
|
||||
return {
|
||||
canStart: false,
|
||||
label: latestAttempt.is_passed ? t('quiz.passedStatus') : t('quiz.failedStatus'),
|
||||
|
|
@ -145,7 +145,7 @@ const handleStartQuiz = () => {
|
|||
|
||||
const quiz = currentLesson.value.quiz
|
||||
|
||||
// If multiple attempts are disabled and it's the first time
|
||||
// หากทำได้ครั้งเดียวและนี่เป็นครั้งแรก (If multiple attempts are disabled and it's the first time)
|
||||
if (!quiz.allow_multiple_attempts && !quiz.latest_attempt) {
|
||||
$q.dialog({
|
||||
title: `<div class="text-slate-900 dark:text-white font-black text-xl">${t('quiz.warningTitle')}</div>`,
|
||||
|
|
@ -193,18 +193,18 @@ const resetAndNavigate = (path: string) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 2. Clear all localStorage
|
||||
// 2. ลบข้อมูลใน localStorage ทั้งหมด (Clear all localStorage)
|
||||
localStorage.clear()
|
||||
|
||||
// 3. Restore ONLY whitelisted keys
|
||||
// 3. คืนค่าเฉพาะคีย์ที่อนุญาต (Restore ONLY whitelisted keys)
|
||||
Object.keys(whitelist).forEach(key => {
|
||||
localStorage.setItem(key, whitelist[key])
|
||||
})
|
||||
|
||||
// 4. Force hard reload to the new path
|
||||
// 4. บังคับโหลดหน้าเว็บใหม่ไปยังเส้นทางใหม่ (Force hard reload to the new path)
|
||||
window.location.href = path
|
||||
} else {
|
||||
// SSR Fallback
|
||||
// การทำงานสำรองสำหรับ SSR (SSR Fallback)
|
||||
router.push(path)
|
||||
}
|
||||
}
|
||||
|
|
@ -213,13 +213,13 @@ const resetAndNavigate = (path: string) => {
|
|||
const handleLessonSelect = (lessonId: number) => {
|
||||
if (currentLesson.value?.id === lessonId) return
|
||||
|
||||
// 1. Update URL query params
|
||||
// 1. อัปเดตพารามิเตอร์ใน URL (Update URL query params)
|
||||
router.push({ query: { ...route.query, lesson_id: lessonId.toString() } })
|
||||
|
||||
// 2. Load content without refresh
|
||||
// 2. โหลดเนื้อหาโดยไม่ต้องรีเฟรชหน้าเว็บ (Load content without refresh)
|
||||
loadLesson(lessonId)
|
||||
|
||||
// Close sidebar on mobile
|
||||
// ปิดแถบด้านข้างบนมือถือ (Close sidebar on mobile)
|
||||
if (sidebarOpen.value) {
|
||||
sidebarOpen.value = false
|
||||
}
|
||||
|
|
@ -245,7 +245,7 @@ const loadCourseData = async () => {
|
|||
if (res.success) {
|
||||
courseData.value = res.data
|
||||
|
||||
// Auto-load logic: Check URL first, fallback to first available lesson
|
||||
// ตรรกะการโหลดอัตโนมัติ: เช็ค URL ก่อน หากไม่มีให้โหลดบทเรียนแรก (Auto-load logic: Check URL first, fallback to first available lesson)
|
||||
const urlLessonId = route.query.lesson_id ? Number(route.query.lesson_id) : null
|
||||
|
||||
if (urlLessonId) {
|
||||
|
|
@ -258,7 +258,7 @@ const loadCourseData = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// Fetch Course Announcements
|
||||
// ดึงข้อมูลประกาศของคอร์สเรียน (Fetch Course Announcements)
|
||||
const annRes = await fetchCourseAnnouncements(courseId.value)
|
||||
if (annRes.success) {
|
||||
announcements.value = annRes.data || []
|
||||
|
|
@ -275,7 +275,7 @@ const loadCourseData = async () => {
|
|||
const loadLesson = async (lessonId: number) => {
|
||||
if (currentLesson.value?.id === lessonId) return
|
||||
|
||||
// Clear previous video state & unload component to force reset
|
||||
// ล้างสถานะวิดีโอเดิมเพื่อบังคับตั้งค่าใหม่ (Clear previous video state & unload component to force reset)
|
||||
isPlaying.value = false
|
||||
videoProgress.value = 0
|
||||
currentTime.value = 0
|
||||
|
|
@ -285,16 +285,16 @@ const loadLesson = async (lessonId: number) => {
|
|||
lastSavedTimestamp.value = 0
|
||||
lastLocalSaveTimestamp.value = 0
|
||||
currentDuration.value = 0
|
||||
currentLesson.value = null // This will unmount VideoPlayer and hide content
|
||||
currentLesson.value = null // ตัวนี้จะทำการซ่อนวิดีโอและซ่อนเนื้อหา (This will unmount VideoPlayer and hide content)
|
||||
|
||||
isLessonLoading.value = true
|
||||
try {
|
||||
// Optional: Check access first
|
||||
// ป้องกันไว้ก่อน: ตรวจสอบสิทธิ์การเข้าถึง (Optional: Check access first)
|
||||
const accessRes = await checkLessonAccess(courseId.value, lessonId)
|
||||
if (accessRes.success && !accessRes.data.is_accessible) {
|
||||
let msg = t('classroom.notAvailable')
|
||||
|
||||
// Handle specific lock reasons
|
||||
// จัดการเหตุผลล็อกเฉพาะจุด (Handle specific lock reasons)
|
||||
if (accessRes.data.lock_reason) {
|
||||
msg = accessRes.data.lock_reason
|
||||
} else if (accessRes.data.required_quiz_pass && !accessRes.data.required_quiz_pass.is_passed) {
|
||||
|
|
@ -314,32 +314,32 @@ const loadLesson = async (lessonId: number) => {
|
|||
return
|
||||
}
|
||||
|
||||
// 1. Fetch content
|
||||
// 1. ดึงข้อมูลเนื้อหา (Fetch content)
|
||||
const res = await fetchLessonContent(courseId.value, lessonId)
|
||||
if (res.success) {
|
||||
currentLesson.value = res.data
|
||||
|
||||
// Initialize progress object if missing (Critical for New Users)
|
||||
// กำหนดค่าออบเจ็กต์ความคืบหน้าหากไม่มี (สำคัญสำหรับผู้ใช้ใหม่) (Initialize progress object if missing)
|
||||
if (!currentLesson.value.progress) {
|
||||
currentLesson.value.progress = {}
|
||||
}
|
||||
|
||||
// Update Lesson Completion UI status safely
|
||||
// อัปเดตสถานะสำเร็จของบทเรียนบน UI อย่างปลอดภัย (Update Lesson Completion UI status safely)
|
||||
if (currentLesson.value?.progress?.is_completed && courseData.value) {
|
||||
for (const chapter of courseData.value.chapters) {
|
||||
const lesson = chapter.lessons.find((l: any) => l.id === lessonId)
|
||||
if (lesson) {
|
||||
if (!lesson.progress) lesson.progress = {}
|
||||
lesson.progress.is_completed = true
|
||||
lesson.is_completed = true // Standardize completion property
|
||||
lesson.is_completed = true // ตั้งค่าสถานะสำเร็จให้เป็นมาตรฐาน (Standardize completion property)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Fetch Initial Progress (Resume Playback)
|
||||
// 2. ดึงความคืบหน้าเริ่มต้นเพื่อเล่นต่อ (Fetch Initial Progress (Resume Playback))
|
||||
if (currentLesson.value.type === 'VIDEO') {
|
||||
// If already completed, clear local resume point to allow fresh re-watch
|
||||
// หากเรียนจบแล้ว ให้ล้างจุดที่ดูล่าสุดเพื่อดูใหม่ได้ (If already completed, clear local resume point to allow fresh re-watch)
|
||||
const isCompleted = currentLesson.value.progress?.is_completed || false
|
||||
|
||||
if (isCompleted) {
|
||||
|
|
@ -351,7 +351,7 @@ const loadLesson = async (lessonId: number) => {
|
|||
maxWatchedTime.value = 0
|
||||
currentTime.value = 0
|
||||
} else {
|
||||
// Not completed? Resume from where we left off
|
||||
// ถ้ายังเรียนไม่จบ? กลับไปเล่นจากจุดเดิม (Not completed? Resume from where we left off)
|
||||
const progressRes = await fetchVideoProgress(lessonId)
|
||||
let serverProgress = 0
|
||||
if (progressRes.success && progressRes.data?.video_progress_seconds) {
|
||||
|
|
@ -379,24 +379,24 @@ const loadLesson = async (lessonId: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
// Video Player Ref (Component)
|
||||
// ข้อมูลอ้างอิงวิดีโอ (Video Player Ref (Component))
|
||||
const videoPlayerComp = ref(null)
|
||||
|
||||
// Video & Progress State
|
||||
// สถานะความก้าวหน้าและวิดีโอ (Video & Progress State)
|
||||
const initialSeekTime = ref(0)
|
||||
const maxWatchedTime = ref(0) // Anti-rewind monotonic tracking
|
||||
const maxWatchedTime = ref(0) // การติดตามแบบไม่ย้อนกลับ (Anti-rewind monotonic tracking)
|
||||
const lastSavedTime = ref(-1)
|
||||
const lastSavedTimestamp = ref(0) // Server throttle timestamp
|
||||
const lastLocalSaveTimestamp = ref(0) // Local throttle timestamp
|
||||
const currentDuration = ref(0) // Track duration for save logic
|
||||
const lastSavedTimestamp = ref(0) // เวลาบันทึกในเซิร์ฟเวอร์ (Server throttle timestamp)
|
||||
const lastLocalSaveTimestamp = ref(0) // เวลาบันทึกในเครื่อง (Local throttle timestamp)
|
||||
const currentDuration = ref(0) // ติดตามเวลาของวิดีโอ (Track duration for save logic)
|
||||
|
||||
// Helper: Get Local Storage Key
|
||||
// ฟังก์ชันช่วยเหลือ: ชื่อคีย์สำหรับ Local Storage (Helper: Get Local Storage Key)
|
||||
const getLocalProgressKey = (lessonId: number) => {
|
||||
if (!user.value?.id) return null
|
||||
return `progress:${user.value.id}:${lessonId}`
|
||||
}
|
||||
|
||||
// Helper: Get Local Progress
|
||||
// ฟังก์ชันช่วยเหลือ: ดึงความคืบหน้าจากเครื่อง (Helper: Get Local Progress)
|
||||
const getLocalProgress = (lessonId: number): number => {
|
||||
try {
|
||||
const key = getLocalProgressKey(lessonId)
|
||||
|
|
@ -408,7 +408,7 @@ const getLocalProgress = (lessonId: number): number => {
|
|||
}
|
||||
}
|
||||
|
||||
// Helper: Save to Local Storage
|
||||
// ฟังก์ชันช่วยเหลือ: บันทึกลงเครื่อง (Helper: Save to Local Storage)
|
||||
const saveLocalProgress = (lessonId: number, time: number) => {
|
||||
try {
|
||||
const key = getLocalProgressKey(lessonId)
|
||||
|
|
@ -416,31 +416,31 @@ const saveLocalProgress = (lessonId: number, time: number) => {
|
|||
localStorage.setItem(key, time.toString())
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignore storage errors
|
||||
// ข้ามกรณีเกิดข้อผิดพลาดในการบันทึก (Ignore storage errors)
|
||||
}
|
||||
}
|
||||
|
||||
// Handler: Video Time Update (from Component)
|
||||
// ฟังก์ชันจัดการเวลาของวิดีโอ (จาก Component) (Handler: Video Time Update (from Component))
|
||||
const handleVideoTimeUpdate = (cTime: number, dur: number) => {
|
||||
currentDuration.value = dur || 0
|
||||
|
||||
// Update Monotonic Progress
|
||||
// อัปเดตความคืบหน้าแบบทางเดียว (Update Monotonic Progress)
|
||||
if (cTime > maxWatchedTime.value) {
|
||||
maxWatchedTime.value = cTime
|
||||
}
|
||||
|
||||
// Logic: Periodic Save
|
||||
// ตรรกะ: บันทึกเป็นระยะ (Logic: Periodic Save)
|
||||
if (currentLesson.value?.id) {
|
||||
const now = Date.now()
|
||||
|
||||
// 1. Local Save Throttle (5 seconds)
|
||||
// 1. การหน่วงเวลาบันทึกในเครื่อง (5 วินาที) (Local Save Throttle (5 seconds))
|
||||
if (now - lastLocalSaveTimestamp.value > 5000) {
|
||||
saveLocalProgress(currentLesson.value.id, maxWatchedTime.value)
|
||||
lastLocalSaveTimestamp.value = now
|
||||
}
|
||||
|
||||
// 2. Server Save Throttle (handled inside performSaveProgress)
|
||||
// Note: We don't check isPlaying here because if time is updating, it IS playing.
|
||||
// 2. การหน่วงเวลาบันทึกบนเซิร์ฟเวอร์ (จัดการใน performSaveProgress)
|
||||
// หมายเหตุ: เราไม่เช็ค isPlaying ตรงนี้เพราะถ้าเวลาเดินแปลว่าเล่นอยู่ (Note: We don't check isPlaying here because if time is updating, it IS playing.)
|
||||
performSaveProgress(false, false)
|
||||
}
|
||||
}
|
||||
|
|
@ -451,49 +451,49 @@ const onVideoMetadataLoaded = (duration: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
const isCompleting = ref(false) // Flag to prevent race conditions during completion
|
||||
const isCompleting = ref(false) // ตัวแปรกันการแย่งกันทำงานตอนเรียนจบ (Flag to prevent race conditions during completion)
|
||||
|
||||
// -----------------------------------------------------
|
||||
// ROBUST PROGRESS SAVING SYSTEM (Hybrid: Local + Server)
|
||||
// ระบบบันทึกความคืบหน้าที่แข็งแกร่ง (ไฮบริด: ในเครื่อง + เซิร์ฟเวอร์) (ROBUST PROGRESS SAVING SYSTEM (Hybrid: Local + Server))
|
||||
// -----------------------------------------------------
|
||||
|
||||
// Main Server Save Function
|
||||
// ฟังก์ชันหลักสำหรับบันทึกลงเซิร์ฟเวอร์ (Main Server Save Function)
|
||||
const performSaveProgress = async (force: boolean = false, keepalive: boolean = false) => {
|
||||
const lesson = currentLesson.value
|
||||
if (!lesson || lesson.type !== 'VIDEO') return
|
||||
|
||||
// Ensure progress object exists
|
||||
// ทำให้แน่ใจว่ามีออบเจ็กต์ความคืบหน้าอยู่ (Ensure progress object exists)
|
||||
if (!lesson.progress) lesson.progress = {}
|
||||
|
||||
// 1. Completed Guard: Stop everything if already completed
|
||||
// 1. ป้องกันเมื่อดูจบแล้ว: ไม่ต้องบันทึกอีกถ้าดูจบไปแล้ว (Completed Guard: Stop everything if already completed)
|
||||
if (lesson.progress.is_completed) return
|
||||
|
||||
// 2. Race Condition Guard: Stop if currently completing
|
||||
// 2. ป้องกันการเรียกซ้ำ: ไม่ทำงานถ้ากำลังบันทึกเวลาจบอยู่ (Race Condition Guard: Stop if currently completing)
|
||||
if (isCompleting.value) return
|
||||
|
||||
const now = Date.now()
|
||||
const maxSec = Math.floor(maxWatchedTime.value) // Use max watched time
|
||||
const maxSec = Math.floor(maxWatchedTime.value) // ใช้เวลาที่ดูไปมากที่สุด (Use max watched time)
|
||||
const durationSec = Math.floor(currentDuration.value || 0)
|
||||
|
||||
// 3. Monotonic Check: Allow saving 0 if it's the very first save (lastSavedTime is -1)
|
||||
// 3. ตรวจสอบการเดินหน้า: ยอมให้บันทึก 0 ได้ถ้าเป็นการบันทึกครั้งแรก (lastSavedTime is -1) (Monotonic Check: Allow saving 0 if it's the very first save)
|
||||
if (!force) {
|
||||
if (lastSavedTime.value === -1) {
|
||||
// First time save: allow 0 or more
|
||||
// บันทึกครั้งแรก: ยอมรับ 0 หรือมากกว่า (First time save: allow 0 or more)
|
||||
if (maxSec < 0) return
|
||||
} else if (maxSec <= lastSavedTime.value) {
|
||||
// Subsequent saves: must be greater than last saved
|
||||
// การบันทึกครั้งถัดไป: ต้องมากกว่าครั้งล่าสุด (Subsequent saves: must be greater than last saved)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 4. Throttle Check: Server Throttle (15 seconds)
|
||||
// 4. ตรวจสอบการหน่วงเวลา: เซิร์ฟเวอร์ (15 วินาที) (Throttle Check: Server Throttle (15 seconds))
|
||||
if (!force && (now - lastSavedTimestamp.value < 15000)) return
|
||||
|
||||
// Prepare for Save
|
||||
// เตรียมบันทึก (Prepare for Save)
|
||||
lastSavedTime.value = maxSec
|
||||
lastSavedTimestamp.value = now
|
||||
|
||||
// Check if this save might complete the lesson (e.g. 100% or forced end)
|
||||
// เช็คว่าการบันทึกนี้จะทำให้จบบทเรียนหรือไม่ (เช่น 100% หรือบังคับจบ) (Check if this save might complete the lesson)
|
||||
const isFinishing = force || (durationSec > 0 && maxSec >= durationSec)
|
||||
|
||||
if (isFinishing) {
|
||||
|
|
@ -503,8 +503,8 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
|
|||
try {
|
||||
const res = await saveVideoProgress(lesson.id, maxSec, durationSec, keepalive)
|
||||
|
||||
// Handle Completion (Frontend-only strategy: 95% threshold)
|
||||
// This ensures the checkmark appears at 95% to match backend.
|
||||
// จัดการเมื่อดูจบ (กลยุทธ์เฉพาะฝั่งหน้าเว็บ: ให้ผ่านที่ 95%) (Handle Completion (Frontend-only strategy: 95% threshold))
|
||||
// เพื่อให้เครื่องหมายถูกขึ้นที่ 95% ตรงกับหลังบ้าน (This ensures the checkmark appears at 95% to match backend.)
|
||||
const progressPercentage = durationSec > 0 ? (maxSec / durationSec) : 0
|
||||
const isCompletedNow = res.success && (res.data?.is_completed || progressPercentage >= 0.95)
|
||||
|
||||
|
|
@ -513,7 +513,7 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
|
|||
markLessonAsCompletedLocally(lesson.id)
|
||||
if (lesson.progress) lesson.progress.is_completed = true
|
||||
|
||||
// If newly completed, reload course data to unlock next lesson in sidebar
|
||||
// หากเพิ่งเรียนจบใหม่ ให้โหลดเนื้อหาใหม่เพื่อปลดล็อกบทถัดไป (If newly completed, reload course data to unlock next lesson in sidebar)
|
||||
if (!wasAlreadyCompleted) {
|
||||
await loadCourseData()
|
||||
}
|
||||
|
|
@ -527,13 +527,13 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
|
|||
}
|
||||
}
|
||||
|
||||
// Helper to update Sidebar UI
|
||||
// ฟังก์ชันช่วยเหลือสำหรับอัปเดตแถบด้านข้าง (Helper to update Sidebar UI)
|
||||
const markLessonAsCompletedLocally = (lessonId: number) => {
|
||||
if (courseData.value) {
|
||||
for (const chapter of courseData.value.chapters) {
|
||||
const lesson = chapter.lessons.find((l: any) => l.id === lessonId)
|
||||
if (lesson) {
|
||||
// Compatible with API structure
|
||||
// สอดคล้องกับโครงสร้าง API (Compatible with API structure)
|
||||
lesson.is_completed = true
|
||||
if (!lesson.progress) lesson.progress = {}
|
||||
lesson.progress.is_completed = true
|
||||
|
|
@ -547,11 +547,11 @@ const videoSrc = computed(() => {
|
|||
if (!currentLesson.value) return ''
|
||||
let url = ''
|
||||
|
||||
// Use explicit video_url from API first
|
||||
// ใช่ video_url โดยตรงจาก API ก่อน (Use explicit video_url from API first)
|
||||
if (currentLesson.value.video_url) {
|
||||
url = currentLesson.value.video_url
|
||||
} else {
|
||||
// Fallback (deprecated logic)
|
||||
// สำรอง (ตรรกะแบบเก่า)
|
||||
const content = getLocalizedText(currentLesson.value.content)
|
||||
if (content && (content.startsWith('http') || content.startsWith('/')) && !content.includes(' ')) {
|
||||
url = content
|
||||
|
|
@ -560,7 +560,7 @@ const videoSrc = computed(() => {
|
|||
|
||||
if (!url) return ''
|
||||
|
||||
// Support Resume for YouTube
|
||||
// รองรับการเล่นต่อสำหรับ YouTube (Support Resume for YouTube)
|
||||
const isYoutube = url.toLowerCase().includes('youtube.com') || url.toLowerCase().includes('youtu.be')
|
||||
if (isYoutube && initialSeekTime.value > 0) {
|
||||
const separator = url.includes('?') ? '&' : '?'
|
||||
|
|
@ -575,7 +575,7 @@ const onVideoEnded = async () => {
|
|||
const lesson = currentLesson.value
|
||||
if (!lesson) return
|
||||
|
||||
// Clear local storage on end since it's completed
|
||||
// ล้าง localStorage เนื่องจากดจบแล้ว (Clear local storage on end since it's completed)
|
||||
const key = getLocalProgressKey(lesson.id)
|
||||
if (key && typeof window !== 'undefined') {
|
||||
localStorage.removeItem(key)
|
||||
|
|
@ -598,7 +598,7 @@ onMounted(() => {
|
|||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// Clear state when leaving the page to ensure fresh start on return
|
||||
// ล้างสถานะเมื่อออกจากหน้าเพื่อให้หน้าเหมือนใหม่ตอนกลับมา (Clear state when leaving the page to ensure fresh start on return)
|
||||
courseData.value = null
|
||||
currentLesson.value = null
|
||||
})
|
||||
|
|
@ -665,7 +665,7 @@ onBeforeUnmount(() => {
|
|||
</q-toolbar>
|
||||
</q-header>
|
||||
|
||||
<!-- Sidebar (Curriculum) - Positioned Right via component prop -->
|
||||
<!-- แถบด้านข้าง (บทเรียน) - วางชิดขวาผ่านพร็อพพ์ -->
|
||||
<CurriculumSidebar
|
||||
v-model="sidebarOpen"
|
||||
:courseData="courseData"
|
||||
|
|
@ -676,14 +676,14 @@ onBeforeUnmount(() => {
|
|||
@open-announcements="handleOpenAnnouncements"
|
||||
/>
|
||||
|
||||
<!-- Main Content -->
|
||||
<!-- พื้นที่เนื้อหาหลัก (Main Content) -->
|
||||
<q-page-container class="bg-white dark:bg-slate-900">
|
||||
<q-page class="flex flex-col h-full bg-slate-50 dark:bg-[#0B0F1A]">
|
||||
<!-- Video Player & Content Area -->
|
||||
<!-- กรอบวิดีโอและพื้นที่เนื้อหา (Video Player & Content Area) -->
|
||||
<div class="w-full h-full p-4 md:p-6 flex-grow overflow-y-auto">
|
||||
<!-- 1. LOADING STATE (Comprehensive Skeleton) -->
|
||||
<!-- 1. สถานะกำลังโหลด (โครงสร้างเสมือน (Skeleton) สมบูรณ์แบบ) (LOADING STATE (Comprehensive Skeleton)) -->
|
||||
<div v-if="isLessonLoading" class="animate-fade-in">
|
||||
<!-- Video Skeleton -->
|
||||
<!-- โครงภาพวิดีโอ (Video Skeleton) -->
|
||||
<div class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-3xl animate-pulse flex items-center justify-center mb-10 overflow-hidden relative shadow-xl focus:outline-none">
|
||||
<img
|
||||
v-if="courseData?.course?.thumbnail_url"
|
||||
|
|
@ -697,7 +697,7 @@ onBeforeUnmount(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Skeleton -->
|
||||
<!-- โครงข้อมูล (Info Skeleton) -->
|
||||
<div class="bg-white dark:bg-slate-800/50 p-8 rounded-3xl border border-slate-100 dark:border-white/5 shadow-sm">
|
||||
<div class="h-10 bg-slate-200 dark:bg-slate-800 rounded-xl w-3/4 mb-4 animate-pulse"></div>
|
||||
<div class="h-4 bg-slate-100 dark:bg-slate-800 rounded-lg w-full mb-2 animate-pulse"></div>
|
||||
|
|
@ -705,9 +705,9 @@ onBeforeUnmount(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. READY STATE (Real Lesson Content) -->
|
||||
<!-- 2. สถานะพร้อมใช้งาน (ข้อมูลบทเรียนจริง) (READY STATE (Real Lesson Content)) -->
|
||||
<div v-else-if="currentLesson" class="animate-fade-in">
|
||||
<!-- Video Player -->
|
||||
<!-- ส่วนการเล่นวิดีโอ (Video Player) -->
|
||||
<VideoPlayer
|
||||
v-if="videoSrc"
|
||||
ref="videoPlayerComp"
|
||||
|
|
@ -719,7 +719,7 @@ onBeforeUnmount(() => {
|
|||
@loadedmetadata="(d: number) => onVideoMetadataLoaded(d)"
|
||||
/>
|
||||
|
||||
<!-- Lesson Info -->
|
||||
<!-- ข้อมูลบทเรียน (Lesson Info) -->
|
||||
<div class="bg-[var(--bg-surface)] p-6 md:p-8 rounded-3xl shadow-sm border border-[var(--border-color)]">
|
||||
<!-- ใช้สีจากตัวแปรกลาง: จะแยกโหมดให้อัตโนมัติ (สว่าง=ดำ / มืด=ขาว) -->
|
||||
<div class="flex items-start justify-between gap-4 mb-4">
|
||||
|
|
@ -728,7 +728,7 @@ onBeforeUnmount(() => {
|
|||
|
||||
<p class="text-slate-600 dark:text-slate-400 text-base md:text-lg leading-relaxed mb-6" v-if="currentLesson.description">{{ getLocalizedText(currentLesson.description) }}</p>
|
||||
|
||||
<!-- Lesson Content Area (Text/HTML) -->
|
||||
<!-- ช่องบทเรียน (Text/HTML) (Lesson Content Area) -->
|
||||
<div v-if="currentLesson.type === 'QUIZ'" class="p-8 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 dark:from-slate-800/50 dark:to-slate-900/50 rounded-2xl border border-blue-100 dark:border-white/5 text-center">
|
||||
<div class="bg-white dark:bg-slate-800 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm text-blue-500 dark:text-blue-400 border dark:border-white/10">
|
||||
<q-icon name="quiz" size="40px" />
|
||||
|
|
@ -783,7 +783,7 @@ onBeforeUnmount(() => {
|
|||
<div v-html="getLocalizedText(currentLesson.content)" class="leading-relaxed text-slate-800 dark:text-slate-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Attachments Section -->
|
||||
<!-- ส่วนเอกสารแนบ (Attachments Section) -->
|
||||
<div v-if="currentLesson.attachments && currentLesson.attachments.length > 0" class="mt-8 pt-6 border-t border-gray-100 dark:border-white/5">
|
||||
<h3 class="text-lg font-bold mb-4 text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 flex items-center justify-center">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<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.
|
||||
* @description หน้าสำหรับทำแบบทดสอบ (Quiz Interface)
|
||||
* จัดการวงจรชีวิตของการทำแบบทดสอบทั้งหมด: เริ่มต้น -> ทำข้อสอบ -> ผลลัพธ์ -> ทบทวน
|
||||
* มีฟีเจอร์จับเวลา การนำทางระหว่างคำถาม และการวิเคราะห์ผลลัพธ์อย่างละเอียด
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -17,7 +17,7 @@ const router = useRouter()
|
|||
const $q = useQuasar()
|
||||
const { fetchCourseLearningInfo, fetchLessonContent, submitQuiz: apiSubmitQuiz, markLessonComplete } = useCourse()
|
||||
|
||||
// State Management
|
||||
// การจัดการสถานะ (State Management)
|
||||
const currentScreen = ref<'start' | 'taking' | 'result' | 'review'>('start')
|
||||
const timeLeft = ref(0)
|
||||
let timerInterval: ReturnType<typeof setInterval> | null = null
|
||||
|
|
@ -30,20 +30,20 @@ const quizData = ref<any>(null)
|
|||
const isLoading = ref(true)
|
||||
const isSubmitting = ref(false)
|
||||
|
||||
// Quiz Taking State
|
||||
// สถานะขณะทำแบบทดสอบ (Quiz Taking State)
|
||||
const currentQuestionIndex = ref(0)
|
||||
const userAnswers = ref<Record<number, number>>({}) // questionId -> choiceId
|
||||
const visitedQuestions = ref<Set<number>>(new Set()) // Track visited indices
|
||||
const userAnswers = ref<Record<number, number>>({}) // ID คำถาม -> ID คำตอบ (questionId -> choiceId)
|
||||
const visitedQuestions = ref<Set<number>>(new Set()) // ติดตามข้อที่เคยเปิดดูแล้ว (Track visited indices)
|
||||
const quizResult = ref<any>(null)
|
||||
|
||||
// Tracking visited questions
|
||||
// ติดตามคำถามที่เปิดดูแล้ว (Tracking visited questions)
|
||||
watch(currentQuestionIndex, (newVal) => {
|
||||
visitedQuestions.value.add(newVal)
|
||||
}, { immediate: true })
|
||||
|
||||
// Helper: Get Status Color Class
|
||||
// ฟังก์ชันช่วยเหลือ: ดึงคลาสสีสำหรับสถานะคำถาม (Helper: Get Status Color Class)
|
||||
const getQuestionStatusClass = (index: number, questionId: number) => {
|
||||
// 1. Current = Blue
|
||||
// 1. ข้อปัจจุบัน = สีฟ้า (Current = Blue)
|
||||
if (index === currentQuestionIndex.value) {
|
||||
return 'bg-blue-500 text-white border-blue-600 ring-2 ring-blue-200 dark:ring-blue-900'
|
||||
}
|
||||
|
|
@ -51,32 +51,29 @@ const getQuestionStatusClass = (index: number, questionId: number) => {
|
|||
const hasAnswer = userAnswers.value[questionId] !== undefined
|
||||
const isVisited = visitedQuestions.value.has(index)
|
||||
|
||||
// 2. Completed = Green
|
||||
// 2. ตอบแล้ว = สีเขียว (Completed = Green)
|
||||
if (hasAnswer) {
|
||||
return 'bg-emerald-500 text-white border-emerald-600'
|
||||
}
|
||||
|
||||
// 3. Skipped = Orange (Visited but no answer)
|
||||
// Note: If we are strictly following "Skipped" definition:
|
||||
// "user pressed Skip or moved forward on a skippable question without saving an answer"
|
||||
// In this linear flow, merely visiting and leaving empty counts as skipped.
|
||||
// 3. ข้าม = สีส้ม (เปิดดูแล้วแต่ยังไม่ตอบ) (Skipped = Orange (Visited but no answer))
|
||||
// หมายเหตุ: ตามคำนิยามของการข้าม หากคลิกแล้วหน้าเว็บไม่บันทึกข้อมูลจะถือว่าเป็นการข้าม
|
||||
// ในขั้นตอนนี้การดูเฉยๆ แล้วผ่านถือเป็นการข้ามเช่นกัน
|
||||
if (isVisited && !hasAnswer) {
|
||||
return 'bg-orange-500 text-white border-orange-600'
|
||||
}
|
||||
|
||||
// 4. Not Started = Grey
|
||||
// 4. ยังไม่เริ่ม = สีเทา (Not Started = Grey)
|
||||
return 'bg-slate-200 text-slate-400 border-slate-300 dark:bg-white/5 dark:border-white/5 dark:text-slate-600 hover:bg-slate-300 dark:hover:bg-white/10'
|
||||
}
|
||||
|
||||
const jumpToQuestion = (targetIndex: number) => {
|
||||
if (targetIndex === currentQuestionIndex.value) return
|
||||
|
||||
// Validation before leaving current (same logic as Next)
|
||||
// ตรวจสอบก่อนออกจากข้อปัจจุบัน (Validation before leaving current)
|
||||
if (targetIndex > currentQuestionIndex.value) {
|
||||
// If jumping forward, we must validate the CURRENT question requirements
|
||||
// unless we treat grid jumps as free navigation?
|
||||
// Req: "user cannot go Next until the question is answered and saved" (if not skippable).
|
||||
// So we must check restriction on the current spot before leaving.
|
||||
// หากข้ามไปข้างหน้า จะต้องตรวจสอบว่าข้อปัจจุบันทำไปถึงไหนแล้ว
|
||||
// ควรบังคับให้คลิกคำตอบก่อนจึงข้ามได้ (เงื่อนไขสำหรับคำถามที่ไม่ให้ข้าม)
|
||||
const isAnswered = userAnswers.value[currentQuestion.value.id] !== undefined
|
||||
const isSkippable = quizData.value?.is_skippable
|
||||
|
||||
|
|
@ -91,12 +88,12 @@ const jumpToQuestion = (targetIndex: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
// If jumping backward? Usually allowed freely.
|
||||
// อนุญาตให้ย้อนกลับได้อย่างอิสระ (If jumping backward? Usually allowed freely.)
|
||||
|
||||
currentQuestionIndex.value = targetIndex
|
||||
}
|
||||
|
||||
// Computed
|
||||
// ตัวแปรแบบ Computed (Computed Properties)
|
||||
const currentQuestion = computed(() => {
|
||||
if (!quizData.value || !quizData.value.questions) return null
|
||||
return quizData.value.questions[currentQuestionIndex.value]
|
||||
|
|
@ -116,7 +113,7 @@ const timerDisplay = computed(() => {
|
|||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
|
||||
})
|
||||
|
||||
// Helper for localization
|
||||
// ฟังก์ชันช่วยเหลือสำหรับการแปลภาษา (Helper for localization)
|
||||
const getLocalizedText = (text: any) => {
|
||||
if (!text) return ''
|
||||
if (typeof text === 'string') return text
|
||||
|
|
@ -126,7 +123,7 @@ const getLocalizedText = (text: any) => {
|
|||
|
||||
const lessonProgress = ref<any>(null)
|
||||
|
||||
// Data Fetching
|
||||
// โหลดข้อมูล (Data Fetching)
|
||||
const loadData = async () => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
|
|
@ -138,9 +135,9 @@ const loadData = async () => {
|
|||
if (courseId && lessonId) {
|
||||
const lessonRes = await fetchLessonContent(courseId, lessonId)
|
||||
if (lessonRes.success) {
|
||||
// Determine if data is directly the quiz or nested
|
||||
// กำหนดข้อมูลแบบทดสอบ (Determine if data is directly the quiz or nested)
|
||||
quizData.value = lessonRes.data.quiz || lessonRes.data
|
||||
lessonProgress.value = lessonRes.progress // Capture progress
|
||||
lessonProgress.value = lessonRes.progress // บันทึกความคืบหน้า (Capture progress)
|
||||
if (quizData.value?.time_limit) {
|
||||
timeLeft.value = quizData.value.time_limit * 60
|
||||
}
|
||||
|
|
@ -153,7 +150,7 @@ const loadData = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// Helper for shuffling
|
||||
// ฟังก์ชันช่วยสุ่มเรียงลำดับอาร์เรย์ (Helper for shuffling)
|
||||
const shuffleArray = <T>(array: T[]): T[] => {
|
||||
return array
|
||||
.map(value => ({ value, sort: Math.random() }))
|
||||
|
|
@ -161,18 +158,18 @@ const shuffleArray = <T>(array: T[]): T[] => {
|
|||
.map(({ value }) => value)
|
||||
}
|
||||
|
||||
// Quiz Actions
|
||||
// การกระทำในแบบทดสอบ (Quiz Actions)
|
||||
const startQuiz = () => {
|
||||
// Deep copy to reset and apply shuffle
|
||||
// รีเซ็ตข้อมูลโดยคัดลอกใหม่เพื่อนำมาสุ่ม (Deep copy to reset and apply shuffle)
|
||||
const rawQuiz = JSON.parse(JSON.stringify(quizData.value))
|
||||
|
||||
if (rawQuiz) {
|
||||
// Shuffle Questions
|
||||
// สุ่มคำถาม (Shuffle Questions)
|
||||
if (rawQuiz.shuffle_questions && rawQuiz.questions) {
|
||||
rawQuiz.questions = shuffleArray(rawQuiz.questions)
|
||||
}
|
||||
|
||||
// Shuffle Choices
|
||||
// สุ่มตัวเลือกคำตอบ (Shuffle Choices)
|
||||
if (rawQuiz.shuffle_choices && rawQuiz.questions) {
|
||||
rawQuiz.questions.forEach((q: any) => {
|
||||
if (q.choices) {
|
||||
|
|
@ -180,7 +177,7 @@ const startQuiz = () => {
|
|||
}
|
||||
})
|
||||
}
|
||||
// Update state with shuffled data
|
||||
// อัปเดตข้อมูลให้เป็นแบบสุ่ม (Update state with shuffled data)
|
||||
quizData.value = rawQuiz
|
||||
}
|
||||
|
||||
|
|
@ -196,7 +193,7 @@ const startQuiz = () => {
|
|||
}, 1000)
|
||||
}
|
||||
|
||||
// Mark first as visited
|
||||
// ทำเครื่องหมายข้อแรกว่าเปิดดูแล้ว (Mark first as visited)
|
||||
visitedQuestions.value = new Set([0])
|
||||
}
|
||||
|
||||
|
|
@ -209,12 +206,12 @@ const selectAnswer = (choiceId: number) => {
|
|||
const nextQuestion = () => {
|
||||
if (!currentQuestion.value) return
|
||||
|
||||
// Allow skip if quiz is skippable or question is answered
|
||||
// อนุญาตให้ข้ามได้หากโหมดข้ามเปิดอยู่ หรือ ตอบแล้ว (Allow skip if quiz is skippable or question is answered)
|
||||
const isAnswered = userAnswers.value[currentQuestion.value.id] !== undefined
|
||||
const isSkippable = quizData.value?.is_skippable
|
||||
|
||||
if (!isAnswered && !isSkippable) {
|
||||
// Show warning
|
||||
// แสดงข้อความเตือน (Show warning)
|
||||
$q.notify({
|
||||
type: 'warning',
|
||||
message: t('quiz.pleaseSelectAnswer', 'กรุณาเลือกคำตอบ'),
|
||||
|
|
@ -241,7 +238,7 @@ const retryQuiz = () => {
|
|||
}
|
||||
|
||||
const submitQuiz = async (auto = false) => {
|
||||
// 1. Manual Validation: Check if all questions are answered
|
||||
// 1. ตรวจสอบก่อนว่าทำครบทุกข้อหรือยัง (Manual Validation: Check if all questions are answered)
|
||||
if (!auto) {
|
||||
const answeredCount = Object.keys(userAnswers.value).length
|
||||
if (answeredCount < totalQuestions.value) {
|
||||
|
|
@ -254,7 +251,7 @@ const submitQuiz = async (auto = false) => {
|
|||
return
|
||||
}
|
||||
|
||||
// Premium Confirmation before submission
|
||||
// หน้าต่างยืนยันส่งข้อสอบแบบสวยงาม (Premium Confirmation before submission)
|
||||
$q.dialog({
|
||||
title: `<div class="text-slate-900 dark:text-white font-black text-xl">${t('quiz.warningTitle')}</div>`,
|
||||
message: `<div class="text-slate-600 dark:text-slate-300 text-base leading-relaxed mt-2">${t('quiz.submitConfirm')}</div>`,
|
||||
|
|
@ -285,33 +282,33 @@ const submitQuiz = async (auto = false) => {
|
|||
}
|
||||
|
||||
const processSubmitQuiz = async (auto = false) => {
|
||||
// 2. Start Submission Process
|
||||
// 2. เริ่มขั้นตอนการส่งข้อสอบ (Start Submission Process)
|
||||
if (timerInterval) clearInterval(timerInterval)
|
||||
|
||||
isSubmitting.value = true
|
||||
currentScreen.value = 'result' // Switch to result screen to show progress
|
||||
currentScreen.value = 'result' // เปลี่ยนหน้าไปที่หน้าสรุปผล (Switch to result screen to show progress)
|
||||
|
||||
try {
|
||||
// Prepare Payload
|
||||
// เตรียมข้อมูลยิง API (Prepare Payload)
|
||||
const answersPayload = Object.entries(userAnswers.value).map(([qId, cId]) => ({
|
||||
question_id: Number(qId),
|
||||
choice_id: cId
|
||||
}))
|
||||
|
||||
// Check if already passed
|
||||
// ตรวจสอบว่าเคยผ่านแล้วหรือไม่ (Check if already passed)
|
||||
const alreadyPassed = lessonProgress.value?.is_passed || lessonProgress.value?.is_completed || false
|
||||
|
||||
// Call API
|
||||
// เรียก API (Call API)
|
||||
const res = await apiSubmitQuiz(courseId, lessonId, answersPayload, alreadyPassed)
|
||||
|
||||
if (res.success && res.data) {
|
||||
quizResult.value = res.data
|
||||
// Update local progress if passed and not previously passed
|
||||
// อัปเดตข้อมูลบนเว็บหากผ่านแบบทดสอบ (Update local progress if passed and not previously passed)
|
||||
if (res.data.is_passed && !alreadyPassed) {
|
||||
if (lessonProgress.value) lessonProgress.value.is_passed = true
|
||||
}
|
||||
} else {
|
||||
// Fallback error handling
|
||||
// การจัดการเมื่อเกิดข้อผิดพลาดฉุกเฉิน (Fallback error handling)
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: res.error || 'Failed to submit quiz'
|
||||
|
|
@ -364,14 +361,14 @@ const reviewQuiz = () => {
|
|||
currentScreen.value = 'review'
|
||||
}
|
||||
|
||||
// Helper to get choice label (A, B, C...)
|
||||
// เปลี่ยน ID เป็นตัวอักษรเพื่อความสวยงาม (A, B, C...) (Helper to get choice label (A, B, C...))
|
||||
const getChoiceLabel = (index: number) => {
|
||||
return String.fromCharCode(65 + index) // 65 is 'A'
|
||||
}
|
||||
|
||||
const getCorrectChoiceId = (questionId: number) => {
|
||||
if (!quizResult.value?.answers_review) return null
|
||||
// Type checking for safety
|
||||
// เช็คข้อมูลก่อนพัง (Type checking for safety)
|
||||
const review = Array.isArray(quizResult.value.answers_review)
|
||||
? quizResult.value.answers_review.find((r: any) => r.question_id === questionId)
|
||||
: null
|
||||
|
|
@ -384,7 +381,7 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
<q-page-container>
|
||||
<q-page>
|
||||
<div class="quiz-shell min-h-screen bg-slate-50 dark:bg-[#0b0f1a] text-slate-900 dark:text-slate-200 antialiased selection:bg-blue-500/20 transition-colors">
|
||||
<!-- Header -->
|
||||
<!-- ส่วนหัว (Header) -->
|
||||
<header class="h-14 bg-white dark:!bg-[var(--bg-surface)] 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 w-full justify-between">
|
||||
<div class="flex items-center">
|
||||
|
|
@ -410,7 +407,7 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<!-- พื้นที่เนื้อหาหลัก (Main Content Area) -->
|
||||
<main class="pt-14 h-screen flex items-center justify-center overflow-y-auto px-4 custom-scrollbar">
|
||||
|
||||
<div v-if="isLoading" class="flex flex-col items-center gap-4">
|
||||
|
|
@ -435,9 +432,9 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- 1. START SCREEN -->
|
||||
<!-- 1. หน้าเริ่มต้น (START SCREEN) -->
|
||||
<div v-if="currentScreen === 'start'" class="w-full max-w-[640px] animate-fade-in py-12">
|
||||
<!-- ... (Start Screen is unchanged but needs to be here for context) ... -->
|
||||
<!-- ... (หน้าแรกยังคงเหมือนเดิม แปะไว้เป็น reference) ... -->
|
||||
<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">
|
||||
|
||||
<div class="flex justify-center mb-10">
|
||||
|
|
@ -459,7 +456,7 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Instruction Box -->
|
||||
<!-- กล่องคำแนะนำ (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">
|
||||
{{ $t('quiz.instructionTitle') }}
|
||||
|
|
@ -483,17 +480,16 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. TAKING SCREEN -->
|
||||
<!-- 2. TAKING SCREEN -->
|
||||
<!-- 2. หน้าทำแบบทดสอบ (TAKING SCREEN) -->
|
||||
<div v-if="currentScreen === 'taking'" class="w-full max-w-[840px] animate-fade-in py-12">
|
||||
<div v-if="currentQuestion" class="bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[32px] p-8 md:p-12 shadow-xl relative overflow-hidden">
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<!-- แถบความคืบหน้า (Progress Bar) -->
|
||||
<div class="absolute top-0 left-0 right-0 h-1.5 bg-slate-100 dark:bg-white/5">
|
||||
<div class="h-full bg-blue-500 transition-all duration-300" :style="{ width: ((currentQuestionIndex + 1) / totalQuestions) * 100 + '%' }"></div>
|
||||
</div>
|
||||
|
||||
<!-- Question Map / Pagination -->
|
||||
<!-- แผนที่คำถาม / การเปลี่ยนหน้า (Question Map / Pagination) -->
|
||||
<div class="flex flex-wrap gap-2 mb-8 mt-4">
|
||||
<button
|
||||
v-for="(q, idx) in quizData?.questions"
|
||||
|
|
@ -506,12 +502,12 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Question Title -->
|
||||
<!-- ชื่อคำถาม (Question Title) -->
|
||||
<h3 class="text-xl md:text-2xl font-bold text-slate-900 dark:text-white mb-10 leading-relaxed">
|
||||
{{ getLocalizedText(currentQuestion.question) }}
|
||||
</h3>
|
||||
|
||||
<!-- Choices -->
|
||||
<!-- ส่วนการเลือกคำตอบ (Choices) -->
|
||||
<div class="flex flex-col gap-4 mb-12">
|
||||
<button
|
||||
v-for="choice in currentQuestion.choices"
|
||||
|
|
@ -533,7 +529,7 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
|
||||
|
||||
|
||||
<!-- Controls -->
|
||||
<!-- ปุ่มควบคุมต่างๆ (Controls) -->
|
||||
<div class="flex justify-between items-center pt-8 border-t border-slate-100 dark:border-white/5">
|
||||
<button
|
||||
@click="prevQuestion"
|
||||
|
|
@ -563,7 +559,7 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
|
||||
|
||||
|
||||
<!-- 3. RESULT SCREEN -->
|
||||
<!-- 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 shadow-2xl text-center relative overflow-hidden">
|
||||
|
||||
|
|
@ -586,7 +582,7 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Score Card -->
|
||||
<!-- บัตรแสดงคะแนน (Score Card) -->
|
||||
<div class="bg-slate-50 dark:bg-[#0b121f] rounded-3xl p-6 mb-8 flex items-center justify-around border border-slate-100 dark:border-white/5">
|
||||
<div class="text-center">
|
||||
<div class="text-xs font-black text-slate-400 uppercase tracking-widest mb-1">{{ $t('quiz.scoreLabel') }}</div>
|
||||
|
|
@ -626,7 +622,7 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. REVIEW SCREEN -->
|
||||
<!-- 4. หน้าทบทวนข้อสอบ (REVIEW SCREEN) -->
|
||||
<div v-if="currentScreen === 'review'" class="w-full max-w-[840px] animate-fade-in py-12 pb-24">
|
||||
<div class="space-y-6">
|
||||
<div
|
||||
|
|
@ -652,7 +648,7 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
'border-slate-100 dark:border-white/5 opacity-80 dark:opacity-40': userAnswers[question.id] !== choice.id && choice.id !== getCorrectChoiceId(question.id)
|
||||
}"
|
||||
>
|
||||
<!-- Indicator Icon -->
|
||||
<!-- ไอคอนสถานะ (Indicator Icon) -->
|
||||
<div
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 font-bold text-sm border-2"
|
||||
:class="{
|
||||
|
|
@ -668,7 +664,7 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
|
||||
<span class="font-medium text-slate-700 dark:text-slate-300">{{ getLocalizedText(choice.text) }}</span>
|
||||
|
||||
<!-- Label Badge -->
|
||||
<!-- ป้ายแสดงสถานะ (Label Badge) -->
|
||||
<div v-if="choice.id === getCorrectChoiceId(question.id)" class="ml-auto px-2 py-0.5 bg-emerald-100 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 text-xs font-bold rounded uppercase tracking-wider">
|
||||
{{ $t('quiz.correctLabel', 'Correct') }}
|
||||
</div>
|
||||
|
|
@ -695,11 +691,11 @@ const getCorrectChoiceId = (questionId: number) => {
|
|||
</main>
|
||||
|
||||
|
||||
</div> <!-- Close quiz-shell -->
|
||||
</div> <!-- ปิดส่วนเปลือกข้อสอบ (Close quiz-shell) -->
|
||||
|
||||
|
||||
<!-- Question Navigator Sidebar/Floating (Desktop) - Outside Main Flow -->
|
||||
<!-- Using QPageSticky properly inside q-page/q-layout context we added -->
|
||||
<!-- ป๊อปอัปแผนที่คำถาม (เดสก์ท็อป) - อยู่นอกพื้นที่ทำงานปกติ (Question Navigator Sidebar/Floating (Desktop) - Outside Main Flow) -->
|
||||
<!-- ใช้งาน QPageSticky ให้ถูกที่ (Using QPageSticky properly inside q-page/q-layout context we added) -->
|
||||
<q-page-sticky
|
||||
v-if="false"
|
||||
position="top-right"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue