Options alignment done

Amit Kumar
1 parent c3cb2f88
Showing 5 changed files with 92 additions and 33 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/LabExercController.js
400-SOURCECODE/AIAHTML5.Web/app/views/LabExerc/LabExerc-view.html
400-SOURCECODE/AIAHTML5.Web/app/views/LabExerc/lab-exercises-detail.html
400-SOURCECODE/AIAHTML5.Web/content/data/json/le/CS.json
400-SOURCECODE/AIAHTML5.Web/content/data/json/le/RP.json
 /// <reference path="../../content/data/json/le/LabExercise.js" />
-AIA.controller("LabExercController", ["$scope", "$rootScope", "pages", "$log", '$http', 'DataService', '$filter', '$location', '$document',
-function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location, $document) {
+AIA.controller("LabExercController", ["$scope", "$rootScope", "pages", "$log", '$http', 'DataService', '$filter', '$location', '$document', '$sce',
+function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location, $document, $sce) {
+    $scope.$sce = $sce;
     $scope.LabExerciseName;
     $scope.LabExerciseQuiz = null;
     $scope.TotalNumberofQuiz = "0";
@@ -46,14 +47,14 @@ function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location
     //to get all lab exercise modules from json files
     $scope.getLabExerciseModules = function () {
         //debugger;
-        $scope.LabExerciseModules = null;
+        $scope.LabExerciseModules1 = null;
         var commondataJsonPath = '~/../content/data/json/le/LabExercise.json';
         DataService.getAnotherJson(commondataJsonPath).then(
         function (result) {
             //debugger;
             //alert(JSON.stringify(result));
-            $scope.LabExerciseModules = result;
+            $scope.LabExerciseModules1 = result;
         },
         function (error) {
             console.log(error.statusText)
@@ -83,18 +84,18 @@ function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location
         DataService.getAnotherJson(commondataJsonPath).then(
         function (result) {
             //debugger;
-           // alert(JSON.stringify(result.LabExercise));
+            // alert(JSON.stringify(result.LabExercise));
             $.each(result.LabExercise, function (index, value) {
                 $scope.LabExerciseName = result.LabExercise[index].Topic;
                 if (result.LabExercise[index].Slug == keywords.topic) {
-                    
+
                     $scope.TotalNumberofQuiz = result.LabExercise[index].NumberofQuestions;
                     $.each(result.LabExercise[index].Questions, function (index1, value1) {
                         if (result.LabExercise[index].Questions[index1].Number == $scope.quiznumber) {
                             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;
                             }
@@ -104,9 +105,9 @@ function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location
                                 $scope.LabExerciseModules = result.LabExercise[index].Questions[index1];
                                 $scope.activityTitle = result.LabExercise[index].Questions[index1].activityTitle;
                                 $scope.Title = result.LabExercise[index].Questions[index1].Title;
-                                $scope.Imagepath = keywords.topic+"/"+result.LabExercise[index].Questions[index1].ImagePath;
+                                $scope.Imagepath = keywords.topic + "/" + result.LabExercise[index].Questions[index1].ImagePath;
                             }
-                            
+
                         }
                     });
                     //$scope.quiznumber++;
@@ -163,10 +164,10 @@ function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location
         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;
@@ -174,7 +175,7 @@ function ($scope, $rootScope, pages, log, $http, DataService, $filter, $location
                                 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);
                                             }
@@ -285,4 +286,11 @@ AIA.directive(&#39;imageonload&#39;, function () {
             });
         }
     };
-});
 \ No newline at end of file
+});
+
+//angular.module('app')
+//.filter('to_trusted', ['$sce', function ($sce) {
+//    return function (text) {
+//        return $sce.trustAsHtml(text);
+//    };
+//}]);
 \ No newline at end of file
@@ -4,7 +4,7 @@
         <div class="col-sm-12">
-            <div class="col-sm-3 col-lg-2" ng-repeat="labExerciseTitle in LabExerciseModules.LabExercise">
+            <div class="col-sm-3 col-lg-2" ng-repeat="labExerciseTitle in LabExerciseModules1.LabExercise">
                 <div class="thumbnail">
                     <a href="" ng-click="getLabExerciseTitle(labExerciseTitle)">
                         <img title="" alt="" src="~/../content/images/{{labExerciseTitle.TopicImagePath}}">
@@ -27,21 +27,32 @@
                         <div class="panel-body" style="padding:2px;overflow:scroll">
                             <div id="textblock" style="margin:20px;">
                                 <div style="margin:14px;" ng-repeat="optionbox in LabExerciseModules.OptionBox" droppable="true">{{optionbox.QuizText}}</div>
+                                <!--<ul>
+                                    <li ng-repeat="optionbox in LabExerciseModules.OptionBox" droppable="true" ng-bind-html="'{{optionbox.QuizText}}' | to_trusted"></li>
+                                </ul>-->
                             </div>
                             <div align="center" class="dragger">
-                                <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 />
-                                    </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 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>
+                                <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 />
+                                        </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-10" style="margin-left:100px;margin-top:0px;" id="divoptions" droppable="true">
-                                    <!--<div class="col-sm-3 col-lg-3  ui-draggable" >-->
-                                    <div draggable="true" ng-repeat="option in LabExerciseModules.Options" ng-style="{'width': '150px', 'height':'40px','font-size':'8px;','valign':'middle','text-align':'center', 'vertical-align:middle','background-color': '#808080','margin':'5px !important'} " 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 class="col-sm-12" style="margin-left:100px;margin-top:0px;" 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>
                             </div>
                         </div>
@@ -14,10 +14,10 @@
 			                 {"BoxName": "T3","topcoord":"194","leftcoord":"23","Answervalue":"","QuizText":""},{"BoxName": "T4","topcoord":"168","leftcoord":"960","Answervalue":"","QuizText":""},
 							 {"BoxName": "T5","topcoord":"252","leftcoord":"23","Answervalue":"","QuizText":""},{"BoxName": "T6","topcoord":"210","leftcoord":"960","Answervalue":"","QuizText":""},
 							 {"BoxName": "T7","topcoord":"250","leftcoord":"960","Answervalue":"","QuizText":""},{"BoxName": "T8","topcoord":"292","leftcoord":"960","Answervalue":"","QuizText":""}],
-               "Options": [{"OptionNumber": "A","OptionTitle": "Right brachiocephalic vein"},{"OptionNumber": "B","OptionTitle": "Brachiocephalic artery"},
-                           {"OptionNumber": "C","OptionTitle": "Superior vena cava"},{"OptionNumber": "D","OptionTitle": "Pulmonary trunk"},{"OptionNumber": "E",
-                               "OptionTitle": "Aorta"},{"OptionNumber": "F","OptionTitle": "Right ventricle"},{"OptionNumber": "G","OptionTitle": "Left ventricle"},
-                           {"OptionNumber": "H","OptionTitle": "Right atrium"}],
+               "Options": [{"OptionNumber": "A","OptionTitle": "Right brachiocephalic vein","textalign":"bottom"},{"OptionNumber": "B","OptionTitle": "Brachiocephalic artery","textalign":"bottom"},
+                           {"OptionNumber": "C","OptionTitle": "Superior vena cava","textalign":"bottom"},{"OptionNumber": "D","OptionTitle": "Pulmonary trunk","textalign":"bottom"},
+						   {"OptionNumber": "E","OptionTitle": "Aorta","textalign":"bottom"},{"OptionNumber": "F","OptionTitle": "Right ventricle","textalign":"bottom"},
+						   {"OptionNumber": "G","OptionTitle": "Left ventricle","textalign":"bottom"},{"OptionNumber": "H","OptionTitle": "Right atrium","textalign":"bottom"}],
                "correctResponse": [{"OptionBox": "T1","Answer": "A"},{"OptionBox": "T2","Answer": "C"},{"OptionBox": "T3","Answer": "H"},{"OptionBox": "T4","Answer": "B"},
                            {"OptionBox": "T5","Answer": "E"},{"OptionBox": "T6","Answer": "D"},{"OptionBox": "T7","Answer": "F"},{"OptionBox": "T8","Answer": "G"}]
            },
