AJDA 2022 en cifras

En 2022 se cumple el noveno año del nacimiento del Proyecto Aplicación de Juegos Didácticos en el Aula AJDA, integrado dentro la Red Educativa Digital Descartes.  Llegado a este punto, en este artículo se pretende realizar un pequeño balance en cifras de los recursos y actividades desarrolladas en este proyecto educativo abierto, gratuito y universal, las cuales se distribuyen en su Web, Blog, Canal de Youtube y DVD.

Actualmente hay publicados 510 juegos didácticos, los cuales se pueden agrupar o clasificar atendiendo a diferentes criterios. Uno de ellos es por el tipo de cuestiones que se plantean y que se resume en la siguiente tabla:

En la mayoría de los juegos, las cuestiones que se plantean se pueden realizar a través de ficheros de preguntas generados a través de formularios. Al conjunto de juegos que pueden utilizar un mismo formato de fichero de preguntas se dice que pertenecen al mismo tipo. Así, por ejemplo, hay 300 juegos que pueden utilizar los ficheros de pregunta de tipo 1 o 54 juegos que pueden emplear ficheros de tipo 3. Aquellos juegos cuyos ficheros son sólo válidos para un determinado juego, el tipo de ficheros se corresponde con el del nombre del propio juego, ya que el formato del fichero es sólo válido para dicho juego. En las siguientes tablas se muestran los datos de los juegos según su tipo y preguntas que utilicen:

El número de ficheros de diferentes tipos publicados en la web de AJDA asciende a 1525.

En el apartado de formación y ayuda para la utilización y creación de juegos, el proyecto cuenta con dos cursos de formación (Aplicación de juegos y Creación de juegos), 90 vídeo-tutoriales y más de 70 artículos. Los cursos de formación del proyecto han sido impartidos en diferentes convocatorias de cursos de Formación del Profesorado de la Consejería de Educación de la Junta de Andalucía, del Ministerio de Educación  a través del INTEF y de CEP de Andalucía.

En el apartado de investigación e innovación, desde 2017 el Proyecto AJDA emprendió una línea de investigación y mejora en gamificiación en colaboración con varios profesores del departamento de Ingeniería Telemática de la Escuela Técnica Superior de Ingenieros Industriales de la Universidad de Sevilla, siendo el Profesor F. Javier Muñoz el investigador principal de este Proyecto de Investigación. Como resultado de dicha línea de actuación se han publicado cinco Trabajos Fin de Grado:

• "Integración de herramientas de gamificación en plataformas de Enseñanza Virtual", Pedro García Frutos, 2018.
• "Aplicación web para la creación y modificación de ficheros de juegos para la Aplicación de Juegos Didácticos en el Aula (AJDA)", Carlos Ramos León, 2019.
• "Aplicación Web multiusuario para gamificación educativa en el aula basada en Websocket", Alberto Jiménez Vázquez, 2019.
• "Aplicación de gestión de juegos para la educación con framework Spring y Primefaces",Ana María Lobón Roldán, 2020.
• "Aplicación web para la educación mediantegamificación sobre el Proyecto AJDA (Aplicaciónde Juegos Didácticos en el Aula) confuncionalidades de gestión de ficheros de preguntas", Guillermo Mejías Climent, 2021.

En el Proyecto AJDA seguimos trabajando para ampliar y mejorar los materiales del mismo y ponerlos a disposición de todos los usuarios del mismo.

Empezando con un juego. Password 10

Password 10 es un juego de dinámica sencilla, que se juega por parejas y que puede ser una actividad muy recomendable para empezar un curso o un tema. A continuación explicamos las reglas del juego.

El objetivo del juego para cada pareja será averiguar 10 password o palabras secretas. Para ello uno de los jugadores podrá ver los password y dará las pistas, mientras que el otro deberá acertarlas.

El jugador que da las pistas podrá dar un máximo de tres, las cuales no podrán contener la raíz de la palabra secreta ni decir la palabra en otro idioma diferente, aunque el idioma en el que se realizan el juego se puede elegir al principio de la partida. Tampoco se podrán hacer gestos relacionados con los password.

