Drag and drop the option into the option box - done

Amit Kumar
1 parent d776869b
Showing 3 changed files with 112 additions and 50 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/LabExercController.js
400-SOURCECODE/AIAHTML5.Web/app/views/LabExerc/lab-exercises-detail.html
400-SOURCECODE/AIAHTML5.Web/content/data/json/le/CS.json
@@ -95,7 +95,7 @@ function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location
                             if (result.LabExercise[index].Questions[index1].ImagePath == "") {
                                 $("#imgblock").css("display", "none");
                                 $("#textblock").css("display", "block");
-                                $scope.LabExerciseModules = result.LabExercise[index].Questions[index1];                               
+                                $scope.LabExerciseModules = result.LabExercise[index].Questions[index1];
                                 $scope.activityTitle = result.LabExercise[index].Questions[index1].activityTitle;
                                 $scope.Title = result.LabExercise[index].Questions[index1].Title;
                             }
@@ -107,14 +107,15 @@ function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location
                                 $scope.Title = result.LabExercise[index].Questions[index1].Title;
                                 $scope.Imagepath = keywords.topic + "/" + result.LabExercise[index].Questions[index1].ImagePath;
                             }
-
+                            $scope.ShowHideDiv(result.LabExercise[index].Questions[index1].Options[0].textalign);
                         }
                     });
                     //$scope.quiznumber++;
+
                 }
             });
