Drag & drop

ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA INFORMÁTICA GRADO EN INGENIERÍA DEL SOFTWARE DRAG & DROP Realizado por Edgar Pérez Ferrando Tutorizado por Eduardo Guzmán de los Riscos Departamento Lenguajes y Ciencias de la Computación UNIVERSIDAD DE MÁLAGA MÁLAGA, Diciembre 2015 Fecha defensa: El Secretario del Tribunal Resumen Drag & Drop es una aplicación web diseñada para la creación de problemas a partir de piezas, en la que al profesor se le plantea una nueva posibilidad de evaluar a sus alumnos. La aplicación web servirá como un entorno dedicado a la elaboración de preguntas y respuestas. Para responder a dichas preguntas, se proporcionan unos elementos llamados “piezas” al alumno que se encargará de utilizar para construir su respuesta. A su vez, el profesor al elaborar la pregunta establecerá la solución ideal del problema y el conjunto de “piezas” que los alumnos podrán utilizar para crear las suyas propias. El alumno al terminar la solución de un problema, la enviará al servidor. Este se encargará de evaluarla y comparar la solución del alumno con la solución ideal propuesta por el profesor. Finalmente el profesor será el encargado de examinar el ejercicio y ajustar la calificación, ya sea aceptando la que propone el sistema o indicando una propia. Palabras claves  Bootstrap.  Cliente y servicio (Restful).  CSS.  HTML.  Input.  JavaScript.  jQuery.  JSON.  JSP y Servlet.  Pieza.  Problema.  MongoDB.  UML.  SCRUM.  Solución. Abstract Drag’N Drop is based on a web application designed to create problems with pieces, which offers new possibilities to evaluate their students. The web application would use as an environment used to make problems and solutions. To resolve these solutions, they will be provided some elements called “pieces” to the student which will build a solution. At the same time, when the teacher are going to develop problems he will have to make an ideal solution for the problem and giving the students the pieces to making their solutions. When the student would finish his solution, he will send it to the server and the server will correct the solution comparing it with the teacher’s solution. Finally, the teacher will be in charge to correct the student’s solution and decide if it deserve and upper or lower mark, or let it as it is. Keywords  Bootstrap.  Client and service (Restful).  CSS.  HTML.  Input.  JavaScript.  jQuery.  JSON.  JSP and Servlet.  Piece.  Problem.  MongoDB.  UML.  SCRUM.  Solution. Contenido 1. Introducción .............................................................................................. 1 1.1. Descripción .................................................................................................... 1 1.2. División del trabajo ........................................................................................ 2 1.3. Métodos y fases del trabajo ........................................................................... 2 1.4. Tecnologías y herramientas .......................................................................... 2 1.5. Organización del documento ......................................................................... 3 2. Especificación y análisis ........................................................................... 6 2.1. Descripción de participantes y usuarios ........................................................ 6 2.1.1. Perfiles de usuario .................................................................................. 6 2.1.2. Alternativas y competencia ..................................................................... 6 2.2. Visión general del producto ........................................................................... 6 2.2.1. Entorno de despliegue ............................................................................ 6 2.3. Requisitos funcionales de la aplicación ......................................................... 7 2.4. Requisitos no funcionales .............................................................................. 7 3. Diseño de la aplicación ............................................................................. 8 3.1. Modelo de negocio ........................................................................................ 8 3.2. Diagramas de casos de uso .......................................................................... 9 3.2.1. RF1 - Iniciar sesión ................................................................................. 9 3.2.2. RF2 - Cerrar sesión .............................................................................. 12 3.2.3. RF3 - Crear Problema ........................................................................... 14 3.2.4. RF4 – Listar Problemas ........................................................................ 17 3.2.5. RF5 – Editar Problema ......................................................................... 19 3.2.6. RF6 – Borrar Problema ......................................................................... 22 3.2.7. RF7 – Ver Problema ............................................................................. 24 3.2.8. RF8 – Listar Soluciones ........................................................................ 26 3.2.9. RF9 – Visualizar una solución............................................................... 29 3.2.10. RF10 – Corregir soluciones ............................................................... 32 3.3. Diagrama de navegación ............................................................................. 34 3.4. Diagrama de Actividad (Insertar Problema) ................................................. 35 3.5. Diagrama de componentes (Servicios) ........................................................ 36 3.6. Estructuras de los ficheros JSON ................................................................ 37 3.6.1. JSON de construcción de piezas .......................................................... 37 3.6.2. JSON de envío a Mongo DB para crear un problema o editarlo. .......... 39 4. Implementación ...................................................................................... 40 4.1. Web Pages .................................................................................................. 40 4.1.1. Index.jsp ............................................................................................... 41 4.1.2. Main.jsp ................................................................................................ 41 4.1.3. navegacion.jsp ...................................................................................... 42 4.1.4. header.jsp ............................................................................................. 42 4.1.5. editarProblema.jsp ................................................................................ 43 4.1.6. listadoProblemas.jsp ............................................................................. 43 4.1.7. listadoSoluciones.jsp ............................................................................ 44 4.1.8. corrección.jsp ........................................................................................ 44 4.1.9. Styles.css .............................................................................................. 45 4.1.10. Directorio libs ..................................................................................... 45 4.1.11. Entities ............................................................................................... 46 4.1.12. Servlet ............................................................................................... 46 4.1.13. service ............................................................................................... 47 4.2. Funciones Javascript ................................................................................... 47 4.2.1. Make_draggable ................................................................................... 47 4.2.2. buildPieceField ...................................................................................... 48 4.2.3. leerFichero ............................................................................................ 49 4.2.4. getSoulcion ........................................................................................... 49 4.2.5. #Content-panel ..................................................................................... 50 4.2.6. #finalizar ............................................................................................... 51 5. Pruebas .................................................................................................. 52 6. Conclusiones y trabajos futuros .............................................................. 52 6.1. Objetivos cumplidos .................................................................................... 52 6.2. Dificultades encontradas ............................................................................. 53 6.3. Posibles ampliaciones ................................................................................. 53 Referencias ...................................................................................................... 54 ANEXO I – Diagramas de secuencia ................................................................ 55 1 1. Introducción 1.1. Descripción Este trabajo fin de grado se centra en el desarrollo de un entorno web educativo para la resolución y construcción de problemas. El objetivo de este entorno es, por tanto, facilitar el diseño y evaluación de actividades de tipo procedimental. Se basará en un entorno muy popular, Scratch, desarrollado por el Instituto Tecnológico de Massachusetts (MIT) para enseñar fundamentos de programación a estudiantes no universitarios (alumnado de Primaria y Bachillerato). Scratch permite la construcción de programas a través de un entorno visual a través del cual los alumnos, mediante operaciones de arrastrar y soltar, a partir de una colección de bloques que interconectarán entre sí, elaboran programas. El entorno desarrollado en este proyecto permitirá a los profesores diseñar actividades de tipo procedimental. Para ello tendrán que definir el conjunto de bloques que cada alumno deberá utilizar para la resolución de un determinado problema. A partir de este conjunto se construirá un enunciado y una solución ideal al problema. Posteriormente, a través de un entorno específico, el alumnado podrá resolver el problema o problemas propuestos por el profesor. Para ello se le mostrará, por cada problema, el enunciado y la colección de bloques disponibles para construir la solución. La corrección de las soluciones se realizará a posterior a partir de todas las soluciones que los alumnos elaboren. A partir de ellas, se construirá un grafo que contemple todas las posibles soluciones, así como la solución ideal del profesor. A partir de este grafo y, en base a un conjunto de heurísticos, se calculará la calificación de cada alumno en el problema. En resumen, dentro del entorno se podrán identificar los siguientes subsistemas:  Herramienta del profesor: A través de ella el profesor podrá especificar problemas (colecciones de bloques, enunciados y solución ideal).  Herramienta del alumnado: Esta herramienta permitirá a cada alumno resolver el problema o problemas que cada profesor proponga. Se tratará de un entorno visual donde la solución se representará a partir de bloques instanciados y conectados entre sí.  Módulo de evaluación y construcción de grafo de solución: Este módulo será el encargado de construir el grafo de solución del problema, a partir de la solución ideal y de todas las formas en las que los diferentes alumnos han resuelto el problema. A partir de este grafo global, y en función de los pasos que cada alumno haya realizado de forma correcta, se calculará su calificación en cada problema. 2 1.2. División del trabajo El trabajo quedará dividido en 3 partes entre los componentes del TFG en grupo: ● Francisco Jesús Domínguez Ruiz: Módulo de evaluación y construcción de grafo de solución. ● Edgar Pérez Ferrando: Herramienta del profesor. ● Javier Ordóñez Martín: Herramienta del alumnado. 1.3. Métodos y fases del trabajo Para el desarrollo del TFG se empleará una metodología ágil, incremental e iterativa. Más concretamente se va a utilizar Scrum. Roles: ● Product Owner será el tutor del TFG ● Scrum Master: Javier Ordóñez Martín ● Equipo de Desarrollo: ○ Javier Ordóñez Martín. ○ Francisco Jesús Domínguez Ruíz. ○ Edgar Pérez Ferrando. 1.4. Tecnologías y herramientas Para la realización del TFG expuesto anteriormente se van a utilizar las siguientes herramientas: ● NetBeans: Entorno de desarrollo integrado libre, hecho principalmente para el lenguaje de programación Java. Existe además un número importante de módulos para extenderlo. NetBeans IDE es un producto libre y gratuito sin restricciones de uso. ● Trello: Herramienta de gestión de proyecto aplicada para proyectos con metodologías ágiles y SCRUM. ● MongoDB: Sistema de base de datos NoSQL orientado a documentos. En vez de guardar los datos en tablas como se hace en las base de datos relacionales, MongoDB guarda estructuras de datos en documentos tipo JSON con un esquema dinámico, haciendo que la integración de los datos en ciertas aplicaciones sea más fácil y rápida. ● Servlets y JSP: JavaServer Pages (JSP) es una tecnología que ayuda a los desarrolladores de software a crear páginas web dinámicas basadas en HTML, XML, entre otros tipos de documentos. JSP es similar a PHP, pero usa el lenguaje de programación Java. 3 ● JAX-RX: Java API for RESTful Web Services es una API del lenguaje de programación Java que proporciona soporte en la creación de servicios web de acuerdo con el estilo arquitectónico Representational State Transfer (REST). ● HTML: Lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones. ● CSS: Hoja de estilo en cascada o CSS es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML. ● Javascript: Es un lenguaje de programación interpretado. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente, implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas. ● jQuery: biblioteca de JavaScript, permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. ● jQuery-ui: Variante de la librería jQuery centrada en funcionalidades para los interfaces de usuario. En nuestro proyecto será un pilar fundamental, ya que ésta es la librería que se utiliza para el movimiento de piezas mediante los eventos de ratón. ● Bootstrap: Framework de diseño para páginas y aplicaciones web. Se centra en realizar el contenido en modo adaptativo para visualizar todo tipo de contenidos en todo tipo de dispositivos. Contiene estilos para muchos componentes html como formularios, botones, menús de navegación, etc. ● MagicDraw: Software para la elaboración de diagramas CASE, utilizado para realizar los diagramas de UML en las fases de análisis. 1.5. Organización del documento 1 - Introducción En el primer apartado del documento, encontramos una descripción del trabajo que se propone, así como la división de las tareas del mismo entre los componentes del grupo de trabajo. 10 Post-condición Un usuario, se identifica en el sistema. Prioridad Media Autor(es) Usuario Escenario principal 1. El usuario introduce el nombre de usuario y contraseña en el formulario. 2. El usuario hace clic en el botón de iniciar sesión. 3. El sistema recibe los datos y comprueba que es un usuario válido. 4. El sistema inicia la sesión. Escenario alternativo 3.b El sistema comprueba que es un usuario incorrecto. 4.b El sistema notifica que el usuario no existe. Clases de análisis A. Clases de entidad Usuario, Profesor, HttpSession B. Clases de control LoginServlet C. Clases de interfaz Index.jsp Maquetas de interfaz 11 Ilustración 3 - Mockup index.jsp Diagramas de secuencia 12 Ilustración 4 - Iniciar sesión (Diagrama de secuencia UML) 3.2.2. RF2 - Cerrar sesión Título Cerrar sesión Descripción Un profesor finaliza su sesión Pre-condición Debe de haber una sesión iniciada por un profesor Post-condición No hay ningún profesor en la sesión Prioridad baja Autor(es) Profesor 13 Escenario principal 1. El profesor hace clic en el enlace de cerrar sesión. 2. El sistema vacía la sesión y redirige la aplicación a la vista de login. Clases de análisis A. Clases de entidad Profesor B. Clases de control LogoutServlet C. Clases de interfaz navegacion.jsp, index.jsp Maquetas de interfaz Ilustración 5 - Mockup de la barra de navegación Diagramas de secuencia 14 Ilustración 6 - Cerrar sesión (Diagrama de secuencia UML) 3.2.3. RF3 - Crear Problema Título Crear Problema Descripción Un profesor creará un problema junto con la solución para almacenarlo en la persistencia y que los alumnos puedan realizar sus soluciones. Pre-condición El profesor desea realizar un problema a sus alumnos Post-condición El problema está almacenado en la persistencia junto con la solución para que los alumnos planteen sus soluciones a dicho problema y se genere una calificación automática. Prioridad Alta Autor(es) Profesor 15 Escenario principal 1. El profesor hace clic en la barra de navegación “Nuevo problema”. 2. El profesor selecciona el archivo de texto para que se generen las piezas. 3. El profesor introduce el título del problema. 4. El profesor introduce el enunciado. 5. El profesor selecciona la asignatura a la que pertenece el problema. 6. El profesor genera la solución ideal. 7. El profesor finaliza la creación haciendo clic en el botón Finalizar. 8. El sistema envía el problema para su almacenamiento. 9. El sistema notifica al profesor que se ha realizado todo sin problemas. Escenario alternativo 3.b El profesor finaliza la creación del problema 4.b El sistema notifica que no se puede almacenar un problema vacío. Clases de análisis A. Clases de entidad Profesor B. Clases de control C. Clases de interfaz Navigation.jsp, main.jsp Maquetas de interfaz 16 Ilustración 7 - Mockup main.jsp Diagramas de secuencia 17 Ilustración 8 - Crear problema (Diagrama de secuencia UML) 3.2.4. RF4 – Listar Problemas Título Listar Problemas Descripción El profesor va a listar los problemas que ha planteado. Pre-condición El profesor desea listar todos los problemas que ha realizado. 18 Post-condición El profesor consigue un listado de los problemas. Prioridad media Autor(es) Profesor Escenario principal 1. El profesor hace clic en el enlace de “Problemas” en la barra de navegación. 2. Se muestra una nueva ventana en la que aparecen los problemas planteados por el profesor en una tabla. Escenario alternativo 2.b. No se encuentra ningún problema en la persistencia y se notifica mediante un mensaje. Clases de análisis A. Clases de entidad Profesor, Problema, Asignatura B. Clases de control ListarProblemaServlet, ProblemaJerseyClient C. Clases de interfaz listadoProblemas.jsp, navigation.jsp Maquetas de interfaz Ilustración 9 - Mockup listadoProblemas.jsp Diagramas de secuencia 19 Ilustración 10 - Listar problemas (Diagrama de secuencia UML) 3.2.5. RF5 – Editar Problema Título Editar Problema Descripción Un profesor desea modificar un problema realizado previamente. Pre-condición Existe un problema que un profesor desea cambiar, ya sea porque se ha equivocado realizándolo o que desee modificar la solución. Post-condición El problema quedará almacenado correctamente. Prioridad Alta Autor(es) Profesor Escenario principal 26 Ilustración 16 - Ver problema (Diagrama de secuencia UML) 3.2.8. RF8 – Listar Soluciones Título Listar Soluciones Descripción Un profesor desea listar todas las soluciones propuestas por los alumnos. Pre-condición Un profesor desea ver el listado de soluciones propuestas por los alumnos a un problema. Post-condición El profesor puede ver todas las soluciones en un listado. Prioridad Media Autor(es) Profesor Escenario principal 1. <<Include>> ListarProblemas. 2. El profesor hace clic en el botón “Soluciones” correspondiente al problema. 3. El sistema busca las soluciones correspondientes. 4. El sistema visualiza el listado de soluciones al problema seleccionado. Escenario alternativo 4.b. No existen soluciones que listar. Clases de análisis 27 A. Clases de entidad Profesor, Problema B. Clases de control SolucionServlet, SolucionJerseyClient, ProblemaJerseyClient C. Clases de interfaz listadoProblemas.jsp, listadoSoluciones.jsp Maquetas de interfaz 28 Ilustración 17 - Mockup listadoProblemas.jsp Ilustración 18 - Mockup listadoSoluciones.jsp 29 Diagramas de secuencia Ilustración 19 - Listar soluciones (Diagrama de secuencia UML) 3.2.9. RF9 – Visualizar una solución Título Ver una solución Descripción Un profesor desea ver la solución planteada por un alumno a un problema planteado. Pre-condición El profesor quiere ver la solución propuesta por un alumno. Post-condición El profesor ha contemplado la solución. Prioridad Media Autor(es) Profesor Escenario principal 30 1. <<Include>> ListarProblemas. 2. <<Include>> ListarSoluciones. 3. El profesor hace clic en el botón “Solución” asociado a un alumno. 4. El sistema carga la vista con la solución planteada y la nota generada automáticamente. Escenario alternativo 3.b. No existen soluciones propuestas. Clases de análisis A. Clases de entidad Profesor, Solucion, Problema B. Clases de control CorregirServlet, SolucionJerseyClient, ProblemaJerseyClient C. Clases de interfaz listadoSoluciones.jsp, corrección.jsp Maquetas de interfaz 31 Ilustración 20 - Mockup correccion.jsp Diagramas de secuencia 32 Ilustración 21 - Ver Solucion (Diagrama de secuencia UML) 3.2.10. RF10 – Corregir soluciones Título Corregir Soluciones Descripción Un profesor desea ver (y/o evaluar) la solución planteada por un alumno a un problema planteado. Pre-condición El profesor quiere ver (y/o evaluar) la solución propuesta por un alumno. Post-condición El profesor ha contemplado la solución y evaluado en caso de que no esté de acuerdo con la evaluación automática. Prioridad Media Autor(es) Profesor Escenario principal 1. <<Include>> ListarProblemas. 2. <<Include>> ListarSoluciones. 3. <<Include>> Ver Solucion. 4. El profesor corrige la nota generada en el campo de texto donde se visualiza. 5. El profesor hace clic en el botón Corregir. 6. El sistema actualiza la calificación en la persistencia y recarga la vista. Escenario alternativo 33 3.b. El profesor no cambia la nota generada por el sistema. Clases de análisis A. Clases de entidad Profesor B. Clases de control CorregirCalificacionServlet C. Clases de interfaz corrección.jsp Maquetas de interfaz Ilustración 22 - Mockup correccion.jsp Diagramas de secuencia 34 Ilustración 23 - Corregir Solucion (Diagrama de secuencia UML) 3.3. Diagrama de navegación Con un diagrama de navegación podemos entender un poco cómo ir de una parte de la aplicación a otra con facilidad, así como aclarar los puntos de acceso a las diferentes funcionalidades del sistema. La aplicación es una aplicación web, por lo tanto, siempre se debe de tener un menú de navegación rápido y fácilmente manejable. Para ello listaremos las principales opciones de navegación “Nuevo problema”, ”Problemas” y cerrar sesión. 35 Ilustración 24 - Navegación entre ficheros JSP (Diagrama de navegación UML) El diagrama muestra el flujo de navegación entre las vistas (jsp) normal, sin embargo, si la sesión del profesor expira o se encuentra algún error de navegación, la aplicación volverá a la vista “index.jsp” para que el profesor vuelva a iniciar la sesión. 3.4. Diagrama de Actividad (Insertar Problema) Viendo el diagrama de secuencia, puede que quede un poco difuso el procedimiento para insertar un nuevo problema en la persistencia. Es por ello que a través de un diagrama de actividad veremos cómo se realiza el proceso a más bajo nivel. Cabe destacar que para éste caso en particular, hemos preferido utilizar AJAX. De esta forma no nos hace falta utilizar ningún servlet, así como un objeto cliente que conecte con un servicio. 42 Ilustración 30 - main.jsp 4.1.3. navegacion.jsp En realidad no es una vista como tal, se trata de la barra de navegación que se utiliza para acceder a diferentes partes de nuestra aplicación. Esta barra de navegación se incluye en todos los jsp de nuestra aplicación. Ilustración 31 - navegacion.jsp 4.1.4. header.jsp Como en el caso anterior, este jsp no es una vista completa como tal. Se trata de la cabecera de la página web con el título del sitio que se incluye en el resto de jsp. Ilustración 32 - header.jsp 43 4.1.5. editarProblema.jsp La siguiente interfaz es la que se utiliza cuando se desea modificar algún problema ya realizado. Es la misma que utilizamos para visualizar el problema. Ilustración 33 - editarProblema.jsp 4.1.6. listadoProblemas.jsp Con esta interfaz seremos capaces de visualizar todos los problemas que hemos realizado previamente, así como la asignatura a la que pertenece y las acciones que podemos realizar sobre cada uno de ellos. 44 Ilustración 34 - listadoProblemas.jsp 4.1.7. listadoSoluciones.jsp Similar a la vista anterior, podremos ver todas las soluciones propuestas a un problema listadas siempre que accedamos a este interfaz. Para ello, basta con hacer clic en el botón soluciones del problema asociado en la vista “listadoProblemas.jsp”. Ilustración 35 - listadoSoluciones.jsp 4.1.8. corrección.jsp Por último la vista que empleamos para ver una solución individual de un alumno y también para corregir la calificación en caso de que el profesor lo desee. 45 Ilustración 36 - corregir.jsp 4.1.9. Styles.css Éste es nuestro fichero css particular, como se ha dicho anteriormente, hemos utilizado el framework Bootstrap para aplicar los estilos en el diseño del interfaz gráfico. A pesar de ello, no es suficiente para ajustar el diseño a nuestro gusto por lo tanto hemos aplicado los estilos restantes en ese archivo, el cual se incluye en todos los JSP de nuestra aplicación. 4.1.10. Directorio libs En éste directorio hemos alojado los ficheros que hemos desarrollado en javascript, así como las librerías de bootstrap, jQuery y jQuery ui utilizadas. Podemos encontrar los siguientes directorios: 46  jquery-ui-contextmenu: Directorio donde encontramos este plugin particular de jQuery, lo utilizamos para desplegar el menú contextual de una pieza al hacer clic con el botón derecho.  jquery-ui-1.11.4: Directorio donde encontramos la versión 1.11.4 de jQuery-ui. Como ya se comentó, la diferencia entre jQuery-ui y jQuery, reside en que ésta versión, se centra en las interfaces de usuario.  jquery-2.1.4: Directorio donde se encuentra el framework de jQuery en su versión 2.1.4.  bootstrap: Directorio donde se encuentra el framework de bootstrap.  bootstrap-filestyle: Directorio del plugin de bootstrap para los estilos de botones de selección de ficheros. Lo utilizamos para el botón que permite leer el fichero txt y generar las piezas. También podemos encontrar los siguientes ficheros javascript: 4.1.10.1. Main.js Éste es el fichero principal, aquí podemos encontrar las funciones que se emplean para generar las piezas, las peticiones Ajax e incluso las funciones necesarias que hemos desarrollado para arrastrar las piezas html visualmente. 4.1.10.2. readFile.js En este script, encontramos la función que se encarga de leer un fichero txt y convertir el contenido a un string, el cual podremos procesar y manipular para generar las piezas en html. 4.1.10.3. alerts.js Este script contiene la función de alertas que se utiliza en todo el sitio, ya sea en los scripts anteriores o las páginas jsp. 4.1.11. Entities Aquí es donde encontramos las clases de entidad en Java del modelo de negocio. Es decir, aquí encontramos las clases Alumno, Asignatura, Input, Pieza, Problema, Profesor, Solucion y Usuario. En este lado de la aplicación, las clases no tienen más que atributos, ya que no realizamos ninguna operación con ellos más que manipular sus propiedades. 4.1.12. Servlet El directorio donde encontraremos todos los servlets que hacen posible el funcionamiento y navegación correcta entre las páginas jsp. Se listan los siguientes:  CorregirCalificacionServlet  CorregirServlet 47  EditarProblemaServlet  EliminarProblemaServlet  ListaProblemasServlet  LoginServlet  LogoutServlet  SolucionServlet En cada uno de los servlets se realizan de forma genérica las siguientes funciones, evaluación de la sesión. Recogida de los atributos necesarios y llamada a los servicios correspondientes para recoger los datos solicitados por el profesor y mostrar en el siguiente jsp al cual redirigimos, la vista solicitada. Para más detalle del funcionamiento de cada uno de los servlets, se disponen los diagramas de secuencia en el apartado de Análisis, una vista global de cómo interactúan en el sistema. 4.1.13. service Este directorio tiene como finalidad listar los clientes java utilizados en nuestra aplicación. Son los cuatro ya mencionados en el diagrama de componentes UML (ilustración 26) en el cual mostramos a qué servicio del servidor mongo se conecta. Las clases java que encontramos aquí son:  AsignaturaJerseyClient: Destinado a recuperar las asignaturas pertenecientes a un profesor.  LoginJerseyClient: Se encarga del proceso de login en el sistema.  ProblemaJerseyClient: Recupera los listados de problemas asociados a un profesor, así como la inserción de nuevos problemas.  SolucionJerseyClient: Recupera el listado de soluciones asociado a un problema. 4.2. Funciones Javascript Vamos a comentar algunos fragmentos importantes de código javascript que se utiliza en la aplicación. 4.2.1. Make_draggable Esta función se encarga de permitir que el elemento html al que se pasa como argumento, pueda ser arrastrado por la pantalla mediante los eventos de ratón. Para esta función es necesaria la API de jQuery-ui que importamos en el inicio del html. 48 Ilustración 37 - funcion make_draggable 4.2.2. buildPieceField Esta función es de las más importantes, ya que se encarga de generar mediante jQuery, el código html que compone un elemento de una pieza. En base al tipo de elemento que se desee construir, la función devuelve un elemento html predeterminado. Las opciones inicialmente son, un string, un campo para introducir texto o un selector con varias opciones. Ilustración 38 - funcion buildPieceField 49 4.2.3. leerFichero Función principal, que recibe un fichero, lo evalúa para comprobar que es un archivo válido y lo procesa en tiempo de ejecución. El objetivo es obtener el contenido almacenado en tipo texto para después convertir su contenido en contenido HTML. La estructura necesaria para esta aplicación viene detallada en el apartado correspondiente. (Formato del JSON necesario). Ilustración 39 - función leerFichero 4.2.4. getSoulcion La función que se realiza cuando el profesor ha concluido su labor de plantear la pregunta junto con su solución y con las piezas utilizadas en el ejercicio. Se encarga de recopilar la solución propuesta por el profesor y de convertirla en una cadena de texto para enviarla al servidor Mongo. El formato utilizado es el JSON, con el convertimos el html a la estructura propuesta y se envía mediante el servicio Restful a la aplicación que controla la persistencia. 50 Ilustración 40 - función getSolucion 4.2.5. #Content-panel Con el fragmento anterior, hacemos que el div con id “content-panel” permita que se dejen caer elementos html cuyas clases sean “dragIn” y “dragOut”. También se encarga de realizar la función anónima cuando sobre él se realiza un evento de tipo drop, es decir, cuando se deja algún elemento html caer sobre él. En este caso, clonamos el elemento y le hacemos las manipulaciones necesarias para duplicar el elemento y añadirlo en la página html. Éste código es el que nos permite que una pieza se pueda arrastrar hasta el panel donde se construye la solución. Ilustración 41 - Código jQuery sobre el panel de construcción de soluciones 51 4.2.6. #finalizar Una vez que el profesor ha terminado de escribir el enunciado y elaborar la respuesta “ideal”, el profesor hará click en el boton de finalizar. Es en este momento cuando este fragmento de código se ejecuta, recopilando el enunciado y la solución convirtiéndolo en un JSON para enviarlo a la aplicación de Mongo. Ilustración 42 - Código jQuery lanzado para insertar nuevo problema 58 Ilustración 46 - Listar problemas (Diagrama de secuencia) 59 Ilustración 47 - Listar soluciones (Diagrama de secuencia) 60 Ilustración 48 - Iniciar sesión (Diagrama de secuencia) 61 Ilustración 49 - Crear problema (Diagrama de secuencia) 62 Ilustración 50 - Corregir solución (Diagrama de secuencia) 63 Ilustración 51 - Cerrar sesión (Diagrama de secuencia) 64 Ilustración 52 - Borrar problema (Diagrama de secuencia)