El jugador que recibe las pistas, a través de su portavoz, deberán decir tras cada pista una única palabra, intentando averiguar la palabra secreta.

El presentador o árbitro del juego, será quien contabilice las pistas dadas y dará por correctas o incorrectas. Cuando se acierte el password se marcará como correcto, mientras que se marcará como incorrecto cuando se de una pista incumpliendo las normas o cuando no se acierte el password en las tres oportunidades de las que se dispone. Además el presentador dispone de un control en la esquina superior derecha que permite retroceder las palabras en caso de cometerse un fallo en la anotación del resultado. Una vez finalizado el turno de un equipo se pueden ver de nuevo los password que ha realizado con las flechas de control de la esquina superior derecha.

También cabe destacar que este juego admite variantes, por ejemplo, dando las pistas a través de gestos o dibujos o que las pistas en lugar de palabras sean una explicación, etc.

Con este entretenido y ágil juego, se puede establecer una dinámica positiva y participativa del grupo, rompiendo el hielo y creando una actitud positiva hacia el curso o tema que comienza. Además es un juego que puede adaptase a niveles muy distintos y variados.

Planifica el curso académico 2021-2022 con el Proyecto AJDA

Iniciamos el curso 2021-2022 con la esperanza de que sea mejor que el anterior y de que se supere definitivamente la crisis sanitaria. En el Proyecto ADJA hemos trabajado en aumentar y mejorar los recursos que ponemos a disposición de todos y que resumimos a continuación:

• Se han publicado más 500 juegos didácticos y más de 1500 ficheros de preguntas.
• Se ha Introducido en los juegos con opciones de respuesta (345 juegos), la posibilidad de que el orden de las opciones sea aleatorio.
• Mejora en la unificación de los diferentes tipos de juegos, de forma que los ficheros de preguntas se puedan usar en más juegos diferentes.
• Se han introducido cambios y mejoras en algunos de los juegos más utilizados del proyecto (La ruleta de la fortuna, Ahorcado multijugador, 50x15, 10x10, Millonario...). 
• Se ha intensificado el trabajo dentro del proyecto de investigación I+D+I titulado "Estudio Integral del Impacto de la Gamificación Digital (GAIMS)" en colaboración con el departamento de Ingeniería Telemática de la Universidad de Sevilla.
• Se ha mejorado y ampliado la Web, el Blog, el DVD y el canal de YouTube de AJDA.
• Se ha continuado con la realización de actividades de formación del profesorado basadas en juegos didácticos.
• Se han realizado nuevas puestas en práctica en el aula de metodologías basadas en los juegos didácticos.
• Se han actualizado los cursos de formación del Proyecto AJDA.
• Se ha continuado con la publicación mensual de artículos en el Blog de Descartes.

Como es habitual a principios de curso, entre otras, hay dos tareas importantes que realizar: una de ellas consiste en evaluar la situación académica de nuestro alumnado y los aprendizajes esenciales no adquiridos, la otra en cuidar los aspectos emocionales de nuestro discípulos en la situación excepcional que hemos vivido y que todavía sufrimos. Para ambos aspectos la utilización de los juegos didácticos del Proyecto AJDA puede ser altamente positiva, ya que a través de ellos se pueden desarrollar diferentes actividades que permitan determinar aquellos aspectos curriculares que los discentes aun no han desarrollado y a la vez hacerlo de una forma lúdica, divertida, emocionalmente favorable y permitiendo interaccionar con los demás cumpliendo los protocolos sanitarios.

 

Mediante una adecuada selección de juegos didácticos adaptada al contexto de la clase y una correcta preparación de los contenidos y preguntas para los mismos se pueden realizar múltiples actividades que contribuyan a realizar una buena, enriquecedora y entretenida evaluación inicial.

 

Del mismo modo, se pueden desarrollar a lo largo de todo el año académico actividades basadas en  estos juegos didácticos,  ya sea para la presentación de unidades o temas, repaso, evaluación, refuerzo, ampliación, etc.

 

