feat: quiz base

This commit is contained in:
Jannat Patel
2023-12-28 11:59:44 +05:30
parent e1d61c9eb9
commit 7087fde686
9 changed files with 334 additions and 41 deletions

View File

@@ -1,7 +1,7 @@
<template>
<div class="text-base">
<div class="course-outline text-base">
<div class="mt-4">
<Disclosure v-slot="{ open }" v-for="(chapter, index) in outline.data" :key="chapter.name" :defaultOpen="index == 0">
<Disclosure v-slot="{ open }" v-for="(chapter, index) in outline.data" :key="chapter.name" :defaultOpen="chapter.idx == route.params.chapterNumber">
<DisclosureButton class="flex w-full px-2 pt-2 pb-3">
<ChevronRight
:class="{'rotate-90 transform duration-200' : open, 'duration-200' : !open, 'open': index == 1}"
@@ -11,13 +11,24 @@
{{ chapter.title }}
</div>
</DisclosureButton>
<DisclosurePanel class="px-10 pb-4">
<DisclosurePanel class="pb-2">
<div v-for="lesson in chapter.lessons" :key="lesson.name">
<div class="flex items-center text-base mb-3">
<MonitorPlay v-if="lesson.icon === 'icon-youtube'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
<HelpCircle v-else-if="lesson.icon === 'icon-quiz'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
<FileText v-else-if="lesson.icon === 'icon-list'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
{{ lesson.title }}
<div class="outline-lesson mb-2 px-8">
<router-link :to='{
name: "Lesson",
params: {
courseName: courseName,
chapterNumber: lesson.number.split(".")[0],
lessonNumber: lesson.number.split(".")[1],
}
}'>
<div class="flex items-center text-base">
<MonitorPlay v-if="lesson.icon === 'icon-youtube'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
<HelpCircle v-else-if="lesson.icon === 'icon-quiz'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
<FileText v-else-if="lesson.icon === 'icon-list'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
{{ lesson.title }}
</div>
</router-link>
</div>
</div>
</DisclosurePanel>
@@ -29,7 +40,9 @@
import { createResource } from "frappe-ui";
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
import { ChevronRight, MonitorPlay, HelpCircle, FileText } from 'lucide-vue-next';
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps({
courseName: {
type: String,
@@ -45,4 +58,10 @@ const outline = createResource({
},
auto: true,
});
</script>
</script>
<style>
.outline-lesson:has(.router-link-active) {
background-color: theme('colors.gray.100');
padding: 0.5rem 0 0.5rem 2rem;
}
</style>