Browse Source

Drag and drop draft using jplumb see #5959

Julio Montoya 12 years ago
parent
commit
6ff2df4a85
3 changed files with 183 additions and 8 deletions
  1. 41 8
      main/exercice/exercise.lib.php
  2. 141 0
      main/exercice/exercise_submit.php
  3. 1 0
      main/inc/lib/template.lib.php

+ 41 - 8
main/exercice/exercise.lib.php

@@ -83,7 +83,10 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
         $num_suggestions = 0;
 
         if ($answerType == MATCHING) {
+
+            $s .= '<div class="drag_question">';
             $s .= '<table class="data_table">';
+
             $x = 1; //iterate through answers
             $letter = 'A'; //mark letters for each answer
             $answer_matching = $cpt1 = array();
@@ -434,16 +437,19 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
                 if ($answerCorrect != 0) {
                     // only show elements to be answered (not the contents of
                     // the select boxes, who are corrrect = 0)
-                    $s .= '<tr><td width="45%" valign="top">';
+                    $s .= '<tr><td width="45%">';
                     $parsed_answer = $answer;
                     //left part questions
                     $s .= ' <span style="float:left; width:8%;"><b>'.$lines_count.'</b>.&nbsp;</span>
-						 	<span style="float:left; width:92%;">'.$parsed_answer.'</span></td>';
+						 	<span style="float:left; width:92%;"><div id="window'.$lines_count.'" class="window window_question">'.$parsed_answer.' </div></span></td>';
                     //middle part (matches selects)
 
-                    $s .= '<td width="10%" valign="top" align="center">&nbsp;&nbsp;
-				            <select name="choice['.$questionId.']['.$numAnswer.']">';
+                    $s .= '<td width="10%" align="center">&nbsp;&nbsp;';
+                    $s .= '<div style="display:none">';
+
 
+                    $s .= '<select id="window'.$lines_count.'_select" name="choice['.$questionId.']['.$numAnswer.']">';
+                    $selectedValue = 0;
                     // fills the list-box
                     foreach ($select_items as $key => $val) {
                         // set $debug_mark_answer to true at function start to
@@ -452,24 +458,46 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
                         if ($debug_mark_answer) {
                             if ($val['id'] == $answerCorrect) {
                                 $selected = 'selected="selected"';
+                                $selectedValue = $val['id'];
                             }
                         }
                         if (isset($user_choice[$matching_correct_answer]) && $val['id'] == $user_choice[$matching_correct_answer]['answer']) {
                             $selected = 'selected="selected"';
+                            $selectedValue = $val['id'];
                         }
-                        $s .= '<option value="'.$val['id'].'" '.$selected.'>'.$val['letter'].$help.'</option>';
+                        $s .= '<option value="'.$val['id'].'" '.$selected.'>'.$val['letter'].'</option>';
                     }  // end foreach()
 
-                    $s .= '</select></td>';
+                    if (!empty($answerCorrect)) {
+                        $myNumber = $answerCorrect +1;
+                        $s.= '<script>
+                            jsPlumb.bind("ready", function() {
+                                jsPlumb.connect({
+                                    source:"window'.$lines_count.'",
+                                    target:"window'.($selectedValue).'_answer",
+                                    endpoint:["Dot", { radius:15 }],
+                                    connector: ["Bezier", { curviness:63 } ],
+                                    anchor:[0.5, 1, 0, 1]
+
+                                })
+                            });
+                            </script>';
+                    }
+
+
+                    $s .= '</select></div></td>';
+
                     //print_r($select_items);
                     //right part (answers)
                     $s.='<td width="45%" valign="top" >';
+
                     if (isset($select_items[$lines_count])) {
                         $s.='<span style="float:left; width:5%;"><b>'.$select_items[$lines_count]['letter'].'.</b></span>'.
-                            '<span style="float:left; width:95%;">'.$select_items[$lines_count]['answer'].'</span>';
+                            '<span style="float:left; width:95%;"><div id="window'.$lines_count.'_answer" class="window">'.$select_items[$lines_count]['answer'].'</div></span>';
                     } else {
                         $s.='&nbsp;';
                     }
+
                     $s .= '</td>';
                     $s .= '</tr>';
                     $lines_count++;
@@ -481,7 +509,8 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
                             $s .= '<tr>
 								  <td colspan="2"></td>
 								  <td valign="top">';
-                            $s.='<b>'.$select_items[$lines_count]['letter'].'.</b> '.$select_items[$lines_count]['answer'];
+                            $s.='<b>'.$select_items[$lines_count]['letter'].'.</b>';
+                            $s .= $select_items[$lines_count]['answer'];
                             $s.="</td>
 							</tr>";
                             $lines_count++;
@@ -500,6 +529,10 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
             }
         }
 
+        if ($answerType == MATCHING) {
+            $s .= '</div>';
+        }
+
         $s .= '</div>';
 
         // destruction of the Answer object

+ 141 - 0
main/exercice/exercise_submit.php

@@ -55,12 +55,153 @@ if (api_get_setting('show_glossary_in_extra_tools') == 'true') {
     $htmlHeadXtra[] = api_get_js('jquery.highlight.js'); //highlight
 }
 
