|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - DHTML - test matemático- 1 - 2 - 3 - 4 - 5 - 6 - 7
Test Matemático(IV)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Posicionando nuestras imágenes.-
Trás habernos tragado un largo capítulo sobre teoría de CSSP es hora ya de continuar con nuestro test matemático, y para ello lo primero que debemos hacer es situar en pantalla esas imágenes tan bonitas que hemos creado. Manos a la obra.
Como ya sabemos posicionar una capa, vamos a usar una capa para cada imagen. Por ejemplo, si nuestra primera pregunta va a ser cuánto suman 3+ 4= ?, debemos usar una capa para el 3, otra para el 4, otra para el +, otra para el= y otra para ?, y si en el lado derecho damos dos posibles soluciones, 6 y 7, deberemos usar otra capa para cada una de ellas, definiendo los estilos de posición en la cabecera de la página. Además, vamos a colocar un título para la página (con etiquetas HTML normales) y dos pequeños mensajes explicativos. El código para situar todas estas capas es el que sigue:
<html>
<head>
<title>test de numeros</title>
<style type="text/css">
#tres{position:absolute;top:80px;left:30px;}
#mas{position:absolute;top:95px;left:85px;}
#cuatro{position:absolute;top:80px;left:110px;}
#igual{position:absolute;top:95px;left:166px;}
#interrogacion{position:absolute;top:80px;left:193px;}
#seis{position:absolute;top:80px;left:500px;}
#siete{position:absolute;top:80px;left:580px;}
#mensaje1{position:absolute;top:50px;left:5px;font-family:Comic Sans MS;font-size:14px;color:blue;}
#mensaje2{position:absolute;top:50px;left:492px;font-family:Comic Sans MS;font-size:14px;color:#993399;}
</style>
</head>
<body>
<h2 align="center">JUEGO DE MATEMATICAS</h2>
<div id="mensaje1">¿eres capaz de sumar estos dos números?</div>
<div id="tres"><img src="images/3.gif" width="50" height="50" border="0" alt="3"></div>
<div id="mas"><img src="images/mas.gif" width="20" height="20" border="0" alt="más"></div>
<div id="cuatro"><img src="images/4.gif" width="50" height="50" border="0" alt="4"></div>
<div id="igual"><img src="images/igual.gif" width="20" height="20" border="0" alt="igual a"></div>
<div id="interrogacion"><img src="images/interrogacion.gif" width="50" height="50" border="0" alt="interrogación"></div>
<div id="mensaje2">elige una de estas dos</div>
<div id="seis"><img src="images/6.gif" width="50" height="50" border="0" alt="seis"></div>
<div id="siete"><img src="images/7.gif" width="50" height="50" border="0" alt="siete"></div>
</body>
</html>
El resultado de este código lo podemos apreciar en la siguiente ventana.
Activando las imágenes.-
Una vez colocados los números debemos "darles vida" a aquellos que deben reaccionar de algún modo al ser seleccionados por el usuario, es decir, debemos hacerlos interactivos. Esto lo vamos aconseguir mediante código JavaScript.
Debemos crear una función tal que distinga si se ha pulsado la respuesta correcta o no, y en este caso debe controlar el número de veces que se pulsa la incorrecta. Vamos a ver el código de la función y luego la comentamos:
var suma=false;
var contador=0;
function resultado()
{
contador++;
if(contador==3)
{
alert('!TERCER INTENTO FALLIDO!Debes estudias mas');
contador=0;
}
else
{
if (suma==true)
{
alert('!BIEN HECHO! Has acertado');
contador=0;
}
else
{
alert('!LO SIENTO! Vuelve a intentarlo');
}
}
}
Vemos como hemos creado dos variables, suma, de caracter booleano, que va a controlar la acción de la función según si la respuesta elegida es correcta o no, que inicialmente fijamos a false, y contador, variable de tipo numérico que va a guardar el número de veces que se pulsa cualquiera de las respuestas, y que inicialmente igualamos a 0.
La función resultado es llamada cada vez que se pulsa una de las respuestas posibles, y lo primero que hace es aumentar el contador, una unidad cada vez que es llamada. Luego comprueba si es la tercera ocasión en que se ha pulsado una de las repuestas, y si es así lanza un mensaje de alerta indicando que el juego ha acabado. Si no es la tercera pulsación comprueba el valor de la variable suma. Si es true lanza un mensaje de felicitación y si es false lanza un mensaje de error. Tanto si se llega a las tres elecciones con error como si se acierta el resultado el contador lo ponemos de a cero para empezar de nuevo. Así de simple.
Nos queda llamar a la función desde nuestras imágenes de respuesta, lo que vamos a hacer mediante un enlace normal de HTML, pero que en vez de llamar a otra página va a hacerlo a la función que hemos creado, estableciendo antes el valor de la variable suma a true en el caso de la imagen correcta y a false en caso de la equivocada:
<divid="seis"><a href="#"onClick="suma=false;resultado();return false;"><img src="images/6.gif" width="50" height="50" border="0" alt= "seis"></a></div>
<divid="siete"><a href= "#"onClick="suma=true;resultado();return false;"><img src="images/7.gif" width="50" height="50" border="0" alt="siete"></a></div>
Hemos utilizado return false en cada evento onClick para que el enlace establecido en el atributo href, en este caso la llamada a la página #, que no existe, no tenga validez, ya que return false anula la acción propia de href. El código completo de la página queda:
<html>
<head>
<title>test de números</title>
<style type="text/css">
#mensaje1{position:absolute;top:50px;left:5px;font-family:Comic Sans MS;font-size:14px;color:blue;}
#mensaje2{position:absolute;top:50px;left:492px;font-family:Comic Sans MS;font-size:14px;color:#993399;}
#tres{position:absolute;top:80px;left:30px;}
#mas{position:absolute;top:95px;left:85px;}
#cuatro{position:absolute;top:80px;left:110px;}
#igual{position:absolute;top:95px;left:166px;}
#interrogacion{position:absolute;top:80px;left:193px;}
#seis{position:absolute;top:80px;left:500px;}
#siete{position:absolute;top:80px;left:580px;}
</style>
<script language="JavaScript" type="text/javascript">
var suma=false;
var contador=0;
function resultado()
{
contador++;
if(contador==3)
{
alert('!TERCER INTENTO FALLIDO!Debes estudias mas');
contador=0;
}
else
{
if(suma==true)
{
alert('!BIEN HECHO! Has acertado');
contador=0;
}
else
{
alert('!LO SIENTO! Vuelve a intentarlo');
}
}
}
</script>
</head>
<body>
<h2 align="center">JUEGO DE MATEMATICAS</h2>
<div id="mensaje1">¿eres capaz de sumar estos dos números?</div>
<div id="tres"><img src="images/3.gif" width="50" height="50" border="0" alt="3"></div>
<div id="mas"><img src="images/mas.gif" width="20" height="20" border="0" alt="mas"></div>
<div id="cuatro"><img src="images/4.gif" width="50" height="50" border="0" alt="4"></div>
<div id="igual"><img src="images/igual.gif" width="20" height="20" border="0" alt="igual a"></div>
<div id="interrogacion"><img src="images/interrogacion.gif" width="50" height="50" border="0" alt="interrogación"></div>
<div id="mensaje2">elige una de estas dos</div>
<div id="seis"><a href= "#"onClick="suma=false;resultado();return false;"><img src="images/6.gif" width="50" height="50" border="0" alt="seis"></a></div>
<div id="siete"><a href= "#"onClick="suma=true;resultado();return false;"><img src="images/7.gif" width="50" height="50" border="0" alt="siete"></a></div>
</body>
</html>
y su resultado lo podemos apreciar
en la siguiente ventana.
 |
 |