kkkkkkk

Maquetar

Con cada una de las 7 palabras de esta grilla se consigue el nombre de un animal.
Para lograr obtenerlos hay que cambiar de lugar las letras y escribirlas en la otra grilla.
Luego, para verificarlos, hay que pulsar los botones de "4 letras", "5 letras", etc.

G O T A
R U B O R
L I J A B A
T R A M I T E
O P A L I C E N
P O R C I O N E S
N E U R A L G I C A

viernes, 14 de agosto de 2020

Anagrama Animales 1

 <!DOCTYPE html>

<html>

<head>

<title>Maquetar</title>


<style>


.x2 {

  width: 130px;

  height: 28px; border:1px blue solid; }


.y2 {

  width: 50px;

  height: 30px; border:none; }


.bb1 {

  width: 30px;

  height: 30px;

   text-align: center;

  font-size: 2em; border-top:1px; border-bottom: 1px; border-left: 1px; border-right: 1px; }



.bbb1 {

  width: 32px;

  height: 32px;

   text-align: center;

  font-size: 1.5em; border:2px solid; }



td { border:2px solid }


#TODO { width:1000px; 

             height:800px; 

             margin:0.5em auto; 

             padding:0.5em; }



#A001 { width:980px; 

         height:31%; 

         background:#FFF; 

         margin:0.1em auto; 

         border: 3px black solid; 

         border-radius:0.5em; }


#G001 { width:48%; 

         height:98%;

         background:#FFF; 

         font-size: 1.5em;

         margin-left:1em;

         margin-right:1em;

         border: 1px black solid;  

         border-radius:0.5em;

         float: left; }


#S001 { width:14%; 

         height:98%;

         background:#FFF; 

         margin:0.1em auto; 

         border-radius:0.5em;

         float: left; }


#R001 { width:5; 

         height:98%;

         background:#FFF; 

         margin:0.1em auto; 

         border-radius:0.5em;

         float: left; }



#B001 { width:980px; 

         height:60%; 

         background:#FFF; 

         margin:0.1em auto; 

         border:3px black solid; 

         border-radius:0.5em; }


#P001 { width:45%; 

         height:98%;

         background:#FFF; 

         margin-left:0.5em;  

         margin-top:0.5em;  

         border-radius:0.5em;

         float: left; }


#Q001 { width:45%; 

         height:98%;

         background:#FFF; 

         margin-left:0.5em;  

         margin-top:0.5em;  

         border-radius:0.5em;

         float: left; }



</style>


</head>


<body bgcolor="#226BDA">

   


<div id="TODO">



<div id="A001">


<div id="G001">

<p> Con cada una de las 7 palabras de esta grilla se consigue el nombre de un animal. 

<br> Para lograr obtenerlos

hay que cambiar de lugar las letras y escribirlas en la otra grilla.  

<br> Luego, para verificarlos, hay que pulsar los botones de "4 letras", "5 letras", etc. </p>

</div> 


<div id="R001">

<table>

<tr>

<td class="y2"> <input type = button value = "4 LETRAS" onclick = bb()> </td> 

</tr>

<tr>

<td class="y2"> <input type = button value = "5 LETRAS" onclick = cc()> </td> 

</tr>

<tr>

<td class="y2"> <input type = button value = "6 LETRAS" onclick = dd()> </td> 

</tr>

<tr>

<td class="y2"> <input type = button value = "7 LETRAS" onclick = ee()> </td> 

</tr>

<tr>

<td class="y2"> <input type = button value = "8 LETRAS" onclick = ff()> </td> 

</tr>

<tr>

<td class="y2"> <input type = button value = "9 LETRAS" onclick = gg()> </td> 

</tr>

<tr>

<td class="y2"> <input type = button value = "10 LETRAS" onclick = hh()> </td> 

</tr>

</table>

</div>


<div id="S001"> 

<table>

<tr>

