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

    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

     

  • Embeber en Moodle

    Moodle es un software libre que permite instalar y gestionar una plataforma de aprendizaje (e-learning). A ella puede accederse con diferentes perfiles desde usuario, profesor o administrador, y según estos podrá realizar determinadas acciones. Si tiene permiso de edición podrá incluir recursos y actividades.

    Allí donde se puede editar, Moodle presenta un editor que presenta dos modalidades una visual y otra de texto o código html.

    Editor en Moodle

    Editor en Moodle, acceso al editor de código html

     

    Para poder embeber una escena en Moodle es necesario incluir el código de la misma en el modo de edición texto. Seleccionada esta opción basta pegar el código de la escena en la posición deseada, comprobando que la llamada al intérprete está incluida y el parámetro “docBase” si la escena usa imágenes, macros y/o ficheros.

    Código de una escena embebido en Moodle

    Código de una escena embebido en Moodle

     

    Al previsualizar o acceder al recurso o actividad en la que se ha embebido la escena podrá observar e interactuar con la misma.

    A continuación puede observar un vídeo sobre este tema:

    Y ahora otro donde se enlazan recursos

     

    Nota: Hay determinadas herramientas o servicios en las que el administrador puede incluir filtros o limitaciones a la hora de embeber código. Si no le funciona este procedimiento, cersiórese que el código que ha copiado no ha sido borrado por algún filtro de este tipo, para ello basta que vuelva a editar y compruebe que el código sigue ahí y que no ha sido cambiado. Si no estuviera o hubiera sido cambiado tendrá que ponerse en contacto con el administrador de su servicio para que cambie ese filtro.

  • Copiar y pegar una escena en el entorno html

    Una vez se ha accedido al código de una escena basta seleccionar ese código, copiarlo (Ctrl+C) y simplemente pegarlo (Ctrl+V), en un editor de código cualquiera (editor de texto o html), en la posición donde se desea que la escena quede incorporada.

    El criterio general es que donde puede copiarse código html podrá copiarse una escena ya que ésta sigue la estructura de etiquetas propia de html.

    Para el adecuado funcionamiento de la escena copiada han de tenerse en cuenta los siguientes detalles:

    A. Para que el navegador que abra la página en la que se ha incluido la escena pueda interpretarla es necesario que en el código esté incluida la llamada al intérprete. En particular para DescartesJS la llamada al intérprete a Internet requeriría incluir, si el código copiado no  la incluye ya, la línea

    <script type=’text/javascript’ src=’https://arquimedes.matem.unam.mx/Descartes5/lib/descartes-min.js’></script>

    B. Si la escena hace uso de imágenes, macros o ficheros será necesario indicar el lugar donde pueden encontrarse estos y por defecto se puede incluir la dirección desde la que se está copiando la escena. La forma de indicarlo es mediante el parámetro docBase:

     <param name=»docBase» value=»dirección web donde están esos ficheros«>

    y ubicar esta línea como primer parámetro del código de la escena.

    Por ejemplo, si deseamos copiar la escena de la tortuguita que utiliza imágenes y ficheros y que se incluye en la página de subproyectos de la web de RED Descartes: https://proyectodescartes.org/indexweb.html, el procedimiento sería el siguiente:

    1. Seleccionamos la escena que se quiere incorporar.
    2.Posicionamos el ratón sobre ella y pulsamos el botón auxiliar del ratón (derecho por defecto) que abrirá la ventana en la que aparece el botón «config». Pulsamos este botón y obtenemos el código de la escena.
    código escena

    Acceso al código de la escena

     
    3.Copiar el código y pegarlo en el soporte donde se desea incorporar dicha escena: por ejemplo una página html, o un blog, o una Moolde, o una wiki, etc. Como hemos indicado allá donde se pueda copiar código html se puede copiar la escena.
    Pegar código

    Pegar código en el soporte seleccionado, en este caso en una página html abierta en un editor

     
    4. Revisar si el código pegado tiene la línea de llamada al intérprete incorporada. Si no la tuviera habrá que incluirla. Por ejemplo:
    <script type=’text/javascript’ src=’https://arquimedes.matem.unam.mx/Descartes5/lib/descartes-min.js’></script>. En la imagen anterior puede observarse la escena copiada e incorporado el script indicado.
    5. Comprobar si en el código va incluida la referencia para localizar los ficheros auxiliares (imágenes, macros y ficheros), es decir el parámetro docBase. Si no fuera así, entonces incorporar este parámetro indicando en value la dirección web desde la que se ha copiado la escena. En este ejemplo sería  https://proyectodescartes.org/indexweb.html y la línea a incorporar:
     <param name=»docBase» value=»https://proyectodescartes.org/«>
    En la imagen anterior puede observarse esta línea incorporada en el código de la escena.
    6. Con estas acciones ya tendremos operativa la página en cualquier lugar siempre que se tenga conexión a Internet (dado que las referencias que se han puesto necesitan de ese acceso a Internet). 
     
    Es esencia y de manera simplicada: acceder a la escena, copiar código, pegar código y añadir la llamada al intérprete y al docBase si no estuviera. Eso es lo que se ha hecho aquí para que incorporar la escena citada a esta página de documentación:
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    Escena copiada y pegada en este blog de documentación
     
     
    Nota: Hay determinadas herramientas o servicios en las que el administrador puede incluir filtros o limitaciones a la hora de embeber código. Si no le funciona este procedimiento, cersiórese que el código que ha copiado no ha sido borrado por algún filtro de este tipo, para ello basta que vuelva a editar y compruebe que el código sigue ahí y que no ha sido cambiado. Si no estuviera o hubiera sido cambiado tendrá que ponerse en contacto con el administrador de su servicio para que cambie ese filtro.