-
+            //$scope.ShowHideDiv();
         },
         function (error) {
             console.log(error.statusText)
@@ -128,7 +129,7 @@ function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location
         else
             $scope.quiznumber++;
         $scope.resetQuiz();
-
+        $scope.ShowHideDiv();
     }
     $scope.prevQuiz = function () {
@@ -138,6 +139,7 @@ function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location
             $scope.quiznumber--;
         $scope.resetQuiz();
+        $scope.ShowHideDiv();
     }
     $scope.handleDragStart = function (e) {
@@ -161,50 +163,94 @@ function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location
         var id = $(this).attr("id");
         var keywords = $location.search();
         var dataText = e.dataTransfer.getData('text/plain');
-        var commondataJsonPath = '~/../content/data/json/le/' + keywords.topic + '.json';
-        DataService.getAnotherJson(commondataJsonPath).then(
-        function (result) {
+        if (id == "divoptions" || id == "divleft" || id == "divright") {
+            var item = $('#' + $scope.dragableId).html();
+            var rindex = $scope.DraggedList.indexOf(item);
+            var commondataJsonPath = '~/../content/data/json/le/' + keywords.topic + '.json';
+            DataService.getAnotherJson(commondataJsonPath).then(
+            function (result) {
+
+                $.each(result.LabExercise, function (index, value) {
+                    if (result.LabExercise[index].Slug == keywords.topic) {
+                        $.each(result.LabExercise[index].Questions, function (index1, value1) {
+                            if (result.LabExercise[index].Questions[index1].Number == $scope.quiznumber) {
+                                var Options = result.LabExercise[index].Questions[index1].Options;
+                                $.each(Options, function (inx, value2) {
+                                    if (Options[inx].OptionTitle == item) {
+                                        if ($scope.DraggedList != null) {
+                                            $.each($scope.DraggedList, function (inx1, value3) {
+
+                                                if ($scope.DraggedList[inx1].Value == item) {
+                                                    $scope.DraggedList.splice(inx1, 1);
+                                                    $('#block-' + Options[inx].OptionNumber).css("display", "block");
+                                                }
+                                            });
+                                        }
+                                    }
+                                });
+                            }
+                        });
+                    }
-            $.each(result.LabExercise, function (index, value) {
-                if (result.LabExercise[index].Slug == keywords.topic) {
+                });
-                    $.each(result.LabExercise[index].Questions, function (index1, value1) {
-                        if (result.LabExercise[index].Questions[index1].Number == $scope.quiznumber) {
-                            var Options = result.LabExercise[index].Questions[index1].OptionBox;
-                            $.each(Options, function (inx, value2) {
-                                if (Options[inx].BoxName == id.split('-')[1]) {
-                                    if ($scope.DraggedList != null) {
-                                        $.each($scope.DraggedList, function (inx1, value3) {
-
-                                            if ($scope.DraggedList[inx1].Value == dataText) {
-                                                $scope.DraggedList.splice(inx1, 1);
-                                            }
-                                        });
+            },
+            function (error) {
+                console.log(error.statusText)
+            }
+            )
+        }
+        else {
+
+            var commondataJsonPath = '~/../content/data/json/le/' + keywords.topic + '.json';
+            DataService.getAnotherJson(commondataJsonPath).then(
+            function (result) {
+                $.each(result.LabExercise, function (index, value) {
+                    if (result.LabExercise[index].Slug == keywords.topic) {
+                        $.each(result.LabExercise[index].Questions, function (index1, value1) {
+                            if (result.LabExercise[index].Questions[index1].Number == $scope.quiznumber) {
+                                var Options = result.LabExercise[index].Questions[index1].OptionBox;
+                                $.each(Options, function (inx, value2) {
+                                    if (Options[inx].BoxName == id.split('-')[1]) {
+                                        if ($scope.DraggedList != null) {
+                                            $.each($scope.DraggedList, function (inx1, value3) {
+
+                                                if ($scope.DraggedList[inx1].Value == dataText) {
+                                                    $scope.DraggedList.splice(inx1, 1);
+                                                }
+                                            });
+                                        }
+
+                                        $scope.DraggedList.push({ "id": id.split('-')[1], "optionName": id.split('-')[1], "Value": dataText, "topcoord": Options[inx].topcoord, "leftcoord": Options[inx].leftcoord });
+                                        //$('#' + $scope.dragableId).remove();
+                                        $('#' + $scope.dragableId).css("display", "none");
+                                        //$('#' + id).remove();
                                     }
+                                });
+                            }
+                        });
+                    }
-                                    $scope.DraggedList.push({ "id": id.split('-')[1], "optionName": id.split('-')[1], "Value": dataText, "topcoord": Options[inx].topcoord, "leftcoord": Options[inx].leftcoord });
-                                    $('#' + $scope.dragableId).remove();
-                                    //$('#' + id).remove();
-                                }
-                            });
-                        }
-                    });
-                }
-
-            });
+                });
-        },
-        function (error) {
-            console.log(error.statusText)
+            },
+            function (error) {
+                console.log(error.statusText)
+            }
+            )
         }
-        )
         $scope.$apply();
+        //alert($("#divoptions").css("display") + "," + $("#divoptions").html());
+        //if ($("#divoptions").css("display") == "block" && $("#divoptions").html()=="")
+        //{
+        //    $("#divoptions").html("<br><br><br><br>")
+        //}
     };
     $scope.handleDragOver = function (e) {
         e.preventDefault(); // Necessary. Allows us to drop.
         e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
-        return false;
+        //return false;
     };
     $scope.resetQuiz = function () {
@@ -252,6 +298,22 @@ function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location
         )
     };
+    $scope.ShowHideDiv = function (status) {
+
+        if (status == "bottom") {
+            $("#divright").css("display", "none");
+            $("#divleft").css("display", "none");
+            $("#divoptions").css("display", "block");
+
+        }
+        else {
+            $("#divright").css("display", "block");
+            $("#divleft").css("display", "block");
+            $("#divoptions").css("display", "none");
+        }
+
+    };
+
 }]
 );
@@ -32,27 +32,27 @@
                                 </ul>-->
                             </div>
                             <div align="center" class="dragger">
-                                <div class="col-sm-2">
-                                    <div draggable="true" ng-repeat="option in LabExerciseModules.Options | filter:{'textalign':'left'}" ng-style="{'width': '150px', 'height':'40px','font-size':'8px;','valign':'middle','text-align':'center', 'vertical-align:middle','background-color': '#808080','margin':'5px !important','float':'{{option.textalign}}'} " style="margin-bottom: 5px !important; width: 180px;" class="thumbnail caption col-sm-2 col-lg-3  ui-draggable marginR5 " id="block-{{option.OptionNumber}}">{{option.OptionTitle}}</div>
+                                <div class="col-sm-2" style="padding-top: 150px; height: 500px; " id="divleft" droppable="true">
+                                    <div draggable="true" ng-repeat="option in LabExerciseModules.Options | filter:{'textalign':'left'}" ng-style="{'width': '150px', 'height':'40px','font-size':'8px;','valign':'middle','text-align':'center', 'vertical-align:middle','background-color': '#808080','margin':'10px !important','float':'{{option.textalign}}'} " style="margin-bottom: 10px !important; width: 180px;" class="thumbnail caption col-sm-2 col-lg-3  ui-draggable marginR5 " id="block-{{option.OptionNumber}}">{{option.OptionTitle}}</div>
                                 </div>
                                 <div class="col-sm-8">
                                     <div style="position: relative;" id="imgdiv">
                                         <div id="imgblock">
