Juez en línea pa a in oduci
p og amación con Blockly
Online judge o child en using Blockly
Guzmán Ga ido Alique
Césa Ga za Sánchez
Jesús Alejand o Sánchez Cou o
Uni e sidad Complu ense de Mad id
Facul ad de In o má ica
T abajo de Fin de G ado en Ingenie ía In o má ica
Tu o es Ma co An onio Gómez Ma ín
Ped o Pablo Gómez Ma ín
Cu so 2020/2021
Resumen
En es e abajo se desa olla una he amien a que se pueda u iliza en la enseñanza pa a usua ios
que es én poco amilia izados con la p og amación. Se a a de un juez en línea que u iliza Blockly,
una lib e ía de Google que pe mi e p og ama de mane a isual. Al a a se de una p og amación
po medio de bloques hace que la ba e a de en ada sea mucho más le e y ácil de ap ende . Se
p opo cionan una se ie de p oblemas a los usua ios pa a que pongan a p ueba los conocimien os
ap endidos y su mejo a de pensamien o compu acional.
Se es udia ambién cuan impo an e es la enseñanza de la p og amación en edades emp anas y
abaja el pensamien o compu acional desde el ins i u o.
Palab as cla e
Blockly, P og amación, Pensamien o compu acional, Juez en línea, Py hon, Enseñanza, Ja aSc ip ,
Algo i mos.
1
Abs ac
The pu pose o his p ojec is de eloping a ool ha can be used o eaching use s who a e no e y
amilia wi h p og amming. I is an online judge ha uses Blockly, a Google lib a y ha allows
isual p og amming. Being a block-o ien ed p og amming makes he en y ba ie much ligh e
and easie o lea n. A se ies o p oblems a e p o ided o use s o es he knowledge hey ha e
lea ned and hei imp o emen o compu a ional hinking.
I is also s udied how impo an is i o each p og amming a an ea ly age and wo king on he
compu a ional hinking since highschool. The p og ess o his kind o hinking as exe sises and
es s a e ca ied ou is also obse ed.
Keywo ds
Blockly, P og amming, Compu a ional hinking, Online judge, Py hon, Educa ion, Algo i hms,
Ja asc ip
2
Índice
1 In oducción 6
1.1 Obje i os .......................................... 6
1.2 Es uc u adelamemo ia ................................. 6
1.3 Me odologíaein eg ación ................................. 7
1 In oduc ion 8
1.1 Goals ............................................ 8
1.2 S uc u eo hememo y.................................. 8
1.3 Me odology and in eg a ion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2 Es ado del A e 10
2.1 Enseñanza de la p og amación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.1 Bene icios de la p og amación . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.2 P og amación en los colegios . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.1.3 Lenguajes de p og amación pa a p incipian es . . . . . . . . . . . . . . . . . . 12
2.2 Juecesenlínea ....................................... 13
2.2.1 Jueces de p og amación compe i i a . . . . . . . . . . . . . . . . . . . . . . . 14
2.2.2 Jueceseduca i os.................................. 15
2.2.3 online-judge-mean ................................. 16
2.3 Blockly ........................................... 17
2.3.1 QuéesBlockly ................................... 17
2.3.2 Pe spec i a del clien e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.3.3 Ins alación:NPM ................................. 18
2.3.4 Losbloques..................................... 19
2.3.5 Elespaciode abajo................................ 21
2.3.6 DeBlocklyacódigo ................................ 22
3 Es uc u a de online-judge-mean 23
3.1 Quéesonline-judge-mean ................................. 23
3.2 Tecnologíasu ilizadas ................................... 25
3.2.1 Lenguajes de p og amación . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.2.2 MongoDB...................................... 27
3.2.3 Node.js ....................................... 28
3
3.2.4 Exp ess ....................................... 28
3.2.5 Angula ....................................... 28
3.3 BasedeDa os........................................ 29
4 Ex ensión de online-judge-mean pa a sopo a Blockly 31
4.1 Juez ............................................. 31
4.2 BBDD............................................ 31
4.3 P oblemas.......................................... 32
4.4 Blockly ........................................... 35
4.5 Misceláneo ......................................... 35
5 Fase de p uebas 36
5.1 Diseñodelexpe imen o .................................. 37
5.2 Resul ados.......................................... 38
5.2.1 Eje cicios de la página web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
5.3 Conclusiones de las p uebas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.3.1 Resul adosdelos es ............................... 41
5.3.2 Conclusiones inales ................................ 42
6 Con ibuciones 43
7 Conclusiones y abajo u u o 47
7.1 Conclusiones ........................................ 47
7.2 T abajo u u o ....................................... 48
7 Conclusions and u u e wo k 49
7.1 Conclusions......................................... 49
7.2 Fu u ewo k......................................... 49
Bibliog a ía 51
Anexo 1 52
Anexo 2 53
4

