viernes, 19 de febrero de 2016

Un criptograma

Hace tiempo que manipulé algunas hojas con código JavaScript para conseguir criptogramas interactivos.
Hoy me he vuelto a enredar ya con un poco más de conocimiento en la causa y he creado un nuevo criptograma con un código algo mejorado.
Este es el resultado:
Este es el código empleado en la página web:
<!DOCTYPE HTML>
<html>
<head>
<title>Criptograma 1</title><!-- base --> 
<meta charset="UTF-8">
<link href="cripto1.css" rel="stylesheet" type="text/css" />
<script src="cripto1.js"></script>
<meta name="author" content="Alexander Bogomolny y Ángel Puente">
</head>
<body onLoad="CreateGame()">
<br>
<form name="game" method="post">
<div class='centraTabla'>
<table>
  <tr class="testigo">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
<td><input name="T0" onChange="change(0)" size="2" maxlength="1" type="text"></td>
<td><input name="T1" onChange="change(1)" size="2" maxlength="1" type="text"></td>
<td><input name="T2" onChange="change(2)" size="2" maxlength="1" type="text"></td>
<td><input name="T3" onChange="change(3)" size="2" maxlength="1" type="text"></td>
<td><input name="T4" onChange="change(4)" size="2" maxlength="1" type="text"></td>
  </tr>
  <tr>
    <td colspan="5" id="multiplicador"> x 4 </td>    
  </tr>  
  <tr>
<td colspan="5"><hr></td>
  </tr>
  <tr class="testigo">
<td>E</td>
<td>D</td>
<td>C</td>
<td>B</td>
<td>A</td>
  </tr>
  <tr>  
<td><input name="T5" onChange="change(5)" size="2" maxlength="1" type="text"></td>
<td><input name="T6" onChange="change(6)" size="2" maxlength="1" type="text"></td>
<td><input name="T7" onChange="change(7)" size="2" maxlength="1" type="text"></td>
<td><input name="T8" onChange="change(8)" size="2" maxlength="1" type="text"></td>
<td><input name="T9" onChange="change(9)" size="2" maxlength="1" type="text"></td>
  </tr>
</table>
</div>
<p> </p>
<div align="center">
<p>
<input name="Store" value="Guardar" onClick="push()" type="button">
<input name="Restore" value="Deshacer" onClick="restore()" type="button">
<input name="Finished" value="Acabado" onClick="finished()" type="button">
</p>
<p>
<input name="marquee" onFocus="this.blur()" value="" type="text">
</p>
</div>

 <div class='centraTabla'>
<table class="instrucciones">
  <tr>
    <td>
      <p>Cada letra es una cifra.<br /> 
 A letra diferente corresponde cifra diferente.</p>
</td>
  </tr>
</table>
</div>
</form>
<div class="center">
<input id="ayuda" name="sizewindow" value="Si no te sale..." onClick="SizeWin()" type="button">
</div>
<div align="center" class="creditos">
  <p>El criptograma lo he obtenido <a href="http://platea.pntic.mec.es/jescuder/criptogr.htm" target="_blank">aqu&iacute;</a>.<br>
    Este javascript est&aacute; basado en otros de <a href="http://www.cut-the-knot.org/index.shtml" target="_blank">Alexander Bogomolny</a></p>
 </div>
 </body>
 </html>
Y este es el código del archivo js
function SizeWin() {
open("cripto1ayuda.htm", "Sizewindow", "width=450,height=800,scrollbars=yes,toolbar=no");
}
var Letters="ABCDEEDCBA";
var Solution="2197887912";
var Runner = "   ";
var timerID;
var numOfScrolls = 0;
var Stack;
var nullStack = new StackEl(-1);
function CreateGame()
{
    Stack = new StackEl(Letters);
    restore();
}
function StackEl(str)
{
    this.str = str;
    this.next = nullStack;
    return this;
}
function push()
{
    var value = "";
    var form = document.game;
    var N = Letters.length;
    for (i = 0; i < N; i++)
        value += form.elements[i].value;
    tmp = Stack;
    Stack = new StackEl(value);
    Stack.next = tmp;
} 
function change(n)
{
    var form = document.game;
    if (form.elements[n].value.length == 0)
        form.elements[n].value = Stack.str.substring(n, n+1);
    var c = Letters.substring(n, n+1);
    var N = Letters.length;
    for (i = 0; i < N; i++)
        if (Letters.substring(i, i+1) == c)
            form.elements[i].value = form.elements[n].value;
    KillTimer();
}
function restore()
{
    var form = document.game;
    str = Stack.str;
    if (Stack.next != nullStack)
        Stack = Stack.next;
    var N = str.length;
    for (i = 0; i < N; i++)
        form.elements[i].value = str.substring(i, i+1);
    KillTimer();
}
function finished()
{
    var form = document.game;
    var N = Letters.length;
    for (i = 0; i < N; i++)
        if (form.elements[i].value != Solution.substring(i, i+1))
        {
            Runner = "                  No está bien. Inténtalo de nuevo.";
            timerID = window.setTimeout( "TimerResponse()", 200 );
            return;
        }
    Runner = "                           ¡FENOMENAL! ¡LO HAS CONSEGUIDO! ";
    timerID = window.setTimeout( "TimerResponse()", 200 );
}
function TimerResponse()
{
    if (numOfScrolls > 100)
    {
        KillTimer();
        return;
    }
    c = Runner.substring(0, 1);
    s = Runner.substring(1, Runner.length);
    Runner = s + c;
    document.game.marquee.value = Runner;
    timerID = window.setTimeout( "TimerResponse()", 200 );
    numOfScrolls++;
}
function KillTimer()
{
    clearTimeout(timerID);
    timerID = "";
    document.game.marquee.value = " ";
    return;
}
Finalmente la hoja de estilos
@charset "UTF-8";
input{
text-align: center;
font-size:20px;
}
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #eeeeee;
}
table{
text-align: center;
border: none;
}
#multiplicador{
text-align: right;
font-size:50px;
}
.testigo{
font-size:15px;
}
hr{
height:3px;
}
.center {
    margin: auto;
    width: 10%;
    border: none;
    padding: 10px;
}
div.centraTabla table {
margin: 0 auto;
}
.creditos{
font-size:10px;
}
.instrucciones{
background-color:#f5f5f5;
border:none;
width:30%;
}
Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)