-                                            <img id="droppable" ng-src="content/images/LE/{{Imagepath}}" droppable="true" alt="" ng-click="onClick()" imageonload />
+                                            <img id="droppable" ng-src="content/images/LE/{{Imagepath}}"  alt="" ng-click="onClick()" imageonload />
                                         </div>
                                         <div ng-repeat="optionbox in LabExerciseModules.OptionBox" droppable="true" class="droppable ui-droppable options" id="blockbox-{{optionbox.BoxName}}" ng-style="{'top':{{optionbox.topcoord}}, 'left':{{optionbox.leftcoord}},'position': 'absolute',  'width': '155px', 'height':'30px', 'border':'0px solid #333', 'background': '#E8E8E8' }">{{optionbox.Answervalue}}</div>
                                         <div draggable="true" ng-repeat="ans in DraggedList" droppable="true" class="droppable ui-droppable answerdroppable" id="blockans-{{ans.id}}" ng-style="{'top':{{ans.topcoord}}, 'left':{{ans.leftcoord}},'position': 'absolute',  'width': '158px', 'height':'30px', 'border':'0px solid #333', 'background': '#E8E8E8','font-size': '12px','border-color':'#FF0000','padding-top':'5px'}">{{ans.Value}}</div>
                                     </div>
-                                    <div class="col-sm-12" style="margin-left:100px;margin-top:0px;" id="divoptions" droppable="true">
+                                    <div class="col-sm-12" style="margin-left: 100px; margin-top: 0px; height:80px;" id="divoptions" droppable="true" >
                                         <!--<div class="col-sm-3 col-lg-3  ui-draggable" >-->
                                         <div draggable="true" ng-repeat="option in LabExerciseModules.Options | filter:{'textalign':'bottom'}" ng-style="{'width': '150px', 'height':'40px','font-size':'8px;','valign':'middle','text-align':'center', 'vertical-align:middle','background-color': '#808080','margin':'5px !important','float':'{{option.textalign}}'} " style="margin-bottom: 5px !important; width: 180px;" class="thumbnail caption col-sm-2 col-lg-3  ui-draggable marginR5 " id="block-{{option.OptionNumber}}">{{option.OptionTitle}}</div>
                                         <!--</div>-->
                                     </div>
                                 </div>
-                                <div class="col-sm-2">
-                                    <div draggable="true" ng-repeat="option in LabExerciseModules.Options | filter:{'textalign':'right'}" ng-style="{'width': '150px', 'height':'40px','font-size':'8px;','valign':'middle','text-align':'center', 'vertical-align:middle','background-color': '#808080','margin':'5px !important','float':'{{option.textalign}}'} " style="margin-bottom: 5px !important; width: 180px;" class="thumbnail caption col-sm-2 col-lg-3  ui-draggable marginR5 " id="block-{{option.OptionNumber}}">{{option.OptionTitle}}</div>
+                                <div class="col-sm-2" style="padding-top: 150px; height: 500px; " id="divright" droppable="true">
+                                    <div draggable="true" ng-repeat="option in LabExerciseModules.Options | filter:{'textalign':'right'}" ng-style="{'width': '150px', 'height':'40px','font-size':'8px;','valign':'middle','text-align':'center', 'vertical-align:middle','background-color': '#808080','margin':'10px !important','float':'{{option.textalign}}'} " style="margin-bottom: 10px !important; width: 180px;" class="thumbnail caption col-sm-2 col-lg-3  ui-draggable marginR5 " id="block-{{option.OptionNumber}}">{{option.OptionTitle}}</div>
                                 </div>
                             </div>
                         </div>
@@ -46,10 +46,10 @@
 			                 {"BoxName": "T3","topcoord":"242","leftcoord":"12","Answervalue":"","QuizText":""},{"BoxName": "T4","topcoord":"2","leftcoord":"600","Answervalue":"","QuizText":""},
 							 {"BoxName": "T5","topcoord":"41","leftcoord":"600","Answervalue":"","QuizText":""},{"BoxName": "T6","topcoord":"186","leftcoord":"600","Answervalue":"","QuizText":""},
 							 {"BoxName": "T7","topcoord":"239","leftcoord":"600","Answervalue":"","QuizText":""},{"BoxName": "T8","topcoord":"387","leftcoord":"600","Answervalue":"","QuizText":""}],
