Add submit button and logic for enabling/disabling it based on validity

of current step (and its children).

problem_builder/public/js/mentoring_with_steps.js

@@ -4,7 +4,7 @@ function MentoringWithStepsBlock(runtime, element) {
         function(c) { return c.element.className.indexOf('pb-mentoring-step') > -1; }
     );
     var active_child = -1;
-    var nextDOM;
+    var submitDOM, nextDOM;
 
     function isLastChild() {
         return (active_child === steps.length-1);
@@ -22,6 +22,7 @@ function MentoringWithStepsBlock(runtime, element) {
         if (isLastChild()) {
             nextDOM.attr('disabled', 'disabled');
         }
+        validateXBlock();
     }
 
     function findNextChild() {
@@ -31,14 +32,45 @@ function MentoringWithStepsBlock(runtime, element) {
         $(child.element).show();
     }
 
-    function initXBlockView() {
+    function onChange() {
+        validateXBlock();
+    }
 
-        displayNextChild();
+    function validateXBlock() {
+        var is_valid = true;
+        var child = steps[active_child];
+        if (child) {
+            is_valid = child['validate']();
+        }
+        if (!is_valid) {
+            submitDOM.attr('disabled', 'disabled');
+        } else {
+            submitDOM.removeAttr('disabled');
+        }
+    }
+
+    function initSteps(options) {
+        for (var i=0; i < steps.length; i++) {
+            var step = steps[i];
+            step['initChildren'](options);
+        }
+    }
+
+    function initXBlockView() {
+        submitDOM = $(element).find('.submit .input-main');
+        submitDOM.show();
 
         nextDOM = $(element).find('.submit .input-next');
         nextDOM.bind('click', displayNextChild);
         nextDOM.removeAttr('disabled');
         nextDOM.show();
+
+        var options = {
+            onChange: onChange
+        };
+        initSteps(options);
+
+        displayNextChild();
     }
 
     initXBlockView();

problem_builder/public/js/step.js

+function MentoringStepBlock(runtime, element) {
+
+    var children = runtime.children(element);
+
+    function callIfExists(obj, fn) {
+        if (typeof obj !== 'undefined' && typeof obj[fn] == 'function') {
+            return obj[fn].apply(obj, Array.prototype.slice.call(arguments, 2));
+        } else {
+            return null;
+        }
+    }
+
+    return {
+
+        initChildren: function(options) {
+            for (var i=0; i < children.length; i++) {
+                var child = children[i];
+                callIfExists(child, 'init', options);
+            }
+        },
+
+        validate: function() {
+            var is_valid = true;
+            for (var i = 0; i < children.length; i++) {
+                var child = children[i];
+                if (child && child.name !== undefined) {
+                    var child_validation = callIfExists(child, 'validate');
+                    if (_.isBoolean(child_validation)) {
+                        is_valid = is_valid && child_validation;
+                    }
+                }
+            }
+            return is_valid;
+        }
+
+    };
+
+}

problem_builder/step.py

@@ -160,4 +160,7 @@ class MentoringStepBlock(
             'child_contents': child_contents,
         }))
 
+        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/step.js'))
+        fragment.initialize_js('MentoringStepBlock')
+
         return fragment

problem_builder/templates/html/mentoring_with_steps.html

@@ -10,6 +10,7 @@
   <div class="assessment-question-block">
     {{child_content|safe}}
     <div class="submit">
+      <input type="button" class="input-main" value="Submit" disabled="disabled" />
       <input type="button" class="input-next" value="Next Step" disabled="disabled" />
     </div>
   </div>