Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PAE-845 Add custom prerequisites functionality to improve learner experience #189

Open
wants to merge 3 commits into
base: open-release/juniper.stage
Choose a base branch
from
Open

PAE-845 Add custom prerequisites functionality to improve learner experience #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f0457fc
feat: improve learner experience regarding prerequisites
anfbermudezme Nov 22, 2021
5a25e2d
feat: add default course_about.html to the theme
anfbermudezme Nov 30, 2021
f765e1d
feat: add custom behavior for prerequisites.
anfbermudezme Dec 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
323 changes: 323 additions & 0 deletions edx-platform/pearson-pathways-theme/lms/templates/courseware/course_about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,323 @@
<%page expression_filter="h"/>
<%namespace name='static' file='../static_content.html'/>
<%!
from django.utils.translation import ugettext as _
from django.utils.translation import pgettext
from django.urls import reverse
from lms.djangoapps.courseware.courses import get_course_about_section
from django.conf import settings
from six import text_type
from edxmako.shortcuts import marketing_link
from openedx.core.djangolib.js_utils import js_escaped_string
from openedx.core.djangolib.markup import clean_dangerous_html, HTML, Text
from openedx.core.lib.courses import course_image_url

from six import string_types
%>

<%inherit file="../main.html" />
<%block name="headextra">
## OG (Open Graph) title and description added below to give social media info to display
## (https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#tags)
<meta property="og:title" content="${course.display_name_with_default}" />
<meta property="og:description" content="${get_course_about_section(request, course, 'short_description')}" />
</%block>

<%block name="js_extra">
<script type="text/javascript">
(function() {
$(".register").click(function(event) {
$("#class_enroll_form").submit();
event.preventDefault();
});

$('#class_enroll_form').on('ajax:complete', function(event, xhr) {
if (xhr.status == 200) {
if (xhr.responseText == "") {
location.href = "${reverse('dashboard') | n, js_escaped_string}";
}
else {
location.href = xhr.responseText;
}
} else if (xhr.status == 403) {
$('#register_error').text(
(xhr.responseText ? xhr.responseText : "${_("An error has occurred. Please ensure that you are logged in to enroll.") | n, js_escaped_string}")
).css("display", "block");
} else {
$('#register_error').text(
(xhr.responseText ? xhr.responseText : "${_("An error occurred. Please try again later.") | n, js_escaped_string}")
).css("display", "block");
}
});

})(this)
</script>

<script src="${static.url('js/course_info.js')}"></script>
</%block>

<%block name="pagetitle">${course.display_name_with_default}</%block>

<section class="course-info">

<%block name="course_about_header">
<header class="course-profile">
<div class="intro-inner-wrapper">
<div class="table">
<section class="intro">
<div class="heading-group">
<h1>
${course.display_name_with_default}
</h1>
<br />
<span>${course.display_org_with_default}</span>
</div>

<div class="main-cta">
%if user.is_authenticated and registered:
%if show_courseware_link:
<a href="${course_target}">
%endif

<span class="register disabled">${_("You are enrolled in this course")}</span>

%if show_courseware_link:
<strong>${_("View Course")}</strong>
</a>
%endif

% elif is_course_full:
<span class="register disabled">
${_("Course is full")}
</span>
% elif invitation_only and not can_enroll:
<span class="register disabled">${_("Enrollment in this course is by invitation only")}</span>
## Shib courses need the enrollment button to be displayed even when can_enroll is False,
## because AnonymousUsers cause can_enroll for shib courses to be False, but we need them to be able to click
## so that they can register and become a real user that can enroll.
% elif not is_shib_course and not can_enroll:
<span class="register disabled">${_("Enrollment is Closed")}</span>
%elif allow_anonymous:
%if show_courseware_link:
<a href="${course_target}">
<strong>${_("View Course")}</strong>
</a>
%endif
%else:
<%
if ecommerce_checkout:
reg_href = ecommerce_checkout_link
else:
reg_href="#"
if single_paid_mode:
href_class = "add-to-cart"
else:
href_class = "register"
%>
<a href="${reg_href}" class="${href_class}">
${_("Enroll Now")}
</a>
<div id="register_error"></div>
%endif
</div>

</section>
% if get_course_about_section(request, course, "video"):
<a href="#video-modal" class="media" rel="leanModal">
<div class="hero">
<img src="${course_image_urls['large']}" alt="" />
<div class="play-intro"></div>
</div>
</a>
%else:
<div class="media">
<div class="hero">
<img src="${course_image_urls['large']}" alt="" />
</div>
</div>
% endif
</div>
</div>
</header>
</%block>

<div class="container">

<%block name="course_about_details">
<div class="details">
% if staff_access and studio_url is not None:
<div class="wrap-instructor-info studio-view">
<a class="instructor-info-action" href="${studio_url}">${_("View About Page in studio")}</a>
</div>
% endif