-               "Options": [{"OptionNumber": "A","OptionTitle": "Left pulmonary artery"},{"OptionNumber": "B","OptionTitle": "Left subclavian artery"},
-                           {"OptionNumber": "C","OptionTitle": "Right brachiocephalic vein"},{"OptionNumber": "D","OptionTitle": "Left common carotid artery"},
-                           {"OptionNumber": "E","OptionTitle": "Right pulmonary artery"},{"OptionNumber": "F","OptionTitle": "Right pulmonary vein"},
-                           {"OptionNumber": "G","OptionTitle": "Left pulmonary vein"},{"OptionNumber": "H","OptionTitle": "Inferior vena cava"}],
+               "Options": [{"OptionNumber": "A","OptionTitle": "Left pulmonary artery","textalign":"left"},{"OptionNumber": "B","OptionTitle": "Left subclavian artery","textalign":"left"},
+                           {"OptionNumber": "C","OptionTitle": "Right brachiocephalic vein","textalign":"left"},{"OptionNumber": "D","OptionTitle": "Left common carotid artery","textalign":"right"},
+                           {"OptionNumber": "E","OptionTitle": "Right pulmonary artery","textalign":"right"},{"OptionNumber": "F","OptionTitle": "Right pulmonary vein","textalign":"right"},
+                           {"OptionNumber": "G","OptionTitle": "Left pulmonary vein","textalign":"right"},{"OptionNumber": "H","OptionTitle": "Inferior vena cava","textalign":"right"}],
                "correctResponse": [{"OptionBox": "T1","Answer": "B"},{"OptionBox": "T2","Answer": "A"},{"OptionBox": "T3","Answer": "G"},{"OptionBox": "T4","Answer": "D"},
                            {"OptionBox": "T5","Answer": "C"},{"OptionBox": "T6","Answer": "E"},{"OptionBox": "T7","Answer": "F"},{"OptionBox": "T8","Answer": "H"}]
            },
@@ -62,10 +62,10 @@
 			                 {"BoxName": "T3","topcoord":"277","leftcoord":"12","Answervalue":"","QuizText":""},{"BoxName": "T4","topcoord":"387","leftcoord":"12","Answervalue":"","QuizText":""},
 							 {"BoxName": "T5","topcoord":"236","leftcoord":"621","Answervalue":"","QuizText":""},{"BoxName": "T6","topcoord":"301","leftcoord":"621","Answervalue":"","QuizText":""},
 							 {"BoxName": "T7","topcoord":"395","leftcoord":"621","Answervalue":"","QuizText":""}],
-               "Options": [{"OptionNumber": "A","OptionTitle": "Occipital artery"},{"OptionNumber": "B","OptionTitle": "Superficial temporal artery"},
-                   {"OptionNumber": "C","OptionTitle": "External carotid artery"},{"OptionNumber": "D","OptionTitle": "Internal carotid artery"},
-                   {"OptionNumber": "E","OptionTitle": "Facial artery"},{"OptionNumber": "F","OptionTitle": "Vertebral artery"},
-                   {"OptionNumber": "G","OptionTitle": "Common carotid artery"}],
+               "Options": [{"OptionNumber": "A","OptionTitle": "Occipital artery","textalign":"left"},{"OptionNumber": "B","OptionTitle": "Superficial temporal artery","textalign":"left"},
+                   {"OptionNumber": "C","OptionTitle": "External carotid artery","textalign":"left"},{"OptionNumber": "D","OptionTitle": "Internal carotid artery","textalign":"left"},
+                   {"OptionNumber": "E","OptionTitle": "Facial artery","textalign":"right"},{"OptionNumber": "F","OptionTitle": "Vertebral artery","textalign":"right"},
+                   {"OptionNumber": "G","OptionTitle": "Common carotid artery","textalign":"right"}],
                "correctResponse": [{"OptionBox": "T1","Answer": "B"},{"OptionBox": "T2","Answer": "A"},{"OptionBox": "T3","Answer": "D"},{"OptionBox": "T4",
                    "Answer": "F"},{"OptionBox": "T5","Answer": "C"},{"OptionBox": "T6","Answer": "E"},{"OptionBox": "T7","Answer": "G"}]
            },