<td class="x2"> <div id="mensaje2" style="text-align: center; color: blue; font-size:15px;" ></div> </td> 

</tr>

<tr>

<td class="x2"> <div id="mensaje3" style="text-align: center; color: blue; font-size:15px;" ></div> </td> 

</tr>

<tr>

<td class="x2"> <div id="mensaje4" style="text-align: center; color: blue; font-size:15px;" ></div> </td> 

</tr>

<tr>

<td class="x2"> <div id="mensaje5" style="text-align: center; color: blue; font-size:15px;" ></div> </td> 

</tr>

<tr>

<td class="x2"> <div id="mensaje6" style="text-align: center; color: blue; font-size:15px;" ></div> </td> 

</tr>

<tr>

<td class="x2"> <div id="mensaje7" style="text-align: center; color: blue; font-size:15px;" ></div> </td> 

</tr>

<tr>

<td class="x2"> <div id="mensaje8" style="text-align: center; color: blue; font-size:14px;" ></div>


 </td> 

</tr>

</table>

</div>


</div>



<div id="B001"> 


<div id="P001">


<table>

<tr>

<td class="bbb1"> G </td>

<td class="bbb1"> O </td>

<td class="bbb1"> T </td>

<td class="bbb1"> A </td>

</tr>

<tr>

<td class="bbb1"> R </td>

<td class="bbb1"> U </td>

<td class="bbb1"> B </td>

<td class="bbb1"> O </td>

<td class="bbb1"> R </td>

</tr>

<tr>

<td class="bbb1"> L </td>

<td class="bbb1"> I </td>

<td class="bbb1"> J </td>

<td class="bbb1"> A </td>

<td class="bbb1"> B </td>

<td class="bbb1"> A </td>

</tr>

<tr>

<td class="bbb1"> T </td>

<td class="bbb1"> R </td>

<td class="bbb1"> A </td>

<td class="bbb1"> M </td>

<td class="bbb1"> I </td>

<td class="bbb1"> T </td>

<td class="bbb1"> E </td>

</tr>

<tr>

<td class="bbb1"> O </td>

<td class="bbb1"> P </td>

<td class="bbb1"> A </td>

<td class="bbb1"> L </td>

<td class="bbb1"> I </td>

<td class="bbb1"> C </td>

<td class="bbb1"> E </td>

<td class="bbb1"> N </td>

</tr>

<tr>

<td class="bbb1"> P </td>

<td class="bbb1"> O </td>

<td class="bbb1"> R </td>

<td class="bbb1"> C </td>

<td class="bbb1"> I </td>

<td class="bbb1"> O </td>

<td class="bbb1"> N </td>

<td class="bbb1"> E </td>

<td class="bbb1"> S </td>

</tr>

<tr>

<td class="bbb1"> N </td>

<td class="bbb1"> E </td>

<td class="bbb1"> U </td>

<td class="bbb1"> R </td>

<td class="bbb1"> A </td>

<td class="bbb1"> L </td>

<td class="bbb1"> G </td>

<td class="bbb1"> I </td>

<td class="bbb1"> C </td>

<td class="bbb1"> A </td>

</tr>

</table>

</div>


    

<div id="Q001">


<script>



function bb()  { 

b1 = document.getElementById("F2C1").value;

b2 = document.getElementById("F2C2").value;


b3 = document.getElementById("F2C3").value;


b4 = document.getElementById("F2C4").value;

b = b1 + b2 + b3 + b4;

 if(b.toUpperCase()=="GATO")   { document.getElementById("mensaje2").innerHTML="OK, GATO";

 }    else { document.getElementById("mensaje2").innerHTML="es otro animal..."; }     }   


function cc()  { 

c1 = document.getElementById("F3C1").value;

c2 = document.getElementById("F3C2").value;


c3 = document.getElementById("F3C3").value;


c4 = document.getElementById("F3C4").value;


c5 = document.getElementById("F3C5").value;


c = c1 + c2 + c3 + c4 + c5;

 if(c.toUpperCase()=="BURRO")   { document.getElementById("mensaje3").innerHTML="OK, BURRO";

 }    else { document.getElementById("mensaje3").innerHTML="es otro animal..."; }     }   