@@ -30,10 +30,10 @@
 			                 {"BoxName": "T3","topcoord":"214","leftcoord":"23","Answervalue":"","QuizText":""},{"BoxName": "T4","topcoord":"256","leftcoord":"23","Answervalue":"","QuizText":""},
 							 {"BoxName": "T5","topcoord":"412","leftcoord":"23","Answervalue":"","QuizText":""},{"BoxName": "T6","topcoord":"9","leftcoord":"612","Answervalue":"","QuizText":""},
 							 {"BoxName": "T7","topcoord":"101","leftcoord":"612","Answervalue":"","QuizText":""},{"BoxName": "T8","topcoord":"190","leftcoord":"612","Answervalue":"","QuizText":""}],
-               "Options": [{"OptionNumber": "A","OptionTitle": "Left common carotid artery"},{"OptionNumber": "B","OptionTitle": "Brachiocephalic trunk"},
-                           {"OptionNumber": "C","OptionTitle": "Left subclavian artery"},{"OptionNumber": "D","OptionTitle": "Left brachiocephalic vein"},
-                           {"OptionNumber": "E","OptionTitle": "Left pulmonary artery"},{"OptionNumber": "F","OptionTitle": "Inferior vena cava"},
-                           {"OptionNumber": "G","OptionTitle": "Right pulmonary artery"},{"OptionNumber": "H","OptionTitle": "Right pulmonary vein"}],
+               "Options": [{"OptionNumber": "A","OptionTitle": "Left common carotid artery","textalign":"left"},{"OptionNumber": "B","OptionTitle": "Brachiocephalic trunk","textalign":"left"},
+                           {"OptionNumber": "C","OptionTitle": "Left subclavian artery","textalign":"left"},{"OptionNumber": "D","OptionTitle": "Left brachiocephalic vein","textalign":"left"},
+                           {"OptionNumber": "E","OptionTitle": "Left pulmonary artery","textalign":"left"},{"OptionNumber": "F","OptionTitle": "Inferior vena cava","textalign":"right"},
+                           {"OptionNumber": "G","OptionTitle": "Right pulmonary artery","textalign":"right"},{"OptionNumber": "H","OptionTitle": "Right pulmonary vein","textalign":"right"}],
                "correctResponse": [{"OptionBox": "T1","Answer": "B"},{"OptionBox": "T2","Answer": "D"},{"OptionBox": "T3","Answer": "G"},{"OptionBox": "T4","Answer": "H"},
                            {"OptionBox": "T5","Answer": "F"},{"OptionBox": "T6","Answer": "C"},{"OptionBox": "T7","Answer": "A"},{"OptionBox": "T8","Answer": "E"}]
            },
