From 17aeea37329ab8e687b1cb8f3416f980d7135a23 Mon Sep 17 00:00:00 2001 From: Jonathan Piacenti Date: Thu, 22 Oct 2015 21:27:00 -0500 Subject: [PATCH] Add instructional message to step blocks. --- .../public/css/problem-builder.css | 14 +++++++++ .../public/js/mentoring_with_steps.js | 2 ++ problem_builder/public/js/step.js | 9 +++++- problem_builder/step.py | 7 ++++- problem_builder/templates/html/step.html | 5 ++++ .../tests/integration/test_step_builder.py | 29 ++++++++++++++++--- .../step_builder_instruction.xml | 10 +++++++ 7 files changed, 70 insertions(+), 6 deletions(-) create mode 100644 problem_builder/tests/integration/xml_templates/step_builder_instruction.xml diff --git a/problem_builder/public/css/problem-builder.css b/problem_builder/public/css/problem-builder.css index 8417767a..2edc3fe6 100644 --- a/problem_builder/public/css/problem-builder.css +++ b/problem_builder/public/css/problem-builder.css @@ -229,3 +229,17 @@ .pb-clarification span.clarification i:hover { color: rgb(0, 159, 230); } + +.mentoring .sb-step { + position: relative; +} + +.mentoring .sb-step .sb-step-message { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 1.5em; + background-color: white; + box-shadow: 0 10px 20px #5C5C5C; +} \ No newline at end of file diff --git a/problem_builder/public/js/mentoring_with_steps.js b/problem_builder/public/js/mentoring_with_steps.js index 3c59b502..443065af 100644 --- a/problem_builder/public/js/mentoring_with_steps.js +++ b/problem_builder/public/js/mentoring_with_steps.js @@ -22,6 +22,7 @@ function MentoringWithStepsBlock(runtime, element) { var activeStep = $('.mentoring', element).data('active-step'); var reviewTipsTemplate = _.template($('#xblock-review-tips-template').html()); // Tips about specific questions the user got wrong var attemptsTemplate = _.template($('#xblock-attempts-template').html()); + var message = $('.sb-step-message', element); var checkmark, submitDOM, nextDOM, reviewDOM, tryAgainDOM, gradeDOM, attemptsDOM, reviewTipsDOM, reviewLinkDOM, submitXHR; @@ -183,6 +184,7 @@ function MentoringWithStepsBlock(runtime, element) { hideReviewStep(); attemptsDOM.html(''); reviewTipsDOM.empty().hide(); + message.hide(); } function updateNextLabel() { diff --git a/problem_builder/public/js/step.js b/problem_builder/public/js/step.js index 06c2ffb8..430a40dd 100644 --- a/problem_builder/public/js/step.js +++ b/problem_builder/public/js/step.js @@ -10,7 +10,8 @@ function MentoringStepBlock(runtime, element) { } } - var submitXHR, resultsXHR; + var submitXHR, resultsXHR, + message = $(element).find('.sb-step-message'); function callIfExists(obj, fn) { if (typeof obj !== 'undefined' && typeof obj[fn] == 'function') { @@ -59,6 +60,12 @@ function MentoringStepBlock(runtime, element) { submitXHR = $.post(handlerUrl, JSON.stringify(data)) .success(function(response) { resultHandler(response); + if (message.length) { + message.fadeIn(); + $(document).click(function() { + message.fadeOut(); + }); + } }); }, diff --git a/problem_builder/step.py b/problem_builder/step.py index 9372f63b..bbec3b01 100644 --- a/problem_builder/step.py +++ b/problem_builder/step.py @@ -107,7 +107,12 @@ class MentoringStepBlock( default=_("Next Step") ) - editable_fields = ('display_name', 'show_title', 'next_button_label') + message = String( + display_name=_("Message"), + help=_("Feedback or instructional message which pops up after submitting."), + ) + + editable_fields = ('display_name', 'show_title', 'next_button_label', 'message') @lazy def siblings(self): diff --git a/problem_builder/templates/html/step.html b/problem_builder/templates/html/step.html index 096dd0d7..54bab608 100644 --- a/problem_builder/templates/html/step.html +++ b/problem_builder/templates/html/step.html @@ -14,4 +14,9 @@

{% for child_content in child_contents %} {{ child_content|safe }} {% endfor %} + {% if self.message %} + + {% endif %} diff --git a/problem_builder/tests/integration/test_step_builder.py b/problem_builder/tests/integration/test_step_builder.py index 53d9009d..2a5f9d32 100644 --- a/problem_builder/tests/integration/test_step_builder.py +++ b/problem_builder/tests/integration/test_step_builder.py @@ -81,7 +81,9 @@ def setUp(self): runtime_patcher.start() self.addCleanup(runtime_patcher.stop) - def freeform_answer(self, number, step_builder, controls, text_input, result, saved_value="", last=False): + def freeform_answer( + self, number, step_builder, controls, text_input, result, saved_value="", hold=False, last=False + ): self.expect_question_visible(number, step_builder) answer = step_builder.find_element_by_css_selector("textarea.answer.editable") @@ -92,7 +94,11 @@ def freeform_answer(self, number, step_builder, controls, text_input, result, sa self.assertEquals(saved_value, answer.get_attribute("value")) if not saved_value: self.assert_disabled(controls.submit) - self.assert_disabled(controls.next_question) + + if last: + self.assert_disabled(controls.review) + else: + self.assert_disabled(controls.next_question) answer.clear() answer.send_keys(text_input) @@ -100,14 +106,17 @@ def freeform_answer(self, number, step_builder, controls, text_input, result, sa self.assert_clickable(controls.submit) self.ending_controls(controls, last) - self.assert_hidden(controls.review) + if not last: + self.assert_hidden(controls.review) + self.assert_hidden(controls.try_again) controls.submit.click() self.do_submit_wait(controls, last) self._assert_checkmark(step_builder, result) - self.do_post(controls, last) + if not hold: + self.do_post(controls, last) def single_choice_question(self, number, step_builder, controls, choice_name, result, last=False): question = self.expect_question_visible(number, step_builder) @@ -1121,3 +1130,15 @@ def test_plot_overlays(self): visible_overlays=[], hidden_overlays=[teacher_overlay, researchers_overlay, sheldon_overlay, yoda_overlay] ) + + def test_instruction_message(self): + step_builder, controls = self.load_assessment_scenario("step_builder_instruction.xml", {}) + # Step 1 + # Submit free-form answer, go to next step + self.freeform_answer(None, step_builder, controls, 'This is the answer', CORRECT, hold=True, last=True) + message = step_builder.find_element_by_css_selector('.sb-step-message') + self.wait_until_visible(message) + self.assertEqual(message.text, 'Hello!') + # Clicking in general should dismiss this message. + self.browser.execute_script("$(document).trigger('click')") + self.wait_until_hidden(message) diff --git a/problem_builder/tests/integration/xml_templates/step_builder_instruction.xml b/problem_builder/tests/integration/xml_templates/step_builder_instruction.xml new file mode 100644 index 00000000..65664d04 --- /dev/null +++ b/problem_builder/tests/integration/xml_templates/step_builder_instruction.xml @@ -0,0 +1,10 @@ + + + + + + + + +