============================================== Documentación de pizarras para desarrolladores ============================================== ****************** Editor de Pizarras ****************** Esta herramienta proporcionara todos los instrumentos necesarios para la edición de las pizarras interactivas. Acceso a la herramienta ======================= Ingresando a través del vinculo `https://sabios.librosylibros.co:3031/ `__ (*administrador de la herramienta de pizarras*), es posible acceder al editor, por medio de la columna *Acción* del contenido de *Pizarras*. |imageE0| |imageE1| |imageE2| Otra manera de tener acceso al editor de pizarras es a través de la creación de una nueva pizarra, que inicialmente redirige al usuario al modal de parametros de la pizarra y consecuente a esto al editor de pizarras interactivas para su adecuada edición. |imageE24| Contenido Editor Pizarras Interactivas ====================================== Una vez en el editor de pizarras se encontrara una interfaz que permitirá la creación y edición de contenido en pizarras interactivas. En la parte superior, se encuentra la barra principal del editor. Sera posible trabajar con varios botones y botones de navegación que permitirán la función de trabajo del editor de pizarras. |imageE25| Botón Editor de Contenido ------------------------- El botón de configuración de contenido permite visualizar la interfaz de edición para los elementos de cada una de las diapositivas de la pizarra. |imageE26| Botón Guardar ------------- El botón guardar permite salvar los cambios que se realicen en el contenido de la pizarra. |imageE27| Botón Editor de Ecuaciones -------------------------- El botón de ecuaciones permite abrir el editor de ecuaciones *Wiris* para reproducir el contenido digitado de expresiones matemáticas en código Latex. |imageE3| |imageE4| Al ingresar la expresión matemática el editor devuelve el valor de la ecuación en código Latex, para ser usada en el contenido de la pizarra. |imageE28| |imageE29| Versión de la Pizarra --------------------- El campo y botones de navegación de la versión de la pizarra permite percibir y guardar las diferentes versiones de los cambios que se hayan ejecutado en la pizarra. |imageE30| Si se trabaja en una versión anterior de la pizarra, se crea una nueva versión pública. Botón Cargar Imagen ------------------- El botón agregar imagen permite cargar imágenes para ser asignadas como respuestas de cada una de las diapositivas. |imageE31| Es necesario estar ubicado en la diapositiva en la que se pretende cargar la imagen de respuesta de la misma. |imageE32| Botón Editar Parámetros ----------------------- El botón editar parámetros de la pizarra permite editar la información que se hayan incluido al momento de la creación de la pizarra. |imageE5| |imageE6| - El campo *Nombre* debe llevar el nombre de la pizarra. - El campo *Paquete* debe contener el grupo al que se ubica la pizarra. - El campo *Estilo Pizarra* debe contener el estilo al que se concede la pizarra. - El campo *Estilo control* debe contener el estilo control al que se ubica la pizarra, es decir el estilo del área al cual la pizarra va a pertenecer. Botón Editar Pizarra -------------------- El botón editar pizarra permite editar el contenido HTML y JSON de la pizarra que básicamente sera la estructura primordial de una pizarra. |imageE7| |imageE8| Botones de Navegación --------------------- Los botones de navegación permiten moverse a través de las diapositivas de la pizarra. |imageE33| Editor de Contenido =================== La interfaz del editor de los contenidos tiene las herramientas para la edición de los contenidos en cada una de las diapositivas de las pizarras. Es posible ingresar a través del botón de configuración de contenido que se encuentra en la barra superior del editor. |imageE9| |imageE10| |imageE11| Elemento -------- El campo *Elemento* muestra información acerca del slide (diapositiva) en el que se encuentra el usuario y permite seleccionar a través de un *id* los elementos que se haya agregado al contenido HTML. |imageE12| |imageE13| Los elementos que sean seleccionados en este campo a través del id, podrán ser manipulados por los parámetros de este editor. Control ------- El parámetro *Control* permite proporcionar una velocidad al control de cambio de una propiedad, es decir, que si se quiere hacer la translación de un elemento dentro del contenido de una diapositiva, es posible hacerlo con tres variaciones de velocidad. |imageE34| Clase ----- El parametro *Clase* le permite al usuario asignar una clase que se haya creado previamente dentro de un estilo css a un elemento. |imageE35| Posición -------- El campo *Posición* permite configurar parámetros de ubicación a un elemento. Las propiedades que son posibles modificar en este campo son: position, left, top y z- index. Los valores se verán reflejados en el campo. |imageE36| La propiedad *Type (tipo de posición)* de un elemento puede clasificarse en los siguientes tipos: static, absolute, fixed, relative, initial e inherit. Dependiendo de la propiedad que se asigne a un elemento, la ubicación de este se vera afectada en el campo de acción de una pizarra. |imageE37| Los valores de las propiedades *left* y *top* serán asignados dependiendo al tipo de posicionamiento que se le asigne a un elemento. Estos valores corresponderan a un posicionamiento en el eje cartesiano. Los valores de posicionamiento serán asignados en píxeles (px). |imageE38| La propiedad *z-index* permitira a un elemento tener una profundidad mayor o menor con respecto al resto de los elementos existentes en la diapositiva. |imageE39| Tamaño ------ El campo *Tamaño* proporciona información acerca de las dimensiones de un elemento (*altura y anchura*). Los valores estarán reflejados en el mismo campo. |imageE40| Los valores de las propiedades del tamaño *Height* y *Width* serán asignadas en píxeles(px), además es posible hacer un escalamiento proporcional con la propiedad *Ratio*. |imageE41| Otros Atributo ============== El campo *Otros Atributos* proporciona la edición de las propiedades: background-image, background-repeat, background-size, bacground-color, border y border-radius. |imageE42| - La propiedad *background-image* permite al usuario agregar una imagen de fondo a un elemento. - La propiedad *background-repeat* permite al usuario repetir o no, una imagen de fondo de un elemento. - La propiedad *background-size* permite al usuario editar el tamañao de una imagen de fondo de un elemento. - La propiedad *background-color* permite al usuario poner un color de fondo a un elemento. - La propiedad *border* permite al usuario poner un borde a un elemento. - La propiedad *border-radius* permite redondear los border de un elemento. .. *Todos los cambios que se hagan con el editor de contenido se verán reflejados en el contenido Html de modal Editar Pizarra.* *Todos los cambios que se hagan con el editor de contenido deberán ser guardados para que la edición de los contenidos se vea reflejada en el campo de trabajo.* Flujo de trabajo ================ Todo el contenido de la pizarra se digitara en el campo Html y Json del modal Editar Pizarra. Para ingresar a este modal de edición hay que entrar por medio del botón *editar pizarra*. |imageE14| La estructura de un Html para las pizarras se dividen en secciones. Cada etiqueta ``
`` ``
`` conforma una diapositiva de la pizarra. Todo el contenido de la diapositiva tiene que estar dentro de las etiquetas ``
`` ``
``. La código Json debe estar siempre dentro de una llave de apertura y llave de cierre. |imageE15| |imageE16| |imageE17| |imageE18| En el momento que se edite el Html o el Json aparecerán advertencias en la parte inferior y superior del modal. |imageE19| |imageE20| Estas alertas indican que si el contenido que se haya editado no es guardado se perderán los cambios realizados. En el momento que se realiza un cambio en el contenido Html o Json el botón guardar del modal y el botón guardar pizarra de la barra superior del editor se pondrán en rojo como alerta de que el contenido debe ser guardado. Si se cierra el modal de *Editar Pizarra* y no se guardan los cambios no se actualizara el contenido que se haya editado. |imageE21| |imageE22| Si el código Json que se haya digitado tiene algún error se presentara una alerta en la parte superior del campo, informando que el Json no esta bien formado, también se mostrara un aviso en la linea de código que persista error. Para este caso no se agrego la llave de cierre. |imageE23| Igualmente para el campo Html. Para este caso no se cerro adecuadamente la etiqueta ``
``. |imageE43| *********************** Herramienta de Pizarras *********************** Esta herramienta proporcionará todos los instrumentos necesarios para la creación y edición de las pizarras interactivas. Acceso a la herramienta ======================= Ingresando por medio del enlace https://sabios.librosylibros.co:3031/ es posible tener acceso al administrador de pizarras que permitirá ingresar a la herramienta de pizarras interactivas. .. figure:: _static/images/hrImagen_1-01.jpg :alt: Contenido herramienta Pizarra Interactiva ========================================= En el contenido de la herramienta *Pizarra Interactiva* predominan los siguientes enlaces: .. figure:: _static/images/hrImagen_2-01.jpg :alt: 1. Pizarras - Pizarras_ .. _Pizarras: - Modificador_ .. _Modificador: .. figure:: _static/images/hrImagen_4-01.jpg :alt: 2. Estilos - Recursos_ .. _Recursos: - Estilos_ .. _Estilos: .. figure:: _static/images/hrImagen_5-01.jpg :alt: Pizarras -------- Pizarras ^^^^^^^^ El enlace de *Pizarras* permite el acceso al contenido de *Pizarras*. .. figure:: _static/images/hrImagen_6-01.jpg :alt: En la paginación es posible ver la cantidad de páginas en la que se divide la cantidad de contenido de pizarras existentes. .. figure:: _static/images/hrImagen_7-01.jpg :alt: En la parte superior derecha de la página se encuentra el botón *Nueva Pizarra* con el cual es posible la creación de nuevas pizarras. .. figure:: _static/images/hrImagen_8-01.jpg :alt: Para la creación de una nueva pizarra es necesario llenar el formulario de *Parámetros de la Pizarra*. .. figure:: _static/images/hrImagen_9-01.jpg :alt: - El campo *Nombre* debe llevar el nombre de la pizarra. - El campo *Paquete* debe contener el grupo al que se ubica la pizarra. - El campo *Estilo Pizarra* debe contener el estilo al que se concede la pizarra. - El campo *Estilo control* debe contener el estilo control al que se ubica la pizarra, es decir el estilo del área al cual la pizarra va a pertenecer. En la parte inferior del botón de creación de pizarras se encuentra el tamaño de página, el cual es posible modificar para adecuar la cantidad de pizarras que pueda contener cada una de las páginas. .. figure:: _static/images/hrImagen_8_1-01.jpg :alt: El contenido de esta página se encuentra conformada por cada una de las pizarras que hayan sido creadas a través de esta herramienta. Las pizarras están tabuladas con las propiedades Nombre, Estilo, Estilo Control, Estado, Paquetes y Acción. Esto permite la creación de una estructura organizada para efectos de búsqueda. .. figure:: _static/images/hrImagen_10-01.jpg :alt: - La columna *Nombre* contiene cada uno de los nombres de las pizarras que se hayan asignado. - La columna *Estilo* incluye el estilo que se haya asignado a la pizarra. - La columna *Estilo Control* representa el estilo del área que se haya asignado a la pizarra. - La columna *Estado* comprende la disposición en la que se encuentra la pizarra, es decir, *activa* o *inactiva*. - La columna *Acción* contiene las acciones que son posibles efectuar sobre cada pizarra. Entre ellas se encuentran: editar una pizarra, pre visualizar una pizarra, ejecutar una pizarra y eliminar una pizarra. Columna Acción """""""""""""" .. figure:: _static/images/hrImagen_11-01.jpg :alt: La acción *editar pizarra* permite al usuario a través del `Editor de Pizarras `__ modificar los contenidos de la misma. .. figure:: _static/images/hrImagen_11_1-01.jpg :alt: La acción *pre visusualizar* permite al usuario ver antes de la ejecución una pizarra. .. figure:: _static/images/hrImagen_11_2-01.jpg :alt: La acción *ejecutar pizarra* permite al usuario efectuar la pizarra en su estado final. .. figure:: _static/images/hrImagen_11_3-01.jpg :alt: La acción *eliminar pizarra* permite al usuario suprimir una pizarra del contenido general. .. figure:: _static/images/hrImagen_11_4-01.jpg :alt: Modificador ^^^^^^^^^^^ El enlace Modificador contiene los campos que permiten el reemplazo de Strings (cadena de caracteres). []*static/images/hrImagen*\ 12\_1-01.jpg) En el campo Buscar String se tiene que introducir la cadena que se desee reemplazar y en el campo Reemplazar String se tiene que poner la cadena, por la cual se quiere reemplazar el String que se haya digitado en el campo de búsqueda. Con el botón *Encontrar* ejecutamos una búsqueda del String en las pizarras y con el botón *Reemplazar* se sustituyen los Strings que se que se deseen reemplazar. Estilos ------- Recursos ^^^^^^^^ El enlace de *Estilos* permite el acceso al contenido de *Recursos*. .. figure:: _static/images/hrImagen_13-01.jpg :alt: En la paginación es posible ver la cantidad de páginas en la que se divide la cantidad de contenido de recursos existentes. En la parte derecha de la página se encuentra el botón Nuevo Recurso con el cual es posible la creación de nuevos contenidos para las pizarras. .. figure:: _static/images/hrImagen_14-01.jpg :alt: Para la creación de un nuevo recurso es necesario llenar el formulario de *Nuevo Recurso*. .. figure:: _static/images/hrImagen_15-01.jpg :alt: - El campo *Nombre* debe llevar el nombre de la del recurso. - El campo *Estilo* debe contener el grupo al que se ubica el recurso. - El campo *Nombre de la clase* debe contener la clase que se le asigna y por la que será conocida el recurso, si es que el recurso se asigna a una clase. - El campo *Snippet* debe contener una pequeña parte reusable de código fuente o texto que ejemplifique el uso del recurso o de la clase del recurso. - El campo *Archivo* carga el recurso que se pretende adjuntar al contenido de recursos. En la parte inferior del botón *Nuevo Recurso* se encuentra el tamaño de página, el cual es posible modificar para adecuar la cantidad de recursos que pueda contener cada una de las páginas. .. figure:: _static/images/hrImagen_14_1-01.jpg :alt: El contenido de esta página se encuentra conformada por cada una de los recursos que hayan sido creadas a través de esta herramienta. Las recursos están tabulados con las propiedades Nombre, Estilo, Clase, Snippet, Previsualización y Acción. Esto permite la creación de una estructura organizada para efectos de búsqueda. .. figure:: _static/images/hrImagen_16-01.jpg :alt: - La columna *Nombre* contiene cada uno de los nombres de las pizarras que se hayan asignado. - La columna *Estilo* incluye el estilo que se haya asignado a la pizarra. - La columna *Estilo Control* representa el estilo del área que se haya asignado a la pizarra. - La columna *Estado* comprende la disposición en la que se encuentra la pizarra, es decir *activa* o *inactiva*. - La columna *Acción* contiene las acciones que son posibles efectuar sobre cada pizarra. Entre ellas se encuentran: editar una pizarra, pre visualizar una pizarra, ejecutar una pizarra y eliminar una pizarra. Columna Acción """""""""""""" .. figure:: _static/images/hrImagen_17-01.jpg :alt: La acción *editar recurso* permite al usuario editar la información y contenido del recurso. .. figure:: _static/images/hrImagen_17_1-01.jpg :alt: La acción *pre visualizar recurso* permite al usuario ver el recurso. .. figure:: _static/images/hrImagen_17_2-01.jpg :alt: La acción *eliminar recurso* permite al usuario suprimir un recurso del contenido de recursos. .. figure:: _static/images/hrImagen_17_3-01.jpg :alt: Estilos ^^^^^^^ El enlace de *Estilos* permite el acceso al contenido de *Estilos*. .. figure:: _static/images/hrImagen_18-01.jpg :alt: En la paginación es posible ver la cantidad de páginas en la que se divide la cantidad de contenido de recursos existentes. En la parte derecha de la página se encuentra el botón *Nuevo estilo* con el cual es posible la creación de nuevos estilos para las pizarras. .. figure:: _static/images/hrImagen_19-01.jpg :alt: Para la creación de un nuevo estilo es necesario llenar el formulario de *Nuevo estilo*. .. figure:: _static/images/hrImagen_20-01.jpg :alt: - El campo *Nombre* debe llevar el nombre del estilo. - El campo *Tipo* comprende el tipo al que el estilo se relaciona, es decir tipo *control* o tipo *slide*. - El campo *Css* debe contener todo el código relacionado con estilos en css. - El campo *Snippet* debe contener una pequeña parte reusable de código fuente o texto que ejemplifique el uso del recurso o de la clase del recurso. - El campo *Activo* comprende la disposición en la que se encuentra el estilo para las pizarras, es decir *activo* o *inactivo*. En la parte inferior del botón *Nuevo estilo* se encuentra el tamaño de pagina, el cual es posible modificar para adecuar la cantidad de estilos que pueda contener cada pagina. .. figure:: _static/images/hrImagen_19_1-01.jpg :alt: El contenido se encuentra conformada por cada uno de los estilos que hayan sido creados a través de esta herramienta. Los estilos están tabuladas con los parámetros Nombre, Tipo, Estado y Acción. Esto permite una estructura organizada para efectos de búsqueda. .. figure:: _static/images/hrImagen_21-01.jpg :alt: - La columna *Nombre* contiene cada uno de los nombres de los estilos que se hayan creados. - La columna *Tipo* incluye el tipo de estilo al que se haya asignado el tipo (*estilo slide* o *estilo control*). - La columna *Estado* comprende la disposición en la que se encuentra el estilo, es decir *activa* o *inactiva*. - La columna *Acción* contiene las acciones que son posibles efectuar sobre cada estilo. Entre ellas se encuentran: editar y eliminar. Columna Acción """""""""""""" .. figure:: _static/images/hrImagen_22-01.jpg :alt: La acción *editar estilo* permite al usuario editar la información y código css del estilo. .. figure:: _static/images/hrImagen_22_1-01.jpg :alt: La acción *eliminar estilo* permite al usuario suprimir un estilo dentro del contenido de estilos. .. figure:: _static/images/hrImagen_17_3-01.jpg :alt: ******************************** Creación de campos para pizarras ******************************** Todo el contenido de las estructuras deberá ir en los campos Html y Json del modal *Editar Pizarras* |image0| Información de una pizarra ========================== Caso único tema para las diapositivas ------------------------------------- Código Json ^^^^^^^^^^^ :: { "slideinfo": { "area": "Texto", "tema": "Texto", "nucleo": "Texto", } } Ejemplo ^^^^^^^ |image1| Caso de tema por diapositiva ---------------------------- Código Json ^^^^^^^^^^^ :: { { "multipleSubject": true, "slideinfo": { "0": { "area": "Área diapositiva 1", "tema": "Tema diapositiva 1", "nucleo": "Núcleo diapositiva 1" }, "1": { "area": "Área diapositiva 2", "tema": "Tema diapositiva 2", "nucleo": "Núcleo diapositiva 2" }, "2": { "area": "Área diapositiva 3", "tema": "Tema diapositiva 3", "nucleo": "Núcleo diapositiva 3" } } } Ejemplo ^^^^^^^ |image2| |image3| |image4| |image5| Apoyo conceptual ================ :: { "apoyoConceptual": { "0": { "contain": "Contenido apoyo conceptual diapositiva 1", "boxStyles": "propiedad:valor", "boxClass": "propiedad:valor" }, "1": { "contain": "Contenido apoyo conceptual diapositiva 2", "boxStyles": "propiedad:valor", "boxClass": "propiedad:valor" }, "2": { "contain": "Contenido apoyo conceptual diapositiva 3", "boxStyles": "propiedad:valor", "boxClass": "propiedad:valor" } } Ejemplo ------- |image6| |image7| |image8| |image9| Drag and Drop ============= El campo *Drag and Drop* es un ejercicio que permite arrastrar elementos a un contenedor. Código Html ----------- :: Código Json ----------- :: "nombre del campo": { "dropzones": número de contenedores, "draggables": número de arrastrables, "draggable_container": { "width": "100%", "height": "100%" }, "math": el arrastrable contiene ecuaciones matemáticas, valores booleanos true or false, "dropzoneClasses": "Se escriben las clases separadas por '|', debe haber igual numero de clases que de contenedores", "initialClass": "Se escriben las clases separadas por medio de '|', deben haber igual número de clases que de arrastrables", "finalClass": "Se escriben las clases separadas por medio de '|', estas clases corresponden cuando un arrastrable ha entrado en una zona de drop(contenedor), debe haber igual número de clases al número de arrastrables" "dropzone_styles": { "# de contenedor": { "propiedad": "Valor" } }, "draggables_styles": { "# de arrastrable": { "propiedad": "valor" } }, "dropzones_content": { "# de contenedor": "Contenido en HTML de un dropzone, puede contener únicamente texto" }, "dropped_draggables_styles": { "# de arrastrable": { "width": "Ancho del elemento una vez haya sido arrastrado a una contenedor", "height": "Altura del elemento una vez haya sido arrastrado a un contenedor" } }, "draggables_content": { "# de arrastrable": "Contenido en HTML de un draggable, puede contener únicamente texto" }, "dropped_draggable_content": { "# de arrastrable": "Contenido en HTML de un draggable, puede contener únicamente texto" }, "shouldSnap": el arrastrable se ajusta al contenedor valores booleanos true or false, "isOneDrop": el arrastrable se ajusta al contenedor valores booleanos true or false, "answer": { "# de contenedor": "arrastrable_1,arrastrable_2,etc" } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: Ejemplo Json ^^^^^^^^^^^^ :: "drag_and_drop_field_1": { "dropzones": 1, "draggables": 1, "draggable_container": { "width": "100%", "height": "100%" }, "math": false, "dropzoneClasses": "class", "initialClass": "class", "finalClass": "class", "dropzones_styles": { "0": { "position": "absolute", "border": "4px dashed orange", "background-color": "white", "left": "585px", "top": "100px", "width": "160px", "z-index": "1", "height": "160px" } }, "draggables_styles": { "0": { "position": "absolute", "border": "2px dashed blue", "background-color": "white", "left": "230px", "top": "100px", "width": "160px", "height": "160px", "z-index": "2" } }, "dropzones_content": {}, "dropped_draggables_styles": { "0": { "width": "160px", "height": "160px" } }, "draggables_content": { "0": "

