Add instructional message to step blocks.

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;
+}

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() {

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();
+                        });
+                    }
                 });
         },
 

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

problem_builder/templates/html/step.html

@@ -14,4 +14,9 @@ <h3>
   {% for child_content in child_contents %}
     {{ child_content|safe }}
   {% endfor %}
+  {% if self.message %}
+      <div class="sb-step-message" style="display:none;">
+        <div class="sb-step-message-text">{{ self.message }}</div>
+      </div>
+  {% endif %}
 </div>

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,22 +94,29 @@ 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)
         self.assertEquals(text_input, answer.get_attribute("value"))
 
         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)

problem_builder/tests/integration/xml_templates/step_builder_instruction.xml

@@ -0,0 +1,10 @@
+<step-builder url_name="step-builder" display_name="Step Builder"
+              max_attempts="1" extended_feedback="True">
+
+  <sb-step display_name="First step" next_button_label="Next Challenge" message="Hello!">
+    <pb-answer name="goal" question="What is your goal?" />
+  </sb-step>
+
+  <sb-review-step />
+
+</step-builder>