Juez en línea para introducir programación con Blockly

Juez en línea para introducir programación con Blockly Online judge for children using Blockly Guzmán Garrido Alique César Garza Sánchez Jesús Alejandro Sánchez Couto Universidad Complutense de Madrid Facultad de Informática Trabajo de Fin de Grado en Ingeniería Informática Tutores Marco Antonio Gómez Martín Pedro Pablo Gómez Martín Curso 2020/2021 Resumen En este trabajo se desarrolla una herramienta que se pueda utilizar en la enseñanza para usuarios que estén poco familiarizados con la programación. Se trata de un juez en línea que utiliza Blockly, una librería de Google que permite programar de manera visual. Al tratarse de una programación por medio de bloques hace que la barrera de entrada sea mucho más leve y fácil de aprender. Se proporcionan una serie de problemas a los usuarios para que pongan a prueba los conocimientos aprendidos y su mejora de pensamiento computacional. Se estudia también cuan importante es la enseñanza de la programación en edades tempranas y trabajar el pensamiento computacional desde el instituto. Palabras clave Blockly, Programación, Pensamiento computacional, Juez en línea, Python, Enseñanza, JavaScript, Algoritmos. 1 Abstract The purpose of this project is developing a tool that can be used for teaching users who are not very familiar with programming. It is an online judge that uses Blockly, a Google library that allows visual programming. Being a block-oriented programming makes the entry barrier much lighter and easier to learn. A series of problems are provided to users to test the knowledge they have learned and their improvement of computational thinking. It is also studied how important is it to teach programming at an early age and working on the computational thinking since highschool. The progress of this kind of thinking as exersises and tests are carried out is also observed. Keywords Blockly, Programming, Computational thinking, Online judge, Python, Education, Algorithms, Javascript 2 Índice 1 Introducción 6 1.1 Objetivos .......................................... 6 1.2 Estructuradelamemoria ................................. 6 1.3 Metodologíaeintegración ................................. 7 1 Introduction 8 1.1 Goals ............................................ 8 1.2 Structureofthememory.................................. 8 1.3 Metodology and integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 2 Estado del Arte 10 2.1 Enseñanza de la programación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 2.1.1 Beneficios de la programación . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 2.1.2 Programación en los colegios . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 2.1.3 Lenguajes de programación para principiantes . . . . . . . . . . . . . . . . . . 12 2.2 Juecesenlínea ....................................... 13 2.2.1 Jueces de programación competitiva . . . . . . . . . . . . . . . . . . . . . . . 14 2.2.2 Jueceseducativos.................................. 15 2.2.3 online-judge-mean ................................. 16 2.3 Blockly ........................................... 17 2.3.1 QuéesBlockly ................................... 17 2.3.2 Perspectiva del cliente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 2.3.3 Instalación:NPM ................................. 18 2.3.4 Losbloques..................................... 19 2.3.5 Elespaciodetrabajo................................ 21 2.3.6 DeBlocklyacódigo ................................ 22 3 Estructura de online-judge-mean 23 3.1 Quéesonline-judge-mean ................................. 23 3.2 Tecnologíasutilizadas ................................... 25 3.2.1 Lenguajes de programación . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 3.2.2 MongoDB...................................... 27 3.2.3 Node.js ....................................... 28 3 3.2.4 Express ....................................... 28 3.2.5 Angular....................................... 28 3.3 BasedeDatos........................................ 29 4 Extensión de online-judge-mean para soportar Blockly 31 4.1 Juez ............................................. 31 4.2 BBDD............................................ 31 4.3 Problemas.......................................... 32 4.4 Blockly ........................................... 35 4.5 Misceláneo ......................................... 35 5 Fase de pruebas 36 5.1 Diseñodelexperimento .................................. 37 5.2 Resultados.......................................... 38 5.2.1 Ejercicios de la página web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 5.3 Conclusiones de las pruebas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 5.3.1 Resultadosdelostest ............................... 41 5.3.2 Conclusionesfinales ................................ 42 6 Contribuciones 43 7 Conclusiones y trabajo futuro 47 7.1 Conclusiones ........................................ 47 7.2 Trabajofuturo ....................................... 48 7 Conclusions and future work 49 7.1 Conclusions......................................... 49 7.2 Futurework......................................... 49 Bibliografía 51 Anexo 1 52 Anexo 2 53 4 Lista de figuras 2.1 Interfaz de un problema en un concurso de CMS. Imagen extraída de la página de CMS............................................. 15 2.2 Captura de pantalla de Acepta el Reto . . . . . . . . . . . . . . . . . . . . . . . . . . 17 2.3 Interfaz de un problema en un concurso terminado en DOMjudge . . . . . . . . . . . 18 2.4 Interfaz de un problema en online-judge-mean . . . . . . . . . . . . . . . . . . . . . . 19 2.5 Captura de un programa en blockly. . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 2.6 Ejemplo UI de un mutador else_if. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.1 Página principal de online-judge-mean . . . . . . . . . . . . . . . . . . . . . . . . . . 23 3.3 Página de un problema cualquiera en online-judge-mean . . . . . . . . . . . . . . . . 24 4.1 Interfaz actualizada de la pestaña de soluciones, ahora llamada Resultado . . . . . . 33 5.1 Distribución del tiempo necesario para completar cada ejercicio . . . . . . . . . . . . 41 5 1. Introducción 1.1 Objetivos El objetivo de este proyecto es desarrollar una herramienta web que permita a los personas sin conocimientos de informática o sin nociones de pensamiento computacional familiarizarse con estos conceptos en un entorno simplificado, amigable y sencillo. Esta página debe permitir a los usuarios resolver problemas de distinta dificultad desde cualquier dispositivo con acceso a Internet, con una mínima asistencia por parte de los docentes. Una vez entregada la solución, la página la compilará, ejecutará y comparará su salida con los casos de prueba de ejemplo. En caso de coincidir en todos, el veredicto será positivo. Si difiere en algún caso, será negativo. El usuario podrá revisar las soluciones que ha enviado, volver a intentar las entregas fallidas tras modificarlas, además de ver su progreso y acceder a su cuenta desde cualquier lugar mediante su usuario y contraseña. También podrán ver la salida de su código, así como casos de prueba extra en caso de que necesiten más ayuda para resolver un ejercicio. Los administradores podrán añadir o modificar problemas que ya existan, además de poder importarlos o exportarlos a una base de datos en masa. También serán capaces de modificar los permisos de los usuarios. Todo el código está disponible en Github en https://github.com/cesarcgs/TFGBlockly y la página es accesible desde https://tfg-blockly.netlify.app/. El usuario de prueba es usuario1 y la contraseña usuario1 también. La primera carga de la página tarda unos segundos ya que el worker de la API ha de empezar a funcionar. 1.2 Estructura de la memoria La presente memoria muestra tanto el desarrollo de la página web, mencionando las tecnologías y la metodología utilizadas, así como las pruebas realizadas sobre usuarios, comprobando la efectividad de la herramienta. Para comenzar, se introduce el concepto de jueces en línea, seguido de varios ejemplos de distintas implementaciones de jueces ya utilizadas a nivel global. Se hace después una introducción a la librería Blockly de Javascript, explicando brevemente su funcionamiento, así como el uso educativo 6 de este y otros lenguajes. A continuación, se habla en profundidad de las tecnologías utilizadas en la página web, tanto en el servidor como en el cliente, tras lo cual se explica en detalle el funcionamiento del sistema y los cambios realizados. Por último, se muestran los resultados del estudio realizado entre personas de diferente perfil para comprobar la validez de la herramienta, mostrando los avances de dichos usuarios al enfrentarse a un pequeño test sobre Blockly y Python después de resolver ejercicios utilizando la herramienta. 1.3 Metodología e integración Para la división de trabajo y organización del equipo hemos utilizado metodología ágil Kanban autogestionándonos el trabajo y aumentando la productividad. En cuanto al código hemos seguido el flujo Git Flow, lo que nos ayuda en la integración continua, ya que se tendrá en la rama master siempre una versión sin errores. Para la integración continua hemos utilizado Travis CI, Heroku y Netlify. Travis CI se encarga de clonar el repositorio de GitHub en un entorno virtual y realizar pruebas sobre este. Si funcionan todas las pruebas, se considera “superado” y Travis CI podrá levantar la parte del servidor en un servicio, Heroku en este caso. El cliente se despliega en Netlify que permite ejecutar páginas web estáticas y aplicaciones web en la nube a través de un servicio de backend sin servidor. Netlify actualiza el cliente igual que Travis CI, en este caso, cada vez que se hace un push amaster. De este modo, tanto servidor como cliente están siempre levantados con la última versión estable. 7 1. Introduction 1.1 Goals The goal of this project is to develop a web page that allows people without programming skills or notions of computational thinking to become familiar with these concepts in a simplified, friendly and simple environment. This page should allow users to solve problems with different difficulty from any device with Internet access, with minimal assistance from teachers. After the solution is delivered, the page will compile it, run it, and compare its output to the sample test cases. If all the results are correct, the verdict will be positive. If it differs in any case, it will be negative. The user will be able to review the solutions they have sent, retry failed submissions after modifying them, as well as view their progress and access their account from anywhere using their username and password. They will also be able to see the output of their code, as well as extra test cases in case they need more help solving an exercise. Administrators will be able to add or modify problems that already exist, as well as being able to import or export them to a database in bulk. They will also be able to modify user permissions. All the code of the proyect is available in the Github repository https://github.com/cesarcgs/ TFGBlockly and the web page is https://tfg-blockly.netlify.app/. The test username is usuario1 and the password is usuario1 as well 1.2 Structure of the memory This report shows both the development of the website, mentioning the technologies and methodology used, as well as the tests carried out on users, verifying the effectiveness of the tool. To begin with, the concept of online judges is introduced, followed by several examples of different implementations of judges already used globally. An introduction to the Blockly Javascript library is then made, briefly explaining its operation, as well as the educational use of this and other languages. Next, the technologies used on the website are discussed in depth, both on the server and on the client, after which the operation of the system and the changes made are explained in detail. Finally, the results of the study carried out among people of different profiles to check the validity 8 Figura 2.1: Interfaz de un problema en un concurso de CMS. Imagen extraída de la página de CMS Está pensado principalmente para ser usado en concursos de programación, donde existe un tiempo especificado de entrega y ciertos problemas, pero puede ser adaptado a otros contextos como la enseñanza. El sistema presenta una muy buena escalabilidad [11], teniendo un sistema modular para agregar lenguajes extra o compiladores. La interfaz de los equipos es simple, mientras que la parte de los administradores posee características muy interesantes, como son la posibilidad de probar el efecto de cambios en envíos realizados por los participantes, aclaraciones o información detallada sobre entregas. Cuenta además con una API para poder aumentar las funcionalidades del sistema con aplicaciones secundarias. 2.2.2 Jueces educativos Este tipo de sistemas provee a los profesores de una herramienta con la que ofrecer a los alumnos ejercicios (normalmente de iniciación a la programación) que estos puedan resolver con mayor flexibilidad. El uso de estos sistemas proporciona varias ventajas. En primer lugar, provee de una mayor objetividad y rigurosidad a la enseñanza, permitiendo a los profesores verificar con facilidad la exactitud de las soluciones, aliviando la carga de trabajo por parte del profesor. En segundo 15 lugar, los estudiantes reciben una retroalimentación casi inmediata de manera que pueden realizar más rápidamente los problemas. Por último, el servicio goza de una disponibilidad absoluta [12], no limitado al horario lectivo. Esto permite a los alumnos entregar los ejercicios incluso desde su casa con su propio ordenador, cuando tengan tiempo disponible. Algunos de los jueces más importantes de este tipo son ¡Acepta el reto!6, HackerRank7, u onlinejudge.org8. ¡Acepta el reto! ¡Acepta el reto!9(figura 2.2) es una pagina creada en 2014 por dos profesores de la Facultad de Informática de la Universidad Complutense de Madrid, que habían contribuido a la puesta en marcha de ProgramaMe, un concurso de programación para alumnos de Ciclos Formativos de Formación Profesional. A raíz de la existencia de esos problemas que carecían de utilidad más allá de ser resueltos sin poder probar su corrección, decidieron desarrollar este juez en línea con la ayuda de estudiantes. El juez acepta soluciones tanto en C, C++ como Java, corrigiéndolas automáticamente. Dependiendo del resultado, el juez puede devolver una respuesta diferente: AC (Aceptada), WA (Respuesta incorrecta), CE (Error de Compilación), RTE (Error durante la ejecución), TLE (Tiempo límite superado), MLE (Límite de memoria superado), OLE (Límite de salida superado), RF (Función restringida) o IE (Error interno). Este juez en línea dispone de más de 500 problemas publicados separados en distintas categorías, además de contar con más de 15000 usuarios. Por último, los enunciados están en castellano, a diferencia de la mayoría de los jueces [13]. Esto supone normalmente una barrera para los estudiantes de los primeros cursos de los grados. 2.2.3 online-judge-mean Online-judge-mean1011 es una aplicación web desarrollada por jojozhuang, cuya función es resolver preguntas sobre algoritmia. El usuario puede enviar sus respuestas y comprobar si ha superado todos los casos de prueba. Otras funciones que tiene son: •Autenticación basada en tokens: Permite el registro, acceso, auto-registro, reinicio de contraseña, etc. •Gestión de usuarios: Crear, modificar o eliminar usuarios •Gestión de problemas: Creación, modificación o eliminación de preguntas. 6https://www.aceptaelreto.com/ 7https://www.hackerrank.com/ 8https://onlinejudge.org/ 9https://www.aceptaelreto.com/ 10https://github.com/Bit-Developer/online-judge-mean 11https://online-judge.netlify.app/ 16 Figura 2.2: Captura de pantalla de Acepta el Reto •Gestión de la base de datos: Integra un sistema de importación y exportación de datos mediante archivos .csv para los usuarios, problemas y entregas. •Sistema de evaluación: Corrección y feedback de las entregas. •Lenguajes de programación: El sistema soporta entregas en 3 lenguajes diferentes: Python, Javascript y Java. •Interfaz de Usuario: Cuenta con un editor de código, barra de progreso. Se hablará en más profundidad sobre este sistema en el capítulo 3. 2.3 Blockly 2.3.1 Qué es Blockly Blockly es un proyecto de Google, una librería Javascript de código abierto que permite programar de una forma enteramente visual [14]. Su primera versión fue lanzada en 2012 por Neil Fraser, Quynh Neutron, Ellen Spertus y Mark Friedman a modo de sustituto de OpenBlocks, otra herramienta de programación con bloques. A diferencia de otros lenguajes de programación, Blockly añade una capa más de abstracción a través de bloques que, de forma similar a Scratch, pueden moverse y combinarse para crear programas. 17 Figura 2.3: Interfaz de un problema en un concurso terminado en DOMjudge 2.3.2 Perspectiva del cliente Cada tipo de bloque representa un elemento o una acción, no necesariamente en relación con la informática: un bloque podría usarse para inicializar variables o realizar operaciones matemáticas, y otro podría usarse para desplazar a un personaje por un mapa o girar una figura. Los bloques se pueden seleccionar en una tabla, arrastrar y colocar donde uno prefiera dentro de un canvas, o lienzo. Se pueden combinar entre sí como piezas de un puzle y vienen diseñados de forma que al usuario le sea fácil intuir qué bloques pueden combinarse con qué y en qué orden. De esta forma, el resultado es una aglomeración de bloques de diferentes colores, tamaños y formas con un sentido y fin claros. 2.3.3 Instalación: NPM La librería Blockly se puede descargar a través de diferentes enlaces en su Github12. Dispone de una carpeta “demos”, a través de la cual se pueden probar varias funcionalidades del cliente, como un canvas que mantiene un tamaño fijo, o lo ajusta según se cambia el de la página; ejecutar o mostrar el código resultante de un conjunto de bloques... Para poder utilizar la librería Blockly, solo se necesita descargar sus ficheros e importarlos en el código donde se quiera usar. Sin embargo, al estar incluida en los registros de NPM, introducirlo en un proyecto existente se reduce a un solo comando. NPM, o Node Package Manager, es un gestor de paquetes que permite descargar librerías de código para utilizarlas en un proyecto. Todas las librerías descargadas con NPM se almacenan en una carpeta llamada “node_modules”. Del mismo modo, también gestiona la dependencias necesarias 12https://github.com/google/blockly 18 Figura 2.4: Interfaz de un problema en online-judge-mean para poder utilizar las librerías en el proyecto sin que de error porque se intente utilizar una librería que no se encuentre en el proyecto o no se haya relacionado con los ficheros que la usan. 2.3.4 Los bloques Todos los bloques de la librería se encuentran en varios archivos .js en la carpeta blocks. Estos archivos contienen listas donde se dan valores a los diferentes elementos que componen un bloque. Estas listas están escritas en JSON, pero Blockly permite también permite crear bloques en Javascript. Ambos inicializan los mismos valores y se pueden combinar y usar indistintamente, salvo en el caso de los mutadores o validadores, los cuales solo pueden definirse en Javascript. Algunos elementos que componen un bloque cualquiera son: •type: El identificador del bloque, que se usará más adelante para incluirlo en la página e interactuar con él. •message0: Texto qué aparecerá dentro del bloque una vez sea visible en la página. Si existen huecos donde puede enlazarse con otros bloques o elementos que el cliente puede modificar, se deben representar individualmente con el prefijo % seguido de un número, en orden: %1, %2, %3... •args0: Si se han usado prefijos en message0, se concreta aquí para cada variable si se espera otro bloque, un valor o una de varias opciones predeterminadas. No se define en otro caso. •output: Define el tipo del resultado de la operación que representa el bloque. Por ejemplo, en el caso de una operación matemática, se espera un Number, y en el caso de una comparación un Boolean. Si se define aparecerá un conector a la izquierda. 19 Figura 2.5: Captura de un programa en blockly. •previousStatement ynextStatement: Indican si se pueden enlazar con otros bloques por arriba y por debajo respectivamente y cuáles son, admitiendo cualquiera si su valor es null. No se definen si no se quiere añadir conectores. •colour: El color del bloque. •tooltip: Es un texto explicativo que aparece cuando el cursor se encuentra encima del bloque. Se puede usar de forma opcional para explicar su funcionalidad o proporcionar otra información adicional. •Mutator: Define si un bloque puede ser modificado por el cliente con una serie de opciones que se le proporciona. Se puede declarar en formato JSON junto con el resto de elementos del bloque, y las extensiones en sí se definen aparte como se haría cualquier bloque independiente, pero todo su comportamiento se debe escribir en Javascript. Un mutador incluye: –decompose: Si un bloque tiene mutadores definidos, tendrá un icono de un engranaje desde el cual se puede abrir una ventana. Desde esta ventana se podrán ver otros bloques complementarios que se pueden usar para modificar el bloque principal. La función decompose organiza la forma en la que se muestran y combinan los bloques en esta ventana. –compose: Esta función se encarga de reconstruir el bloque principal de acuerdo a la combinación de bloques complementarios. Se ejecuta cada vez que se incluye o se elimina un bloque complementario en la ventana de decompose. –saveConnections: Según se van modificando bloques con la función compose, es necesario que las conexiones con otros bloques no se pierdan debido a la adición o sus20 tracción de mutadores dentro al bloque. Esta función se llama antes de compose para asegurar que esto ocurra, en el caso de que se haya definido. –Se pueden incluir otras funciones que añadan otras funcionalidades a los mutadores y asegurarse, por ejemplo, de que el número de valores de entrada es el correcto. Por ejemplo, el bloque math_number_property, que comprueba si un número es par, impar, negativo, entero... dispone de un mutador con una extensión que añade una entrada adicional a la derecha, en el caso de que se quiera comprobar si el número es divisible por otro. Figura 2.6: Ejemplo UI de un mutador else_if. Además de los bloques por defecto, también se pueden crear bloques personalizados manualmente o a través de la herramienta online Blocky Developer Tools, y pueden importarse y usarse directamente incluyendo la ruta del archivo .js donde se hayan escrito. 2.3.5 El espacio de trabajo Antes de introducir el lienzo donde funcionará Blockly, es necesario indicar las rutas en la que se encuentran el script de blockly, blockly_compressed; así como sus bloques, blocks_compressed; los personalizados si hubiera alguno y el lenguaje que se prefiera, que en el caso del español es msg/js/es.js, para poder utilizar funciones de Blockly en el código sin que de errores. Para poder utilizar bloques en una página, es necesario escribir un div con id “blocklyDiv” en la parte del código html en el que queramos usarlos. Blockly lo utiliza para generar un área de fondo blanco por el cual se pueden arrastrar y colocar bloques, pero no añade estos mismos. Para disponer de los bloques en el espacio de trabajo, hace falta incluir una toolbox en formato xml. La toolbox es el menú que aparece a la izquierda del canvas desde el cual un usuario puede seleccionar bloques y colocarlos en él. Cada bloque se incluye individualmente en el xml con un elemento <block type="nombre"></block>, donde type es el campo del bloque mencionado en el punto anterior. En el caso de que los bloques tengan espacio para poner valores u otros bloques, estos se representan dentro del <block> correspondiente con otros tres elementos, cada uno encapsulando al siguiente en orden: <value>,<shadow> y<field>. Estos son utilizados internamente por Blockly para 21 buscar y leer los valores de dichos valores en los bloques a la hora de traducirlos a otro lenguaje de programación, de lo cual se habla más adelante. Opcionalmente, los bloques se pueden agrupar como uno quiera dentro de categorías de la forma <category name="nombre">Los bloques</category>. De esta forma, en lugar de los bloques, la toolbox mostrará los nombres de las categorías, que se expandirán hacia dentro del canvas para mostrar los bloques si se hace click en ellos. La toolbox se debe inyectar en el espacio de trabajo a través de la función Blockly.inject(0blocklyDiv0,{toolbox : elemento que tenga la toolbox}). Finalmente, el espacio de trabajo puede ser fijo o variable. En el segundo caso, es necesario crear otro elemento de id “blocklyArea” de tamaño absoluto, de modo que su tamaño varíe en proporción a la vista del navegador, y expanda el código donde se inyecta la toolbox con el comportamiento que permite aumentar o reducir el tamaño del espacio de trabajo. Este código desplaza el centro de blocklyDiv en la misma cantidad que lo ha hecho blocklyArea al modificar el tamaño de la ventana e iguala el tamaño del primero al del segundo, en píxeles. 2.3.6 De Blockly a código Blockly actualmente dispone de varios ficheros .js que permiten traducir los bloques colocados en el espacio de trabajo en otros 5 lenguajes de programación diferentes (dart, javascript, php, python y lua). Cada uno de estos lenguajes tiene su propia subcarpeta dentro de la carpeta generators con todas las traducciones para los bloques por defecto. En el caso de los bloques personalizados, se puede simplemente incluir la traducción en el mismo archivo donde se crearon los bloques en sí. La traducción de un bloque a un lenguaje concreto se realiza mediante la operación Blockly.lenguaje_en_el_que_se_quiera_traducir[’nombre del bloque’] = function(block){...} Se puede convertir el código en Blockly del espacio de trabajo a otro lenguaje con la función Blockly.lenguaje_en_el_que_se_quiera_traducir.workspaceToCode(workspace) Esta función devuelve un código en el lenguaje correspondiente en formato string. 22 3. Estructura de online-judge-mean El objetivo del TFG es hacer un juez en línea en el que los usuarios programen con Blockly. La página no la hemos programado desde cero, sino que se buscaron jueces ya implementados desde los que partir y poder ampliar y añadir Blockly como lenguaje adicional. Se hizo un estudio de los posibles jueces y de algunas herramientas de gestión de concursos. Estas últimas fueron desestimadas puesto que necesitamos un juez levantado en todo momento, sin límite de tiempo y con una interfaz intuitiva y sencilla. Por ello, nos decantamos por online-judge-mean. 3.1 Qué es online-judge-mean Como ya mencionamos en la sección 2.2.3, online-judge-mean es la base desde la que ha partido el proyecto. Es una aplicación de juez en línea de código abierto con disponibilidad completa. Desde la página principal (figura 3.1), se puede registrar un usuario o iniciar sesión con uno ya existente. Al hacer click en Login (figura 3.2a), la información se valida y se pasa al servicio de autenticación, donde comprueba si el usuario existe y permite el inicio de sesión si es el caso. Figura 3.1: Página principal de online-judge-mean La lista de problemas (figura 3.2b) se puede acceder desde la página principal. Para cada problema se puede distinguir: •Un número para indicar el orden de aparición de los problemas. •El nivel de dificultad. Pueden tomar los valores easy,medium ohard. •La frecuencia del problema. •La valoración del problema, con valores entre 1 estrella y 5 estrellas. 23 (a) Página de Login (b) Página de Problemas Desde esta lista se puede acceder a cada problema de forma individual (figura 3.3). La página de un problema dispone de diferentes pestañas: •Description: Aporta la información necesaria para poder entender y resolver el ejercicio. •Hint: Esta pestaña tiene un elemento que se puede expandir para mostrar una pista, normalmente indicando algo que deber usar. •Submissions: Muestra todas las entregas que el usuario ha realizado en el ejercicio concreto, indicando la fecha y hora de la entrega, el tiempo de ejecución, el lenguaje que se ha utilizado y si la respuesta fue correcta. Se puede acceder a cada entrega individualmente para visualizar el código. •Solution: La solución del ejercicio. Se puede ver el resultado en otros lenguajes, aunque no todos los problemas tienen la solución implementada. Debajo de estas pestañas hay un campo en el que se puede escribir la respuesta al ejercicio. Además, incluye una lista desplegable desde la que se puede indicar en cuál de los tres lenguajes soportados se quiere intentar el problema: Java, JavaScript o Python. Actualmente, este campo tiene ya la solución escrita si ha sido aportada por el desarrollador, como en el caso del ejercicio Two Sum, al final de la lista. Figura 3.3: Página de un problema cualquiera en online-judge-mean 24 4. Extensión de online-judge-mean para soportar Blockly 4.1 Juez EL juez original estaba diseñado para funcionar con 3 lenguajes, Java, Javascript y Python. Puesto que Blockly puede traducir su código a Python, el resto de lenguajes no eran necesarios, se modificó para que solo aceptara Python. También se barajó la opción de dejar Javascript solo, ya que Blockly puede traducirse a Javascript. Sin embargo, se desechó esa idea puesto que los usuarios podrían ver sus entregas pasadas tanto en Blockly como traducidas a otro lenguaje, y Python es más entendible visualmente para personas con menor experiencia. Por otro lado, se creó un fragmento de código que envuelve el enviado por el usuario, lo cual permite la comprobación de la corrección de una entrega de manera mucho más sencilla. Esta envoltura cambia la salida estándar momentáneamente a un fichero temporal, además de proporcionar formato al código Blockly traducido a Python para su correcta ejecución. Tras ejecutarse la entrega, este fichero se compara con un archivo que contiene los resultados esperados, haciendo mucho más sencilla la tarea de crear código para testar cada ejercicio. Esta mejora reduce la longitud de los testadores muy significativamente además de su complejidad. Por último, separa el archivo que ejecuta la entrega de los casos de prueba y de los resultados esperados, haciendo más difícil que el usuario pueda acceder a ellos. Finalmente, se prescindió de la necesidad de que el usuario tenga que leer todos los casos de prueba. Este funcionamiento es muy común en otros jueces, donde el usuario tiene que envolver todo su código con la solución en un bucle con cierta condición para leer todos los casos de prueba del ejercicio. Esa funcionalidad pasó a formar parte de la carcasa previamente mencionada, puesto que no cumple ninguna función a la hora de desarrollar el código para resolver los ejercicios, convirtiéndose más en un trámite repetitivo que en un conocimiento útil para el usuario. 4.2 BBDD La base de datos sufrió varias modificaciones, principalmente en la estructura de los datos guardados en las colecciones, quedando éstas sin modificar. 31 Las entregas que se guardan en la base de datos se han modificado quitando el tiempo de actualización, pues era redundante con el tiempo de creación. Este tiempo de modificación solo difiere en unos milisegundos del tiempo de creación por lo que fue retirado. Por otro lado, se crearon tres nuevos parámetros. Los dos primeros almacenan los números de fallos y aciertos respectivamente por todos los usuarios en conjunto, que se utiliza para calcular la frecuencia de cada ejercicio en lugar de escoger un número arbitrario al crear una nueva pregunta o editar una ya existente. El tercero de ellos guarda la solución entregada por el usuario en un formato utilizable por Blockly, lo cual permite volver a intentar entregas pasadas. Esto se logra traduciendo primero el espacio de trabajo de Blockly a XML y posteriormente a texto plano. Este texto contiene tanto la metainformación de los bloques (tipo de bloque, nombre del mismo, color, etc) así como el valor y el orden que ha escrito el usuario al entregarlo. Cuando el usuario accede a la pestaña de entregas pasadas, ese código se vuelve a traducir a XML y posteriormente se inyecta en el espacio de Trabajo Los problemas guardados también sufrieron cambios, siendo el más importante la adición de un nuevo campo que posibilita cambiar el tipo de bloques disponibles para cada ejercicio. Es una funcionalidad muy interesante ya que permite rebajar el número de bloques necesarios en los primeros problemas al mínimo. Con esta reducción se crea una primera impresión mucho más favorable para los usuarios menos avanzados, haciendo que se puedan centrar en familiarizarse con la herramienta. Otro cambio ha sido suprimir el campo donde se guardaba la solución anteriormente, ya que carece de sentido poder acceder a la solución en cualquier momento. 4.3 Problemas La resolución de problemas ha sido la más modificada, ya que se ha cambiado el lenguaje de resolución por completo, siendo Blockly el único aceptado. Por otro lado, al ser los problemas más sencillos, la parte explicativa de los ejercicios no era necesaria. En su lugar, añadimos casos de prueba extra, que pueden ser de mayor utilidad a la hora de saber por qué no funciona una entrega. La pestaña de soluciones también fue cambiada por completo (figura 4.1), siendo ahora utilizada para que el usuario pueda ver el resultado de su código para los casos de prueba que aparecen en el enunciado. Este cambio es interesante ya que permite tener un conocimiento más conciso de por qué una entrega no es correcta. Para reforzar esto, el usuario también podrá acceder a sus entregas pasadas para ver el código utilizado y editarlas directamente, sin tener que volver a empezar desde cero otra vez. Por último, se han añadido varios ejercicios de dificultad variada, lo que permite a los usuarios tener siempre un reto al que enfrentarse hasta que estén listos para dar el salto a la programación con un lenguaje escrito. Esto, sumado a poder ver qué ejercicios el usuario ha intentado o resuelto, está orientado a hacer la página más atractiva para aquellos que estén empezando a programar. Este progreso comienza con la utilización del bloque “imprimir” y el bloque de “número”. Posterior32 Figura 4.1: Interfaz actualizada de la pestaña de soluciones, ahora llamada Resultado mente se introducen las variables con los bloques “establecer variable a” y “variable”, permitiendo la resolución de ejercicios más complejos. A continuación, los bloques de suma de dos operandos así como “Leer entero” y “Leer palabra” permiten resolver cualquier problema matemático o de bucles de bajo nivel. Finalmente, la manipulación de cadenas (añadirle caracteres a una palabra, leer la posición “X” de una cadena o bien obtener la longitud de una frase) se menciona brevemente como último paso. A continuación se explicarán cada uno de los ejercicios1: •1 es soledad: Se trata del primer ejercicio al que se enfrentarán los usuarios. Este ejercicio está diseñado para familiarizarles con el entorno sobre el cuál van a trabajar en la página. También introduce el concepto más sencillo y básico de todos los problemas, imprimir por pantalla. Es una acción que tendrán que utilizar durante la resolución de todos los ejercicios y un concepto fundamental a la hora de enfrentarse a cualquier juez en línea. El objetivo de este ejercicio es imprimir el número 1 por pantalla, para lo cual sólo se dispone de el bloque de mostrar por pantalla y otro que permite utilizar números. Esto centra la dificultad de la prueba en saber manejar la herramienta. •2 son compañía: El segundo ejercicio se trata de una ampliación del primero, introduciendo el concepto de variables para que se empiecen a familiarizar con su uso. Las variables son una parte imprescindible en cualquier lenguaje y sea cual sea el uso de que se le dé y en los jueces en línea no es una excepción. La diferencia de este ejercicio con respecto al anterior es la necesidad de utilizar dos impresiones de números por pantalla en lugar de una, teniendo que ser ambos números iguales. El hecho de incluir las variables a pesar de no ser necesarias para la resolución correcta del problema, hace que el usuario desarrolle la buena costumbre de utilizarlas para crear un código más limpio, claro y legible. •El área del cuadrado: Éste tercer ejercicio se trata del primero en el que los usuarios tendrán 1https://tfg-blockly.netlify.app/questions 33 que hacer uso de la lectura de entrada. Con esto se introducen las tres funciones principales que tendrán que manipular para obtener el resultado esperado. Para leer estos datos disponen del bloque “Leer entero”, que les permitirá adquirir los datos de entrada que les proporciona la página en forma de casos de prueba. Una vez almacenado ese valor en una variable, el usuario podrá manipularla para obtener el valor del área del cuadrado multiplicándolo por si mismo. Finalmente, solo faltará mostrar ese resultado por pantalla. •El área del triángulo: La resolución y la complejidad de este ejercicio es muy similar al anterior. Lo único que difiere es la necesidad de utilizar 2 lecturas de entrada por cada caso de prueba, además de tener que introducir el bloque de operación matemática dentro de otro. Al igual que con el uso de las variables en el segundo ejercicio, esto último no es necesario para resolver el problema pero introduce el concepto para que el usuario pueda utilizarlo en el futuro. Una vez leídos los datos, solo hay que multiplicar ambas variables y dividirlos entre dos, mostrando el resultado por pantalla. •3 son multitud: Este ejercicio incluye de nuevo un concepto no visto antes en ninguno de los anteriores, los bucles. Diseñado para solamente centrarse en ellos, se han quitado todos los bloques que no son estrictamente necesarios. El usuario puede utilizar o bien un bucle “while” o bien un bucle “for”. EL objetivo final del ejercicio es, utilizando cualquiera de los dos, mostrar por pantalla los números del 1 al 10. •La madre de Jaimito: Se introduce un nuevo concepto en este ejercicio, la lectura de palabras. A pesar de que funcionalmente es muy similar al bloque de “Leer Entero”, para los usuarios con poca experiencia puede suponer un reto combinar ambos conceptos. Esto, sumando a la necesidad de utilizar bucles y variables, hace que se convierta en el primer ejercicio donde el usuario tendrá que utilizar estos 3 elementos, terminando así el período de introducción a conceptos. Para resolver el problema planteado, el usuario tendrá que mostrar por pantalla tantas veces como se indique la palabra recibida. •Multiplicar a la antigua: La complejidad de este ejercicio reside en la necesidad de leer y manipular 3 variables de entrada distintas. Esto, sumado al requerimiento añadido de tener que utilizar una cuarta variable que no se menciona en el enunciado para guardar el resultado durante cada iteración del bucle, lo convierte en un ejercicio complicado para usuarios que no tengan claros todos estos conceptos. Para poder superar correctamente esta prueba, hay que imprimir la suma de los dos segundos números tantas veces como indique el primero. •El mundo tras el espejo: Este ejercicio se trata del último y es por tanto el más complejo. Mezcla todos los conceptos estudiados con anterioridad, además de añadir la manipulación de palabras y caracteres. Por ello, establece el límite de dificultad de los ejercicios de la página, siendo todos los problemas anteriores más sencillos. Implementar la solución en Blockly de ejercicios más complicados se convierte en una ardua tarea debido a las limitaciones del 34 lenguaje, haciéndolo contraproducente. Es recomendable utilizar otro lenguaje si el usuario está al nivel de poder resolver ejercicios con más dificultad que este. 4.4 Blockly El proyecto completo ha sido cambiado para solo utilizar Blockly, siendo el único lenguaje aceptado. Este cambio es visible al resolver problemas y al ver entregas pasadas, además de todo lo mencionado previamente. Para ello, ha sido necesario crear un espacio de trabajo de Blockly donde previamente estaba el editor de texto y otro al visualizar el código de entregas pasadas, donde aparecen tanto el código en Blockly como traducido ya a Python, para que el usuario se familiarice con él. Por otro lado, se ha hecho uso de la posibilidad de generar bloques personalizados, siendo utilizados principalmente para leer datos de entrada en los problemas. Estos bloques son traducidos a la función “readline()” de Python, y después se realiza una conversión de tipo a entero o cadena de los datos leídos dependiendo del bloque utilizado. Para ello ha sido necesario crear un nuevo archivo Javascript, llamado “lecturaDeEntrada.js” donde está la declaración de esos bloques en formato JSON, añadiéndolos a la lista de bloques disponibles. En ese mismo archivo se encuentran también las funciones que traducen los bloques una vez en el espacio de trabajo a código Python. 4.5 Misceláneo La página ha sido traducida completamente al castellano, además de haber simplificado el lenguaje utilizado para usuarios con menores conocimientos técnicos sobre la programación. También se han quitado del sistema las opciones que o bien no son utilizadas, como los editores de código o bien no tienen sentido en una página de esta índole, como el sistema de puntuación de los problemas. 35 5. Fase de pruebas Anteriormente se ha hablado del pensamiento computacional y de la importancia de su desarrollo en edades tempranas. Existen diferentes plataformas que hacen uso de programación con bloques, como se comentó en el Capítulo 2. En este proyecto se ha apostado por la enseñanza a través de problemas del tipo de los jueces en línea, en este caso, programando en Blockly. En este capítulo se ha probado el juez para demostrar si la hipótesis es cierta. En esta fase de pruebas 18 individuos realizarán los ejercicios propuestos en el juez en línea y posteriormente se les hará un breve examen sobre Blockly y otro sobre Python (Anexo 1). Las edades y conocimientos sobre la programación de los participantes es la siguiente: Muestra de participantes Edad Conocimiento 26 Básico 58 Nulo 59 Nulo 28 Nulo 29 Básico 17 Medio 24 Nulo 53 Nulo 16 Nulo 26 Básico 24 Básico 34 Nulo 41 Nulo 16 Nulo 56 Avanzado 40 Nulo 67 Nulo 59 Nulo Tabla de edades y conocimientos informáticos 36 5.1 Diseño del experimento Se hacen todas las pruebas de manera individual de manera que ningún individuo se vea influenciado por lo que ha hecho el anterior a él o ya se conozca los ejercicios. La prueba comenzará con una breve presentación (Anexo 1), de unos 5-10 minutos aproximadamente, en la que se introducirá Blockly y la manera de utilizarlo. Durante ese tiempo el individuo puede interrumpir y realizar todas las preguntas que crea necesarias para entender bien el concepto. También se explicará el funcionamiento del juez en cuanto a la entrada de texto y números que debe procesar durante los ejercicios. Después de la presentación, se hará una demostración práctica del ejercicio 4 y se le dejará con la herramienta para que se familiarice con su funcionamiento. A continuación, se dejará al individuo realizar las pruebas en orden. Durante la lectura de cada enunciado se podrán realizar preguntas y serán contestadas para que sea claro el objetivo del ejercicio. En el momento que empiece a resolverlo se comenzará a cronometrar el tiempo, y se dejará libremente al usuario realizar la prueba, independientemente de las dudas que le surjan. Hasta los 3:00 minutos del cronómetro no se contestarán las preguntas que se realicen, aunque sí quedarán apuntadas, pero a partir de esa marca sí se intervendrá para guiar un poco al usuario para que consiga desbloquearse y pueda continuar el ejercicio. Se anotarán los intentos fallidos y la causa de los mismos para ver si se repiten ciertos comportamientos en diferentes individuos. El cronómetro se pausará cuando se envíe el intento correcto o cuando el usuario desista. Si terminado un ejercicio, el usuario sigue teniendo alguna duda sobre el mismo se resolverá para que lo comprenda correctamente. Las pruebas con los ejercicios terminan cuando el usuario decide que el nivel supera su capacidad. Entonces se procederá a una breve prueba sobre Blockly seguida de otra de Python. Estas pruebas se encuentran en el Anexo 1 después de la introducción a Blockly. En las pruebas de Blockly se pondrán casos que no se han practicado en los ejercicios del juez, tales como listas, y se utilizarán bloques que no hayan visto hasta entonces. Empieza por una dificultad sencilla, haciendo uso de condicionales pero luego se introducen las listas, los bucles y algoritmos más complejos. Durante la realización de ambas pruebas no se contestarán las dudas que surjan, aunque sí se anotarán. Para que el usuario pueda vincular los bloques vistos en Blockly con el código en Python, se traducirán al castellano las palabras como while, for, if, else, etc. No habrá ninguna presentación previa sobre el lenguaje Python, pero aún así se pedirá interpretar el código mostrado. El objetivo de la prueba con un lenguaje que no conozca el usuario es conocer si después de un tiempo haciendo uso de la plataforma es capaz de entender un poco un lenguaje completamente desconocido para él hasta el momento. Pese a no conocer el lenguaje, sí se habrá interiorizado la estructura que siguen los programas y los elementos imperativos clásicos, aunque no se haya tenido contacto previo con 37 la sintaxis. De esta manera sería evidente hasta cierto punto, un aumento en su pensamiento computacional. Por último, serán anotadas todas las observaciones que quiera realizar el usuario sobre la página, su funcionamiento, dificultad de los ejercicios y comentarios sobre las pruebas realizadas al finalizar. 5.2 Resultados 5.2.1 Ejercicios de la página web Ejercicio 1 - 1 es soledad La mayoría de las personas entendían que lo primero que necesitaban era un bloque que pudiera mostrar algo, "imprimir" en este caso. Limitar los tipos de bloque disponibles dependiendo del ejercicio resultó beneficioso. Aunque sabían qué necesitaban, no sabían si tenían que usar el bloque imprimir, aunque fuera el único bloque con acción que se les proporcionaba. Otra de las dudas que surgieron fue si lo que debían "imprimir" era un uno en texto plano o el número uno, pero, al solo haber dos bloques disponibles, dedujeron la funcionalidad de imprimir y que debían usar ambos bloques, y todos optaron por imprimir el número. Con este ejercicio comprendieron que imprimir = responder. Ejercicio 2 - 2 son compañía Una de las posibles respuestas a este ejercicio es el Ejercicio 1 dos veces, pero también se les dio la opción de usar variables para asegurarse de que ambos bloques imprimir tenían lo mismo. La gran mayoría hizo justamente eso, y otros intentaron usar variables. Esto les supuso complicaciones, ya que no estaban acostumbrados al concepto de las variables ni a usarlas, que se aclararon al responder dudas tras pasar tres minutos. Una duda común en ambas posibles respuestas fue si se podían repetir bloques, aunque se resolvió rápido. Ejercicio 3 - Área del cuadrado Este es el primer ejercicio en el que no les queda otra más que usar variables y datos de entrada, lo cual, al no estar acostumbrados a usarlos, hizo el ejercicio más complejo. El mayor obstáculo en este ejercicio fue el uso del bloque leer entero. Algunos no tenían claro si se refería a leer un número entero o a leer todos los casos de prueba, mientras que otros, aunque entendieran lo que hacía, no sabían donde usarlo. Además, al ser el primer ejercicio con varios casos de prueba en el enunciado, algunos usuarios trataron de hacer una solución para cada caso en vez de hacer una solución genérica como se había mostrado en la demostración. 38 Algunos usuarios tardaron tan poco debido a que este fue el ejercicio mostrado antes de empezar y retuvieron la solución. Como se ve en el gráfico, no es lo común. Ejercicio 4 - Área del triángulo Si bien este ejercicio es como el anterior con un valor y una operación más, eso no lo hizo más fácil. Es más, el hecho de que necesitaran una multiplicación y una división solo lo hizo más difícil, puesto que la mayoría no sabían que podrían combinar bloques de operaciones matemáticas. Otros dos problemas que surgieron en menor medida fueron el orden de las operaciones y el uso de leer entero en las variables cuando hay más de un dato de entrada por caso de prueba. Las personas que se encontraron con el primer caso intentaron leer los datos del caso de prueba después de usar las variables, y en el segundo, asumieron que las variables podían almacenar más de un valor y que leer entero leería ambas base y altura al usarse una vez. Sin embargo, a pesar de todos estos problemas, el diagrama muestra una mejoría en los tiempos de la mayoría de la muestra, lo que implica que el ejercicio anterior resultó muy útil a la hora de enseñar cómo utilizar variables y operaciones matemáticas en Blockly. Ejercicio 5 - 3 son multitud Este es el primer ejercicio en el que disponen de bloques para realizar bucles. En los dos ejercicios anteriores se utilizaban los datos de entrada, pero no se requería ningún bucle, al contrario que en este ejercicio. Si bien éstos disponen de valores por defecto para poder usarlos directamente, algunos no sabían si se podían usar o si debían modificarlos o usar bloques de matemáticas para darles valor. También hubo complicaciones a la hora entender qué hace exactamente un bucle, el hecho de que el código que contiene se repite, y usar la variable que uno de los bucles crea automáticamente. Sin embargo, si bien algunos lo resolvieron antes, la gran mayoría lo resolvió poco después de haber respondido las dudas una vez pasados los tres primeros minutos. Ejercicio 6 - La madre de Jaimito El mayor obstáculo en este ejercicio fue leer los datos de entrada. Ya que uno de los datos es un entero y otro una palabra, necesitan usar dos bloques distintos para leer sus valores. El problema que muchos encontraron y que les costó entender fue que el orden en el que se leen los datos importa, puesto que los datos de entrada se leen de un solo archivo de texto. Ejercicio 7 - Multiplicar a la antigua Muchas personas decidieron parar en este punto, reduciendo la muestra a menos de la mitad. Las dos complicaciones más comunes fueron: •La necesidad de un acumulador. Todos vieron rápidamente que necesitaban variables para 39 los números de cada caso de prueba, pero les faltó crear una variable más para acumular la suma y poder "imprimir" el resultado de cada iteración. •La diferencia entre establecer un valor y añadirlo. Aún habiendo resuelto el problema del acumulador, un problema que encontraron al usarlo fue el bloque que debían usar para ello. El bloque que permite tomar un valor y sumarlo al de una variable es añadir "valor" a "variable", pero el que están todos acostumbrados a usar es establecer "variable" a, que en su lugar remueve el valor de una variable por completo y lo sustituye por otro, de modo que no acumula. En la mayoría de casos el tiempo que tardaron en resolverlo era ligeramente mayor que en el ejercicio anterior, pero en otros pocos, la diferencia fue mucho mayor. Sin embargo, consiguieron resolverlo, a pesar del tiempo, lo que indica que entendieron y resolvieron los problemas mencionados. Ejercicio 8 - El mundo tras el espejo En este caso solo un usuario fue capaz de solucionarlo, el único usuario con conocimiento avanzado de la programación. Esto se debió principalmente a que trabaja de informático y estos conocimientos no eran nuevos para él. Tardó 428 segundos, un poco menos que en el ejercicio anterior. El resto de individuos no siguieron al ver la dificultad del ejercicio. Tabla de valores Valores Participantes Mediana Menor Valor Mayor Valor Primer Cuartil Tercer Cuartil Itercuartílico Outliers Ejercicio 1 18 53.5 14 221 20 103.75 83.75 221 Ejercicio 2 18 52 23 252 41 97.75 56.75 252, 180, 151 Ejercicio 3 18 320 16 960 271.25 506 234.75 960, 767 Ejercicio 4 18 313 145 840 209.5 440.25 230.75 840, 711 Ejercicio 5 18 269 41 572 183 350.75 167.75 572 Ejercicio 6 13 546 198 982 382 671 289 982 Ejercicio 7 7 591 409 737 437 656 209 none Diagramas de los resultados A continuación se muestra el diagrama de cajas y bigotes de cada ejercicio. En el eje Y se muestra el tiempo (en segundos) que se ha tardado en completar el ejercicio. En el eje X se muestran cada uno de los ejercicios. 40 7. Conclusiones y trabajo futuro 7.1 Conclusiones El proyecto desde un inicio fue trabajado como si se tratase de un juez en línea como los que hemos utilizado a lo largo de nuestra formación (aceptaelreto,DomJudge...). El reto consistía en poder integrar la librería de Blockly dentro de un esqueleto que ya vino proporcionado (online-judgemean). Puesto que la licencia que tenía el repositorio del que utilizamos toda la estructura de la web era MIT, y dicha licencia no asegura el correcto funcionamiento del proyecto, la realidad fue que la mayor parte del esfuerzo estuvo en hacer que se integrase todo correctamente y adaptándolo a lo que queríamos ofrecer al usuario. La librería de Blockly nos ofrecía una variedad de lenguajes a los que se podía convertir y terminamos decantándonos por Python. Escogimos este lenguaje principalmente por ser uno de los más sencillos de aprender y cabía la posibilidad de que los usuarios aprendiesen un poco de Python a medida que resuelven problemas en Blockly. Una parte importante del proyecto ha sido la fase de pruebas con usuarios, puesto que el objetivo final de este es la enseñanza de la programación. El proceso ha sido duro, ya que ninguno sabíamos lo complicado que es explicar programación, aunque sea básica. Puesto que las pruebas se realizaron con el objetivo de ver cómo mejoraba el pensamiento computacional de los individuos a poco que se trabajara la programación y que supusimos que Blockly era muy intuitivo, hicimos explicaciones cortas. El problema reside en que para alguien ajeno a la programación, puede ser complicado hasta Blockly. A pesar de estos inconvenientes, se puede ver la evolución de los usuarios en el pensamiento computacional, puesto que partiendo de cero en la mayoría de los casos, eran capaces de resolver muchas preguntas de las pruebas que se planteaban después de los problemas. Hemos focalizado en la importancia de la enseñanza de la programación desde edades tempranas para mejorar habilidades que sin la programación no serían posibles, como es el pensamiento computacional. La página web sería una buena inclusión en la educación, puesto que hace entretenido el aprendizaje y también permite al alumno practicar por su cuenta. Es una buena herramienta de soporte para los profesores y para gente ajena al centro educativo que simplemente quiera enfrentarse a ciertos retos para aprender a programar. 47 7.2 Trabajo futuro En lo que respecta al futuro, hay algunos aspectos de la aplicación que nos gustaría mejorar en futuras iteraciones, como por ejemplo la cantidad de ejercicios disponibles en el sistema. Sería interesante que la gente dispusiera de más ejercicios, a fin de suavizar la curva de dificultad de estos, creando una experiencia más agradable para los usuarios. Algunos de estos problemas podrían ser similares a los que ya existen, o bien explorar campos nuevos como pueden ser el uso de estructuras de datos básicas (listas, colas o pilas). Con respecto a la interfaz de la página, la inclusión de una nueva pestaña desde la que el usuario pudiera ver o bien sus entregas o bien todas las de la página ordenadas por la fecha de resolución. A pesar de que no se pudiera ver la solución de otras personas, sería una buena motivación ver el progreso de otros compañeros de clase. Por otro lado, añadir botones que permitan desplazarse al problema anterior o posterior, facilitaría la navegación entre ejercicios. Otro punto a seguir desarrollando es la creación de problemas. En la actualidad, al crear un nuevo problema, es necesario generar archivos para el juez (principalmente el testador y los casos de prueba) en el sistema de archivos. Contemplamos la opción de añadir esos archivos directamente desde la página web creando una capa de abstracción, lo cuál simplificaría el proceso en el futuro. El sistema de juicio de las preguntas podría mejorarse para que mostrara al usuario una retroalimentación mejor en caso de error. Sin embargo, al ser el objetivo de esta página gente con escasos conocimientos de programación, sería necesario ajustar los errores a un lenguaje más corriente para que todo el mundo pueda entenderlos. Para llevar a cabo este cambio, sería necesario rediseñar el método actual, puesto que esa traducción a lenguaje común no es posible actualmente. Por último, ofrecer a los profesores la posibilidad de crear competiciones organizadas por ellos mismos para que miembros de una misma clase o centro puedan competir entre ellos a través de la página. Además, podrían ver el avance de cada alumno y organizar el concurso todo desde un mismo lugar, con todas las herramientas necesarias para la administración de la misma. Sin embargo, la carga adicional que implica este módulo no es asumible por Heroku tal y como está desplegada la aplicación actualmente, por lo que sería necesario un servidor dedicado o pasar a un plan de pago en dicha plataforma. 48 7. Conclusions and future work 7.1 Conclusions We have treated the project as if it wee an online judge like the ones we have used throughout our studies at university (aceptaelreto,DomJudge...). The challenge was being able to integrate Blockly librery into a skeleton that was already provided (online-judge-mean). As the license of the repository used as the entire structure of the web was MIT, and this license does not ensure the correct performance of the project, the reality was that the most of the effort was making everything integrate correctly and adapt it to what we wanted to offer the user. The Blockly library offered us a variety of programing languages that could be parsed to, and we ended uo choosing Python. We chose this language primarily because it is one of the easiest to learn, and there was a chance that users would learn a bit of Python as they solve the problems in Blockly. An important part of the project has been the testing phase with users, since the final objective is the teaching of programing. The process has been hard, since non of us knew how complicated it is to explain programing, even if it is basic. As the tests were carried out with the objective of seeing how the computational thinking of the users improved as soon as they start programming and we assumed that Blockly was very intuitive, we did short explanations. The problem is that for users who are not familiarized with programing, even Blockly can be complex. Despite this drawbacks, you can see the evolution of users in computational thinking, even starting from scartch in most cases, they were able to solve many tests questions that were posed after the problems. We have focused on the importance of teaching programming from an early age to improve skills that would not be possible without programming, sucha as computational thinking. The website would be a good inclusion in education, as it makes learning fun and also allows the student to practice on ther own. It is a good support tool for teachers and for people ourside the educational center who simply want to face certain challenges to learn programming. 7.2 Future work There are some aspects of the application that we would like to improve in future iterations, such as the number of exercises available in the system. It would be interesting to make more exercises available to people, in order to smooth the challenge curve of the exercises, creating a more pleasant 49 experience for the users. Some of these tasks could be similar to those that already exist, or explore new fields such as the use of basic data structures (lists, queues or stacks). Regarding the page interface, the inclusion of a new tab from which the user could view either their submissions or all submissions on the page sorted by resolution date. Although it would not be possible to see other people’s solutions, it would be a good motivation to see the progress of other classmates. On the other hand, adding buttons to move to the previous or next task would make it easier to navigate between exercises. Another point to be further developed is the creation of exercises. Currently, when creating a new one, it is necessary to generate files for the judge (mainly the tester and test cases) in the file system. We are considering the option of adding those files directly from the web page creating an abstraction layer, which would simplify the process in the future. The judging system of the questions could be improved to show the user better feedback in case of error. However, as the target of this page is people with little programming knowledge, it would be necessary to adjust the errors to a more common language so that everyone can understand them. To make this change, it would be necessary to redesign the current method, since such a translation into common language is not currently possible. Finally, offering teachers the possibility of creating competitions organized by themselves so that members of the same class or school can compete against each other through the site. In addition, they would be able to see the progress of each student and organize the competition all from one place, with all the necessary tools for the administration of the competition. However, the additional load that this module implies is not bearable by Heroku as the application is currently deployed, so it would be necessary to have a dedicated server or move to a paid plan on the platform. 50 Bibliografía [1] Nativos digitales inmigrantes digitales. On the Horizon, 9, December 2001. [2] Jeannette M. Wing. Computational thinking. Communications of the ACM, 49(3):33–35, 2006. [3] Un análisis de la situación sobre el estado de la enseñanza de la programación en primaria y su didáctica. Technical report, Universidad Rey Juan Carlos, URJC, 2017. [4] After the reboot: computing education in schools. Technical report, Royal Society, 2017. [5] Young people’s views on science education. Technical report, The Wellcome Trust, 2017. [6] George Lukas. Uses of the logo programming language in undergraduate instruction. In Proceedings of the ACM Annual Conference - Volume 2, ACM ’72, page 1130–1136, New York, NY, USA, 1972. Association for Computing Machinery. [7] John Maloney, Mitchel Resnick, Natalie Rusk, Brian Silverman, and Evelyn Eastmond. The scratch programming language and environment. ACM Trans. Comput. Educ., 10(4), November 2010. [8] The Royal Society. After the reboot: computing education in uk schools. Technical report, The Royal Society, 2017. [9] ACM/ICPC. Fact sheet – The 44th Annual World Finals of the ACM Internacional Collegiate Programming Contest. Technical report, ICPC, July 2020. [10] Luca Weherst Stefano Maggiolo, Giovanni Mascellani. CMS: a Growing Grading System. Olympiads in Informatics, 8:123–131, 2014. [11] Thijs Kinkhorst. DOMjudge at Amrita. Technical report, Amrita University, 2013. [12] Competitive learning in informatics: The uva online judge experience. Technical report, Universidad de Valladolid, 2016. [13] Marco Antonio Gómez-Martínn Pedro Pablo Gómez-Martín. ¡Acepta el reto!: juez online para docencia en español. In Actas de las Jornadas sobre Enseñanza Universitaria de la Informática, pages 289–296, 2017. [14] Erik Pasternak, Rachel Fenichel, and Andrew N. Marshall. Tips for creating a block language with blockly. In 2017 IEEE Blocks and Beyond Workshop (B B), pages 21–24, 2017. [15] Jeremy Keith. DOM Scripting. Friends of ED, 2005. 51 [16] TIOBE Index. June headline: Python has never been so close to position #1 before. [17] Python to learn programming. Journal of Physics: Conference Series, 423, January 2013. [18] Andrew Low, Joran Siu, Ivy Ho, and Gary Liu. Introduction to node.js. CASCON ’14, page 283–284, USA, 2014. IBM Corp. 52 Anexo 1 53 54 55 56 63 64 65