CS512 Project: Android Application as anEducational Tool for Algorithm Visualization and

User Knowledge TestingHristiyan Kourtev, Anwar Jameel, Aditya Ambadipudi Venkata

Rutgers University, Piscataway, NJ, USAEmails: hkourtev@ruccs.rutgers.edu, aj528@scarletmail.rutgers.edu, vsa17@scarletmail.rutgers.edu

RUIDs: 102009662, 166009833, 167000877

Abstract— In order to understand the algorithm, however simpleit may be, we often employ some kind of visualization (drawing onpaper, image, video etc.). Anyone who has studied algorithms knowshow helpful a visualizer can be to understand how an algorithmworks. By seeing how the algorithm works step-by-step we can oftenunderstand it with just a glance, while going through the pseudocode and other written explanations and trying to imagine what isgoing on, can be time consuming, confusing and frustration. Thereis a wide variety of algorithm visualizers for different algorithmsand representations, however what we haven’t been able to findhowever was a tool that allows user to visually manipulate the dataand data structure, in a way the algorithm would and check eachstep to make sure user is doing exactly what the algorithm wouldhave done. Our application does exactly that, while also collectingstatistical information about errors made by the user, which can helpinstructors and students to identify problematic areas/steps and workon improving them.

I. PROJECT DESCRIPTION

Our goal is to build an Android application, which will serveas a teaching and learning tool with 3 major components:

• Learning mode, providing step-by-step visualization ofgraph-based algorithms, such as Kruskal/Primm’s Mini-mum Spanning Tree algorithm.

• Testing mode, providing a visual interface for manip-ulating data and data structures to duplicate the stepsperformed by the specific algorithm, an excellent wayfor users to test their understanding. Each step will beverified against the algorithm and feedback will be pro-vided in real time. This latter capability is something wehave been unable to find in any other mobile/touchscreenapplication for algorithm visualization available at themoment.

• Statistics, providing an overview of the number andfrequency of each type of mistake made and the stepin the algorithm at which they occurred. Such statisticscan be very useful to an instructor, who can use them toidentify problematic areas and work on providing betterexplanation.

We believe our project will help many students to test andimprove their knowledge of algorithms. Being an applicationfor a mobile platform it is something which students can doon the move, while waiting for the bus, for example.

Our main hurdle will be to find a streamlined visual inter-face which provides all necessary information, allows the user

to modify the data and data structure involved in the algorithm,while being easy and intuitive to use. We will also build thesystem with expandability in mind, so that it can be extendedwith additional algorithms without too much difficulty.

The project has four stages: Gathering, Design, Infrastruc-ture Implementation, and User Interface.

A. Stage1 - Requirement Gathering Stage.

Before commencing any project it is important to clearlydefine, objectives, users, requirements, a realistic timeline andways to fairly and efficiently divide work within the team.

• Types of users: A wide variety of users can use our app,for example students, teachers and people who are justcurious about algorithms.

• User interaction modes:– Learning mode, where the algorithm operations will

be demonstrated step by step on a random set ofdata, while each step is narrated in detail as well

– Testing mode, where the user will be presented withinput data and the necessary data structure buildingblocks and will be asked to perform all the stepsthe algorithm would perform in order to produce thecorrect final output.

– Statistics mode, which allows users to view statis-tical information about the type and frequencies ofmistakes they have made.

• Real World Scenario 1 - Student learning how to useKruskal’s algorithm to produce the Minimum SpanningTree of a given graph:Students and other curious individuals can use the appli-cation to get a visual representation of how a particularalgorithm works, step by step, together with detailedexplanations.Once students are familiar with the process and datastructures used they can switch to test mode and test theirknowledge by trying to replicate the algorithm’s stepson a new randomly generated graph. At each step thesystem will verify their actions and will not allow themto proceed until they perform the right action or until theymake 3 incorrect choices in a row, at which step the stepwill be skipped and the user can continue.

