[ Inicio ]

jsGeork

Biblioteca jQuery para generar actividades educativas

Generador de actividades para la biblioteca jsGeork

Utilizando el motor jsGeork pueden crearse con relativa facilidad actividades interactivas de distinto tipo utilizando muy poco código HTML y JAVASCRIPT. La biblioteca se encargará de crear el Html y el código JavaScript necesario para obtener un resultado responsible a diferentes tamaños de pantalla y a diferentes tipos de navegadores utilizando cuando sea posible funciones avanzadas de html5 como por ejemplo el Web Storage. Puede obtener más ayuda sobre el funcionamiento de la biblioteca en esta sección de la página.

Actividades de preguntas con respuestas de elección múltiple (PEM)

Este tipo de actividades permite introducir un número ilimitado de opciones de las que el usuario debe seleccionar una y solo una. Utiliza, por tanto, controles del tipo botones de radio.

Actividades de preguntas con respuestas multiselección (PMS)

Este tipo de actividades permite introducir un número ilimitado de opciones de las que el usuario puede seleccionar tantas como crea conveniente o no seleccionar ninguna. Utiliza, por tanto, controles del tipo casilla de verificación.

Actividades de preguntas con respuestas en cuadros de entrada (PIB)

Este tipo de actividades permite introducir uno (o más) cuadros de texto en los que el usuario debe introducir la respuesta correcta. Existen dos tipos de cuadros de entrada, los que esperan una cadena de texto del usuario y los que esperan una entrada numérica. Utiliza, por tanto, controles del tipo cuadros de texto (inputbox).

Actividades de rellenar huecos (PGF)

Este tipo de actividades permite introducir un texto en el que se crearán huecos en los lugares seleccionados para que el usuario los rellene con la respuesta correcta. Existen dos tipos de huecos, los tipo cuadro de entrada y los tipo lista desplegable. En estos últimos se ofrece al usuario una lista con las posibles soluciones, mientras que en el primer tipo se enfrenta a un cuadro de texto vacío, aunque para este tipo existe la opción de ofrecer ayuda al usuario. Utiliza, por tanto, controles del tipo cuadros de texto (inputbox).

Generador de tablas evaluadoras de actividades (TEA)

Permite crear fácilmente para las actividades anteriores tablas que las evaluan conjuntamente dándoles una puntuación.

Generador de pruebas tipo test (PTT)

Permite crear con las actividades anteriores pruebas de tipo test calificadas con una nota.

Funcionamiento de la biblioteca jsGeork

jsGeork utiliza la biblioteca jQuery para funcionar, por tanto, en un documento antes de cargar la biblioteca jsGeork deberemos cargar la jQuery. La forma de cargar la biblioteca será añadir en el HEAD del documento el enlace a las bibliotecas. Por ejemplo:

<script src="js/jquery.js"></script>
<script src="js/jquery.jsgeork.js"></script>

Deberá modificar la ruta de las bibliotecas si es distinta.

Si las utiliza dentro de uno de los programas software [1] deberá incluir las instrucciones en forma de comentario html que le indican al programa que debe añadir las bibliotecas. Las instrucciones son

<!-- $addjqueryhead$ -->
<!-- $addjsgeorkhead$ -->

para añadir los enlaces en el HEAD del documento. También puede utilizar los siguientes comentarios para que sean reemplazados por los enlaces en el primer sitio en que sean encontrados dentro del documento.

<!-- $addjquery$ -->
<!-- $addjsgeork$ -->

Deberá incluir también un enlace a los estilos CSS que utiliza la biblioteca o crear sus propios estilos. Aquí puede ver los estilos utilizados de forma predeterminada por los generadores de actividades. El enlace en el HEAD deberá ser, modificando la ruta y el nombre por los reales, del tipo siguiente:

<link href="jsgeork/jquery.jsgeork.css" rel="stylesheet" />

Si utiliza el software puede utilizar uno de los siguientes comentarios html para que sea reemplazado por el enlace al archivo css:

<!-- $addjsgeorkcsshead$ --> o <!-- $addjsgeorkcss$ -->

Con el código javascript de las bibliotecas y los estilos css que utilizan cargados en el documento, solamente falta incluir el código html y el código JavaScript de la actividad. Este último consiste en un objeto JavaScript con las propiedades que configuran la actividad y una línea que llama a la biblioteca jsGeork con este objeto como parámetro. Por ejemplo:

            <script>
                var obj1 = {
                    propiedad1: valor1,
                    propiedad2: valor2,
                    propiedadn: valorn,
                    //...
                    propiedadz: valorz
                };
                jsGeork.Questions.Question(obj1);
            </script>
            

Comprender este código JavaScript no es complicado, solo necesita saber:

Veamos un ejemplo de objeto con pares propiedad/valor de distinto tipo:

