Diseño y desarrollo de una aplicación para la realización de preguntas de programación en AulaWeb

Garma García, Sergio (2016). Diseño y desarrollo de una aplicación para la realización de preguntas de programación en AulaWeb. Proyecto Fin de Carrera / Trabajo Fin de Grado, E.T.S.I. Industriales (UPM).

Descripción

Título: Diseño y desarrollo de una aplicación para la realización de preguntas de programación en AulaWeb
Autor/es:
  • Garma García, Sergio
Director/es:
  • Martinez Fernandez, Raquel
  • García Beltrán, Ángel
Tipo de Documento: Proyecto Fin de Carrera/Grado
Grado: Grado en Ingeniería en Tecnologías Industriales
Fecha: Septiembre 2016
Materias:
Palabras Clave Informales: AulaWeb, interfaz, preguntas, programación, JavaScript, Codemirror
Escuela: E.T.S.I. Industriales (UPM)
Departamento: Automática, Ingeniería Eléctrica y Electrónica e Informática Industrial
Licencias Creative Commons: Reconocimiento - Sin obra derivada - No comercial

Texto completo

[img]
Vista Previa
PDF (Document Portable Format) - Se necesita un visor de ficheros PDF, como GSview, Xpdf o Adobe Acrobat Reader
Descargar (1MB) | Vista Previa

Resumen

