(Consulta) Descubre la palabra oculta

opzina · #1 (**permalink**) 10/02/2012, 08:16

Me encuentro en una situación en la que debo marcar y maquetar una especie de "Descubre las palabras que faltan en la frase".

Veamos un ejemplo:

"Foros del web es el m jor foro".

Tengo un flash en el cual cada letra representa un cuadrado.
En ciertas palabras hay un cuadrado vacío dónde hay que completar con la letra correcta.

Y acá es la duda, ¿Cómo pasar a html5 y CSS todo esto? Luego con JS se hará el funcionamiento.

Había pensado en algo así:

<p>"Foros del web es el m<span class="letter"></span>jor foro".</p>

Al hacer click en el recuadro letra vacía aparece un input text y se completa la letra.

Pero necesito letra por letra con un recuadro individual, así:

|F| |O| |R| |O| |S|

furoya · #2 (**permalink**) 10/02/2012, 21:42

¿Y así no?

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>PALABRA OCULTA.</title>
<script type="text/javascript">
function prueba(T,L){
//alert(T+" "+L)
var letra = (T==L)?L:"";
//alert(letra)
return (letra);
}
</script>
<style type="text/css">
body {font-size: 100%; }
input {border:1px solid black; font-size:2em; width: 1em; text-align: center;  }      
</style>
        
</head>
<body>

<input type=text value="Q" maxlength=1 onchange="this.value='Q'">
<input type=text value="W" maxlength=1 onchange="this.value='W'">
<input type=text value="E" maxlength=1 onchange="this.value='E'">
<input type=text value="" maxlength=1 onchange="this.value=prueba(this.value,'R')">
<input type=text value="T" maxlength=1 onchange="this.value='T'">
<input type=text value="Y" maxlength=1 onchange="this.value='Y'">
<input type=text value="" maxlength=1 onchange="this.value=prueba(this.value,'U')">
<input type=text value="I" maxlength=1 onchange="this.value='I'">
<input type=text value="O" maxlength=0 onchange="this.value='O'">
<input type=text value="P" maxlength=0 onchange="this.value='P'">
</body>
</html>