Added "More Info" page logic

droarty · Dec 6, 2014 · c401565 · c401565
1 parent 141f4fd
commit c401565
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 5 deletions.
diff --git a/javascript/js/controllers.js b/javascript/js/controllers.js
@@ -154,7 +154,36 @@ bpControllers.controller('ComparePredictionCtrl', ['$scope','$rootScope', '$loca
 bpControllers.controller('MoreInfoCtrl', ['$scope','$rootScope', '$location','DataSrc',
     function ($scope,$rootScope, $location,DataSrc) {
         activateTab("#/moreInfo");
-    }
+        var watcher=function(a){
+            var createWatcher=function(nm){return function(){
+                    $scope.$watch(nm,function(){
+                        console.log(nm+":"+$scope[nm]);
+                        if($scope[nm]) $("."+nm).show();
+                        else  $("."+nm).hide();
+                    })
+                };};
+            for(var i=0;i<a.length;i++){
+                createWatcher(a[i])();
+            }
+        }
+        watcher(["middleDistance", "endDistance","diameter20","diameter30"]);
+/*        $scope.$watch('middleDistance',function(newval, oldval){
+            if($scope.middleDistance) $(".middleDistance").show();
+            else $(".middleDistance").hide();
+        });
+        $scope.$watch('endDistance',function(newval, oldval){
+            if($scope.endDistance) $(".endDistance").show();
+            else $(".endDistance").hide();
+        });
+        $scope.$watch('diameter20',function(newval, oldval){
+            if($scope.diameter20) $(".diameter20").show();
+            else $(".diameter20").hide();
+        });
+        $scope.$watch('diameter30',function(newval, oldval){
+            if($scope.diameter30) $(".diameter30").show();
+            else $(".diameter30").hide();
+        });
+*/    }
 ]);
 
 /* Student documents and draws solution */

diff --git a/partials/moreInfo.html b/partials/moreInfo.html
@@ -4,10 +4,24 @@ <h1>More Info</h1>
         Click on the information below that you think you will need to solve this problem.
     </div>
     <ul>
-        <li>Length of bar</li>
-        <li>Diameter of 20lb weight</li>
-        <li>Diameter of 30lb weight</li>
-        <li>... </li>
+        <li><input type="checkbox" ng-model="middleDistance"  />Distance between weights</li>
+        <li><input type="checkbox" ng-model="endDistance" />Distance from end of the bar to weight</li>
+        <li><input type="checkbox"  ng-model="diameter20"  />Diameter of 20lb weight</li>
+        <li><input type="checkbox"  ng-model="diameter30" />Diameter of 30lb weight</li>
+
     </ul>
+            <svg width="650" height="200"  ng-mousemove="movePoint($event)"  ng-mouseup="allowmove=false" ng-mouseleave="allowmove=false" id="pointPicker">
+            <line x1="0" x2="600" y1="100" y2="100" stroke="black" stroke-width="12"/>
+            <ellipse cx="50" cy="100" rx="10" ry="50"/>
+            <ellipse cx="550" cy="100" rx="14" ry="80"/>
+            <text stroke="white" x="45" y="105" font-family="Verdana" font-size="10">20 lbs</text>
+            <text stroke="white" x="545" y="105" font-family="Verdana" font-size="10">30 lbs</text>
+            <text class="middleDistance" stroke="red" x="280" y="85" font-family="Verdana" font-size="10">100 inches</text>
+            <text class="endDistance" stroke="red" x="5" y="85" font-family="Verdana" font-size="10">8 inches</text>
+            <text class="endDistance" stroke="red" x="565" y="85" font-family="Verdana" font-size="10">8 inches</text>
+            <text class="diameter20" stroke="red" x="65" y="125" font-family="Verdana" font-size="10">16 inches</text>
+            <text class="diameter30" stroke="red" x="480" y="125" font-family="Verdana" font-size="10">24 inches</text>
+        </svg>
+
     <div class="bpContinue"><a class="btn btn-info" href="#/solveIt">Done, Go To Next Step</a></div>
 </div>