<script>
var obj2 = {
    "propiedad1": "valor1",     //el valor es una cadena, string en JS
    'propiedad2': 'valor2',     //la propiedad siempre es un string y los strings deben ir dentro de comillas simples o dobles
     propiedad3 : "valor3",     //no es obligatorio el uso de comillas en la propiedad, pero sí recomendable
    'propiedad 4': "valor4",    //el espacio en el nombre de la propiedad obliga a colocarlo entre comillas
    "propiedad5": true,         //el valor es un booleano, boolean en JS
    "propiedad6": false,        //los valores boolean pueden ser true o false
    "propiedad7": 10,           //el valor es un número, number en JS
    "propiedad8": [],           //el valor es una matriz, array en JS
    "propiedad9": {},           //el valor de una propiedad puede ser otro objeto
    "propiedad10": function(){}, //también puede ser una función
    "propiedady": valory,       //Si no colocamos el valor entre comillas será tomado por una variable y deberá estar definida en alguna parte
    "propiedadz": valorz        //no hay que olvidar quitar la última coma.
};                              //ni el punto y coma de final de instrucción
jsGeork.Questions.Question(obj2);
</script>
            

El anterior es un ejemplo genérico de objeto JavaScript. Veamos ahora un ejemplo de un objeto de una actividad de respuestas de elección múltiple con algunas propiedades:

<script>
var obj_act = {
    "id": "actividad1",     //identificador de la actividad
    "type": "single",       //define el tipo de actividad
    "opt": [                //matriz de objetos con las opciones de respuesta
       {
           "text": "Option A",
           "answer": "opta",
           "weight": 100
       },
       {
           "text": "Option B",
           "answer": "optb",
           "weight": 0
       }
        ],
   "random": true       //indica que deben ordenarse aleatoriamente las opciones
jsGeork.Questions.Question(obj_act);
</script>
            

Seguramente la propiedad más importante de los objetos que definen actividades es la propiedad "id". Esta propiedad contiene una cadena que se usa tanto para crear variables internas como para enlazar el bloque de la actividad con el código html. Efectivamente, el valor de la propiedad id debe coincidir con el valor del atributo id del bloque html de la actividad. Es importante que para escoger las cadenas de los id siga las siguientes reglas:

Además del código JS cada actividad contendrá código html con las preguntas y explicaciones de cada actividad. El código HTML, en general estará compuesto por bloques creados con etiquetas DIV (contenedor con salto de línea) o SPAN (contenedor sin salto de línea) con ciertos atributos. En principio cada actividad tendrá un bloque con el atributo id de la actividad. Además existirán otros bloques con atributos específicos que funcionarán como instrucciones para la biblioteca. Por ejemplo, en el siguiente código el atributo data-opt="" indica a la biblioteca qué bloque debe mostrarse según la respuesta seleccionada enlazando su valor con la propiedad answer del objeto JavaScript de la actividad.

<div id="actividad1">
   <p>Seleccione la respuesta correcta</p>
   <div style="display: none;">;
       <div data-opt="opta">Respuesta A</div>
       <div data-opt="optb">Respuesta B</div>
   </div>
</div>
            

Hay opciones comunes para todas las actividades pero cada tipo de actividad tiene sus propias opciones que se expresan mediante propiedades del objeto JS y/o mediante atributos HTML. En los generadores de actividades se explican estas opciones.

Sin embargo no se explica la posibilidad de cambiar de idioma. De forma predeterminada el idioma es el castellano pero puede cambiarse a otros idiomas añadiendo al objeto de una actividad o de un test la propiedad lang. Por ejemplo "lang": "ct", para el catalán o "lang": "es", para el castellano, aunque en este caso no es necesario ya que como se ha dicho es el idioma predeterminado.



Con los conocimientos anteriores puede editar manualmente los valores de configuración de las propiedades de los objetos JavaScript. Para evitar errores puede contrastar su código JS utilizando páginas como www.jshint.com.

Respecto al código HTML puede editarlo fácilmente, pero si cree que necesita validarlo utilice la página Markup Validation Service con el tipo de documento html5.

Aunque en un principio puede parecer complicado, con un poco de práctica y la ayuda de los generadores de actividades verá que no lo es tanto y que puede crear actividades interesantes sin excesivo trabajo y comprenderá las ventajas de comprender y editar directamente el código después de una primera ayuda utilizando los generadores.



NOTA: Algunas de las funciones de la biblioteca utilizan la tecnología html5 llamada Web Storage. Los navegadores antiguos y algunos navegadores modernos funcionando en modo local (p.e. IE) no soportan esta tecnología.

Tenga en cuenta que el generador puede no funcionar en algunos navegadores en navegación privada, por ejemplo en Safari.



1. Los programas software se refiere a los programas de ordenador publicados en www.geork.com. Estos programas incluyen un editor para que el profesor pueda modificar las páginas en formato html. Cuando se introduce en una página las instrucciones en forma de comentario html el programa se encarga de incluir el enlace a las bibliotecas una sola vez por página, de esta forma pueden reutilizarse bloques de código creados por varios autores. Finalmente los programas permiten extraer las páginas para su publicación o distribución con los enlaces correctos a las bibliotecas.

[ Inicio ]