Layout corrected - messages on answer

jmelis · Mar 22, 2011 · fa070b1 · fa070b1
1 parent 69c33cb
commit fa070b1
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 79 deletions.
diff --git a/web/INTERROGACION.gif b/web/INTERROGACION.gif
diff --git a/web/fermat.html b/web/fermat.html
@@ -40,31 +40,31 @@
 						<div class="round-border top">
 							<div id="webcam">
 								<div id="flashContent"> 
-									<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="380" height="304" id="webcam" align="middle"> 
-										<param name="movie" value="images/webcam.swf" /> 
-										<param name="quality" value="high" /> 
-										<param name="bgcolor" value="#ffffff" /> 
-										<param name="play" value="true" /> 
-										<param name="loop" value="true" /> 
-										<param name="wmode" value="window" /> 
-										<param name="scale" value="showall" /> 
-										<param name="menu" value="true" /> 
-										<param name="devicefont" value="false" /> 
-										<param name="salign" value="" /> 
-										<param name="allowScriptAccess" value="sameDomain" /> 
-										<!--[if !IE]>--> 
-										<object type="application/x-shockwave-flash" data="images/webcam.swf" width="380" height="304"> 
-											<param name="movie" value="images/webcam.swf" /> 
-											<param name="quality" value="high" /> 
-											<param name="bgcolor" value="#ffffff" /> 
-											<param name="play" value="true" /> 
-											<param name="loop" value="true" /> 
-											<param name="wmode" value="window" /> 
-											<param name="scale" value="showall" /> 
-											<param name="menu" value="true" /> 
-											<param name="devicefont" value="false" /> 
-											<param name="salign" value="" /> 
-											<param name="allowScriptAccess" value="sameDomain" /> 
+									<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="380" height="305" id="webcam" align="middle">
+										<param name="movie" value="images/webcam.swf" />
+										<param name="quality" value="high" />
+										<param name="bgcolor" value="#ffffff" />
+										<param name="play" value="true" />
+										<param name="loop" value="true" />
+										<param name="wmode" value="window" />
+										<param name="scale" value="showall" />
+										<param name="menu" value="true" />
+										<param name="devicefont" value="false" />
+										<param name="salign" value="" />
+										<param name="allowScriptAccess" value="sameDomain" />
+										<!--[if !IE]>-->
+										<object type="application/x-shockwave-flash" data="images/webcam.swf" width="380" height="305">
+											<param name="movie" value="images/webcam.swf" />
+											<param name="quality" value="high" />
+											<param name="bgcolor" value="#ffffff" />
+											<param name="play" value="true" />
+											<param name="loop" value="true" />
+											<param name="wmode" value="window" />
+											<param name="scale" value="showall" />
+											<param name="menu" value="true" />
+											<param name="devicefont" value="false" />
+											<param name="salign" value="" />
+											<param name="allowScriptAccess" value="sameDomain" />
 										<!--<![endif]--> 
 										<!--	<a href="http://www.adobe.com/go/getflash"> 
 												<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> 
@@ -77,8 +77,11 @@
 							</div>
 						</div>
 						<div id="code-input" class="round-border">
+							<div id="information-display">
+								<p></p>
+							</div>
 							<form action="fermat_submit" method="get" accept-charset="utf-8">
-									<input id="code-text" type="text" name="code" placeholder="Introduce el código o respuesta...">
+									<input id="code-text" type="text" name="code" placeholder="Introduce el código o respuesta..." />
 									<div id="code-submit">OK</div>
 									<div class="clear"></div>
 							</form>

diff --git a/web/images/webcam.swf b/web/images/webcam.swf
diff --git a/web/javascripts/application.js b/web/javascripts/application.js
@@ -1,5 +1,6 @@
 var GAME_DURATION = 600;
 var WINNING_QUESTIONS = 3;
+var MAX_TRIES = 3;
 
 var timer = {};
 
@@ -8,13 +9,20 @@ var questions=[
 		file: "acertijo2.ggb",
 		answer: 2002,
 		kind: "geogebra",
-		text: "En la pantalla de arriba puedes ver cuatro vistas diferentes de un mismo cubo. coloca la cara que falta en la cuarta vista con el color que le corresponde"
+		text: "En la pantalla de arriba puedes ver cuatro vistas diferentes de un mismo cubo. Coloca la cara que falta en la cuarta vista con el color que le corresponde."
+	},
+	{
+		file: "ACERTIJO_3.ggb",
+		answer: 2002,
+		kind: "geogebra",
+		text: "Arrastra hasta el hueco gris el cubo resultante al doblar la figura formada por los seis cuadrados de colores.Cuando lo hayas colocado, aparecerá un código."
 	}
 ];
 
 var question;
 
 var right_answers;
+var current_tries;
 
 
 
@@ -39,7 +47,6 @@ var app = {
 		});
 
 		//ocultar calavera
