diff --git a/common/lib/capa/capa/templates/matlabinput.html b/common/lib/capa/capa/templates/matlabinput.html
index 2b28f4cacf..63187f214b 100644
--- a/common/lib/capa/capa/templates/matlabinput.html
+++ b/common/lib/capa/capa/templates/matlabinput.html
@@ -39,7 +39,7 @@
+
${queue_msg|n}
@@ -55,13 +55,11 @@
if($(parent_elt).find('.capa_alert').length) {
$(parent_elt).find('.capa_alert').remove();
}
- var alert_elem = "
" + msg + "
";
- alert_elem = $(alert_elem).addClass('capa_alert');
+ var alert_elem = $("
" + msg + "
");
+ 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();
+ $.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);
}
}
- 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);
- }
- }
-
// save the answer
$.postWithPrefix(url + '/problem_save', answer, save_callback);
-
}
$('#plot_${id}').click(plot);
-
});
diff --git a/lms/static/sass/base/_animations.scss b/lms/static/sass/base/_animations.scss
index 4c4620ca27..28d5d770da 100644
--- a/lms/static/sass/base/_animations.scss
+++ b/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; }