• Comunicación con JavaScript desde una escena Descartes a la API de una plataforma educativa vía paquete Scorm

    10 enero, 2016 Autor/a: Enric Ripoll Mira
    Sin comentarios todavía

    Elena Álvarez nos enseñaba en un post (elaboración Scorm con Reload) el modo de usar las funciones de comunicación de Descartes que, mediante la inclusión de un iFrame (véase este artículo) en una escena de descartes, nos permitía elaborar un paquete Scorm funcional y capaz de pasar parámetros (la nota, por ejemplo) a una plataforma educativa (por ejemplo Moodle).

    En un anterior post mío indicaba el modo de comunicar mediante instrucciones de JavaScript una escena de descartes con una página web totalmente independiente. En el ejemplo que exponía pasábamos 6 parámetros a una página independiente o, incluso, podíamos pasar parámetros a Google Maps con JavaScript. Véase post explicativo

    Tenemos otro modo de comunicar una escena de Descartes-JS con la API de la plataforma educativa (Mooddle, por ejemplo) usando directamente JavaScript.  He realizado un paquete scorm con una actividad (con test) desde un punto de vista diferente al realizado por la compañera Elena Álvarez.

    En este caso, la escena de descartes (descartes.html) es la que está embebida (como un iframe) en la página padre (index.html) y se envía la información a través de dos botones incluidos en la escena de Descartes (comunicación entre una escena descartes y una página web) que en este caso se denominan «validar nota» y «finalizar».

    En este caso, no necesitamos ningún fichero.js ni librería adicional ya que los scripts necesarios para la comunicación con el API de la plataforma educativa se encuentran en la página index.html, en la que podemos añadir otras funcionalidades.

    Por otra parte, podemos enviar otro tipo de información adicional (bien desde la propia escena.html descartes, o bien desde la página index.html, según convenga) como el tiempo que duró la realización del test o la visualización de la escena, número de tentativas realizadas…

    En la escena debemos incluir una variable llamada nota4  y otra llamada Score (el nombre de estas variables, lógicamente, los podemos cambiar) que será el resultado del cálculo de la nota final de la escena en un algoritmo de descartes:

    nota4=’getElementById(cogenota).value = Score’

    Aspecto del algoritmo

    Lo que hace el algoritmo es depositar el resultado (Score) en el elemento de la página index.html identificado como «cogenota» (que está oculto).

    Si descomprimimos el paquete scorm que adjunto, podemos simplificar mucho su elaboración, ya que simplemente deberíamos sustituir la página escena.html por otra con el mismo nombre adicionando estos dos botones:
    id=’n37′ tipo=’numérico’ interfaz=’botón’ región=’interior’ espacio=’E5′ nombre=’Validar respuestas’ expresión='(160,150,140,30)’ fijo=’sí’ visible=’sí’ color=’blanco’ color-int=’rojo’ negrita=’sí’ subrayada=’sí’ fuente puntos=’14’ acción=’abrir URL’ parámetro=’javascript:void(parent.document.getElementById(&squot;cogenota&squot;).innerHTML=[Score]);’

    Botón «Validar respuestas». El código se inserta en «Abrir URL» de la escena de Descartes

    La función parent.document.getElementById(«cogenota»).innerHTML=[Score] toma la nota de la página index.html.

    y

    id=’n47′ tipo=’numérico’ interfaz=’botón’ región=’interior’ espacio=’E5′ nombre=’Finalizar’ expresión='(300,150,80,30)’ fijo=’sí’ visible=’sí’ color=’blanco’ color-int=’azul’ negrita=’sí’ subrayada=’sí’ fuente puntos=’14’ acción=’abrir URL’ parámetro=’javascript:void(window.parent.SetScormScore());’ pos_mensajes=’centro’

    Botón «Finalizar». El código lo colocamos en «Abrir URL» de Descartes

    La función window.parent.SetScormScore(),  envía la nota al core de Moodle (por ejemplo) .
    Para finalizar, metemos la escena.html en el scorm (arrastrar y soltar) y, si es necesario, modificamos las dimensiones del iframe en index.html para que se adapte a las dimensiones de la simulación.
    La escena.html se puede abrir perfectamente en el editor de Descartes (la he abierto muchas veces y no se perdió información).
    Adjunto el scorm para que se pruebe (lo podéis descomprimir y cambiar la escena), se hicieron pruebas en Moodle 2.6++ y 3.0.1 y funcionó bien.

    Podéis bajar el Scorm en: Bajada del scorm
    También podéis añadir el paquete scorm como «paquete bajado»  en las definiciones de Moodle desde la dirección anterior en:

    https://www.reddescartes.org/repositorio/pasovariableswebindep-JS/scorm_descartes.zip

     

  • Paso de parámetros desde una escena Descartes a una web independiente

    21 diciembre, 2015 Autor/a: Enric Ripoll Mira
    Sin comentarios todavía

    Paso de parámetros desde una escena de Descartes a otra página web totalmente independiente (no iframe)

    En muchas páginas web se pasan parámetros a otra página independiente, lo que hacemos cuando buscamos en google es precisamente eso, indicamos una palabra (o más) en el buscador y esa palabra es pasada como parámetro a la página que mostrará los resultados de la búsqueda. Por ejemplo si en el buscador introducimos «descartes», veremos en la barra de direcciones lo siguiente:

    https://www.google.es/#q=descartes

    Es decir la variable q de búsqueda toma el valor de «descartes»
    Descartes tiene la opción de abrir una URL desde un botón y esta opción la podemos aprovechar para pasar parámetros a otras páginas web independientes preparadas para recibirlos.
    En javaScript existe la opción de usar href (la referencia a una página web) para ejecutar código en javaScript. Escribe este código y comprueba sus resultados:

    <!DOCTYPE html><html><head><title>Paso de parámetro</title><meta http-equiv=»Content-Type» content=»text/html; charset=iso-8859-1″ /><script type=»text/javascript»>function mostrarMensaje() {alert(‘Somos cartesianos. Lo que parecía un link en realidad es código en JavaScript’);} 

    </script>

    </head>

    <body>

    <h2>Cursosdescartes.com</h2>

    <h3>Ejemplo JavaScript</h3>

    <a href=»javascript:mostrarMensaje();»> Pulsa aquí por favor </a>

    </body></html>

    Pruébala aquí

    El operador void()

    Podemos usar el operador void para especificar una expresión como si fuera un enlace de hipertexto. Prueba este código:

     

    <!DOCTYPE html><html><head><title>Paso de parámetros</title><meta http-equiv=»Content-Type» content=»text/html; charset=iso-8859-1″ /><script type=»text/javascript»>function mostrarMensaje() {alert(‘Somos cartesianos. Lo que parecía un link en realidad es código en JavaScript’); 

    }

    </script>

    </head>

    <body><h2>Cursosdescartes.com</h2>

    <h3>Ejemplo JavaScript</h3>

    <a href=»javascript:void(mostrarMensaje())»>Pulsa otra vez aquí, por favor </a>

    </body>

    </html>

    Puébalo aquí

    En la escena descartes

    Ahora, probemos esto en descartes. Desde el editor vamos a hacer un botón que al abrirse nos muestre este mensaje. El botón tendrá la acción de abrir una URL e introduciremos el siguiente código en JavaScript:

    javascript:void(alert(‘Somos cartesianos. Lo que parecía un link en realidad es código en JavaScript’));

    Aspecto del editor de descartes

    Pruébalo aquí

    Podemos, por tanto, a través de este sistema pasar parámetros a otras páginas (preparadas) desde una escena de descartes.

    Dejo aquí una escena para que veáis las posibilidades:

    Aquí os dejo un fichero comprimido con los archivos preparados para que lo investiguéis.

    Archivos comprimidos

  • Audios y vídeos interactivos con Descartes

    27 octubre, 2014 Autor/a: Juan Guillermo Rivera Berrío
    Sin comentarios todavía

    En la siguiente escena tenemos un ejemplo de cómo se puede hacer con Descartes que un vídeo sea interactivo, es decir, que no sea sólo un instrumento de comunicación pasiva sino que requiera la participación activa del usuario.

    (Puede descargar  esta escena desde este enlace)
    En el siguiente documento tenemos una descripción de cómo se puede desarrollar esta escena:

  • Comunicación entre escenas en espacios HTMLIframe

    25 octubre, 2014 Autor/a: José R Galo Sánchez
    2 Comentarios

    En el siguiente ejemplo contamos con una escena «madre» que contiene dos escenas «hijas» ubicadas cada una de ellas en un espacio HTMLIframe. Cada hija manda a la madre los valores que modifica y esta última se encarga de mantener actualizadas a las hijas. Ello se logra mediante las funciones id.set(variable,valor) e id.update(), la primera asigna a la variable el valor indicado y la segunda actualiza. Van precedidas del prefijo que indica el id del espacio o bien puede indicarse parent para la escena «madre». Puede descargar esta escena desde este enlace.

    El esquema de esta escena es el siguiente:

    1. Una escena madre incluida en la página denominada madre.html que incluye:
      • Dos espacios HTMLIframe denominados con los identificadores H1 y H2 y que abren respectivamente las páginas hija1.html e hija2.html.
      • En el algoritmo CALCULOS se especifica H1.set(‘var2’,var2);H1.update();H2.set(‘var1’,var1);H2.update();
    2. En la página hija1.html una escena que incluye:
      • Un control var1 con una acción calcular que especifica parent.set(‘var1’,var1);parent.update()
      • Dos gráficos tipo texto que muestran el valor de las variables var1 y var2
    3. En la página hija2.html una escena que incluye:
      • Un control var2 con una acción calcular que especifica parent.set(‘var2’,var2);parent.update()
      • Dos gráficos tipo texto que muestran el valor de las variables var1 y var2

    Así pues el esquema lógico-funcional es el siguiente:

    a) Si se cambia el valor del control var1 en la escena hija 1, la acción calcular parent.set(‘var1’,var1), asigna a la variable denominada var1 en la escena madre (parent) el valor del control var1 de la escena hija 1. Entre comillas simples es el identificador de la variable a actualizar y sin comillas la que actualiza. En este caso, se le ha dado el mismo id con objeto de identificar con el mismo nombre a esa variable en todos los contextos que se consideran, pero pueden ponerse nombres diferentes. Posteriormente en esa misma acción calcular se realiza la actualización de la variable var1 en la escena madre con la función parent.update()

    b) En la escena madre, el algoritmo CALCULOS, al ejecutar H2.set(‘var1’,var1) asigna a la variable var1 (escrita entre comillas simples) del espacio H2 el valor actual de la variable var1 de esta escena madre. De nuevo estamos usando por comodidad el mismo nombre para identificar a las variables que intervienen en diferentes contextos. Con H2.update() se efectúa la actualización en el espacio H2 de la variable var1.

    c) La escena hija2.html muestra el valor actual de la variable var1, que después de la actualización realizada en el paso anterior es el valor procedente de la escena madre y el de ésta el procedente de la escena hija1.

    De manera análoga se procede para pasar el valor del control var2 de la escena hija 2 a la escena madre y de ésta a la escena hija1.

  • Algoritmos – Ejemplos de aplicación

    5 julio, 2014 Autor/a: Juan Guillermo Rivera Berrío
    Sin comentarios todavía

    En la siguiente presentación de diapositivas, podrás observar dos ejemplos de aplicación de algoritmos. El primer ejemplo es un sumatorio, que incluye un escena interactiva y el código del algoritmo. El segundo ejemplo es una aplicación para el Cálculo Integral que incluye una escena interactiva para calcular la integral definida, en la cual puedes modificar algunos valores como los límites de integración e incluso la función.

    Haz clic en la flecha de la esquina inferior derecha para pasar a la siguiente diapositiva.

    (Puede descargar esta presentación desde este enlace)

Página siguiente