– Input Data Types:A graph G with V vertices and E edges where everyedge has a weight.

– System Data Output:Visualization and explanation of each and every stepof Kruskal’s algorithm for finding the MinimumSpanning Tree of a graph G. A Minimum SpanningTree of G.

– Output Data Types:A list of the steps involved in computing MinimumSpanning Tree of a given graph G, using Kruskal’salgorithm and a list of any errors made by the user.

• Real World Scenario 2 - A teacher teaching MinimumSpanning Tree Algorithms and testing students’ knowl-edge of Kruskal’s Minimum Spanning Tree Algorithm:A teacher in a digital classroom equipped with electronictablets can teach the algorithm by demonstrating the stepby step visualization of the algorithm using this mobileapplication.The teacher can then use the application as a testingplatform with automatic scoring and can use the statisticaldata collected to identify potential problems with theirdescription of certain steps of the algorithm and work ongenerating better descriptions, if necessary.

– Input Data Types:A graph G with V vertices and E edges where everyedge has a weight.

– System Data Output:Visualization and explanation of each and every stepof Kruskal’s algorithm for finding the MinimumSpanning Tree of a graph G. A Minimum SpanningTree of G.

– Output Data Types for Scenario2:A Minimum Spanning Tree of G.

• Project Time-line

– Stage 1 - Requirement gathering stage: Submitproject proposal. (Due October 28, 2015)

– Stage 2 - Design stage: Choose algorithms to beincluded in the application, define general categoriesand group algorithms based on similarities of datastructures used, methodology and visual represen-tation, identify visual and structural items neededto implement the algorithms in each category. (DueNovember 3, 2015)

– Stage 3 - Implementation stage: Program visual andback-end items. Debugging and preliminary testing.Usability testing with real users. (Due November 24,2015)

– Stage 4 - Presentation: Prepare project highlights andfinal presentation. (Due December 3, 2015)

• Division of Labor.

– Hristiyan: User Interface design and implementation– Anwar: Database and Back-End design and imple-

mentation

– Aditya: User Experience design and implementation,usability testing

B. Stage2 - Design Stage.

• Short Textual Project Description.The application being designed contains 4 activi-ties (activity in android is every screen that usercan see and interact with) namely Main Activity,Learn Activity and Test Activity. Main Activity isthe activity which gets invoked with the applicationlaunch by the user. Main Activity provides the userwith options to enter into Learning mode (LearnActivity), Testing Mode (Test Activity), StatisticsMode (Statistics Activity) or Exit the application.

Learning Mode (Learn Activity) comes into theforeground when user selects Learning mode in MainActivity. Learn Activity runs the services (servicein android is a background process) to generate thegraph, run algorithm on the generated graph, storethe algorithm steps to database and visualize thestored steps in an orderly manner.

Testing Mode (Test Activity) comes into the fore-ground when user selects Test mode in Main Activ-ity. Test Activity runs the services to generate thegraph, run algorithm on the generated graph, storeand retrieve the algorithm steps to and from database,draw the graph on screen, check the user steps totrace an algorithm and display the statistics of test.

• Flow Diagram. Flow Diagram is shown in Fig. 1• High Level Pseudo Code System Description. Please

insert high level pseudo-code describing the major systemmodules as per your flow diagram.

• Algorithms and Data Structures.– Graph Generation Algorithm (Description)

In order for the app to provide a better educationalexperience and to give users the ability to testthemselves on the same algorithm multiple times, wedecided that it is necessary for us to use randomlygenerated graphs. This means that every time theuser reloads the application they will see a differentgraph. Using randomly generated graphs will ensure

that the users get to see how the algorithm operateson a variety of different graphs and will prevent themfrom remembering a solution, so that every time theytest themselves on one of the provided algorithms,they will actually need to solve a completely differentproblem. This required us to solve the problem of

