Willow : a tool for interactive data structures and algorithms visualization

Detalhes bibliográficos
Autor(a) principal: MORAES, Pedro Henrique Sousa de
Data de Publicação: 2020
Tipo de documento: Dissertação
Idioma: eng
Título da fonte: Repositório Institucional da UFPE
Texto Completo: https://repositorio.ufpe.br/handle/123456789/39283
Resumo: Teaching Introductory Programming and Data Structures and Algorithms is an important part of Information Technology courses. Both disciplines include essential concepts for software development. Preparing lessons for these courses can be time demanding and tedious as instructors often need to create and modify examples using slides and sketches on a board. Students may also have difficulties due to the high level of abstraction of the content taught in both courses. Educational visualization tools, such as Python Tutor exist, but they provide rigid choices of visualization schemes used to represent the data. Most educational tools are discontinued or have limited support to the visualization of data structures and algorithms. Other tools create visualizations of several algorithms, but lack the ability to edit the source code or inputs. This work proposes Willow, a web-based interactive tool to visualize program state. Willow enables the user to customize visualizations and to walk through the code in both directions to facilitate code understanding. The sensible features of Willow are its ability to change data representations, jump to any point of a program with visual support during debug sessions, and detection and animation of common data structures such as lists and trees. To evaluate Willow, we conducted two studies, a survey with instructors of several universities, and a follow up experiment with programmers of a freelancing platform. We obtained positive feedback from 91% of the survey participants, suggesting that Willow can be used as an teaching aid tool by instructors. In the follow up experiment with programmers, we could not find significant difference between participants that used Willow and participants that did not, the results of the experiment were not conclusive. Nevertheless, we obtained positive results after considering a subset of the experiment tasks, participants also reacted positively to the tool and many would like to use it again.
id UFPE_81f6d555dcd84abb0574d1a02488c657
oai_identifier_str oai:repositorio.ufpe.br:123456789/39283
network_acronym_str UFPE
network_name_str Repositório Institucional da UFPE
repository_id_str 2221
spelling MORAES, Pedro Henrique Sousa dehttp://lattes.cnpq.br/9687250553729712http://lattes.cnpq.br/2117651910340729TEIXEIRA, Leopoldo Motta2021-02-23T18:37:35Z2021-02-23T18:37:35Z2020-10-29MORAES, Pedro Henrique Sousa de. Willow: a tool for interactive data structures and algorithms visualization. 2020. Dissertação (Mestrado em Ciência da Computação) – Universidade Federal de Pernambuco, Recife, 2020.https://repositorio.ufpe.br/handle/123456789/39283Teaching Introductory Programming and Data Structures and Algorithms is an important part of Information Technology courses. Both disciplines include essential concepts for software development. Preparing lessons for these courses can be time demanding and tedious as instructors often need to create and modify examples using slides and sketches on a board. Students may also have difficulties due to the high level of abstraction of the content taught in both courses. Educational visualization tools, such as Python Tutor exist, but they provide rigid choices of visualization schemes used to represent the data. Most educational tools are discontinued or have limited support to the visualization of data structures and algorithms. Other tools create visualizations of several algorithms, but lack the ability to edit the source code or inputs. This work proposes Willow, a web-based interactive tool to visualize program state. Willow enables the user to customize visualizations and to walk through the code in both directions to facilitate code understanding. The sensible features of Willow are its ability to change data representations, jump to any point of a program with visual support during debug sessions, and detection and animation of common data structures such as lists and trees. To evaluate Willow, we conducted two studies, a survey with instructors of several universities, and a follow up experiment with programmers of a freelancing platform. We obtained positive feedback from 91% of the survey participants, suggesting that Willow can be used as an teaching aid tool by instructors. In the follow up experiment with programmers, we could not find significant difference between participants that used Willow and participants that did not, the results of the experiment were not conclusive. Nevertheless, we obtained positive results after considering a subset of the experiment tasks, participants also reacted positively to the tool and many would like to use it again.FACEPEO ensino de Introdução a Programação, e Algoritmos e Estruturas de Dados é parte importante da formação de alunos em cursos de computação. Ambas as disciplinas incluem conceitos essenciais para o desenvolvimento de software. No entanto, preparar as aulas para esses cursos pode ser demorado e tedioso, pois os professores geralmente precisam criar ou modificar exemplos de algoritmos executando passo a passo, usando apresentações de slides ou esboços em um quadro. Os alunos também podem ter dificuldades, devido ao alto nível de abstração do conteúdo ministrado em ambos os cursos. Existem ferramentas de visualização educacionais, como o Python Tutor, mas essas ferramentas fornecem visualizações rígidas de esquemas usados para representar os dados. Várias ferramentas educacionais foram descontinuadas ou tem suporte limitado à visualização de estruturas de dados e algoritmos. Outras ferramentas criam visualizações de vários algoritmos, mas não têm a capacidade de editar o código-fonte ou entradas. Este trabalho propõe Willow, uma ferramenta interativa baseada em tecnologias web para visualizar o estado de programas. Willow permite que o usuário personalize visualizações e navegue pelo código em ambas as direções para facilitar a sua compreensão. As principais características de Willow são sua capacidade de alterar representações de dados, saltar para qualquer ponto de um programa com suporte visual durante as sessões de depuração, e detecção e animação de estruturas de dados comuns, como listas e árvores. Para avaliação de Willow, realizamos dois estudos, um survey com professores de várias universidades, seguido de um experimento com programadores de uma plataforma de freelancers para resolução de problemas com e sem Willow. Obtivemos feedback positivo de 91% dos participantes do survey, que sugere que Willow pode ser usado como uma ferramenta de auxílio no ensino pelos professores. Com relação ao estudo com programadores, não foi encontrada diferença significativa nas respostas entre participantes que usaram Willow e participantes que não usaram. Contudo, foram obtidos resultados positivos ao considerar um subconjunto das tarefas do experimento, participantes também reagiram positivamente à ferramenta e muitos gostariam de usa-la novamente.engUniversidade Federal de PernambucoPrograma de Pos Graduacao em Ciencia da ComputacaoUFPEBrasilhttp://creativecommons.org/licenses/by-nc-nd/3.0/br/info:eu-repo/semantics/openAccessEngenharia de softwareLinguagem de programaçãoWillow : a tool for interactive data structures and algorithms visualizationinfo:eu-repo/semantics/publishedVersioninfo:eu-repo/semantics/masterThesismestradoreponame:Repositório Institucional da UFPEinstname:Universidade Federal de Pernambuco (UFPE)instacron:UFPETEXTDISSERTAÇÃO Pedro Henrique Sousa de Moraes.pdf.txtDISSERTAÇÃO Pedro Henrique Sousa de Moraes.pdf.txtExtracted texttext/plain174900https://repositorio.ufpe.br/bitstream/123456789/39283/4/DISSERTA%c3%87%c3%83O%20Pedro%20Henrique%20Sousa%20de%20Moraes.pdf.txt8bc058d8e24619cafcb7f1f4cdf131f0MD54THUMBNAILDISSERTAÇÃO Pedro Henrique Sousa de Moraes.pdf.jpgDISSERTAÇÃO Pedro Henrique Sousa de Moraes.pdf.jpgGenerated Thumbnailimage/jpeg1133https://repositorio.ufpe.br/bitstream/123456789/39283/5/DISSERTA%c3%87%c3%83O%20Pedro%20Henrique%20Sousa%20de%20Moraes.pdf.jpgebe5ab10f488d870bd0a88f9875e3827MD55ORIGINALDISSERTAÇÃO Pedro Henrique Sousa de Moraes.pdfDISSERTAÇÃO Pedro Henrique Sousa de Moraes.pdfapplication/pdf4582586https://repositorio.ufpe.br/bitstream/123456789/39283/1/DISSERTA%c3%87%c3%83O%20Pedro%20Henrique%20Sousa%20de%20Moraes.pdf8cbcaa176c3d3bbf93a1ccbf1b02fd88MD51CC-LICENSElicense_rdflicense_rdfapplication/rdf+xml; charset=utf-8811https://repositorio.ufpe.br/bitstream/123456789/39283/2/license_rdfe39d27027a6cc9cb039ad269a5db8e34MD52LICENSElicense.txtlicense.txttext/plain; charset=utf-82310https://repositorio.ufpe.br/bitstream/123456789/39283/3/license.txtbd573a5ca8288eb7272482765f819534MD53123456789/392832021-02-24 02:11:26.45oai:repositorio.ufpe.br:123456789/39283TGljZW7Dp2EgZGUgRGlzdHJpYnVpw6fDo28gTsOjbyBFeGNsdXNpdmEKClRvZG8gZGVwb3NpdGFudGUgZGUgbWF0ZXJpYWwgbm8gUmVwb3NpdMOzcmlvIEluc3RpdHVjaW9uYWwgKFJJKSBkZXZlIGNvbmNlZGVyLCDDoCBVbml2ZXJzaWRhZGUgRmVkZXJhbCBkZSBQZXJuYW1idWNvIChVRlBFKSwgdW1hIExpY2Vuw6dhIGRlIERpc3RyaWJ1acOnw6NvIE7Do28gRXhjbHVzaXZhIHBhcmEgbWFudGVyIGUgdG9ybmFyIGFjZXNzw612ZWlzIG9zIHNldXMgZG9jdW1lbnRvcywgZW0gZm9ybWF0byBkaWdpdGFsLCBuZXN0ZSByZXBvc2l0w7NyaW8uCgpDb20gYSBjb25jZXNzw6NvIGRlc3RhIGxpY2Vuw6dhIG7Do28gZXhjbHVzaXZhLCBvIGRlcG9zaXRhbnRlIG1hbnTDqW0gdG9kb3Mgb3MgZGlyZWl0b3MgZGUgYXV0b3IuCl9fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fXwoKTGljZW7Dp2EgZGUgRGlzdHJpYnVpw6fDo28gTsOjbyBFeGNsdXNpdmEKCkFvIGNvbmNvcmRhciBjb20gZXN0YSBsaWNlbsOnYSBlIGFjZWl0w6EtbGEsIHZvY8OqIChhdXRvciBvdSBkZXRlbnRvciBkb3MgZGlyZWl0b3MgYXV0b3JhaXMpOgoKYSkgRGVjbGFyYSBxdWUgY29uaGVjZSBhIHBvbMOtdGljYSBkZSBjb3B5cmlnaHQgZGEgZWRpdG9yYSBkbyBzZXUgZG9jdW1lbnRvOwpiKSBEZWNsYXJhIHF1ZSBjb25oZWNlIGUgYWNlaXRhIGFzIERpcmV0cml6ZXMgcGFyYSBvIFJlcG9zaXTDs3JpbyBJbnN0aXR1Y2lvbmFsIGRhIFVGUEU7CmMpIENvbmNlZGUgw6AgVUZQRSBvIGRpcmVpdG8gbsOjbyBleGNsdXNpdm8gZGUgYXJxdWl2YXIsIHJlcHJvZHV6aXIsIGNvbnZlcnRlciAoY29tbyBkZWZpbmlkbyBhIHNlZ3VpciksIGNvbXVuaWNhciBlL291IGRpc3RyaWJ1aXIsIG5vIFJJLCBvIGRvY3VtZW50byBlbnRyZWd1ZSAoaW5jbHVpbmRvIG8gcmVzdW1vL2Fic3RyYWN0KSBlbSBmb3JtYXRvIGRpZ2l0YWwgb3UgcG9yIG91dHJvIG1laW87CmQpIERlY2xhcmEgcXVlIGF1dG9yaXphIGEgVUZQRSBhIGFycXVpdmFyIG1haXMgZGUgdW1hIGPDs3BpYSBkZXN0ZSBkb2N1bWVudG8gZSBjb252ZXJ0w6otbG8sIHNlbSBhbHRlcmFyIG8gc2V1IGNvbnRlw7pkbywgcGFyYSBxdWFscXVlciBmb3JtYXRvIGRlIGZpY2hlaXJvLCBtZWlvIG91IHN1cG9ydGUsIHBhcmEgZWZlaXRvcyBkZSBzZWd1cmFuw6dhLCBwcmVzZXJ2YcOnw6NvIChiYWNrdXApIGUgYWNlc3NvOwplKSBEZWNsYXJhIHF1ZSBvIGRvY3VtZW50byBzdWJtZXRpZG8gw6kgbyBzZXUgdHJhYmFsaG8gb3JpZ2luYWwgZSBxdWUgZGV0w6ltIG8gZGlyZWl0byBkZSBjb25jZWRlciBhIHRlcmNlaXJvcyBvcyBkaXJlaXRvcyBjb250aWRvcyBuZXN0YSBsaWNlbsOnYS4gRGVjbGFyYSB0YW1iw6ltIHF1ZSBhIGVudHJlZ2EgZG8gZG9jdW1lbnRvIG7Do28gaW5mcmluZ2Ugb3MgZGlyZWl0b3MgZGUgb3V0cmEgcGVzc29hIG91IGVudGlkYWRlOwpmKSBEZWNsYXJhIHF1ZSwgbm8gY2FzbyBkbyBkb2N1bWVudG8gc3VibWV0aWRvIGNvbnRlciBtYXRlcmlhbCBkbyBxdWFsIG7Do28gZGV0w6ltIG9zIGRpcmVpdG9zIGRlCmF1dG9yLCBvYnRldmUgYSBhdXRvcml6YcOnw6NvIGlycmVzdHJpdGEgZG8gcmVzcGVjdGl2byBkZXRlbnRvciBkZXNzZXMgZGlyZWl0b3MgcGFyYSBjZWRlciDDoApVRlBFIG9zIGRpcmVpdG9zIHJlcXVlcmlkb3MgcG9yIGVzdGEgTGljZW7Dp2EgZSBhdXRvcml6YXIgYSB1bml2ZXJzaWRhZGUgYSB1dGlsaXrDoS1sb3MgbGVnYWxtZW50ZS4gRGVjbGFyYSB0YW1iw6ltIHF1ZSBlc3NlIG1hdGVyaWFsIGN1am9zIGRpcmVpdG9zIHPDo28gZGUgdGVyY2Vpcm9zIGVzdMOhIGNsYXJhbWVudGUgaWRlbnRpZmljYWRvIGUgcmVjb25oZWNpZG8gbm8gdGV4dG8gb3UgY29udGXDumRvIGRvIGRvY3VtZW50byBlbnRyZWd1ZTsKZykgU2UgbyBkb2N1bWVudG8gZW50cmVndWUgw6kgYmFzZWFkbyBlbSB0cmFiYWxobyBmaW5hbmNpYWRvIG91IGFwb2lhZG8gcG9yIG91dHJhIGluc3RpdHVpw6fDo28gcXVlIG7Do28gYSBVRlBFLCBkZWNsYXJhIHF1ZSBjdW1wcml1IHF1YWlzcXVlciBvYnJpZ2HDp8O1ZXMgZXhpZ2lkYXMgcGVsbyByZXNwZWN0aXZvIGNvbnRyYXRvIG91IGFjb3Jkby4KCkEgVUZQRSBpZGVudGlmaWNhcsOhIGNsYXJhbWVudGUgbyhzKSBub21lKHMpIGRvKHMpIGF1dG9yIChlcykgZG9zIGRpcmVpdG9zIGRvIGRvY3VtZW50byBlbnRyZWd1ZSBlIG7Do28gZmFyw6EgcXVhbHF1ZXIgYWx0ZXJhw6fDo28sIHBhcmEgYWzDqW0gZG8gcHJldmlzdG8gbmEgYWzDrW5lYSBjKS4KRepositório InstitucionalPUBhttps://repositorio.ufpe.br/oai/requestattena@ufpe.bropendoar:22212021-02-24T05:11:26Repositório Institucional da UFPE - Universidade Federal de Pernambuco (UFPE)false
dc.title.pt_BR.fl_str_mv Willow : a tool for interactive data structures and algorithms visualization
title Willow : a tool for interactive data structures and algorithms visualization
spellingShingle Willow : a tool for interactive data structures and algorithms visualization
MORAES, Pedro Henrique Sousa de
Engenharia de software
Linguagem de programação
title_short Willow : a tool for interactive data structures and algorithms visualization
title_full Willow : a tool for interactive data structures and algorithms visualization
title_fullStr Willow : a tool for interactive data structures and algorithms visualization
title_full_unstemmed Willow : a tool for interactive data structures and algorithms visualization
title_sort Willow : a tool for interactive data structures and algorithms visualization
author MORAES, Pedro Henrique Sousa de
author_facet MORAES, Pedro Henrique Sousa de
author_role author
dc.contributor.authorLattes.pt_BR.fl_str_mv http://lattes.cnpq.br/9687250553729712
dc.contributor.advisorLattes.pt_BR.fl_str_mv http://lattes.cnpq.br/2117651910340729
dc.contributor.author.fl_str_mv MORAES, Pedro Henrique Sousa de
dc.contributor.advisor1.fl_str_mv TEIXEIRA, Leopoldo Motta
contributor_str_mv TEIXEIRA, Leopoldo Motta
dc.subject.por.fl_str_mv Engenharia de software
Linguagem de programação
topic Engenharia de software
Linguagem de programação
description Teaching Introductory Programming and Data Structures and Algorithms is an important part of Information Technology courses. Both disciplines include essential concepts for software development. Preparing lessons for these courses can be time demanding and tedious as instructors often need to create and modify examples using slides and sketches on a board. Students may also have difficulties due to the high level of abstraction of the content taught in both courses. Educational visualization tools, such as Python Tutor exist, but they provide rigid choices of visualization schemes used to represent the data. Most educational tools are discontinued or have limited support to the visualization of data structures and algorithms. Other tools create visualizations of several algorithms, but lack the ability to edit the source code or inputs. This work proposes Willow, a web-based interactive tool to visualize program state. Willow enables the user to customize visualizations and to walk through the code in both directions to facilitate code understanding. The sensible features of Willow are its ability to change data representations, jump to any point of a program with visual support during debug sessions, and detection and animation of common data structures such as lists and trees. To evaluate Willow, we conducted two studies, a survey with instructors of several universities, and a follow up experiment with programmers of a freelancing platform. We obtained positive feedback from 91% of the survey participants, suggesting that Willow can be used as an teaching aid tool by instructors. In the follow up experiment with programmers, we could not find significant difference between participants that used Willow and participants that did not, the results of the experiment were not conclusive. Nevertheless, we obtained positive results after considering a subset of the experiment tasks, participants also reacted positively to the tool and many would like to use it again.
publishDate 2020
dc.date.issued.fl_str_mv 2020-10-29
dc.date.accessioned.fl_str_mv 2021-02-23T18:37:35Z
dc.date.available.fl_str_mv 2021-02-23T18:37:35Z
dc.type.status.fl_str_mv info:eu-repo/semantics/publishedVersion
dc.type.driver.fl_str_mv info:eu-repo/semantics/masterThesis
format masterThesis
status_str publishedVersion
dc.identifier.citation.fl_str_mv MORAES, Pedro Henrique Sousa de. Willow: a tool for interactive data structures and algorithms visualization. 2020. Dissertação (Mestrado em Ciência da Computação) – Universidade Federal de Pernambuco, Recife, 2020.
dc.identifier.uri.fl_str_mv https://repositorio.ufpe.br/handle/123456789/39283
identifier_str_mv MORAES, Pedro Henrique Sousa de. Willow: a tool for interactive data structures and algorithms visualization. 2020. Dissertação (Mestrado em Ciência da Computação) – Universidade Federal de Pernambuco, Recife, 2020.
url https://repositorio.ufpe.br/handle/123456789/39283
dc.language.iso.fl_str_mv eng
language eng
dc.rights.driver.fl_str_mv http://creativecommons.org/licenses/by-nc-nd/3.0/br/
info:eu-repo/semantics/openAccess
rights_invalid_str_mv http://creativecommons.org/licenses/by-nc-nd/3.0/br/
eu_rights_str_mv openAccess
dc.publisher.none.fl_str_mv Universidade Federal de Pernambuco
dc.publisher.program.fl_str_mv Programa de Pos Graduacao em Ciencia da Computacao
dc.publisher.initials.fl_str_mv UFPE
dc.publisher.country.fl_str_mv Brasil
publisher.none.fl_str_mv Universidade Federal de Pernambuco
dc.source.none.fl_str_mv reponame:Repositório Institucional da UFPE
instname:Universidade Federal de Pernambuco (UFPE)
instacron:UFPE
instname_str Universidade Federal de Pernambuco (UFPE)
instacron_str UFPE
institution UFPE
reponame_str Repositório Institucional da UFPE
collection Repositório Institucional da UFPE
bitstream.url.fl_str_mv https://repositorio.ufpe.br/bitstream/123456789/39283/4/DISSERTA%c3%87%c3%83O%20Pedro%20Henrique%20Sousa%20de%20Moraes.pdf.txt
https://repositorio.ufpe.br/bitstream/123456789/39283/5/DISSERTA%c3%87%c3%83O%20Pedro%20Henrique%20Sousa%20de%20Moraes.pdf.jpg
https://repositorio.ufpe.br/bitstream/123456789/39283/1/DISSERTA%c3%87%c3%83O%20Pedro%20Henrique%20Sousa%20de%20Moraes.pdf
https://repositorio.ufpe.br/bitstream/123456789/39283/2/license_rdf
https://repositorio.ufpe.br/bitstream/123456789/39283/3/license.txt
bitstream.checksum.fl_str_mv 8bc058d8e24619cafcb7f1f4cdf131f0
ebe5ab10f488d870bd0a88f9875e3827
8cbcaa176c3d3bbf93a1ccbf1b02fd88
e39d27027a6cc9cb039ad269a5db8e34
bd573a5ca8288eb7272482765f819534
bitstream.checksumAlgorithm.fl_str_mv MD5
MD5
MD5
MD5
MD5
repository.name.fl_str_mv Repositório Institucional da UFPE - Universidade Federal de Pernambuco (UFPE)
repository.mail.fl_str_mv attena@ufpe.br
_version_ 1802310639439314944