> Manuales > Control de frames con Javascript

Ilustramos el trabajo con variables y funciones de otros frames para conseguir memorizar valores de variables de una página a otra.

Vamos a mostrar un ejercicio que podría ilustrar la utilidad relatada en este artículo. Se trata de una especie de test de personalidad. Las funcionalidades del test en este caso no son muy importantes, lo que sí nos importa es que, llegados al final del test, recordemos las respuestas que ha ido seleccionando el visitante.

Así pues, el ejercicio va a consistir en varias preguntas, realizadas en páginas independientes. Al final, en una página de resultados, se mostrará la respuesta de cada una de las preguntas.

Podemos ver el ejercicio en marcha en una página aparte.

La declaración de frames que hemos visto anteriormente es la que utilizaremos para este ejercicio. Está preparada para guardar todas las respuestas, por eso tiene un array llamado respuestas al que se accederá desde cada una de las páginas, ya sea para introducir la respuesta seleccionada o para extraer el valor de las distintas respuestas, que se deben mostrar en la página de resultados.

La función extraeValor() accede a una lista de radiobutons que habrá en cada una de las preguntas y devuelve el value del radiobuton seleccionado, o cero en caso de que no se haya seleccionado ningún radiobutton. Esta función la hemos colocado en la declaración de frames por dos razones:
  1. Para ilustrar un poco más el método de acceder a funciones de otros frames.
  2. También para evitar que tengamos que escribir la función en el código de todas las páginas de las preguntas. (También hubiese sido una buena idea incluir esa función como un archivo externo .js, aunque esta solución no nos serviría para incluir el array de respuestas, porque no se podrían memorizar los resultados)
Ahora estaría bien observar el código de cada una de las preguntas. Es muy parecido para cada pregunta.

<html>
<head>
    <title>Pregunta 1</title>

<script>
function responder(){
    var valor = window.parent.extraeValor()
    if (valor==0)
       alert ("Debe elegir una respuesta")
    else{
       window.parent.respuestas[0] = valor
       window.location = "pregunta2.html"
    }
}
</script>
</head>

<body bgcolor=ff8833>
<h2>Pregunta 1: ¿Te gusta hacer regalos?</h2>
<form name=f1>
<input type=radio value="No, sólo los hago en situaciones especiales" name="respuesta"> No, sólo los hago en situaciones especiales
<br>
<input type=radio value="Si, me encanta" name="respuesta"> Si, me encanta
<br>
<input type=radio value="No y además nunca regalo nada" name="respuesta"> No y además nunca regalo nada
<br>
<input type="button" value="Responder" onClick="responder()">
</form>

</body>
</html>


En el código se muestra un formulario con una lista de radiobuttons con las respuestas posibles. También un botón para responder, que llama a una función que será la encargada de apuntar en la variable respuestas la respuesta actual.

La función extrae el value de la opción seleccionada en el formulario y evalua: Se realizan varias preguntas hasta que se llega a la página de resultados, que muestra las respuestas. Dicha página tendría esta forma:

<html>
<head>
    <title>Resultados de la encuesta</title>
</head>

<body bgcolor=ff8833>
<h2>Resultado</h2>
<br>
<b>Has respondido lo siguiente:</b>
<br>
<br>

<b>Pregunta 1</b>: <script>document.write(window.parent.respuestas[0])</script>
<br>
<b>Pregunta 2</b>: <script>document.write(window.parent.respuestas[1])</script>
<br>
<b>Pregunta 3</b>: <script>document.write(window.parent.respuestas[2])</script>

</body>
</html>


En el ejemplo no se evaluan los resultados para saber cuantas respuestas se acertaron ni para obtener conclusiones del encuestado. Lo único que se hace es mostrar la respuesta almacenada en cada una de las preguntas. Para ello se imprime el contenido del array de respuestas en cada una de sus casillas.

Con esto creo que queda más o menos resuelto el ejemplo e ilustrado el trabajo con frames. Sería interesante echar un vistazo al ejercicio en marcha para obtener más concusiones.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual