Merge pull request #74 from open-craft/custom_next_text

Make 'next' button text customizable in Mentoring Steps.

problem_builder/public/js/mentoring_with_steps.js

@@ -175,8 +175,14 @@ function MentoringWithStepsBlock(runtime, element) {
         reviewTipsDOM.empty().hide();
     }
 
+    function updateNextLabel() {
+        var step = steps[activeStep];
+        nextDOM.attr('value', step.getStepLabel());
+    }
+
     function updateDisplay() {
         cleanAll();
+
         if (atReviewStep()) {
             // Tell supporting runtimes to enable navigation between units;
             // user is currently not in the middle of an attempt
@@ -188,6 +194,7 @@ function MentoringWithStepsBlock(runtime, element) {
         } else {
             showActiveStep();
             validateXBlock();
+            updateNextLabel();
             nextDOM.attr('disabled', 'disabled');
             if (isLastStep() && reviewStep) {
                 reviewDOM.attr('disabled', 'disabled');
@@ -243,6 +250,7 @@ function MentoringWithStepsBlock(runtime, element) {
         activeStep = stepIndex;
         cleanAll();
         showActiveStep();
+        updateNextLabel();
 
         if (isLastStep()) {
             reviewDOM.show();

problem_builder/public/js/step.js

@@ -81,6 +81,10 @@ function MentoringStepBlock(runtime, element) {
                     callIfExists(child, 'handleReview', result);
                 }
             }
+        },
+
+        getStepLabel: function() {
+            return $('.sb-step', element).data('next-button-label');
         }
 
     };

problem_builder/step.py

@@ -99,7 +99,13 @@ class MentoringStepBlock(
         scope=Scope.user_state
     )
 
-    editable_fields = ('display_name', 'show_title',)
+    next_button_label = String(
+        display_name=_("Next Button Label"),
+        help=_("Customize the text of the 'Next' button."),
+        default=_("Next Step")
+    )
+
+    editable_fields = ('display_name', 'show_title', 'next_button_label')
 
     @lazy
     def siblings(self):

problem_builder/templates/html/step.html

-<div class="sb-step">
+<div class="sb-step" data-next-button-label="{{ self.next_button_label }}">
   {% if show_title %}
   <div class="title">
     <h3>

problem_builder/tests/integration/test_step_builder.py

@@ -215,6 +215,21 @@ class StepBuilderTest(MentoringAssessmentBaseTest):
             None, step_builder, controls, extended_feedback=True, alternative_review=True
         )
 
+    def test_next_label(self):
+        step_builder, controls = self.load_assessment_scenario("step_builder_next.xml")
+        self.expect_question_visible(None, step_builder)
+        self.assertEqual(controls.next_question.get_attribute('value'), "Next Challenge")
+        self.freeform_answer(None, step_builder, controls, 'This is the answer', CORRECT)
+        self.expect_question_visible(None, step_builder)
+        self.assertEqual(controls.next_question.get_attribute('value'), "Next Item")
+        self.single_choice_question(None, step_builder, controls, 'Maybe not', INCORRECT)
+        self.rating_question(None, step_builder, controls, "5 - Extremely good", CORRECT, last=True)
+
+        # Check extended feedback loads the labels correctly.
+        step_builder.find_elements_by_css_selector('.correct-list li a')[0].click()
+        self.expect_question_visible(None, step_builder)
+        self.assertEqual(controls.next_question.get_attribute('value'), "Next Challenge")
+
     @data(
         {"max_attempts": 0, "extended_feedback": False},  # Unlimited attempts, no extended feedback
         {"max_attempts": 1, "extended_feedback": True},  # Limited attempts, extended feedback

problem_builder/tests/integration/xml_templates/step_builder_next.xml

+<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">
+    <pb-answer name="goal" question="What is your goal?" />
+  </sb-step>
+
+  <sb-step display_name="Second step" next_button_label="Next Item">
+    <pb-mcq name="mcq_1_1" question="Do you like this MCQ?" correct_choices='["yes"]'>
+      <pb-choice value="yes">Yes</pb-choice>
+        <pb-choice value="maybenot">Maybe not</pb-choice>
+        <pb-choice value="understand">I don't understand</pb-choice>
+
+        <pb-tip values='["yes"]'>Great!</pb-tip>
+        <pb-tip values='["maybenot"]'>Ah, damn.</pb-tip>
+        <pb-tip values='["understand"]'><div id="test-custom-html">Really?</div></pb-tip>
+    </pb-mcq>
+  </sb-step>
+
+  <sb-step display_name="Third step">
+    <pb-rating name="mcq_1_2" low="Not good at all" high="Extremely good" question="How much do you rate this MCQ?" correct_choices='["4","5"]'>
+        <pb-choice value="notwant">I don't want to rate it</pb-choice>
+        <pb-tip values='["4","5"]'>I love good grades.</pb-tip>
+        <pb-tip values='["1","2", "3"]'>Will do better next time...</pb-tip>
+        <pb-tip values='["notwant"]'>Your loss!</pb-tip>
+    </pb-rating>
+  </sb-step>
+
+  <sb-review-step />
+
+</step-builder>