Move logic for displaying grade and review links to review step.

problem_builder/public/js/mentoring_with_steps.js

 function MentoringWithStepsBlock(runtime, element) {
 
-    var steps = runtime.children(element).filter(
+    var children = runtime.children(element);
+    var steps = children.filter(
         function(c) { return c.element.className.indexOf('sb-step') > -1; }
     );
+    var reviewStep;
+    for (var i = 0; i < children.length; i++) {
+        var child = children[i];
+        if (child.type === 'sb-review-step') {
+            reviewStep = child;
+            break;
+        }
+    }
+
     var activeStep = $('.mentoring', element).data('active-step');
-    var gradeTemplate = _.template($('#xblock-review-template').html());
-    var reviewStepsTemplate = _.template($('#xblock-review-steps-template').html());
     var reviewTipsTemplate = _.template($('#xblock-review-tips-template').html()); // Tips about specific questions the user got wrong
     var attemptsTemplate = _.template($('#xblock-attempts-template').html());
-    var reviewStep, checkmark, submitDOM, nextDOM, reviewDOM, tryAgainDOM,
+    var checkmark, submitDOM, nextDOM, reviewDOM, tryAgainDOM,
         assessmentMessageDOM, gradeDOM, attemptsDOM, reviewTipsDOM, reviewLinkDOM, submitXHR;
 
     function isLastStep() {
@@ -19,10 +27,6 @@ function MentoringWithStepsBlock(runtime, element) {
         return (activeStep === -1);
     }
 
-    function reviewStepPresent() {
-        return reviewStep.length > 0;
-    }
-
     function someAttemptsLeft() {
         var data = attemptsDOM.data();
         if (data.max_attempts === 0) { // Unlimited number of attempts available
@@ -97,7 +101,7 @@ function MentoringWithStepsBlock(runtime, element) {
         if (nextDOM.is(':visible')) { nextDOM.focus(); }
 
         if (atReviewStep()) {
-            if (reviewStepPresent()) {
+            if (reviewStep) {
                 reviewDOM.removeAttr('disabled');
             } else {
                 if (someAttemptsLeft()) {
@@ -160,7 +164,7 @@ function MentoringWithStepsBlock(runtime, element) {
             showActiveStep();
             validateXBlock();
             nextDOM.attr('disabled', 'disabled');
-            if (isLastStep() && reviewStepPresent()) {
+            if (isLastStep() && reviewStep) {
                 reviewDOM.attr('disabled', 'disabled');
                 reviewDOM.show();
             }
@@ -173,23 +177,13 @@ function MentoringWithStepsBlock(runtime, element) {
     }
 
     function showReviewStep() {
-        reviewStep.show();
-
         var data = gradeDOM.data();
 
-        // Links for reviewing individual questions (WIP)
-        var enableExtendedFeedback = (!someAttemptsLeft() && data.extended_feedback);
+        // Forward to review step to render grade data
+        var showExtendedFeedback = (!someAttemptsLeft() && data.extended_feedback);
+        reviewStep.renderGrade(gradeDOM, showExtendedFeedback);
 
-        _.extend(data, {
-            'runDetails': function(correctness) {
-                if (!enableExtendedFeedback) {
-                    return '';
-                }
-                var self = this;
-                return reviewStepsTemplate({'questions': self[correctness], 'correctness': correctness});
-            }
-        });
-        gradeDOM.html(gradeTemplate(data));
+        // Add click handler that takes care of showing associated step to step links
         $('a.step-link', element).on('click', getStepToReview);
 
         if (someAttemptsLeft()) {
@@ -221,7 +215,6 @@ function MentoringWithStepsBlock(runtime, element) {
     function jumpToReview(stepIndex) {
         activeStep = stepIndex;
         cleanAll();
-        reviewStep.hide();
         showActiveStep();
 
         if (isLastStep()) {
@@ -322,7 +315,6 @@ function MentoringWithStepsBlock(runtime, element) {
     function handleTryAgain(result) {
         activeStep = result.active_step;
         updateDisplay();
-        reviewStep.hide();
         tryAgainDOM.hide();
         submitDOM.show();
         if (! isLastStep()) {
@@ -342,9 +334,6 @@ function MentoringWithStepsBlock(runtime, element) {
     }
 
     function initXBlockView() {
-        reviewStep = $('.sb-review-step', element);
-        reviewStep.hide();
-
         checkmark = $('.assessment-checkmark', element);
 
         submitDOM = $(element).find('.submit .input-main');

problem_builder/public/js/review_step.js

+function ReviewStepBlock(runtime, element) {
+
+    var gradeTemplate = _.template($('#xblock-feedback-template').html());
+    var reviewStepsTemplate = _.template($('#xblock-step-links-template').html());
+
+    return {
+
+        'renderGrade': function(gradeDOM, showExtendedFeedback) {
+
+            var data = gradeDOM.data();
+
+            _.extend(data, {
+                'runDetails': function(correctness) {
+                    if (!showExtendedFeedback) {
+                        return '';
+                    }
+                    var self = this;
+                    return reviewStepsTemplate({'questions': self[correctness], 'correctness': correctness});
+                }
+            });
+
+            gradeDOM.html(gradeTemplate(data));
+
+        }
+
+    };
+
+}

problem_builder/step.py

@@ -260,4 +260,6 @@ class ReviewStepBlock(XBlockWithPreviewMixin, XBlock):
         fragment.add_content(loader.render_template('templates/html/review_step.html', {
             'self': self,
         }))
+        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/review_step.js'))
+        fragment.initialize_js('ReviewStepBlock')
         return fragment

problem_builder/templates/html/mentoring_review_templates.html

-<script type="text/template" id="xblock-review-template">
-  <div class="grade-result">
-    <h2>
-      <%= _.template(gettext("You scored {percent}% on this assessment."), {percent: score}, {interpolate: /\{(.+?)\}/g}) %>
-    </h2>
-    <hr/>
-
-    <span class="assessment-checkmark icon-2x checkmark-correct icon-ok fa fa-check"></span>
-    <div class="results-section">
-      <p>
-        <%= _.template(
-          ngettext(
-            "You answered 1 question correctly.",
-            "You answered {number_correct} questions correctly.",
-            correct_answer
-          ), {number_correct: correct_answer}, {interpolate: /\{(.+?)\}/g})
-        %>
-      </p>
-      <%= runDetails('correct') %>
-    </div>
-    <div class="clear"></div>
-    <span class="assessment-checkmark icon-2x checkmark-partially-correct icon-ok fa fa-check"></span>
-    <div class="results-section">
-      <p>
-        <%= _.template(
-          ngettext(
-            "You answered 1 question partially correctly.",
-            "You answered {number_partially_correct} questions partially correctly.",
-            partially_correct_answer
-          ), {number_partially_correct: partially_correct_answer}, {interpolate: /\{(.+?)\}/g})
-        %>
-      </p>
-      <%= runDetails('partial') %>
-    </div>
-    <div class="clear"></div>
-    <span class="assessment-checkmark icon-2x checkmark-incorrect icon-exclamation fa fa-exclamation"></span>
-    <div class="results-section">
-      <p>
-        <%= _.template(
-          ngettext(
-            "You answered 1 question incorrectly.",
-            "You answered {number_incorrect} questions incorrectly.",
-            incorrect_answer
-          ), {number_incorrect: incorrect_answer}, {interpolate: /\{(.+?)\}/g})
-        %>
-      </p>
-      <%= runDetails('incorrect') %>
-    </div>
-    <div class="clear"></div>
-    <hr/>
-  </div>
-</script>
-
-<!-- Template for extended feedback: Show extended feedback details when all attempts are used up. -->
-<script type="text/template" id="xblock-review-steps-template">
-<% var q, last_question; %>
-<ul class="review-list <%= correctness %>-list">
-    <% for (var question in questions) {{ q = questions[question]; last_question = question == questions.length - 1; %>
-    <li><a href="#" class="step-link" data-step="<%= q.step %>"><%= _.template(gettext("Question {number}"), {number: q.number}, {interpolate: /\{(.+?)\}/g}) %></a></li>
-    <% }} %>
-</ul>
-</script>
-
 <!-- Tips about specific questions the student got wrong. From pb-message[type=on-assessment-review-question] blocks -->
 <script type="text/template" id="xblock-review-tips-template">
 <p class="review-tips-intro"><%= gettext("You might consider reviewing the following items before your next assessment attempt:") %></p>

problem_builder/templates/html/review_step.html

 <div class="sb-review-step">
 
-  <h3>...</h3>
+  <script type="text/template" id="xblock-feedback-template">
+    <div class="grade-result">
+      <h2>
+        <%= _.template(gettext("You scored {percent}% on this assessment."), {percent: score}, {interpolate: /\{(.+?)\}/g}) %>
+      </h2>
+      <hr/>
+
+      <span class="assessment-checkmark icon-2x checkmark-correct icon-ok fa fa-check"></span>
+      <div class="results-section">
+        <p>
+          <%= _.template(
+            ngettext(
+              "You answered 1 question correctly.",
+              "You answered {number_correct} questions correctly.",
+              correct_answer
+            ), {number_correct: correct_answer}, {interpolate: /\{(.+?)\}/g})
+          %>
+        </p>
+        <%= runDetails('correct') %>
+      </div>
+      <div class="clear"></div>
+      <span class="assessment-checkmark icon-2x checkmark-partially-correct icon-ok fa fa-check"></span>
+      <div class="results-section">
+        <p>
+          <%= _.template(
+            ngettext(
+              "You answered 1 question partially correctly.",
+              "You answered {number_partially_correct} questions partially correctly.",
+              partially_correct_answer
+            ), {number_partially_correct: partially_correct_answer}, {interpolate: /\{(.+?)\}/g})
+          %>
+        </p>
+        <%= runDetails('partial') %>
+      </div>
+      <div class="clear"></div>
+      <span class="assessment-checkmark icon-2x checkmark-incorrect icon-exclamation fa fa-exclamation"></span>
+      <div class="results-section">
+        <p>
+          <%= _.template(
+            ngettext(
+              "You answered 1 question incorrectly.",
+              "You answered {number_incorrect} questions incorrectly.",
+              incorrect_answer
+            ), {number_incorrect: incorrect_answer}, {interpolate: /\{(.+?)\}/g})
+          %>
+        </p>
+        <%= runDetails('incorrect') %>
+      </div>
+      <div class="clear"></div>
+      <hr/>
+    </div>
+  </script>
+
+  <!-- Template for extended feedback: Show extended feedback details when all attempts are used up. -->
+  <script type="text/template" id="xblock-step-links-template">
+  <% var q, last_question; %>
+  <ul class="review-list <%= correctness %>-list">
+      <% for (var question in questions) {{ q = questions[question]; last_question = question == questions.length - 1; %>
+      <li><a href="#" class="step-link" data-step="<%= q.step %>"><%= _.template(gettext("Question {number}"), {number: q.number}, {interpolate: /\{(.+?)\}/g}) %></a></li>
+      <% }} %>
+  </ul>
+  </script>
+
+
 
 </div>