Spinners for inputs

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -112,6 +112,19 @@
     top: calc(50% - 16px);
 }
 
+.xblock--drag-and-drop .drag-container .option .numerical-input .spinner-wrapper {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin-right: 5px;
+    padding-top: 6px;
+    display: none;
+}
+
+.xblock--drag-and-drop .drag-container .option .numerical-input .spinner-wrapper {
+    color: #333;
+}
+
 .xblock--drag-and-drop .drag-container .option .numerical-input .input {
     display: inline-block;
     width: 144px;

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -191,6 +191,14 @@ function DragAndDropBlock(runtime, element, configuration) {
         });
     };
 
+    var showSpinner = function($item) {
+        $item.find('.spinner-wrapper').show();
+    };
+
+    var hideSpinner = function($item) {
+        $item.find('.spinner-wrapper').hide();
+    };
+
     var submitLocation = function(item_id, zone, x_percent, y_percent) {
         if (!zone) {
             return;
@@ -203,7 +211,7 @@ function DragAndDropBlock(runtime, element, configuration) {
             y_percent: y_percent,
         };
         var $item = $root.find(".option[data-value='"+item_id+"']");
-        $item.find('.spinner-wrapper').show();
+        showSpinner($item);
 
         $.post(url, JSON.stringify(data), 'json')
             .done(function(data){
@@ -218,10 +226,10 @@ function DragAndDropBlock(runtime, element, configuration) {
                     state.finished = true;
                     state.overall_feedback = data.overall_feedback;
                 }
-                $item.find('.spinner-wrapper').hide();
+                hideSpinner($item);
                 applyState();
             })
-            .fail(function (data) { $item.find('.spinner-wrapper').hide(); });
+            .fail(function (data) { hideSpinner($item); });
     };
 
     var submitInput = function(evt) {
@@ -236,13 +244,15 @@ function DragAndDropBlock(runtime, element, configuration) {
             return;
         }
 
+        showSpinner(input_div);
         state.items[item_id].input = input_value;
         state.items[item_id].submitting_input = true;
         applyState();
 
         var url = runtime.handlerUrl(element, 'do_attempt');
         var data = {val: item_id, input: input_value};
-        $.post(url, JSON.stringify(data), 'json').done(function(data) {
+        $.post(url, JSON.stringify(data), 'json')
+            .done(function(data) {
                 state.items[item_id].submitting_input = false;
                 state.items[item_id].correct_input = data.correct;
                 state.feedback = data.feedback;
@@ -250,8 +260,10 @@ function DragAndDropBlock(runtime, element, configuration) {
                     state.finished = true;
                     state.overall_feedback = data.overall_feedback;
                 }
+                hideSpinner(input_div);
                 applyState();
-        });
+            })
+            .fail(function(data) { hideSpinner(input_div); });
     };
 
     var closePopup = function(evt) {

drag_and_drop_v2/public/js/view.js

@@ -43,6 +43,7 @@
                                       style: {display: input.is_visible ? 'block' : 'none'}}, [
                 h('input.input', {type: 'text', value: input.value, disabled: input.has_value,
                                   focusHook: focus_hook}),
+                itemSpinnerTemplate(),
                 h('button.submit-input', {disabled: input.has_value}, gettext('ok'))
             ])
         );