-		//poner la maqueta en el estado inicial
 	},
 
 	showScrollOnStartButtonClick: function(){
@@ -97,6 +104,7 @@ var app = {
 	},
 
 	loadQuestion: function(){
+		current_tries = 0;
 		question = questions.pop();
 		app.questionLoader(question);
 	},
@@ -109,39 +117,58 @@ var app = {
 
 	die: function(){
 		alert('LA HAS PALMAO');
+		//parar timers
 	},
 
 	setupListeners: function(){
-		$('#fermat_submit').submit(function() {
-			if(question.answer == $('#code_text').value()){
-				
+		$('#code-submit').click(function() {
+			// question answered right
+			if(question.answer == $('#code-text').val()){
 				right_answers++;
+				// player wins
 				if(right_answers == WINNING_QUESTIONS){
 					//arduino go back to initial position
 					app.win();
 				}
+				//player hasnt won yet
 				else{
 					//arduino stop 30s
-					app.loadQuestion();
-					setTimeout("app.reactivateTimer()",30000);
-				}
-
+					$('#information-display p').css({color:'green'}).html('¡Respuesta correcta! ' + (WINNING_QUESTIONS- right_answers) + ' más para ganar.').fadeIn(500).fadeOut(3000,function() {
+						$('#code-text').val("");
+						app.loadQuestion();
+						setTimeout("app.reactivateTimer()",30000);
+					});					
+				}		
 			}
+			// question answered wrong
 			else{
-				$('')
-			}
-
+				current_tries ++;
+				// too many tries
+				if(current_tries == 3){
+					$('#information-display p').css({color:'red'}).html('¡Demasiados fallos, siguiente pregunta!').fadeIn(500).fadeOut(3000,function() {
+						$('#code-text').val("");
+						app.loadQuestion();
+						//pone contador marcha atras de 30s por haber fallado
+					});					
+				}
+				// still trying
+				else{
+					$('#code-text').val("");
+					$('#information-display p').css({color:'red'}).html('¡Respuesta incorrecta! Penalización de 30 s').fadeIn(500).fadeOut(3000);
+				}
+			}	
 			return false;
 		});
 	},
+
 	// private
 	questionLoader: function(question) {
 		switch(question.kind)
 		{
 		case "geogebra":
 		  visual_code = '	<applet name="ggbApplet" code="geogebra.GeoGebraApplet" archive="questions/geogebra.jar"\
 				codebase="./"\
-				width="470" height="304"mayscript="true">\
+				width="470" height="305"mayscript="true">\
 				<param name="filename" value="questions/' + question.file + '"/>\
 				<param name="java_arguments" value="-Xmx512m -Djnlp.packEnabled=true" />\
 				<param name="cache_archive" value="questions/geogebra.jar, questions/geogebra_main.jar, questions/geogebra_gui.jar, questions/geogebra_cas.jar, questions/geogebra_export.jar, questions/geogebra_properties.jar" />\

diff --git a/web/questions/ACERTIJO_3.ggb b/web/questions/ACERTIJO_3.ggb
diff --git a/web/questions/ACERTIJO_3CONTEXTO.ggb b/web/questions/ACERTIJO_3CONTEXTO.ggb
diff --git a/web/questions/acertijo2.html b/web/questions/acertijo2.html
diff --git a/web/stylesheets/fermat.css b/web/stylesheets/fermat.css
@@ -15,9 +15,11 @@ body{
 	margin:0;
 	background-color:#D4E0EC;
 	font-family:"Lucida Grande", "Helvetica", "Arial", sans-serif;
+	font-size:14px;
 	overflow: hidden;
 }
 
+
 #wrapper{
 	position:relative;
 }
@@ -110,14 +112,19 @@ body{
 			}
 
 				#webcam{
-					height:304px; /* DELETE ALL HEIGHTS */
+					height:305px; /* DELETE ALL HEIGHTS */
 				}
 
 				#code-input{
-					height:38px;
-					padding: 40px 33px;
+					height:118px;
+					padding: 0px 33px;
 				}
-
+					#information-display{
+						height:30px;
+						padding:5px 5px 5px 0;
+					}
+
+
 					#code-text{
 						width:270px;
 						height:35px;
@@ -152,17 +159,25 @@ body{
 
 			#right-column{
 				float:right;
-				width:496px;
+				width:494px;
 			}
 
 				#visual{
-					height:302px;
+					height:305px;
 				}
 
 
 				#statement{
 					height:92px;
+					border:1px solid #919191;
 				}
+
+					#statement p{
+						font-size:12px;
+						padding: 0;
+						margin: 5px;
+						text-align: justify;
+					}
 
 		#window-bottom{
 			height:31px;
@@ -176,7 +191,6 @@ body{
 }
 
 .frame{
-	border:1px solid #919191;
 	background-color:#FEFEFE;
 }
 

diff --git a/web/texto_codigo.txt b/web/texto_codigo.txt