function dd()  { 

d1 = document.getElementById("F4C1").value;

d2 = document.getElementById("F4C2").value;


d3 = document.getElementById("F4C3").value;


d4 = document.getElementById("F4C4").value;


d5 = document.getElementById("F4C5").value;


d6 = document.getElementById("F4C6").value;


d = d1 + d2 + d3 + d4 + d5 + d6;

 if(d.toUpperCase()=="JABALI")   { document.getElementById("mensaje4").innerHTML="OK, JABALÍ";

 }    else { document.getElementById("mensaje4").innerHTML="es otro animal..."; }     }   


function ee()  { 

e1 = document.getElementById("F5C1").value;

e2 = document.getElementById("F5C2").value;


e3 = document.getElementById("F5C3").value;


e4 = document.getElementById("F5C4").value;


e5 = document.getElementById("F5C5").value;


e6 = document.getElementById("F5C6").value;


e7 = document.getElementById("F5C7").value;


e = e1 + e2 + e3 + e4 + e5 + e6 + e7;

 if(e.toUpperCase()=="TERMITA")   { document.getElementById("mensaje5").innerHTML="OK, TERMITA";

 }    else { document.getElementById("mensaje5").innerHTML="es otro animal..."; }     }   


function ff()  { 

f1 = document.getElementById("F6C1").value;

f2 = document.getElementById("F6C2").value;


f3 = document.getElementById("F6C3").value;


f4 = document.getElementById("F6C4").value;


f5 = document.getElementById("F6C5").value;


f6 = document.getElementById("F6C6").value;


f7 = document.getElementById("F6C7").value;


f8 = document.getElementById("F6C8").value;


f = f1 + f2 + f3 + f4 + f5 + f6 + f7 + f8;

 if(f.toUpperCase()=="PELICANO")   { document.getElementById("mensaje6").innerHTML="OK, PELÍCANO";

 }    else { document.getElementById("mensaje6").innerHTML="es otro animal..."; }     }  


function gg()  { 

g1 = document.getElementById("F7C1").value;

g2 = document.getElementById("F7C2").value;


g3 = document.getElementById("F7C3").value;


g4 = document.getElementById("F7C4").value;


g5 = document.getElementById("F7C5").value;


g6 = document.getElementById("F7C6").value;


g7 = document.getElementById("F7C7").value;


g8 = document.getElementById("F7C8").value;


g9 = document.getElementById("F7C9").value;


g = g1 + g2 + g3 + g4 + g5 + g6 + g7 + g8 + g9;

 if(g.toUpperCase()=="ESCORPION")   { document.getElementById("mensaje7").innerHTML="OK, ESCORPIÓN";

 }    else { document.getElementById("mensaje7").innerHTML="es otro animal..."; }     }  


function hh()  { 

h1 = document.getElementById("F8C1").value;

h2 = document.getElementById("F8C2").value;


h3 = document.getElementById("F8C3").value;


h4 = document.getElementById("F8C4").value;


h5 = document.getElementById("F8C5").value;


h6 = document.getElementById("F8C6").value;


h7 = document.getElementById("F8C7").value;


h8 = document.getElementById("F8C8").value;


h9 = document.getElementById("F8C9").value;


h10 = document.getElementById("F8C10").value;


h = h1 + h2 + h3 + h4 + h5 + h6 + h7 + h8 + h9 + h10;

 if(h.toUpperCase()=="LUCIERNAGA")   { document.getElementById("mensaje8").innerHTML="OK, LUCIÉRNAGA";

 }    else { document.getElementById("mensaje8").innerHTML="es otro animal..."; }     }  


</script>



<form id="myForm">


<table>

<tr>

