Browse Source

Fixing new question type that matches words see BT#5980

Julio Montoya 12 years ago
parent
commit
ae490d320a
3 changed files with 170 additions and 42 deletions
  1. 18 3
      main/css/base.css
  2. 25 16
      main/exercice/exercise.lib.php
  3. 127 23
      main/exercice/exercise_submit.php

+ 18 - 3
main/css/base.css

@@ -5177,11 +5177,20 @@ i.size-32.icon-new-work {
 
 
 .drag_question {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+    float: left;
+    width: 65%;
+    min-height: 12em;
+}
+
+.droppable {
+    float:left;
+    width:100px;
+    min-height: 100px;
+    padding : 10px;
+    text-align: center;
 }
 
+
 .drag_question li {
     margin: 3px 3px 3px 0;
     padding: 1px;
@@ -5190,3 +5199,9 @@ i.size-32.icon-new-work {
     height: 90px;
     text-align: center;
 }
+
+
+.item_added {
+    float:left;
+}
+

+ 25 - 16
main/exercice/exercise.lib.php

@@ -84,7 +84,8 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
 
         if ($answerType == MATCHING || $answerType == DRAGGABLE) {
             if ($answerType == DRAGGABLE) {
-                $s .= '<ul class="drag_question">';
+                $s .= '<div class="ui-widget ui-helper-clearfix">
+                        <ul class="drag_question ui-helper-reset ui-helper-clearfix">';
             } else {
                 $s .= '<div id="drag'.$questionId.'_question" class="drag_question">';
                 $s .= '<table class="data_table">';
@@ -461,6 +462,7 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
                                 <b>'.$lines_count.'</b>.&nbsp'.$parsed_answer.'
                             </div>
                             </td>';
+
                     //middle part (matches selects)
 
                     $s .= '<td width="10%" align="center">&nbsp;&nbsp;';
@@ -539,6 +541,7 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
                     //echo $objAnswerTmp->getJs();
                     //$s .= '<tr>';
                 }
+
                 if ($answerCorrect != 0) {
                     // only show elements to be answered (not the contents of
                     // the select boxes, who are correct = 0)
@@ -546,9 +549,9 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
                     $parsed_answer = $answer;
                     $windowId = $questionId.'_'.$lines_count;
                     //left part questions
-                    $s .= '<li class="ui-state-default" id="'.$windowId.'"><span class="ui-icon ui-icon-arrow-2-e-w"></span>';
-                    $s .= ' <div id="window_'.$windowId.'" class="window'.$questionId.'_question_draggable">
-                                <b>'.$lines_count.'</b>.&nbsp'.$parsed_answer.'
+                    $s .= '<li class="ui-state-default" id="'.$windowId.'">';
+                    $s .= ' <div id="window_'.$windowId.'" class="window'.$questionId.'_question_draggable question_draggable">
+                               '.$parsed_answer.'
                             </div>';
 
                     $s .= '<div style="display:none">';
@@ -573,20 +576,13 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
                         $s .= '<option value="'.$val['id'].'" '.$selected.'>'.$val['letter'].'</option>';
                     }
 
-                    /*if (!empty($answerCorrect) && !empty($selectedValue)) {
+                    if (!empty($answerCorrect) && !empty($selectedValue)) {
                         $s.= '<script>
-                            jsPlumb.ready(function() {
-                                jsPlumb.connect({
-                                    source: "window_'.$windowId.'",
-                                    target: "window_'.$questionId.'_'.$selectedValue.'_answer",
-                                    endpoint:["Blank", { radius:15 }],
-                                    anchor:["RightMiddle","LeftMiddle"],
-                                    paintStyle:{ strokeStyle:"#8a8888" , lineWidth:8 },
-                                    connector: [connectorType, { curviness: curvinessValue } ],
-                                })
+                            $(function() {
+                                deleteItem($("#'.$questionId.'_'.$selectedValue.'"), $("#drop_'.$windowId.'"));
                             });
                             </script>';
-                    }*/
+                    }
                     $s .= '</select>';
 
                     if (isset($select_items[$lines_count])) {
@@ -629,7 +625,20 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
         }
 
         if ($answerType == DRAGGABLE) {
-            $s .= '</ul>';
+            $s .= '</ul><div class="clear"></div>';
+
+            $counterAnswer = 1;
+            for ($answerId = 1; $answerId <= $nbrAnswers; $answerId++) {
+                $answerCorrect = $objAnswerTmp->isCorrect($answerId);
+                $windowId = $questionId.'_'.$counterAnswer;
+                if ($answerCorrect) {
+                    $s .= '<div id="drop_'.$windowId.'" class="droppable ui-state-default">'.$counterAnswer.'</div>';
+                    //$s .= '<li id="drop_'.$windowId.'" class="droppable ui-state-default">'.$counterAnswer.'</li>';
+                    $counterAnswer++;
+                }
+            }
+            //$s .= '<ul>';
+            //$s .= '</div>';
         }
 
         if ($answerType == MATCHING) {

+ 127 - 23
main/exercice/exercise_submit.php

@@ -70,56 +70,160 @@ $htmlHeadXtra[] = api_get_js('d3/jquery.xcolor.js');
 $htmlHeadXtra[]= '
 <script>
 
+var recycle_icon = "<a href=\'#\' class=\'ui-icon ui-icon-refresh\'>Recycle image</a>";
+var trash_icon = "<a href=\'#\' class=\'ui-icon ui-icon-trash\'>Delete image</a>";
+
+function deleteItem($item, $insertHere) {
+
+        if ($insertHere.find(".question_draggable").length > 0) {
+            return false;
+        }
+
+        $item.fadeOut(function() {
+            /*var $list = $( "ul", $trash ).length ?
+              $( "ul", $trash ) :
+              $( "<ul class=\'gallery ui-helper-reset\'/>" ).appendTo( $trash );*/
+
+            $list =  $( "<div class=\'gallery ui-helper-reset\'/>" ).appendTo($insertHere);
+            $item.find( "a.ui-icon-trash" ).remove();
+
+             var droppedId = $item.attr("id");
+             var dropedOnId = $insertHere.attr("id");
+
+             var originSelectId = "window_"+droppedId+"_select";
+
+             value = dropedOnId.split("_")[2];
+
+             //console.log(originSelectId);             console.log(value);
+
+             $("#"+originSelectId +" option").filter(function() {
+                    return $(this).val() == value;
+            }).attr("selected", true);
+
+            console.log(droppedId);
+            console.log(dropedOnId);
+
+            $item.append( recycle_icon ).appendTo( $list  ).fadeIn(function() {
+            //$item.animate({ width: "48px" }).find( "img" ).animate({ height: "36px" });
+            });
+
+      });
+    }
+
 // Draggable js script in order to use jsplumb
 var oldPositionArray;
 
 $(function() {
-    $( ".drag_question" ).sortable({
-        revert: true,
+
+    var $gallery = $( ".drag_question" );
+    var $trash = $( ".droppable" );
+
+    // let the questions items be draggable
+    $("li", $gallery).draggable({
+        cancel: "a.ui-icon", // clicking an icon wont initiate dragging
+        revert: "invalid", // when not dropped, the item will revert back to its initial position
+        containment: "document",
+        helper: "clone",
+        cursor: "move"
+    });
+
+    // let the "droppable" be droppable, accepting the questions items
+    $trash.droppable({
+        accept: ".drag_question > li",
+        hoverClass: "ui-state-active",
+        //activeClass: "ui-state-highlight",
+        drop: function(event, ui) {
+                /*
+            var dropped = ui.draggable;
+            var droppedId = dropped.attr("id");
+
+            var droppedOn = $(this);
+            var droppedOnId = droppedOn.attr("id");
+
+            $(this).html(dropped.html());
+            $( this ).addClass("ui-state-highlight");
+            */
+            deleteItem(ui.draggable,  $(this));
+        }
+    });
+
+    // let the question handler be droppable as well, accepting items from the trash
+
+    $gallery.droppable({
+       // accept: ".droppable",
+       // activeClass: "custom-state-active",
+        hoverClass: "ui-state-active",
+        drop: function( event, ui ) {
+            recycleItem( ui.draggable, $(this));
+        }
+    });
+
+
+
+    function recycleItem( $item, droppedOn) {
+        //console.log("recycleItem");
+        $item.fadeOut(function() {
+        $item
+          .find( "a.ui-icon-refresh" )
+            .remove()
+          .end()
+          .css( "width", "96px")
+          //.append( trash_icon )
+          .find( "img" )
+            .css( "height", "72px" )
+          .end()
+          .appendTo( $gallery )
+          .fadeIn();
+        });
+        var droppedId = $item.attr("id");
+        var originSelectId = "window_"+droppedId+"_select";
+        console.log(originSelectId);
+        $("#"+originSelectId+" option:first").attr("selected","selected");
+    }
+
+
+
+    $( "ul.drag_question > li" ).click(function( event ) {
+        var $item = $( this ),
+            $target = $( event.target );
+
+        if ( $target.is( "a.ui-icon-trash" ) ) {
+            deleteItem( $item );
+        } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
+        } else if ( $target.is( "a.ui-icon-refresh" ) ) {
+            recycleItem( $item );
+        }
+
+        return false;
+    });
+
+    /*$( ".drag_question" ).sortable({
+
         start: function(e, ui) {
             // Getting old positions into array before sorting
             oldPositionArray = $(this).sortable("toArray");
             ui.item.startPos = ui.item.index();
         },
         stop: function( event, ui ) {
-            $(this).data("new_position", $(this).sortable("toArray"))
+            $(this).data("new_position", $(this).sortable("toArray"));
             var newPositionArray = $(this).sortable("toArray");
 
             var oldPosition = ui.item.startPos;
             var newPosition = ui.item.index();
 
-            /*console.log(oldPositionArray);
-            console.log(newPositionArray);
-            console.log(oldPosition);
-            console.log(newPosition);
-            */
             var oldId = "window_"+newPositionArray[oldPosition]+"_select";
             var newId = "window_"+newPositionArray[newPosition]+"_select";
 
             var counter = 0;
             $.each(newPositionArray, function(index, value){
-                console.log(index);
                 newIdValue = "window_"+value+"_select";
                 $("#"+newIdValue +" option").filter(function() {
                     return $(this).val() == counter+1;
                 }).attr("selected", true);
                 counter++;
             });
-
-            /*console.log(oldId);
-            console.log(newId);
-
-            $("#"+newId +" option").filter(function() {
-                selectedValue = $(this).val() == newPosition + 1;
-                return selectedValue;
-            }).attr("selected", true);
-
-            $("#"+oldId +" option").filter(function() {
-                selectedValue = $(this).val() == oldPosition + 1;
-                return selectedValue;
-            }).attr("selected", true);*/
         }
-    });
+    });*/
 });
 
 // Matching js script in order to use jsplumb