<div class="inner-wrapper">
${clean_dangerous_html(get_course_about_section(request, course, "overview"))}
</div>
</div>
</%block>

<div class="course-sidebar">
<div class="course-summary">

<%include file="course_about_sidebar_header.html" />

<%block name="course_about_important_dates">
<ol class="important-dates">
<li class="important-dates-item"><span class="icon fa fa-info-circle" aria-hidden="true"></span><p class="important-dates-item-title">${_("Course Number")}</p><span class="important-dates-item-text course-number">${course.display_number_with_default}</span></li>
% if not course.start_date_is_still_default:
<%
course_start_date = course.advertised_start or course.start
%>
<li class="important-dates-item">
<span class="icon fa fa-calendar" aria-hidden="true"></span>
<p class="important-dates-item-title">${_("Classes Start")}</p>
% if isinstance(course_start_date, string_types):
<span class="important-dates-item-text start-date">${course_start_date}</span>
% else:
<%
course_date_string = course_start_date.strftime('%Y-%m-%dT%H:%M:%S%z')
%>
<span class="important-dates-item-text start-date localized_datetime" data-format="shortDate" data-datetime="${course_date_string}" data-language="${LANGUAGE_CODE}"></span>
% endif
</li>
% endif
## We plan to ditch end_date (which is not stored in course metadata),
## but for backwards compatibility, show about/end_date blob if it exists.
% if course.end:
<%
course_end_date = course.end
%>

<li class="important-dates-item">
<span class="icon fa fa-calendar" aria-hidden="true"></span>
<p class="important-dates-item-title">${_("Classes End")}</p>
% if isinstance(course_end_date, string_types):
<span class="important-dates-item-text final-date">${course_end_date}</span>
% else:
<%
course_date_string = course_end_date.strftime('%Y-%m-%dT%H:%M:%S%z')
%>
<span class="important-dates-item-text final-date localized_datetime" data-format="shortDate" data-datetime="${course_date_string}" data-language="${LANGUAGE_CODE}"></span>
% endif
</li>
% endif

% if get_course_about_section(request, course, "effort"):
<li class="important-dates-item"><span class="icon fa fa-pencil" aria-hidden="true"></span><p class="important-dates-item-title">${_("Estimated Effort")}</p><span class="important-dates-item-text effort">${get_course_about_section(request, course, "effort")}</span></li>
% endif

##<li class="important-dates-item"><span class="icon fa fa-clock-o" aria-hidden="true"></span><p class="important-dates-item-title">${_('Course Length')}</p><span class="important-dates-item-text course-length">${_('{number} weeks').format(number=15)}</span></li>

%if course_price and (is_cosmetic_price_enabled):
<li class="important-dates-item">
<span class="icon fa fa-money" aria-hidden="true"></span>
<p class="important-dates-item-title">${_("Price")}</p>
<span class="important-dates-item-text">${course_price}</span>
</li>
%endif

% if course_requirements:
% if student_not_enrollment_in_requirement:
<li class="prerequisite-course important-dates-item">
<span class="icon fa fa-list-ul" aria-hidden="true"></span>
<p class="important-dates-item-title">${_("Prerequisites")}</p>
## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element
<span class="important-dates-item-text pre-requisite">
<a href="${ecommerce_payment_page}?sku=${student_not_enrollment_in_requirement}">
${course_requirements['display']}
</a>
</span>
<p class="tip">
${Text(_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.")).format(
link_start=HTML('<a href="{ecommerce_payment_page}?sku={student_not_enrollment_in_requirement}">').format(
ecommerce_payment_page=ecommerce_payment_page,
student_not_enrollment_in_requirement=student_not_enrollment_in_requirement,
),
link_end=HTML('</a>'),
prc_display=course_requirements['display'],
)}
</p>
</li>
%else:
<% prc_target = reverse('about_course', args=[text_type(course_requirements['key'])]) %>
<li class="prerequisite-course important-dates-item">
<span class="icon fa fa-list-ul" aria-hidden="true"></span>
<p class="important-dates-item-title">${_("Prerequisites")}</p>
## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element
<span class="important-dates-item-text pre-requisite"><a href="${prc_target}">${course_requirements['display']}</a></span>
<p class="tip">
${Text(_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.")).format(
link_start=HTML('<a href="{}">').format(prc_target),
link_end=HTML('</a>'),
prc_display=course_requirements['display'],
)}
</p>
</li>
%endif
% endif

% if get_course_about_section(request, course, "prerequisites"):
<li class="important-dates-item"><span class="icon fa fa-book" aria-hidden="true"></span><p class="important-dates-item-title">${_("Requirements")}</p><span class="important-dates-item-text prerequisites">${get_course_about_section(request, course, "prerequisites")}</span></li>
% endif
</ol>
</%block>
</div>