El arrastable esta fuera del contenedor

" }, "dropped_draggable_content": { "0": "

El arrastable esta dentro del contenedor

" }, "shouldSnap": true, "isOneDrop": true, "answer": { "0": "0" } } |image10| |image11| Fixed Text Field ================ El campo *Fixed Text Field* es uno de los campos de área de texto que permiten agregar contenido de texto dentro del campo. Este campo permite validar respuestas de texto fijo, es decir una respuesta única de texto. Código Html ----------- :: Código Json ----------- { "nombre del campo": { "answer": "Respuesta única", "isNull": el campo de texto va vació, valores booleanos true or false, "ignoreCase": el campo de texto ignora o no el caso de textos con mayúscula, valores booleanos true or false } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: > Ejemplo Json ^^^^^^^^^^^^ :: { "campo_texto_fijo_1": { "answer": "este campo contiene una única respuesta", "isNull": false, "ignoreCase": false } } |image12| Fixed Multiple Text Field ========================= El campo *Fixed Text Mult Field* es uno de los campos de área de texto que permiten agregar contenido de texto dentro del campo. Este campo permite validar respuestas de texto fijo múltiples, es decir una u otra respuesta única. Código Html ----------- :: Código Json ----------- :: { "nombre del campo": { "answer": "respuestas separadas por '|...'", "isNull": el campo de texto va vació, valores booleanos true or false, "ignoreCase": el campo de texto ignora o no el caso de textos con mayúscula, valores booleanos true or false } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: Ejemplo Json ^^^^^^^^^^^^ :: { "campo_texto_multiple_fijo_1": { "answer": "este campo valida varias respuestas únicas|esta es otra respuesta", "isNull": false, "ignoreCase": true } } |image13| |image14| Keywords Text Area Field ======================== El campo *Keywords Text Area Field* es uno de los campos de área de texto que permiten agregar contenido dentro de texto del campo. Este campo permite validar respuestas de texto palabras clave, es decir palabras específicas que se hayan agregado al campo. Todas las palabras clave deben ser agregadas al campo de texto para que el la respuesta sea correcta. Código Html ----------- :: Código Json ----------- :: { "nombre del campo": { "answer": "respuestas palabras clave separadas por '|...'", "isNull": el campo de texto va vació, valores booleanos true or false, "ignoreCase": el campo de texto ignora o no el caso de textos con mayúscula, valores booleanos true or false } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: Ejemplo Json ^^^^^^^^^^^^ :: { "campo_palabras_clave_1": { "answer": "palabra clave uno|palabra clave dos", "isNull": false, "ignoreCase": true } } |image15| Open Answer Text Field ====================== El campo *Open Answer Text Field* es uno de los campos de área de texto que permiten agregar contenido de texto dentro del campo. Este campo permite agregar texto de manera abierta sin estar atado a un respuesta fija o respuesta de palabras clave. El contenido sera revisado consecuentemente por el profesor. Este campo de texto no necesita de un código Json. Código Html ----------- :: Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: |image16| Fixed Text Multiple Keyword =========================== El campo *Fixed Text Multiple Keyword* es uno de los campos de área de texto que permiten agregar contenido de texto dentro del campo. Permite agregar grupos de palabras clave, es decir una combinación de ciertas palabras que permiten al campo validar la respuesta. Código Html ----------- :: Código Json ----------- :: { "nombre del campo": { "answer": [ [ { "item": "1" }, { "item": "2" }, { "item": "3" }, ], [ { "item": "6" }, { "item": "7" }, { "item": "8" }, { "item": "9" }, { "item": "10" } ], . . . ] } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: Ejemplo Json ^^^^^^^^^^^^ :: { "fixed_text_multiple_keyword_1": { "answer": [ [ { "item": "palabra 1" }, { "item": "palabra 2" } ], [ { "item": "palabra 2" }, { "item": "palabra 3" } ], [ { "item": "palabra 1" }, { "item": "palabra 3" } ] ] } } |image17| |image18| |image19| Multiple Choice Field ===================== El campo *Multiple Choice Field* es un campo de selección múltiple que permite al usuario elegir entre varias opciones de respuesta. Código Html ----------- :: Código Json ----------- :: { "nombre del campo": { "optionsNumber": Número de elementos seleccionables, "multipleAnswer": El campo de selección múltiple contiene mas de una respuesta, valores booleanos true or false, "selectedClass": "Clase del elemento cuando este seleccionado", "unSelectedClass": "Clase del elemento cuando no este seleccionado", "optionsStyles": { "Número del elemento": { "Propiedad": "Valor" } }, "answer": "Elementos separados por '|'"  } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: Ejemplo Json ^^^^^^^^^^^^ :: "multiple-choice-field_1": { "optionsNumber": 3, "multipleAnswer": false, "selectedClass": "SMUR_ficha_roja_checked", "unSelectedClass": "SMUR_ficha_roja", "optionsStyles": { "0": { "width": "25px", "height": "25px", "position": "absolute", "top": "50px", "left": "380px" }, "1": { "width": "25px", "height": "25px", "position": "absolute", "top": "100px", "left": "380px" }, "2": { "width": "25px", "height": "25px", "position": "absolute", "top": "150px", "left": "380px" } }, "answer": "0" } |image20| True or False Field =================== El campo *True or False Field* es un campo de selección que permite al usuario elegir una respuesta entre dos opciones. Ejemplo Html ------------ :: Ejemplo Json ------------ :: { "IDPregunta": { "trueInput": { "class": "Clase CSS correspondiente al radio button de true", "style": { "Propiedad": "Valor" } }, "falseInput": { "class": "Clase CSS correspondiente al radio button de false", "style": { "Propiedad": "Valor" } }, "background": { "class": "Clase del background correspondiente al campo de texto", "style": { "Propiedad": "Valor" }, }, "textField": "fixed(campo de texto fijo)|keywords(campo palabras clave)|open(campo de texto abierto)|multiple-keyword(campo de texto grupos palabras clave)|multiple-field(campo de texto multiple fijo)", "textFieldStyle": "Propiedad:Valor;Propiedad:Valor;(propiedad del campo de texto)", "textFieldClass": "Clase para el campo de texto", "answer": "true|Respuesta", "gradedStyle": { "Propiedad": "Valor" } } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: Ejemplo Json ^^^^^^^^^^^^ :: "true_or_false_field_1": { "trueInput": { "class": "first", "style": { "width": "50px", "height": "50px", "position": "absolute", "left": "450px", "top": "100px" } }, "falseInput": { "class": "first", "style": { "width": "50px", "height": "50px", "position": "absolute", "left": "550px", "top": "100px" } }, "background": { "class": "CETA_box_pencil_izq", "style": { "width": "350px", "height": "60px", "position": "absolute", "left": "340px", "top": "145px" } }, "textField": "fixed", "textFieldStyle": "position: absolute; width: 280px; height: 40px; position: absolute; top: 155px; left:390px;", "textFieldClass": "class", "answer": "true", "gradedStyle": { "position": "absolute", "top": "70px", "left": "580px", "width": "50px", "height": "50px" } }, "true_or_false_field_2": { "trueInput": { "class": "first", "style": { "width": "50px", "height": "50px", "position": "absolute", "left": "450px", "top": "280px" } }, "falseInput": { "class": "first", "style": { "width": "50px", "height": "50px", "position": "absolute", "left": "550px", "top": "280px" } }, "background": { "class": "CETA_box_pencil_izq", "style": { "width": "350px", "height": "60px", "position": "absolute", "left": "340px", "top": "345px" } }, "textField": "keywords", "textFieldStyle": "position: absolute; width: 280px; height: 40px; position: absolute; top: 355px; left:390px;", "textFieldClass": "class", "answer": "Respuesta", "gradedStyle": { "position": "absolute", "top": "270px", "left": "580px", "width": "50px", "height": "50px" } } |image21| Image Selection Field ===================== El campo *Image Selection Field* es un campo de selección de imágenes que permite al usuario elegir entre varias opciones de respuesta. Código Html ----------- :: Código Json ----------- :: { "IDPregunta": { "images": Número de imágenes, "selectedClass": "Clase css correspondiente al bloque seleccionado", "selectableClasses": "Clases separadas por '|', deben haber igual número al número de imágenes al numero de clases", "selectableContent": { "Número de seleccionable": "URL de la imagen" }, "selectableStyles": { "Número de seleccionable": { "Propiedad seleccionable": "Valor seleccionable" } }, "filterSelectableStyles": { "Múmero de filtro": { "Propiedad filtro": "Valor filtro" } }, "multipleAnswer": valor booleano si existe mas de una respuesta true|false, "answer": "Índice de la respuesta o las respuestas separadas por '|'" } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: Ejemplo Json ^^^^^^^^^^^^ :: "image-selection-field_1": { "images": 3, "selectedClass": "FRAME_img_yellow", "selectableClasses": "class|class|class", "selectableContent": { "0": "http://revealer.s3.amazonaws.com/uploads/revealer_assets/baraja_diamante_03.png", "1": "http://revealer.s3.amazonaws.com/uploads/revealer_assets/baraja_diamante_04.png", "2": "http://revealer.s3.amazonaws.com/uploads/revealer_assets/baraja_diamante_09.png" }, "selectableStyles": { "0": { "width": "120px", "height": "150px", "position": "absolute", "top": "100px", "left": "200px" }, "1": { "width": "120px", "height": "150px", "position": "absolute", "top": "100px", "left": "400px" }, "2": { "width": "120px", "height": "150px", "position": "absolute", "top": "100px", "left": "600px" } }, "filterSelectableStyles": { "0": { "width": "120px", "height": "150px", "position": "absolute", "opacity": "0.5", "z-index": "4", "top": "100px", "left": "200px" }, "1": { "width": "120px", "height": "150px", "position": "absolute", "opacity": "0.5", "z-index": "4", "top": "100px", "left": "400px" }, "2": { "width": "120px", "height": "150px", "position": "absolute", "opacity": "0.5", "z-index": "4", "top": "100px", "left": "600px" } }, "multipleAnswer": false, "answer": "Índice de la respuesta o las respuestas separadas por '|'" } |image22| Underline Field =============== El campo *Underline Field* permite al usuario subrayar texto. La respuesta se valida si se subrayan los mismos caracteres que se establecen en la respuesta. Código Html ----------- :: Código Json ----------- :: { "IDPregunta":{ "answer": "Respuesta que debe coincidir exactamente. Si son más de una se debe separar con '|'", "textField": "Todo el texto interno que se puede subrayar en el html", "underlineClearButtonClass": "Nombre de la clase del botón de eliminar selección", "initialUnderlineClearButtonStyle": { "Propiedad" : "Valor (valores para el botón de eliminar selección)", }, "initialUnderlineTextColor": "Propiedad:Valor;Propiedad:Valor; (color del resaltado)" } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: Ejemplo Json ^^^^^^^^^^^^ :: { "underline-text-field_1": { "answer": "Frase de ejemplo.", "textField": "

