Skip to content

E
edx-platform
Commit dcee7855 by Matthew Piatetsky
Options

Fix selectors so that unenrollment survey works with multiple courses

parent 7c0423ff
Showing with 29 additions and 33 deletions
lms/static/js/learner_dashboard/views/unenroll_view.js
......@@ -3,36 +3,33 @@
define(['backbone',
'jquery',
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils'
'gettext'
],
function(
Backbone,
$,
_,
gettext,
HtmlUtils
gettext
) {
return Backbone.View.extend({
el: '.unenroll-modal',
switchToSlideOne: function() {
var survey, i,
reasonsSurvey = HtmlUtils.HTML($('.reasons_survey'));
var survey, i;
// Randomize survey option order
survey = document.querySelector('.options');
for (i = survey.children.length - 1; i >= 0; i--) {
survey.appendChild(survey.children[Math.random() * i | 0]);
}
$('.inner-wrapper header').hide();
$('#unenroll_form').after(HtmlUtils.ensureHtml(reasonsSurvey).toString()).hide();
$('.reasons_survey .slide1').removeClass('hidden');
this.$('.inner-wrapper header').hide();
this.$('#unenroll_form').hide();
this.$('.slide1').removeClass('hidden');
},
switchToSlideTwo: function() {
var reason = $(".reasons_survey input[name='reason']:checked").attr('val');
var reason = this.$(".reasons_survey input[name='reason']:checked").attr('val');
if (reason === 'Other') {
reason = $('.other_text').val();
reason = this.$('.other_text').val();
}
if (reason) {
window.analytics.track('unenrollment_reason.selected', {
......@@ -41,9 +38,11 @@
displayName: 'v1'
});
}
HtmlUtils.setHtml($('.reasons_survey'), HtmlUtils.HTML($('.slide2').html()));
$('.reasons_survey .return_to_dashboard').attr('href', this.urls.dashboard);
$('.reasons_survey .browse_courses').attr('href', this.urls.browseCourses);
this.$('.slide1').addClass('hidden');
this.$('.survey_course_name').text(this.$('#unenroll_course_name').text());
this.$('.slide2').removeClass('hidden');
this.$('.reasons_survey .return_to_dashboard').attr('href', this.urls.dashboard);
this.$('.reasons_survey .browse_courses').attr('href', this.urls.browseCourses);
},
unenrollComplete: function(event, xhr) {
......@@ -52,7 +51,7 @@
location.href = this.urls.dashboard;
} else {
this.switchToSlideOne();
$('.submit_reasons').click(this.switchToSlideTwo.bind(this));
this.$('.reasons_survey:first .submit_reasons').click(this.switchToSlideTwo.bind(this));
}
} else if (xhr.status === 403) {
location.href = this.urls.signInUser + '?course_id=' +
......
lms/static/js/spec/learner_dashboard/unenroll_view_spec.js
......@@ -20,7 +20,7 @@ define([
};
beforeEach(function() {
setFixtures('<div class="wrapper-action-more" data-course-key="course-v1:edX+DemoX+Demo_Course"> <button type="button" class="action action-more" id="actions-dropdown-link-0" aria-haspopup="true" aria-expanded="true" aria-controls="actions-dropdown-0" data-course-number="DemoX" data-course-name="edX Demonstration Course" data-dashboard-index="0"> <span class="sr">Course options for</span> <span class="sr">&nbsp; edX Demonstration Course </span> <span class="fa fa-cog" aria-hidden="true"></span> </button> <div class="actions-dropdown is-visible" id="actions-dropdown-0" tabindex="-1"> <ul class="actions-dropdown-list" id="actions-dropdown-list-0" aria-label="Available Actions" role="menu"> <div class="reasons_survey"> <div class="slide1 hidden"> <h3>We\'re sorry to see you go! Please share your main reason for unenrolling.</h3><br> <ul class="options"> <li><label class="option"><input type="radio" name="reason" val="I don\'t have enough support">I don\'t have enough support</label></li><li><label class="option"><input type="radio" name="reason" val="I don’t have the academic or language prerequisites">I don\'t have the academic or language prerequisites</label></li><li><label class="option"><input type="radio" name="reason" val="Something was broken">Something was broken</label></li><li><label class="option"><input type="radio" name="reason" val="I just wanted to browse the material">I just wanted to browse the material</label></li><li><label class="option"><input type="radio" name="reason" val="This won’t help me reach my goals">This won\'t help me reach my goals</label></li><li><label class="option"><input type="radio" name="reason" val="I am not happy with the quality of the content">I am not happy with the quality of the content</label></li><li><label class="option"><input type="radio" name="reason" val="The course material was too hard">The course material was too hard</label></li><li><label class="option"><input type="radio" name="reason" val="I don\'t have the time">I don\'t have the time</label></li><li><label class="option"><input type="radio" name="reason" val="The course material was too easy">The course material was too easy</label></li><li><label class="option"><input class="other_radio" type="radio" name="reason" val="Other">Other <input type="text" class="other_text"></label></li></ul> <button class="submit_reasons">Submit</button> </div> </div> <div class="slide2 hidden"> Thank you for sharing your reasons for unenrolling.<br> You are unenrolled from edX Demonstration Course. <a class="button survey_button return_to_dashboard"> Return To Dashboard </a> <a class="button survey_button browse_courses"> Browse Courses </a> </div> <li class="actions-item" id="actions-item-unenroll-0"> <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="course-v1:edX+DemoX+Demo_Course" data-course-number="DemoX" data-course-name="edX Demonstration Course" data-dashboard-index="0" data-track-info="Are you sure you want to unenroll from %(course_name)s (%(course_number)s)?" id="unenroll-0"> Unenroll </a> </li> <li class="actions-item" id="actions-item-email-settings-0"> </li> </ul> </div> </div>'); // eslint-disable-line max-len
setFixtures('<div class="unenroll-modal"><div class="wrapper-action-more" data-course-key="course-v1:edX+DemoX+Demo_Course"> <button type="button" class="action action-more" id="actions-dropdown-link-0" aria-haspopup="true" aria-expanded="true" aria-controls="actions-dropdown-0" data-course-number="DemoX" data-course-name="edX Demonstration Course" data-dashboard-index="0"> <span class="sr">Course options for</span> <span class="sr">&nbsp; edX Demonstration Course </span> <span class="fa fa-cog" aria-hidden="true"></span> </button> <div class="actions-dropdown is-visible" id="actions-dropdown-0" tabindex="-1"> <ul class="actions-dropdown-list" id="actions-dropdown-list-0" aria-label="Available Actions" role="menu"> <div class="reasons_survey"> <div class="slide1 hidden"> <h3>We\'re sorry to see you go! Please share your main reason for unenrolling.</h3><br> <ul class="options"> <li><label class="option"><input type="radio" name="reason" val="I don\'t have enough support">I don\'t have enough support</label></li><li><label class="option"><input type="radio" name="reason" val="I don’t have the academic or language prerequisites">I don\'t have the academic or language prerequisites</label></li><li><label class="option"><input type="radio" name="reason" val="Something was broken">Something was broken</label></li><li><label class="option"><input type="radio" name="reason" val="I just wanted to browse the material">I just wanted to browse the material</label></li><li><label class="option"><input type="radio" name="reason" val="This won’t help me reach my goals">This won\'t help me reach my goals</label></li><li><label class="option"><input type="radio" name="reason" val="I am not happy with the quality of the content">I am not happy with the quality of the content</label></li><li><label class="option"><input type="radio" name="reason" val="The course material was too hard">The course material was too hard</label></li><li><label class="option"><input type="radio" name="reason" val="I don\'t have the time">I don\'t have the time</label></li><li><label class="option"><input type="radio" name="reason" val="The course material was too easy">The course material was too easy</label></li><li><label class="option"><input class="other_radio" type="radio" name="reason" val="Other">Other <input type="text" class="other_text"></label></li></ul> <button class="submit_reasons">Submit</button> </div> </div> <div class="slide2 hidden"> Thank you for sharing your reasons for unenrolling.<br> You are unenrolled from edX Demonstration Course. <a class="button survey_button return_to_dashboard"> Return To Dashboard </a> <a class="button survey_button browse_courses"> Browse Courses </a> </div> <li class="actions-item" id="actions-item-unenroll-0"> <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="course-v1:edX+DemoX+Demo_Course" data-course-number="DemoX" data-course-name="edX Demonstration Course" data-dashboard-index="0" data-track-info="Are you sure you want to unenroll from %(course_name)s (%(course_number)s)?" id="unenroll-0"> Unenroll </a> </li> <li class="actions-item" id="actions-item-email-settings-0"> </li> </ul> </div> </div></div>'); // eslint-disable-line max-len
});
afterEach(function() {
......@@ -39,7 +39,7 @@ define([
expect($('.slide1').hasClass('hidden')).toEqual(false);
expect($('.slide2').hasClass('hidden')).toEqual(true);
view.switchToSlideTwo();
expect($('.slide2').hasClass('hidden')).toEqual(true);
expect($('.slide2').hasClass('hidden')).toEqual(false);
});
});
}
......
lms/static/sass/multicourse/_dashboard.scss
......@@ -1504,7 +1504,7 @@ a.fade-cover{
}
.reasons_survey {
padding: 20px;
margin: 20px;
.options {
list-style: none;
......
lms/templates/dashboard/_dashboard_course_listing.html
......@@ -220,7 +220,6 @@ from util.course import get_link_for_about_page, get_encoded_course_sharing_utm_
<div class="actions-dropdown" id="actions-dropdown-${dashboard_index}" tabindex="-1">
<ul class="actions-dropdown-list" id="actions-dropdown-list-${dashboard_index}" aria-label="${_('Available Actions')}" role="menu">
% if can_unenroll:
<%include file='_reason_survey.html' args='course_overview=course_overview' />
<li class="actions-item" id="actions-item-unenroll-${dashboard_index}">
<% course_refund_url = reverse('course_run_refund_status', args=[unicode(course_overview.id)]) %>
% if not is_course_blocked:
......
lms/templates/dashboard/_reason_survey.html
<%page args="course_overview" expression_filter="h"/>
<%!
import urllib
from django.utils.translation import ugettext as _
%>
<div class="reasons_survey">
......@@ -21,17 +18,17 @@ from django.utils.translation import ugettext as _
</ul>
<button class="submit_reasons">${_('Submit')}</button>
</div>
</div>
<div class="slide2 hidden">
${_('Thank you for sharing your reasons for unenrolling.')}<br>
${_('You are unenrolled from')} ${course_overview.display_name_with_default}.
<div class="slide2 hidden">
${_('Thank you for sharing your reasons for unenrolling.')}<br>
${_('You are unenrolled from')} <span class="survey_course_name"></span>.
<div>
<a class="button survey_button return_to_dashboard">
${_('Return To Dashboard')}
</a>
<a class="button survey_button browse_courses">
${_('Browse Courses')}
</a>
<div>
<a class="button survey_button return_to_dashboard">
${_('Return To Dashboard')}
</a>
<a class="button survey_button browse_courses">
${_('Browse Courses')}
</a>
</div>
</div>
</div>
themes/edx.org/lms/templates/dashboard.html
......@@ -288,5 +288,6 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
<input name="submit" type="submit" value="${_("Unenroll")}" />
</div>
</form>
<%include file='dashboard/_reason_survey.html' />
</div>
</section>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment