Willow : a tool for interactive data structures and algorithms visualization
Autor(a) principal: | |
---|---|
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 |