feat: quiz submission
This commit is contained in:
Jannat Patel
@@ -7,13 +7,13 @@
|
||||
:class="{'rotate-90 transform duration-200' : open, 'duration-200' : !open, 'open': index == 1}"
|
||||
class="h-5 w-5 text-gray-900 stroke-1 mr-2"
|
||||
/>
|
||||
<div class="text-lg font-medium">
|
||||
<div class="text-base font-medium">
|
||||
{{ chapter.title }}
|
||||
</div>
|
||||
</DisclosureButton>
|
||||
<DisclosurePanel class="pb-2">
|
||||
<div v-for="lesson in chapter.lessons" :key="lesson.name">
|
||||
<div class="outline-lesson mb-2 px-8">
|
||||
<div class="outline-lesson mb-2 pl-9">
|
||||
<router-link :to='{
|
||||
name: "Lesson",
|
||||
params: {
|
||||
@@ -22,7 +22,7 @@
|
||||
lessonNumber: lesson.number.split(".")[1],
|
||||
}
|
||||
}'>
|
||||
<div class="flex items-center text-base">
|
||||
<div class="flex items-center text-sm">
|
||||
<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"/>
|
||||
|
||||
@@ -1,83 +1,317 @@
|
||||
<template>
|
||||
<div v-if="quiz.doc">
|
||||
<div v-if="activeQuestion == 0">
|
||||
<div class="bg-blue-100 py-2 px-2 mb-4 rounded-md text-sm text-blue-800">
|
||||
<div class="leading-relaxed">
|
||||
{{ __("This quiz consists of {0} questions.").format(quiz.doc.questions.length) }}
|
||||
</div>
|
||||
<div v-if="quiz.doc.passing_percentage" class="leading-relaxed">
|
||||
{{ __("You will have to get {0}% correct answers in order to pass the quiz.").format(quiz.doc.passing_percentage) }}
|
||||
</div>
|
||||
<div v-if="quiz.doc.max_attempts" class="leading-relaxed">
|
||||
{{ __("You can attempt this quiz {0}.").format(quiz.doc.max_attempts == 1 ? "1 time" : `${quiz.doc.max_attempts} times`) }}
|
||||
</div>
|
||||
<div v-if="quiz.doc.time" class="leading-relaxed">
|
||||
{{ __("The quiz has a time limit.For each question you will be given { 0} seconds.").format(quiz.doc.time) }}
|
||||
</div>
|
||||
<div class="bg-blue-100 py-2 px-2 mb-4 rounded-md text-sm text-blue-800">
|
||||
<div class="leading-relaxed">
|
||||
{{ __("This quiz consists of {0} questions.").format(quiz.doc.questions.length) }}
|
||||
</div>
|
||||
<div class="border text-center p-20 font-semibold text-lg rounded-md">
|
||||
<div>
|
||||
<div v-if="quiz.doc.passing_percentage" class="leading-relaxed">
|
||||
{{ __("You will have to get {0}% correct answers in order to pass the quiz.").format(quiz.doc.passing_percentage) }}
|
||||
</div>
|
||||
<div v-if="quiz.doc.max_attempts" class="leading-relaxed">
|
||||
{{ __("You can attempt this quiz {0}.").format(quiz.doc.max_attempts == 1 ? "1 time" : `${quiz.doc.max_attempts} times`) }}
|
||||
</div>
|
||||
<div v-if="quiz.doc.time" class="leading-relaxed">
|
||||
{{ __("The quiz has a time limit.For each question you will be given { 0} seconds.").format(quiz.doc.time) }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeQuestion == 0">
|
||||
<div class="border text-center p-20 rounded-md">
|
||||
<div class="font-semibold text-lg">
|
||||
{{ quiz.doc.title }}
|
||||
</div>
|
||||
<Button @click="startQuiz" class="mt-2">
|
||||
<Button v-if="!quiz.doc.max_attempts || noOfAttempts.data.length < quiz.doc.max_attempts" @click="startQuiz" class="mt-2">
|
||||
<span>
|
||||
{{ __("Start") }}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div v-for="index in quiz.doc.questions.length">
|
||||
<div v-if="index == activeQuestion">
|
||||
{{ questionDetails }}
|
||||
<div v-else>
|
||||
{{ __("You have already exceeded the maximum number of attempts allowed for this quiz.") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="!quizSubmission.data">
|
||||
<div v-for="(question, qtidx) in quiz.doc.questions">
|
||||
<div v-if="qtidx == activeQuestion - 1 && questionDetails.data" class="border rounded-md p-5">
|
||||
<div class="flex justify-between">
|
||||
<div class="text-sm">
|
||||
<span class="mr-2">
|
||||
{{ __("Question {0}").format(activeQuestion) }}:
|
||||
</span>
|
||||
<span>
|
||||
{{ questionDetails.data.multiple ? __("Choose all answers that apply") : __("Choose one answer") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-gray-900 text-sm font-semibold item-left">
|
||||
{{ question.marks }} {{ question.marks == 1 ? __("Mark") : __("Marks") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-gray-900 font-semibold mt-2">
|
||||
{{ questionDetails.data.question }}
|
||||
</div>
|
||||
<div v-if="questionDetails.data.type == 'Choices'" v-for="index in 4">
|
||||
<label v-if="questionDetails.data[`option_${index}`]"
|
||||
class="flex items-center bg-gray-200 rounded-md p-3 mt-4 w-full cursor-pointer focus:border-blue-600">
|
||||
|
||||
<input v-if="!showAnswers.length && !questionDetails.data.multiple" type="radio"
|
||||
:name="encodeURIComponent(questionDetails.data.question)"
|
||||
class="w-3.5 h-3.5 text-gray-900 focus:ring-gray-200"
|
||||
@change="markAnswer(index)">
|
||||
|
||||
<input v-else-if="!showAnswers.length && questionDetails.data.multiple" type="checkbox"
|
||||
:name="encodeURIComponent(questionDetails.data.question)"
|
||||
class="w-3.5 h-3.5 text-gray-900 rounded-sm focus:ring-gray-200"
|
||||
@change="markAnswer(index)">
|
||||
|
||||
<div v-else-if="quiz.doc.show_answers" v-for="(answer, idx) in showAnswers">
|
||||
<div v-if="index - 1 == idx">
|
||||
<CheckCircle v-if="answer" class="w-4 h-4 text-green-500"/>
|
||||
<MinusCircle v-else-if="questionDetails.data[`is_correct_${index}`]"
|
||||
class="w-4 h-4 text-green-500"/>
|
||||
<XCircle v-else-if="answer == 0" class="w-4 h-4 text-red-500"/>
|
||||
<MinusCircle v-else class="w-4 h-4"/>
|
||||
</div>
|
||||
</div>
|
||||
<span class="ml-2">
|
||||
{{ questionDetails.data[`option_${index}`] }}
|
||||
</span>
|
||||
</label>
|
||||
<div v-if="questionDetails.data[`explanation_${index}`]" class="mt-2 text-sm hidden">
|
||||
{{ questionDetails.data[`explanation_${index}`] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-8">
|
||||
<div>
|
||||
{{ __("Question {0} of {1}").format(activeQuestion, quiz.doc.questions.length) }}
|
||||
</div>
|
||||
<Button v-if="quiz.doc.show_answers && !showAnswers.length" @click="checkAnswer()">
|
||||
<span>
|
||||
{{ __("Check") }}
|
||||
</span>
|
||||
</Button>
|
||||
<Button v-else-if="activeQuestion != quiz.doc.questions.length" @click="nextQuetion()">
|
||||
<span>
|
||||
{{ __("Next") }}
|
||||
</span>
|
||||
</Button>
|
||||
<Button v-else @click="submitQuiz()">
|
||||
<span>
|
||||
{{ __("Submit") }}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="border rounded-md p-20 text-center">
|
||||
<div class="text-lg font-semibold">
|
||||
{{ __("Quiz Summary") }}
|
||||
</div>
|
||||
<div>
|
||||
{{ __("You got {0}% correct answers with a score of {1} out of {2}").format(Math.ceil(quizSubmission.data.percentage), quizSubmission.data.score, quizSubmission.data.score_out_of) }}
|
||||
</div>
|
||||
<Button @click="resetQuiz()" class="mt-2"
|
||||
v-if="!quiz.doc.max_attempts || noOfAttempts.data.length < quiz.doc.max_attempts">
|
||||
<span>
|
||||
{{ __("Try Again") }}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
{{ noOfAttempts.data }}
|
||||
<div v-if="quiz.doc.show_submission_history && noOfAttempts.data" class="mt-10">
|
||||
<ListView :columns="getSubmissionColumns()" :rows="noOfAttempts.data" row-key="name">
|
||||
</ListView>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { createDocumentResource, Button } from 'frappe-ui';
|
||||
import { ref, watch, inject } from 'vue';
|
||||
|
||||
import { createDocumentResource, Button, createResource, ListView } from 'frappe-ui';
|
||||
import { ref, watch, reactive, inject } from 'vue';
|
||||
import { createToast } from "@/utils/"
|
||||
import { CheckCircle, XCircle, MinusCircle } from "lucide-vue-next"
|
||||
const user = inject("$user");
|
||||
|
||||
const activeQuestion = ref(0);
|
||||
const currentQuestion = ref("");
|
||||
const selectedOptions = reactive([0,0,0,0]);
|
||||
const showAnswers = reactive([])
|
||||
|
||||
const props = defineProps({
|
||||
quizName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const activeQuestion = ref(0);
|
||||
const currentQuestion = ref("");
|
||||
});
|
||||
|
||||
const quiz = createDocumentResource({
|
||||
doctype: "LMS Quiz",
|
||||
name: props.quizName,
|
||||
cache: ["quiz", props.quizName],
|
||||
auto: true,
|
||||
});
|
||||
console.log(user.data)
|
||||
if (user.data) {
|
||||
quiz.reload();
|
||||
}
|
||||
|
||||
const questionDetails = createDocumentResource({
|
||||
doctype: "LMS Question",
|
||||
name: currentQuestion.value,
|
||||
cache: ["question", props.quizName, currentQuestion.value],
|
||||
});
|
||||
console.log(questionDetails)
|
||||
const startQuiz = () => {
|
||||
activeQuestion.value = 1;
|
||||
}
|
||||
const noOfAttempts = createResource({
|
||||
url: "frappe.client.get_list",
|
||||
makeParams(values) {
|
||||
return {
|
||||
doctype: "LMS Quiz Submission",
|
||||
filters: {
|
||||
member: user.data?.name,
|
||||
quiz: quiz.doc?.name,
|
||||
},
|
||||
fields: ["name", "creation", "score"]
|
||||
}
|
||||
},
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const quizSubmission = createResource({
|
||||
url: "lms.lms.doctype.lms_quiz.lms_quiz.quiz_summary",
|
||||
makeParams(values) {
|
||||
return {
|
||||
quiz: quiz.doc.name,
|
||||
results: localStorage.getItem(quiz.doc.title),
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const questionDetails = createResource({
|
||||
url: "lms.lms.utils.get_question_details",
|
||||
makeParams(values) {
|
||||
return {
|
||||
question: currentQuestion.value,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
watch(activeQuestion, (value) => {
|
||||
if (value > 0) {
|
||||
currentQuestion.value = quiz.doc.questions[value - 1];
|
||||
console.log(currentQuestion.value)
|
||||
console.log(questionDetails)
|
||||
currentQuestion.value = quiz.doc.questions[value - 1].question;
|
||||
questionDetails.reload();
|
||||
}
|
||||
})
|
||||
|
||||
const startQuiz = () => {
|
||||
activeQuestion.value = 1;
|
||||
localStorage.removeItem(quiz.doc.title);
|
||||
}
|
||||
|
||||
const markAnswer = (index) => {
|
||||
if (!questionDetails.data.multiple)
|
||||
selectedOptions.splice(0, selectedOptions.length, ...[0,0,0,0]);
|
||||
selectedOptions[index - 1] = selectedOptions[index - 1] ? 0 : 1;
|
||||
}
|
||||
|
||||
const getAnswers = () => {
|
||||
let answers = [];
|
||||
selectedOptions.forEach((value, index) => {
|
||||
if (selectedOptions[index])
|
||||
answers.push(questionDetails.data[`option_${index + 1}`])
|
||||
});
|
||||
return answers;
|
||||
};
|
||||
|
||||
const checkAnswer = () => {
|
||||
let answers = getAnswers();
|
||||
if (!answers.length) {
|
||||
createToast({
|
||||
title: "Please select an option",
|
||||
icon: 'alert-circle',
|
||||
iconClasses: 'text-yellow-600 bg-yellow-100',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
createResource({
|
||||
url: "lms.lms.doctype.lms_quiz.lms_quiz.check_answer",
|
||||
params: {
|
||||
"question": currentQuestion.value,
|
||||
"type": questionDetails.data.type,
|
||||
"answers": JSON.stringify(answers)
|
||||
},
|
||||
auto: true,
|
||||
onSuccess(data) {
|
||||
selectedOptions.forEach((option, index) => {
|
||||
if (option) {
|
||||
showAnswers[index] = option && data[index]
|
||||
} else if (questionDetails.data[`is_correct_${index + 1}`]) {
|
||||
showAnswers[index] = 0
|
||||
} else {
|
||||
showAnswers[index] = undefined
|
||||
}
|
||||
});
|
||||
addToLocalStorage();
|
||||
if (!quiz.doc.show_answers) {
|
||||
resetQuestion();
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
const addToLocalStorage = () => {
|
||||
let quizData = JSON.parse(localStorage.getItem(quiz.doc.title));
|
||||
let questionData = {
|
||||
"question_index": activeQuestion.value,
|
||||
"answers": getAnswers().join(),
|
||||
"is_correct": showAnswers.filter((answer) => {
|
||||
return answer != undefined
|
||||
})
|
||||
}
|
||||
quizData ? quizData.push(questionData) : (quizData = [questionData]);
|
||||
localStorage.setItem(quiz.doc.title, JSON.stringify(quizData));
|
||||
}
|
||||
|
||||
const nextQuetion = () => {
|
||||
if (!quiz.doc.show_answers) {
|
||||
checkAnswer();
|
||||
} else {
|
||||
resetQuestion();
|
||||
}
|
||||
}
|
||||
|
||||
const resetQuestion = () => {
|
||||
if (activeQuestion.value == quiz.doc.questions.length)
|
||||
return;
|
||||
activeQuestion.value = activeQuestion.value + 1
|
||||
selectedOptions.splice(0, selectedOptions.length, ...[0, 0, 0, 0]);
|
||||
showAnswers.length = 0;
|
||||
}
|
||||
|
||||
const submitQuiz = () => {
|
||||
if (!quiz.doc.show_answers) {
|
||||
checkAnswer();
|
||||
setTimeout(() => {
|
||||
createSubmission();
|
||||
}, 500);
|
||||
return;
|
||||
}
|
||||
createSubmission();
|
||||
}
|
||||
|
||||
const createSubmission = () => {
|
||||
quizSubmission.reload().then(() => {
|
||||
noOfAttempts.reload();
|
||||
});
|
||||
}
|
||||
|
||||
const resetQuiz = () => {
|
||||
activeQuestion.value = 0;
|
||||
selectedOptions.splice(0, selectedOptions.length, ...[0,0,0,0]);
|
||||
showAnswers.length = 0;
|
||||
quizSubmission.reset();
|
||||
}
|
||||
|
||||
const getSubmissionColumns = () => {
|
||||
return [
|
||||
{
|
||||
label: "No."
|
||||
},
|
||||
{
|
||||
label: "Score"
|
||||
},
|
||||
{
|
||||
label: "Date"
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
@@ -23,7 +23,6 @@ setConfig('resourceFetcher', frappeRequest)
|
||||
app.use(FrappeUI)
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
app.use(resourcesPlugin)
|
||||
app.use(translationPlugin)
|
||||
app.use(pageMetaPlugin)
|
||||
app.provide('$dayjs', dayjs)
|
||||
|
||||
@@ -62,12 +62,12 @@
|
||||
<iframe class="youtube-video" :src="getYouTubeVideoSource(block)" width="100%" height="400" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div v-else-if='block.includes("{{ Quiz")'>
|
||||
<Quiz v-if="user" :quizName="getId(block)"/>
|
||||
<div v-else>
|
||||
<Quiz v-if="user.data" :quizName="getId(block)"></Quiz>
|
||||
<div v-else class="border rounded-md text-center py-20">
|
||||
<div>
|
||||
{{ __("Please login to access this quiz.") }}
|
||||
{{ __("Please login to access the quiz.") }}
|
||||
</div>
|
||||
<Button @click="window.location.href = `/login?redirect-to=/courses/${courseName}`">
|
||||
<Button @click="redirectToLogin()" class="mt-2">
|
||||
<span>
|
||||
{{ __("Login") }}
|
||||
</span>
|
||||
@@ -188,7 +188,7 @@ const breadcrumbs = computed(() => {
|
||||
onUnmounted(() => {
|
||||
useStorage("sidebar_is_collapsed", false);
|
||||
});
|
||||
console.log(route.params)
|
||||
|
||||
watch(
|
||||
[() => route.params.chapterNumber, () => route.params.lessonNumber],
|
||||
([newChapterNumber, newLessonNumber], [oldChapterNumber, oldLessonNumber]) => {
|
||||
@@ -210,6 +210,10 @@ const getPDFSource = (block) => {
|
||||
const getId = (block) => {
|
||||
return block.match(/\(["']([^"']+?)["']\)/)[1];
|
||||
}
|
||||
|
||||
const redirectToLogin = () => {
|
||||
window.location.href = `/login?redirect_to=/courses/${props.courseName}/learn/${route.params.chapterNumber}-${route.params.lessonNumber}`;
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
|
||||
@@ -259,7 +259,7 @@ def check_answer(question, type, answers):
|
||||
|
||||
|
||||
def check_choice_answers(question, answers):
|
||||
fields = []
|
||||
fields = ["multiple"]
|
||||
is_correct = []
|
||||
for num in range(1, 5):
|
||||
fields.append(f"option_{cstr(num)}")
|
||||
@@ -267,6 +267,15 @@ def check_choice_answers(question, answers):
|
||||
|
||||
question_details = frappe.db.get_value("LMS Question", question, fields, as_dict=1)
|
||||
|
||||
""" if question_details.multiple:
|
||||
correct_answers = [ question_details[f"option_{num}"] for num in range(1,5) if question_details[f"is_correct_{num}"]]
|
||||
print(answers)
|
||||
for ans in correct_answers:
|
||||
if ans not in answers:
|
||||
is_correct.append(0)
|
||||
else:
|
||||
is_correct.append(1)
|
||||
else: """
|
||||
for num in range(1, 5):
|
||||
if question_details[f"option_{num}"] in answers:
|
||||
is_correct.append(question_details[f"is_correct_{num}"])
|
||||
|
||||
@@ -99,18 +99,18 @@
|
||||
"reqd": 1
|
||||
},
|
||||
{
|
||||
"fieldname": "passing_percentage",
|
||||
"fieldtype": "Int",
|
||||
"label": "Passing Percentage",
|
||||
"non_negative": 1,
|
||||
"read_only": 1,
|
||||
"reqd": 1
|
||||
"fieldname": "passing_percentage",
|
||||
"fieldtype": "Int",
|
||||
"label": "Passing Percentage",
|
||||
"non_negative": 1,
|
||||
"read_only": 1,
|
||||
"reqd": 1
|
||||
}
|
||||
],
|
||||
"in_create": 1,
|
||||
"index_web_pages_for_search": 1,
|
||||
"links": [],
|
||||
"modified": "2023-10-17 13:07:27.979975",
|
||||
"modified": "2024-01-01 15:53:33.357595",
|
||||
"modified_by": "Administrator",
|
||||
"module": "LMS",
|
||||
"name": "LMS Quiz Submission",
|
||||
@@ -127,6 +127,17 @@
|
||||
"role": "System Manager",
|
||||
"share": 1,
|
||||
"write": 1
|
||||
},
|
||||
{
|
||||
"create": 1,
|
||||
"email": 1,
|
||||
"export": 1,
|
||||
"if_owner": 1,
|
||||
"print": 1,
|
||||
"read": 1,
|
||||
"report": 1,
|
||||
"role": "LMS Student",
|
||||
"share": 1
|
||||
}
|
||||
],
|
||||
"sort_field": "modified",
|
||||
|
||||
@@ -1412,3 +1412,15 @@ def get_country_code():
|
||||
except Exception:
|
||||
pass
|
||||
return
|
||||
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_question_details(question):
|
||||
fields = ["question", "type", "multiple"]
|
||||
for i in range(1, 5):
|
||||
fields.append(f"option_{i}")
|
||||
fields.append(f"explanation_{i}")
|
||||
fields.append(f"is_correct_{i}")
|
||||
|
||||
question_details = frappe.db.get_value("LMS Question", question, fields, as_dict=1)
|
||||
return question_details
|
||||
|
||||
Reference in New Issue
Block a user