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 @@
${msg|n}
-
+
${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; }