Los juegos didácticos del proyecto AJDA son escenas de DescartesJS que se encuentran dentro de una página o documento html.
Pongamos que tenemos una página html en cuyo cuerpo están los siguientes elementos:
<body>
<div align="center">PÁGINA PADRE</div>
<input id="fecha" type="text" />
<input id="curso" type="text" />
<input id="enviar" type="button" value="enviar curso">
<select name="selec" id="respuesta">
<option value="0" selected></option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<ajs>
Aquí iría el código del juego
</ajs>
</body>
En algunas ocasiones puede ser necesario pasar datos de variables desde el documento html al juego. El código javascript que debe insertarse en la cabecera de la página html que contiene el juego es el siguiente:
<head>
<script>
window.addEventListener("load", function(evt)
{
window.addEventListener("message", funcionQueManejaLosMensajes);
var data = evt.data;
//Envio de variable de forma automática, tras hacer cualquier acción en el navegador
var contenido = document.getElementById("fecha");
contenido.addEventListener("change", function(evt)
{
window.postMessage({ type: "set", name: "enviofecha", value: contenido.value }, '*');
window.postMessage({ type: "update" }, '*');
});
//Envio de variable al pulsar el botón enviar
var contenido1 = document.getElementById("curso");
var boton1 = document.getElementById("enviar");
boton1.addEventListener("click", function(evt)
{
window.postMessage({ type: "set", name: "enviocurso", value: contenido1.value }, '*');
window.postMessage({ type: "update" }, '*');
});
//Envio de variable al cambiar el valor del campo selector
var contenido2 = document.getElementById("respuesta");
contenido2.addEventListener("change", function(evt)
{
window.postMessage({ type: "set", name: "m1", value: contenido2.value }, '*');
window.postMessage({ type: "update" }, '*');
});
});
</script>
</head>
En juego recibirá las variables: enviofecha, enviocurso y m1, cuando se desencadenen los eventos correspondientes que disparan su envío.
Detallamos la instrucción que realiza el envío de las variables:
window.postMessage({
type: "set",
name: "VARIABLE QUE RECIBIRÁ EL JUEGO",
value: VARIABLE DEL DOCUMENTO HTML QUE SE QUIERE PASAR AL JUEGO
}, '*');
window.postMessage({
type: "update"
}, '*');
name: "VARIABLE QUE RECIBIRÁ EL JUEGO",
value: VARIABLE DEL DOCUMENTO HTML QUE SE QUIERE PASAR AL JUEGO
}, '*');
window.postMessage({
type: "update"
}, '*');
Con este código, los datos de la VARIABLE DEL DOCUMENTO HTML QUE SE QUIERE PASAR AL JUEGO, se pasarán al éste mediante la VARIABLE QUE RECIBIRÁ EL JUEGO. El juego utilizará la VARIABLE QUE RECIBIRÁ EL JUEGO con los datos recibidos como una variable más del mismo.
El código debe ir entre etiquetas <scripts></scripts> y mediante instrucciones javascript se puede controlar cuando se ejecuta mediante la utilización de condicionales, funciones y/o eventos.
El evento window.addEventListener("load", function(evt) {...} permite que se produzca la transferencia de varuibles.
La instrucción window.postMessage({ }) puede repetirse tantas veces como variables quieran pasarse desde el documento html al juego.
Una aplicación práctica de esto es la carga en juegos del idioma o por defecto o del fichero de preguntas por defecto.
No hay comentarios :
Publicar un comentario