chamomind/elearning
7
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>

301
Frontend-Learner/pages/quiz/[id].vue Normal file
View file

@ -0,0 +1,301 @@
<template>
<div class="min-h-screen bg-gray-50 p-4 md:p-8">
<div class="max-w-4xl mx-auto">
<!-- Header / Title -->
<div class="mb-6 flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold text-gray-800">Quiz Runner</h1>
<p class="text-gray-500">Subject: General Knowledge</p>
</div>
<div class="text-right hidden md:block">
<div class="text-sm text-gray-400">Time Elapsed</div>
<div class="font-mono text-xl">10:05</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Sidebar: Question Navigator -->
<div class="lg:col-span-3 order-2 lg:order-1">
<QCard class="bg-white shadow-sm sticky top-4">
<QCardSection>
<div class="text-subtitle1 font-bold mb-3">Questions</div>
<div class="grid grid-cols-5 gap-2">
<button
v-for="(q, index) in store.questions"
:key="q.id"
@click="store.goToQuestion(index)"
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-all border-2"
:class="getIndicatorClass(index, q.id)"
>
{{ index + 1 }}
</button>
</div>
<!-- Legend -->
<div class="mt-6 space-y-2 text-xs text-gray-600">
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-blue-500"></div> Current</div>
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-green-500"></div> Completed</div>
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-orange-500"></div> Skipped</div>
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-gray-300"></div> Not Started</div>
</div>
</QCardSection>
</QCard>
</div>
<!-- Main Content: Question -->
<div class="lg:col-span-9 order-1 lg:order-2">
<QCard v-if="store.currentQuestion" class="bg-white shadow-md min-h-[400px] flex flex-col">
<!-- Question Header -->
<QCardSection class="bg-gray-50 border-b border-gray-100 py-4">
<div class="flex justify-between items-start">
<div>
<QBadge :color="store.currentQuestion.is_skippable ? 'orange' : 'red'" class="mb-2">
{{ store.currentQuestion.is_skippable ? 'Optional' : 'Required' }}
</QBadge>
<h2 class="text-xl font-medium text-gray-800">
<span class="text-gray-400 mr-2">{{ store.currentQuestionIndex + 1 }}.</span>
{{ store.currentQuestion.title }}
</h2>
</div>
</div>
</QCardSection>
<!-- Question Body -->
<QCardSection class="flex-grow py-8 px-6">
<!-- Single Choice -->
<div v-if="store.currentQuestion.type === 'single'">
<div v-for="opt in store.currentQuestion.options" :key="opt.id"
class="mb-3 p-3 border rounded-lg hover:bg-blue-50 cursor-pointer transition-colors"
:class="{ 'border-blue-500 bg-blue-50': currentVal === opt.id, 'border-gray-200': currentVal !== opt.id }"
@click="handleInput(opt.id)">
<div class="flex items-center">
<div class="w-5 h-5 rounded-full border flex items-center justify-center mr-3"
:class="{ 'border-blue-500': currentVal === opt.id, 'border-gray-300': currentVal !== opt.id }">
<div v-if="currentVal === opt.id" class="w-2.5 h-2.5 rounded-full bg-blue-500"></div>
</div>
<span class="text-gray-700">{{ opt.label }}</span>
</div>
</div>
</div>
<!-- Multiple Choice -->
<div v-else-if="store.currentQuestion.type === 'multiple'">
<div v-for="opt in store.currentQuestion.options" :key="opt.id"
class="mb-3 p-3 border rounded-lg hover:bg-blue-50 cursor-pointer transition-colors"
:class="{ 'border-blue-500 bg-blue-50': isSelected(opt.id), 'border-gray-200': !isSelected(opt.id) }"
@click="toggleSelection(opt.id)">
<div class="flex items-center">
<div class="w-5 h-5 rounded border flex items-center justify-center mr-3"
:class="{ 'border-blue-500 bg-blue-500': isSelected(opt.id), 'border-gray-300': !isSelected(opt.id) }">
<QIcon v-if="isSelected(opt.id)" name="check" class="text-white text-xs" />
</div>
<span class="text-gray-700">{{ opt.label }}</span>
</div>
</div>
</div>
<!-- Text Input -->
<div v-else-if="store.currentQuestion.type === 'text'">
<QInput
v-model="textModel"
type="textarea"
outlined
rows="6"
placeholder="Type your answer here..."
class="w-full text-lg"
@update:model-value="handleTextInput"
/>
</div>
</QCardSection>
<!-- Error Banner -->
<QBanner v-if="store.lastError" class="bg-red-50 text-red-600 px-6 py-2 border-t border-red-100">
<template v-slot:avatar>
<QIcon name="warning" color="red" />
</template>
{{ store.lastError }}
</QBanner>
<!-- Actions Footer -->
<QCardSection class="border-t border-gray-100 bg-gray-50 p-4 flex flex-wrap gap-4 items-center justify-between">
<QBtn
flat
color="grey-7"
label="Previous"
icon="arrow_back"
:disable="store.isFirstQuestion"
@click="store.prevQuestion()"
no-caps
/>
<div class="flex gap-3">
<QBtn
v-if="store.currentQuestion.is_skippable && store.answers[store.currentQuestion.id]?.status !== 'completed'"
flat
color="orange-8"
label="Skip for now"
@click="store.skipQuestion()"
no-caps
/>
<QBtn
unelevated
:loading="store.loading"
:color="isSaved ? 'green' : 'primary'"
:label="isSaved ? 'Saved' : 'Save Answer'"
:icon="isSaved ? 'check' : 'save'"
class="px-6"
@click="store.saveCurrentAnswer()"
no-caps
/>
<QBtn
unelevated
color="grey-9"
label="Next"
icon-right="arrow_forward"
:disable="store.isLastQuestion"
@click="store.nextQuestion()"
no-caps
/>
</div>
</QCardSection>
</QCard>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref, onMounted, watch, reactive } from 'vue';
import { useRoute } from 'vue-router';
// Composable is auto-imported in Nuxt
// import { useQuizRunner } from '@/composables/useQuizRunner';
const route = useRoute();
// Wrap in reactive to unwrap refs, mimicking Pinia store behavior for template
const store = reactive(useQuizRunner());
onMounted(() => {
const quizId = route.params.id as string;
store.initQuiz(quizId);
});
// -- Helpers for Input Handling --
const currentVal = computed(() => {
return store.currentAnswer?.value;
});
const isSaved = computed(() => {
return store.currentAnswer?.is_saved;
});
// Single Choice
function handleInput(val: string) {
store.updateAnswer(val);
}
// Text Choice
const textModel = ref('');
// Watch for question changes to reset text model
watch(
() => store.currentQuestionIndex,
() => {
if (store.currentQuestion?.type === 'text') {
textModel.value = (store.currentAnswer?.value as string) || '';
}
// Clear error when changing question
store.lastError = null;
// Scroll to top
if (typeof window !== 'undefined') {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
},
{ immediate: true }
);
// Watch for error to scroll to error/field
watch(
() => store.lastError,
(newVal) => {
if (newVal) {
if (typeof document !== 'undefined') {
setTimeout(() => {
const errorEl = document.querySelector('.q-banner');
if (errorEl) {
errorEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}, 100);
}
}
}
)
function handleTextInput(val: string | number | null) {
store.updateAnswer(val as string);
}
// Multiple Choice
function isSelected(id: string) {
const val = store.currentAnswer?.value;
if (Array.isArray(val)) {
return val.includes(id);
}
return false;
}
function toggleSelection(id: string) {
const val = store.currentAnswer?.value;
let currentArr: string[] = [];
if (Array.isArray(val)) {
currentArr = [...val];
}
const idx = currentArr.indexOf(id);
if (idx >= 0) {
currentArr.splice(idx, 1);
} else {
currentArr.push(id);
}
store.updateAnswer(currentArr);
}
// -- Helpers for Styling --
function getIndicatorClass(index: number, qId: number) {
// 1. Current = Blue
if (index === store.currentQuestionIndex) {
return 'bg-blue-500 text-white border-blue-600';
}
const status = store.answers[qId]?.status || 'not_started';
switch (status) {
case 'completed':
return 'bg-green-500 text-white border-green-600';
case 'skipped':
return 'bg-orange-500 text-white border-orange-600';
case 'in_progress':
// If it's in_progress but NOT current (should be rare/impossible with strict logic, but handled)
return 'bg-blue-200 text-blue-800 border-blue-300';
case 'not_started':
default:
return 'bg-gray-200 text-gray-400 border-gray-300 hover:bg-gray-300';
}
}
</script>
<style scoped>
/* Optional: Transitions */
</style>