Merge pull request #3585 from dragonfi/master

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

AUTHORS

@@ -143,3 +143,4 @@ Jonas Jelten <jelten@in.tum.de>
 Christine Lytwynec <clytwynec@edx.org>
 John Cox <johncox@google.com>
 Ben Weeks <benweeks@mit.edu>
+David Bodor <david.gabor.bodor@gmail.com>

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; }