Lis a de igu as
2.1 In e az de un p oblema en un concu so de CMS. Imagen ex aída de la página de
CMS............................................. 15
2.2 Cap u a de pan alla de Acep a el Re o . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.3 In e az de un p oblema en un concu so e minado en DOMjudge . . . . . . . . . . . 18
2.4 In e az de un p oblema en online-judge-mean . . . . . . . . . . . . . . . . . . . . . . 19
2.5 Cap u a de un p og ama en blockly. . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.6 Ejemplo UI de un mu ado else_i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.1 Página p incipal de online-judge-mean . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.3 Página de un p oblema cualquie a en online-judge-mean . . . . . . . . . . . . . . . . 24
4.1 In e az ac ualizada de la pes aña de soluciones, aho a llamada Resul ado . . . . . . 33
5.1 Dis ibución del iempo necesa io pa a comple a cada eje cicio . . . . . . . . . . . . 41
5
1. In oducción
1.1 Obje i os
El obje i o de es e p oyec o es desa olla una he amien a web que pe mi a a los pe sonas sin
conocimien os de in o má ica o sin nociones de pensamien o compu acional amilia iza se con es os
concep os en un en o no simpli icado, amigable y sencillo.
Es a página debe pe mi i a los usua ios esol e p oblemas de dis in a di icul ad desde cualquie
disposi i o con acceso a In e ne , con una mínima asis encia po pa e de los docen es. Una ez
en egada la solución, la página la compila á, ejecu a á y compa a á su salida con los casos de
p ueba de ejemplo. En caso de coincidi en odos, el e edic o se á posi i o. Si di ie e en algún
caso, se á nega i o.
El usua io pod á e isa las soluciones que ha en iado, ol e a in en a las en egas allidas as
modi ica las, además de e su p og eso y accede a su cuen a desde cualquie luga median e su
usua io y con aseña. También pod án e la salida de su código, así como casos de p ueba ex a
en caso de que necesi en más ayuda pa a esol e un eje cicio.
Los adminis ado es pod án añadi o modi ica p oblemas que ya exis an, además de pode impo -
a los o expo a los a una base de da os en masa. También se án capaces de modi ica los pe misos
de los usua ios.
Todo el código es á disponible en Gi hub en h ps://gi hub.com/cesa cgs/TFGBlockly y la
página es accesible desde h ps:// g-blockly.ne li y.app/. El usua io de p ueba es usua io1
y la con aseña usua io1 ambién. La p ime a ca ga de la página a da unos segundos ya que el
wo ke de la API ha de empeza a unciona .
1.2 Es uc u a de la memo ia
La p esen e memo ia mues a an o el desa ollo de la página web, mencionando las ecnologías y la
me odología u ilizadas, así como las p uebas ealizadas sob e usua ios, comp obando la e ec i idad
de la he amien a.
Pa a comenza , se in oduce el concep o de jueces en línea, seguido de a ios ejemplos de dis in as
implemen aciones de jueces ya u ilizadas a ni el global. Se hace después una in oducción a la
lib e ía Blockly de Ja asc ip , explicando b e emen e su uncionamien o, así como el uso educa i o
6
de es e y o os lenguajes. A con inuación, se habla en p o undidad de las ecnologías u ilizadas
en la página web, an o en el se ido como en el clien e, as lo cual se explica en de alle el
uncionamien o del sis ema y los cambios ealizados.
Po úl imo, se mues an los esul ados del es udio ealizado en e pe sonas de di e en e pe il pa a
comp oba la alidez de la he amien a, mos ando los a ances de dichos usua ios al en en a se a
un pequeño es sob e Blockly y Py hon después de esol e eje cicios u ilizando la he amien a.
1.3 Me odología e in eg ación
Pa a la di isión de abajo y o ganización del equipo hemos u ilizado me odología ágil Kanban
au oges ionándonos el abajo y aumen ando la p oduc i idad.
En cuan o al código hemos seguido el lujo Gi Flow, lo que nos ayuda en la in eg ación con inua,
ya que se end á en la ama mas e siemp e una e sión sin e o es.
Pa a la in eg ación con inua hemos u ilizado T a is CI, He oku y Ne li y. T a is CI se enca ga de
clona el eposi o io de Gi Hub en un en o no i ual y ealiza p uebas sob e es e. Si uncionan
odas las p uebas, se conside a “supe ado” y T a is CI pod á le an a la pa e del se ido en un
se icio, He oku en es e caso. El clien e se despliega en Ne li y que pe mi e ejecu a páginas web
es á icas y aplicaciones web en la nube a a és de un se icio de backend sin se ido . Ne li y
ac ualiza el clien e igual que T a is CI, en es e caso, cada ez que se hace un push amas e . De
es e modo, an o se ido como clien e es án siemp e le an ados con la úl ima e sión es able.
7
1. In oduc ion
1.1 Goals
The goal o his p ojec is o de elop a web page ha allows people wi hou p og amming skills o
no ions o compu a ional hinking o become amilia wi h hese concep s in a simpli ied, iendly
and simple en i onmen .
This page should allow use s o sol e p oblems wi h di e en di icul y om any de ice wi h In e ne
access, wi h minimal assis ance om eache s. A e he solu ion is deli e ed, he page will compile
i , un i , and compa e i s ou pu o he sample es cases. I all he esul s a e co ec , he e dic
will be posi i e. I i di e s in any case, i will be nega i e.
The use will be able o e iew he solu ions hey ha e sen , e y ailed submissions a e modi ying
hem, as well as iew hei p og ess and access hei accoun om anywhe e using hei use name
and passwo d. They will also be able o see he ou pu o hei code, as well as ex a es cases in
case hey need mo e help sol ing an exe cise.
Adminis a o s will be able o add o modi y p oblems ha al eady exis , as well as being able o
impo o expo hem o a da abase in bulk. They will also be able o modi y use pe missions.
All he code o he p oyec is a ailable in he Gi hub eposi o y h ps://gi hub.com/cesa cgs/
TFGBlockly and he web page is h ps:// g-blockly.ne li y.app/. The es use name is
usua io1 and he passwo d is usua io1 as well
1.2 S uc u e o he memo y
This epo shows bo h he de elopmen o he websi e, men ioning he echnologies and me hod-
ology used, as well as he es s ca ied ou on use s, e i ying he e ec i eness o he ool.
To begin wi h, he concep o online judges is in oduced, ollowed by se e al examples o di e en
implemen a ions o judges al eady used globally. An in oduc ion o he Blockly Ja asc ip lib a y
is hen made, b ie ly explaining i s ope a ion, as well as he educa ional use o his and o he
languages. Nex , he echnologies used on he websi e a e discussed in dep h, bo h on he se e
and on he clien , a e which he ope a ion o he sys em and he changes made a e explained in
de ail.
Finally, he esul s o he s udy ca ied ou among people o di e en p o iles o check he alidi y
8
Figu a 2.1: In e az de un p oblema en un concu so de CMS. Imagen ex aída de la página de CMS
Es á pensado p incipalmen e pa a se usado en concu sos de p og amación, donde exis e un iempo
especi icado de en ega y cie os p oblemas, pe o puede se adap ado a o os con ex os como la
enseñanza.
El sis ema p esen a una muy buena escalabilidad [11], eniendo un sis ema modula pa a ag ega
lenguajes ex a o compilado es. La in e az de los equipos es simple, mien as que la pa e de los
adminis ado es posee ca ac e ís icas muy in e esan es, como son la posibilidad de p oba el e ec o
de cambios en en íos ealizados po los pa icipan es, acla aciones o in o mación de allada sob e
en egas. Cuen a además con una API pa a pode aumen a las uncionalidades del sis ema con
aplicaciones secunda ias.
2.2.2 Jueces educa i os
Es e ipo de sis emas p o ee a los p o eso es de una he amien a con la que o ece a los alumnos
eje cicios (no malmen e de iniciación a la p og amación) que es os puedan esol e con mayo
lexibilidad. El uso de es os sis emas p opo ciona a ias en ajas. En p ime luga , p o ee de una
mayo obje i idad y igu osidad a la enseñanza, pe mi iendo a los p o eso es e i ica con acilidad
la exac i ud de las soluciones, ali iando la ca ga de abajo po pa e del p o eso . En segundo
15