@@ -88,6 +88,46 @@
 						   {"OptionNumber": "G","OptionTitle": "Prostatic part of  urethra"},{"OptionNumber": "H","OptionTitle": "Seminal vesicle"}],
                "correctResponse": [{"OptionBox": "T1","Answer": "A"},{"OptionBox": "T2","Answer": "H"},{"OptionBox": "T3","Answer": "G"},{"OptionBox": "T4","Answer": "F"},
 			                       {"OptionBox": "T5","Answer": "C"},{"OptionBox": "T6","Answer": "B"},{"OptionBox": "T7","Answer": "E"},{"OptionBox": "T8","Answer": "D"}]
+           },{
+               "Number": "7",
+               "Title": "Drag the labels to the correct location on the image.",
+               "activityTitle": "Male Pelvic  Organs (Med) II",
+               "ImagePath":"RP-07.JPG",
+                "OptionBox": [{"BoxName": "T1","topcoord":"159","leftcoord":"7","Answervalue":"","QuizText":""},{"BoxName": "T2","topcoord":"195","leftcoord":"7","Answervalue":"","QuizText":""},
+			                 {"BoxName": "T3","topcoord":"97","leftcoord":"820","Answervalue":"","QuizText":""},{"BoxName": "T4","topcoord":"158","leftcoord":"820","Answervalue":"","QuizText":""}],
+               "Options": [{"OptionNumber": "A","OptionTitle": "Urethra"},{"OptionNumber": "B","OptionTitle": "Prostate gland"},
+                           {"OptionNumber": "C","OptionTitle": "Urinary Bladder"},{"OptionNumber": "D","OptionTitle": "Ejaculatory duct"}],
+               "correctResponse": [{"OptionBox": "T1","Answer": "B"},{"OptionBox": "T2","Answer": "A"},{"OptionBox": "T3","Answer": "C"},{"OptionBox": "T4","Answer": "D"}]
+           },{
+               "Number": "8",
+               "Title": "Complete the statements below.",
+               "activityTitle": "Male Reproductive II",
+               "ImagePath":"",
+                "OptionBox": [{"BoxName": "T1","topcoord":"-191","leftcoord":"-131","Answervalue":"","QuizText":"________________________  is the surgical removal of the foreskin (prepuce) from the glans penis."},
+				              {"BoxName": "T2","topcoord":"-156","leftcoord":"-131","Answervalue":"","QuizText":"________________________  is a condition of undescended testes that can lead to sterility or cancer if not corrected."},
+			                  {"BoxName": "T3","topcoord":"-122","leftcoord":"-131","Answervalue":"","QuizText":"________________________  is the inability to either achieve or maintain an erection."},
+							  {"BoxName": "T4","topcoord":"-88","leftcoord":"-131","Answervalue":"","QuizText":"________________________  is a low sperm count and is one of the main causes of male infertility."},
+							  {"BoxName": "T5","topcoord":"-54","leftcoord":"-131","Answervalue":"","QuizText":"________________________  is a sterilizing procedure for men where the vas deferens is severed and sutured."}],
+               "Options": [{"OptionNumber": "A","OptionTitle": "Circumcision"},{"OptionNumber": "B","OptionTitle": "Cryptorchidism"},
+                           {"OptionNumber": "C","OptionTitle": "Impotence"},{"OptionNumber": "D","OptionTitle": "Oligospermia"},
+						   {"OptionNumber": "E","OptionTitle": "Vasectomy"}],
+               "correctResponse": [{"OptionBox": "T1","Answer": "A"},{"OptionBox": "T2","Answer": "B"},{"OptionBox": "T3","Answer": "C"},{"OptionBox": "T4","Answer": "D"},{"OptionBox": "T5","Answer": "E"}]
+           },{
+               "Number": "9",
+               "Title": "Complete the statements below.",
+               "activityTitle": "Female Reproductive",
+               "ImagePath":"",
+                "OptionBox": [{"BoxName": "T1","topcoord":"-224","leftcoord":"-131","Answervalue":"","QuizText":"________________________  is the monthly discharge of the endometrial lining of the uterus."},
+				              {"BoxName": "T2","topcoord":"-191","leftcoord":"-131","Answervalue":"","QuizText":"________________________  is a womanӳ first menstrual period."},
+			                  {"BoxName": "T3","topcoord":"-156","leftcoord":"-131","Answervalue":"","QuizText":"________________________  is an uncomfortable and often painful menstrual period."},
+							  {"BoxName": "T4","topcoord":"-122","leftcoord":"-131","Answervalue":"","QuizText":"________________________  is the cessation of monthly menstrual periods once a woman is beyond her reproductive years."},
+							  {"BoxName": "T5","topcoord":"-88","leftcoord":"-131","Answervalue":"","QuizText":"________________________  is the surgical removal of the uterus."},
+							  {"BoxName": "T6","topcoord":"-54","leftcoord":"-131","Answervalue":"","QuizText":"________________________  is a sterilizing procedure for women where the uterine tubes are severed and sutured."}],
+               "Options": [{"OptionNumber": "A","OptionTitle": "Menses"},{"OptionNumber": "B","OptionTitle": "Menarchy"},
+                           {"OptionNumber": "C","OptionTitle": "Dysmenorrhea"},{"OptionNumber": "D","OptionTitle": "Menopause"},
+						   {"OptionNumber": "E","OptionTitle": "Hysterectomy"},{"OptionNumber": "F","OptionTitle": "Tubal ligation"}],
+               "correctResponse": [{"OptionBox": "T1","Answer": "A"},{"OptionBox": "T2","Answer": "B"},{"OptionBox": "T3","Answer": "C"},{"OptionBox": "T4","Answer": "D"},
+			                       {"OptionBox": "T5","Answer": "E"},{"OptionBox": "T6","Answer": "F"}]
            }]
       }]
 }
 \ No newline at end of file