563 lines
17 KiB
JavaScript
563 lines
17 KiB
JavaScript
frappe.ready(() => {
|
|
|
|
localStorage.removeItem($("#quiz-title").data("name"));
|
|
|
|
fetch_assignments();
|
|
|
|
save_current_lesson();
|
|
|
|
$(".option").click((e) => {
|
|
enable_check(e);
|
|
})
|
|
|
|
$(".mark-progress").click((e) => {
|
|
mark_progress(e);
|
|
});
|
|
|
|
$(".next").click((e) => {
|
|
mark_progress(e);
|
|
});
|
|
|
|
$("#summary").click((e) => {
|
|
quiz_summary(e);
|
|
});
|
|
|
|
$("#check").click((e) => {
|
|
check_answer(e);
|
|
});
|
|
|
|
$("#next").click((e) => {
|
|
mark_active_question(e);
|
|
});
|
|
|
|
$("#try-again").click((e) => {
|
|
try_quiz_again(e);
|
|
});
|
|
|
|
$("#certification").click((e) => {
|
|
create_certificate(e);
|
|
});
|
|
|
|
$(".submit-work").click((e) => {
|
|
attach_work(e);
|
|
});
|
|
|
|
$(".clear-work").click((e) => {
|
|
clear_work(e);
|
|
});
|
|
|
|
$(".btn-lesson").click((e) => {
|
|
save_lesson(e);
|
|
});
|
|
|
|
$(".add-attachment").click((e) => {
|
|
show_upload_modal();
|
|
});
|
|
|
|
$(".btn-start-quiz").click((e) => {
|
|
$("#start-banner").addClass("hide");
|
|
$("#quiz-form").removeClass("hide");
|
|
mark_active_question();
|
|
});
|
|
|
|
$(".btn-edit").click((e) => {
|
|
window.location.href = `${window.location.href}?edit=1`;
|
|
});
|
|
|
|
$(".btn-back").click((e) => {
|
|
window.location.href = window.location.href.split("?")[0];
|
|
})
|
|
|
|
$(document).on("click", ".copy-link", (e) => {
|
|
frappe.utils.copy_to_clipboard($(e.currentTarget).data("link"));
|
|
$(".attachments").collapse("hide");
|
|
});
|
|
|
|
if ($("#quiz-title").data("max-attempts")) {
|
|
window.addEventListener("beforeunload", (e) => {
|
|
e.returnValue = "";
|
|
$(".active-question").length && quiz_summary();
|
|
});
|
|
}
|
|
|
|
if ($("#body").length) {
|
|
make_editor();
|
|
}
|
|
});
|
|
|
|
|
|
const save_current_lesson = () => {
|
|
if ($(".title").hasClass("is-member")) {
|
|
frappe.call("lms.lms.api.save_current_lesson", {
|
|
course_name: $(".title").attr("data-course"),
|
|
lesson_name: $(".title").attr("data-lesson")
|
|
});
|
|
}
|
|
};
|
|
|
|
|
|
const enable_check = (e) => {
|
|
if ($(".option:checked").length) {
|
|
$("#check").removeAttr("disabled");
|
|
$(".custom-checkbox").removeClass("active-option");
|
|
$(".option:checked").closest(".custom-checkbox").addClass("active-option");
|
|
}
|
|
};
|
|
|
|
|
|
const mark_active_question = (e = undefined) => {
|
|
$(".timer").addClass("hide");
|
|
calculate_and_display_time(100);
|
|
$(".timer").removeClass("hide");
|
|
|
|
let current_index = $(".active-question").attr("data-qt-index") || 0;
|
|
let next_index = parseInt(current_index) + 1;
|
|
$(".question").addClass("hide").removeClass("active-question");
|
|
$(`.question[data-qt-index='${next_index}']`).removeClass("hide").addClass("active-question");
|
|
$(".current-question").text(`${next_index}`);
|
|
$("#check").removeClass("hide").attr("disabled", true);
|
|
$("#next").addClass("hide");
|
|
$(".explanation").addClass("hide");
|
|
initialize_timer();
|
|
};
|
|
|
|
|
|
const mark_progress = (e) => {
|
|
/* Prevent default only for Next button anchor tag and not for progress checkbox */
|
|
if ($(e.currentTarget).prop("nodeName") != "INPUT")
|
|
e.preventDefault();
|
|
else
|
|
return;
|
|
|
|
const target = $(e.currentTarget).attr("data-progress") ? $(e.currentTarget) : $("input.mark-progress");
|
|
const current_status = $(".lesson-progress").hasClass("hide") ? "Incomplete": "Complete";
|
|
|
|
let status = "Incomplete";
|
|
if (target.prop("nodeName") == "INPUT" && target.prop("checked")) {
|
|
status = "Complete";
|
|
}
|
|
|
|
if (status != current_status) {
|
|
frappe.call({
|
|
method: "lms.lms.doctype.course_lesson.course_lesson.save_progress",
|
|
args: {
|
|
lesson: $(".title").attr("data-lesson"),
|
|
course: $(".title").attr("data-course"),
|
|
status: status
|
|
},
|
|
callback: (data) => {
|
|
change_progress_indicators(status, e);
|
|
show_certificate_if_course_completed(data);
|
|
move_to_next_lesson(status, e);
|
|
}
|
|
});
|
|
}
|
|
else
|
|
move_to_next_lesson(status, e);
|
|
};
|
|
|
|
|
|
const change_progress_indicators = (status, e) => {
|
|
if (status == "Complete") {
|
|
$(".lesson-progress").removeClass("hide");
|
|
$(".active-lesson .lesson-progress-tick").removeClass("hide");
|
|
}
|
|
else {
|
|
$(".lesson-progress").addClass("hide");
|
|
$(".active-lesson .lesson-progress-tick").addClass("hide");
|
|
}
|
|
if (status == "Incomplete" && !$(e.currentTarget).hasClass("next")) {
|
|
$(e.currentTarget).addClass("hide");
|
|
$("input.mark-progress").prop("checked", false).closest(".custom-checkbox").removeClass("hide");
|
|
}
|
|
};
|
|
|
|
|
|
const show_certificate_if_course_completed = (data) => {
|
|
if (data.message == 100 && !$(".next").attr("data-next") && $("#certification").hasClass("hide")) {
|
|
$("#certification").removeClass("hide");
|
|
$(".next").addClass("hide");
|
|
}
|
|
};
|
|
|
|
|
|
const move_to_next_lesson = (status, e) => {
|
|
if ($(e.currentTarget).hasClass("next") && $(e.currentTarget).attr("data-href")) {
|
|
window.location.href = $(e.currentTarget).attr("data-href");
|
|
}
|
|
else if (status == "Complete") {
|
|
$("input.mark-progress").closest(".custom-checkbox").addClass("hide");
|
|
$("div.mark-progress").removeClass("hide");
|
|
$(".next").addClass("hide");
|
|
}
|
|
else {
|
|
$("input.mark-progress").closest(".custom-checkbox").removeClass("hide");
|
|
$("div.mark-progress").addClass("hide");
|
|
$(".next").removeClass("hide");
|
|
}
|
|
};
|
|
|
|
|
|
const quiz_summary = (e=undefined) => {
|
|
e && e.preventDefault();
|
|
let quiz_name = $("#quiz-title").data("name");
|
|
let total_questions = $(".question").length;
|
|
|
|
frappe.call({
|
|
method: "lms.lms.doctype.lms_quiz.lms_quiz.quiz_summary",
|
|
args: {
|
|
"quiz": quiz_name,
|
|
"results": localStorage.getItem(quiz_name)
|
|
},
|
|
callback: (data) => {
|
|
let message = data.message == total_questions ? __("Excellent Work 👏") : __("Better luck next time")
|
|
$(".question").addClass("hide");
|
|
$("#summary").addClass("hide");
|
|
$("#quiz-form").parent().prepend(
|
|
`<div class="text-center summary"><h2> ${message} </h2>
|
|
<div class="font-weight-bold">${data.message}/${total_questions}</div></div>`);
|
|
$("#try-again").removeClass("hide");
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
const try_quiz_again = (e) => {
|
|
window.location.reload();
|
|
};
|
|
|
|
|
|
const check_answer = (e=undefined) => {
|
|
e && e.preventDefault();
|
|
clearInterval(self.timer);
|
|
$(".timer").addClass("hide");
|
|
let total_questions = $(".question").length;
|
|
let current_index = $(".active-question").attr("data-qt-index");
|
|
|
|
$(".explanation").removeClass("hide");
|
|
$("#check").addClass("hide");
|
|
|
|
if (current_index == total_questions) {
|
|
if ($(".eligible-for-submission").length) {
|
|
$("#summary").removeClass("hide");
|
|
}
|
|
else {
|
|
$("#submission-message").removeClass("hide");
|
|
}
|
|
}
|
|
else {
|
|
$("#next").removeClass("hide");
|
|
}
|
|
let [answer, is_correct] = parse_options();
|
|
add_to_local_storage(current_index, answer, is_correct);
|
|
};
|
|
|
|
|
|
const parse_options = () => {
|
|
let answer = [];
|
|
let is_correct = [];
|
|
$(".active-question input").each((i, element) => {
|
|
let correct = parseInt($(element).attr("data-correct"));
|
|
if ($(element).prop("checked")) {
|
|
answer.push(decodeURIComponent($(element).val()));
|
|
correct && is_correct.push(1);
|
|
correct ? add_icon(element, "check") : add_icon(element, "wrong");
|
|
}
|
|
else {
|
|
correct && is_correct.push(0);
|
|
correct ? add_icon(element, "minus-circle-green") : add_icon(element, "minus-circle");
|
|
}
|
|
});
|
|
return [answer, is_correct];
|
|
};
|
|
|
|
|
|
const add_icon = (element, icon) => {
|
|
$(element).closest(".custom-checkbox").removeClass("active-option");
|
|
let label = $(element).siblings(".option-text").text();
|
|
$(element).siblings(".option-text").html(`
|
|
<div>
|
|
<img class="mr-3" src="/assets/lms/icons/${icon}.svg">
|
|
${label}
|
|
</div>
|
|
`);
|
|
//$(element).parent().empty().html(`<div class="option-text"><img class="mr-3" src="/assets/lms/icons/${icon}.svg"> ${label}</div>`);
|
|
};
|
|
|
|
|
|
const add_to_local_storage = (current_index, answer, is_correct) => {
|
|
let quiz_name = $("#quiz-title").data("name")
|
|
let quiz_stored = JSON.parse(localStorage.getItem(quiz_name));
|
|
|
|
let quiz_obj = {
|
|
"question_index": current_index,
|
|
"answer": answer.join(),
|
|
"is_correct": is_correct
|
|
}
|
|
|
|
quiz_stored ? quiz_stored.push(quiz_obj) : quiz_stored = [quiz_obj]
|
|
localStorage.setItem(quiz_name, JSON.stringify(quiz_stored))
|
|
};
|
|
|
|
|
|
const create_certificate = (e) => {
|
|
e.preventDefault();
|
|
course = $(".title").attr("data-course");
|
|
frappe.call({
|
|
method: "lms.lms.doctype.lms_certificate.lms_certificate.create_certificate",
|
|
args: {
|
|
"course": course
|
|
},
|
|
callback: (data) => {
|
|
window.location.href = `/courses/${course}/${data.message.name}`;
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
const attach_work = (e) => {
|
|
const target = $(e.currentTarget);
|
|
let files = target.siblings(".attach-file").prop("files")
|
|
if (files && files.length) {
|
|
files = add_files(files)
|
|
return_as_dataurl(files)
|
|
files.map((file) => {
|
|
upload_file(file, target);
|
|
})
|
|
}
|
|
};
|
|
|
|
|
|
const upload_file = (file, target) => {
|
|
return new Promise((resolve, reject) => {
|
|
let xhr = new XMLHttpRequest();
|
|
|
|
xhr.onreadystatechange = () => {
|
|
if (xhr.readyState == XMLHttpRequest.DONE) {
|
|
if (xhr.status === 200) {
|
|
let response = JSON.parse(xhr.responseText)
|
|
create_lesson_work(response.message, target);
|
|
} else if (xhr.status === 403) {
|
|
let response = JSON.parse(xhr.responseText);
|
|
frappe.msgprint(`Not permitted. ${response._error_message || ''}`);
|
|
|
|
} else if (xhr.status === 413) {
|
|
frappe.msgprint('Size exceeds the maximum allowed file size.');
|
|
|
|
} else {
|
|
frappe.msgprint(xhr.status === 0 ? 'XMLHttpRequest Error' : `${xhr.status} : ${xhr.statusText}`);
|
|
}
|
|
}
|
|
}
|
|
xhr.open('POST', '/api/method/upload_file', true);
|
|
xhr.setRequestHeader('Accept', 'application/json');
|
|
xhr.setRequestHeader('X-Frappe-CSRF-Token', frappe.csrf_token);
|
|
|
|
let form_data = new FormData();
|
|
if (file.file_obj) {
|
|
form_data.append('file', file.file_obj, `${frappe.session.user}-${file.name}`);
|
|
form_data.append('folder', `${$(".title").attr("data-lesson")} ${$(".title").attr("data-course")}`)
|
|
}
|
|
|
|
xhr.send(form_data);
|
|
});
|
|
};
|
|
|
|
|
|
const create_lesson_work = (file, target) => {
|
|
frappe.call({
|
|
method: "lms.lms.doctype.lesson_assignment.lesson_assignment.upload_assignment",
|
|
args: {
|
|
assignment: file.file_url,
|
|
lesson: $(".title").attr("data-lesson"),
|
|
identifier: target.siblings(".attach-file").attr("id")
|
|
},
|
|
callback: (data) => {
|
|
target.siblings(".attach-file").addClass("hide");
|
|
target.siblings(".preview-work").removeClass("hide");
|
|
target.siblings(".preview-work").find("a").attr("href", file.file_url).text(file.file_name)
|
|
target.addClass("hide");
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
const return_as_dataurl = (files) => {
|
|
let promises = files.map(file =>
|
|
frappe.dom.file_to_base64(file.file_obj)
|
|
.then(dataurl => {
|
|
file.dataurl = dataurl;
|
|
this.on_success && this.on_success(file);
|
|
})
|
|
);
|
|
return Promise.all(promises);
|
|
};
|
|
|
|
|
|
const add_files = (files) => {
|
|
files = Array.from(files).map(file => {
|
|
let is_image = file.type.startsWith('image');
|
|
return {
|
|
file_obj: file,
|
|
cropper_file: file,
|
|
crop_box_data: null,
|
|
optimize: this.attach_doc_image ? true : false,
|
|
name: file.name,
|
|
doc: null,
|
|
progress: 0,
|
|
total: 0,
|
|
failed: false,
|
|
request_succeeded: false,
|
|
error_message: null,
|
|
uploading: false,
|
|
private: !is_image
|
|
}
|
|
});
|
|
return files
|
|
};
|
|
|
|
|
|
const clear_work = (e) => {
|
|
const target = $(e.currentTarget);
|
|
const parent = target.closest(".preview-work");
|
|
parent.addClass("hide");
|
|
parent.siblings(".attach-file").removeClass("hide").val(null);
|
|
parent.siblings(".submit-work").removeClass("hide");
|
|
};
|
|
|
|
|
|
const fetch_assignments = () => {
|
|
if ($(".attach-file").length <= 0)
|
|
return;
|
|
frappe.call({
|
|
method: "lms.lms.doctype.lesson_assignment.lesson_assignment.get_assignment",
|
|
args: {
|
|
"lesson": $(".title").attr("data-lesson")
|
|
},
|
|
callback: (data) => {
|
|
if (data.message && data.message.length) {
|
|
const assignments = data.message;
|
|
for (let i in assignments) {
|
|
let target = $(`#${assignments[i]["id"]}`);
|
|
target.addClass("hide");
|
|
target.siblings(".submit-work").addClass("hide");
|
|
target.siblings(".preview-work").removeClass("hide");
|
|
target.siblings(".preview-work").find("a").attr("href", assignments[i]["assignment"]).text(assignments[i]["file_name"]);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
const initialize_timer = () => {
|
|
this.time_left = $(".timer").data("time");
|
|
calculate_and_display_time(100, this.time_left);
|
|
$(".timer").removeClass("hide");
|
|
const total_time = $(".timer").data("time");
|
|
this.start_time = new Date().getTime();
|
|
const self = this;
|
|
let old_diff;
|
|
|
|
this.timer = setInterval(function () {
|
|
var diff = (new Date().getTime() - self.start_time)/1000;
|
|
var variation = old_diff ? diff - old_diff : diff;
|
|
old_diff = diff;
|
|
self.time_left -= variation;
|
|
let percent_time = (self.time_left / total_time) * 100;
|
|
calculate_and_display_time(percent_time);
|
|
if (self.time_left <= 0) {
|
|
clearInterval(self.timer);
|
|
$(".timer").addClass("hide");
|
|
check_answer();
|
|
}
|
|
}, 100);
|
|
};
|
|
|
|
|
|
const calculate_and_display_time = (percent_time) => {
|
|
$(".timer .progress-bar").attr("aria-valuenow", percent_time);
|
|
$(".timer .progress-bar").attr("aria-valuemax", percent_time);
|
|
$(".timer .progress-bar").css("width", `${percent_time}%`);
|
|
let progress_color = percent_time < 20 ? "red" : "var(--primary-color)";
|
|
$(".timer .progress-bar").css("background-color", progress_color);
|
|
};
|
|
|
|
|
|
const save_lesson = (e) => {
|
|
let lesson = $("#title").data("lesson");
|
|
frappe.call({
|
|
method: "lms.lms.doctype.lms_course.lms_course.save_lesson",
|
|
args: {
|
|
"title": $("#title").text(),
|
|
"body": this.code_field_group.fields_dict["code_md"].last_value,
|
|
"chapter": $("#title").data("chapter"),
|
|
"preview": $("#preview").prop("checked") ? 1 : 0,
|
|
"idx": $("#title").data("index"),
|
|
"lesson": lesson ? lesson : ""
|
|
},
|
|
callback: (data) => {
|
|
window.location.href = window.location.href.split("?")[0];
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
const show_upload_modal = () => {
|
|
new frappe.ui.FileUploader({
|
|
folder: "Home/Attachments",
|
|
restrictions: {
|
|
allowed_file_types: ['image/*', 'video/*']
|
|
},
|
|
on_success: (file_doc) => {
|
|
$(".attachments").append(build_attachment_table(file_doc));
|
|
let count = $(".attachment-count").data("count") + 1;
|
|
$(".attachment-count").data("count", count);
|
|
$(".attachment-count").html(__(`${count} attachments`));
|
|
$(".attachments").removeClass("hide");
|
|
},
|
|
});
|
|
};
|
|
|
|
|
|
const build_attachment_table = (file_doc) => {
|
|
let video_types = ["mov", "mp4", "mkv"];
|
|
let video_extension = file_doc.file_url.split(".").pop();
|
|
let is_video = video_types.indexOf(video_extension) >= 0;
|
|
let link = is_video ? `{{ Video('${file_doc.file_url}') }}` : ``;
|
|
|
|
return $(`
|
|
<tr class="attachment-row">
|
|
<td>${file_doc.file_name}</td>
|
|
<td class="">
|
|
<a class="button is-secondary button-links copy-link" data-link="${link}"
|
|
data-name="${file_doc.file_name}" > ${__("Copy Link")}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
`);
|
|
};
|
|
|
|
|
|
const make_editor = () => {
|
|
this.code_field_group = new frappe.ui.FieldGroup({
|
|
fields: [
|
|
{
|
|
fieldname: "code_md",
|
|
fieldtype: "Code",
|
|
options: "Markdown",
|
|
wrap: true,
|
|
max_lines: Infinity,
|
|
min_lines: 20,
|
|
default: $("#body").data("body"),
|
|
depends_on: 'eval:doc.type=="Markdown"',
|
|
}
|
|
],
|
|
body: $("#body").get(0),
|
|
});
|
|
this.code_field_group.make();
|
|
$("#body .form-section:last").removeClass("empty-section");
|
|
$("#body .frappe-control").removeClass("hide-control");
|
|
$("#body .form-column").addClass("p-0");
|
|
};
|