luga , los es udian es eciben una e oalimen ación casi inmedia a de mane a que pueden ealiza
más ápidamen e los p oblemas. Po úl imo, el se icio goza de una disponibilidad absolu a [12],
no limi ado al ho a io lec i o. Es o pe mi e a los alumnos en ega los eje cicios incluso desde su
casa con su p opio o denado , cuando engan iempo disponible.
Algunos de los jueces más impo an es de es e ipo son ¡Acep a el e o!6, Hacke Rank7, u online-
judge.o g8.
¡Acep a el e o!
¡Acep a el e o!9( igu a 2.2) es una pagina c eada en 2014 po dos p o eso es de la Facul ad de
In o má ica de la Uni e sidad Complu ense de Mad id, que habían con ibuido a la pues a en
ma cha de P og amaMe, un concu so de p og amación pa a alumnos de Ciclos Fo ma i os de
Fo mación P o esional. A aíz de la exis encia de esos p oblemas que ca ecían de u ilidad más allá
de se esuel os sin pode p oba su co ección, decidie on desa olla es e juez en línea con la ayuda
de es udian es.
El juez acep a soluciones an o en C, C++ como Ja a, co igiéndolas au omá icamen e. De-
pendiendo del esul ado, el juez puede de ol e una espues a di e en e: AC (Acep ada), WA
(Respues a inco ec a), CE (E o de Compilación), RTE (E o du an e la ejecución), TLE (Tiempo
lími e supe ado), MLE (Lími e de memo ia supe ado), OLE (Lími e de salida supe ado), RF (Fun-
ción es ingida) o IE (E o in e no).
Es e juez en línea dispone de más de 500 p oblemas publicados sepa ados en dis in as ca ego ías,
además de con a con más de 15000 usua ios. Po úl imo, los enunciados es án en cas ellano,
a di e encia de la mayo ía de los jueces [13]. Es o supone no malmen e una ba e a pa a los
es udian es de los p ime os cu sos de los g ados.
2.2.3 online-judge-mean
Online-judge-mean1011 es una aplicación web desa ollada po jojozhuang, cuya unción es esol e
p egun as sob e algo i mia. El usua io puede en ia sus espues as y comp oba si ha supe ado
odos los casos de p ueba. O as unciones que iene son:
•Au en icación basada en okens: Pe mi e el egis o, acceso, au o- egis o, einicio de con-
aseña, e c.
•Ges ión de usua ios: C ea , modi ica o elimina usua ios
•Ges ión de p oblemas: C eación, modi icación o eliminación de p egun as.
6h ps://www.acep ael e o.com/
7h ps://www.hacke ank.com/
8h ps://onlinejudge.o g/
9h ps://www.acep ael e o.com/
10h ps://gi hub.com/Bi -De elope /online-judge-mean
11h ps://online-judge.ne li y.app/
16
Figu a 2.2: Cap u a de pan alla de Acep a el Re o
•Ges ión de la base de da os: In eg a un sis ema de impo ación y expo ación de da os
median e a chi os .cs pa a los usua ios, p oblemas y en egas.
•Sis ema de e aluación: Co ección y eedback de las en egas.
•Lenguajes de p og amación: El sis ema sopo a en egas en 3 lenguajes di e en es: Py hon,
Ja asc ip y Ja a.
•In e az de Usua io: Cuen a con un edi o de código, ba a de p og eso.
Se habla á en más p o undidad sob e es e sis ema en el capí ulo 3.
2.3 Blockly
2.3.1 Qué es Blockly
Blockly es un p oyec o de Google, una lib e ía Ja asc ip de código abie o que pe mi e p og ama
de una o ma en e amen e isual [14].
Su p ime a e sión ue lanzada en 2012 po Neil F ase , Quynh Neu on, Ellen Spe us y Ma k
F iedman a modo de sus i u o de OpenBlocks, o a he amien a de p og amación con bloques. A
di e encia de o os lenguajes de p og amación, Blockly añade una capa más de abs acción a a és
de bloques que, de o ma simila a Sc a ch, pueden mo e se y combina se pa a c ea p og amas.
17
Figu a 2.3: In e az de un p oblema en un concu so e minado en DOMjudge
2.3.2 Pe spec i a del clien e
Cada ipo de bloque ep esen a un elemen o o una acción, no necesa iamen e en elación con la
in o má ica: un bloque pod ía usa se pa a inicializa a iables o ealiza ope aciones ma emá icas,
y o o pod ía usa se pa a desplaza a un pe sonaje po un mapa o gi a una igu a. Los bloques
se pueden selecciona en una abla, a as a y coloca donde uno p e ie a den o de un can as, o
lienzo. Se pueden combina en e sí como piezas de un puzle y ienen diseñados de o ma que al
usua io le sea ácil in ui qué bloques pueden combina se con qué y en qué o den.
De es a o ma, el esul ado es una aglome ación de bloques de di e en es colo es, amaños y o mas
con un sen ido y in cla os.
2.3.3 Ins alación: NPM
La lib e ía Blockly se puede desca ga a a és de di e en es enlaces en su Gi hub12. Dispone de
una ca pe a “demos”, a a és de la cual se pueden p oba a ias uncionalidades del clien e, como
un can as que man iene un amaño ijo, o lo ajus a según se cambia el de la página; ejecu a o
mos a el código esul an e de un conjun o de bloques...
Pa a pode u iliza la lib e ía Blockly, solo se necesi a desca ga sus iche os e impo a los en el
código donde se quie a usa . Sin emba go, al es a incluida en los egis os de NPM, in oduci lo
en un p oyec o exis en e se educe a un solo comando.
NPM, o Node Package Manage , es un ges o de paque es que pe mi e desca ga lib e ías de código
pa a u iliza las en un p oyec o. Todas las lib e ías desca gadas con NPM se almacenan en una
ca pe a llamada “node_modules”. Del mismo modo, ambién ges iona la dependencias necesa ias
12h ps://gi hub.com/google/blockly
18
Figu a 2.4: In e az de un p oblema en online-judge-mean
pa a pode u iliza las lib e ías en el p oyec o sin que de e o po que se in en e u iliza una lib e ía
que no se encuen e en el p oyec o o no se haya elacionado con los iche os que la usan.
2.3.4 Los bloques
Todos los bloques de la lib e ía se encuen an en a ios a chi os .js en la ca pe a blocks. Es os
a chi os con ienen lis as donde se dan alo es a los di e en es elemen os que componen un bloque.
Es as lis as es án esc i as en JSON, pe o Blockly pe mi e ambién pe mi e c ea bloques en Ja as-
c ip . Ambos inicializan los mismos alo es y se pueden combina y usa indis in amen e, sal o en
el caso de los mu ado es o alidado es, los cuales solo pueden de ini se en Ja asc ip .
Algunos elemen os que componen un bloque cualquie a son:
• ype: El iden i icado del bloque, que se usa á más adelan e pa a inclui lo en la página e
in e ac ua con él.
•message0: Tex o qué apa ece á den o del bloque una ez sea isible en la página. Si exis en
huecos donde puede enlaza se con o os bloques o elemen os que el clien e puede modi ica ,
se deben ep esen a indi idualmen e con el p e ijo % seguido de un núme o, en o den: %1,
%2, %3...
•a gs0: Si se han usado p e ijos en message0, se conc e a aquí pa a cada a iable si se espe a
o o bloque, un alo o una de a ias opciones p ede e minadas. No se de ine en o o caso.
•ou pu : De ine el ipo del esul ado de la ope ación que ep esen a el bloque. Po ejemplo, en
el caso de una ope ación ma emá ica, se espe a un Numbe , y en el caso de una compa ación
un Boolean. Si se de ine apa ece á un conec o a la izquie da.
19
Figu a 2.5: Cap u a de un p og ama en blockly.
•p e iousS a emen ynex S a emen : Indican si se pueden enlaza con o os bloques
po a iba y po debajo espec i amen e y cuáles son, admi iendo cualquie a si su alo es
null. No se de inen si no se quie e añadi conec o es.
•colou : El colo del bloque.
• ool ip: Es un ex o explica i o que apa ece cuando el cu so se encuen a encima del
bloque. Se puede usa de o ma opcional pa a explica su uncionalidad o p opo ciona o a
in o mación adicional.
•Mu a o : De ine si un bloque puede se modi icado po el clien e con una se ie de opciones
que se le p opo ciona. Se puede decla a en o ma o JSON jun o con el es o de elemen os del
bloque, y las ex ensiones en sí se de inen apa e como se ha ía cualquie bloque independien e,
pe o odo su compo amien o se debe esc ibi en Ja asc ip . Un mu ado incluye:
–decompose: Si un bloque iene mu ado es de inidos, end á un icono de un eng anaje
desde el cual se puede ab i una en ana. Desde es a en ana se pod án e o os
bloques complemen a ios que se pueden usa pa a modi ica el bloque p incipal. La
unción decompose o ganiza la o ma en la que se mues an y combinan los bloques en
es a en ana.
–compose: Es a unción se enca ga de econs ui el bloque p incipal de acue do a la
combinación de bloques complemen a ios. Se ejecu a cada ez que se incluye o se elimina
un bloque complemen a io en la en ana de decompose.
–sa eConnec ions: Según se an modi icando bloques con la unción compose, es ne-
cesa io que las conexiones con o os bloques no se pie dan debido a la adición o sus-
20

