Browse Source

Fixing exercise unique answer UI see BT#5940

Julio Montoya 12 years ago
parent
commit
70e387ae08
3 changed files with 76 additions and 45 deletions
  1. 20 0
      main/css/base.css
  2. 14 15
      main/exercice/exercise.lib.php
  3. 42 30
      main/exercice/exercise_submit.php

+ 20 - 0
main/css/base.css

@@ -5144,4 +5144,24 @@ i.size-32.icon-new-work {
 
 .highlight_image_default img {
     border: 5px solid transparent;
+}
+
+.window_right_question {
+    padding: 10px 10px 10px 25px;
+}
+
+.window_left_question {
+    text-align: right;
+    padding: 10px 25px 10px 10px;
+}
+
+
+.drag_question .window, .drag_question .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;
+    padding-top: 25px;
 }

+ 14 - 15
main/exercice/exercise.lib.php

@@ -452,19 +452,18 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
                     // the select boxes, who are corrrect = 0)
                     $s .= '<tr><td width="45%">';
                     $parsed_answer = $answer;
-                    $windowId = $questionId.$lines_count;
+                    $windowId = $questionId.'_'.$lines_count;
                     //left part questions
-                    $s .= ' <span style="float:left; width:8%;"><b>'.$lines_count.'</b>.&nbsp;</span>
-						 	<span style="float:left; width:92%;">
-						 	<div id="window'.$windowId.'" class="window window'.$questionId.'_question">'.$parsed_answer.' </div>
-						 	</span>
-						 	</td>';
+                    $s .= ' <div id="window_'.$windowId.'" class="window window_left_question window'.$questionId.'_question">
+                                <b>'.$lines_count.'</b>.&nbsp'.$parsed_answer.'
+                            </div>
+                            </td>';
                     //middle part (matches selects)
 
                     $s .= '<td width="10%" align="center">&nbsp;&nbsp;';
                     $s .= '<div style="display:none">';
 
