Client-side Drag and Drop: work in progress. Part 2.

common/lib/capa/capa/inputtypes.py

@@ -822,7 +822,7 @@ class DragAndDropInput(InputTypeBase):
                 try:
                     dic[attr_name] = Attribute(attr_name).parse_from_xml(x)
                 except ValueError:
-                    dic[attr_name] = None
+                    dic[attr_name] = ""
             dic['name'] = dic['name'] or slugify(dic['label'])
             dic['label'] = dic['label'] or dic['name']
 

common/lib/capa/capa/templates/drag_and_drop_input.html

 <section id="inputtype_${id}" class="capa_inputtype" >
-    <div class="drag_and_drop_problem" id="drag_and_drop_div_${id}"
+    <div class="drag_and_drop_problem_div" id="drag_and_drop_div_${id}"
      data-plain-id="${id}" data-course-folder="${course_folder}">
     </div>
 
-    <div class="drag_and_drop_problem" id="drag_and_drop_json_${id}"
+    <div class="drag_and_drop_problem_json" id="drag_and_drop_json_${id}"
         style="display:none;">${drag_and_drop_json}</div>
 
     <div class="script_placeholder" data-src="/static/js/capa/drag_and_drop.js"></div>

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

@@ -4,11 +4,66 @@
 // See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
 (function (requirejs, require, define) {
 
-define([], function () {
+define(['logme'], function (logme) {
     return configParser;
 
-    function configParser(config, state) {
-        state.config = 1;
+    function configParser(config, imageDir, state) {
+        var returnStatus;
+
+        returnStatus = true;
+
+        state.config = {
+            'imageDir': '/static/' + imageDir + '/images/',
+            'draggable': [],
+            'target': ''
+        };
+
+        if ($.isArray(config.draggable) === true) {
+            (function (i) {
+                while (i < config.draggable.length) {
+                    if (processDraggable(config.draggable[i]) !== true) {
+                        returnStatus = false;
+                    }
+                    i += 1;
+                }
+            }(0));
+        } else if ($.isPlainObject(config.draggable) === true) {
+            if (processDraggable(config.draggable) !== true) {
+                returnStatus = false;
+            }
+        } else {
+            logme('ERROR: The type of config.draggable is no supported.');
+            returnStatus = false;
+        }
+
+        if (typeof config.target === 'string') {
+            state.config.target = config.target;
+        } else {
+            logme('ERROR: Property config.target is not of type "string".');
+            returnStatus = false;
+        }
+
+        return true;
+
+        function processDraggable(obj) {
+            if (typeof obj.icon !== 'string') {
+                logme('ERROR: Attribute "obj.icon" is not a string.');
+
+                return false;
+            } else if (typeof obj.label !== 'string') {
+                logme('ERROR: Attribute "obj.label" is not a string.');
+
+                return false;
+            } else if (typeof obj.name !== 'string') {
+                logme('ERROR: Attribute "obj.name" is not a string.');
+
+                return false;
+            }
+
+            state.config.draggable.push(obj);
+
+            true;
+        }
     }
 });
 

common/static/js/capa/drag_and_drop/container.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 Container;
+
+    function Container(state) {
+
+    }
+});
+
+// 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)

common/static/js/capa/drag_and_drop/logme.js

@@ -12,6 +12,8 @@ define([], function () {
     return logme;
 
     function logme() {
+        var i;
+
         if (
             (debugMode !== true) ||
             (typeof window.console === 'undefined')
@@ -19,12 +21,11 @@ define([], function () {
             return;
         }
 
-        (function (i) {
-            while (i < arguments.length) {
-                window.console.log(arguments[i]);
-                i += 1;
-            }
-        }(0);
+        i = 0;
+        while (i < arguments.length) {
+            window.console.log(arguments[i]);
+            i += 1;
+        }
     }
 });
 

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

@@ -6,26 +6,33 @@
 
 define(
     ['logme', 'state', 'config_parser', 'target', 'draggables'],
-    function (logme, State, configParser, Target, raggables) {
+    function (logme, State, configParser, Target, Draggables) {
     return Main;
 
     function Main() {
-        $('.drag_and_drop_problem').each(processProblem);
+        $('.drag_and_drop_problem_div').each(processProblem);
     }
 
     // $(value) - get the element of the entire problem
     function processProblem(index, value) {
-        var problemId, config, state;
+        var problemId, imageDir, config, state;
 
         problemId = $(value).attr('data-plain-id');
         if (typeof problemId !== 'string') {
-            logme('ERROR: Could not find a problem DOM element ID.');
+            logme('ERROR: Could not find the ID of the problem DOM element.');
+
+            return;
+        }
+
+        imageDir = $(value).attr('data-plain-id');
+        if (typeof imageDir !== 'string') {
+            logme('ERROR: Could not find the name of the image directory.');
 
             return;
         }
 
         try {
-            config = JSON.parse($(value).html());
+            config = JSON.parse($('#drag_and_drop_json_' + problemId).html());
         } catch (err) {
             logme('ERROR: Could not parse the JSON configuration options.');
             logme('Error message: "' + err.message + '".');
@@ -35,9 +42,13 @@ define(
 
         state = State(problemId);
 
-        configParser(config, state);
+        if (configParser(config, imageDir, state) !== true) {
+            logme('ERROR: Could not make sense of the JSON configuration options.');
+
+            return;
+        }
 
-        // Container(state);
+        Container(state);
         Target(state);
         // Scroller(state);
         Draggables(state);