diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss index 0585511220..7b8f9db0df 100644 --- a/common/lib/xmodule/xmodule/css/capa/display.scss +++ b/common/lib/xmodule/xmodule/css/capa/display.scss @@ -1042,6 +1042,10 @@ div.problem { @include notification-by-type($warning-color); } + &.general { + @include notification-by-type($general-color-accent); + } + &.problem-hint { border: 1px solid $uxpl-gray-background; border-radius: 6px; diff --git a/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee b/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee index a6b197646a..104d258d4f 100644 --- a/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee +++ b/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee @@ -438,25 +438,11 @@ describe 'Problem', -> expect($('#answer_1_1')).toHaveHtml 'One' expect($('#answer_1_2')).toHaveHtml 'Two' - it 'sends a message to the window SR element', -> - spyOn($, 'postWithPrefix').and.callFake (url, callback) -> callback(answers: {}) - @problem.show() - expect(window.SR.readText).toHaveBeenCalledWith 'Answers to this problem are now shown. Navigate through the problem to review it with answers inline.' - it 'disables the show answer button', -> spyOn($, 'postWithPrefix').and.callFake (url, callback) -> callback(answers: {}) @problem.show() expect(@problem.el.find('.show').attr('disabled')).toEqual('disabled') - it 'sends a SR message when answer is present', -> - - spyOn($, 'postWithPrefix').and.callFake (url, callback) -> - callback answers: - '1_1': 'answers' - @problem.show() - - expect(window.SR.readText).toHaveBeenCalledWith 'Answers to this problem are now shown. Navigate through the problem to review it with answers inline.' - describe 'radio text question', -> radio_text_xml='''
diff --git a/common/lib/xmodule/xmodule/js/src/capa/display.js b/common/lib/xmodule/xmodule/js/src/capa/display.js index c92c0c5f92..51b62293a5 100644 --- a/common/lib/xmodule/xmodule/js/src/capa/display.js +++ b/common/lib/xmodule/xmodule/js/src/capa/display.js @@ -174,6 +174,7 @@ this.showButton.click(this.show); this.saveButton = this.$('.action .save'); this.saveNotification = this.$('.notification-save'); + this.showAnswerNotification = this.$('.notification-show-answer'); this.saveButton.click(this.save); this.gentleAlertNotification = this.$('.notification-gentle-alert'); this.submitNotification = this.$('.notification-submit'); @@ -727,8 +728,9 @@ } that.el.find('.show').attr('disabled', 'disabled'); that.updateProgress(response); - window.SR.readText(gettext('Answers to this problem are now shown. Navigate through the problem to review it with answers inline.')); // eslint-disable-line max-len - that.scroll_to_problem_meta(); + that.clear_all_notifications(); + that.showAnswerNotification.show(); + that.focus_on_notification('show-answer'); }); }; @@ -736,6 +738,8 @@ this.submitNotification.remove(); this.gentleAlertNotification.hide(); this.saveNotification.hide(); + this.showAnswerNotification.hide(); + }; Problem.prototype.gentle_alert = function(msg) { @@ -848,6 +852,7 @@ if (bind) { $(textField).on('input', function() { that.saveNotification.hide(); + that.showAnswerNotification.hide(); that.submitAnswersAndSubmitButton(); }); } @@ -867,6 +872,7 @@ if (bind) { $(checkboxOrRadio).on('click', function() { that.saveNotification.hide(); + that.showAnswerNotification.hide(); that.submitAnswersAndSubmitButton(); }); } @@ -884,6 +890,7 @@ if (bind) { $(selectField).on('change', function() { that.saveNotification.hide(); + that.showAnswerNotification.hide(); that.submitAnswersAndSubmitButton(); }); } diff --git a/common/static/sass/edx-pattern-library-shims/base/_variables.scss b/common/static/sass/edx-pattern-library-shims/base/_variables.scss index 915d1129a3..9b62622f00 100644 --- a/common/static/sass/edx-pattern-library-shims/base/_variables.scss +++ b/common/static/sass/edx-pattern-library-shims/base/_variables.scss @@ -143,6 +143,8 @@ $error-color: rgb(203, 7, 18) !default; $success-color: rgb(0, 155, 0) !default; $warning-color: rgb(255, 192, 31) !default; $warning-color-accent: rgb(255, 252, 221) !default; +$general-color: $uxpl-blue-base !default;; +$general-color-accent: $uxpl-blue-base !default // CAPA correctness color to be consistent with Alert styles above diff --git a/common/test/acceptance/pages/lms/problem.py b/common/test/acceptance/pages/lms/problem.py index 443727311f..2f5a4ed0ff 100644 --- a/common/test/acceptance/pages/lms/problem.py +++ b/common/test/acceptance/pages/lms/problem.py @@ -200,6 +200,15 @@ class ProblemPage(PageObject): self.wait_for(lambda: self.q(css='.notification.warning.notification-gentle-alert').focused, 'Waiting for the focus to be on the gentle alert notification') + def wait_for_show_answer_notification(self): + """ + Wait for the show answer Notification to be present + """ + self.wait_for_element_visibility('.notification.general.notification-show-answer', + 'Waiting for Show Answer notification to be visible') + self.wait_for(lambda: self.q(css='.notification.general.notification-show-answer').focused, + 'Waiting for the focus to be on the show answer notification') + def is_gentle_alert_notification_visible(self): """ Is the Gentle Alert Notification visible? diff --git a/common/test/acceptance/tests/lms/test_problem_types.py b/common/test/acceptance/tests/lms/test_problem_types.py index aca5480ceb..d96639d197 100644 --- a/common/test/acceptance/tests/lms/test_problem_types.py +++ b/common/test/acceptance/tests/lms/test_problem_types.py @@ -278,7 +278,7 @@ class ProblemTypeTestMixin(ProblemTypeA11yTestMixin): And I should see the problem title is focused """ self.problem_page.click_show() - self.problem_page.wait_for_focus_on_problem_meta() + self.problem_page.wait_for_show_answer_notification() @attr(shard=7) def test_save_reaction(self): @@ -495,7 +495,7 @@ class CheckboxProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin): self.problem_page.click_show() self.assertTrue(self.problem_page.is_solution_tag_present()) self.assertTrue(self.problem_page.is_correct_choice_highlighted(correct_choices=[1, 3])) - self.problem_page.wait_for_focus_on_problem_meta() + self.problem_page.wait_for_show_answer_notification() class MultipleChoiceProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin): @@ -562,7 +562,7 @@ class MultipleChoiceProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin): self.assertTrue(self.problem_page.is_correct_choice_highlighted(correct_choices=[3])) # Finally, make sure that clicking Show Answer moved focus to the correct place. - self.problem_page.wait_for_focus_on_problem_meta() + self.problem_page.wait_for_show_answer_notification() class RadioProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin): diff --git a/lms/templates/problem.html b/lms/templates/problem.html index 0b915cedbf..cf01636f9c 100644 --- a/lms/templates/problem.html +++ b/lms/templates/problem.html @@ -106,4 +106,11 @@ from openedx.core.djangolib.markup import HTML notification_message=save_message, is_hidden=not has_saved_answers" /> + <%include file="problem_notifications.html" args=" + notification_type='general', + notification_icon='fa-info-circle', + notification_name='show-answer', + notification_message=_('Answers are displayed within the problem'), + is_hidden=True" + />