Otra característica importante de los juegos didácticos del Proyecto AJDA es que se pueden desarrollar perfectamente a través de vídeo-conferencia, ya que a ellos pueden acceder muchos participantes de forma simultánea y participar en su dinámica sin mayores problemas. Esto es una gran ventaja en un contexto en el que las enseñanzas pueden tener que desarrollarse de forma semipresencial o no presencial.

 

Lógicamente hay que introducir las adaptaciones metodológicas debidas al medio en el que se están llevando a cabo, pero su implementación no implica ninguna dificultad especial, simplemente hay que preparar y desarrollar los juegos en este contexto, en el cual se pueden utilizar además del juego las herramientas propias de la aplicación con la que se realizan las vídeo-conferencias, tales como cronómetros, sondeos, pulsadores, etc, permitiendo opciones adicionales. En este curso, con la vuelta presencial a las aulas, también podemos utilizar las metodologías basadas en juegos con PDI o proyector o utilizar dentro del propio aula en sistema de vídeo-conferencia.

Para terminar dejamos una captura de pantalla de tres juegos nuevos, versiones de algunos de los juegos más famosos del concurso de TV, "El preció justo".

 

Proyecto de investigación en AJDA (III)

En Julio de 2021 se ha defendido y publicado un nuevo Trabajo Final de Grado dentro del Proyecto de Investigación que llevan conjuntamente el departamento de Ingeniería Telemática de la ETSI de la Universidad de Sevilla y el Proyecto AJDA.

Su autor ha sido Guillermo Mejías Climent y se titula "Aplicación web para la educación mediantegamificación sobre el Proyecto AJDA (Aplicaciónde Juegos Didácticos en el Aula) confuncionalidades de gestión de ficheros de preguntas". Este trabajo profundiza y amplía el realizado por Carlos Ramos León, 2019 y se centra en la gestión de ficheros de preguntas de la juegos didácticos de AJDA.

A continuación citamos las principales aportaciones y mejoras del mismo:

• Se desarrolla y mejora el generador de ficheros de preguntas para los distintos tipos de juegos de AJDA.
• Se implementa la posibilidad de importar y exportar estos ficheros de preguntas a diferentes formatos: pdf, doc, csv, xml, txt.
• Se mejora e introducen nuevas funcionalidades en el buscador de ficheros y de preguntas.

Este trabajo será objeto de continuación y mejora en posteriores TFG.

El Cazador. A la caza de los secretos de la Alquimia

Una cuestión fundamental a la hora de utilizar juegos didácticos es la forma de ponerlos en práctica. El diseño, la preparación previa, la contextualización, los recursos, etc, son aspectos fundamentales para su buen funcionamiento. Pero podemos ir un paso más allá, utilizando los juegos aplicando metodologías de gamificación, sumergiendo a los participantes en un entorno, mecánicas y dinámicas que potencian y enriquecen el proceso de una forma significativa. En este artículo vamos a tratar como hemos realizado una actividad gamificada utilizando los juegos del Proyecto AJDA y presentaremos un vídeo donde se muestra su resultado, su título es:

“El Cazador. A la caza de los secretos de la Alquimia”

Nos situamos en la Europa medieval, los alquimistas buscan entre otras cosas la riqueza y la eternidad. La piedra filosofal y el elixir de la vida son sus codiciados objetivos, pero la rivalidad entre los alquimistas es feroz y los grandes maestros no permiten a los advenedizos irrumpir en su jerarquizado mundo por temor a que alcancen antes que ellos lo que llevan toda la vida buscando, y harán lo que haga falta para impedirlo.

Cuatro iniciados en el arte de la Alquimia pretenden conseguir las riquezas y secretos que tras ella se ocultan, pero la Gran Maestra alquimista está al tanto de los planes de sus pupilos y urde un plan para darles caza uno a uno y arrebatarles los tesoros conseguidos y así mantener su estatus y preponderancia.

