Client side drag and drop. Work in progress. Part 3.

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

@@ -13,7 +13,7 @@ define(['logme'], function (logme) {
         returnStatus = true;
 
         state.config = {
-            'imageDir': '/static/' + imageDir + '/images/',
+            'imageDir': '/static/' + imageDir + '/images',
             'draggable': [],
             'target': ''
         };

common/static/js/capa/drag_and_drop/container.js

@@ -8,7 +8,17 @@ define(['logme'], function (logme) {
     return Container;
 
     function Container(state) {
+        state.containerEl = $(
+            '<div ' +
+                'style=" ' +
+                    'border: 1px solid black; ' +
+                    'overflow: hidden; ' +
+                    'clear: both; ' +
+                '" ' +
+            '></div>'
+        );
 
+        $('#inputtype_' + state.problemId).before(state.containerEl);
     }
 });
 

common/static/js/capa/drag_and_drop/draggables.js

@@ -4,11 +4,42 @@
 // 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 Draggables;
 
     function Draggables(state) {
-        state.draggables = 1;
+        (function (i) {
+            while (i < state.config.draggable.length) {
+                processDraggable(state.config.draggable[i]);
+                i += 1;
+            }
+        }(0));
+
+        function processDraggable(obj) {
+            var draggableContainerEl;
+
+            logme(obj);
+
+            draggableContainerEl = $(
+                '<div ' +
+                    'style=" ' +
+                        'width: 100px; ' +
+                        'height: 100px; ' +
+                        'display: inline; ' +
+                        'float: left; ' +
+                    '" ' +
+                    '></div>'
+            );
+
+            if (obj.icon.length > 0) {
+                draggableContainerEl.append(
+                    $('<img src="' + state.config.imageDir + '/' + obj.icon + '" />')
+                );
+            }
+
+            draggableContainerEl.appendTo(state.sliderEl);
+        }
+
     }
 });
 

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

@@ -5,8 +5,8 @@
 (function (requirejs, require, define) {
 
 define(
-    ['logme', 'state', 'config_parser', 'target', 'draggables'],
-    function (logme, State, configParser, Target, Draggables) {
+    ['logme', 'state', 'config_parser', 'container', 'target', 'scroller', 'draggables'],
+    function (logme, State, configParser, Container, Target, Scroller, Draggables) {
     return Main;
 
     function Main() {
@@ -17,6 +17,14 @@ define(
     function processProblem(index, value) {
         var problemId, imageDir, config, state;
 
+        if ($(value).attr('data-problem-processed') === 'true') {
+            // This problem was already processed by us before, so we will
+            // skip it.
+
+            return;
+        }
+        $(value).attr('data-problem-processed', 'true');
+
         problemId = $(value).attr('data-plain-id');
         if (typeof problemId !== 'string') {
             logme('ERROR: Could not find the ID of the problem DOM element.');
@@ -24,7 +32,7 @@ define(
             return;
         }
 
-        imageDir = $(value).attr('data-plain-id');
+        imageDir = $(value).attr('data-course-folder');
         if (typeof imageDir !== 'string') {
             logme('ERROR: Could not find the name of the image directory.');
 
@@ -50,7 +58,7 @@ define(
 
         Container(state);
         Target(state);
-        // Scroller(state);
+        Scroller(state);
         Draggables(state);
 
         logme(state);

common/static/js/capa/drag_and_drop/scroller.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 Scroller;
+
+    function Scroller(state) {
+        var parentEl, moveLeftEl, showEl, moveRightEL,
+            moveRightEl_leftMargin;
+
+        parentEl = $(
+            '<div ' +
+                'style=" ' +
+                    'width: 95%; ' +
+                    'height: 100px; ' +
+                    'border: 1px solid black; ' +
+                    'margin-left: auto; ' +
+                    'margin-right: auto; ' +
+                '" ' +
+            '></div>'
+        );
+
+        moveLeftEl = $(
+            '<div ' +
+                'style=" ' +
+                    'width: 6%; ' +
+                    'height: 100px; ' +
+                    'display: inline; ' +
+                    'float: left; ' +
+                    'background: url(\'/static/images/arrow-left.png\') center center no-repeat; ' +
+                '" ' +
+            '></div>'
+        );
+        moveLeftEl.appendTo(parentEl);
+
+        moveLeftEl.click(function () {
+            state.showElLeftMargin -= 100;
+            state.sliderEl.animate({
+                'margin-left': state.showElLeftMargin + 'px'
+            });
+        });
+
+        showEl = $(
+            '<div ' +
+                'style=" ' +
+                    'width: 88%; ' +
+                    'height: 100px; ' +
+                    'overflow: hidden; ' +
+                    'display: inline; ' +
+                    'float: left; ' +
+                '" ' +
+            '></div>'
+        );
+        showEl.appendTo(parentEl);
+
+        state.showElLeftMargin = 0;
+
+        state.sliderEl = $(
+            '<div ' +
+                'style=" ' +
+                    'width: 800px; ' +
+                    'height: 100px; ' +
+                '" ' +
+            '></div>'
+        );
+        state.sliderEl.appendTo(showEl);
+
+        moveRightEl = $(
+            '<div ' +
+                'style=" ' +
+                    'width: 6%; ' +
+                    'height: 100px; ' +
+                    'display: inline; ' +
+                    'float: left; ' +
+                    'background: url(\'/static/images/arrow-right.png\') center center no-repeat; ' +
+                '" ' +
+            '></div>'
+        );
+        moveRightEl.appendTo(parentEl);
+
+        moveRightEl.click(function () {
+            state.showElLeftMargin += 100;
+            state.sliderEl.animate({
+                'margin-left': state.showElLeftMargin + 'px'
+            });
+        });
+
+        parentEl.appendTo(state.containerEl);
+    }
+});
+
+// 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/target.js

@@ -4,11 +4,50 @@
 // 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 Target;
 
     function Target(state) {
-        state.target = 1;
+        var targetImgSrc, targetElContainer, mouseMoveDiv;
+
+        targetImgSrc = state.config.imageDir + '/' + state.config.target;
+
+        targetElContainer = $(
+            '<div ' +
+                'style=" ' +
+                    'text-align: center; ' +
+                '" ' +
+            '></div>'
+        );
+
+        state.targetEl = $(
+            '<img ' +
+                'src="' + targetImgSrc + '" ' +
+            '/>'
+        );
+        state.targetEl.appendTo(targetElContainer);
+
+        state.targetEl.mousemove(
+            function (event) {
+                mouseMoveDiv.html(
+                    '[' + event.offsetX + ', ' + event.offsetY + ']'
+                );
+            }
+        );
+
+        mouseMoveDiv = $(
+            '<div ' +
+                'style=" ' +
+                    'clear: both; ' +
+                    'width: auto; ' +
+                    'height: 25px; ' +
+                    'text-align: center; ' +
+                '" ' +
+            '>[0, 0]</div>'
+        );
+        mouseMoveDiv.appendTo(targetElContainer);
+
+        targetElContainer.appendTo(state.containerEl);
     }
 });
 

rakefile

@@ -53,7 +53,7 @@ default_options = {
 
 task :predjango do
     sh("find . -type f -name *.pyc -delete")
-    sh('pip install -q --upgrade --no-deps -r local-requirements.txt')
+    # sh('pip install -q --upgrade --no-deps -r local-requirements.txt')
 end
 
 task :clean_test_files do