-                    $s .= '<select id="window'.$windowId.'_select" name="choice['.$questionId.']['.$numAnswer.']">';
+                    $s .= '<select id="window_'.$windowId.'_select" name="choice['.$questionId.']['.$numAnswer.']">';
                     $selectedValue = 0;
                     // fills the list-box
                     foreach ($select_items as $key => $val) {
@@ -485,16 +484,15 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
                     }
 
                     if (!empty($answerCorrect) && !empty($selectedValue)) {
-
                         $s.= '<script>
                             jsPlumb.ready(function() {
                                 jsPlumb.connect({
-                                    source: "window'.$questionId.$selectedValue.'",
-                                    target: "window'.$windowId.'_answer",
+                                    source: "window_'.$windowId.'",
+                                    target: "window_'.$questionId.'_'.$selectedValue.'_answer",
                                     endpoint:["Blank", { radius:15 }],
-                                    connector: ["Bezier", { curviness:63 } ],
-                                    anchor:[0.5, 1, 0, 1],
-                                    connectorStyle:{ lineWidth:8 }
+                                    anchor:["RightMiddle","LeftMiddle"],
+                                    paintStyle:{ strokeStyle:"#8a8888" , lineWidth:8 },
+                                    connector: [connectorType, { curviness: curvinessValue } ],
                                 })
                             });
                             </script>';
@@ -508,8 +506,9 @@ function showQuestion($questionId, $only_questions = false, $origin = false, $cu
                     $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%;"><div id="window'.$windowId.'_answer" class="window">'.$select_items[$lines_count]['answer'].'</div></span>';
+                        $s.= '<div id="window_'.$windowId.'_answer" class="window window_right_question">
+                                <b>'.$select_items[$lines_count]['letter'].'.</b> '.$select_items[$lines_count]['answer'].'
+                              </div>';
                     } else {
                         $s.='&nbsp;';
                     }

+ 42 - 30
main/exercice/exercise_submit.php

@@ -54,7 +54,7 @@ $is_allowedToEdit = api_is_allowed_to_edit(null,true);
 
 if (api_get_setting('show_glossary_in_extra_tools') == 'true') {
     $htmlHeadXtra[] = api_get_js('glossary.js'); //Glossary
-    $htmlHeadXtra[] = api_get_js('jquery.highlight.js'); //highlight
+    $htmlHeadXtra[] = api_get_js('jquery.   highlight.js'); //highlight
 }
 
 $htmlHeadXtra[] = api_get_js('jquery.jsPlumb.all.js');
@@ -68,18 +68,13 @@ $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>
 
+var colorDestination = "#316b31";
+var curvinessValue = 0;
+var connectorType = "Straight";
+
+
 ;(function() {
     window.jsPlumbDemo = {
 	    init : function(questionId) {
@@ -89,8 +84,10 @@ $htmlHeadXtra[]= '
 
             if (countConnections && countConnections > 0) {
                 var colorArray = $.xcolor.analogous("#da0", countConnections);
+                var colorArrayDestination = $.xcolor.analogous("#51a351", countConnections);
             } else {
                 var colorArray = $.xcolor.analogous("#da0", 10);
+                var colorArrayDestination = $.xcolor.analogous("#51a351", 10);
             }
 
 	        jsPlumb.importDefaults({
@@ -101,8 +98,6 @@ $htmlHeadXtra[]= '
 				Anchors : ["TopCenter", "TopCenter"]
 			});
 
-			var colorDestination = "#316b31";
-
             var exampleDropOptions = {
                 tolerance: "touch",
                 hoverClass: "dropHover",
@@ -114,16 +109,22 @@ $htmlHeadXtra[]= '
                 paintStyle:{ fillStyle:colorDestination },
                 isSource:false,
                 connectorStyle:{ strokeStyle:colorDestination, lineWidth:8 },
-                connector: ["Bezier", { curviness: 63 } ],
-                maxConnections: countConnections,
+                connector: [connectorType, { curviness: curvinessValue } ],
+                maxConnections: 1000,
                 isTarget:true,
                 dropOptions : exampleDropOptions,
                 beforeDrop:function(params) {
-                console.log(params);
-                    var selectId = params.targetId;
-                    selectId = selectId.replace("answer", "select");
-                    var value = params.sourceId.replace("window"+questionId, "");
-                    jsPlumb.detachAllConnections(params.targetId);
+
+                    var connections = jsPlumb.getConnections({source: params.sourceId});
+
+                    jsPlumb.select({source:params.sourceId}).each(function(connection) {
+                        console.log(connection.sourceId);
+
+                        jsPlumb.detach(connection);
+                    });
+                    console.log(params);
+                    var selectId = params.sourceId + "_select";
+                    var value = params.targetId.split("_")[2];
 
                     $("#" +selectId +" option").filter(function() {
                         return $(this).val() == value;
@@ -137,18 +138,16 @@ $htmlHeadXtra[]= '
 
             $(windowQuestion).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 },
+                    paintStyle:{ fillStyle: destinationColor },
                     isSource:true,
-                    connectorStyle:{ strokeStyle:destinationColor, lineWidth:8 },
-                    connector: ["Bezier", { curviness:63 } ],
-                    maxConnections: countConnections,
+                    connectorStyle:{ strokeStyle:"#8a8888" , lineWidth:8 },
+                    connector: [connectorType, { curviness: curvinessValue } ],
+                    maxConnections: 1,
                     isTarget:false,
                     dropOptions : exampleDropOptions,
                     scope: scope
@@ -156,15 +155,18 @@ $htmlHeadXtra[]= '
                 sourceDestinationArray[count+1] = sourceEndPoint;
 
                 count++;
-                jsPlumb.addEndpoint(windowId, { anchor:[0.5, 1, 0, 1] }, sourceEndPoint);
-
+                jsPlumb.addEndpoint(windowId, { anchor:[ "RightMiddle","RightMiddle","RightMiddle","RightMiddle" ] }, sourceEndPoint);
+                var destinationCount = 0;
                 $(windowQuestion).each(function( index ) {
                     var windowDestinationId = $(this).attr("id");
                     destinationEndPoint.scope = scope;
-
-                    jsPlumb.addEndpoint(windowDestinationId+"_answer", { anchor:[0.5, 1, 0, 1] }, destinationEndPoint);
+                    destinationEndPoint.paintStyle.fillStyle = colorArrayDestination[destinationCount].getHex();
+                    destinationCount++;
+                    jsPlumb.addEndpoint(windowDestinationId+"_answer", { anchor:[ "LeftMiddle","LeftMiddle","LeftMiddle","LeftMiddle" ]  }, destinationEndPoint);
                 });
             });
+
+
             //var divsWithWindowClass = jsPlumb.CurrentLibrary.getSelector("#"+questionId+" .window");
 			//jsPlumb.draggable(divsWithWindowClass);
 			jsPlumbDemo.attachBehaviour();
@@ -204,9 +206,19 @@ $htmlHeadXtra[]= '
 jsPlumb.ready(function() {
     if ($(".drag_question").length > 0) {
 	    jsPlumbDemo.init();
+
+	     $(document).scroll(function() {
+            jsPlumb.repaintEverything();
+        });
+
+        $(window).resize(function() {
+            jsPlumb.repaintEverything();
+        });
+
 	}
 });
 
+
 $(function(){
     $(".highlight_image").on("click", function() {
         $(this).parent().find(".highlight_image").each(function(index){