acción de mu ado es den o al bloque. Es a unción se llama an es de compose pa a
asegu a que es o ocu a, en el caso de que se haya de inido.
–Se pueden inclui o as unciones que añadan o as uncionalidades a los mu ado es y
asegu a se, po ejemplo, de que el núme o de alo es de en ada es el co ec o. Po
ejemplo, el bloque ma h_numbe _p ope y, que comp ueba si un núme o es pa , impa ,
nega i o, en e o... dispone de un mu ado con una ex ensión que añade una en ada
adicional a la de echa, en el caso de que se quie a comp oba si el núme o es di isible
po o o.
Figu a 2.6: Ejemplo UI de un mu ado else_i .
Además de los bloques po de ec o, ambién se pueden c ea bloques pe sonalizados manualmen e
o a a és de la he amien a online Blocky De elope Tools, y pueden impo a se y usa se di ec a-
men e incluyendo la u a del a chi o .js donde se hayan esc i o.
2.3.5 El espacio de abajo
An es de in oduci el lienzo donde unciona á Blockly, es necesa io indica las u as en la que se
encuen an el sc ip de blockly, blockly_comp essed; así como sus bloques, blocks_comp essed;
los pe sonalizados si hubie a alguno y el lenguaje que se p e ie a, que en el caso del español es
msg/js/es.js, pa a pode u iliza unciones de Blockly en el código sin que de e o es.
Pa a pode u iliza bloques en una página, es necesa io esc ibi un di con id “blocklyDi ” en la
pa e del código h ml en el que que amos usa los. Blockly lo u iliza pa a gene a un á ea de ondo
blanco po el cual se pueden a as a y coloca bloques, pe o no añade es os mismos.
Pa a dispone de los bloques en el espacio de abajo, hace al a inclui una oolbox en o ma o xml.
La oolbox es el menú que apa ece a la izquie da del can as desde el cual un usua io puede selecciona
bloques y coloca los en él. Cada bloque se incluye indi idualmen e en el xml con un elemen o <block
ype="nomb e"></block>, donde ype es el campo del bloque mencionado en el pun o an e io .
En el caso de que los bloques engan espacio pa a pone alo es u o os bloques, es os se ep esen an
den o del <block> co espondien e con o os es elemen os, cada uno encapsulando al siguien e
en o den: < alue>,<shadow> y< ield>. Es os son u ilizados in e namen e po Blockly pa a
21
busca y lee los alo es de dichos alo es en los bloques a la ho a de aduci los a o o lenguaje de
p og amación, de lo cual se habla más adelan e. Opcionalmen e, los bloques se pueden ag upa como
uno quie a den o de ca ego ías de la o ma <ca ego y name="nomb e">Los bloques</ca ego y>.
De es a o ma, en luga de los bloques, la oolbox mos a á los nomb es de las ca ego ías, que se
expandi án hacia den o del can as pa a mos a los bloques si se hace click en ellos. La oolbox se
debe inyec a en el espacio de abajo a a és de la unción Blockly.injec (0blocklyDi 0,{ oolbox :
elemen o que enga la oolbox}).
Finalmen e, el espacio de abajo puede se ijo o a iable. En el segundo caso, es necesa io c ea
o o elemen o de id “blocklyA ea” de amaño absolu o, de modo que su amaño a íe en p opo ción
a la is a del na egado , y expanda el código donde se inyec a la oolbox con el compo amien o
que pe mi e aumen a o educi el amaño del espacio de abajo. Es e código desplaza el cen o de
blocklyDi en la misma can idad que lo ha hecho blocklyA ea al modi ica el amaño de la en ana
e iguala el amaño del p ime o al del segundo, en píxeles.
2.3.6 De Blockly a código
Blockly ac ualmen e dispone de a ios iche os .js que pe mi en aduci los bloques colocados en
el espacio de abajo en o os 5 lenguajes de p og amación di e en es (da , ja asc ip , php, py hon
y lua). Cada uno de es os lenguajes iene su p opia subca pe a den o de la ca pe a gene a o s con
odas las aducciones pa a los bloques po de ec o. En el caso de los bloques pe sonalizados, se
puede simplemen e inclui la aducción en el mismo a chi o donde se c ea on los bloques en sí.
La aducción de un bloque a un lenguaje conc e o se ealiza median e la ope ación
Blockly.lenguaje_en_el_que_se_quie a_ aduci [’nomb e del bloque’] = unc ion(block){...}
Se puede con e i el código en Blockly del espacio de abajo a o o lenguaje con la unción
Blockly.lenguaje_en_el_que_se_quie a_ aduci .wo kspaceToCode(wo kspace)
Es a unción de uel e un código en el lenguaje co espondien e en o ma o s ing.
22
3. Es uc u a de online-judge-mean
El obje i o del TFG es hace un juez en línea en el que los usua ios p og amen con Blockly. La
página no la hemos p og amado desde ce o, sino que se busca on jueces ya implemen ados desde
los que pa i y pode amplia y añadi Blockly como lenguaje adicional.
Se hizo un es udio de los posibles jueces y de algunas he amien as de ges ión de concu sos. Es as
úl imas ue on deses imadas pues o que necesi amos un juez le an ado en odo momen o, sin lími e
de iempo y con una in e az in ui i a y sencilla. Po ello, nos decan amos po 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 pa ido el
p oyec o. Es una aplicación de juez en línea de código abie o con disponibilidad comple a.
Desde la página p incipal ( igu a 3.1), se puede egis a un usua io o inicia sesión con uno ya
exis en e. Al hace click en Login ( igu a 3.2a), la in o mación se alida y se pasa al se icio de
au en icación, donde comp ueba si el usua io exis e y pe mi e el inicio de sesión si es el caso.
Figu a 3.1: Página p incipal de online-judge-mean
La lis a de p oblemas ( igu a 3.2b) se puede accede desde la página p incipal. Pa a cada p oblema
se puede dis ingui :
•Un núme o pa a indica el o den de apa ición de los p oblemas.
•El ni el de di icul ad. Pueden oma los alo es easy,medium oha d.
•La ecuencia del p oblema.
•La alo ación del p oblema, con alo es en e 1 es ella y 5 es ellas.
23
(a) Página de Login (b) Página de P oblemas
Desde es a lis a se puede accede a cada p oblema de o ma indi idual ( igu a 3.3). La página de
un p oblema dispone de di e en es pes añas:
•Desc ip ion: Apo a la in o mación necesa ia pa a pode en ende y esol e el eje cicio.
•Hin : Es a pes aña iene un elemen o que se puede expandi pa a mos a una pis a, no mal-
men e indicando algo que debe usa .
•Submissions: Mues a odas las en egas que el usua io ha ealizado en el eje cicio conc e o,
indicando la echa y ho a de la en ega, el iempo de ejecución, el lenguaje que se ha u ilizado
y si la espues a ue co ec a. Se puede accede a cada en ega indi idualmen e pa a isualiza
el código.
•Solu ion: La solución del eje cicio. Se puede e el esul ado en o os lenguajes, aunque no
odos los p oblemas ienen la solución implemen ada.
Debajo de es as pes añas hay un campo en el que se puede esc ibi la espues a al eje cicio. Además,
incluye una lis a desplegable desde la que se puede indica en cuál de los es lenguajes sopo ados
se quie e in en a el p oblema: Ja a, Ja aSc ip o Py hon. Ac ualmen e, es e campo iene ya la
solución esc i a si ha sido apo ada po el desa ollado , como en el caso del eje cicio Two Sum, al
inal de la lis a.
Figu a 3.3: Página de un p oblema cualquie a en online-judge-mean
24
4. Ex ensión de online-judge-mean
pa a sopo a Blockly
4.1 Juez
EL juez o iginal es aba diseñado pa a unciona con 3 lenguajes, Ja a, Ja asc ip y Py hon. Pues o
que Blockly puede aduci su código a Py hon, el es o de lenguajes no e an necesa ios, se modi icó
pa a que solo acep a a Py hon. También se ba ajó la opción de deja Ja asc ip solo, ya que Blockly
puede aduci se a Ja asc ip . Sin emba go, se desechó esa idea pues o que los usua ios pod ían e
sus en egas pasadas an o en Blockly como aducidas a o o lenguaje, y Py hon es más en endible
isualmen e pa a pe sonas con meno expe iencia.
Po o o lado, se c eó un agmen o de código que en uel e el en iado po el usua io, lo cual pe mi e
la comp obación de la co ección de una en ega de mane a mucho más sencilla. Es a en ol u a
cambia la salida es ánda momen áneamen e a un iche o empo al, además de p opo ciona o ma o
al código Blockly aducido a Py hon pa a su co ec a ejecución. T as ejecu a se la en ega, es e
iche o se compa a con un a chi o que con iene los esul ados espe ados, haciendo mucho más
sencilla la a ea de c ea código pa a es a cada eje cicio. Es a mejo a educe la longi ud de los
es ado es muy signi ica i amen e además de su complejidad. Po úl imo, sepa a el a chi o que
ejecu a la en ega de los casos de p ueba y de los esul ados espe ados, haciendo más di ícil que el
usua io pueda accede a ellos.
Finalmen e, se p escindió de la necesidad de que el usua io enga que lee odos los casos de p ueba.
Es e uncionamien o es muy común en o os jueces, donde el usua io iene que en ol e odo su
código con la solución en un bucle con cie a condición pa a lee odos los casos de p ueba del
eje cicio. Esa uncionalidad pasó a o ma pa e de la ca casa p e iamen e mencionada, pues o
que no cumple ninguna unción a la ho a de desa olla el código pa a esol e los eje cicios,
con i iéndose más en un ámi e epe i i o que en un conocimien o ú il pa a el usua io.
4.2 BBDD
La base de da os su ió a ias modi icaciones, p incipalmen e en la es uc u a de los da os gua dados
en las colecciones, quedando és as sin modi ica .
31

