fix: course details interactions

This commit is contained in:
pateljannat
2021-07-08 10:55:03 +05:30
parent 0ed5309b97
commit 27c01b3b0c
13 changed files with 307 additions and 102 deletions

View File

@@ -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 %}

View File

@@ -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");
}

View File

@@ -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():

View File

@@ -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>

View File

@@ -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);
}
}

View File

@@ -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 %}