<%block name="course_about_reviews_tool">
## Course reviews tool
% if reviews_fragment_view:
${HTML(reviews_fragment_view.body_html())}
% endif
</%block>

## For now, ocw links are the only thing that goes in additional resources
% if get_course_about_section(request, course, "ocw_links"):
<div class="additional-resources">
<header>
<h1>${_("Additional Resources")}</h1>
</div>

<div>
## "MITOpenCourseware" should *not* be translated
<h2 class="opencourseware">MITOpenCourseware</h2>
${get_course_about_section(request, course, "ocw_links")}
</div>
</div>
%endif

% if sidebar_html_enabled:
% if get_course_about_section(request, course, "about_sidebar_html"):
<section class="about-sidebar-html">
${get_course_about_section(request, course, "about_sidebar_html")}
</section>
% endif
%endif
</div>

</div>
</div>

## Need to put this hidden form on the page so that the registration button works.
## Since it's no harm to display a hidden form, we display it with the most permissive conditional
## which is when the student is not registered.
%if active_reg_button or is_shib_course:
<div style="display: none;">
<form id="class_enroll_form" method="post" data-remote="true" action="${reverse('change_enrollment')}">
<fieldset class="enroll_fieldset">
<legend class="sr">${pgettext("self","Enroll")}</legend>
<input name="course_id" type="hidden" value="${course.id}">
<input name="enrollment_action" type="hidden" value="enroll">
</fieldset>
<div class="submit">
<input name="submit" type="submit" value="${pgettext('self','enroll')}">
</div>
</form>
</div>
%endif

<%include file="../video_modal.html" />

<%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
DateUtilFactory.transform(iterationKey=".localized_datetime");
</%static:require_module_async>
3 changes: 2 additions & 1 deletion edx-platform/pearson-pathways-theme/lms/templates/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,12 +237,13 @@ <h1>${_("My Courses")}</h1>
is_course_blocked = (session_id in block_courses)
course_verification_status = verification_status_by_course.get(session_id, {})
course_requirements = courses_requirements_not_met.get(session_id)
student_not_enrollment_in_requirement = sku_not_enrollment_in_requirement.get(session_id)
related_programs = inverted_programs.get(six.text_type(entitlement.course_uuid if is_unfulfilled_entitlement else session_id))
show_consent_link = (session_id in consent_required_courses)
course_overview = enrollment.course_overview
resume_button_url = resume_button_urls[dashboard_index]
%>
<%include file='dashboard/_dashboard_course_listing.html' args='course_overview=course_overview, course_card_index=dashboard_index, enrollment=enrollment, is_unfulfilled_entitlement=is_unfulfilled_entitlement, is_fulfilled_entitlement=is_fulfilled_entitlement, entitlement=entitlement, entitlement_session=entitlement_session, entitlement_available_sessions=entitlement_available_sessions, entitlement_expiration_date=entitlement_expiration_date, entitlement_expired_at=entitlement_expired_at, show_courseware_link=show_courseware_link, cert_status=cert_status, can_refund_entitlement=can_refund_entitlement, can_unenroll=can_unenroll, credit_status=credit_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, is_paid_course=is_paid_course, is_course_blocked=is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements, dashboard_index=dashboard_index, share_settings=share_settings, user=user, related_programs=related_programs, display_course_modes_on_dashboard=display_course_modes_on_dashboard, show_consent_link=show_consent_link, enterprise_customer_name=enterprise_customer_name, resume_button_url=resume_button_url, mit_subscription=mit_subscription' />
<%include file='dashboard/_dashboard_course_listing.html' args='course_overview=course_overview, course_card_index=dashboard_index, enrollment=enrollment, is_unfulfilled_entitlement=is_unfulfilled_entitlement, is_fulfilled_entitlement=is_fulfilled_entitlement, entitlement=entitlement, entitlement_session=entitlement_session, entitlement_available_sessions=entitlement_available_sessions, entitlement_expiration_date=entitlement_expiration_date, entitlement_expired_at=entitlement_expired_at, show_courseware_link=show_courseware_link, cert_status=cert_status, can_refund_entitlement=can_refund_entitlement, can_unenroll=can_unenroll, credit_status=credit_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, is_paid_course=is_paid_course, is_course_blocked=is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements, student_not_enrollment_in_requirement = student_not_enrollment_in_requirement, dashboard_index=dashboard_index, share_settings=share_settings, user=user, related_programs=related_programs, display_course_modes_on_dashboard=display_course_modes_on_dashboard, show_consent_link=show_consent_link, enterprise_customer_name=enterprise_customer_name, resume_button_url=resume_button_url, mit_subscription=mit_subscription' />
</div>
% endfor
</div>
Expand Down
Loading