Merge branch 'develop' of https://github.com/frappe/lms into posthog
This commit is contained in:
Jannat Patel
@@ -75,7 +75,7 @@
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'flex items-center rounded px-2.5 py-1.5 text-base',
|
||||
'flex items-center rounded px-2.5 py-2 text-base',
|
||||
{ 'bg-gray-100': active },
|
||||
]"
|
||||
>
|
||||
@@ -87,7 +87,16 @@
|
||||
name="item-label"
|
||||
v-bind="{ active, selected, option }"
|
||||
>
|
||||
{{ option.label }}
|
||||
<div class="flex flex-col space-y-1">
|
||||
<div>
|
||||
{{ option.label }}
|
||||
</div>
|
||||
<div
|
||||
v-if="option.label != option.description"
|
||||
class="text-xs text-gray-700"
|
||||
v-html="option.description"
|
||||
></div>
|
||||
</div>
|
||||
</slot>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
|
||||
@@ -77,6 +77,7 @@ const valuePropPassed = computed(() => 'value' in attrs)
|
||||
const value = computed({
|
||||
get: () => (valuePropPassed.value ? attrs.value : props.modelValue),
|
||||
set: (val) => {
|
||||
console.log(valuePropPassed.value)
|
||||
return (
|
||||
val?.value &&
|
||||
emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value)
|
||||
@@ -118,6 +119,7 @@ const options = createResource({
|
||||
return {
|
||||
label: option.value,
|
||||
value: option.value,
|
||||
description: option.description,
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="text-lg font-semibold">
|
||||
{{ __('Components') }}
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<div class="mt-5 space-y-4">
|
||||
<Tooltip
|
||||
:text="
|
||||
__(
|
||||
@@ -18,20 +18,31 @@
|
||||
<Select v-model="currentEditor" :options="getEditorOptions()" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div class="flex mt-4">
|
||||
<div class="flex">
|
||||
<Link
|
||||
v-model="quiz"
|
||||
:value="quiz"
|
||||
class="flex-1"
|
||||
doctype="LMS Quiz"
|
||||
:label="__('Select a Quiz')"
|
||||
:label="__('Add an existing quiz')"
|
||||
@change="(option) => addQuiz(option)"
|
||||
/>
|
||||
<Button @click="addQuiz()" class="self-end ml-2">
|
||||
<template #icon>
|
||||
<Plus class="h-4 w-4 stroke-1.5" />
|
||||
</template>
|
||||
</Button>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'QuizCreation',
|
||||
params: {
|
||||
quizID: 'new',
|
||||
},
|
||||
}"
|
||||
class="self-end ml-2"
|
||||
>
|
||||
<Button>
|
||||
<template #icon>
|
||||
<Plus class="h-4 w-4 stroke-1.5" />
|
||||
</template>
|
||||
</Button>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="">
|
||||
<div class="text-xs text-gray-600 mb-1">
|
||||
{{ __('Add an image, video, pdf or audio.') }}
|
||||
</div>
|
||||
@@ -68,7 +79,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="">
|
||||
<div class="text-xs text-gray-600 mb-1">
|
||||
{{
|
||||
__(
|
||||
@@ -112,11 +123,13 @@ const props = defineProps({
|
||||
},
|
||||
})
|
||||
|
||||
const addQuiz = () => {
|
||||
const addQuiz = (value) => {
|
||||
console.log('here')
|
||||
console.log(value)
|
||||
getCurrentEditor().caret.setToLastBlock('end', 0)
|
||||
if (quiz.value) {
|
||||
if (value) {
|
||||
getCurrentEditor().blocks.insert('quiz', {
|
||||
quiz: quiz.value,
|
||||
quiz: value,
|
||||
})
|
||||
quiz.value = null
|
||||
}
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import { Dialog, FormControl, createResource } from 'frappe-ui'
|
||||
import { defineModel, reactive, watch, inject } from 'vue'
|
||||
import { createToast, formatTime } from '@/utils/'
|
||||
import { defineModel, reactive, watch } from 'vue'
|
||||
import { createToast } from '@/utils/'
|
||||
|
||||
const show = defineModel()
|
||||
const outline = defineModel('outline')
|
||||
|
||||
348
frontend/src/components/Modals/Question.vue
Normal file
348
frontend/src/components/Modals/Question.vue
Normal file
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<Dialog v-model="show" :options="dialogOptions">
|
||||
<template #body-content>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-if="!editMode"
|
||||
class="flex items-center text-xs text-gray-700 space-x-5"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="existing"
|
||||
value="existing"
|
||||
v-model="questionType"
|
||||
class="w-3 h-3 accent-gray-900"
|
||||
/>
|
||||
<label for="existing">
|
||||
{{ __('Add an existing question') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="new"
|
||||
value="new"
|
||||
v-model="questionType"
|
||||
class="w-3 h-3"
|
||||
/>
|
||||
<label for="new">
|
||||
{{ __('Create a new question') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="questionType == 'new' || editMode" class="space-y-2">
|
||||
<div>
|
||||
<label class="block text-xs text-gray-600 mb-1">
|
||||
{{ __('Question') }}
|
||||
</label>
|
||||
<TextEditor
|
||||
:content="question.question"
|
||||
@change="(val) => (question.question = val)"
|
||||
:editable="true"
|
||||
:fixedMenu="true"
|
||||
editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
|
||||
/>
|
||||
</div>
|
||||
<FormControl
|
||||
v-model="question.marks"
|
||||
:label="__('Marks')"
|
||||
type="number"
|
||||
/>
|
||||
<FormControl
|
||||
:label="__('Type')"
|
||||
v-model="question.type"
|
||||
type="select"
|
||||
:options="['Choices', 'User Input']"
|
||||
class="pb-2"
|
||||
/>
|
||||
<div v-if="question.type == 'Choices'" class="divide-y border-t">
|
||||
<div v-for="n in 4" class="space-y-4 py-2">
|
||||
<FormControl
|
||||
:label="__('Option') + ' ' + n"
|
||||
v-model="question[`option_${n}`]"
|
||||
/>
|
||||
<FormControl
|
||||
:label="__('Explanation')"
|
||||
v-model="question[`explanation_${n}`]"
|
||||
/>
|
||||
<FormControl
|
||||
:label="__('Correct Answer')"
|
||||
v-model="question[`is_correct_${n}`]"
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else v-for="n in 4" class="space-y-2">
|
||||
<FormControl
|
||||
:label="__('Possibility') + ' ' + n"
|
||||
v-model="question[`possibility_${n}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="questionType == 'existing'" class="space-y-2">
|
||||
<Link
|
||||
v-model="existingQuestion.question"
|
||||
:label="__('Select a question')"
|
||||
doctype="LMS Question"
|
||||
/>
|
||||
<FormControl
|
||||
v-model="existingQuestion.marks"
|
||||
:label="__('Marks')"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Dialog, FormControl, TextEditor, createResource } from 'frappe-ui'
|
||||
import { computed, watch, reactive, ref } from 'vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { showToast } from '@/utils'
|
||||
|
||||
const show = defineModel()
|
||||
const quiz = defineModel('quiz')
|
||||
const questionType = ref(null)
|
||||
const editMode = ref(false)
|
||||
|
||||
const existingQuestion = reactive({
|
||||
question: '',
|
||||
marks: 0,
|
||||
})
|
||||
const question = reactive({
|
||||
question: '',
|
||||
type: 'Choices',
|
||||
marks: 0,
|
||||
})
|
||||
|
||||
const populateFields = () => {
|
||||
let fields = ['option', 'is_correct', 'explanation', 'possibility']
|
||||
let counter = 1
|
||||
fields.forEach((field) => {
|
||||
while (counter <= 4) {
|
||||
question[`${field}_${counter}`] = field === 'is_correct' ? false : ''
|
||||
counter++
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
populateFields()
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: __('Add a new question'),
|
||||
},
|
||||
questionDetail: {
|
||||
type: [Object, null],
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const questionData = createResource({
|
||||
url: 'frappe.client.get',
|
||||
makeParams() {
|
||||
return {
|
||||
doctype: 'LMS Question',
|
||||
name: props.questionDetail.question,
|
||||
}
|
||||
},
|
||||
auto: false,
|
||||
onSuccess(data) {
|
||||
let counter = 1
|
||||
editMode.value = true
|
||||
Object.keys(data).forEach((key) => {
|
||||
if (Object.hasOwn(question, key)) question[key] = data[key]
|
||||
})
|
||||
while (counter <= 4) {
|
||||
question[`is_correct_${counter}`] = data[`is_correct_${counter}`]
|
||||
? true
|
||||
: false
|
||||
counter++
|
||||
}
|
||||
question.marks = props.questionDetail.marks
|
||||
},
|
||||
})
|
||||
|
||||
watch(show, () => {
|
||||
if (show.value) {
|
||||
editMode.value = false
|
||||
if (props.questionDetail.question) questionData.fetch()
|
||||
else {
|
||||
;(question.question = ''), (question.marks = 0)
|
||||
question.type = 'Choices'
|
||||
existingQuestion.question = ''
|
||||
existingQuestion.marks = 0
|
||||
questionType.value = null
|
||||
populateFields()
|
||||
}
|
||||
|
||||
if (props.questionDetail.marks) question.marks = props.questionDetail.marks
|
||||
}
|
||||
})
|
||||
|
||||
const questionRow = createResource({
|
||||
url: 'frappe.client.insert',
|
||||
makeParams(values) {
|
||||
return {
|
||||
doc: {
|
||||
doctype: 'LMS Quiz Question',
|
||||
parent: quiz.value.data.name,
|
||||
parentfield: 'questions',
|
||||
parenttype: 'LMS Quiz',
|
||||
...values,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const questionCreation = createResource({
|
||||
url: 'frappe.client.insert',
|
||||
makeParams(values) {
|
||||
return {
|
||||
doc: {
|
||||
doctype: 'LMS Question',
|
||||
...question,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const submitQuestion = (close) => {
|
||||
if (questionData.data?.name) updateQuestion(close)
|
||||
else addQuestion(close)
|
||||
}
|
||||
|
||||
const addQuestion = (close) => {
|
||||
if (questionType.value == 'existing') {
|
||||
addQuestionRow(
|
||||
{
|
||||
question: existingQuestion.question,
|
||||
marks: existingQuestion.marks,
|
||||
},
|
||||
close
|
||||
)
|
||||
} else {
|
||||
questionCreation.submit(
|
||||
{},
|
||||
{
|
||||
onSuccess(data) {
|
||||
addQuestionRow(
|
||||
{
|
||||
question: data.name,
|
||||
marks: question.marks,
|
||||
},
|
||||
close
|
||||
)
|
||||
},
|
||||
onError(err) {
|
||||
showToast(__('Error'), __(err.message?.[0] || err), 'x')
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const addQuestionRow = (question, close) => {
|
||||
questionRow.submit(
|
||||
{
|
||||
...question,
|
||||
},
|
||||
{
|
||||
onSuccess() {
|
||||
show.value = false
|
||||
showToast(__('Success'), __('Question added successfully'), 'check')
|
||||
quiz.value.reload()
|
||||
close()
|
||||
},
|
||||
onError(err) {
|
||||
showToast(__('Error'), __(err.message?.[0] || err), 'x')
|
||||
close()
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const questionUpdate = createResource({
|
||||
url: 'frappe.client.set_value',
|
||||
auto: false,
|
||||
makeParams(values) {
|
||||
return {
|
||||
doctype: 'LMS Question',
|
||||
name: questionData.data?.name,
|
||||
fieldname: {
|
||||
...question,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const marksUpdate = createResource({
|
||||
url: 'frappe.client.set_value',
|
||||
auto: false,
|
||||
makeParams(values) {
|
||||
return {
|
||||
doctype: 'LMS Quiz Question',
|
||||
name: props.questionDetail.name,
|
||||
fieldname: {
|
||||
marks: question.marks,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const updateQuestion = (close) => {
|
||||
questionUpdate.submit(
|
||||
{},
|
||||
{
|
||||
onSuccess() {
|
||||
marksUpdate.submit(
|
||||
{},
|
||||
{
|
||||
onSuccess() {
|
||||
show.value = false
|
||||
showToast(
|
||||
__('Success'),
|
||||
__('Question updated successfully'),
|
||||
'check'
|
||||
)
|
||||
quiz.value.reload()
|
||||
close()
|
||||
},
|
||||
onError(err) {
|
||||
showToast(__('Error'), __(err.message?.[0] || err), 'x')
|
||||
close()
|
||||
},
|
||||
}
|
||||
)
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const dialogOptions = computed(() => {
|
||||
return {
|
||||
title: __(props.title),
|
||||
size: 'xl',
|
||||
actions: [
|
||||
{
|
||||
label: __('Submit'),
|
||||
variant: 'solid',
|
||||
onClick: (close) => {
|
||||
submitQuestion(close)
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
input[type='radio']:checked {
|
||||
background-color: theme('colors.gray.900') !important;
|
||||
border-color: theme('colors.gray.900') !important;
|
||||
--tw-ring-color: theme('colors.gray.900') !important;
|
||||
}
|
||||
</style>
|
||||
@@ -70,7 +70,14 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import { Breadcrumbs, FormControl, createResource, Button } from 'frappe-ui'
|
||||
import { computed, reactive, onMounted, inject, ref, watch } from 'vue'
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
onMounted,
|
||||
inject,
|
||||
ref,
|
||||
onBeforeUnmount,
|
||||
} from 'vue'
|
||||
import EditorJS from '@editorjs/editorjs'
|
||||
import LessonPlugins from '@/components/LessonPlugins.vue'
|
||||
import { ChevronRight } from 'lucide-vue-next'
|
||||
@@ -171,9 +178,13 @@ const addInstructorNotes = (data) => {
|
||||
const enableAutoSave = () => {
|
||||
autoSaveInterval = setInterval(() => {
|
||||
saveLesson()
|
||||
}, 10000)
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(autoSaveInterval)
|
||||
})
|
||||
|
||||
const newLessonResource = createResource({
|
||||
url: 'frappe.client.insert',
|
||||
makeParams(values) {
|
||||
|
||||
418
frontend/src/pages/QuizCreation.vue
Normal file
418
frontend/src/pages/QuizCreation.vue
Normal file
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<header
|
||||
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
|
||||
>
|
||||
<Breadcrumbs :items="breadcrumbs" />
|
||||
<Button variant="solid" @click="submitQuiz()">
|
||||
{{ __('Save') }}
|
||||
</Button>
|
||||
</header>
|
||||
<div class="w-3/4 mx-auto py-5">
|
||||
<!-- Details -->
|
||||
<div class="mb-8">
|
||||
<div class="text-sm font-semibold mb-4">
|
||||
{{ __('Details') }}
|
||||
</div>
|
||||
<FormControl
|
||||
v-model="quiz.title"
|
||||
:label="
|
||||
quizDetails.data?.name
|
||||
? __('Title')
|
||||
: __('Enter a title and save the quiz to proceed')
|
||||
"
|
||||
/>
|
||||
<div v-if="quizDetails.data?.name">
|
||||
<div class="grid grid-cols-3 gap-5 mt-2 mb-8">
|
||||
<FormControl
|
||||
v-model="quiz.max_attempts"
|
||||
:label="__('Maximun Attempts')"
|
||||
/>
|
||||
<FormControl
|
||||
v-model="quiz.total_marks"
|
||||
:label="__('Total Marks')"
|
||||
disabled
|
||||
/>
|
||||
<FormControl
|
||||
v-model="quiz.passing_percentage"
|
||||
:label="__('Passing Percentage')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Settings -->
|
||||
<div class="mb-8">
|
||||
<div class="text-sm font-semibold mb-4">
|
||||
{{ __('Settings') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-5 my-4">
|
||||
<FormControl
|
||||
v-model="quiz.show_answers"
|
||||
type="checkbox"
|
||||
:label="__('Show Answers')"
|
||||
/>
|
||||
<FormControl
|
||||
v-model="quiz.show_submission_history"
|
||||
type="checkbox"
|
||||
:label="__('Show Submission History')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<div class="text-sm font-semibold mb-4">
|
||||
{{ __('Shuffle Settings') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-3">
|
||||
<FormControl
|
||||
v-model="quiz.shuffle_questions"
|
||||
type="checkbox"
|
||||
:label="__('Shuffle Questions')"
|
||||
/>
|
||||
<FormControl
|
||||
v-if="quiz.shuffle_questions"
|
||||
v-model="quiz.limit_questions_to"
|
||||
:label="__('Limit Questions To')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Questions -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="text-sm font-semibold">
|
||||
{{ __('Questions') }}
|
||||
</div>
|
||||
<Button @click="openQuestionModal()">
|
||||
<template #prefix>
|
||||
<Plus class="w-4 h-4" />
|
||||
</template>
|
||||
{{ __('New Question') }}
|
||||
</Button>
|
||||
</div>
|
||||
<ListView
|
||||
:columns="questionColumns"
|
||||
:rows="quiz.questions"
|
||||
row-key="name"
|
||||
:options="{
|
||||
showTooltip: false,
|
||||
}"
|
||||
>
|
||||
<ListHeader
|
||||
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
|
||||
>
|
||||
<ListHeaderItem :item="item" v-for="item in questionColumns" />
|
||||
</ListHeader>
|
||||
<ListRows>
|
||||
<ListRow
|
||||
:row="row"
|
||||
v-slot="{ idx, column, item }"
|
||||
v-for="row in quiz.questions"
|
||||
@click="openQuestionModal(row)"
|
||||
>
|
||||
<ListRowItem :item="item">
|
||||
<div
|
||||
v-if="column.key == 'question_detail'"
|
||||
class="text-xs truncate h-4"
|
||||
v-html="item"
|
||||
></div>
|
||||
<div v-else class="text-xs">
|
||||
{{ item }}
|
||||
</div>
|
||||
</ListRowItem>
|
||||
</ListRow>
|
||||
</ListRows>
|
||||
<ListSelectBanner>
|
||||
<template #actions="{ unselectAll, selections }">
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
@click="deleteQuizzes(selections, unselectAll)"
|
||||
>
|
||||
<Trash2 class="h-4 w-4 stroke-1.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</ListSelectBanner>
|
||||
</ListView>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Question
|
||||
v-model="showQuestionModal"
|
||||
:questionDetail="currentQuestion"
|
||||
v-model:quiz="quizDetails"
|
||||
:title="
|
||||
currentQuestion.question
|
||||
? __('Edit the question')
|
||||
: __('Add a new question')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
Breadcrumbs,
|
||||
createResource,
|
||||
FormControl,
|
||||
ListView,
|
||||
ListHeader,
|
||||
ListHeaderItem,
|
||||
ListRows,
|
||||
ListRow,
|
||||
ListRowItem,
|
||||
ListSelectBanner,
|
||||
Button,
|
||||
} from 'frappe-ui'
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
ref,
|
||||
onMounted,
|
||||
inject,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
isReactive,
|
||||
} from 'vue'
|
||||
import { Plus, Trash2 } from 'lucide-vue-next'
|
||||
import Question from '@/components/Modals/Question.vue'
|
||||
import { showToast } from '../utils'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const showQuestionModal = ref(false)
|
||||
const currentQuestion = reactive({
|
||||
question: '',
|
||||
marks: 0,
|
||||
name: '',
|
||||
})
|
||||
const user = inject('$user')
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
quizID: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const quiz = reactive({
|
||||
title: '',
|
||||
total_marks: 0,
|
||||
passing_percentage: 0,
|
||||
max_attempts: 0,
|
||||
limit_questions_to: 0,
|
||||
show_answers: true,
|
||||
show_submission_history: false,
|
||||
shuffle_questions: false,
|
||||
questions: [],
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (
|
||||
props.quizID == 'new' &&
|
||||
!user.data?.is_moderator &&
|
||||
!user.data?.is_instructor
|
||||
) {
|
||||
router.push({ name: 'Courses' })
|
||||
}
|
||||
if (props.quizID !== 'new') {
|
||||
quizDetails.reload()
|
||||
}
|
||||
window.addEventListener('keydown', keyboardShortcut)
|
||||
})
|
||||
|
||||
const keyboardShortcut = (e) => {
|
||||
if (
|
||||
e.key === 's' &&
|
||||
(e.ctrlKey || e.metaKey) &&
|
||||
!e.target.classList.contains('ProseMirror')
|
||||
) {
|
||||
submitQuiz()
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', keyboardShortcut)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.quizID !== 'new',
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
quizDetails.reload()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const quizDetails = createResource({
|
||||
url: 'frappe.client.get',
|
||||
makeParams(values) {
|
||||
return { doctype: 'LMS Quiz', name: props.quizID }
|
||||
},
|
||||
auto: false,
|
||||
onSuccess(data) {
|
||||
Object.keys(data).forEach((key) => {
|
||||
if (Object.hasOwn(quiz, key)) quiz[key] = data[key]
|
||||
})
|
||||
|
||||
let checkboxes = [
|
||||
'show_answers',
|
||||
'show_submission_history',
|
||||
'shuffle_questions',
|
||||
]
|
||||
for (let idx in checkboxes) {
|
||||
let key = checkboxes[idx]
|
||||
quiz[key] = quiz[key] ? true : false
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const quizCreate = createResource({
|
||||
url: 'frappe.client.insert',
|
||||
auto: false,
|
||||
makeParams(values) {
|
||||
return {
|
||||
doc: {
|
||||
doctype: 'LMS Quiz',
|
||||
...quiz,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const quizUpdate = createResource({
|
||||
url: 'frappe.client.set_value',
|
||||
auto: false,
|
||||
makeParams(values) {
|
||||
return {
|
||||
doctype: 'LMS Quiz',
|
||||
name: values.quizID,
|
||||
fieldname: {
|
||||
total_marks: calculateTotalMarks(),
|
||||
...quiz,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const submitQuiz = () => {
|
||||
if (quizDetails.data?.name) updateQuiz()
|
||||
else createQuiz()
|
||||
}
|
||||
|
||||
const createQuiz = () => {
|
||||
quizCreate.submit(
|
||||
{},
|
||||
{
|
||||
onSuccess(data) {
|
||||
showToast(__('Success'), __('Quiz created successfully'), 'check')
|
||||
router.push({
|
||||
name: 'QuizCreation',
|
||||
params: { quizID: data.name },
|
||||
})
|
||||
},
|
||||
onError(err) {
|
||||
showToast(__('Error'), __(err.messages?.[0] || err), 'x')
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const updateQuiz = () => {
|
||||
quizUpdate.submit(
|
||||
{ quizID: quizDetails.data?.name },
|
||||
{
|
||||
onSuccess(data) {
|
||||
quiz.total_marks = data.total_marks
|
||||
showToast(__('Success'), __('Quiz updated successfully'), 'check')
|
||||
},
|
||||
onError(err) {
|
||||
showToast(__('Error'), __(err.messages?.[0] || err), 'x')
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const calculateTotalMarks = () => {
|
||||
let totalMarks = 0
|
||||
if (quiz.limit_questions_to && quiz.questions.length > 0)
|
||||
return quiz.questions[0].marks * quiz.limit_questions_to
|
||||
quiz.questions.forEach((question) => {
|
||||
totalMarks += question.marks
|
||||
})
|
||||
return totalMarks
|
||||
}
|
||||
|
||||
const questionColumns = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: __('ID'),
|
||||
key: 'question',
|
||||
width: '25%',
|
||||
},
|
||||
{
|
||||
label: __('Question'),
|
||||
key: __('question_detail'),
|
||||
width: '60%',
|
||||
},
|
||||
{
|
||||
label: __('Marks'),
|
||||
key: 'marks',
|
||||
width: '10%',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const openQuestionModal = (question = null) => {
|
||||
if (question) {
|
||||
currentQuestion.question = question.question
|
||||
currentQuestion.marks = question.marks
|
||||
currentQuestion.name = question.name
|
||||
} else {
|
||||
currentQuestion.question = ''
|
||||
currentQuestion.marks = 0
|
||||
currentQuestion.name = ''
|
||||
}
|
||||
showQuestionModal.value = true
|
||||
}
|
||||
|
||||
const deleteQuiz = createResource({
|
||||
url: 'frappe.client.delete',
|
||||
makeParams(values) {
|
||||
return {
|
||||
doctype: 'LMS Quiz Question',
|
||||
name: values.quiz,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const deleteQuizzes = (selections, unselectAll) => {
|
||||
selections.forEach(async (quiz) => {
|
||||
deleteQuiz.submit({ quiz })
|
||||
})
|
||||
setTimeout(() => {
|
||||
quizDetails.reload()
|
||||
unselectAll()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
let crumbs = [
|
||||
{
|
||||
label: __('Quizzes'),
|
||||
route: {
|
||||
name: 'Quizzes',
|
||||
},
|
||||
},
|
||||
]
|
||||
/* if (quizDetails.data) {
|
||||
crumbs.push({
|
||||
label: quiz.title,
|
||||
})
|
||||
} */
|
||||
crumbs.push({
|
||||
label: props.quizID == 'new' ? 'New Quiz' : quizDetails.data?.title,
|
||||
route: { name: 'QuizCreation', params: { quizID: props.quizID } },
|
||||
})
|
||||
return crumbs
|
||||
})
|
||||
</script>
|
||||
126
frontend/src/pages/Quizzes.vue
Normal file
126
frontend/src/pages/Quizzes.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<header
|
||||
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
|
||||
>
|
||||
<Breadcrumbs :items="breadcrumbs" />
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'QuizCreation',
|
||||
params: {
|
||||
quizID: 'new',
|
||||
},
|
||||
}"
|
||||
>
|
||||
<Button variant="solid">
|
||||
<template #prefix>
|
||||
<Plus class="w-4 h-4" />
|
||||
</template>
|
||||
{{ __('New Quiz') }}
|
||||
</Button>
|
||||
</router-link>
|
||||
</header>
|
||||
<div v-if="quizzes.data?.length" class="w-3/4 mx-auto py-5">
|
||||
<ListView
|
||||
:columns="quizColumns"
|
||||
:rows="quizzes.data"
|
||||
row-key="name"
|
||||
:options="{ showTooltip: false, selectable: false }"
|
||||
>
|
||||
<ListHeader
|
||||
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
|
||||
>
|
||||
<ListHeaderItem :item="item" v-for="item in quizColumns">
|
||||
</ListHeaderItem>
|
||||
</ListHeader>
|
||||
<ListRows>
|
||||
<router-link
|
||||
v-for="row in quizzes.data"
|
||||
:to="{
|
||||
name: 'QuizCreation',
|
||||
params: {
|
||||
quizID: row.name,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<ListRow :row="row" />
|
||||
</router-link>
|
||||
</ListRows>
|
||||
</ListView>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
Breadcrumbs,
|
||||
createListResource,
|
||||
ListView,
|
||||
ListRows,
|
||||
ListRow,
|
||||
ListHeader,
|
||||
ListHeaderItem,
|
||||
Button,
|
||||
} from 'frappe-ui'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { computed, inject, onMounted } from 'vue'
|
||||
import { Plus } from 'lucide-vue-next'
|
||||
|
||||
const user = inject('$user')
|
||||
const router = useRouter()
|
||||
|
||||
onMounted(() => {
|
||||
if (!user.data?.is_moderator && !user.data?.is_instructor) {
|
||||
router.push({ name: 'Courses' })
|
||||
}
|
||||
})
|
||||
|
||||
const quizFilter = computed(() => {
|
||||
if (user.data?.is_moderator) return {}
|
||||
return {
|
||||
owner: user.data?.name,
|
||||
}
|
||||
})
|
||||
|
||||
const quizzes = createListResource({
|
||||
doctype: 'LMS Quiz',
|
||||
filters: quizFilter,
|
||||
fields: ['name', 'title', 'passing_percentage', 'total_marks'],
|
||||
auto: true,
|
||||
cache: ['quizzes', user.data?.name],
|
||||
orderBy: 'modified desc',
|
||||
onSuccess(data) {
|
||||
data.forEach((row) => {})
|
||||
},
|
||||
})
|
||||
|
||||
const quizColumns = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: __('Title'),
|
||||
key: 'title',
|
||||
width: 2,
|
||||
},
|
||||
{
|
||||
label: __('Total Marks'),
|
||||
key: 'total_marks',
|
||||
width: 1,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
label: __('Passing Percentage'),
|
||||
key: 'passing_percentage',
|
||||
width: 1,
|
||||
align: 'center',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: __('Quizzes'),
|
||||
route: {
|
||||
name: 'Quizzes',
|
||||
},
|
||||
},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
@@ -141,6 +141,17 @@ const routes = [
|
||||
component: () => import('@/pages/Badge.vue'),
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: '/quizzes',
|
||||
name: 'Quizzes',
|
||||
component: () => import('@/pages/Quizzes.vue'),
|
||||
},
|
||||
{
|
||||
path: '/quizzes/:quizID',
|
||||
name: 'QuizCreation',
|
||||
component: () => import('@/pages/QuizCreation.vue'),
|
||||
props: true,
|
||||
},
|
||||
]
|
||||
|
||||
let router = createRouter({
|
||||
|
||||
@@ -2,6 +2,7 @@ import { createResource } from 'frappe-ui'
|
||||
|
||||
export default function translationPlugin(app) {
|
||||
app.config.globalProperties.__ = translate
|
||||
window.__ = translate
|
||||
if (!window.translatedMessages) fetchTranslations()
|
||||
}
|
||||
|
||||
|
||||
@@ -236,7 +236,7 @@ export function getEditorTools() {
|
||||
regex: /https:\/\/docs\.google\.com\/presentation\/d\/e\/([A-Za-z0-9_-]+)\/pub/,
|
||||
embedUrl:
|
||||
'https://docs.google.com/presentation/d/e/<%= remote_id %>/embed',
|
||||
html: "<iframe style='width: 100%; height: 30rem; border: 1px solid #D3D3D3; border-radius: 12px;' frameborder='0' allowfullscreen='true'></iframe>",
|
||||
html: "<iframe style='width: 100%; height: 30rem; border: 1px solid #D3D3D3; border-radius: 12px; margin: 1rem 0' frameborder='0' allowfullscreen='true'></iframe>",
|
||||
},
|
||||
drive: {
|
||||
regex: /https:\/\/drive\.google\.com\/file\/d\/([A-Za-z0-9_-]+)\/view(\?.+)?/,
|
||||
@@ -260,7 +260,7 @@ export function getEditorTools() {
|
||||
regex: /https:\/\/docs\.google\.com\/presentation\/d\/([A-Za-z0-9_-]+)\/edit(\?.+)?/,
|
||||
embedUrl:
|
||||
'https://docs.google.com/presentation/d/<%= remote_id %>/embed',
|
||||
html: "<iframe style='width: 100%; height: 30rem; border: 1px solid #D3D3D3; border-radius: 12px;' frameborder='0' allowfullscreen='true'></iframe>",
|
||||
html: "<iframe style='width: 100%; height: 30rem; border: 1px solid #D3D3D3; border-radius: 12px; margin: 1rem 0;' frameborder='0' allowfullscreen='true'></iframe>",
|
||||
},
|
||||
codesandbox: {
|
||||
regex: /^https:\/\/codesandbox\.io\/(?:embed\/)?([A-Za-z0-9_-]+)(?:\?[^\/]*)?$/,
|
||||
|
||||
Reference in New Issue
Block a user