random graph generation. Our research revealed thatrandom graph generation is a very complex prob-lem with a multitude of parameters and constraints,depending on the purpose and type of graph. Ourtime constraint prevents us from performing detailedresearch on the subject, so we looked for a simple

Fig. 1. App Flow Diagram

(even though imperfect) method, which would beeasy to implement. We initially planned on using an

algorithm called ”The Configuration Model” and inparticular, ”The Erased Configuration Model”. Thealgorithm’s inputs are n - number of vertices and d -average vertex degree desired. It proceeds by creatingn vertices and a standard probability distribution forthe vertex degree F with median d. It then iterates

over the list of vertices and for each one generatesd stubs (stubs are edges for now just connected tothe current vertex v). d is picked randomly basedon the probability distribution F. Then it loops overthe stubs and joins each randomly selected pair.The resulting graph may not always be simple andthere could be multiple edges between vertices. Tosolve this problem the algorithm inspects all edgesof the graph and collapses any multiple edges intoa single one. Despite the relative simplicity of this

algorithm it solves one problem and creates manymore. Having a truly random graph requires a gooduniversal graph visualization algorithm and that isyet another very broad research area which we willbe unable to properly explore in the limited time thatwe have. In addition to the time constraints we are

also restricted by a relatively small workspace (e.g.a cell phone screen) and the need for a clean andunambiguous visual representation, where all nodesand edges are clearly visible, not overlapping andof a size that is easy to select and manipulate witha finger. All of these restrictions and the fact that

the purpose of this project is algorithm visualization,not in-depth research on graph generation and visu-alization algorithms, forced us to come up with analternative semi-random graph generation algorithm,which would solve both problems (generation andvisualization) with one stroke. We begin with a

predefined matrix-like graph of 4 x 3 vertices witheach node having an undirected edge to each ofits neighbors (see Fig. 2). Each node can have thefollowing types of edges E, NE, N, NW, W, SW, S,SE, where E, W, N, S represent East, West, Northand South respectively.We then randomly pick X (X will probably = 3)nodes to be removed. When removing a node wecheck to see if there are opposing edges (e.g. Nand S, or SW and NE). If such pairs exist, theyare replaced with a single edge that spans the entiredistance between the 2 neighbors of the node that isbeing removed.

Fig. 2. Initial default graph with nodes marked for deletion

Fig. 3. Nodes removed

Finally we loop over all edges and assign them ran-dom weights from a pre-specified range. If the graphneeds to be directed, we replace each undirected edge(u,v) with a random choice of either 1 directed edge(u, v), 1 directed edge (v, u) or 2 directed edges (u,v) and (v, u) - i.e. a loop (See Fig. 4).Even though quite simple this algorithm can stillgenerate, a wide variety of graphs, sufficient for ourneeds and greatly simplifies the graph visualizationproblem, allowing us to spend more time on the userinterface and experience.

– Graph Generation Algorithm (Data Structures)Please note that since a lot of the data structures weuse are shared between modules, we will only listtheir names and for more information you can referto the comprehensive list of data structures at theend of this section.Pseudocode:

Fig. 4. Cross edges removed. Directed graph.

function generate graph(height, width)input height: the height of the base graph whichwill prune, the width of the base graph which willpruneoutput: A random graph

begingraph base = generate empty graph(height,

width)for i := 0 to height

for j := widthboolean node lives = gener-

ate random number(0, 1) > 0.5 ? true : false;if(node lives)

base[i][j].valid = true;

foreach (node1, node2) in baseboolean edge lives = gener-

ate random number(0, 1) > 0.5 ? true : false;if(edge lives)

node1.connects(node2)return base;

end

Data structures used for graph generation: Graph,Node, Edge

– Visualize Steps (Description)In order to be able to visualize (in learn mode)and verify (in test mode) steps, we store the stepsthat the selected algorithm takes during its executionand store them in an ordered list. Each step can be

