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

feat: Implement Playwright E2E tests for authentication, quiz, student account, and discovery, and add a new quiz page.
Some checks failed
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Failing after 25s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Has been skipped
Details
Build and Deploy Frontend Learner / Notify Deployment Status (push) Failing after 1s
Details

Browse source
This commit is contained in:
supalerk-ar66 2026-03-04 15:07:02 +07:00
parent 1c63e79db1
commit b6c1aebe30
44 changed files with 660 additions and 1148 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,9 +36,13 @@ const userAnswers = ref<Record<number, number>>({}) // ID คำถาม -> ID
const visitedQuestions = ref<Set<number>>(new Set()) // ติดตามข้อที่เคยเปิดดูแล้ว (Track visited indices)
const quizResult = ref<any>(null)
const questionPageSize = 10
const questionPage = ref(0)
// ติดตามคำถามที่เปิดดูแล้ว (Tracking visited questions)
watch(currentQuestionIndex, (newVal) => {
visitedQuestions.value.add(newVal)
questionPage.value = Math.floor(newVal / questionPageSize)
}, { immediate: true })
// ฟังก์ชันช่วยเหลือ: ดึงคลาสสีสำหรับสถานะคำถาม (Helper: Get Status Color Class)
@ -93,6 +97,29 @@ const jumpToQuestion = (targetIndex: number) => {
currentQuestionIndex.value = targetIndex
}
const totalQuestionPages = computed(() => Math.ceil(totalQuestions.value / questionPageSize))
const visibleQuestions = computed(() => {
if (!quizData.value?.questions) return []
const start = questionPage.value * questionPageSize
return quizData.value.questions.slice(start, start + questionPageSize).map((q: any, i: number) => ({
...q,
originalIndex: start + i
}))
})
const nextQuestionPage = () => {
if (questionPage.value < totalQuestionPages.value - 1) {
questionPage.value++
}
}
const prevQuestionPage = () => {
if (questionPage.value > 0) {
questionPage.value--
}
}
// ตัวแปรแบบ Computed (Computed Properties)
const currentQuestion = computed(() => {
if (!quizData.value || !quizData.value.questions) return null
@ -490,15 +517,39 @@ const getCorrectChoiceId = (questionId: number) => {
</div>
<!-- แผนที่คำถาม / การเปลี่ยนหน้า (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)"
<div class="flex items-center justify-center gap-2 mb-8 mt-4 select-none bg-slate-50 dark:bg-[#0b121f]/50 p-2 rounded-2xl border border-slate-100 dark:border-white/5 w-fit mx-auto">
<!-- ปุ่มย้อนกลับ (หน้าก่อนหน้า) -->
<button
v-if="totalQuestionPages > 1"
@click="prevQuestionPage"
:disabled="questionPage === 0"
class="w-8 h-8 md:w-10 md:h-10 rounded-lg flex items-center justify-center transition-all flex-shrink-0"
:class="questionPage === 0 ? 'text-slate-300 dark:text-slate-600 bg-transparent cursor-not-allowed' : 'text-slate-600 dark:text-slate-300 bg-white dark:bg-[#1e293b] hover:bg-slate-200 dark:hover:bg-white/10 shadow-sm border border-slate-200 dark:border-white/10 text-lg hover:-translate-x-0.5'"
>
{{ Number(idx) + 1 }}
<q-icon name="chevron_left" />
</button>
<div class="flex flex-wrap items-center justify-center gap-2">
<button
v-for="q in visibleQuestions"
:key="q.id"
@click="jumpToQuestion(q.originalIndex)"
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(q.originalIndex, q.id)"
>
{{ q.originalIndex + 1 }}
</button>
</div>
<!-- ปุ่มถัดไป (หน้าถัดไป) -->
<button
v-if="totalQuestionPages > 1"
@click="nextQuestionPage"
:disabled="questionPage === totalQuestionPages - 1"
class="w-8 h-8 md:w-10 md:h-10 rounded-lg flex items-center justify-center transition-all flex-shrink-0"
:class="questionPage === totalQuestionPages - 1 ? 'text-slate-300 dark:text-slate-600 bg-slate-100 dark:bg-white/5 cursor-not-allowed' : 'text-slate-600 dark:text-slate-300 bg-white dark:bg-[#1e293b] hover:bg-slate-100 dark:hover:bg-white/10 shadow-sm border border-slate-200 dark:border-white/10 text-lg hover:translate-x-0.5'"
>
<q-icon name="chevron_right" />
</button>
</div>