El presente trabajo de fin de grado se realiza dentro del marco de la plataforma AulaWeb que se desarrolla en el Unidad Docente de Informática Industrial del Departamento de Automática, Ingeniería Eléctrica y Electrónica e Informática Industrial. La plataforma AulaWeb permite a los alumnos acceder al contenido de las asignaturas en las cuáles están matriculados de una forma fácil y sencilla. AulaWeb ofrece una variedad amplia de contenidos, tales como documentos con materia de las asignaturas, bibliografía, exámenes antiguos, etc. Entre todos estos contenidos, cuenta con un repositorio de preguntas que se utilizan para la evaluación continua de los alumnos a partir de ejercicios programados por los profesores, o para el aprendizaje libre de los alumnos gracias a ejercicios de autoevaluación personalizados. El módulo de autoevaluación funciona de tal manera que se pueden elegir aleatoriamente un grupo de preguntas del repositorio atendiendo a distintos parámetros de configuración del ejercicio: número de preguntas, tema del programa, dificultad, tipo de respuesta, etc. Una vez seleccionado el ejercicio por parte del alumno, las preguntas se van respondiendo de una en una y luego, al finalizar el ejercicio, se verifican las respuestas introducidas y se muestra la calificación obtenida automáticamente. Todas las preguntas que se encuentran en el repositorio se pueden clasificar según el tipo de respuesta que se demanda al alumno. Los tipos con mayor importancia son: respuesta selección simple, respuesta selección múltiple, enunciado variable/parametrizado y código de programación en lenguaje PASCAL, C o JAVA. El tratamiento de la pregunta, dependiendo del tipo es muy distinto tanto en lo que se refiere a la interfaz de visualización como en la forma de corrección en el servidor web. Este trabajo de fin de grado se ha centrado en el módulo que permitía resolver, calificar y visualizar las preguntas de programación, en las que la respuesta era un fragmento de código fuente en distintos lenguajes de programación, tanto para la actual plataforma AulaWeb 1.0 (tecnología propietaria ASP) como para la nueva plataforma AulaWeb 2.0 (tecnología código libre PHP). Desde hace algún tiempo, la plataforma AulaWeb arrastraba un problema, complejo de solucionar y derivado de elementos externos a la propia plataforma: en las preguntas de programación se utiliza una interfaz que simulaba, con un applet de Java, un editor de texto integrado en AulaWeb. El problema con esta interfaz es que se decidió eliminar el plugin para ejecutar de algunos navegadores puesto que estos eran problemáticos en la seguridad de las plataformas web. La falta de funcionalidad de este applet resultaba muy grave ya que los profesores se veían muy limitados a la hora de programar ejercicios a los alumnos y recibían muchas quejas de estos por el mal funcionamiento. Por la parte de los alumnos, el hecho de que costase tanto el uso de estas preguntas suponía una dificultad añadida y una mayor desmotivación a la hora de realizar los ejercicios. La interfaz con la que los alumnos realizaban las preguntas contenía parte del código fuente de un programa y se debía completar una porción de él para darle la funcionalidad requerida en el enunciado. Una vez hecho esto el editor les permitía enviar su solución a compilar para comprobar la sintaxis y también, ejecutar el programa para comprobar si la solución dada cumplía la funcionalidad solicitada en el enunciado. La solución se enviaba al servidor donde se compilaba. Si el resultado de la compilación era correcto se proseguía con la ejecución del código. Si solo se requería la compilación y el resultado de esta era erróneo se le remitía un mensaje al alumno con el contenido correspondiente. Si la ejecución se llevaba a cabo no se hacía exclusivamente con el código fuente de los alumnos. En realidad lo que se hacía era extraer únicamente la parte escrita por el alumno y se introducía este fragmento de código en un programa corrector que se compilaba y ejecutaba. Este programa comparaba los resultados de la solución planteada con los de una ya comprobada de antemano. Si sobre la misma batería de datos de entrada los resultados eran iguales la solución era correcta. Si no lo eran, la solución era incorrecta. Como se ha dicho anteriormente, la interfaz que simulaba el editor de texto era un applet desarrollado con Java, el cual se había quedado obsoleto y había dejado de funcionar para las nuevas versiones de los navegadores web actuales. Por tanto, las preguntas de este tipo, si se querían responder, requerían el uso de versiones antiguas de los navegadores con su plugin de Java correspondiente ocasionando problemas a los alumnos que las querían realizar. Si esto no se hacía, se perdían las funcionalidades de compilar y ejecutar que daban el auténtico valor a este tipo de preguntas. Por tanto, dentro del marco de la mejora continua de AulaWeb nació este proyecto con el fin de solucionar este problema. El objetivo era la creación de una nueva interfaz para la realización de preguntas de programación que funcionara en los navegadores modernos. Además los profesores de la asignatura Fundamentos de Programación, querían una nueva interfaz que les permitiese realizar las Pruebas de Evaluación Continua en los cursos posteriores. En el diseño y desarrollo de la nueva interfaz, se estableció como objetivo adicional que la interfaz solamente tuviera una versión, la cual tendría que funcionar tanto en la plataforma AulaWeb 1.0 (para resolver el problema actual) como en la plataforma AulaWeb 2.0 actualmente en desarrollo. Los únicos cambios estarían relacionados con la parte que trabaja en los servidores puesto que como se ha comentado, cada uno utiliza una tecnología distinta para su funcionamiento. Para el desarrollo del trabajo, primero se realizaron una serie de entrevistas con el profesorado de la Escuela Técnica Superior de Ingenieros Industriales, y así tener en cuenta las sugerencias e ideas sobre cómo mejorar y solucionar los distintos problemas aparecidos con las preguntas de programación de AulaWeb. Una vez clasificadas y analizadas estas sugerencias, se pasó al planteamiento de la solución. Se quería que la nueva interfaz fuese simple e intuitiva, para que los alumnos aprendieran a utilizarla fácilmente y sin necesidad de formación previa por parte del profesorado. Además se quería actualizar el diseño de la interfaz, ya que había quedado algo anticuado y se quería proveerla de una apariencia más moderna. Puesto que los applets iban a ser eliminados de los navegadores modernos, habría que desarrollar una nueva interfaz que hiciera uso de tecnologías web más modernas. Se estudiaron diversas propuestas que en la web ofrecían funcionalidades similares a la hora de compilar y ejecutar programas online. Se decidió desarrollar la nueva interfaz con tecnología JavaScript, además de librerías y herramientas basadas en dicho lenguaje. Por tanto para la nueva interfaz se utiliza el siguiente software: a) Codemirror: herramienta desarrollada en JavaScript que permite edición y tratamiento del texto. b) jQuery: librería de JavaScript que facilita la programación y con funciones fáciles de usar para realizar peticiones AJAX. c) jQuery_UI: librería basada en JavaScript que proporciona herramientas de diseño para aplicaciones web. d) ASP: tecnología propietaria que permite el tratamiento de las respuestas en el servidor de AulaWeb 1.0. e) PHP: tecnología libre que permite el tratamiento de las respuestas en el servidor de AulaWeb 2.0. Todo el software escogido es de uso gratuito salvo la tecnología ASP que es utilizada por la plataforma AulaWeb 1.0. Esto permite el ahorro en los costes de desarrollo. Aunque el uso sea gratuito, la aplicación desarrollada debe mostrar la utilización de las distintas herramientas. Una vez elegidas las herramientas se procedió al desarrollo de la interfaz. Había que tener en cuenta que funcionase en los navegadores de uso más extendido (Google Chrome, Mozilla Firefox, Internet Explorer y Safari). El diseño de la aplicación se dividió en varios ficheros, ordenados por el tipo de contenido. Este procedimiento es conocido como atomización. La atomización consiste en dividir una aplicación desarrollada en un conjunto de múltiples ficheros de poca extensión. Con esto se consigue que en el caso de querer realizar modificaciones o aparecer un error, se consiga localizar rápidamente donde hay que cambiar código. En particular la nueva interfaz consta de estos tipos de archivos: HTML y CSS para crear la estructura y diseño de la interfaz, JavaScript que dotará de lógica a la interfaz y se encargará de los intercambios de información con el servidor, y ASP (Microsoft IIS) o PHP (Apache 2.0) dependiendo del servidor para la compilación y ejecución de los códigos fuentes. Se procedió a la realización de un primer diseño simple en el que apareciesen los elementos más importantes de la interfaz, el recuadro donde se escribiría el texto y los botones que enviarían la respuesta al servidor, aunque aún no estaban en funcionamiento. Hecho esto se procedió a integrar el editor de texto Codemirror. Para esta tarea se tuvo que hacer un proceso de aprendizaje para la utilización de esta herramienta. En la lectura de los manuales se descubrió que ofrecía herramientas muy potentes que simplificarían el trabajo posterior. Se configuró el editor para el lenguaje de programación C. Se hizo así porque aunque hay asignaturas que tienen preguntas de programación en Java, en las asignaturas que imparten programación en lenguaje C es donde se encuentran la mayoría de alumnos que van a realizar este tipo de preguntas. Por tanto urgía que funcionasen para este lenguaje y luego se generalizaría. Una vez realizada la integración del editor de textos se trabajó en la obtención de las preguntas y su visualización en el editor. Aquí es donde la interfaz tiene que apoyarse en la tecnología ASP o PHP para recuperarlas del servidor. En este punto se trabajó con múltiples restricciones. La base de datos de preguntas de AulaWeb ya está diseñada, y la forma de guardarse en el servidor también. Por tanto había que adaptar la interfaz a esta situación puesto que cambiar lo demás era inviable. Una vez la pregunta está cargada en ella se puede escribir el código fuente. El siguiente paso en el que se trabajó fue en trasladar las respuestas al servidor usando peticiones AJAX y el tratamiento de estas respuestas para mostrarle al alumno el resultado de su petición. Se utilizó esta tecnología ya que permite el cambio de pequeñas porciones de una página web sin necesidad de recargar la página. Esto proporciona un funcionamiento más fluido de la aplicación. El objetivo de los cambios sería la ventana que muestra el resultado de la operación requerida. Se diseñó la nueva página ASP encargada de recuperar la respuesta del usuario, creación de archivo, compilación (y ejecución del archivo resultante si se requiriera la ejecución) y borrado de los archivos. Esta era una parte crucial ya que un error podría ocasionar agujeros de seguridad en el servidor. Se utilizó en gran medida la página ASP (la estructura comentada anteriormente) que hacía funcionar a la anterior interfaz pero se modificó para la nueva y se optimizó el funcionamiento. Una vez se tuvo el diseño en lenguaje ASP se fue traduciendo con pequeñas variaciones para así obtener la parte de servidor PHP. El principal cambio fue la adición de una nueva página PHP. Esta página se encargaría de que en el caso de que un programa llevara ejecutándose más de un tiempo determinado (bucles infinitos), se terminase su proceso. En el servidor ASP no existía este problema porque un programa llevaba la cuenta del tiempo de ejecución. A continuación, se introdujeron detalles orientados a la facilidad de uso y a la muestra de datos de una forma clara y ordenada. También se trabajó para dar la opción a que los alumnos realizasen las preguntas en dispositivos móviles o tablets. La fase de verificación se realizó al final del segundo semestre del curso, se introdujo la interfaz en AulaWeb de manera oficial para que fuera utilizada por los alumnos de primer curso que cursaban la asignatura de Fundamentos de Programación. Las pruebas resultaron un éxito por lo que se decidió utilizar esta herramienta para realizar los controles de la PEC en los próximos cursos de esta asignatura. Tras esta fase de verificación se trabajó para que la interfaz fuera lo más generalista posible así, si en un futuro se quisiera ampliar a otros lenguajes de programación, se pudiera implementar esta funcionalidad de manera sencilla.

Más información

ID de Registro: 43719
Identificador DC: http://oa.upm.es/43719/
Identificador OAI: oai:oa.upm.es:43719
Depositado por: Biblioteca ETSI Industriales
Depositado el: 20 Oct 2016 05:27
Ultima Modificación: 20 Oct 2016 05:27
  • Open Access
  • Open Access
  • Sherpa-Romeo
    Compruebe si la revista anglosajona en la que ha publicado un artículo permite también su publicación en abierto.
  • Dulcinea
    Compruebe si la revista española en la que ha publicado un artículo permite también su publicación en abierto.
  • Recolecta
  • e-ciencia
  • Observatorio I+D+i UPM
  • OpenCourseWare UPM