comprised of 1 or more actions. Here’s an exampleof a step with multiple actions: selectEdge(u, v),relaxNode(u, v, w); During visualization we begin

by drawing the original graph. We then loop overthe list of steps, executing each one and redrawing

the graph. In addition to specifying what actions

to take in each step, actions are also described inplain English and captions of each step are displayed,wherever applicable, each time the graph is redrawn.

– Visualize Steps (Data Structures)Data structures used: Exercise, Graph, Node, Edge,SolutionStep, Action

– Verify Steps (Description)The verification process is very similar to the stepvisualization process. After the original graph isdisplayed we wait for user input. We then wait foruser input. When the user has made the same numberof actions as the number of actions we have in thecurrent step, we display a ”Confirm Step” button tothe user. The user has the choice to make changes tothe steps they have made or confirm. The total timetaken by the user to execute this step is recorded forstatistical purposes.Upon confirmation we compare the actions that theuser made in the current step, with the actions weexpect. Actions do not need to be in the same order,so for each user action we search the entire list ofactions comprising the current step.If all steps match, the user is given positive feedback(ding sound) and is allowed to continue. If the userhas made a mistake he is given negative feedback(buzzer sound) and is allowed to retry. If the usermakes 3 mistakes the correct step is executed andvisualized and the user is allowed to continue.

– Verify Steps (Data Structures)Data structures used: Exercise, Graph, Node, Edge,SolutionStep, Action, Mistake, DBHandler

– Draw Graph (Description)The graph generation algorithm provides us with alist of nodes and edges and has an inherently neatrectangular shape overall, so displaying the graph isquite trivial.We begin by first drawing the nodes. We know thescreen size and node size relative to the screen size,margins and padding, as well as the number of rowsand columns of nodes so it is easy to calculate thespacing between nodes. The edges of each node arealso labeled using geographic directions so we knowwhere each node needs to be positioned relativeto others. Once the node positions for the currentscreen size are calculated (Fig. 4), we add somerandom jitter to their positions, in order to make thegraph look more random and less rectangular. Thejitter is a small translation in a random direction.The resulting graph now looks a lot more randomand less artificial (Fig. 5).

Pseudo codeFunction draw graph(nodes[row][col], edges,width, height)

Fig. 5. Cross edges removed. Directed graph.

input: nodes[row][col], edges, screen width, screenheight

beginnode radius = min( (height - 100)/row, (width -

50)/col );for i := 0 to row,

for j := 0 to col,if(nodes[row][col] is set to show):

X = 25 + col * (node radius +node padding);

Y = 50 + row * (node radius +node padding);

draw circle(node radius, X, Y);

for each edge E,Nodes start = E.startNodes end = E.enddraw line(start.coordinates, end.coordinates)

end– Verify Steps (Data Structures)

Data structures used: Graph, Node, Edge– Display Statistics

Upon completion of the exercise we loop throughall the steps taken by the user and calculate the totalnumber of mistakes made and time taken to completethe exercise.

– Data Structures (Detailed Outline)Node (properties)∗ label∗ value∗ color∗ size∗ border thickness∗ position∗ edges (E, NE, N, NW, W, SW, S, SE, Other)

Node (functions)∗ create∗ delete∗ select∗ move∗ draw∗ set value∗ set color∗ set thickness∗ get degree∗ get neighbors∗ relaxEdge (properties)∗ start node∗ end node∗ directed∗ weight∗ color∗ thickness∗ start point∗ end pointEdge (functions)∗ create∗ remove∗ draw∗ select∗ set color∗ set weight∗ set thicknessGraph (properties)∗ nodes∗ edges∗ roots∗ solution stepsGraph (functions)∗ generate∗ draw∗ add edge∗ remove edge∗ solve (takes as input the algorithm to run)SolutionStep (properties)∗ actions (list)∗ final (boolean)∗ num tries∗ time takenSolutionStep (functions)∗ add action∗ remove action∗ compare actionsAction (properties)∗ action index (from a predefined list of actions)∗ action parameters∗ description

