Funciones agregadas al editor FCKeditor

El editor FCKeditor se modificó de forma tal que permite construir fácilmente cursos de enseñanza que se adapten al modelo “Teoría – Evaluación”. Cabe aclarar que la evaluación se hará con el estilo múltiple choice.

Como se dijo anteriormente para las páginas que formen parte de la Teoría, el usuario puede utilizar los botones “Página Anterior” y “Página Siguiente” para agregarle las funciones que permiten registrar la navegación del alumno, en tanto que para la página de evaluación que forme parte de la Practica, el usuario puede utilizar los botones “Radio Button” y “Calcular Nota” para agregarle las funciones que permiten registrar los resultados de las evaluaciones.

Para adaptar el editor FCKeditor a nuestras necesidades decidimos crear una nueva barra icónica para el menú manteniendo las funciones básicas de cualquier editor HTML más los nuevos botones necesarios para permitir la comunicación de un curso SCORM con el LMS. Para tal fin agregamos los siguientes botones:

• Botón “Radio Button”: este botón brinda dos funcionalidades similares que se diferencian entre sí porque una de ellas incluye una función JavaScript provista en la API SCORM.

El usuario puede utilizar esta opción para agregar tanto un botón de radio “normal” como uno con contenido SCORM seleccionando en la ventana de dialogo que se abre que tipo de botón será.

En el caso de las páginas de Evaluación, el usuario debería seleccionar la opción SCORM al crear un cuestionario con preguntas y posibles valores de respuesta para cada caso, para que luego cuando sea generado el SCO, este pueda comunicar los resultados obtenidos por el alumno al sistema LMS.

Al seleccionar esta opción, el editor abrirá una ventana emergente, solicitando al usuario el ingreso de ciertos parámetros:

1. Nombre: nombre con el cual la aplicación identificara al tag “radio button”, es decir, valor que se asignara a la etiqueta “name”. 2. Valor: es el valor que se le asignara a la etiqueta “value”. En

nuestro caso al ser utilizado para una página de evaluación este campo correspondería a una posible respuesta valida o no.

3. Un campo de chequeo indicando si el “radio button” aparecerá seleccionado o no.

Hasta acá son los campos que FCKeditor solicita para un tag “radio button” común. Para la personalización del editor hemos agregado los siguientes campos:

4. Un campo de chequeo que indica si el “radio button” soporta SCORM o no, es decir, en el caso que sea chequeado por el usuario el editor generara automáticamente en el tag la llamada a la función JavaScript correspondiente a la registración de la respuesta a la pregunta para la comunicación LMS - SCORM. En caso contrario de no ser chequeado este campo, el tag se generara sin la llamada a la función.

5. Nro. Pregunta: este campo será requerido si el campo del punto 4 fue chequeado e indica a que número de pregunta del cuestionario que esta diseñando el usuario se corresponde el tag “radio button”. Este valor es usado por la aplicación para que al momento de generar la llamada a la función JavaScript para la registración de la respuesta del alumno, ésta reconozca a que pregunta corresponde la respuesta.

• Botón “Página Siguiente”: permite ir de la página actual a la página siguiente de la unidad donde se guardará. El usuario podrá utilizar esta opción cuando desee que la página que está diseñando pueda ser navegada y que eso quede registrado en el LMS. Esta opción debería ser utilizada solamente para las páginas correspondientes a la Teoría.

Al seleccionar esta opción, el editor abrirá una pantalla solicitando que se ingrese el nombre con el que desea que aparezca el link, como por ejemplo “Siguiente” o “Página Siguiente” y el número de la unidad donde se creará la página.

Internamente el editor generará un link con el nombre ingresado y agregara al tag “link” la llamada a la función JavaScript que permite registrar la navegación del alumno.

• Botón “Página Anterior”: permite ir de la página actual a la página anterior de la unidad donde se guardará. El usuario podrá utilizar esta opción cuando desee que la página que está diseñando pueda ser navegada y que eso quede registrado en el LMS. Esta opción debería ser utilizada solamente para las páginas correspondientes a la Teoría.

