VisuLearn

O que é a VisuLearn?

A VisuLearn é uma ferramenta de visualização de algoritmos e estruturas de dados, que tem como objetivo dar suporte no aprendizado desses tópicos de forma interativa, facilitando a assimilação de conceitos fundamentalmente abstratos através de recursos visuais.

Como funciona?

Tudo começa no menu onde usuário pode selecionar uma estrutura de dados do catálogo. A partir disso, ele será redirecionado para a principal página da VisuLearn, a qual se divide da seguinte forma:

1. Guia

Essa seção contém uma breve descrição da estrutura de dados, explicando resumidamente seu funcionamento e sua aplicabilidade.

Em adicional, nela estão descritos os controles para interagir com a estrutura de dados que será renderizada. Além disso, ela contém as definições da interface Javascript (métodos e propriedades dos objetos), usada para interagir com os objetos através de codificação.

Print screen do guia da estrutura de dados.
Print screen do guia da estrutura de dados.

2. Editor Javascript

Esse componente contém dois editores de código Javascript. Nele o usuário poderá definir seu próprio código para controlar a estrutura de dados da forma que quiser!

O primeiro deles é usado para definir um objeto Javascript com as propriedades e valores que o usuário quiser, esse objeto estará acessível na função codificada a seguir. Os valores das propriedades poderão ser atualizados entre execuções da função, ou seja, pode ser utilizado para contadores e etc.

No segundo editor o usuário poderá codificar uma função Javascript que será executada sob-demanda. Essa função receberá como parâmetros dois objetos, o primeiro deles sempre representando a estrutura de dados sendo renderizada (é interagindo com esse objeto que você poderá alterar a estrutura de dados da forma que desejar) e o segundo é o objeto definido no editor anterior. Após a codificação, basta clicar no botão "Concluir", para que seu código seja computado e se torne passível de execução.

3. Canvas

Aqui serão renderizadas as estruturas de dados e os controles pré-definidos para cada uma delas, como inputs de entrada de valores e botões para diferentes ações.

Print screen do guia da estrutura de dados.