Action (functions)∗ compareExercise (properties)∗ original graph∗ final graph∗ algorithm∗ solution stepsExercise (functions)∗ initialize∗ generate solution steps∗ visualization next step∗ visualization previous step∗ exercise wait for input

C. Stage3 - The Implementation Stage.

Our project is an Android Mobile Application, therefore,we have used JAVA programming language and AndroidStudio integrated development environment for our project.The deliverables for this stage include the following items:

• Sample small data snippet.– Fig6 shows the sample graph which is fed to the

algorithm for finding MST. This input graph isgenerated randomly.

Fig. 6. Randomly Generated Input Graph

• Sample small output.– Fig7 shows the step by step Minimum Spanning Tree

construction using Union by Rank and FindSet withpath compression operations.

• Working code.– Working Code is submitted in a zip file.

• Demo and sample findings.– Fig8 shows the Final Output i.e. Minimum Spanning

Tree– System Memory Requirement for Application to run

is 512MB RAM– User cannot manipulate with the graph during Learn-

ing Phase. Every time the user launches the activ-ity, user is provided with the new graph which israndomly generated in its size and the associatedweights for each edge. User is provided with a

Fig. 7. Minimum Spanning Tree under construction using a forest oftrees to represent disjoint sets

Fig. 8. Output Minimum Spanning Tree

Learning Method which displays the foundation ofan algorithm such as Union and FindSet operations.

D. Stage4 - User Interface.

The developed Android application provides user with auser friendly interface to interact with the application. TheUser Interface is designed in order to provide the user witheffective ways of learning. The HOME screen of application

appears when user starts the application by pressing the appli-cation icon. The Home screen provides the user with an optionto Learn, Test, View Statistics and Exit. The activity on thebasis of user’s selection(learn, test etc.) will be launched next.The Learn activity provides a step-by-step visualization of the

steps the algorithm makes in order to produce the final output.The Test activity provides the user with a testing environment

where, using the touch screen, they can manipulate the dataand data structures in the same ways the algorithm does. Eachuser action is verified by comparing it against the step that thealgorithm would perform. Appropriate confirmation and errormessages are displayed at each step, in addition to a pop-upmessage and auditory feedback (good sound/bad sound). At

each step, in both Learn and Test activities, the user is ableto switch between Tree View (the default view; displays theforest of trees that the algorithm uses) and Graph view (showsthe MST as it is being built, using the original graph topology).

Most figures in this section will display both views. Statistics

of user attempts are stored and can be retrieved by launchingStatistics activity.

• The HOME screen of application appears when userlaunches the application and it looks like as follows:

Fig. 9. HOME Screen

• Learn Activity - Randomly Generated Input Graph (Fig.10)

Fig. 10. Initial Learn Mode Screen - Input Graph

The user is only able to press ”NEXT”, so it is veryintuitive. After the first step the user can use the ”PRE-VIOUS” button to go back and review a previous step ifthey like. They can use the ”SWITCH VIEW” button toswitch between Tree and Graph views

• Learn Activity - Make Set operation (Fig. 11)In tree view, nodes not yet in a set are displayed in thecolumn to the right, while the nodes produced by theMake Set operation are arranged horizontally, with a rankof 0 and red halo to denote that those nodes are roots The

notification box displays detailed information about thisstep. Message format: ”Create set of 1 with root node u”,

where u is the label of the node.

• Learn Activity - Select Edge operation (Fig. 12)The previously explored edges are colored in gray, un-explored edges are colored in blue, just like the nodes

Fig. 11. Making Sets

in the trees and graph and the currently selected edgenodes are colored with 2 different colors in both thelist at the bottom and in the tree/graph as well. Thismakes it easy for the user to visualize the sets/nodes weare working with at all times. The notification box also

displays information about which set is currently selected.Message format: ”Select edge (u,v)”, where u and v are