<td> <input type=text class="bb1" tabindex="1" maxlength="1" onkeyup="myFunction(this,this.value)" id="F2C1" autofocus="autofocus" /> </td>

<td> <input type=text class="bb1" tabindex="2" maxlength="1" onkeyup="myFunction(this,this.value)" id="F2C2" /> </td>

<td> <input type=text class="bb1" tabindex="3" maxlength="1" onkeyup="myFunction(this,this.value)" id="F2C3" /> </td>

<td> <input type=text class="bb1" tabindex="4" maxlength="1" onkeyup="myFunction(this,this.value)" id="F2C4" /> </td>

</tr>

<tr>

<td> <input type=text class="bb1" tabindex="5" maxlength="1" onkeyup="myFunction(this,this.value)" id="F3C1" /> </td>

<td> <input type=text class="bb1" tabindex="6" maxlength="1" onkeyup="myFunction(this,this.value)" id="F3C2" /> </td>

<td> <input type=text class="bb1" tabindex="7" maxlength="1" onkeyup="myFunction(this,this.value)" id="F3C3" /> </td>

<td> <input type=text class="bb1" tabindex="8" maxlength="1" onkeyup="myFunction(this,this.value)" id="F3C4" /> </td>

<td> <input type=text class="bb1" tabindex="9" maxlength="1" onkeyup="myFunction(this,this.value)" id="F3C5" /> </td>

</tr>

<tr>

<td> <input type=text class="bb1" tabindex="10" maxlength="1" onkeyup="myFunction(this,this.value)" id="F4C1" /> </td>

<td> <input type=text class="bb1" tabindex="11" maxlength="1" onkeyup="myFunction(this,this.value)" id="F4C2" /> </td>

<td> <input type=text class="bb1" tabindex="12" maxlength="1" onkeyup="myFunction(this,this.value)" id="F4C3" /> </td>

<td> <input type=text class="bb1" tabindex="13" maxlength="1" onkeyup="myFunction(this,this.value)" id="F4C4" /> </td>

<td> <input type=text class="bb1" tabindex="14" maxlength="1" onkeyup="myFunction(this,this.value)" id="F4C5" /> </td>

<td> <input type=text class="bb1" tabindex="15" maxlength="1" onkeyup="myFunction(this,this.value)" id="F4C6" /> </td>

</tr>

<tr>

<td> <input type=text class="bb1" tabindex="16" maxlength="1" onkeyup="myFunction(this,this.value)" id="F5C1" /> </td>

<td> <input type=text class="bb1" tabindex="17" maxlength="1" onkeyup="myFunction(this,this.value)" id="F5C2" /> </td>

<td> <input type=text class="bb1" tabindex="18" maxlength="1" onkeyup="myFunction(this,this.value)" id="F5C3" /> </td>

<td> <input type=text class="bb1" tabindex="19" maxlength="1" onkeyup="myFunction(this,this.value)" id="F5C4" /> </td>

<td> <input type=text class="bb1" tabindex="20" maxlength="1" onkeyup="myFunction(this,this.value)" id="F5C5" /> </td>

<td> <input type=text class="bb1" tabindex="21" maxlength="1" onkeyup="myFunction(this,this.value)" id="F5C6" /> </td>

<td> <input type=text class="bb1" tabindex="22" maxlength="1" onkeyup="myFunction(this,this.value)" id="F5C7" /> </td>

</tr>

<tr>

<td> <input type=text class="bb1" tabindex="23" maxlength="1" onkeyup="myFunction(this,this.value)" id="F6C1" /> </td>

<td> <input type=text class="bb1" tabindex="24" maxlength="1" onkeyup="myFunction(this,this.value)" id="F6C2" /> </td>

<td> <input type=text class="bb1" tabindex="25" maxlength="1" onkeyup="myFunction(this,this.value)" id="F6C3" /> </td>

<td> <input type=text class="bb1" tabindex="26" maxlength="1" onkeyup="myFunction(this,this.value)" id="F6C4" /> </td>