Las en egas que se gua dan en la base de da os se han modi icado qui ando el iempo de ac ual-
ización, pues e a edundan e con el iempo de c eación. Es e iempo de modi icación solo di ie e
en unos milisegundos del iempo de c eación po lo que ue e i ado. Po o o lado, se c ea on es
nue os pa áme os. Los dos p ime os almacenan los núme os de allos y acie os espec i amen e
po odos los usua ios en conjun o, que se u iliza pa a calcula la ecuencia de cada eje cicio en
luga de escoge un núme o a bi a io al c ea una nue a p egun a o edi a una ya exis en e. El
e ce o de ellos gua da la solución en egada po el usua io en un o ma o u ilizable po Blockly,
lo cual pe mi e ol e a in en a en egas pasadas. Es o se log a aduciendo p ime o el espacio
de abajo de Blockly a XML y pos e io men e a ex o plano. Es e ex o con iene an o la me a-
in o mación de los bloques ( ipo de bloque, nomb e del mismo, colo , e c) así como el alo y el
o den que ha esc i o el usua io al en ega lo. Cuando el usua io accede a la pes aña de en egas
pasadas, ese código se uel e a aduci a XML y pos e io men e se inyec a en el espacio de T abajo
Los p oblemas gua dados ambién su ie on cambios, siendo el más impo an e la adición de un
nue o campo que posibili a cambia el ipo de bloques disponibles pa a cada eje cicio. Es una un-
cionalidad muy in e esan e ya que pe mi e ebaja el núme o de bloques necesa ios en los p ime os
p oblemas al mínimo. Con es a educción se c ea una p ime a imp esión mucho más a o able pa a
los usua ios menos a anzados, haciendo que se puedan cen a en amilia iza se con la he amien a.
O o cambio ha sido sup imi el campo donde se gua daba la solución an e io men e, ya que ca ece
de sen ido pode accede a la solución en cualquie momen o.
4.3 P oblemas
La esolución de p oblemas ha sido la más modi icada, ya que se ha cambiado el lenguaje de
esolución po comple o, siendo Blockly el único acep ado. Po o o lado, al se los p oblemas más
sencillos, la pa e explica i a de los eje cicios no e a necesa ia. En su luga , añadimos casos de
p ueba ex a, que pueden se de mayo u ilidad a la ho a de sabe po qué no unciona una en ega.
La pes aña de soluciones ambién ue cambiada po comple o ( igu a 4.1), siendo aho a u ilizada
pa a que el usua io pueda e el esul ado de su código pa a los casos de p ueba que apa ecen en
el enunciado. Es e cambio es in e esan e ya que pe mi e ene un conocimien o más conciso de po
qué una en ega no es co ec a. Pa a e o za es o, el usua io ambién pod á accede a sus en egas
pasadas pa a e el código u ilizado y edi a las di ec amen e, sin ene que ol e a empeza desde
ce o o a ez.
Po úl imo, se han añadido a ios eje cicios de di icul ad a iada, lo que pe mi e a los usua ios
ene siemp e un e o al que en en a se has a que es én lis os pa a da el sal o a la p og amación
con un lenguaje esc i o. Es o, sumado a pode e qué eje cicios el usua io ha in en ado o esuel o,
es á o ien ado a hace la página más a ac i a pa a aquellos que es én empezando a p og ama .
Es e p og eso comienza con la u ilización del bloque “imp imi ” y el bloque de “núme o”. Pos e io -
32
Figu a 4.1: In e az ac ualizada de la pes aña de soluciones, aho a llamada Resul ado
men e se in oducen las a iables con los bloques “es ablece a iable a” y “ a iable”, pe mi iendo
la esolución de eje cicios más complejos. A con inuación, los bloques de suma de dos ope andos así
como “Lee en e o” y “Lee palab a” pe mi en esol e cualquie p oblema ma emá ico o de bucles
de bajo ni el. Finalmen e, la manipulación de cadenas (añadi le ca ac e es a una palab a, lee la
posición “X” de una cadena o bien ob ene la longi ud de una ase) se menciona b e emen e como
úl imo paso.
A con inuación se explica án cada uno de los eje cicios1:
•1 es soledad: Se a a del p ime eje cicio al que se en en a án los usua ios. Es e eje cicio
es á diseñado pa a amilia iza les con el en o no sob e el cuál an a abaja en la página.
También in oduce el concep o más sencillo y básico de odos los p oblemas, imp imi po
pan alla. Es una acción que end án que u iliza du an e la esolución de odos los eje cicios
y un concep o undamen al a la ho a de en en a se a cualquie juez en línea. El obje i o de
es e eje cicio es imp imi el núme o 1 po pan alla, pa a lo cual sólo se dispone de el bloque
de mos a po pan alla y o o que pe mi e u iliza núme os. Es o cen a la di icul ad de la
p ueba en sabe maneja la he amien a.
•2 son compañía: El segundo eje cicio se a a de una ampliación del p ime o, in oduciendo
el concep o de a iables pa a que se empiecen a amilia iza con su uso. Las a iables son
una pa e imp escindible en cualquie 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 di e encia de es e eje cicio con espec o al an e io es
la necesidad de u iliza dos imp esiones de núme os po pan alla en luga de una, eniendo
que se ambos núme os iguales. El hecho de inclui las a iables a pesa de no se necesa ias
pa a la esolución co ec a del p oblema, hace que el usua io desa olle la buena cos umb e
de u iliza las pa a c ea un código más limpio, cla o y legible.
•El á ea del cuad ado: És e e ce eje cicio se a a del p ime o en el que los usua ios end án
1h ps:// g-blockly.ne li y.app/ques ions
33
que hace uso de la lec u a de en ada. Con es o se in oducen las es unciones p incipales
que end án que manipula pa a ob ene el esul ado espe ado. Pa a lee es os da os disponen
del bloque “Lee en e o”, que les pe mi i á adqui i los da os de en ada que les p opo ciona
la página en o ma de casos de p ueba. Una ez almacenado ese alo en una a iable, el
usua io pod á manipula la pa a ob ene el alo del á ea del cuad ado mul iplicándolo po si
mismo. Finalmen e, solo al a á mos a ese esul ado po pan alla.
•El á ea del iángulo: La esolución y la complejidad de es e eje cicio es muy simila al
an e io . Lo único que di ie e es la necesidad de u iliza 2 lec u as de en ada po cada caso
de p ueba, además de ene que in oduci el bloque de ope ación ma emá ica den o de o o.
Al igual que con el uso de las a iables en el segundo eje cicio, es o úl imo no es necesa io
pa a esol e el p oblema pe o in oduce el concep o pa a que el usua io pueda u iliza lo en
el u u o. Una ez leídos los da os, solo hay que mul iplica ambas a iables y di idi los en e
dos, mos ando el esul ado po pan alla.
•3 son mul i ud: Es e eje cicio incluye de nue o un concep o no is o an es en ninguno de
los an e io es, los bucles. Diseñado pa a solamen e cen a se en ellos, se han qui ado odos
los bloques que no son es ic amen e necesa ios. El usua io puede u iliza o bien un bucle
“while” o bien un bucle “ o ”. EL obje i o inal del eje cicio es, u ilizando cualquie a de los
dos, mos a po pan alla los núme os del 1 al 10.
•La mad e de Jaimi o: Se in oduce un nue o concep o en es e eje cicio, la lec u a de palab as.
A pesa de que uncionalmen e es muy simila al bloque de “Lee En e o”, pa a los usua ios
con poca expe iencia puede supone un e o combina ambos concep os. Es o, sumando a la
necesidad de u iliza bucles y a iables, hace que se con ie a en el p ime eje cicio donde
el usua io end á que u iliza es os 3 elemen os, e minando así el pe íodo de in oducción a
concep os. Pa a esol e el p oblema plan eado, el usua io end á que mos a po pan alla
an as eces como se indique la palab a ecibida.
•Mul iplica a la an igua: La complejidad de es e eje cicio eside en la necesidad de lee y
manipula 3 a iables de en ada dis in as. Es o, sumado al eque imien o añadido de ene
que u iliza una cua a a iable que no se menciona en el enunciado pa a gua da el esul ado
du an e cada i e ación del bucle, lo con ie e en un eje cicio complicado pa a usua ios que no
engan cla os odos es os concep os. Pa a pode supe a co ec amen e es a p ueba, hay que
imp imi la suma de los dos segundos núme os an as eces como indique el p ime o.
•El mundo as el espejo: Es e eje cicio se a a del úl imo y es po an o el más complejo.
Mezcla odos los concep os es udiados con an e io idad, además de añadi la manipulación de
palab as y ca ac e es. Po ello, es ablece el lími e de di icul ad de los eje cicios de la página,
siendo odos los p oblemas an e io es más sencillos. Implemen a la solución en Blockly
de eje cicios más complicados se con ie e en una a dua a ea debido a las limi aciones del
34
lenguaje, haciéndolo con ap oducen e. Es ecomendable u iliza o o lenguaje si el usua io
es á al ni el de pode esol e eje cicios con más di icul ad que es e.
4.4 Blockly
El p oyec o comple o ha sido cambiado pa a solo u iliza Blockly, siendo el único lenguaje acep ado.
Es e cambio es isible al esol e p oblemas y al e en egas pasadas, además de odo lo mencionado
p e iamen e. Pa a ello, ha sido necesa io c ea un espacio de abajo de Blockly donde p e iamen e
es aba el edi o de ex o y o o al isualiza el código de en egas pasadas, donde apa ecen an o
el código en Blockly como aducido ya a Py hon, pa a que el usua io se amilia ice con él.
Po o o lado, se ha hecho uso de la posibilidad de gene a bloques pe sonalizados, siendo u ilizados
p incipalmen e pa a lee da os de en ada en los p oblemas. Es os bloques son aducidos a la
unción “ eadline()” de Py hon, y después se ealiza una con e sión de ipo a en e o o cadena de los
da os leídos dependiendo del bloque u ilizado. Pa a ello ha sido necesa io c ea un nue o a chi o
Ja asc ip , llamado “lec u aDeEn ada.js” donde es á la decla ación de esos bloques en o ma o
JSON, añadiéndolos a la lis a de bloques disponibles. En ese mismo a chi o se encuen an ambién
las unciones que aducen los bloques una ez en el espacio de abajo a código Py hon.
4.5 Misceláneo
La página ha sido aducida comple amen e al cas ellano, además de habe simpli icado el lenguaje
u ilizado pa a usua ios con meno es conocimien os écnicos sob e la p og amación. También se han
qui ado del sis ema las opciones que o bien no son u ilizadas, como los edi o es de código o bien
no ienen sen ido en una página de es a índole, como el sis ema de pun uación de los p oblemas.
35
5. Fase de p uebas
An e io men e se ha hablado del pensamien o compu acional y de la impo ancia de su desa ollo
en edades emp anas. Exis en di e en es pla a o mas que hacen uso de p og amación con bloques,
como se comen ó en el Capí ulo 2. En es e p oyec o se ha apos ado po la enseñanza a a és de
p oblemas del ipo de los jueces en línea, en es e caso, p og amando en Blockly. En es e capí ulo
se ha p obado el juez pa a demos a si la hipó esis es cie a.
En es a ase de p uebas 18 indi iduos ealiza án los eje cicios p opues os en el juez en línea y
pos e io men e se les ha á un b e e examen sob e Blockly y o o sob e Py hon (Anexo 1). Las
edades y conocimien os sob e la p og amación de los pa icipan es es la siguien e:
Mues a de pa icipan es
Edad Conocimien o
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 A anzado
40 Nulo
67 Nulo
59 Nulo
Tabla de edades y conocimien os in o má icos
36

