Fix matching draggable question

assets/css/scss/_exercise.scss

@@ -154,4 +154,24 @@
       }
     }
   }
+
+  &.type-19 {
+    @apply mb-4;
+
+    .drag_question {
+      @apply relative;
+
+      .window {
+        @apply border rounded-md relative;
+
+        &.window_left_question {
+          @apply text-right p-3 pr-5;
+        }
+
+        &.window_right_question {
+          @apply p-3 pl-5;
+        }
+      }
+    }
+  }
 }

assets/js/exercise.js

@@ -7,4 +7,5 @@ import '../../public/main/inc/lib/javascript/epiclock/javascript/jquery.dateform
 import '../../public/main/inc/lib/javascript/epiclock/javascript/jquery.epiclock.js';
 import '../../public/main/inc/lib/javascript/epiclock/renderers/minute/epiclock.minute.js';
 import './annotation'
-import '../../public/main/inc/lib/javascript/hotspot/js/hotspot.js';
+import '../../public/main/inc/lib/javascript/hotspot/js/hotspot.js';
+import '../../public/main/inc/lib/javascript/d3/jquery.xcolor.js';

public/main/inc/lib/exercise.lib.php

@@ -1302,18 +1302,16 @@ HTML;
                                     $s .= "
                                         <script>
                                             $(function() {
-                                                $(window).on('load', function() {
-                                                    jsPlumb.connect({
-                                                        source: 'window_$windowId',
-                                                        target: 'window_{$questionId}_{$selectedIndex}_answer',
-                                                        endpoint: ['Blank', {radius: 15}],
-                                                        anchors: ['RightMiddle', 'LeftMiddle'],
-                                                        paintStyle: {strokeStyle: '#8A8888', lineWidth: 8},
-                                                        connector: [
-                                                            MatchingDraggable.connectorType,
-                                                            {curvines: MatchingDraggable.curviness}
-                                                        ]
-                                                    });
+                                                MatchingDraggable.instances['$questionId'].connect({
+                                                    source: 'window_$windowId',
+                                                    target: 'window_{$questionId}_{$selectedIndex}_answer',
+                                                    endpoint: ['Dot', {radius: 12}],
+                                                    anchors: ['RightMiddle', 'LeftMiddle'],
+                                                    paintStyle: {stroke: '#8A8888', strokeWidth: 8},
+                                                    connector: [
+                                                        MatchingDraggable.connectorType,
+                                                        {curvines: MatchingDraggable.curviness}
+                                                    ]
                                                 });
                                             });
                                         </script>

public/main/template/default/exercise/submit.js.html.twig

@@ -87,7 +87,12 @@ var MatchingDraggable = {
     curviness: 0,
     connectorType: 'Straight',
     initialized: false,
+    instances: {},
     init: function (questionId) {
+        var instance = jsPlumb.getInstance();
+
+        MatchingDraggable.instances[questionId] = instance;
+
         var windowQuestionSelector = '.window' + questionId + '_question',
             countConnections = $(windowQuestionSelector).length,
             colorArray = [],
@@ -101,25 +106,17 @@ var MatchingDraggable = {
             colorArrayDestination = $.xcolor.analogous("#51a351", 10);
         }
 
-        jsPlumb.importDefaults({
-            DragOptions: {cursor: 'pointer', zIndex: 2000},
-            PaintStyle: {strokeStyle: '#000'},
-            EndpointStyle: {strokeStyle: '#316b31'},
-            Endpoint: 'Rectangle',
-            Anchors: ['TopCenter', 'TopCenter']
-        });
+        var scope = questionId + "_scope";
 
         var exampleDropOptions = {
-            tolerance: 'touch',
-            hoverClass: 'dropHover',
-            activeClass: 'dragActive'
+            tolerance: 'touch'
         };
 
         var destinationEndPoint = {
             endpoint: ["Dot", {radius: 15}],
-            paintStyle: {fillStyle: MatchingDraggable.colorDestination},
+            paintStyle: {fill: MatchingDraggable.colorDestination},
             isSource: false,
-            connectorStyle: {strokeStyle: MatchingDraggable.colorDestination, lineWidth: 8},
+            connectorStyle: {stroke: MatchingDraggable.colorDestination, strokeWidth: 8},
             connector: [
                 MatchingDraggable.connectorType,
                 {curviness: MatchingDraggable.curviness}
@@ -127,9 +124,10 @@ var MatchingDraggable = {
             maxConnections: 1000,
             isTarget: true,
             dropOptions: exampleDropOptions,
+            scope: scope,
             beforeDrop: function (params) {
-                jsPlumb.select({source: params.sourceId}).each(function (connection) {
-                    jsPlumb.detach(connection);
+                instance.select({source: params.sourceId}).each(function (connection) {
+                    instance.detach(connection);
                 });
 
                 var selectId = params.sourceId + "_select";
@@ -146,65 +144,53 @@ var MatchingDraggable = {
             }
         };
 
-        var count = 0;
-        var sourceDestinationArray = [];
+        var sourceEndPoint = {
+            endpoint: [
+                "Dot",
+                {radius: 15}
+            ],
+            paintStyle: {
+                fill: MatchingDraggable.colorDestination
+            },
+            isSource: true,
+            connectorStyle: {
+                stroke: "#8a8888",
+                strokeWidth: 8
+            },
+            connector: [
+                MatchingDraggable.connectorType,
+                {curviness: MatchingDraggable.curviness}
+            ],
+            maxConnections: 1,
+            isTarget: false,
+            dropOptions: exampleDropOptions,
+            scope: scope
+        };
 
         $(windowQuestionSelector).each(function (index) {
             var windowId = $(this).attr("id");
-            var scope = windowId + "scope";
-            var destinationColor = colorArray[count].getHex();
-
-            var sourceEndPoint = {
-                endpoint: [
-                    "Dot",
-                    {radius: 15}
-                ],
-                paintStyle: {
-                    fillStyle: destinationColor
-                },
-                isSource: true,
-                connectorStyle: {
-                    strokeStyle: "#8a8888",
-                    lineWidth: 8
-                },
-                connector: [
-                    MatchingDraggable.connectorType,
-                    {curviness: MatchingDraggable.curviness}
-                ],
-                maxConnections: 1,
-                isTarget: false,
-                dropOptions: exampleDropOptions,
-                scope: scope
-            };
-
-            sourceDestinationArray[count + 1] = sourceEndPoint;
-
-            count++;
+            sourceEndPoint.paintStyle.fill = colorArray[index].getHex();
 
-            jsPlumb.addEndpoint(
+            instance.addEndpoint(
                 windowId,
                 {
                     anchor: ['RightMiddle', 'RightMiddle', 'RightMiddle', 'RightMiddle']
                 },
                 sourceEndPoint
             );
+        });
 
-            var destinationCount = 0;
-
-            $(windowQuestionSelector).each(function (index) {
-                var windowDestinationId = $(this).attr("id");
-                destinationEndPoint.scope = scope;
-                destinationEndPoint.paintStyle.fillStyle = colorArrayDestination[destinationCount].getHex();
-                destinationCount++;
-
-                jsPlumb.addEndpoint(
-                    windowDestinationId + "_answer",
-                    {
-                        anchors: ['LeftMiddle', 'LeftMiddle', 'LeftMiddle', 'LeftMiddle']
-                    },
-                    destinationEndPoint
-                );
-            });
+        $(windowQuestionSelector).each(function (index) {
+            var windowDestinationId = $(this).attr("id");
+            destinationEndPoint.paintStyle.fill = colorArrayDestination[index].getHex();
+
+            instance.addEndpoint(
+                windowDestinationId + "_answer",
+                {
+                    anchors: ['LeftMiddle', 'LeftMiddle', 'LeftMiddle', 'LeftMiddle']
+                },
+                destinationEndPoint
+            );
         });
 
         MatchingDraggable.attachBehaviour();
@@ -218,8 +204,6 @@ var MatchingDraggable = {
 
 jsPlumb.ready(function () {
     if ($(".drag_question").length > 0) {
-        MatchingDraggable.init();
-
         $(document).scroll(function () {
             jsPlumb.repaintEverything();
         });