<td> <input type=text class="bb1" tabindex="27" maxlength="1" onkeyup="myFunction(this,this.value)" id="F6C5" /> </td>

<td> <input type=text class="bb1" tabindex="28" maxlength="1" onkeyup="myFunction(this,this.value)" id="F6C6" /> </td>

<td> <input type=text class="bb1" tabindex="29" maxlength="1" onkeyup="myFunction(this,this.value)" id="F6C7" /> </td>

<td> <input type=text class="bb1" tabindex="30" maxlength="1" onkeyup="myFunction(this,this.value)" id="F6C8" /> </td>

</tr>

<tr>

<td> <input type=text class="bb1" tabindex="31" maxlength="1" onkeyup="myFunction(this,this.value)" id="F7C1" /> </td>

<td> <input type=text class="bb1" tabindex="32" maxlength="1" onkeyup="myFunction(this,this.value)" id="F7C2" /> </td>

<td> <input type=text class="bb1" tabindex="33" maxlength="1" onkeyup="myFunction(this,this.value)" id="F7C3" /> </td>

<td> <input type=text class="bb1" tabindex="34" maxlength="1" onkeyup="myFunction(this,this.value)" id="F7C4" /> </td>

<td> <input type=text class="bb1" tabindex="35" maxlength="1" onkeyup="myFunction(this,this.value)" id="F7C5" /> </td>

<td> <input type=text class="bb1" tabindex="36" maxlength="1" onkeyup="myFunction(this,this.value)" id="F7C6" /> </td>

<td> <input type=text class="bb1" tabindex="37" maxlength="1" onkeyup="myFunction(this,this.value)" id="F7C7" /> </td>

<td> <input type=text class="bb1" tabindex="38" maxlength="1" onkeyup="myFunction(this,this.value)" id="F7C8" /> </td>

<td> <input type=text class="bb1" tabindex="39" maxlength="1" onkeyup="myFunction(this,this.value)" id="F7C9" /> </td>

</tr>

<tr>

<td> <input type=text class="bb1" tabindex="40" maxlength="1" onkeyup="myFunction(this,this.value)" id="F8C1" /> </td>

<td> <input type=text class="bb1" tabindex="41" maxlength="1" onkeyup="myFunction(this,this.value)" id="F8C2" /> </td>

<td> <input type=text class="bb1" tabindex="42" maxlength="1" onkeyup="myFunction(this,this.value)" id="F8C3" /> </td>

<td> <input type=text class="bb1" tabindex="43" maxlength="1" onkeyup="myFunction(this,this.value)" id="F8C4" /> </td>

<td> <input type=text class="bb1" tabindex="44" maxlength="1" onkeyup="myFunction(this,this.value)" id="F8C5" /> </td>

<td> <input type=text class="bb1" tabindex="45" maxlength="1" onkeyup="myFunction(this,this.value)" id="F8C6" /> </td>

<td> <input type=text class="bb1" tabindex="46" maxlength="1" onkeyup="myFunction(this,this.value)" id="F8C7" /> </td>

<td> <input type=text class="bb1" tabindex="47" maxlength="1" onkeyup="myFunction(this,this.value)" id="F8C8" /> </td>

<td> <input type=text class="bb1" tabindex="48" maxlength="1" onkeyup="myFunction(this,this.value)" id="F8C9" /> </td>

<td> <input type=text class="bb1" tabindex="49" maxlength="1" onkeyup="myFunction(this,this.value)" id="F8C10" /> </td>

</tr>

</table>


</form>


<script>

function myFunction(x, y) {

    if (y.length == x.maxLength) {

        var next = x.tabIndex;

        if (next < document.getElementById("myForm").length) {

            document.getElementById("myForm").elements[next].focus(); }  }  }

</script>


</div>


</div>



</div>



</body>



</html>

No hay comentarios:

Publicar un comentario