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.