Files
enlight-lms/lms/www/batch/quiz.js
2022-11-04 12:43:15 +05:30

142 lines
3.6 KiB
JavaScript

frappe.ready(() => {
if (!$(".quiz-card").length) {
add_question();
}
$(".btn-question").click((e) => {
add_question();
});
$(".btn-save-question").click((e) => {
save_question(e);
});
$(".copy-quiz-id").click((e) => {
frappe.utils.copy_to_clipboard($(e.currentTarget).data("name"));
});
get_questions();
});
const add_question = () => {
/* if ($(".new-quiz-card").length) {
scroll_to_question_container();
return;
} */
let add_after = $(".quiz-card").length
? $(".quiz-card:last")
: $("#quiz-title");
let question_template = `<div class="quiz-card new-quiz-card">
<div contenteditable="true" data-placeholder="${__(
"Question"
)}" class="question mb-4"></div>
</div>`;
$(question_template).insertAfter(add_after);
get_question_template();
$(".btn-save-question").removeClass("hide");
};
const get_question_template = () => {
Array.from({ length: 4 }, (x, num) => {
let option_template = get_option_template(num + 1);
let add_after = $(".quiz-card:last .option-group").length
? $(".quiz-card:last .option-group").last()
: $(".question:last");
question_template = $(option_template).insertAfter(add_after);
});
};
const get_option_template = (num) => {
return `<div class="option-group mt-4">
<label class="">${__("Option")} ${num}</label>
<div class="d-flex justify-content-between option-${num}">
<div contenteditable="true" data-placeholder="${__(
"Option"
)}"
class="option-input"></div>
<div contenteditable="true" data-placeholder="${__(
"Explanation"
)}"
class="option-input"></div>
<div class="option-checkbox">
<input type="checkbox">
<label class="mb-0"> ${__("Is Correct")} </label>
</div>
</div>
</div>`;
};
const save_question = (e) => {
if (!$("#quiz-title").text()) {
frappe.throw(__("Quiz Title is mandatory."));
}
frappe.call({
method: "lms.lms.doctype.lms_quiz.lms_quiz.save_quiz",
args: {
quiz_title: $("#quiz-title").text(),
questions: get_questions(),
quiz: $("#quiz-title").data("name") || "",
},
callback: (data) => {
window.location.href = "/quizzes";
},
});
};
const get_questions = () => {
let questions = [];
$(".quiz-card").each((i, el) => {
if (!$(el).find(".question").text()) return;
let details = {};
let one_correct_option = false;
details["question"] = $(el).find(".question").text();
details["question_name"] =
$(el).find(".question").data("question") || "";
Array.from({ length: 4 }, (x, i) => {
let num = i + 1;
details[`option_${num}`] = $(el)
.find(`.option-${num} .option-input:first`)
.text();
details[`explanation_${num}`] = $(el)
.find(`.option-${num} .option-input:last`)
.text();
let is_correct = $(el)
.find(`.option-${num} .option-checkbox`)
.find("input")
.prop("checked");
if (is_correct) one_correct_option = true;
details[`is_correct_${num}`] = is_correct;
});
if (!details["option_1"] || !details["option_2"])
frappe.throw(__("Each question must have at least two options."));
if (!one_correct_option)
frappe.throw(
__("Each question must have at least one correct option.")
);
questions.push(details);
});
return questions;
};
const scroll_to_question_container = () => {
$([document.documentElement, document.body]).animate(
{
scrollTop: $(".new-quiz-card").offset().top,
},
1000
);
$(".new-quiz-card").find(".question").focus();
};