El pueblo será testigo de los duelos entre la Gran Maestra y sus aprendices y trasmitirá estas vivencias de generación en generación hasta convertirse en leyenda.

El objetivo de los aprendices alquimistas será conseguir la mayor cantidad de oro posible mediante la transmutación de sus puntos y lo que es más importante, salvar su vida que se ve amenazada por la Gran Maestra que se siente traicionada por sus rebeldes pupilos y ve peligrar su posición en el gremio. Esta batalla se llevará a cabo a través del concurso "El Cazador", cuya dinámica explicamos a continuación.

En este concurso participan cuatro jugadores y se estructura en tres fases:

• Primera fase. Cada jugador, recibirá durante un minuto preguntas por parte del presentador, y por cada acierto conseguirá 1.000 puntos.

• Segunda fase. Con los puntos conseguidos el participante se enfrentará en un duelo de preguntas individual al “cazador o cazadora” (oponente experto/a). El cazador hará una oferta de puntos por encima y otra por debajo de los conseguidos por el concursante, que según la propuesta elegida estará a cuatro, cinco o seis casillas de llegar a “casa”. A continuación empieza “La caza”, concursante y cazador recibirán preguntas que deberán responder de forma simultánea e independiente. Por cada acierto avanzarán una casilla. El objetivo del jugador es llegar a “casa” y el del cazador atraparlo antes. Cada uno de los cuatro jugadores realizará de forma individual las dos primeras fases, los participantes que sean “cazados” en la segunda fase serán eliminados y los que lleguen “a casa” sumarán al bote común del equipo los puntos ganados en la segunda fase y se enfrentarán al cazador en la “caza final”.

• Tercera fase (“caza final”). Durante dos minutos los jugadores no eliminados recibirán preguntas por parte del presentador. Cada una deberá ser respondida por un solo jugador, el que primero dé al pulsador (si responde otro la respuesta se considerará fallada). Cada acierto dará al equipo de jugadores una casilla de ventaja. Además el equipo partirá con una ventaja inicial de tantas casillas como jugadores haya clasificados. Después llega el turno del “cazador”, que durante dos minutos recibirá preguntas. Si el cazador falla una pregunta habrá rebote para el equipo de jugadores, que de forma conjunta podrá responder, y si acierta hará retroceder una casilla al “cazador”. El equipo de jugadores gana si el cazador no logra igualar las casillas de ventaja que los jugadores han conseguido y el premio se reparte a partes iguales entre los participantes no eliminados.

Una característica del concurso es que cada día el programa adquiere como hilo conductor una temática de forma que concursantes, cazador y presentador adquieren los papeles de la misma a lo largo del programa, y en nuestro caso es la Alquimia.

La puesta en práctica se llevó a cabo en el laboratorio de Física y Química, utilizando tres juegos didácticos del Proyecto AJDA, cada uno de los cuales se corresponde con una de las etapas del concurso, para los que se elaboraron en torno a 300 preguntas de Física y Química de Bachillerato, contando con los siguientes participantes:

• Alquimistas aprendices (Concursantes): Paracelso Morandine, Willian Bacon, Blas Trimigesto y Javier Avicena (alumnos de la asignatura de Física de 2º Bachillerato).
• Gran Maestra alquimista (Cazadora): Vanessa León (Profesora de Química).
• Amo del Calabozo (Narrador y presentador): Jesús Muñoz (Profesor de Física).
• Sauron (Cámara y testigo omnisciente): Marcos Rodríguez (Profesor de Biología).
• Pueblo medieval: Alumnos de Biología.

Los alquimistas aprendices obtendrán por cada 1.000 puntos conseguidos una insignia de la asignatura de Física de cualquiera de las tres evaluaciones. El resultado de la experiencia se muestra en la siguiente composición:

Como se hizo. Envío de datos a un juego desde un iframe html embebido en él