Al seleccionar esta opción, el editor abrirá una pantalla solicitando que se ingrese el nombre con el que desea que aparezca el link, como por ejemplo “Anterior” o “Página Anterior” y el número de la unidad donde se creará la página.

Internamente el editor generará un link con el nombre ingresado y agregara al tag “link” la llamada a la función JavaScript que permite registrar la navegación del alumno.

• Botón “Calcular Nota”: permite registrar la nota correspondiente a una evaluación. El usuario podrá utilizar esta opción cuando desee que se registre en el LMS la nota obtenida por el alumno en la evaluación. Esta opción debería ser utilizada solamente para las páginas correspondientes a la Práctica.

Al seleccionar esta opción, el editor abrirá una ventana emergente, solicitando al usuario el ingreso de ciertos parámetros:

1. Nombre: nombre con el cual la aplicación identificara al tag “button”, es decir, valor que se asignara a la etiqueta “name”. 2. Valor: es el valor que se le asignara a la etiqueta “value”.

Internamente el editor generará el tag “button” con la llamada a la función JavaScript que permite registrar la nota obtenida por el alumno.

La figura 30 muestra como quedó definida la nueva barra icónica del editor de páginas HTML.

Barra Icónica

Iconos para

SCORM

Figura 30. Visualización de la nueva barra icónica del editor FCKEditor.

El editor FCKeditor no proporciona el desarrollo de las funciones para abrir una página existente o guardar la página que se está creando.

Para contemplar la opción de “Guardar” como se explicó anteriormente se habían creado los botones “SaveScorm” y “SaveScormInic” que tenían como principal funcionalidad guardar la página creada con el editor.

Para desarrollar la opción de “Abrir” una página existente, se investigó cual era la mejor forma de hacerlo en nuestra idea inicial. La página que mostraba al editor en la aplicación estaba definida como una página HTML y se había optado por

definir en la página un tag “textArea” el cual contenía al editor. Esto se realizó siguiendo los pasos para la incorporación del editor en una página con el método 2 descripto en la unidad 2. Encontrándonos con un problema al enviar los datos al contenedor del editor FCKeditor, ya que al momento de setearle a la etiqueta “value” el contenido de la página que el usuario seleccionó para abrir, no se actualizaba el contenedor del editor. Esto se debe a que el editor FCKeditor trabaja con un iframe, el cual debe ser actualizado antes de ejecutar y enviar el post del formulario. Darnos cuenta de que el editor trabaja con un iframe y debíamos actualizarlo antes, nos llevo bastante tiempo. Observamos que al setear la página no se actualizaba el editor pero si presionábamos “F5” se actualizaba la página y el editor pasaba a contener la página seleccionada. No encontrábamos información referente a este problema hasta que en un foro había una persona que explicaba que el tema del iframe y algunos problemas que ocasionaba y de ahí surge la solución.

Si bien el problema de editar una página fue resuelta hay que tener en cuenta que el editor FCKeditor filtra las páginas que contengan el tag <meta>, es decir:

<meta http-equiv="" content="text/html; charset=iso-8859-1">. Si uno prueba abrir una página con dicho tag, gráficamente la visualizara pero a la hora de guardarla el editor ignora dicha página, es decir, ignora todos los restantes tag que forman el HTML.

Lo que puede hacer el usuario es editar la página que contenga dicho tag, eliminarlo y luego editarla con la aplicación.

De todos modos el haber investigado la edición de una página y haberlo resuelto no nos sirvió para desarrollar la opción actual ya que la página que muestra el editor (editorHtml.asp), fue definida como ASP para poder contemplar la estructura de los cursos a desarrollar con el editor y como se explica a continuación se opto por redefinir el contenedor del editor siguiendo los pasos del método 1 descripto en la unidad 2.