Fixed problem with smaller and larger base images. Refactoring. Cleaning of code.

common/static/js/capa/drag_and_drop/base_image.js

@@ -16,18 +16,26 @@ define(['logme'], function (logme) {
                 'style=" ' +
                     'position: relative; ' +
                     'margin-bottom: 25px; ' +
+                    'margin-left: auto; ' +
+                    'margin-right: auto; ' +
                 '" ' +
             '></div>'
         );
 
-        state.baseImageEl = $(
-            '<img ' +
-                'src="' + state.config.imageDir + '/' + state.config.base_image + '" ' +
-            '/>'
+        state.baseImageEl = $('<img />');
+        state.baseImageEl.attr(
+            'src',
+            state.config.imageDir + '/' + state.config.base_image
         );
-        state.baseImageEl.appendTo(baseImageElContainer);
+        state.baseImageEl.load(function () {
+            baseImageElContainer.css('width', this.width);
+            baseImageElContainer.css('height', this.height);
 
-        baseImageElContainer.appendTo(state.containerEl);
+            state.baseImageEl.appendTo(baseImageElContainer);
+            baseImageElContainer.appendTo(state.containerEl);
+
+            state.baseImageLoaded = true;
+        });
     }
 });
 

common/static/js/capa/drag_and_drop/main.js

@@ -60,13 +60,22 @@ define(
 
         Container(state);
         BaseImage(state);
-        Targets(state);
-        Scroller(state);
-        Draggables(state);
 
-        // Update the input element, checking first that it is not filled with
-        // an answer from the server.
-        updateInput(state, true);
+        (function addContent() {
+            if (state.baseImageLoaded !== true) {
+                setTimeout(addContent, 50);
+
+                return;
+            }
+
+            Targets(state);
+            Scroller(state);
+            Draggables(state);
+
+            // Update the input element, checking first that it is not filled with
+            // an answer from the server.
+            updateInput(state, true);
+        }());
     }
 });
 

common/static/js/capa/drag_and_drop/state.js

@@ -11,10 +11,7 @@ define([], function () {
         return {
             'problemId': problemId,
 
-            // Will indicate when all targetsand draggables have been loaded,
-            // processed, and postioned intially.
-            'targetsLoaded': false,
-            'draggablesLoaded': false,
+            'baseImageLoaded': false,
 
             'numDraggablesInSlider': 0
         };