Los juegos del Proyecto AJDA y las escenas de descartes en general, pueden contener páginas html integradas en ellos, de forma  que un espacio del juego sea una página html. Vamos a analizar como se envían datos al juego desde el iframe html que está embebido  en él,lo cual tiene diversas utilidades que trataremos en otros artículos

El iframe que está embebido será una sencilla página html, que llamaremos hijo.html y que contiene en su cuerpo dos elementos de entrada de datos, un campo de texto (con identificador CT) y un selector (con identificador SL):

<input name="textfield" type="text" id="CT" value="Campo de texto" >

<select name="selec" id="SL">

      <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>

Para que se puedan enviar los datos al juego, en la cabecera del iframe embebido en el juego se debe incluir el siguiente código:

<head>

<script>

      window.onload = function(evt) {

        //Envío de la variable SL del HTMLiFrame al juego que lo contiene

        var ct1 = document.getElementById("SL");

        // cuando el slector cambia, de valor se envía el dato al juego padre  y se realiza una actualizacion. 

         ct1.addEventListener("change", function(evt) {

          window.parent.postMessage({ type: "set", name: "SL", value: this.value }, '*');

          window.parent.postMessage({ type: "update" }, '*');

        });

  //Envío de la variable CT del HTMLiFrame al juego que lo contiene

        var ct2 = document.getElementById("CT");

        // cuando el campo de texto cambia, es decir hay un enter o click, se envia el valor al juego padre.

        ct2.addEventListener("change", function(evt) {

          window.parent.postMessage({ type: "set", name: "CT", value: this.value }, '*');

          window.parent.postMessage({ type: "update" }, '*');

        });

      }

  

</script>

</head>

Al modificarse los campos del iframe embebdido en el juego, se enviarán a éste con el nombre establecido en  type: "set", name: "NOMBRE DE LA VARIABLE QUE SE RECIBIRÁ EL JUEGO". En este caso el evento addEventListener, cuando se produce un cambio en el valor del elemento al que está asociado, desencadena el envío del valor del mismo a través de la variable definida en set en la instrucción  window.parent.postMessage.

Como se hizo. Envío de datos desde un juego a la página que lo contiene

Un juego puede enviar datos a la página html que lo contiene, es más, desde los juegos se pueden ejecutar sentencias no complejas de javascript. La forma de realizarlo se indica en este artículo.

En un evento o control, se ejecuta la acción abrir URL y en parámetro se introduce javascript:void(); poniendo dentro de los paréntesis la instrucción javascript que se desea ejecutar. Si se repite la instrucción javascript:void(); con su correspondiente instrucción javascript, dichas instrucciones se ejecutarán sucesivamente.

acción='abrir URL'

parámetro='javascript:void(INSTRUCCIONES JAVASCRIPT);

Vamos a incluir un ejemplo. En el cuerpo html de la página que contiene un juego tenemos los siguientes tres elementos cada uno con su id:

<span id="textoRecibido1">

<span id="textoRecibido2">

<span id="textoRecibido3">

Desde el juego, a través de un control o un evento vamos a ejecutar la acción abrir URL y a través de su parámetro invocaremos instrucciones javascrit con javascript:void(); a través de la cual enviaremos información a los elementos html desde el juego que la contiene:

• Enviamos al elemento textoRecibido1 el valor 50 al ejecutar la acción abrir URL.

acción='abrir URL' parámetro='javascript:void(document.getElementById('textoRecibido1').textContent = '50');'

• Enviamos al elemento textoRecibido2 la fecha actual a través de la función Date() al ejecutar la acción abrir URL.

acción='abrir URL' parámetro='javascript:void(document.getElementById('textoRecibido2').textContent = Date());' 

• Enviamos al elemento textoRecibido3 el valor de la variable del juego [SAM] al ejecutar la acción abrir URL.

acción='abrir URL' parámetro='javascript:void(document.getElementById('textoRecibido3').textContent = [SAM]);' 

Como hemos comentado inicialmente, no sólo se pueden enviar datos, sino que se pueden ejecutar funciones javascript de distinta naturaleza, como por ejemplo:

• Cambiar los estilos de la página:

