Display one step block at a time and add basic functionality for

navigating to next step.

problem_builder/mentoring.py

@@ -865,16 +865,19 @@ class MentoringWithExplicitStepsBlock(BaseMentoringBlock, StudioContainerWithNes
                 fragment.add_frag_resources(child_fragment)
                 child_content += child_fragment.content
 
-        fragment.add_content(loader.render_template('templates/html/mentoring.html', {
+        fragment.add_content(loader.render_template('templates/html/mentoring_with_steps.html', {
             'self': self,
             'title': self.display_name,
             'show_title': self.show_title,
             'child_content': child_content,
         }))
         fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/problem-builder.css'))
+        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/mentoring_with_steps.js'))
 
         self.include_theme_files(fragment)
 
+        fragment.initialize_js('MentoringWithStepsBlock')
+
         return fragment
 
     @property

problem_builder/public/js/mentoring_with_steps.js

+function MentoringWithStepsBlock(runtime, element) {
+
+    var steps = runtime.children(element).filter(
+        function(c) { return c.element.className.indexOf('pb-mentoring-step') > -1; }
+    );
+    var active_child = -1;
+    var nextDOM;
+
+    function isLastChild() {
+        return (active_child === steps.length-1);
+    }
+
+    function hideAllSteps() {
+        for (var i=0; i < steps.length; i++) {
+            $(steps[i].element).hide();
+        }
+    }
+
+    function displayNextChild() {
+        hideAllSteps();
+        findNextChild();
+        if (isLastChild()) {
+            nextDOM.attr('disabled', 'disabled');
+        }
+    }
+
+    function findNextChild() {
+        // find the next real child block to display. HTMLBlock are always displayed
+        ++active_child;
+        var child = steps[active_child];
+        $(child.element).show();
+    }
+
+    function initXBlockView() {
+
+        displayNextChild();
+
+        nextDOM = $(element).find('.submit .input-next');
+        nextDOM.bind('click', displayNextChild);
+        nextDOM.removeAttr('disabled');
+        nextDOM.show();
+    }
+
+    initXBlockView();
+
+}

problem_builder/templates/html/mentoring_with_steps.html

+{% load i18n %}
+<div class="mentoring themed-xblock" data-step="{{ self.step }}">
+
+  {% if show_title and title %}
+  <div class="title">
+    <h2>{{ title }}</h2>
+  </div>
+  {% endif %}
+
+  <div class="assessment-question-block">
+    {{child_content|safe}}
+    <div class="submit">
+      <input type="button" class="input-next" value="Next Step" disabled="disabled" />
+    </div>
+  </div>
+
+</div>