Fix #3347: "Run Code" reloads page in Matlab Problem

Instead of refreshing only the necessary parts,
"Run Code" reloads the whole page.

This commit fixes this behaviour, by refreshing the
specific elements belonging to the Problem instead.

Also tidies up indentation.

common/lib/capa/capa/templates/matlabinput.html

@@ -39,7 +39,7 @@
   <div class="external-grader-message" aria-live="polite">
     ${msg|n}
   </div>
-  <div class="external-grader-message" aria-live="polite">
+  <div class="external-grader-message ungraded-matlab-result" aria-live="polite">
     ${queue_msg|n}
   </div>
 
@@ -55,13 +55,11 @@
           if($(parent_elt).find('.capa_alert').length) {
               $(parent_elt).find('.capa_alert').remove();
           }
-          var alert_elem = "<div>" + msg + "</div>";
-          alert_elem = $(alert_elem).addClass('capa_alert');
+          var alert_elem = $("<div>" + msg + "</div>");
+          alert_elem.addClass('capa_alert').addClass('is-fading-in');
           $(parent_elt).find('.action').after(alert_elem);
-          $(parent_elt).find('.capa_alert').css({opacity: 0}).animate({opacity: 1}, 700);
       }
 
-
       // hook up the plot button
       var plot = function(event) {
           var problem_elt = $(event.target).closest('.problems-wrapper');
@@ -72,7 +70,7 @@
           // since there could be multiple codemirror instances on the page,
           // save all of them.
           $('.CodeMirror').each(function(i, el){
-            el.CodeMirror.save();
+              el.CodeMirror.save();
           });
           var input = $("#input_${id}");
 
@@ -81,33 +79,39 @@
 
           answer = input.serialize();
 
-          // setup callback for after we send information to plot
+          // a chain of callbacks, each querying the server on success of the previous one
+
+          var get_callback = function(response) {
+              var new_result_elem = $(response.html).find(".ungraded-matlab-result");
+              new_result_elem.addClass("is-fading-in");
+              result_elem = $(problem_elt).find(".ungraded-matlab-result");
+              result_elem.replaceWith(new_result_elem);
+              console.log(response.html);
+          }
+
           var plot_callback = function(response) {
               if(response.success) {
-                  window.location.reload();
-              }
-              else {
+                  $.postWithPrefix(url + "/problem_get", get_callback);
+              } else {
                   gentle_alert(problem_elt, response.message);
               }
           }
 
           var save_callback = function(response) {
-                  if(response.success) {
-                      // send information to the problem's plot functionality
-                      Problem.inputAjax(url, input_id, 'plot',
-                        {'submission': submission}, plot_callback);
-                  }
-                  else {
-                      gentle_alert(problem_elt, response.message);
-                  }
+              if(response.success) {
+                  // send information to the problem's plot functionality
+                  Problem.inputAjax(url, input_id, 'plot',
+                      {'submission': submission}, plot_callback);
+              }
+              else {
+                  gentle_alert(problem_elt, response.message);
+              }
           }
 
           // save the answer
           $.postWithPrefix(url + '/problem_save', answer, save_callback);
-
       }
       $('#plot_${id}').click(plot);
-
     });
   </script>
 </section>

lms/static/sass/base/_animations.scss

@@ -241,3 +241,23 @@
 @-webkit-keyframes video-appear { @include video-appear-keyframes; }
    @-moz-keyframes video-appear { @include video-appear-keyframes; }
         @keyframes video-appear { @include video-appear-keyframes; }
+
+// quick fade-in animation to get user attention
+//************************************************************************//
+
+.is-fading-in {
+  @include animation(fade-in-animation 0.8s);
+}
+
+@mixin fade-in-keyframes {
+  0% {
+    opacity: 0.0;
+  }
+  100% {
+    opacity: 1.0;
+  }
+}
+
+@-webkit-keyframes fade-in-animation{ @include fade-in-keyframes; }
+   @-moz-keyframes fade-in-animation{ @include fade-in-keyframes; }
+        @keyframes fade-in-animation{ @include fade-in-keyframes; }