the labels of the nodes.

• Learn Activity - Union operationMessage format: ”Unite the sets that node u belongs to(tree with root x) and v (tree with root y) by making nodeu parent of node v”, where u and v are the nodes of thecurrently selected edge and x and y are the roots of thesets they belong to (can also be u and v, or just u or justv).

• Learn Activity - IncreaseRank operation This operation

increments the rank of the parent set’s root and redrawsthe graph. Message format: ”Since the root of the parent

tree (node u) has the same rank as the root of the treebeing appended (node v), we increase the rank of nodeu”, where u and v are the roots of the sets that the nodesof the currently selected edge belong to.

• Learn Activity - AddToMST operation This operation

adds an edge, that has had the Union operation performedon it, to the list of MST edges, that will be used toproduce the MST. Message format: ”Adding edge (u,v)

Fig. 12. Union operation performed. Selected edge can be seen coloredin yellow/orange

to MST”, where u and v are the labels of the nodes ofthe currently selected edge.

• Learn Activity - SkipEdge operation This operation skips

the current edge, since its nodes are already in the sameset. Message format: ”Nodes u and v belong to the same

set. Cannot unite. Skipping edge.”, where u and v are thelabels of the nodes in the currently selected edge.

• Learn Activity - Final Product (Fig. 13)The MST is complete. We can see both the final treeproduced by the union of sets as well as the actual MST.Message format: ”All edges explored. Minimum Weight

Spanning Tree complete. Weight: X. Press QUIT to goback”

• Test Activity - Randomly Generated Input GraphThe user is only able to press ”START”, so it is veryintuitive what to do.

• Test Activity - START The user has at their disposal

2 actions/buttons - GET NEXT EDGE and UNION.The user begins with the MakeSet operations and Sort-

Edges operation already completed. This is done sincethe operations are trivial and time consuming if donemanually one by one. Initially those actions were manual,however automating them greatly improved the userexperience, without having a detrimental effect on thelearning experience. The user is clearly informed of this

Fig. 13. Final product - MST complete

Fig. 14. Initial Test Mode Screen

and is prompted to begin by getting an edge from thequeue. Message format: ”NOTE: All MakeSet operations

and the SortEdges operation have already been executedautomatically, as they are trivial. Please begin by gettingan edge from the list.”

• Test Activity - GetEdge operation (Fig. 15)The ”GET NEXT EDGE” button combines 2 differentoperations - GetEdge and SkipEdge. A separate buttonfor SkipEdge was initially created, however Simplifyingby combining both of these operations under the samebutton (since they are very similar) resulted in a morefluid user experience. Getting an edge colors its nodes so

they can be easier to identify. In case of this being the

correct step there are 2 cases

Fig. 15. Test Mode - Get Edge operation

– Case 1 - The nodes on the edge belong to the sameset so the user would like to skip this edge andget the next one. Success Message format: ”STEP

CORRECT! Nodes u and v belong to the same set.Cannot unite. Skipping edge”; ”Select edge (u,v)”The user also received positive auditory feedback(ding)

– Case 2 - The nodes on the edge have already beenunited, so the user would like to get the next edge.Success Message format: ”STEP CORRECT! Select

edge (u,v)” The user also receives positive auditoryfeedback (ding)

In the case that this is the incorrect step, the user is giventhe proper feedback (See Fig. 17) Error Message format:

”Error: Wrong action selected. Try again. of errors untilstep is skipped: X” Popup message contains the sametext. It automatically disappears after a couple of seconds.The user also receives negative auditory feedback (errr)

• Test Activity - FindSet operation (implicit) This operation

is one of the major parts that are peformed by the user.They have to do a visual search and figure out for thenode in question, which set it belongs to.

• Test Activity - Union operation (Fig. 16)Pressing the UNION button prompts the user to makethe right selection. They need to select the sets that the2 nodes belong to by touching the roots of those sets.The tricky part here is the order in which the set roots