5.1 Diseño del expe imen o
Se hacen odas las p uebas de mane a indi idual de mane a que ningún indi iduo se ea in luenciado
po lo que ha hecho el an e io a él o ya se conozca los eje cicios.
La p ueba comenza á con una b e e p esen ación (Anexo 1), de unos 5-10 minu os ap oximada-
men e, en la que se in oduci á Blockly y la mane a de u iliza lo. Du an e ese iempo el indi iduo
puede in e umpi y ealiza odas las p egun as que c ea necesa ias pa a en ende bien el concep o.
También se explica á el uncionamien o del juez en cuan o a la en ada de ex o y núme os que
debe p ocesa du an e los eje cicios.
Después de la p esen ación, se ha á una demos ación p ác ica del eje cicio 4 y se le deja á con la
he amien a pa a que se amilia ice con su uncionamien o.
A con inuación, se deja á al indi iduo ealiza las p uebas en o den. Du an e la lec u a de cada
enunciado se pod án ealiza p egun as y se án con es adas pa a que sea cla o el obje i o del
eje cicio. En el momen o que empiece a esol e lo se comenza á a c onome a el iempo, y se
deja á lib emen e al usua io ealiza la p ueba, independien emen e de las dudas que le su jan.
Has a los 3:00 minu os del c onóme o no se con es a án las p egun as que se ealicen, aunque sí
queda án apun adas, pe o a pa i de esa ma ca sí se in e end á pa a guia un poco al usua io
pa a que consiga desbloquea se y pueda con inua el eje cicio. Se ano a án los in en os allidos
y la causa de los mismos pa a e si se epi en cie os compo amien os en di e en es indi iduos.
El c onóme o se pausa á cuando se en íe el in en o co ec o o cuando el usua io desis a. Si
e minado un eje cicio, el usua io sigue eniendo alguna duda sob e el mismo se esol e á pa a que
lo comp enda co ec amen e.
Las p uebas con los eje cicios e minan cuando el usua io decide que el ni el supe a su capacidad.
En onces se p ocede á a una b e e p ueba sob e Blockly seguida de o a de Py hon. Es as p uebas
se encuen an en el Anexo 1 después de la in oducción a Blockly. En las p uebas de Blockly se
pond án casos que no se han p ac icado en los eje cicios del juez, ales como lis as, y se u iliza án
bloques que no hayan is o has a en onces. Empieza po una di icul ad sencilla, haciendo uso de
condicionales pe o luego se in oducen las lis as, los bucles y algo i mos más complejos. Du an e
la ealización de ambas p uebas no se con es a án las dudas que su jan, aunque sí se ano a án.
Pa a que el usua io pueda incula los bloques is os en Blockly con el código en Py hon, se
aduci án al cas ellano las palab as como while, o , i , else, e c. No hab á ninguna p esen ación
p e ia sob e el lenguaje Py hon, pe o aún así se pedi á in e p e a el código mos ado. El obje i o
de la p ueba con un lenguaje que no conozca el usua io es conoce si después de un iempo haciendo
uso de la pla a o ma es capaz de en ende un poco un lenguaje comple amen e desconocido pa a él
has a el momen o. Pese a no conoce el lenguaje, sí se hab á in e io izado la es uc u a que siguen
los p og amas y los elemen os impe a i os clásicos, aunque no se haya enido con ac o p e io con
37
la sin axis. De es a mane a se ía e iden e has a cie o pun o, un aumen o en su pensamien o
compu acional.
Po úl imo, se án ano adas odas las obse aciones que quie a ealiza el usua io sob e la página, su
uncionamien o, di icul ad de los eje cicios y comen a ios sob e las p uebas ealizadas al inaliza .
5.2 Resul ados
5.2.1 Eje cicios de la página web
Eje cicio 1 - 1 es soledad
La mayo ía de las pe sonas en endían que lo p ime o que necesi aban e a un bloque que pudie a
mos a algo, "imp imi " en es e caso. Limi a los ipos de bloque disponibles dependiendo del
eje cicio esul ó bene icioso. Aunque sabían qué necesi aban, no sabían si enían que usa el bloque
imp imi , aunque ue a el único bloque con acción que se les p opo cionaba. O a de las dudas que
su gie on ue si lo que debían "imp imi " e a un uno en ex o plano o el núme o uno, pe o, al solo
habe dos bloques disponibles, deduje on la uncionalidad de imp imi y que debían usa ambos
bloques, y odos op a on po imp imi el núme o.
Con es e eje cicio comp endie on que imp imi = esponde .
Eje cicio 2 - 2 son compañía
Una de las posibles espues as a es e eje cicio es el Eje cicio 1 dos eces, pe o ambién se les dio la
opción de usa a iables pa a asegu a se de que ambos bloques imp imi enían lo mismo. La g an
mayo ía hizo jus amen e eso, y o os in en a on usa a iables. Es o les supuso complicaciones,
ya que no es aban acos umb ados al concep o de las a iables ni a usa las, que se acla a on al
esponde dudas as pasa es minu os.
Una duda común en ambas posibles espues as ue si se podían epe i bloques, aunque se esol ió
ápido.
Eje cicio 3 - Á ea del cuad ado
Es e es el p ime eje cicio en el que no les queda o a más que usa a iables y da os de en ada,
lo cual, al no es a acos umb ados a usa los, hizo el eje cicio más complejo.
El mayo obs áculo en es e eje cicio ue el uso del bloque lee en e o. Algunos no enían cla o si
se e e ía a lee un núme o en e o o a lee odos los casos de p ueba, mien as que o os, aunque
en endie an lo que hacía, no sabían donde usa lo. Además, al se el p ime eje cicio con a ios
casos de p ueba en el enunciado, algunos usua ios a a on de hace una solución pa a cada caso
en ez de hace una solución gené ica como se había mos ado en la demos ación.
38
Algunos usua ios a da on an poco debido a que es e ue el eje cicio mos ado an es de empeza y
e u ie on la solución. Como se e en el g á ico, no es lo común.
Eje cicio 4 - Á ea del iángulo
Si bien es e eje cicio es como el an e io con un alo y una ope ación más, eso no lo hizo más
ácil. Es más, el hecho de que necesi a an una mul iplicación y una di isión solo lo hizo más di ícil,
pues o que la mayo ía no sabían que pod ían combina bloques de ope aciones ma emá icas. O os
dos p oblemas que su gie on en meno medida ue on el o den de las ope aciones y el uso de lee
en e o en las a iables cuando hay más de un da o de en ada po caso de p ueba. Las pe sonas
que se encon a on con el p ime caso in en a on lee los da os del caso de p ueba después de usa
las a iables, y en el segundo, asumie on que las a iables podían almacena más de un alo y que
lee en e o lee ía ambas base y al u a al usa se una ez.
Sin emba go, a pesa de odos es os p oblemas, el diag ama mues a una mejo ía en los iempos
de la mayo ía de la mues a, lo que implica que el eje cicio an e io esul ó muy ú il a la ho a de
enseña cómo u iliza a iables y ope aciones ma emá icas en Blockly.
Eje cicio 5 - 3 son mul i ud
Es e es el p ime eje cicio en el que disponen de bloques pa a ealiza bucles. En los dos eje cicios
an e io es se u ilizaban los da os de en ada, pe o no se eque ía ningún bucle, al con a io que
en es e eje cicio. Si bien és os disponen de alo es po de ec o pa a pode usa los di ec amen e,
algunos no sabían si se podían usa o si debían modi ica los o usa bloques de ma emá icas pa a
da les alo . También hubo complicaciones a la ho a en ende qué hace exac amen e un bucle,
el hecho de que el código que con iene se epi e, y usa la a iable que uno de los bucles c ea
au omá icamen e. Sin emba go, si bien algunos lo esol ie on an es, la g an mayo ía lo esol ió
poco después de habe espondido las dudas una ez pasados los es p ime os minu os.
Eje cicio 6 - La mad e de Jaimi o
El mayo obs áculo en es e eje cicio ue lee los da os de en ada. Ya que uno de los da os es un
en e o y o o una palab a, necesi an usa dos bloques dis in os pa a lee sus alo es. El p oblema
que muchos encon a on y que les cos ó en ende ue que el o den en el que se leen los da os impo a,
pues o que los da os de en ada se leen de un solo a chi o de ex o.
Eje cicio 7 - Mul iplica a la an igua
Muchas pe sonas decidie on pa a en es e pun o, educiendo la mues a a menos de la mi ad. Las
dos complicaciones más comunes ue on:
•La necesidad de un acumulado . Todos ie on ápidamen e que necesi aban a iables pa a
39
los núme os de cada caso de p ueba, pe o les al ó c ea una a iable más pa a acumula la
suma y pode "imp imi " el esul ado de cada i e ación.
•La di e encia en e es ablece un alo y añadi lo. Aún habiendo esuel o el p oblema del
acumulado , un p oblema que encon a on al usa lo ue el bloque que debían usa pa a ello.
El bloque que pe mi e oma un alo y suma lo al de una a iable es añadi " alo " a
" a iable", pe o el que es án odos acos umb ados a usa es es ablece " a iable" a, que en su
luga emue e el alo de una a iable po comple o y lo sus i uye po o o, de modo que no
acumula.
En la mayo ía de casos el iempo que a da on en esol e lo e a lige amen e mayo que en el eje cicio
an e io , pe o en o os pocos, la di e encia ue mucho mayo . Sin emba go, consiguie on esol e lo,
a pesa del iempo, lo que indica que en endie on y esol ie on los p oblemas mencionados.
Eje cicio 8 - El mundo as el espejo
En es e caso solo un usua io ue capaz de soluciona lo, el único usua io con conocimien o a anzado
de la p og amación. Es o se debió p incipalmen e a que abaja de in o má ico y es os conocimien os
no e an nue os pa a él. Ta dó 428 segundos, un poco menos que en el eje cicio an e io . El es o
de indi iduos no siguie on al e la di icul ad del eje cicio.
Tabla de alo es
Valo es Pa icipan es Mediana Meno Valo Mayo Valo P ime Cua il Te ce Cua il I e cua ílico Ou lie s
Eje cicio 1 18 53.5 14 221 20 103.75 83.75 221
Eje cicio 2 18 52 23 252 41 97.75 56.75 252, 180, 151
Eje cicio 3 18 320 16 960 271.25 506 234.75 960, 767
Eje cicio 4 18 313 145 840 209.5 440.25 230.75 840, 711
Eje cicio 5 18 269 41 572 183 350.75 167.75 572
Eje cicio 6 13 546 198 982 382 671 289 982
Eje cicio 7 7 591 409 737 437 656 209 none
Diag amas de los esul ados
A con inuación se mues a el diag ama de cajas y bigo es de cada eje cicio. En el eje Y se mues a
el iempo (en segundos) que se ha a dado en comple a el eje cicio. En el eje X se mues an cada
uno de los eje cicios.
40
7. Conclusiones y abajo u u o
7.1 Conclusiones
El p oyec o desde un inicio ue abajado como si se a ase de un juez en línea como los que hemos
u ilizado a lo la go de nues a o mación (acep ael e o,DomJudge...). El e o consis ía en pode
in eg a la lib e ía de Blockly den o de un esquele o que ya ino p opo cionado (online-judge-
mean). Pues o que la licencia que enía el eposi o io del que u ilizamos oda la es uc u a de la
web e a MIT, y dicha licencia no asegu a el co ec o uncionamien o del p oyec o, la ealidad ue
que la mayo pa e del es ue zo es u o en hace que se in eg ase odo co ec amen e y adap ándolo
a lo que que íamos o ece al usua io.
La lib e ía de Blockly nos o ecía una a iedad de lenguajes a los que se podía con e i y e minamos
decan ándonos po Py hon. Escogimos es e lenguaje p incipalmen e po se uno de los más sencillos
de ap ende y cabía la posibilidad de que los usua ios ap endiesen un poco de Py hon a medida
que esuel en p oblemas en Blockly.
Una pa e impo an e del p oyec o ha sido la ase de p uebas con usua ios, pues o que el obje i o
inal de es e es la enseñanza de la p og amación. El p oceso ha sido du o, ya que ninguno sabíamos
lo complicado que es explica p og amación, aunque sea básica. Pues o que las p uebas se ealiza on
con el obje i o de e cómo mejo aba el pensamien o compu acional de los indi iduos a poco que
se abaja a la p og amación y que supusimos que Blockly e a muy in ui i o, hicimos explicaciones
co as. El p oblema eside en que pa a alguien ajeno a la p og amación, puede se complicado
has a Blockly. A pesa de es os incon enien es, se puede e la e olución de los usua ios en el
pensamien o compu acional, pues o que pa iendo de ce o en la mayo ía de los casos, e an capaces
de esol e muchas p egun as de las p uebas que se plan eaban después de los p oblemas.
Hemos ocalizado en la impo ancia de la enseñanza de la p og amación desde edades emp anas
pa a mejo a habilidades que sin la p og amación no se ían posibles, como es el pensamien o com-
pu acional. La página web se ía una buena inclusión en la educación, pues o que hace en e enido el
ap endizaje y ambién pe mi e al alumno p ac ica po su cuen a. Es una buena he amien a de so-
po e pa a los p o eso es y pa a gen e ajena al cen o educa i o que simplemen e quie a en en a se
a cie os e os pa a ap ende a p og ama .
47