javascript:void(document.body.style.backgroundColor='yellow');

• Poner mensajes emergentes, que pueden incluir variables númericas o de texto:

javascript:void(alert(('Mensaje emergente')); 

javascript:void(alert(([variableNumerica]); 

javascript:void(alert(('[variableTexto]'));  

• Abrir una ventana nueva:

javascript:void(alert(window.open('http://newton.proyectodescartes.org/juegosdidacticos/','','scrollbars=1,with=400, height=300'));  

• Pasar datos una web independiente:

javascript:void(alert(window.open(' 'web-receptora.html?= '+dat1+';@&'+dat2+'@&'+dat3+'&'+dat4','','with=300, height=300' ')); 

Como se hizo. Envío de datos desde un juego a un iframe html embebido en él

Los juegos del Proyecto AJDA y las escenas de descartes en general, pueden contener páginas html embebidas en ellos, es decir, que un espacio del juego sea una página html. Esto se ha utilizado en los juegos para cargar ficheros de preguntas a través de una página html (con contenido javascript) embebida en ellos.

Partamos de una sencilla página html, que llamaremos hijo.html y que contiene dos elementos identificados como: textoRecibido1 y textoRecibido2.

<body>

<div align="center">PÁGINA HIJO</div>

<span id="textoRecibido1"></span>        

<span id="textoRecibido2"></span> 

</body>

Ahora tenemos un juego, en el que definimos un espacio, llamado E2, en el que insertamos un espacio tipo HTMLIFrame en el que estará la página hijo.html.

value="tipo='HTMLIFrame' id='E2' x='90' y='90' ancho='50%' alto='50%'  archivo='hijo.html'

El juego puede enviar datos de variables al iframe embebido en él en el momento en el que se ejecuta la instrucción:

Nombre del espacio del HTMLIFrame en el juego.set('VARIABLE RECIBIDA POR LA PÁGINA HIJO.',VARIABLE ENVIADA POR EL JUEGO)

Para que los datos enviados por el juegos puedan ser recibidos por la página hijo, en la cabecera de la página hijo.html hay que introducir el siguiente código javascript, mediante el cual vamos a enviar dos variables desde el juego que contiene al iframe html:

<head>

<script>

window.addEventListener("load", function(evt) 

{

    window.addEventListener("message", funcionQueManejaLosMensajes);

   var data = evt.data;

  // Se envía la variable V1JUG desde el juego a la página hijo que la recibe como V1HIJ. 

  //En momento del juego en el que se quiera enviar se  pone la función E2.set('V1HIJ.',V1JUG)

         if ((data.type === "set")&&(data.name==="V1HIJ")) {

         // data.name es el nombre de la variable

         // data.value es el valor de la variable

   document.getElementById("textoRecibido1").textContent = data.value;

  }

         else if (data.type === "update") {

         }

  // Se envía la variable V2JUG desde el juego a la página hijo que la recibe como V2HIJ. 

  //En momento del juego en el que se quiera enviar se  pone la función E2.set('V2HIJ.',V2JUG)

         if ((data.type === "set")&&(data.name==="V2HIJ")) {

         // data.name es el nombre de la variable

         // data.value es el valor de la variable

   document.getElementById("textoRecibido2").textContent = data.value;

  }

         else if (data.type === "update") {

         }

});

</script>

</head>

• Inicialmente se incluye un manejador (listener –oyente–) de eventos que actúa en este caso cuando se genera un mensaje (evento message) ejecutando la función que hemos llamado funcionQueManejaLosMensajes, es decir, que cuando el iframe recibe un mensaje (en este caso del juego, se ejecuta la función que maneja los mensajes, en este caso recibe los datos).
• A continuación, desde el juego se han enviado dos variables que son recibidas como VIHIJ y V2HIJ. En los dos casos, en la condición lógica de la instrucción if, se identifica que data.type sea set y qué control ha sido el activado comparando data.name con V1HIJ o V2HIJ (estos son los nombres que se ponen entre comillas en el primer parámetro de la función set). Después se actúa de acuerdo a lo especificado en cada caso. Esa acción se inicia capturando el elemento de la página html cuyo id coincide con el indicado en document.getElementById("textoRecibido1"), en este caso "textoRecibido1" se corresponde con el id del elemento de hijo.html (análogamente pasa con "textoRecibido2"). La acción que se ejecuta en este ejemplo es cambiar el contenido de los elementos identificados como "textoRecibido" por el valor recibido del juego que está en data.value.
• En los dos casos se ve cómo se gestiona respectivamente el evento mensaje generado por los controles V1HIJ y V2HIJ mediante la función set (en este caso el mensaje generado por update() no realiza nada, pues no se usa en el juego, recordamos que la función de update es actualizar la página después de cargar los datos).

Como se hizo. Envío de datos desde un juego embebido en un iframe a la página que lo contiene

Estudiemos el caso en el que tenemos un juego contenido en un iframe de otra página padre y que desde el juego se quieren enviar datos de algunas de sus variables a la página html padre que lo contiene.

Indicamos el código html del cuerpo de una página padre, que contiene dos elementos (identificados como: textoRecibido1 y textoRecibido2) y un juegos (juego.html), embebido como iframe.

<body>

<div align="center">PÁGINA PADRE</div>

<span id="textoRecibido1"></span>        

<span id="textoRecibido2"></span> 

</div><iframe id="JUEGO" src="juego.html" width=1000 height=700 frameborder=0 seamless scrolling="no"></iframe>

</body>

Para que los datos enviados por el juegos puedan ser recibidos por la página padre que los contiene, en la cabecera de la página padre hay que introducir el siguiente código javascript, mediante el cual vamos a enviar dos variables desde el juego embebido:

<head>

<script>

window.addEventListener("load", function(evt) 

{

    window.addEventListener("message", funcionQueManejaLosMensajes);

   var data = evt.data;

  // Se envía la variable V1JUG desde el juego a la página padre que la recibe como V1PAD. 

  //En momento del juego en el que se quiera enviar se  pone la función parent.set('V1PAD.',V1JUG)

         if ((data.type === "set")&&(data.name==="V1PAD")) {

         // data.name es el nombre de la variable

         // data.value es el valor de la variable

   document.getElementById("textoRecibido1").textContent = data.value;

  }

         else if (data.type === "update") {

         }

  // Se envía la variable V2JUG desde el juego a la página padre que la recibe como V2PAD. 

  //En momento del juego en el que se quiera enviar se  pone la función parent.set('V2PAD.',V2JUG)

         if ((data.type === "set")&&(data.name==="V2PAD")) {

         // data.name es el nombre de la variable

         // data.value es el valor de la variable

   document.getElementById("textoRecibido2").textContent = data.value;

  }

         else if (data.type === "update") {

         }

});

</script>

</head>

• Los eventos iniciales window.addEventListener son los que permiten que el navegador este preparado para enviar y recibir los datos en cuanto se de la orden.
• La define la variable data, en la que se recogerán la información de las variables que se reciban y envíen.
• La instrucción condicional  if ((data.type === "set")&&(data.name === "NOMBRE VARIABLE")) {...} comprueba que el nombre de la variable espera recibir y el tipo, si estos son correctos ejecuta la acción que se le encomiende, en este caso cambiar el valor de un elemento por el de la variable recibida (document.getElementById("textoRecibido1").textContent = data.value). 
• En el momento del juego en el que se quiera enviar el valor de la variable debe indicarse mediante la instrucción: parent.set('VARIABLE RECIBIDA POR LA PÁGINA PADRE.',VARIABLE ENVIADA POR EL JUEGO). Al ejecutarse parent.set en el juego los valores son automáticamente recibidos por la página padre.

Este intercambio de información entre juego y página html que lo contiene es importante para poder enviar y recibir datos desde dispositivos externos a los juegos, aumentando la interactividad de los mismos. 

Como se hizo. Envío de datos a un juego embebido en un iframe desde la página que lo contiene

Los juegos didácticos del proyecto AJDA son escenas de DescartesJS que se encuentran dentro de una página o documento html, la cual puede estar como un iframe de una página padre padre html que la contenga. Es decir, tenemos un juego que es un iframe de otra página padre. 

En este artículo vamos a tratar como enviar datos desde la página html padre al juego embebido como iframe en ella. 

Indicamos el código html del cuerpo de una página padre, que contiene tres controles (dos campos de texto, un botón y un selector) y un juegos (juego.html), embebido como iframe.

<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>

</div><iframe id="JUEGO" src="juego.html" width=1000 height=700 frameborder=0 seamless scrolling="no"></iframe>

</body>

Para que los datos que se introduzcan en los campos de la página padre puedan ser recibidos por el juego, en la cabecera de la página padre hay que introducir el siguiente código javascript, mediante el cual vamos a enviar tres variables hacia el juego embebido de tres formas diferentes:

<head>

<script>

window.addEventListener("load", function(evt) 

{

    function funcionQueManejaLosMensajes(evt) {}

     //Envio de variable de forma automática, tras hacer cualquier acción en el navegador

     var contenido = document.getElementById("fecha");

     var iframe = document.getElementById("JUEGO");

     contenido.addEventListener("change", function(evt) 

       {

    iframe.contentWindow.postMessage({ type: "set", name: "enviofecha", value: contenido.value }, '*');

    iframe.contentWindow.postMessage({ type: "update" }, '*');

       });

   //Envio de variable al pulsar el botón enviar

   var contenido1 = document.getElementById("curso");

   var boton1 = document.getElementById("enviar");

   var iframe = document.getElementById("JUEGO");

   boton1.addEventListener("click", function(evt) 

      {

  iframe.contentWindow.postMessage({ type: "set", name: "enviocurso", value: contenido1.value }, '*');

  iframe.contentWindow.postMessage({ type: "update" }, '*');

      });

  //Envio de variable al cambiar el valor del campo selector

  var contenido2 = document.getElementById("respuesta");

  var iframe = document.getElementById("JUEGO");

  contenido2.addEventListener("change", function(evt) 

     {

 iframe.contentWindow.postMessage({ type: "set", name: "m1", value: contenido2.value }, '*');

 iframe.contentWindow.postMessage({ type: "update" }, '*');

    });

});

</script>

</head>

• Los eventos iniciales window.addEventListener son los que permiten que el navegador este preparado para enviar y recibir los datos en cuanto se de la orden.
• La define la variable data, en la que se recogerán la información de las variables que se reciban y envíen.
• Después se ha definido la variable o variables cuyo/s contenido se quiere enviar (contenido, contenido1, contenido2) y en las cuales se ha introducido el valor de los diferentes controles creados en la página padre.
• En la variable iframe se ha introducido el elemento iframe en el que se encuentra el juego.
• Mediante el evento variable.addEventListener("acción", function(evt) {...} se indica que al realizar la "acción" indicada sobre la variable se ejecutará la función (en este caso el envío de datos).
• La acción de enviar los datos se realiza mediante iframe.contentWindow.postMessage, en la cual se indica los datos de la variable cuyo valor se envía y el nombre de la variable que la recibe.

 iframe.contentWindow.postMessage({ type: "set", name: "NOMBRE DE LA VARIABLE QUE SE USARÁ EN EL JUEGO Y QUE RECIBE LOS DATOS", value: VARIABLE DE LA PÁGINA PADRE CUYOS DATOS SE QUIEREN ENVIAR.value }, '*');

 iframe.contentWindow.postMessage({ type: "update" }, '*');

Cuando se realicen los eventos indicados, el juego recibirá los valores de los variables y los podrá utilizar. En el código utilizado, las variables recibidas sería: enviofecha, enviocurso y m1.

Este intercambio de información entre juego y página html que lo contiene es importante para poder enviar y recibir datos desde dispositivos externos a los juegos, aumentando la interactividad de los mismos.