Added ability to define targets on the target container. Work in progress. Part 6.

common/lib/capa/capa/inputtypes.py

@@ -845,7 +845,7 @@ class DragAndDropInput(InputTypeBase):
         to_js['target_container'] = Attribute('img').parse_from_xml(self.xml)
         to_js['target_outline'] = Attribute('target_outline',
                                         default="False").parse_from_xml(self.xml)
-        to_js['one_per_garget'] = Attribute('one_per_target',
+        to_js['one_per_target'] = Attribute('one_per_target',
                                         default="True").parse_from_xml(self.xml)
         to_js['draggable'] = [parse(draggable, 'draggable') for draggable in
                                                 self.xml.iterchildren('draggable')]

common/static/js/capa/drag_and_drop/config_parser.js

@@ -15,7 +15,8 @@ define(['logme'], function (logme) {
         state.config = {
             'imageDir': '/static/' + imageDir + '/images',
             'draggable': [],
-            'target': ''
+            'targets': [],
+            'target_container': ''
         };
 
         if ($.isArray(config.draggable) === true) {
@@ -39,30 +40,108 @@ define(['logme'], function (logme) {
         if (typeof config.target_container === 'string') {
             state.config.target_container = config.target_container;
         } else {
-            logme('ERROR: Property config.target is not of type "string".');
+            logme('ERROR: Property config.target_container is not of type "string".');
+            returnStatus = false;
+        }
+
+        if ($.isArray(config.targets) === true) {
+            (function (i) {
+                while (i < config.targets.length) {
+                    if (processTarget(config.targets[i]) !== true) {
+                        returnStatus = false;
+                    }
+                    i += 1;
+                }
+            }(0));
+        } else if ($.isPlainObject(config.targets) === true) {
+            if (processTarget(config.targets) !== true) {
+                returnStatus = false;
+            }
+        } else if (typeof config.targets !== 'undefined') {
+            logme('ERROR: Property config.targets is not of a supported type.');
+            returnStatus = false;
+        }
+
+        if (typeof config.one_per_target === 'string') {
+            if (config.one_per_target.toLowerCase() === 'true') {
+                state.config.one_per_target = true;
+            } else if (config.one_per_target.toLowerCase() === 'false') {
+                state.config.one_per_target = false;
+            } else {
+                logme('ERROR: Property config.one_per_target can either be "true", or "false".');
+                returnStatus = false;
+            }
+        } else if (typeof config.one_per_target !== 'undefined') {
+            logme('ERROR: Property config.one_per_target is not of a supported type.');
+            returnStatus = false;
+        }
+
+        if (typeof config.target_outline === 'string') {
+            if (config.target_outline.toLowerCase() === 'true') {
+                state.config.target_outline = true;
+            } else if (config.target_outline.toLowerCase() === 'false') {
+                state.config.target_outline = false;
+            } else {
+                logme('ERROR: Property config.target_outline can either be "true", or "false".');
+                returnStatus = false;
+            }
+        } else if (typeof config.target_outline !== 'undefined') {
+            logme('ERROR: Property config.target_outline is not of a supported type.');
             returnStatus = false;
         }
 
         return true;
 
         function processDraggable(obj) {
-            if (typeof obj.icon !== 'string') {
-                logme('ERROR: Attribute "obj.icon" is not a string.');
+            if (!attrIsString(obj, 'id')) { return false; }
 
-                return false;
-            } else if (typeof obj.label !== 'string') {
-                logme('ERROR: Attribute "obj.label" is not a string.');
+            if (!attrIsString(obj, 'icon')) { return false; }
+            if (!attrIsString(obj, 'label')) { return false; }
+
+            state.config.draggable.push(obj);
+
+            true;
+        }
+
+        function processTarget(obj) {
+            if (!attrIsString(obj, 'id')) { return false; }
+
+            if (!attrIsInteger(obj, 'w')) { return false; }
+            if (!attrIsInteger(obj, 'h')) { return false; }
+
+            if (!attrIsInteger(obj, 'x')) { return false; }
+            if (!attrIsInteger(obj, 'y')) { return false; }
+
+            state.config.targets.push(obj);
+
+            true;
+
+        }
+
+        function attrIsString(obj, attr) {
+            if (typeof obj[attr] !== 'string') {
+                logme('ERROR: Attribute "obj.' + attr + '" is not a string.');
 
                 return false;
-            } else if (typeof obj.id !== 'string') {
-                logme('ERROR: Attribute "obj.id" is not a string.');
+            }
+
+            return true;
+        }
+
+        function attrIsInteger(obj, attr) {
+            var tempInt;
+
+            tempInt = parseInt(obj[attr], 10);
+
+            if (isFinite(tempInt) === false) {
+                logme('ERROR: Attribute "obj.' + attr + '" is not an integer.');
 
                 return false;
             }
 
-            state.config.draggable.push(obj);
+            obj[attr] = tempInt;
 
-            true;
+            return true;
         }
     }
 });

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

@@ -5,8 +5,8 @@
 (function (requirejs, require, define) {
 
 define(
-    ['logme', 'state', 'config_parser', 'container', 'target', 'scroller', 'draggables'],
-    function (logme, State, configParser, Container, Target, Scroller, Draggables) {
+    ['logme', 'state', 'config_parser', 'container', 'target_container', 'scroller', 'draggables', 'targets'],
+    function (logme, State, configParser, Container, TargetContainer, Scroller, Draggables, Targets) {
     return Main;
 
     function Main() {
@@ -57,9 +57,10 @@ define(
         }
 
         Container(state);
-        Target(state);
+        TargetContainer(state);
         Scroller(state);
         Draggables(state);
+        Targets(state);
 
         logme('config', config);
         logme('state', state);

common/static/js/capa/drag_and_drop/target.js → common/static/js/capa/drag_and_drop/target_container.js

@@ -5,9 +5,9 @@
 (function (requirejs, require, define) {
 
 define(['logme'], function (logme) {
-    return Target;
+    return TargetContainer;
 
-    function Target(state) {
+    function TargetContainer(state) {
         var targetImgSrc, targetElContainer, mouseMoveDiv;
 
         targetImgSrc = state.config.imageDir + '/' + state.config.target_container;
@@ -15,6 +15,7 @@ define(['logme'], function (logme) {
         targetElContainer = $(
             '<div ' +
                 'style=" ' +
+                    'position: relative; ' +
                     'text-align: center; ' +
                 '" ' +
             '></div>'
@@ -27,6 +28,17 @@ define(['logme'], function (logme) {
         );
         state.targetEl.appendTo(targetElContainer);
 
+        state.targetEl_loaded = false;
+
+        $("<img/>") // Make in memory copy of image to avoid css issues.
+            .attr("src", state.targetEl.attr("src"))
+            .load(function() {
+                state.targetEl_height = this.height;
+                state.targetEl_width = this.width;
+
+                state.targetEl_loaded = true;
+            });
+
         state.targetEl.mousemove(
             function (event) {
                 mouseMoveDiv.html(
@@ -48,8 +60,6 @@ define(['logme'], function (logme) {
         mouseMoveDiv.appendTo(targetElContainer);
 
         targetElContainer.appendTo(state.containerEl);
-
-        state.targetElOffset = state.targetEl.offset();
     }
 });
 

common/static/js/capa/drag_and_drop/targets.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+//
+// See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
+(function (requirejs, require, define) {
+
+define(['logme'], function (logme) {
+    return Targets;
+
+    function Targets(state) {
+        (function (c1) {
+            while (c1 < state.config.targets.length) {
+                processTarget(state.config.targets[c1]);
+                c1 += 1;
+            }
+        }(0));
+
+        return;
+
+        function processTarget(obj) {
+            var targetElOffset, tEl, left, top;
+
+            if (state.targetEl_loaded === false) {
+                window.setTimeout(function () {
+                    processTarget(obj);
+                }, 50);
+                return;
+            }
+
+            left = obj.x + 0.5 * (state.targetEl.parent().width() - state.targetEl_width);
+            top = obj.y
+
+            tEl = $(
+                '<div ' +
+                    'style=" ' +
+                        'display: block; ' +
+                        'position: absolute; ' +
+                        'width: ' + obj.w + 'px; ' +
+                        'height: ' + obj.h + 'px; ' +
+                        'top: ' + top + 'px; ' +
+                        'left: ' + left + 'px; ' +
+                        'border: 1px solid black; ' +
+                    '" ' +
+                    'data-target-id="' + obj.id + '" ' +
+                '></div>'
+            );
+
+            tEl.appendTo(state.targetEl.parent());
+        }
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)