7.2 T abajo u u o
En lo que espec a al u u o, hay algunos aspec os de la aplicación que nos gus a ía mejo a en
u u as i e aciones, como po ejemplo la can idad de eje cicios disponibles en el sis ema. Se ía
in e esan e que la gen e dispusie a de más eje cicios, a in de sua iza la cu a de di icul ad de es os,
c eando una expe iencia más ag adable pa a los usua ios. Algunos de es os p oblemas pod ían se
simila es a los que ya exis en, o bien explo a campos nue os como pueden se el uso de es uc u as
de da os básicas (lis as, colas o pilas).
Con espec o a la in e az de la página, la inclusión de una nue a pes aña desde la que el usua io
pudie a e o bien sus en egas o bien odas las de la página o denadas po la echa de esolución.
A pesa de que no se pudie a e la solución de o as pe sonas, se ía una buena mo i ación e el
p og eso de o os compañe os de clase. Po o o lado, añadi bo ones que pe mi an desplaza se al
p oblema an e io o pos e io , acili a ía la na egación en e eje cicios.
O o pun o a segui desa ollando es la c eación de p oblemas. En la ac ualidad, al c ea un nue o
p oblema, es necesa io gene a a chi os pa a el juez (p incipalmen e el es ado y los casos de
p ueba) en el sis ema de a chi os. Con emplamos la opción de añadi esos a chi os di ec amen e
desde la página web c eando una capa de abs acción, lo cuál simpli ica ía el p oceso en el u u o.
El sis ema de juicio de las p egun as pod ía mejo a se pa a que mos a a al usua io una e oali-
men ación mejo en caso de e o . Sin emba go, al se el obje i o de es a página gen e con escasos
conocimien os de p og amación, se ía necesa io ajus a los e o es a un lenguaje más co ien e pa a
que odo el mundo pueda en ende los. Pa a lle a a cabo es e cambio, se ía necesa io ediseña el
mé odo ac ual, pues o que esa aducción a lenguaje común no es posible ac ualmen e.
Po úl imo, o ece a los p o eso es la posibilidad de c ea compe iciones o ganizadas po ellos
mismos pa a que miemb os de una misma clase o cen o puedan compe i en e ellos a a és de
la página. Además, pod ían e el a ance de cada alumno y o ganiza el concu so odo desde
un mismo luga , con odas las he amien as necesa ias pa a la adminis ación de la misma. Sin
emba go, la ca ga adicional que implica es e módulo no es asumible po He oku al y como es á
desplegada la aplicación ac ualmen e, po lo que se ía necesa io un se ido dedicado o pasa a un
plan de pago en dicha pla a o ma.
48
7. Conclusions and u u e wo k
7.1 Conclusions
We ha e ea ed he p ojec as i i wee an online judge like he ones we ha e used h oughou
ou s udies a uni e si y (acep ael e o,DomJudge...). The challenge was being able o in eg a e
Blockly lib e y in o a skele on ha was al eady p o ided (online-judge-mean). As he license o
he eposi o y used as he en i e s uc u e o he web was MIT, and his license does no ensu e
he co ec pe o mance o he p ojec , he eali y was ha he mos o he e o was making
e e y hing in eg a e co ec ly and adap i o wha we wan ed o o e he use .
The Blockly lib a y o e ed us a a ie y o p og aming languages ha could be pa sed o, and we
ended uo choosing Py hon. We chose his language p ima ily because i is one o he easies o
lea n, and he e was a chance ha use s would lea n a bi o Py hon as hey sol e he p oblems in
Blockly.
An impo an pa o he p ojec has been he es ing phase wi h use s, since he inal objec i e is
he eaching o p og aming. The p ocess has been ha d, since non o us knew how complica ed i is
o explain p og aming, e en i i is basic. As he es s we e ca ied ou wi h he objec i e o seeing
how he compu a ional hinking o he use s imp o ed as soon as hey s a p og amming and we
assumed ha Blockly was e y in ui i e, we did sho explana ions. The p oblem is ha o use s
who a e no amilia ized wi h p og aming, e en Blockly can be complex. Despi e his d awbacks,
you can see he e olu ion o use s in compu a ional hinking, e en s a ing om sca ch in mos
cases, hey we e able o sol e many es s ques ions ha we e posed a e he p oblems.
We ha e ocused on he impo ance o eaching p og amming om an ea ly age o imp o e skills
ha would no be possible wi hou p og amming, sucha as compu a ional hinking. The websi e
would be a good inclusion in educa ion, as i makes lea ning un and also allows he s uden o
p ac ice on he own. I is a good suppo ool o eache s and o people ou side he educa ional
cen e who simply wan o ace ce ain challenges o lea n p og amming.
7.2 Fu u e wo k
The e a e some aspec s o he applica ion ha we would like o imp o e in u u e i e a ions, such
as he numbe o exe cises a ailable in he sys em. I would be in e es ing o make mo e exe cises
a ailable o people, in o de o smoo h he challenge cu e o he exe cises, c ea ing a mo e pleasan
49
expe ience o he use s. Some o hese asks could be simila o hose ha al eady exis , o explo e
new ields such as he use o basic da a s uc u es (lis s, queues o s acks).
Rega ding he page in e ace, he inclusion o a new ab om which he use could iew ei he hei
submissions o all submissions on he page so ed by esolu ion da e. Al hough i would no be
possible o see o he people’s solu ions, i would be a good mo i a ion o see he p og ess o o he
classma es. On he o he hand, adding bu ons o mo e o he p e ious o nex ask would make
i easie o na iga e be ween exe cises.
Ano he poin o be u he de eloped is he c ea ion o exe cises. Cu en ly, when c ea ing a new
one, i is necessa y o gene a e iles o he judge (mainly he es e and es cases) in he ile
sys em. We a e conside ing he op ion o adding hose iles di ec ly om he web page c ea ing an
abs ac ion laye , which would simpli y he p ocess in he u u e.
The judging sys em o he ques ions could be imp o ed o show he use be e eedback in case o
e o . Howe e , as he a ge o his page is people wi h li le p og amming knowledge, i would be
necessa y o adjus he e o s o a mo e common language so ha e e yone can unde s and hem.
To make his change, i would be necessa y o edesign he cu en me hod, since such a ansla ion
in o common language is no cu en ly possible.
Finally, o e ing eache s he possibili y o c ea ing compe i ions o ganized by hemsel es so ha
membe s o he same class o school can compe e agains each o he h ough he si e. In addi ion,
hey would be able o see he p og ess o each s uden and o ganize he compe i ion all om one
place, wi h all he necessa y ools o he adminis a ion o he compe i ion. Howe e , he addi ional
load ha his module implies is no bea able by He oku as he applica ion is cu en ly deployed,
so i would be necessa y o ha e a dedica ed se e o mo e o a paid plan on he pla o m.
50
Bibliog a ía
[1] Na i os digi ales inmig an es digi ales. On he Ho izon, 9, Decembe 2001.
[2] Jeanne e M. Wing. Compu a ional hinking. Communica ions o he ACM, 49(3):33–35, 2006.
[3] Un análisis de la si uación sob e el es ado de la enseñanza de la p og amación en p ima ia y
su didác ica. Technical epo , Uni e sidad Rey Juan Ca los, URJC, 2017.
[4] A e he eboo : compu ing educa ion in schools. Technical epo , Royal Socie y, 2017.
[5] Young people’s iews on science educa ion. Technical epo , The Wellcome T us , 2017.
[6] Geo ge Lukas. Uses o he logo p og amming language in unde g adua e ins uc ion. In
P oceedings o he ACM Annual Con e ence - Volume 2, ACM ’72, page 1130–1136, New Yo k,
NY, USA, 1972. Associa ion o Compu ing Machine y.
[7] John Maloney, Mi chel Resnick, Na alie Rusk, B ian Sil e man, and E elyn Eas mond. The
sc a ch p og amming language and en i onmen . ACM T ans. Compu . Educ., 10(4), No em-
be 2010.
[8] The Royal Socie y. A e he eboo : compu ing educa ion in uk schools. Technical epo ,
The Royal Socie y, 2017.
[9] ACM/ICPC. Fac shee – The 44 h Annual Wo ld Finals o he ACM In e nacional Collegia e
P og amming Con es . Technical epo , ICPC, July 2020.
[10] Luca Wehe s S e ano Maggiolo, Gio anni Mascellani. CMS: a G owing G ading Sys em.
Olympiads in In o ma ics, 8:123–131, 2014.
[11] Thijs Kinkho s . DOMjudge a Am i a. Technical epo , Am i a Uni e si y, 2013.
[12] Compe i i e lea ning in in o ma ics: The u a online judge expe ience. Technical epo , Uni-
e sidad de Valladolid, 2016.
[13] Ma co An onio Gómez-Ma ínn Ped o Pablo Gómez-Ma ín. ¡Acep a el e o!: juez online pa a
docencia en español. In Ac as de las Jo nadas sob e Enseñanza Uni e si a ia de la In o má ica,
pages 289–296, 2017.
[14] E ik Pas e nak, Rachel Fenichel, and And ew N. Ma shall. Tips o c ea ing a block language
wi h blockly. In 2017 IEEE Blocks and Beyond Wo kshop (B B), pages 21–24, 2017.
[15] Je emy Kei h. DOM Sc ip ing. F iends o ED, 2005.
51
[16] TIOBE Index. June headline: Py hon has ne e been so close o posi ion #1 be o e.
[17] Py hon o lea n p og amming. Jou nal o Physics: Con e ence Se ies, 423, Janua y 2013.
[18] And ew Low, Jo an Siu, I y Ho, and Ga y Liu. In oduc ion o node.js. CASCON ’14, page
283–284, USA, 2014. IBM Co p.
52

Anexo 1
53
54
55
56
63

64
65