chamomind/elearning
6
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Implement quiz runner functionality with dedicated pages, composable logic, and i18n support.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-04 14:16:02 +07:00
parent 7e8c8e2532
commit 67f10c4287
5 changed files with 759 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

196
Frontend-Learner/pages/classroom/quiz.vue
View file

@ -33,8 +33,69 @@ const isSubmitting = ref(false)
// 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 quizResult = ref<any>(null)
// Tracking visited questions
watch(currentQuestionIndex, (newVal) => {
visitedQuestions.value.add(newVal)
}, { immediate: true })
// Helper: Get Status Color Class
const getQuestionStatusClass = (index: number, questionId: number) => {
// 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'
}
const hasAnswer = userAnswers.value[questionId] !== undefined
const isVisited = visitedQuestions.value.has(index)
// 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.
if (isVisited && !hasAnswer) {
return 'bg-orange-500 text-white border-orange-600'
}
// 4. Not Started = Grey
return 'bg-slate-200 text-slate-400 border-slate-300 dark:bg-white/5 dark:border-white/10 dark:text-slate-500 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)
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
if (!isAnswered && !isSkippable) {
$q.notify({
type: 'warning',
message: t('quiz.pleaseSelectAnswer', 'กรุณาเลือกคำตอบ'),
position: 'top',
timeout: 2000
})
return
}
}
// If jumping backward? Usually allowed freely.
currentQuestionIndex.value = targetIndex
}
// Computed
const currentQuestion = computed(() => {
if (!quizData.value || !quizData.value.questions) return null
@ -45,6 +106,8 @@ const totalQuestions = computed(() => {
return quizData.value?.questions?.length || 0
})
const showQuestionMap = computed(() => $q.screen.gt.sm)
const timerDisplay = computed(() => {
const minutes = Math.floor(timeLeft.value / 60)
const seconds = timeLeft.value % 60
@ -129,6 +192,9 @@ const startQuiz = () => {
else submitQuiz(true)
}, 1000)
}
// Mark first as visited
visitedQuestions.value = new Set([0])
}
const selectAnswer = (choiceId: number) => {
@ -140,8 +206,11 @@ const selectAnswer = (choiceId: number) => {
const nextQuestion = () => {
if (!currentQuestion.value) return
// Check if answered
if (!userAnswers.value[currentQuestion.value.id]) {
// 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
$q.notify({
type: 'warning',
@ -177,6 +246,29 @@ const submitQuiz = async (auto = false) => {
currentScreen.value = 'result' // Switch to result screen immediately to show loader
try {
// Validate completion (User Request: Must answer ALL questions)
if (!auto) {
const answeredCount = Object.keys(userAnswers.value).length
if (answeredCount < totalQuestions.value) {
$q.notify({
type: 'warning',
message: t('quiz.alertIncomplete', 'กรุณาเลือกคำตอบให้ครบทุกข้อ'),
position: 'top',
timeout: 2000
})
isSubmitting.value = false
currentScreen.value = 'taking'
return
}
// Confirm submission only if manual
if (!confirm(t('quiz.submitConfirm', 'ยืนยันการส่งคำตอบ?'))) {
isSubmitting.value = false
currentScreen.value = 'taking'
return
}
}
// Prepare Payload
const answersPayload = Object.entries(userAnswers.value).map(([qId, cId]) => ({
question_id: Number(qId),
@ -189,7 +281,7 @@ const submitQuiz = async (auto = false) => {
// Call API
const res = await apiSubmitQuiz(courseId, lessonId, answersPayload, alreadyPassed)
if (res.success) {
if (res.success && res.data) {
quizResult.value = res.data
// Update local progress if passed and not previously passed
if (res.data.is_passed && !alreadyPassed) {
@ -244,7 +336,10 @@ const getCorrectChoiceId = (questionId: number) => {
</script>
<template>
<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">
<q-layout view="hHh lpR fFf" class="bg-slate-50 dark:bg-[#0b0f1a]"> <!-- Ensure background matches -->
<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 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">
@ -328,16 +423,27 @@ const getCorrectChoiceId = (questionId: number) => {
</div>
</div>
<!-- 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 -->
<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>
<div class="flex justify-between items-start mb-8 mt-2">
<span class="text-xs font-black text-slate-400 uppercase tracking-widest">Question {{ currentQuestionIndex + 1 }} / {{ totalQuestions }}</span>
<!-- Question Map / Pagination -->
<div class="flex flex-wrap gap-2 mb-8 mt-4">
<button
v-for="(q, idx) in quizData?.questions"
:key="q.id"
@click="jumpToQuestion(Number(idx))"
class="w-8 h-8 md:w-10 md:h-10 rounded-lg flex items-center justify-center text-xs md:text-sm font-bold transition-all border"
:class="getQuestionStatusClass(Number(idx), q.id)"
>
{{ Number(idx) + 1 }}
</button>
</div>
<!-- Question Title -->
@ -365,6 +471,26 @@ const getCorrectChoiceId = (questionId: number) => {
</button>
</div>
<div class="mb-8 px-2">
<div class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">
{{ $t('quiz.statusLabel', 'สถานะข้อสอบ') }}
</div>
<div class="flex flex-wrap items-center gap-4">
<div class="flex items-center gap-2 text-sm font-medium text-slate-500 dark:text-slate-400">
<div class="w-2.5 h-2.5 rounded-full bg-blue-500 ring-2 ring-blue-100 dark:ring-blue-900/30"></div> {{ $t('quiz.statusCurrent', 'Current') }}
</div>
<div class="flex items-center gap-2 text-sm font-medium text-slate-500 dark:text-slate-400">
<div class="w-2.5 h-2.5 rounded-full bg-emerald-500"></div> {{ $t('quiz.statusCompleted', 'Completed') }}
</div>
<div class="flex items-center gap-2 text-sm font-medium text-slate-500 dark:text-slate-400">
<div class="w-2.5 h-2.5 rounded-full bg-orange-500"></div> {{ $t('quiz.statusSkipped', 'Skipped') }}
</div>
<div class="flex items-center gap-2 text-sm font-medium text-slate-500 dark:text-slate-400">
<div class="w-2.5 h-2.5 rounded-full bg-slate-200 dark:bg-slate-700"></div> {{ $t('quiz.statusNotStarted', 'Not Started') }}
</div>
</div>
</div>
<!-- Controls -->
<div class="flex justify-between items-center pt-8 border-t border-slate-100 dark:border-white/5">
<button
@ -393,6 +519,8 @@ const getCorrectChoiceId = (questionId: number) => {
</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 shadow-2xl text-center relative overflow-hidden">
@ -465,7 +593,7 @@ const getCorrectChoiceId = (questionId: number) => {
>
<div class="flex items-start gap-4">
<span class="flex-shrink-0 w-8 h-8 rounded-lg bg-slate-100 dark:bg-white/10 flex items-center justify-center font-black text-slate-500 dark:text-slate-300 text-sm">
{{ qIndex + 1 }}
{{ Number(qIndex) + 1 }}
</span>
<div class="flex-1">
<h3 class="font-bold text-lg text-slate-900 dark:text-white mb-6">{{ getLocalizedText(question.question) }}</h3>
@ -492,7 +620,7 @@ const getCorrectChoiceId = (questionId: number) => {
>
<q-icon v-if="choice.id === getCorrectChoiceId(question.id)" name="check" size="16px" />
<q-icon v-else-if="userAnswers[question.id] === choice.id" name="close" size="16px" />
<span v-else>{{ getChoiceLabel(cIndex) }}</span>
<span v-else>{{ getChoiceLabel(Number(cIndex)) }}</span>
</div>
<span class="font-medium text-slate-700 dark:text-slate-300">{{ getLocalizedText(choice.text) }}</span>
@ -522,7 +650,57 @@ const getCorrectChoiceId = (questionId: number) => {
</div>
</template>
</main>
</div>
</div> <!-- Close quiz-shell -->
<!-- Question Navigator Sidebar/Floating (Desktop) - Outside Main Flow -->
<!-- Using QPageSticky properly inside q-page/q-layout context we added -->
<q-page-sticky
v-if="false"
position="top-right"
:offset="[32, 110]"
class="z-[2000] flex animate-fade-in"
>
<div class="w-64 bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-2xl p-4 shadow-xl">
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2">
<q-icon name="grid_view" /> {{ $t('quiz.questionMap', 'Question Map') }}
</h3>
<div class="grid grid-cols-5 gap-2 max-h-[60vh] overflow-y-auto custom-scrollbar pr-1">
<button
v-for="(q, idx) in quizData?.questions"
:key="q.id"
@click="jumpToQuestion(Number(idx))"
class="w-full aspect-square rounded-lg flex items-center justify-center text-xs font-bold transition-all border"
:class="getQuestionStatusClass(Number(idx), q.id)"
>
{{ Number(idx) + 1 }}
</button>
</div>
<!-- Mini Legend -->
<div class="mt-6 space-y-2">
<div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400">
<div class="w-2.5 h-2.5 rounded-full bg-blue-500"></div> Current
</div>
<div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400">
<div class="w-2.5 h-2.5 rounded-full bg-emerald-500"></div> Completed
</div>
<div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400">
<div class="w-2.5 h-2.5 rounded-full bg-orange-500"></div> Skipped
</div>
<div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400">
<div class="w-2.5 h-2.5 rounded-full bg-slate-200 dark:bg-slate-700"></div> Not Started
</div>
</div>
</div>
</q-page-sticky>
</q-page>
</q-page-container>
</q-layout>
</template>
<style scoped>