Math apps updates

Brings improvements

Balance
- No more empty weight
- Left weight should not go to right scale
- Reducing the size of half

Morpion
- Correction de l'évaluation des lignes

Train
- Add <1 and <0.1 options

Signed-off-by: Didier Bathily <didier.bathily@njin.fr>

resources/library/interactivities/Balance.wgt/config.xml

@@ -3,8 +3,8 @@
 		xmlns:ub="http://uniboard.mnemis.com/widgets"
         id="http://www.njin.fr/sankore/apps/balance" 
         version="1.0"
-        width="1025"
-        height="880" 
+        width="540"
+        height="450" 
         ub:resizable="true">     
    
 		<name>La Balance</name>

resources/library/interactivities/Balance.wgt/css/main.css

@@ -15,7 +15,7 @@
 }
 
 #scalesWrapper {
-	padding: 0px 100px 200px;
+	padding: 0px 100px 100px;
 	position: relative;
 }
 
@@ -29,10 +29,10 @@
 
 .scale {
 	position: absolute;
-	width: 250px;
+	width: 125px;
 	height: 0;
-	padding: 200px 45px 50px;
-	top: 145px;
+	padding: 90px 20px 35px;
+	top: 72px;
 	background: url(images/scale.png) no-repeat center bottom;
 }
 
@@ -45,12 +45,12 @@
 
 #leftScale {
 	left: 0;
-	margin-left: -150px;
+	margin-left: -75px;
 }
 
 #rightScale {
 	right: 0;
-	margin-right: -150px;	
+	margin-right: -75px;	
 }
 
 #tray {
@@ -58,27 +58,27 @@
 	background-color: red;
 	top: 50%;
 	margin-top: -1px;
-	width: 550px;
-	height: 288px;
+	width: 225px;
+	height: 144px;
 	background: url("images/scales.png") no-repeat center;
 }
 
 #graduations {
-	width: 100px;
-	height: 30px;
+	width: 50px;
+	height: 15px;
 	position: absolute;
 	top: 0;
 	left: 50%;
-	margin-left: -50px;
+	margin-left: -25px;
 	background: url(images/graduations.png) center no-repeat;
 }
 
 #pivot {
 	position: absolute;
-	width: 80px;
-	height: 80px;
-	left: 235px;
-	top: 106px;
+	width: 40px;
+	height: 40px;
+	left: 93px;
+	top: 52px;
 	background: url(images/pivot.png) center no-repeat;
 }
 
@@ -101,14 +101,14 @@
 
 	text-indent: -100px;
 
-	width: 68px;
-	height: 70px;
+	width: 34px;
+	height: 34px;
 
 	margin-left: 10px;
 
 	cursor: pointer;
 
-	border-radius: 4px;
+	border-radius: 2px;
 	border: 1px solid rgba(255,255,255, 0.15);
 	background: rgba(0,0,0, 0.15) url(images/weight-add.png) center no-repeat;
 }
@@ -124,15 +124,15 @@
 
 .object input {
 	border: none;
-	width: 40px;
-	padding: none;
-	margin: 0 2px 0 0;
+	width: 100%;
+	padding: 0;
+	margin: 0;
 	
 	text-align: center;
-	font-size: 16px;
+	font-size: 12px;
 
 	color: #000;
-	border-radius: 3px;
+	border-radius: 2px;
 	background-color: #FFF;
 	box-shadow: 0 1px 2px rgba(0,0,0, 0.4);
 }
@@ -140,7 +140,7 @@
 .object .tools {
 	display: none;
 	position: absolute;
-	top: -23px;
+	top: -13px;
 	width: 100%;
 	text-align: center;
 }
@@ -150,8 +150,8 @@
 	position: relative;
 	overflow: hidden;
 	cursor: pointer;
-	width: 22px;
-	height: 22px;
+	width: 11px;
+	height: 11px;
 	text-indent: -100px;
 	border: none;
 	margin: 0;
@@ -180,7 +180,7 @@
 	position: absolute;
 	width: 100%;
 	height: 20px;
-	top: 72px;
+	top: 36px;
 	border-radius: 4px;
 	box-shadow: 0 3px 0 #999, 0 1px 2px rgba(0,0,0, .65);
 	background-color: #CCC;
@@ -198,9 +198,9 @@
 #weights {
 	display: none;
 	position: absolute;
