Ilustramos el trabajo con variables y funciones de otros frames para conseguir memorizar valores de variables de una página a otra.
En el siguiente tutorial mostraremos un ejercicio que nos podría ilustrar la utilidad relatada en este tuto. Se trata de una especie de test de personalidad. Las funcionalidades de dicho test para el momento no son muy importantes que digamos, lo que sí nos importa es que, llegados al final del test, recordemos las respuestas que ha ido seleccionando el visitante.
Es así como 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.
La declaración de frames que hemos podido ver anteriormente es la que emplearemos para este ejercicio. Está preparada para guardar todas las respuestas, por ello tiene un array llamado respuestas al cual se accederá desde cada una de las páginas,bien 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:
- Para ilustrar un poco más el método de acceder a funciones de otros frames.
- 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:
- Si es 0, en caso de que no se haya seleccionado respuesta alguna, advierte al usuario que debe seleccionar uno de los radiobuttons.
- Si es distinto de 0, es que se ha seleccionado respuesta. Entonces, para memorizarla, la guarda en la variable de la declaración de frames y luego pasa a la pregunta siguiente.
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.
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
No hay comentarios:
Publicar un comentario