Merge pull request #6 from dragonfi/tracking-logs

Tracking logs

drag_and_drop_v2/default_data.py

+default_data = {
+  "zones": [
+    {
+      "index": 1,
+      "width": 200,
+      "title": "Zone A",
+      "height": 100,
+      "x": "120",
+      "y": "200",
+      "id": "zone-1"
+    },
+    {
+      "index": 2,
+      "width": 200,
+      "title": "Zone B",
+      "height": 100,
+      "x": "120",
+      "y": "360",
+      "id": "zone-2"
+    }
+  ],
+  "items": [
+    {
+      "displayName": "A",
+      "feedback": {
+        "incorrect": "No, A does not belong here",
+        "correct": "Yes, it's an A"
+      },
+      "zone": "Zone A",
+      "backgroundImage": "",
+      "id": 0,
+      "size": {
+        "width": "190px",
+        "height": "auto"
+      }
+    },
+    {
+      "displayName": "B",
+      "feedback": {
+        "incorrect": "No, B does not belong here",
+        "correct": "Yes, it's a B"
+      },
+      "zone": "Zone B",
+      "backgroundImage": "",
+      "id": 1,
+      "size": {
+        "width": "190px",
+        "height": "auto"
+      }
+    },
+    {
+      "displayName": "X",
+      "feedback": {
+        "incorrect": "You silly, there are no zones for X",
+        "correct": ""
+      },
+      "zone": "none",
+      "backgroundImage": "",
+      "id": 2,
+      "size": {
+        "width": "100px",
+        "height": "100px"
+      }
+    },
+  ],
+  "state": {
+    "items": {},
+    "finished": True
+  },
+  "feedback": {
+    "start": "Intro Feed",
+    "finish": "Final Feed"
+  },
+}

drag_and_drop_v2/drag_and_drop_v2.py

@@ -14,6 +14,7 @@ from xblock.fields import Scope, String, Dict, Float
 from xblock.fragment import Fragment
 
 from .utils import render_template, load_resource
+from .default_data import default_data
 
 
 # Globals ###########################################################
@@ -52,15 +53,7 @@ class DragAndDropBlock(XBlock):
         display_name="Drag and Drop",
         help="JSON spec as generated by the builder",
         scope=Scope.content,
-        default={
-            'feedback': {
-                'start': '',
-                'finish': ''
-            },
-            'items': [],
-            'zones': [],
-            'targetImg': None
-        }
+        default=default_data
     )
 
     item_state = Dict(
@@ -173,13 +166,16 @@ class DragAndDropBlock(XBlock):
         item = next(i for i in self.data['items'] if i['id'] == attempt['val'])
         tot_items = sum(1 for i in self.data['items'] if i['zone'] != 'none')
 
+        final_feedback = None
+        is_correct = False
+
         if item['zone'] == attempt['zone']:
             self.item_state[item['id']] = (attempt['top'], attempt['left'])
 
+            is_correct = True
+
             if len(self.item_state) == tot_items:
                 final_feedback = self.data['feedback']['finish']
-            else:
-                final_feedback = None
 
             try:
                 self.runtime.publish(self, 'grade', {
@@ -191,16 +187,30 @@ class DragAndDropBlock(XBlock):
                 # so we have to figure that we're running in Studio for now
                 pass
 
-            return {
-                'correct': True,
-                'finished': len(self.item_state) == tot_items,
-                'final_feedback': final_feedback,
-                'feedback': item['feedback']['correct']
-            }
-        else:
-            return {
-                'correct': False,
-                'finished': len(self.item_state) == tot_items,
-                'final_feedback': None,
-                'feedback': item['feedback']['incorrect']
-            }
+        self.runtime.publish(self, 'xblock.drag-and-drop-v2.item.dropped', {
+            'item_id': item['id'],
+            'location': attempt['zone'],
+            'is_correct': is_correct
+        })
+
+        return {
+            'correct': is_correct,
+            'finished': len(self.item_state) == tot_items,
+            'final_feedback': final_feedback,
+            'feedback': item['feedback']['correct'] if is_correct else item['feedback']['incorrect']
+        }
+
+    @XBlock.json_handler
+    def publish_event(self, data, suffix=''):
+        try:
+            event_type = data.pop('event_type')
+        except KeyError as e:
+            return {'result': 'error', 'message': 'Missing event_type in JSON data'}
+
+        self.runtime.publish(self, event_type, data)
+        return {'result':'success'}
+
+    @staticmethod
+    def workbench_scenarios():
+        """A canned scenario for display in the workbench."""
+        return [("Drag-and-drop-v2 scenario", "<vertical_demo><drag-and-drop-v2/></vertical_demo>")]

drag_and_drop_v2/public/js/drag_and_drop.js

 function DragAndDropBlock(runtime, element) {
+    function publish_event(data) {
+      $.ajax({
+          type: "POST",
+          url: runtime.handlerUrl(element, 'publish_event'),
+          data: JSON.stringify(data)
+      });
+    }
+
     var dragAndDrop = (function($) {
         var _fn = {
 
@@ -86,11 +94,20 @@ function DragAndDropBlock(runtime, element) {
 
                     $(".close", _fn.$popup).on('click', function() {
                         _fn.$popup.hide();
+                        publish_event({
+                            event_type: 'xblock.drag-and-drop-v2.feedback.closed',
+                            content: _fn.$popup.find(".popup-content").text(),
+                            manually: true
+                        });
                     });
                 },
                 drag: {
                     start: function(event, ui) {
-                        $(event.currentTarget).removeClass('within-dropzone fade');
+                        target = $(event.currentTarget);
+                        target.removeClass('within-dropzone fade');
+
+                        var item_id = target.data("value");
+                        publish_event({event_type:'xblock.drag-and-drop-v2.item.picked-up', item_id:item_id});
                     },
 
                     stop: function(event, ui) {
@@ -220,6 +237,19 @@ function DragAndDropBlock(runtime, element) {
                 // Show a feedback popup
                 popup: function(str, boo) {
                     if (str === undefined || str === '') return;
+
+                    if (_fn.$popup.is(":visible")) {
+                        publish_event({
+                            event_type: "xblock.drag-and-drop-v2.feedback.closed",
+                            content: _fn.$popup.find(".popup-content").text(),
+                            manually: false
+                        });
+                    };
+                    publish_event({
+                        event_type: "xblock.drag-and-drop-v2.feedback.opened",
+                        content: str
+                    });
+
                     _fn.$popup.find(".popup-content").text(str);
                     return _fn.$popup.show();
                 }
@@ -238,4 +268,6 @@ function DragAndDropBlock(runtime, element) {
     }).done(function(data){
         dragAndDrop.init(data);
     });
+
+    publish_event({event_type:"xblock.drag-and-drop-v2.loaded"});
 }