Subraya la siguiente frase: Frase de ejemplo.

", "underlineClearButtonClass": "btn_delete_underline", "initialUnderlineClearButtonStyle": { "position": "absolute", "top": "0px", "left": "300px" }, "initialUnderlineTextColor": "background-color: rgb(222, 249, 60); opacity: 1; text-decoration: underline; color: rgb(98, 87, 87);" } } |image23| Relational One on One Field =========================== El campo *Relational One on One Field* permite unir dos o mas elementos mediante una línea de conexión. Código Html ----------- :: Código Json ----------- :: { "IDPregunta":{ "answer": "Pareja de ids de los divs que deben coincidir, si son más de una se debe separar con '|'", "numberColmuns" : Número de columnas 2 - 3 , "DragOptions" : { "cursor" : "Tipo de cursor del mouse en el nodo (pointer)", "zIndex" : "Número del z-index (0000-9999)" }, "PaintStyle" : { "lineWidth" : "Grosor de la línea (Sólo números)", "strokeStyle" : "Color de la línea" }, "EndpointHoverStyle" : { "fillStyle" : "Color al hacer hover con el mouse en el nodo" }, "HoverPaintStyle" : { "strokeStyle" : "Color al hacer hover con el mouse en la línea" }, "EndpointStyle" : { "strokeStyle" : "Color del nodo", "fillStyle" : "Color de relleno nodo" }, "Endpoint" : "Tipo de nodo (Dot, Rectangle, Blank y Image)", "sourceStyleColumns" : "Estilos para la columna con las raíces", "middleStyleColumns" : "Estilos para la columna del medio", "targetStyleColumns" : "Estilos para la columna de los nodos finales", "sourceColumns" : { "IDDiv" : { "id" : "IDDiv", "class" : "ClassDiv", "style" : "Propiedad:Valor;Propiedad:Valor;", "maxConections" : Cantidad de conexiones permitidas, si son ilimitadas poner -1, "position" : "Posición en la que puede estar el nodo (Top,Bottom,Left,Right)", "value" : "En caso de tener texto agregarlo acá" } }, "middleColumns" : { "IDDiv" : { "id" : "IDDiv", "class" : "ClassDiv", "style" : "Propiedad:Valor;Propiedad:Valor;", "sourceMaxConections" : Cantidad de conexiones permitidas para la fuente, si son ilimitadas poner -1, "sourceposition" : "Posición de la fuente en la que puede estar el nodo (Top,Bottom,Left,Right)", "targetMaxConections" : Cantidad de conexiones permitidas para el receptor, si son ilimitadas poner -1, "targetposition" : "En caso de tener texto agregarlo acá" } }, "targetColumns" : { "IDDiv" : { "id" : "IDDiv", "class" : "ClassDiv", "style" : "Propiedad:Valor;Propiedad:Valor;", "maxConections" : Cantidad de conexiones permitidas, si son ilimitadas poner -1, "position" : "Posición en la que pede estar el nodo (Top,Bottom,Left,Right)", "value" : "En caso de tener texto agregarlo acá" } } } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: Ejemplo Json ^^^^^^^^^^^^ :: { "relational_1": { "answer": "c:first|b:second|a:third|second:uno|first:dos|third:tres", "numberColmuns": 3, "DragOptions": { "cursor": "pointer", "zIndex": "2000" }, "PaintStyle": { "lineWidth": "4", "strokeStyle": "#26addd" }, "EndpointHoverStyle": { "fillStyle": "#ff0000" }, "HoverPaintStyle": "", "EndpointStyle": { "strokeStyle": "#e08f58", "fillStyle": "#ecd8b3" }, "Endpoint": "Dot", "sourceStyleColumns": "sourceStyleColums:style", "middleStyleColumns": "middleStyleColumns:style", "targetStyleColumns": "targetStyleColumns:style", "sourceColumns": { "a": { "id": "a", "class": "class", "style": "width: 30px; height: 30px; position: absolute; left: 195px; top: 32px; border: 2px dotted red", "maxConnections": 1, "position": "Right", "value": "" }, "b": { "id": "b", "class": "class", "style": "width: 30px; height: 30px; left: 195px; position: absolute; top: 218px; border: 2px dotted red", "maxConnections": 1, "position": "Right", "value": "" }, "c": { "id": "c", "class": "class", "style": "width: 30px; height: 30px; position: absolute; left: 195px; top: 425px; border: 2px dotted red", "maxConnections": 1, "position": "Right", "value": "" } }, "middleColumns": { "first": { "id": "first", "class": "class", "style": "width: 145px; height: 30px; position: absolute; left: 350px; top: 32px; border: 2px dotted red", "sourceMaxConnections": 1, "sourceposition": "Right", "targetMaxConnections": 1, "targetposition": "Left", "value": "" }, "second": { "id": "second", "class": "class", "style": "width: 145px; height: 30px; position: absolute; left: 350px; top: 215px; border: 2px dotted red", "sourceMaxConnections": 1, "sourceposition": "Right", "targetMaxConnections": 1, "targetposition": "Left", "value": "" }, "third": { "id": "third", "class": "class", "style": "width: 145px; height: 30px; position: absolute; left: 350px; top: 422px; border: 2px dotted red", "sourceMaxConnections": 1, "sourceposition": "Right", "targetMaxConnections": 1, "targetposition": "Left", "value": "" } }, "targetColumns": { "uno": { "id": "uno", "class": "class", "style": "width: 30px; height: 30px; position: absolute; left: 633px; top: 32px; border: 2px dotted red", "maxConnections": 1, "position": "Left", "value": "" }, "dos": { "id": "dos", "class": "class", "style": "width: 30px; height: 30px; position: absolute; top: 215px; left: 633px; border: 2px dotted red", "maxConnections": 1, "position": "Left", "value": "" }, "tres": { "id": "tres", "class": "class", "style": "width: 30px; height: 30px; position: absolute; top: 422px; left: 634px; border: 2px dotted red", "maxConnections": 1, "position": "Left", "value": "" } } } } En este ejercicio de relación están incluidas las tres columnas, también es posible incluir solo dos columnas, la columna fuente y columna objetivo para efectos del ejercicio. |image24| La respuestas están programadas en la linea *answer* elemento a elemento a través del *id* que se le proporciono a cada uno de ellos. :: "answer": "c:first|b:second|a:third|second:uno|first:dos|third:tres", |image25| Equation Field ============== El campo *Equation Field* permite agregar ecuaciones en la pizarra a tráves del código en latex. Código Html ----------- :: Código Json ----------- :: { "Id de la ecuación":{ "value": "Ecuación en LaTeX, se deben escapar los backslash en cada backslash '\\'", "style": "" } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: Ejemplo Json ^^^^^^^^^^^^ :: { "ecuacion_1": { "value": "\\sqrt{2}\\approx 1,4142", "style": "color:#F00;" } } |image26| Equation Editor Field ===================== El campo *Equation Editor Field* permite crear un campo para digitar ecuaciones y queden registrados en como respuesta en la pizarra. Cuando se seleccione un campo de respuesta, aparecerá el editor matemático *wiris* donde se podrá digitar la ecuación. Código Html ----------- :: Código Json ----------- :: { "IdField":{ "answer":"Respuesta en notación LaTeX, escapar el backslash en cada backslash '\\' Ej. (\\sqrt{9}), se puede escribir más de una respuesta separando con | Ej.(\\sqrt{9}|\\sqrt{2}|\\sqrt{5})", "boxStyle":"propiedad:valor;propiedad:valor;propiedad:valor;", "isNull": true or false } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ :: Ejemplo Json ^^^^^^^^^^^^ :: { "math-input-text-field_1": { "answer": "\\sqrt{4}|2", "boxStyle": "position: absolute; height: 65px; width: 165px; left: 400px; top: 15px; border: 2px blue solid; background-color: white " } } |image27| Al seleccionar el campo saldrá la ventana del editor de wiris para digitar la ecuación. |image28| La respuesta será válida si se dígito la opción de respuesta que haya sido ingresada en el código Json. Para este ejemplo también es válido como respuesta el número 2. |image29| |image30| |image31| Embed Field =========== El campo *Embed Field* permite incrustar recursos externos como videos o interactivos de geogebra. Código Html ----------- :: Código Json ----------- :: { "IDRecurso":{ "src": "URL del recurso a embeber" } } Ejercicio --------- Ejemplo Html ^^^^^^^^^^^^ ::
Ejemplo Json ^^^^^^^^^^^^ :: { "geo_1": { "src": "https://www.geogebra.org/material/iframe/id/bfwmJPdj/width/450/height/350/border/888888/rc/false/ai/false/sdz/false/smb/false/stb/false/stbh/true/ld/false/sri/false/at/auto" } } |image32| Carousel Field ============== El *Carousel Field* es un contenido que permite tener varias diapositivas internas en una sola diapositiva de la pizarra. El carrusel tiene flechas laterales para moverse entre el contenido de una misma diapositiva. El carrusel puede ser usado para dividir un tema muy extenso en secciones o tener múltiples campos sobre cada uno de las diapositivas del mismo. En cada página del carrusel se puede utilizar cualquier campo expresado en este documento. Código Html ----------- |image33| Ejercicio ^^^^^^^^^ Ejemplo Html """""""""""" |image34| Ejemplo Json """""""""""" Para este ejemplo de carrusel se usaron dos directivas para cada diapositiva del carrusel, *Fixed Text Field* e *Image Selection Field*, en el código Json están los parámetros de cada directiva respectivamente. :: { "campo_1": { "answer": "Respuesta" }, "images_1": { "images": 3, "selectedClass": "FRAME_img_yellow", "selectableClasses": "class|class|class", "selectableContent": { "0": "http://revealer.s3.amazonaws.com/uploads/revealer_assets/pt_m6_a.png", "1": "http://revealer.s3.amazonaws.com/uploads/revealer_assets/pt_m6_b.png", "2": "http://revealer.s3.amazonaws.com/uploads/revealer_assets/pt_m6_c.png" }, "selectableStyles": { "0": { "width": "", "height": "", "position": "absolute", "top": "150px", "left": "200px" }, "1": { "width": "", "height": "", "position": "absolute", "top": "150px", "left": "400px" }, "2": { "width": "", "height": "", "position": "absolute", "top": "150px", "left": "600px" } }, "filterSelectableStyles": { "0": { "width": "24px", "height": "24px", "position": "absolute", "opacity": "0.5", "z-index": "3", "top": "150px", "left": "200px" }, "1": { "width": "24px", "height": "24px", "position": "absolute", "opacity": "0.5", "z-index": "3", "top": "150px", "left": "400px" }, "2": { "width": "24px", "height": "24px", "position": "absolute", "opacity": "0.5", "z-index": "3", "top": "150px", "left": "600px" } }, "multipleAnswer": false, "answer": "2" } } |image35| |image36| .. |image0| image:: _static/images/editImagen_8_1-01.jpg .. |image1| image:: _static/images/info_pizarra_2.jpg .. |image2| image:: _static/images/info_pizarra_1.jpg .. |image3| image:: _static/images/temas_1.jpg .. |image4| image:: _static/images/temas_2.jpg .. |image5| image:: _static/images/temas_3.jpg .. |image6| image:: _static/images/apoyo_0.png .. |image7| image:: _static/images/apoyo_1.png .. |image8| image:: _static/images/apoyo_2.png .. |image9| image:: _static/images/apoyo_3.png .. |image10| image:: _static/images/drag_and_drop_1.jpg .. |image11| image:: _static/images/drag_and_drop_2.jpg .. |image12| image:: _static/images/fixed_text_1.jpg .. |image13| image:: _static/images/fixed_mul_text_1.jpg .. |image14| image:: _static/images/fixed_mul_text_2.jpg .. |image15| image:: _static/images/keywords_text_1.jpg .. |image16| image:: _static/images/open_text_1.jpg .. |image17| image:: _static/images/mult_keyword_1.png .. |image18| image:: _static/images/mult_keyword_2_1.png .. |image19| image:: _static/images/mult_keyword_3.png .. |image20| image:: _static/images/multchoice_1.png .. |image21| image:: _static/images/true_false_1.png .. |image22| image:: _static/images/imageselection_1.png .. |image23| image:: _static/images/underline_1.png .. |image24| image:: _static/images/relacional_1.png .. |image25| image:: _static/images/relacional_2.png .. |image26| image:: _static/images/equation_1.png .. |image27| image:: _static/images/equation_editor_1.png .. |image28| image:: _static/images/equation_editor_2.png .. |image29| image:: _static/images/equation_editor_3.png .. |image30| image:: _static/images/equation_editor_4.png .. |image31| image:: _static/images/equation_editor_5.png .. |image32| image:: _static/images/embed_1.png .. |image33| image:: _static/images/carrusel.png .. |image34| image:: _static/images/carrusel_ejemplo.png .. |image35| image:: _static/images/carousel_1.png .. |image36| image:: _static/images/carousel_2.png .. |imageE0| image:: _static/images/editImagen_1-01.jpg .. |imageE1| image:: _static/images/editImagen_4-01.jpg .. |imageE2| image:: _static/images/editImagen_0-01.jpg .. |imageE3| image:: _static/images/editImagen_1_4.jpg .. |imageE4| image:: _static/images/editImagen_4_1.jpg .. |imageE5| image:: _static/images/editImagen_7_1.jpg .. |imageE6| image:: _static/images/editImagen_7_1_1.jpg .. |imageE7| image:: _static/images/editImagen_8_1.jpg .. |imageE8| image:: _static/images/editImagen_8_1-01.jpg .. |imageE9| image:: _static/images/editImagen_12.jpg .. |imageE10| image:: _static/images/editImagen_11_1.jpg .. |imageE11| image:: _static/images/editImagen_11_1_1.jpg .. |imageE12| image:: _static/images/editelemento_1.jpg .. |imageE13| image:: _static/images/editelemento_id.jpg .. |imageE14| image:: _static/images/editar_pizarra_1.jpg .. |imageE15| image:: _static/images/editar_pizarra_2_1.jpg .. |imageE16| image:: _static/images/editar_pizarra_diapositiva_1.jpg .. |imageE17| image:: _static/images/editar_pizarra_diapositiva_2.jpg .. |imageE18| image:: _static/images/editar_pizarra_diapositiva_3.jpg .. |imageE19| image:: _static/images/alerta_1.jpg .. |imageE20| image:: _static/images/alerta_2.jpg .. |imageE21| image:: _static/images/guardar_1.jpg .. |imageE22| image:: _static/images/guardar_2.jpg .. |imageE23| image:: _static/images/alerta_json_1.jpg .. |imageE24| image:: _static/images/editImagen_8-01.jpg .. |imageE25| image:: _static/images/editImagen_1-01.jpg .. |imageE26| image:: _static/images/editImagen_1_2.jpg .. |imageE27| image:: _static/images/editImagen_1_3.jpg .. |imageE28| image:: _static/images/editImagen_4_1_1.jpg .. |imageE29| image:: _static/images/editImagen_4_2_1.jpg .. |imageE30| image:: _static/images/editImagen_5.jpg .. |imageE31| image:: _static/images/editImagen_6_1.jpg .. |imageE32| image:: _static/images/editImagen_6_1_1.jpg .. |imageE33| image:: _static/images/editImagen_9_1.jpg .. |imageE34| image:: _static/images/editcontrol_1.jpg .. |imageE35| image:: _static/images/editclase_1.jpg .. |imageE36| image:: _static/images/editposicion_1.jpg .. |imageE37| image:: _static/images/editposicion_2.png .. |imageE38| image:: _static/images/editposicion_3_1.jpg .. |imageE39| image:: _static/images/editposicion_4_1.jpg .. |imageE40| image:: _static/images/tamano_1.jpg .. |imageE41| image:: _static/images/tamano_2_1.jpg .. |imageE42| image:: _static/images/editImagen_11_1_1.jpg .. |imageE43| image:: _static/images/html_error_1.jpg