+$htmlHeadXtra[] = api_get_js('jquery.jsPlumb.all.js');
+
 //This library is necessary for the time control feature
 $htmlHeadXtra[]= api_get_css(api_get_path(WEB_LIBRARY_PATH).'javascript/epiclock/stylesheet/jquery.epiclock.css');
 $htmlHeadXtra[]= api_get_css(api_get_path(WEB_LIBRARY_PATH).'javascript/epiclock/renderers/minute/epiclock.minute.css');
 $htmlHeadXtra[]= api_get_js('epiclock/javascript/jquery.dateformat.min.js');
 $htmlHeadXtra[]= api_get_js('epiclock/javascript/jquery.epiclock.min.js');
 $htmlHeadXtra[]= api_get_js('epiclock/renderers/minute/epiclock.minute.js');
+$htmlHeadXtra[] = api_get_js('d3/jquery.xcolor.js');
+
+$htmlHeadXtra[]= '
+<style>
+.window, .label {
+	cursor:pointer;
+	box-shadow: 2px 2px 19px #aaa;
+   -o-box-shadow: 2px 2px 19px #aaa;
+   -webkit-box-shadow: 2px 2px 19px #aaa;
+   -moz-box-shadow: 2px 2px 19px #aaa;
+
+   min-height: 50px;
+}
+</style>
+<script>
+
+;(function() {
+    window.jsPlumbDemo = {
+	    init : function() {
+	        var countConnections = $( ".window_question" ).size();
+
+            var colorArray = $.xcolor.analogous("#da0", countConnections);
+
+	        jsPlumb.importDefaults({
+				DragOptions : { cursor: "pointer", zIndex:2000 },
+				PaintStyle : { strokeStyle:"#666" },
+				EndpointStyle : { width:20, height:16, strokeStyle:"#666" },
+				Endpoint : "Rectangle",
+				Anchors : ["TopCenter", "TopCenter"]
+			});
+
+
+			var colorDestination = "#316b31";
+
+            var exampleDropOptions = {
+                tolerance: "touch",
+                hoverClass: "dropHover",
+                activeClass: "dragActive"
+            };
+
+            var destinationEndPoint = {
+                endpoint:["Dot", { radius: 15 }],
+                paintStyle:{ fillStyle:colorDestination },
+                isSource:false,
+                connectorStyle:{ strokeStyle:colorDestination, lineWidth:8 },
+                connector: ["Bezier", { curviness: 63 } ],
+                maxConnections: countConnections,
+                isTarget:true,
+                dropOptions : exampleDropOptions,
+                beforeDrop:function(params) {
+                    var selectId = params.targetId;
+                    selectId = selectId.replace("answer", "select");
+                    value = params.sourceId.replace("window", "");
+                    jsPlumb.detachAllConnections(params.targetId);
+                    $("#" +selectId +" option").filter(function() {
+                        //may want to use $.trim in here
+                        return $(this).val() == value;
+                    }).attr("selected", true);
+                    return true;
+                }
+            };
+
+            var count = 0;
+            var sourceDestinationArray = Array;
+
+            $( ".window_question" ).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:destinationColor, lineWidth:8 },
+                    connector: ["Bezier", { curviness:63 } ],
+                    maxConnections: countConnections,
+                    isTarget:false,
+                    dropOptions : exampleDropOptions,
+                    scope: scope
+                };
+                sourceDestinationArray[count+1] = sourceEndPoint;
+
+                count++;
+                jsPlumb.addEndpoint(windowId, { anchor:[0.5, 1, 0, 1] }, sourceEndPoint);
+
+                $( ".window_question" ).each(function( index ) {
+                    var windowDestinationId = $(this).attr("id");
+                    destinationEndPoint.scope = scope;
+                    jsPlumb.addEndpoint(windowDestinationId+"_answer", { anchor:[0.5, 1, 0, 1] }, destinationEndPoint);
+                });
+            });
+
+
+            var divsWithWindowClass = jsPlumb.CurrentLibrary.getSelector(".window");
+			jsPlumb.draggable(divsWithWindowClass);
+
+			jsPlumbDemo.attachBehaviour();
+        }
+    }
+})();
+
+;(function() {
+    var _initialised = false;
+
+    jsPlumbDemo.attachBehaviour = function() {
+        if (!_initialised) {
+            $(".hide").click(function() {
+                jsPlumb.toggle($(this).attr("rel"));
+            });
+
+            $(".drag").click(function() {
+                var s = jsPlumb.toggleDraggable($(this).attr("rel"));
+                $(this).html(s ? "disable dragging" : "enable dragging");
+                if (!s) $("#" + $(this).attr("rel")).addClass("drag-locked"); else $("#" + $(this).attr("rel")).removeClass("drag-locked");
+                $("#" + $(this).attr("rel")).css("cursor", s ? "pointer" : "default");
+            });
+
+            $(".detach").click(function() {
+                jsPlumb.detachAllConnections($(this).attr("rel"));
+            });
+
+            $("#clear").click(function() {
+                jsPlumb.detachEveryConnection(); jsPlumbDemo.showConnectionInfo("");
+            });
+
+            _initialised = true;
+        }
+    };
+})();
+
+jsPlumb.bind("ready", function() {
+    if ($(".drag_question").length > 0) {
+	    jsPlumbDemo.init();
+	}
+	//resetRenderMode(jsPlumb.SVG);
+});
+
+</script>';
 
 // General parameters passed via POST/GET
 

+ 1 - 0
main/inc/lib/template.lib.php

@@ -436,6 +436,7 @@ class Template
             'jquery.min.js',
             'chosen/chosen.jquery.min.js',
             'jquery-ui/'.$this->jquery_ui_theme.'/jquery-ui-custom.min.js',
+            'jquery-ui/jquery.ui.touch-punch.js',
             'thickbox.js',
             'bootstrap/bootstrap.js',
         );