Download jVis Data Structures and Algorithms Teaching Tool Justification

jVis
Data Structures and Algorithms Teaching Tool
Justification & Feasibility
Stephen D. Franchak Jr.
Dr. Beidler
9/16/2012
Submitted in partial fulfillment
of the requirements of
CMPS 490 -- Computer Projects
1
Project Justification
When teaching the fundamentals of common data structures used throughout the field of
computer science, instructors often only utilize traditional writing instruments or note taking
applications to draw out and to manipulate pictorial representations of data structures. This
approach could be inconvenient for both instructors and their students. If an instructor wishes to
demonstrate each step of an algorithm applied to some data structure by drawing the state of the
data structure as it is in each step, the instructor must draw multiple instances of the data
structure for each step of the applied algorithm, which is a tedious and time-consuming process.
On the other hand, if the instructor adopts a more convenient approach by manipulating a single
drawn instance of a data structure, the average note-taking student may become lost in the
process as he or she attempts to record accurate notes by drawing out multiple instances of the
data structure for each step of the applied algorithm. Depending on the speed at which the
instructor progresses through a given algorithm, the student may accidentally skip a state or
record an incorrect state. This project aims to develop a software application that will lead to the
abandonment of such traditional approaches to teaching and learning data structures and
algorithms by creating a new, modern approach that is convenient for both instructors and their
students.
However, there already exists a plethora of free data structure and algorithm visualization
software. What will make this project’s application, jVis, different than the rest? jVis intends to
surpass other data structure visualization software in terms of looks and functionality rather than
in terms of the number of available data structures. This set of available data structure
visualization software will function as a basis for what this project hopes to add to and to change.
2
Some data structure visualization software requires the user to download the application
or to download additional software in order to run the application. Java desktop applications and
Java Web applets may require the user to have the Java JRE before the application can be run.
Likewise, Web applications that utilize Flash require the user to have Adobe Flash installed. jVis
is being developed with user convenience in mind; the user should ideally be able to open any
Web browser in any environment, type in the jVis website address, and be able to use the
visualization scripts without any additional effort from the user. This is ideal for instructors who
must work with a machine that uses Deep Freeze software in the classroom.
Most data structure visualization software is relatively simple in terms of functionality. In
the visualization software that I have tried out, the user inputs values in parameter text fields,
presses a button corresponding to an operation, and watches a brief animation of how the data
structure’s state changes from the operation being applied to it. I did not find these features to be
incredibly interesting and longed for more features that jVis will ultimately provide. Along with
the data structure visualization, the code for the currently selected operation will also be
displayed on the Web page. The user will be able to manually go through each step of the code
and see any changes applied to the data structure and the values of the data structure’s instance
variables and the function’s local variables. Displaying the algorithm’s code alongside the
visualization helps the user, especially visual learners, see the code in action rather than just
viewing raw text output. The algorithms will be common enough so that instructors will not have
to worry about the solution to their assignments being so readily available. The algorithms will
be displayed as working JavaScript code. JavaScript is a simple language; users learning an
algorithm will not get lost in language-specific keywords and verbosity, and JavaScript code can
simply be translated to another C-like, object-oriented language. This translation could be an
3
instructor’s assignment in itself; for instance, the instructor may ask his or her students to
translate one of jVis’ sorting algorithms written in JavaScript to Java, PHP, Python, etc. Time
permitting, the user will be able to inject his or her own algorithms that are written in JavaScript.
Additionally, the user can register a user account and be able to save data structure states and
injected algorithms on the server so that these can be accessed from any machine. This
application can also be used to easily generate images of the available data structures; the user
will have the option to export the current data structure state as a vector graphic in the .svg
format or as a raster image in the .jpeg and .png formats.
jVis is being developed using a different set of technologies than what other data structure
visualization software uses. Other data structure visualization software utilizes Java, strict
JavaScript, the HTML5 canvas, Flash, etc. jVis’ client-side technologies include jQuery, a
JavaScript library, and Scalable Vector Graphics (SVG). Even though similar visualization
software exists, it is worthwhile to create similar software using a different set of technologies
for the sake of education; it shows what can be achieved and how it is achieved using certain
tools. Since jVis is open source, others can examine the code and borrow pieces of it for their
own projects. Components of jVis will be encapsulated so that such reusability will be possible.
Project Feasibility
The resources and technologies that jVis requires will not hinder the completion of the
final product. jVis will use jQuery, SVG, AJAX, PHP, CSS, HTML, JSON, and the MySQL
database management system (DBMS). Except for AJAX, I have experience using all of these
technologies by working with them in prior projects and by creating a prototype for jVis. All of
these technologies are documented well; I will not become overwhelmed in the implementation
4
stage due to not figuring out how something works. I already have an Apache Web server set up
at my house that will be able to serve the Web pages, execute PHP scripts, and house the
MySQL DBMS. If the server load becomes unbearable due to the frequency of AJAX requests to
validate and store data structure states in the MySQL database by multiple users, I would have to
research how to mitigate the load. However, I do not expect the jVis website to become popular
enough in order to worry about scalability or the need to migrate the system to a larger, more
powerful server.
Since this project is aiming to surpass similar data structure visualization software in
terms of looks and functionality rather than in terms of the number of available data structures,
more time is going to be allocated for designing and implementing features for a single data
structure than in creating a large list of functional data structures. The core system for a single
data structure, a singly linked linear list, will be in place before additional data structures are
implemented. If the core system is designed correctly, adding additional data structures to the
system should be as simple as plugging in the SVG View objects for the corresponding data
structure and the actual data structure Model object that is written in JavaScript and that will run
in memory. Therefore, the underlying structure of the system is going to be designed around the
Model-View-Controller (MVC) software design pattern. This MVC structure should be designed
and at least partially implemented by September 25th. The MVC structure also takes into account
the ability to “freeze” an algorithmic operation in memory so that the view can reflect any
changes accordingly and the values of instance and local variables can be accessed. Fully
encapsulating basic SVG objects that will be used in combination to create data structure
pictorial representations should be implemented by October 2nd. A basic prototype page for a
singly linked linear list that utilizes the MVC structure and SVG objects should be completed by
5
October 6th. Database design, implementing user registration and logging in and out, and saving
and loading local copies of the data structure state should be implemented by October 14th. Being
able to save and load the data structure state on the server should be implemented by October
20th. Also, the user interface should be implemented and finalized by October 20th. By this time,
the primary objectives for a single data structure should be complete. The rest of the semester
will be devoted to adding more data structures, bug testing, implementing the ability to export
the visualization as a vector or raster image, implementing the ability for the user to inject his or
her own algorithms for a given data structure, and making the application compatible with as
many Web browsers as possible.
Gantt Chart
The following image is a time frame for the project in the format of a Gantt chart. The
original Excel spreadsheet used to generate this image is also included with the electronic copy
of this document and is named “Franchak_Gantt_Chart.xlsx”.
6