-	top: 40px;
-	right: 40px;
-	width: 230px;
+	top: 20px;
+	right: 0px;
+	width: 160px;
 }
 
 .onEdit #weights {
@@ -213,21 +213,26 @@
 
 .weight {
 	position: relative;
-	width: 64px;
-	height: 70px;
-
+	
+	width: 32px;
+	height: 35px;
+	
 	margin-left: 10px;
 	margin-bottom: 30px;
 
-	font-size: 16px;
+	font-size: 12px;
 	text-align: center;
 	color: #CCC;
 	text-shadow: 0 -1px 0 #000;
 }
 
+.weight .unit {
+	font-size: 10px;
+}
+
 .weight .amount {
 	height: 100%;
-	padding: 4px 4px 0;
+	padding: 4px 2px 0;
 	border-radius: 4px;
 	border: 1px solid rgba(255,255,255, 0.15);
 	background-color: rgba(0,0,0, 0.15);
@@ -235,10 +240,10 @@
 
 .weight > div.bg {
 	position: absolute;
-	left: -3px;
+	left: -2px;
 	bottom: -18px;
-	width: 70px;
-	height: 64px;
+	width: 35px;
+	height: 32px;
 	background: url(images/weight.png) no-repeat center bottom;
 }
 

resources/library/interactivities/Balance.wgt/js/main.js

@@ -1,14 +1,47 @@
+var weighValues = [500,200,100,50,20,10];
+
 function onTemplateLoadedCallback(app) {
-	$("#weights").append($(Mustache.render(weightTemplate, {weight: 500})));
-	$("#weights").append($(Mustache.render(weightTemplate, {weight: 200})));
-	$("#weights").append($(Mustache.render(weightTemplate, {weight: 100})));
-	$("#weights").append($(Mustache.render(weightTemplate, {weight: 50})));
-	$("#weights").append($(Mustache.render(weightTemplate, {weight: 20})));
-	$("#weights").append($(Mustache.render(weightTemplate, {weight: 10})));
+	$.each(weighValues, function(){
+		$("#weights").append($(Mustache.render(weightTemplate, {weight: this})));
+	});
 	
 	$("#weights > .weight").draggable({helper: "clone"});	
+
+	$("#leftScale").droppable({
+		accept: ".object",
+		drop: function(event, ui) {
+			if($(ui.draggable).hasClass("inScale"))
+				return;
+
+			var object = $(ui.draggable).clone();
+			object.data("weight", $(ui.draggable).data("weight"));
+
+			object.addClass("inScale");
+			$("#leftScale").append(object);
+			
+			placeObject($("#leftScale"), object);
+
+			refreshScales();
+
+			object.draggable({
+				stop: function(event, ui) {
+					if($(ui.helper).hasClass("onOut")) {
+						$(ui.helper).remove();
+						refreshScales();
+					}
+				}
+			});
+		},
+		out: function(event, ui) {
+			$(ui.draggable).addClass("onOut");
+		},
+		over: function(event, ui) {
+			$(ui.draggable).removeClass("onOut");
+		}
+	});
+
 	$("#rightScale").droppable({
-		accept: ".weight",
+		accept: ".weight.right",
 		drop: function(event, ui) {
 			if($(ui.draggable).hasClass("inScale"))
 				return;
@@ -72,6 +105,10 @@ function objectForGUID(app, guid) {
 	window.object = guid;
 	var objectUi = $(Mustache.render(objectTemplate, window));
 	var weight = getWeightFor(app.parameters, guid);
+	
+	if(!app.onEdit && (weight == undefined || $.trim(weight) == ""))
+		weight = weighValues[Math.floor(Math.random()*weighValues.length)];
+	
 	if(weight !== undefined) {
 		objectUi.data("weight", weight);
 		objectUi.find("input[name=weight]").val(weight);
@@ -137,8 +174,8 @@ function placeObject($container, $object) {
 
 	var count = $container.children().size() - 1;
 
-	var left = width * (count % 4) + 25;
-	var bottom = height * (Math.floor(count / 4)) + 40;
+	var left = width * (count % 4) + 5;
+	var bottom = height * (Math.floor(count / 4)) + 12;
 	
 	log("Place at ["+left+" , "+bottom+"]");
 	$object.css("left", left+"px").css("bottom", bottom+"px");
@@ -215,39 +252,6 @@ function reloadApp(app) {
 	}
 	
 	refreshScales();
-		
-	$("#leftScale").droppable({
-		accept: ".object",
-		drop: function(event, ui) {
-			if($(ui.draggable).hasClass("inScale"))
-				return;
-
-			var object = $(ui.draggable).clone();
-			object.data("weight", $(ui.draggable).data("weight"));
-
-			object.addClass("inScale");
-			$("#leftScale").append(object);
-			
-			placeObject($("#leftScale"), object);
-
-			refreshScales();
-
-			object.draggable({
-				stop: function(event, ui) {
-					if($(ui.helper).hasClass("onOut")) {
-						$(ui.helper).remove();
-						refreshScales();
-					}
-				}
-			});
-		},
-		out: function(event, ui) {
-			$(ui.draggable).addClass("onOut");
-		},
-		over: function(event, ui) {
-			$(ui.draggable).removeClass("onOut");
-		}
-	});
 	
 	if(app.onEdit) {
 		

resources/library/interactivities/Balance.wgt/js/templates.js

@@ -23,8 +23,8 @@ var objectTemplate =
 				'<div class="tools">'+
 					'<button role="remove">{{fr.njin.i18n.balance.parameters.label.remove}}</button>'+
 				'</div>'+
-				'<div class="amount"><input type="text" name="weight">g</div><div class="bg"></div>'+
+				'<div class="amount"><input type="text" name="weight"></div><div class="bg"></div>'+
 			'</div>';
 			
 var weightTemplate = 
-			'<div id="{{object}}" class="weight w{{weight}}" data-weight="{{weight}}"><div class="amount">{{weight}}g</div><div class="bg"></div></div>';						
+			'<div id="{{object}}" class="weight right w{{weight}}" data-weight="{{weight}}"><div class="amount">{{weight}}</div><div class="bg"></div></div>';						

resources/library/interactivities/Morpion.wgt/js/main.js

@@ -148,7 +148,8 @@ function isGameEnd(i, j) {
 }
 
 function isCellsWin(cells) {
-	if((player == cells.eq(0).data("player") == cells.eq(1).data("player") == cells.eq(2).data("player")))
+	var n = ((3*player) - (parseInt(cells.eq(0).data("player")) + parseInt(cells.eq(1).data("player")) + parseInt(cells.eq(2).data("player"))));
+	if( n == 0 )
 		return cells;
 	return null;
 }

resources/library/interactivities/Train.wgt/js/main.js

@@ -8,9 +8,18 @@ function revert($e) {
 		elmt.className = elmt.className.replace(/(d(\d+))/, "");
 }
 
+function getN(range) {
+	if(range > 1)
+		return Math.floor(Math.random()*range);
+	else if(range == 1)
+		return Math.round(Math.random()*10)/10; 
+	else if(range == 0.1)
+		return Math.round(Math.random()*0.1*100)/100; 
+}
+
 function reloadApp(app) {
 	var operator = app.parameters.value("operator");
-	var range = parseInt(app.parameters.value("range"));
+	var range = parseFloat(app.parameters.value("range"));
 	var count = parseInt(app.parameters.value("count"));
 	
 	$scene = $("#scene");
@@ -25,16 +34,12 @@ function reloadApp(app) {
 	var meeted = [];
 
 	for (var i = 0; i < count; i++) {
-		var n = Math.floor(Math.random()*range);
-	
-		while($.inArray(n, meeted) != -1) {
-			if(range > 1)
-				n = Math.floor(Math.random()*range);
-			else
-				n = Math.round(Math.random()*range*100)/100;
-		}
-			
+
+		var n = getN(range);
 		
+		while($.inArray(n, meeted) != -1)
+			n = getN(range);
+
 		meeted.push(n);
 	
 		$label = $("<div id='l"+i+"' class='label'>"+n+"</div>");

resources/library/interactivities/Train.wgt/js/templates.js

@@ -31,6 +31,7 @@ var parametersTemplate =
 			'<div class="inline">'+
 				'<label>{{fr.njin.i18n.train.parameters.label.range}}'+
 					'<select name="range" role="parameter">'+
+						'<option value="0.1">< 0.1</option>'+
 						'<option value="1">< 1</option>'+
 						'<option value="10">< 10</option>'+
 						'<option value="100">< 100</option>'+						

resources/library/interactivities/Transformation.wgt/css/main.css

@@ -136,6 +136,7 @@
 }
 .card .picture > div img {
 	max-width: 100%;
+	max-height: 100%;
 	vertical-align: middle;
 }