fix: course details interactions
This commit is contained in:
@@ -21,7 +21,7 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="common-page-style">
|
||||
<div class="course-home-page">
|
||||
<div class="course-details-page">
|
||||
{{ widgets.Breadcrumb(course=course, lesson=lesson) }}
|
||||
<div class="course-content-parent">
|
||||
<div class="course-details-outline">
|
||||
@@ -40,9 +40,10 @@
|
||||
|
||||
{% macro LessonContent(lesson) %}
|
||||
<div class="lesson-content">
|
||||
<div class="course-home-headings title {% if course.is_mentor(frappe.session.user) %} is_mentor {% endif %}"
|
||||
data-lesson="{{ lesson.name }}" data-course="{{ course.name }}" {% if membership%}
|
||||
data-membership="{{membership.name}}" {% endif %}>{{ lesson.title }}</div>
|
||||
<div class="course-home-headings title" data-lesson="{{ lesson.name }}" data-course="{{ course.name }}">
|
||||
{{ lesson.title }}
|
||||
<span class="lesson-progress {{hide if course.get_progress(lesson.name) != 'Complete' else ''}}">COMPLETED</span>
|
||||
</div>
|
||||
|
||||
{% if membership or lesson.include_in_preview %}
|
||||
<div class="common-card-style lesson-content-card">{{ lesson.render_html() }}</div>
|
||||
@@ -52,6 +53,7 @@
|
||||
<a href="/courses/{{ course.name }}">Checkout Course Details.</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
@@ -59,22 +61,33 @@
|
||||
<div class="lesson-pagination">
|
||||
|
||||
{% if prev_url %}
|
||||
<a class="wide-button is-secondary dark-links" href="{{ prev_url }}">
|
||||
<a class="button is-secondary dark-links" href="{{ prev_url }}">
|
||||
<img class="mr-2" src="/assets/community/icons/left-arrow.svg">
|
||||
Prev
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="wide-button is-primary">
|
||||
{% if not course.is_mentor(frappe.session.user) and membership %}
|
||||
|
||||
{% if course.get_progress(lesson.name) != "Complete" %}
|
||||
<div class="button is-secondary" id="progress" data-progress="Complete">
|
||||
Mark as Complete
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="button is-secondary" id="progress" data-progress="Incomplete">
|
||||
Mark as Incomplete
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% if next_url %}
|
||||
<a class="wide-button is-secondary dark-links" href="{{ next_url }}">
|
||||
<a class="button is-primary" href="{{ next_url }}">
|
||||
Next
|
||||
<img class="ml-2" src="/assets/community/icons/side-arrow.svg">
|
||||
<img class="ml-2" src="/assets/community/icons/side-arrow-white.svg">
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
@@ -1,69 +1,111 @@
|
||||
frappe.ready(() => {
|
||||
|
||||
/* Save Lesson Progress */
|
||||
if ($(".title").attr("data-membership") && !$(".title").hasClass("is_mentor")) {
|
||||
frappe.call({
|
||||
method: "community.lms.doctype.lesson.lesson.save_progress",
|
||||
args: {
|
||||
lesson: $(".title").attr("data-lesson"),
|
||||
course: $(".title").attr("data-course")
|
||||
}
|
||||
})
|
||||
}
|
||||
highlight_active_lesson();
|
||||
|
||||
/* Save Current Lesson */
|
||||
save_current_lesson();
|
||||
|
||||
$("#progress").click((e) => {
|
||||
mark_progress(e);
|
||||
});
|
||||
|
||||
$("#submit-quiz").click((e) => {
|
||||
submit_quiz(e);
|
||||
});
|
||||
|
||||
$("#try-again").click((e) => {
|
||||
try_quiz_again(e);
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
var highlight_active_lesson = () => {
|
||||
var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
|
||||
if (selector.length) {
|
||||
selector.addClass('active-lesson');
|
||||
}
|
||||
}
|
||||
|
||||
var save_current_lesson = () => {
|
||||
if ($(".title").attr("data-membership")) {
|
||||
frappe.call("community.lms.api.save_current_lesson", {
|
||||
course_name: $(".title").attr("data-course"),
|
||||
lesson_name: $(".title").attr("data-lesson")
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/* Submit Quiz */
|
||||
$("#submit-quiz").click((e) => {
|
||||
e.preventDefault();
|
||||
console.log("click")
|
||||
var result = [];
|
||||
$('.question').each((i, element) => {
|
||||
var options = $(element).find(".option");
|
||||
var answers = [];
|
||||
options.filter((i, op) => $(op).prop("checked")).each((i, elem) => answers.push(decodeURIComponent(elem.value)));
|
||||
result.push({
|
||||
"question": element.dataset.question,
|
||||
"answer": answers
|
||||
});
|
||||
});
|
||||
frappe.call({
|
||||
method: "community.lms.doctype.lms_quiz.lms_quiz.submit",
|
||||
args: {
|
||||
quiz: $("#title").text(),
|
||||
result: result
|
||||
},
|
||||
callback: (data) => {
|
||||
$("#submit-quiz").addClass("hide");
|
||||
$("#try-again").removeClass("hide");
|
||||
$(":input[type='checkbox']").prop("disabled", true);
|
||||
$(":input[type='radio']").prop("disabled", true);
|
||||
if (data.message == result.length) {
|
||||
$(".success-message").text("Congratulations, you cleared the quiz!");
|
||||
}
|
||||
else {
|
||||
$(".success-message").text("Some of your answers weren't correct. You can give it another shot.");
|
||||
}
|
||||
$(".score").text(`Score: ${data.message}/${result.length}`);
|
||||
var mark_progress = (e) => {
|
||||
var status = $(e.currentTarget).attr("data-progress");
|
||||
frappe.call({
|
||||
method: "community.lms.doctype.lesson.lesson.save_progress",
|
||||
args: {
|
||||
lesson: $(".title").attr("data-lesson"),
|
||||
course: $(".title").attr("data-course"),
|
||||
status: status
|
||||
},
|
||||
callback: (data) => {
|
||||
if (data.message == "OK") {
|
||||
change_progress_indicators(status, e);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* Try the quiz again */
|
||||
$("#try-again").click((e) => {
|
||||
e.preventDefault();
|
||||
$(":input[type='checkbox']").prop("disabled", false);
|
||||
$(":input[type='radio']").prop("disabled", false);
|
||||
$("#quiz-form").trigger("reset");
|
||||
$(".success-message").text("");
|
||||
$(".score").text("");
|
||||
$("#submit-quiz").removeClass("hide");
|
||||
$("#try-again").addClass("hide");
|
||||
var 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");
|
||||
}
|
||||
var label = status != "Complete" ? "Mark as Complete" : "Mark as Incomplete";
|
||||
var data_progress = status != "Complete" ? "Complete" : "Incomplete";
|
||||
$(e.currentTarget).text(label).attr("data-progress", data_progress);
|
||||
}
|
||||
|
||||
var submit_quiz = (e) => {
|
||||
e.preventDefault();
|
||||
var result = [];
|
||||
$('.question').each((i, element) => {
|
||||
var options = $(element).find(".option");
|
||||
var answers = [];
|
||||
options.filter((i, op) => $(op).prop("checked")).each((i, elem) => answers.push(decodeURIComponent(elem.value)));
|
||||
result.push({
|
||||
"question": element.dataset.question,
|
||||
"answer": answers
|
||||
});
|
||||
});
|
||||
frappe.call({
|
||||
method: "community.lms.doctype.lms_quiz.lms_quiz.submit",
|
||||
args: {
|
||||
quiz: $("#title").text(),
|
||||
result: result
|
||||
},
|
||||
callback: (data) => {
|
||||
$("#submit-quiz").addClass("hide");
|
||||
$("#try-again").removeClass("hide");
|
||||
$(":input[type='checkbox']").prop("disabled", true);
|
||||
$(":input[type='radio']").prop("disabled", true);
|
||||
if (data.message == result.length) {
|
||||
$(".success-message").text("Congratulations, you cleared the quiz!");
|
||||
}
|
||||
else {
|
||||
$(".success-message").text("Some of your answers weren't correct. You can give it another shot.");
|
||||
}
|
||||
$(".score").text(`Score: ${data.message}/${result.length}`);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
var try_quiz_again = (e) => {
|
||||
e.preventDefault();
|
||||
$(":input[type='checkbox']").prop("disabled", false);
|
||||
$(":input[type='radio']").prop("disabled", false);
|
||||
$("#quiz-form").trigger("reset");
|
||||
$(".success-message").text("");
|
||||
$(".score").text("");
|
||||
$("#submit-quiz").removeClass("hide");
|
||||
$("#try-again").addClass("hide");
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ def get_common_context(context):
|
||||
context.members = course.get_mentors(membership.batch) + course.get_students(membership.batch)
|
||||
context.member_count = len(context.members)
|
||||
|
||||
context.course.query_parameter = "?batch=" + membership.batch if membership and membership.batch else " "
|
||||
context.course.query_parameter = "?batch=" + membership.batch if membership and membership.batch else ""
|
||||
context.livecode_url = get_livecode_url()
|
||||
|
||||
def get_livecode_url():
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<div class="course-buttons">
|
||||
{% if not course.disable_self_learning and not membership %}
|
||||
<div class="wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">
|
||||
<div class="button wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">
|
||||
Start Learning
|
||||
<img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
|
||||
</div>
|
||||
@@ -49,13 +49,13 @@
|
||||
{% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
|
||||
membership.current_lesson
|
||||
else '1.1' %}
|
||||
<a class="wide-button is-primary" id="continue-learning"
|
||||
<a class="button wide-button is-primary" id="continue-learning"
|
||||
href="{{ course.get_learn_url(lesson_index) }}{{ course.query_parameter }}">
|
||||
Continue Learning <img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if course.video_link %}
|
||||
<div class="wide-button is-secondary video-preview">
|
||||
<div class="button wide-button is-secondary video-preview">
|
||||
Watch Video Preview
|
||||
<img class="ml-2" src="/assets/community/images/play.png" />
|
||||
</div>
|
||||
|
||||
@@ -132,7 +132,7 @@ var join_course = (e) => {
|
||||
if (data.message == "OK") {
|
||||
frappe.msgprint(__("You are now a student of this course."));
|
||||
setTimeout(function () {
|
||||
window.location.href = `/courses/${course}/home`;
|
||||
window.location.href = `/courses/${course}/learn/1.1`;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,17 +65,30 @@
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if course.get_membership(frappe.session.user) %}
|
||||
{% set membership = course.get_membership(frappe.session.user) %}
|
||||
|
||||
{% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
|
||||
membership.current_lesson
|
||||
else '1.1' %}
|
||||
|
||||
{% set query_parameter = "?batch=" + membership.batch if membership and membership.batch else "" %}
|
||||
|
||||
{% if membership %}
|
||||
|
||||
<div class="view-course-link is-primary">
|
||||
Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
|
||||
</div>
|
||||
<a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
|
||||
|
||||
{% else %}
|
||||
|
||||
<div class="view-course-link">
|
||||
View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
|
||||
</div>
|
||||
<a class="stretched-link" href="/courses/{{ course.name }}"></a>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
<a class="stretched-link" href="/courses/{{ course.name }}"></a>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user