Fig. 16. Test Mode - Union operation

need to be selected, as the first selected root is to be theparent of the second. If both roots have the same rank,the order obviously doesn’t matter, however otherwise itis mandatory that the user selects the root with the higherrank first. Again in order to streamline the user experi-

ence, the Union operation in Test mode combines 3 steps- Union, IncreaseRank and AddEdgeToMST. Message

format: ”Action UNION selected. Select the roots of the2 sets that should be united” After selecting one node,

the user is provided with additional feedback: Message

format: ”You have successfully selected node (u). Pleaseselect 1 more node or press CANCEL” Upon selecting

the second node, the step is automatically verified. Andthe user is given the proper feedback: Success Message

format: ”STEP CORRECT! Unite the sets that node ubelongs to (tree with root x) and v (tree with root y)by making node u parent of node v”; ”Since the rootof the parent tree (node u) has the same rank as theroot of the tree being appended (node v), we increasethe rank of node u”; ”Adding edge (u,v) to MST” Theuser also receives positive auditory feedback (ding) If the

step is incorrect, there are 2 possible reasons: the userwas not supposed to do a Union, or they selected thewrong sets (See Fig. 17). Error Message format: ”Error:

Wrong action selected. Try again. of errors until stepis skipped: X” Popup message contains the same text.

It automatically disappears after a couple of seconds.The user also receives negative auditory feedback (errr)Error Message format: ”Error: Correct action selected but

wrong parameters provided. Try again. of errors untilstep is skipped: X” Popup message contains the sametext. It automatically disappears after a couple of seconds.The user also receives negative auditory feedback (errr)

• Test Activity - Final Product The MST is complete. We

can see both the final tree produced by the union of setsas well as the actual MST bu switching views, just likein the Learn Activity (See Fig. 13)

• Test Activity - More About Errors As mentioned above

the user is provided negative feedback in 3 ways - thenotification box (See Fig. 17), a toast message (popup)(See Fig. 18) and via auditory (an ”errr” sound).

Fig. 17. Error Messages

Fig. 18. Wrong action

After 3 wrong attempts in TEST mode, an error messageappears and user is advanced to the next step as shownin the Figure 19:

• Statistics Activity:for every TEST trial by the user is saved and displayedwhen user launches Statistics Activity from Home Screen.Statistics are shown in Figure 20:

• Future Work: There are 2 major ways in which we believe

the app can be improved:

Fig. 19. User is advancing to next step automatically

Fig. 20. User Test Trials Statistics.

– Extendability and Usability: Add more algorithmsand further improve the user experience. Currentlyin order to extend the app capabilities by adding anadditional algorithm, the programmer would need tocreate a Java class with the algorithm implementa-tion, as well as create activities for the Learn andTest modes, where they implement a button for eachpossible algorithm action. This process is not easy toautomate but it is possible to create a standardizedway of doing this (e.g. a plugin architecture), so thatalgorithms can be added without the need to code inJava.

– Global Statistics: Currently the statistics are storedin a SQLite3 database on each individual machine,so the data collected is for the users of that particulardevice only. The data can easily be stored in anonline database. This improvement would allow ateacher to easily get statistics about multiple studentsat once.

REFERENCES

[1] Roberto Tamassia, Handbook of Graph Drawing and Visualization -https://cs.brown.edu/∼rt/gdhandbook/

[2] Force-Directed Graph Drawing Approach - https://en.wikipedia.org/wiki/Force-directed graph drawing

[3] Force-Directed Graph Drawing Approach - https://www.youtube.com/watch?v=VxiKoT I P4

[4] JUNG - Java Universal Network/Graph Framework - http://jung.sourceforge.net/

[5] Flowchart Shape and What They Mean - http://www.rff.com/flowchartshapes.htm

[6] 10 Tips and Tricks for Making Flowcharts - http://www.breezetree.com/article generalflowcharting1.htm