diff --git a/common/static/js/capa/drag_and_drop/base_image.js b/common/static/js/capa/drag_and_drop/base_image.js
index 85f6006918..0c9c15fd2e 100644
--- a/common/static/js/capa/drag_and_drop/base_image.js
+++ b/common/static/js/capa/drag_and_drop/base_image.js
@@ -26,7 +26,7 @@ define(['logme'], function (logme) {
state.baseImageEl.attr(
'src',
- state.config.imageDir + '/' + state.config.base_image
+ state.config.base_image
);
state.baseImageEl.load(function () {
baseImageElContainer.css('width', this.width);
@@ -39,13 +39,11 @@ define(['logme'], function (logme) {
});
state.baseImageEl.error(function () {
logme(
- 'ERROR: Image "' + state.config.imageDir + '/' +
- state.config.base_image + '" was not found!'
+ 'ERROR: Image "' + state.config.base_image + '" was not found!'
);
baseImageElContainer.html(
'' +
- 'ERROR: Image "' + state.config.imageDir + '/' +
- state.config.base_image + '" was not found!' +
+ 'ERROR: Image "' + state.config.base_image + '" was not found!' +
''
);
baseImageElContainer.appendTo(state.containerEl);
diff --git a/common/static/js/capa/drag_and_drop/config_parser.js b/common/static/js/capa/drag_and_drop/config_parser.js
index 664324e0b9..2b58bc42f8 100644
--- a/common/static/js/capa/drag_and_drop/config_parser.js
+++ b/common/static/js/capa/drag_and_drop/config_parser.js
@@ -7,13 +7,12 @@
define(['logme'], function (logme) {
return configParser;
- function configParser(config, imageDir, state) {
+ function configParser(config, state) {
var returnStatus;
returnStatus = true;
state.config = {
- 'imageDir': '/static/' + imageDir + '/images',
'draggables': [],
'targets': [],
'base_image': ''
diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js
index 78fc47bf75..36ff7238d9 100644
--- a/common/static/js/capa/drag_and_drop/draggables.js
+++ b/common/static/js/capa/drag_and_drop/draggables.js
@@ -89,7 +89,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconEl = $('![]()
');
draggableObj.iconEl.attr(
'src',
- state.config.imageDir + '/' + obj.icon
+ obj.icon
);
draggableObj.iconEl.load(function () {
draggableObj.iconWidth = this.width;
@@ -358,11 +358,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// the input with the user's answer (X-Y position of the draggable,
// or the ID of the target where it landed.
function checkLandingElement() {
- var offsetIE, targetFound;
+ var positionIE, targetFound;
mousePressed = false;
-
- offsetIE = draggableObj.iconEl.position();
+ positionIE = draggableObj.iconEl.position();
if (state.individualTargets === true) {
targetFound = false;
@@ -378,20 +377,15 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.numDraggablesInSlider += 1;
}
} else {
- logme(
- 'baseImageEl.width = ' + state.baseImageEl.width() + '; ' +
- 'baseImageEl.height = ' + state.baseImageEl.height()
- );
-
if (
- (offsetIE.left < 0) ||
+ (positionIE.left < 0) ||
(
- offsetIE.left + draggableObj.iconWidth >
+ positionIE.left + draggableObj.iconWidth >
state.baseImageEl.width()
) ||
- (offsetIE.top < 0) ||
+ (positionIE.top < 0) ||
(
- offsetIE.top + draggableObj.iconHeight >
+ positionIE.top + draggableObj.iconHeight >
state.baseImageEl.height()
)
) {
@@ -405,9 +399,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
correctZIndexes();
draggableObj.x =
- offsetIE.left + draggableObj.iconWidth * 0.5;
+ positionIE.left + draggableObj.iconWidth * 0.5;
draggableObj.y =
- offsetIE.top + draggableObj.iconHeight * 0.5;
+ positionIE.top + draggableObj.iconHeight * 0.5;
}
}
@@ -432,41 +426,26 @@ define(['logme', 'update_input'], function (logme, updateInput) {
}
}
+ //
// Determine if a draggable, after it was relased, ends up on a
// target. We do this by iterating over all of the targets, and
// for each one we check whether the draggable's center is
// within the target's dimensions.
+ //
+ // positionIE is the object as returned by
+ //
+ // draggableObj.iconEl.position()
+ //
function checkIfOnTarget() {
var c1, target;
for (c1 = 0; c1 < state.targets.length; c1 += 1) {
target = state.targets[c1];
- if (
- offsetIE.top + draggableObj.iconHeight * 0.5 <
- target.offset.top
- ) {
- continue;
- }
- if (
- offsetIE.top + draggableObj.iconHeight * 0.5 >
- target.offset.top + target.h
- ) {
- continue;
- }
- if (
- offsetIE.left + draggableObj.iconWidth * 0.5 <
- target.offset.left
- ) {
- continue;
- }
- if (
- offsetIE.left + draggableObj.iconWidth * 0.5 >
- target.offset.left + target.w
- ) {
- continue;
- }
-
+ // If only one draggable per target is allowed, and
+ // the current target already has a draggable on it
+ // (with an ID different from the one we are checking
+ // against), then go to next target.
if (
(state.config.one_per_target === true) &&
(target.draggable.length === 1) &&
@@ -475,6 +454,35 @@ define(['logme', 'update_input'], function (logme, updateInput) {
continue;
}
+ // Check if the draggable's center coordinate is within
+ // the target's dimensions. If not, go to next target.
+ if (
+ positionIE.top + draggableObj.iconHeight * 0.5 <
+ target.offset.top
+ ) {
+ continue;
+ }
+ if (
+ positionIE.top + draggableObj.iconHeight * 0.5 >
+ target.offset.top + target.h
+ ) {
+ continue;
+ }
+ if (
+ positionIE.left + draggableObj.iconWidth * 0.5 <
+ target.offset.left
+ ) {
+ continue;
+ }
+ if (
+ positionIE.left + draggableObj.iconWidth * 0.5 >
+ target.offset.left + target.w
+ ) {
+ continue;
+ }
+
+ // If we got here, then our draggable is on top of a
+ // target.
targetFound = true;
// If the draggable was moved from one target to
@@ -488,7 +496,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
removeObjIdFromTarget();
onTarget = target;
target.draggable.push(draggableObj.id);
- } else if (onTarget === null) {
+ }
+ // If the draggable was moved from the slider to a
+ // target, remember the target, and add ID to the
+ // target's draggables list.
+ else if (onTarget === null) {
onTarget = target;
target.draggable.push(draggableObj.id);
}
diff --git a/common/static/js/capa/drag_and_drop/main.js b/common/static/js/capa/drag_and_drop/main.js
index ec186066c1..24cc8cbdcb 100644
--- a/common/static/js/capa/drag_and_drop/main.js
+++ b/common/static/js/capa/drag_and_drop/main.js
@@ -17,7 +17,7 @@ define(
// $(value) - get the element of the entire problem
function processProblem(index, value) {
- var problemId, imageDir, config, state;
+ var problemId, config, state;
if ($(value).attr('data-problem-processed') === 'true') {
// This problem was already processed by us before, so we will
@@ -43,16 +43,9 @@ define(
return;
}
- imageDir = $(value).attr('data-course-folder');
- if (typeof imageDir !== 'string') {
- logme('ERROR: Could not find the name of the image directory.');
-
- return;
- }
-
state = State(problemId);
- if (configParser(config, imageDir, state) !== true) {
+ if (configParser(config, state) !== true) {
logme('ERROR: Could not make sense of the JSON configuration options.');
return;