<!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>