Competing Evidence: Fix issues from client QA

problem_builder/public/css/problem-builder.css

@@ -249,3 +249,14 @@
     background-color: white;
     box-shadow: 0 10px 20px #5C5C5C;
 }
+
+.mentoring .copyright {
+    color: #AAA;
+    clear: both;
+    font-size: 10px;
+    margin: 3em 0;
+}
+
+.mentoring .copyright a {
+    color: #69C0E8;
+}

problem_builder/public/js/mentoring_with_steps.js

@@ -158,21 +158,52 @@ function MentoringWithStepsBlock(runtime, element) {
             showActiveStep();
             validateXBlock();
             updateNextLabel();
+
+            // Reinstate default event handlers
+            nextDOM.on('click', updateDisplay);
+            reviewButtonDOM.on('click', showGrade);
+
             var step = steps[activeStep];
-            if (step.hasQuestion()) {
+            if (step.hasQuestion()) {  // Step includes one or more questions
                 nextDOM.attr('disabled', 'disabled');
-            } else {
+                submitDOM.show();
+                if (isLastStep()) {  // Step is last step
+                    nextDOM.hide();
+                    if (hasAReviewStep) {  // Step Builder includes review step
+                        reviewButtonDOM.attr('disabled', 'disabled');
+                        reviewButtonDOM.show();
+                    }
+                }
+            } else {  // Step does not include any questions
                 nextDOM.removeAttr('disabled');
-            }
-            if (isLastStep() && hasAReviewStep) {
-                if (step.hasQuestion()) {
-                    reviewButtonDOM.attr('disabled', 'disabled');
-                } else {
-                    reviewButtonDOM.removeAttr('disabled')
+                submitDOM.hide();
+                if (isLastStep()) {  // Step is last step
+                    // Remove default event handler from button that displays review.
+                    // This is necessary to make sure updateDisplay is not called twice
+                    // when user clicks this button next;
+                    // "submit" already does the right thing with respect to updating the display,
+                    // and calling updateDisplay twice causes issues with scrolling behavior:
+                    reviewButtonDOM.off();
+                    reviewButtonDOM.one('click', submit);
+                    reviewButtonDOM.removeAttr('disabled');
+                    nextDOM.hide();
+                    if (hasAReviewStep) {  // Step Builder includes review step
+                        reviewButtonDOM.show();
+                    }
+                } else {  // Step is not last step
+                    // Remove default event handler from button that displays next step.
+                    // This is necessary to make sure updateDisplay is not called twice
+                    // when user clicks this button next;
+                    // "submit" already does the right thing with respect to updating the display,
+                    // and calling updateDisplay twice causes issues with scrolling behavior:
+                    nextDOM.off();
+                    nextDOM.one('click', submit);
                 }
-                reviewButtonDOM.show();
             }
         }
+
+        // Scroll to top of this block
+        scrollIntoView();
     }
 
     function showReviewStep() {
@@ -189,7 +220,7 @@ function MentoringWithStepsBlock(runtime, element) {
     }
 
     function hideReviewStep() {
-        reviewStepDOM.hide()
+        reviewStepDOM.hide();
     }
 
     function getStepToReview(event) {
@@ -225,6 +256,9 @@ function MentoringWithStepsBlock(runtime, element) {
         reviewLinkDOM.show();
 
         getResults();
+
+        // Scroll to top of this block
+        scrollIntoView();
     }
 
     function showAttempts() {
@@ -236,8 +270,8 @@ function MentoringWithStepsBlock(runtime, element) {
 
     function showActiveStep() {
         var step = steps[activeStep];
-        step.updatePlots();
         $(step.element).show();
+        step.updateChildren();
     }
 
     function onChange() {
@@ -260,20 +294,6 @@ function MentoringWithStepsBlock(runtime, element) {
         } else {
             submitDOM.removeAttr('disabled');
         }
-        if (isLastStep() && step.hasQuestion()) {
-            nextDOM.hide();
-        } else if (isLastStep()) {
-            reviewButtonDOM.one('click', submit);
-            reviewButtonDOM.removeAttr('disabled');
-            nextDOM.hide()
-        } else if (!step.hasQuestion()) {
-            nextDOM.one('click', submit);
-        }
-        if (step.hasQuestion()) {
-            submitDOM.show();
-        } else {
-            submitDOM.hide();
-        }
     }
 
     function initSteps(options) {
@@ -323,6 +343,9 @@ function MentoringWithStepsBlock(runtime, element) {
         nextDOM.off();
         nextDOM.on('click', reviewNextStep);
         reviewLinkDOM.hide();
+
+        // Scroll to top of this block
+        scrollIntoView();
     }
 
     function reviewNextStep() {
@@ -363,6 +386,19 @@ function MentoringWithStepsBlock(runtime, element) {
         }
     }
 
+    function scrollIntoView() {
+        // This function can be called multiple times per step initialization.
+        // We must make sure that only one animation is queued or running at any given time,
+        // that's why we use a special animation queue and make sure to .stop() any running/queued
+        // animations before enqueueing a new one.
+        var rootBlock = $(element),
+            rootBlockOffset = rootBlock.offset().top,
+            queue = 'sb-scroll',
+            props = {scrollTop: rootBlockOffset},
+            opts = {duration: 500, queue: queue};
+        $('html, body').stop(queue, true).animate(props, opts).dequeue(queue);
+    }
+
     function initClickHandlers() {
         $(document).on("click", function(event, ui) {
             var target = $(event.target);

problem_builder/public/js/plot.js

@@ -57,11 +57,13 @@ function PlotBlock(runtime, element) {
     // Create axes
     var xAxis = d3.svg.axis()
         .scale(xScale)
-        .orient("bottom");
+        .orient("bottom")
+        .tickValues([]);
 
     var yAxis = d3.svg.axis()
         .scale(yScale)
-        .orient("left");
+        .orient("left")
+        .tickValues([]);
 
     // Create SVG group elements for axes and call the xAxis and yAxis functions
     var xAxisGroup = svgContainer.append("g")

problem_builder/public/js/step.js

@@ -1,14 +1,6 @@
 function MentoringStepBlock(runtime, element) {
 
     var children = runtime.children(element);
-    var plots = [];
-    for (var i in children) {
-        var child = children[i];
-        var blockType = $(child.element).data('block-type');
-        if (blockType === 'sb-plot') {
-            plots.push(child);
-        }
-    }
 
     var submitXHR, resultsXHR,
         message = $(element).find('.sb-step-message');
@@ -21,6 +13,14 @@ function MentoringStepBlock(runtime, element) {
         }
     }
 
+    function updateVideo(video) {
+        video.resizer.align();
+    }
+
+    function updatePlot(plot) {
+        plot.update();
+    }
+
     return {
 
         initChildren: function(options) {
@@ -103,13 +103,18 @@ function MentoringStepBlock(runtime, element) {
             return $('.sb-step', element).data('has-question')
         },
 
-        updatePlots: function() {
-            if (plots) {
-                for (var i in plots) {
-                    var plot = plots[i];
-                    plot.update();
+        updateChildren: function() {
+            children.forEach(function(child) {
+                var type = $(child.element).data('block-type');
+                switch (type) {
+                case 'video':
+                    updateVideo(child);
+                    break;
+                case 'sb-plot':
+                    updatePlot(child);
+                    break;
                 }
-            }
+            });
         }
 
     };

problem_builder/public/themes/apros.css

@@ -26,3 +26,7 @@
     margin-left: 1.8em;
     padding-left: 0;
 }
+
+.themed-xblock.mentoring .copyright {
+    display: none;
+}

problem_builder/templates/html/mentoring.html

@@ -56,4 +56,9 @@ <h2>{{ title }}</h2>
     <div class="assessment-review-tips"></div>
   </div>
   <div class="review-link"><a href="#">Review final grade</a></div>
+
+  <p class="copyright">
+    Copyright &copy; 2013&ndash;2015 OpenCraft, Harvard, edX, McKinsey, and The People's Science, released under the
+    <a target="_blank" href="https://github.com/open-craft/problem-builder/blob/master/LICENSE">APGLv3 license</a>
+  </p>
 </div>

problem_builder/templates/html/mentoring_with_steps.html

@@ -28,4 +28,9 @@ <h2>{{ title }}</h2>
 
   <div class="review-link"><a href="#">Review final grade</a></div>
 
+  <p class="copyright">
+    Copyright &copy; 2013&ndash;2015 OpenCraft, Harvard, edX, McKinsey, and The People's Science, released under the
+    <a target="_blank" href="https://github.com/open-craft/problem-builder/blob/master/LICENSE">APGLv3 license</a>
+  </p>
+
 </div>