## E-learning Tool for Visualization of Shortest Paths Algorithms

*Trends Journal of Sciences Research*, Volume 2, Issue 3, 2018, Pages 84–89.

https://doi.org/10.31586/InformationProcesses.0203.01

Received May 26, 2015; Revised July 07, 2015; Accepted September 25, 2015;

Published September 30, 2015

### Abstract

Visualizations of algorithms contribute to improving computer science education. The process of teaching and learning of algorithms is often complex and hard to understand problem. Visualization is a useful technique for learning in any computer science course. In this paper an e-learning tool for shortest paths algorithms visualization is described. The developed e-learning tool allows creating, editing and saving graph structure and visualizes the algorithm steps execution. It is intended to be used as a supplement to face-to-face instruction or as a stand-alone application. The conceptual applicability of the described e-learning tool is illustrated by implementation of Dijkstra algorithm. The preliminary test results provide evidence of the usability of the e-learning tool and its potential to support students’ development of efficient mental models regarding shortest paths algorithms. This e- learning tool is intended to integrate different algorithms for shortest path determination.

### Introduction

The modern information and communication technologies provide means for easily presentation of information in a dynamic form that corresponds to the user preferences. It is recognized as potential for developing of e-learning tools visualizing many topics of mathematics and computer science, and in particular of different algorithms to aid their explanations and understanding. The usability of the e-learning tools is one of the main requirements for successful application of e- learning systems^{ 1}. It is pointed out that such systems should be interactive and provide feedback, should be directed to specific goals and to motivate without allowing any factor of nuisance that interrupts the training stream.

An important field of mathematical theory is the mathematical study of the structure of abstract relationships between objects by means of graphs (networks). Although investigating of these constructions can be purely theoretical, they can be used to model pair- wise relationships in many real world systems. One of most widely using applications is determination of shortest paths in many practical applications as: maps; robot navigation; texture mapping; typesetting in TeX; urban traffic planning; optimal pipelining of VLSI chips; subroutines in advanced algorithms; telemarketer operator scheduling; routing of telecommunications messages; approximating piecewise linear functions; network routing protocols (OSPF, BGP, RIP); exploiting arbitrage opportunities in currency exchange; optimal truck routing through given traffic congestion pattern ^{ 2}.

Visual aids are widely recognized as amplifiers of the learning capabilities of students facilitating the processing of complex information ^{ 3}. Various algorithms can be illustrated through static visualization but trend in computer science education is to make the learning process more individualized and interactive. Visualizations through interactive algorithms give the students more autonomy in their learning process. Many researchers have attempted to design and develop individualized learning environments based on learning styles ^{ 4, 5}.

Explaining difficult pieces of algorithms code is a challenge in mathematical and computer education. Providing a view of the algorithms inner working details by visualization of algorithm steps aims at making it more understandable ^{ 6, 7}. Visualizations of work of nets are an effective pedagogical approach. The first significant attempt to assess the pedagogical effects of algorithm visualization was conducted by Hundhausen ^{ 8}.

Good algorithm visualization brings algorithms to life by graphically representing their various states and animating the transitions between those states. They illustrate data structures in natural, abstract ways instead of focusing on memory addresses and function calls ^{ 9}. Simulated visualizations of algorithms have become a popular and effective learning tool and visualization tools are therefore an attractive learning essential for instructors and students alike ^{ 10}. Algorithm visualization construction and presentation appear not only to focus students on relevant activities and concepts, but also to enable them to participate more extensively the course, thus contributing to their learning ^{ 8}. On the other side, although breaking down the exemplified algorithms into individual steps suits for understanding of their inner workings and is good from a didactic and interactivity point of view there is a drawback. This approach can differ significantly from the "standard" one, potentially resulting in increased complexity and is not to be used for teaching the actual implementation of the algorithms ^{ 11}.

Technology-enhanced learning area, systems and technology appeared that allow the creation of learning environments by mashing up such small applications ^{ 12}.

A user requirements study revealed that personal learning environments are not seen as persistent environments, but they should evolve according to the learner’s objectives and achievements ^{ 13}. Unlike traditional learning management systems where content and tools are predefined for the learner, personal learning environments are based on soft context boundaries with resources and tools being added at run time ^{ 14}. Replacing face-to-face lectures with online activities has the potential to improve learning in terms of a better student performance, higher student satisfaction, and a higher degree of flexibility for the students ^{ 15, 16}.

In the current paper an e-learning tool for shortest paths algorithms visualization is described. It allows the teachers and student to interact with algorithm work in active way, providing corresponding feedback results. The described e-learning tool is intended to create, visualize and edit different graphs structures and to visualize the shortest paths algorithms execution step by step.

### Dijkstra Shortest Path Algorithm

One of the key problems in systems modeling by means of graphs is the determination of shortest paths between given nodes on a graph. It is one of the most important basic problems in operations research. It is known that essentially any combinatorial optimization problem can be formulated as a shortest path problem. That is why the class of shortest paths problems can be used to model numerous practical problems that are not really shortest path problems. In many practical applications the computation of the shortest path has to be done in real time. There are a number of shortest path algorithms but there is no clear answer as to which algorithm is the best. Many considerable empirical studies on the performance of shortest path algorithms have been reported in the literature ^{ 2, 17, 18, 19, 20, 21, 22, 23}.

There are two basic types of shortest path problems:

those which find minimum paths from a given vertex and those which allow the determination of minimum paths between every vertex pair in the graph ^{ 24}. The shortest path problems exists both in directed and undirected graphs. Dijkstra’s algorithm solves the single-source shortest path problem while the Bellman-Ford algorithm solves the single-source problem if edge weights may be negative ^{ 25}. Floyd-Warshall algorithm solves all pairs shortest paths, Johnson’s algorithm solves all pairs shortest paths too, and may be faster than Floyd-Warshall on sparse graphs. Viterbi algorithm solves the shortest stochastic path problem with an additional probabilistic weight on each node ^{ 23}.

Nevertheless of results of similar studies the practice shows that the most widely studied and used is the original Dijkstra algorithm. This algorithm is often used in routing and as a subroutine in other graph algorithms. For a given source vertex (node) in the graph, the Dijkstra’s algorithm finds the path with lowest cost (i.e. the shortest path) between that vertex and every other vertex. It can also be used for finding costs of shortest paths from a single vertex to a single destination vertex by stopping the algorithm once the shortest path to the destination vertex has been determined. For example, let the starting node is

X and the distance of node Y is the distance from the starting node X to Y. Dijkstra’s algorithm assign some initial distance values and will try to improve them step by step as follows:

1)→ Assign for every node a tentative distance value. The value for initial node is set to zero and infinity for all other nodes.

2)→ Mark all nodes unvisited and set the initial node as current. Create a set of the unvisited nodes called the unvisited set consisting of all the nodes.

3)→ For the current node, consider all of its unvisited neighbors and calculate their tentative distances. Compare the newly calculated tentative distance to the current assigned value and assign the smaller one.

4)→ If all of the neighbors of the current node are considered, the current node is mark as visited and is remove from the unvisited set. A visited node will never be checked again.

5)→ In case when the destination node has been marked or if the smallest tentative distance among the nodes in the unvisited set is infinity, then stop, i.e. the algorithm has finished.

6)→ Choice of unvisited node with the smallest tentative distance, and set it as the new "current node" then go back to step 3.

In resume, shortest path algorithms have many practical applications to automatically find directions between physical locations, such as driving directions, urban traffic planning, network routing protocols, subroutine in advanced algorithms, etc. This is why the proposed tool for shortest paths visualization is a subject of e-learning for many students and practitioners.

### Basic Architecture of the Shortest Path E-learning Tool

As is the case with most other teaching areas, there has been a significant gap between the theory and practical understanding of algorithms realization. This is true also for shortest paths algorithms and in particular for Dijkstra algorithm. The main goal of the e-learning tool is to use it from operations research educators and students for teaching and studying the existing known combinatorial graph algorithms. Starting with Dijkstra algorithm other shortest paths algorithms will be implemented gradually as the system evolves.

The main idea of the system is to provide an integrated educational environment for both instructors and students to facilitate the learning process in efficient way. The graph e-learning tool is developed as a Java application composed by three main architecture modules as shown in Figure 1.

The main module is composed of several functions intended for: loading a data file, saving as data file, export as image file and exit of system. By load function a data file in proper format that contains graph structure data of a previously created by the system graph is loaded. The save function allows the entered data (created graph) to be saved in proper data format.

The export function supports the *pn**g** *file-format to export the graph structure as image. The exit function terminates the current session and quits the system.

There are two options to support the auxiliary module – option for visualization and help. In the current e-learning tool version, this option consists of one function for changing the text font of the entered text and help text composed of useful information for using the tool.

The algorithm module contains the needed function for entering, editing, visualizing and solving of the graph shortest path problem. Edit menu option has several functions for editing and corrections of entered data. Function undo reverts back the last operation repeatedly until that action makes sense. By choosing function node a node can be inserted with automatically numbering it. Function unidirectional edge allows inserting unidirectional edge with automatically positioning the edge on the line connecting both nodes centers with automatically drawing of the ending arrow at the ending node. Bidirectional edge function is the same as for unidirectional edge with the difference that ending arrows are not drawn. That kind of edges are considered as passed in both directions with equal cost in both directions. When a bidirectional edge with different costs in different directions is needed it is created by inserting two unidirectional edges with same starting and ending node. Selection of function box allows drawing a box with mouse dragging, mainly for some visual aesthetic purposes. Function text can be used to enter some explanatory text within visualization pane. Through function select some graph elements can be selected for subsequent deleting (cutting). That operation is dependable of the graph structure specifics. By function cut selected allows to cut the selected graph elements. All of these functions should influence on the text pane with graph data accordingly the current graph structure.

### GUI Design and Implementation

In education it is important to develop simple graphical user interface and to use visual components that will assist students in gaining an understanding of basic algorithmic concepts and ideas. Other important feature is to enable students to test and “try out” different types of graphs modifications and constructions.

The developed GUI main screen is divided into following areas: 1) graphical area for visual processing of the graph; 2) text pane for numerical displaying of the graph structure; 3) status bar for operations and results; 4) menu and buttons toolbars as marked on Figure 2.

Visualizing graphs is not trivial and involves several theoretical and practical problems. The user-friendly interface allows easily creating and manipulating the graph elements. Vertices, edges, edges costs, source and destination vertices can be chosen, moved, deleted or inserted. Once the graph is created, each modification in the graph structure is updated on the screen and data are modified correspondingly. The created in such way graphs can be saved in format of data files for subsequent processing or as pictures in *pn**g** *format for illustration purposes. The graph data are saved in system own data format with filename extension “.*g**r**ph*”. This allows saving and using different graph structures in process of teaching to visualize the algorithm performance.

Let us consider an example of directed graph (with one- directional and bi-directional edges) shown in Figure 2 where the shortest directed path from node 0 to node 7 should be found. It is used to visualize the Dijkstra algorithm operation. The main characteristic of the algorithm is partitioning of all nodes into two sets: temporarily and permanently labeled nodes. On each iteration, when the next node is to be scanned the algorithm selects a temporarily labeled node with the minimum distance label. Once a node is scanned, it becomes permanently labeled. The Dijkstra algorithm terminates when all nodes become permanently labeled. The shortest path algorithm execution step by step is graphically visualized as shown by sequence of screens in Figure 3.

The *d**ij**k**str**a**()** *function takes a source vertex and fills in the distance array with shortest path distances from starting node. First, all distances are initialized to infinity, except for starting node distance, which is set to 0, i.e. node *0** *is designated as the current node, the state of node *0** *is (*0**,** **p*) and every other node has state *(**∞**,** **t*). Then it is added to the queue and the first vertex is removed and all of its neighbors are scanned. The new distance to neighbors is computed and if it's better than the current known distance it is updated. In such way for each given graph Dijkstra's algorithm discovers the shortest path is a directed graph. The algorithm characterizes each node by its state. The state of a node consists of two features: distance value and status label. Distance value of a node is a scalar representing an estimate of the its distance from node *s*. Status label is an attribute specifying whether the distance value of a node is equal to the shortest distance to node *s** *or not. The status label of a node is permanent if its distance value is equal to the shortest distance from nodes. Otherwise, the status label of a node is temporary. The algorithm maintains and step-by-step updates the states of the nodes. At each step one node is designated as current.

The main idea of the proposed e-learning tool is that once an algorithm is ready, it can be run in many ways like step-by-step or breakpoint mode, so that the user has control over what he has to see to understand algorithm action. Using an interactive animation allows the student to change the input, and step forward and backward through the animation that allows for better understanding.

In contrast to Sanchez-Torrubia^{ 26} the developed tool can be used in exercises in computer science to support not feedback to the program code, but by visualizing algorithm action. This approach helps the students themselves in an easy way to get active in order to generate visualizations for their exercise solutions. The practice shows that students are motivated and quite capable in using those types of simple and intuitive visualizing tools and consequently get benefit from using them. This corresponds to one of the primary concerns in on-line educational environments, i.e. to be the effective and to support the learning courseware material acceptance. The described tool is designed by means of Java technology and is oriented to help students on learning different shortest path algorithms topics. Programming in Java was chosen because Java is a cross- platform language and could be run on many platforms without changing the code.

The e-learning tool can be used for creating and editing of any kind of directed or undirected graphs up to 999 vertices and with unlimited number of connecting edges with costs (distances or weights). The limitation of number of vertices was chosen because of limitations of the size of computer screen and taking into account the size of most practical problems. That limitation is not restrictive one and the system could be modified to any practical need if such exists.

### Learning Effectiveness Results

The developed prototype of e-learning tool for visualization of shortest paths algorithms provides visualization of Dijkstra's algorithm. This type of e- learning tool is used both for demonstrating algorithms theory ideas and as tool allowing the students to explore theory on their own as well for solving different shortest paths problems. This ability contributes the students to gain a mental model and intuition for advanced algorithms theory concepts. Construction and presentation exercises for algorithms visualization are challenging for the students to participate in more expert ways than usual in the practices of the course they involved.

The experimental results demonstrated that the implementation of the proposed approach is quite helpful and facilitate the users’ understanding using such e- learning application. The testing showed the practical applicability of the described e-learning tool for visualization of shortest paths algorithms. The simple and intuitive GUI was very well accepted by the students and teachers. The proposed e-learning application allows to facilitate and to personalize individual knowledge and learning preferences for each particular user. It can run the algorithm performance as many times as needed and can stop it on each step. The test of the e-learning application was conducted with students divided into two groups: with using of the developed e-learning application and without using any tools for algorithms visualizations. The final result showed significant improvement of the first group results compared to the second one.

It is observed that benefits of visualization of algorithms in virtual environment can be used as different learning conceptions. Visualization of algorithms can be interpreted as a new technology that suits final learning objectives. Visualization helps to construct knowledge and to organize the perceived information. Learning the algorithms using appropriate learning tools could be conceived of as new capability in continuous improvement of attainment of learning goals.

### Conclusion

The developed software system could be used also from researchers for fast visual creating of graphs and networks and for solving of implemented combinatorial graph problems. In education it is important to develop simple graphical user interface and to use visual components that will assist students in gaining an understanding of basic algorithmic concepts and ideas. Other important feature is to enable students to test and “try out” different types of graphs modifications and constructions.

Graphs and graph algorithms play an important role in computer science engineering education. Algorithmic way of thinking together with programming skills plays a central role in computing education. It means that students typically need to become familiar with a great number of different algorithms and data structures. Following this goal, the preliminary results of developing a prototype for visualization of shortest path algorithms are described in the paper. The described e-learning tool prototype is intended to support both of teachers and students. The implemented techniques for drawing over different graph layouts have been well received by teachers and students. Different shortest path problems can be formulated and explored as future extensions. The prototype developed for testing purposes implements Dijkstra algorithm as a widely used shortest path algorithm. The described e- learning tool can be used as a supplement to face-to-face instruction or as a stand-alone tool. The results of early testing of this software are promising.

### Acknowledgment

The research work reported in the paper is partly supported by the project AComIn “Advanced Computing for Innovation”, grant 316087, funded by the FP7 Capacity Programme (Research Potential of Convergence Regions) and by the project “Innovative optimization methods for decision-making”.

### References

*Ne*

*tw*

*o*

*r*

*k Fl*

*o*

*w*

*s*

*:*

*T*

*h*

*e*

*o*

*r*

*y,*

*A*

*l*

*g*

*o*

*r*

*i*

*t*

*h*

*m*

*s*

*an*

*d*

*A*

*pp*

*li*

*ca*

*t*

*i*

*on*

*s*

*.*

*Englewood Cliffs, NJ: Prentice Hall.*

*E*

*d*

*u*

*c*

*a*

*t*

*i*

*on*

*a*

*l*

*T*

*ec*

*hn*

*o*

*lo*

*g*

*y*

*&*

*So*

*c*

*i*

*e*

*t*

*y*,

**1**

**4**

**(3), 55-68.**

*E*

*x*

*p*

*e*

*r*

*t*

*S*

*y*

*s*

*t*

*e*

*m*

*s*

*w*

*i*

*th*

*A*

*pp*

*li*

*ca*

*t*

*io*

*n*

*s*,

**3**

**9**(15)

*,*

*12092-12104.*

*E*

*x*

*p*

*e*

*r*

*t*

*S*

*y*

*s*

*t*

*e*

*m*

*s*

*w*

*i*

*t*

*h*

*A*

*p*

*p*

*l*

*i*

*c*

*a*

*t*

*i*

*o*

*n*

*s*,

**39**(12), 11172-11182.

*El*

*e*

*ct*

*r*

*o*

*n*

*ic*

*N*

*o*

*tes in*

*T*

*h*

*e*

*o*

*r*

*e*

*t*

*i*

*c*

*a*

*l*

*C*

*o*

*m*

*p*

*u*

*t*

*er*

*S*

*c*

*i*

*e*

*n*

*c*

*e*,

**1**

**7**

**8**(4), pp. 79-87.

*El*

*e*

*ct*

*r*

*o*

*n*

*ic*

*N*

*o*

*t*

*es*

*in*

*T*

*h*

*e*

*o*

*r*

*e*

*t*

*i*

*c*

*a*

*l*

*C*

*o*

*m*

*p*

*u*

*t*

*er*

*S*

*c*

*ie*

*n*

*c*

*e*,

**2**

**2**

**4**, 97-103.

*J*

*o*

*u*

*r*

*n*

*a*

*l*

*o*

*f*

*V*

*i*

*s*

*u*

*a*

*l*

*L*

*a*

*ng*

*u*

*a*

*g*

*es*

*an*

*d*

*C*

*o*

*m*

*p*

*u*

*t*

*in*

*g*,

**1**

**3**(3), 259-290.

*C*

*o*

*m*

*p*

*u*

*t*

*e*

*r*

*s*

*in*

*t*

*h*

*e*

*S*

*c*

*h*

*oo*

*l*

*s*,

**2**

**9**(1-2

*)*

*,*

*95-117.*

*P*

*r*

*o*

*c*

*.*

*o*

*f*

*I*

*EE*

*E*, DOI: 10.1109/SECON.2013.6567453.

*I*

*A*

*S*

*T*

*ED*

*C*

*o*

*n*

*f*

*.*

*o*

*n*

*E*

*d*

*u*

*c*

*a*

*t*

*i*

*o*

*n*

*a*

*n*

*d*

*T*

*e*

*c*

*h*

*n*

*o*

*lo*

*g*

*y*

*(I*

*CET*

*20*

*05*

*)*, Calgary, Alberta, Canada, 2-6 July 2005, pp. 28- 33.

*C*

*o*

*m*

*p*

*u*

*ter*

*S*

*c*

*i*

*e*

*n*

*ce*

*a*

*n*

*d*

*I*

*n*

*f*

*o*

*r*

*m*

*a*

*ti*

*o*

*n*

*Sy*

*s*

*te*

*ms*,

**1**

**1**(1), 321-342.

*I*

*EEE*

*E*

*DU*

*C*

*O*

*N*

*2*

*0*

*1*

*0*

*C*

*o*

*n*

*fe*

*r*

*e*

*n*

*c*

*e*. pp. 897- 906.

*Jo*

*u*

*r*

*n*

*a*

*l*

*o*

*f*

*e*

*-L*

*e*

*a*

*r*

*n*

*in*

*g*

*a*

*n*

*d*

*K*

*n*

*o*

*w*

*l*

*e*

*d*

*g*

*e*

*S*

*o*

*c*

*i*

*e*

*t*

*y*,

**3**(2), pp. 27-28.

*E*

*u*

*r*

*o*

*p*

*e*

*a*

*n*

*J*

*ou*

*r*

*n*

*a*

*l*

*o*

*f*

*O*

*p*

*en*

*,*

*D*

*i*

*s*

*t*

*a*

*n*

*c*

*e*

*a*

*n*

*d*

*e*

*-L*

*e*

*a*

*r*

*n*

*i*

*n*

*g*,

**17**(2), 142-158.

*I*

*n*

*te*

*r*

*n*

*a*

*t*

*i*

*on*

*a*

*l*

*Co*

*n*

*f*

*e*

*r*

*e*

*n*

*ce*

*"*

*A*

*u*

*t*

*o*

*m*

*a*

*t*

*ics*

*an*

*d*

*I*

*n*

*f*

*o*

*rm*

*a*

*t*

*i*

*c*

*s'*

*2*

*0*

*1*

*3*", 2013, pp. I-117-I-120.

*N*

*u*

*m*

*e*

*r*

*i*

*c*

*h*

*e*

*M*

*a*

*t*

*h*

*e*

*m*

*a*

*t*

*i*

*k*,

**1**, 269-271.

*Ne*

*t*

*w*

*o*

*r*

*ks*,

**9**(3), 215- 248.

*O*

*p*

*e*

*r*

*a*

*t*

*io*

*n*

*s Re*

*s*

*e*

*a*

*r*

*c*

*h*,

*3*

*3*

*(*

*1*

*)*

*,*

*(pp. 65-73).*

*A*

*n*

*n*

*a*

*ls*

*o*

*f*

*O*

*p*

*e*

*r*

*a*

*t*

*io*

*n*

*s*

*R*

*e*

*s*

*e*

*a*

*r*

*c*

*h*,

**1**

**3**(1), 73-79.

*C*

*o*

*m*

*p*

*u*

*t*

*e*

*r*

*s*

*&*

*O*

*p*

*e*

*r*

*a*

*t*

*io*

*n*

*s Re*

*s*

*e*

*a*

*r*

*c*

*h*,

**1**

**5**(6

*)*

*,*

*567-576.*

*C*

*o*

*m*

*p*

*u*

*te*

*r*

*s*

*&*

*O*

*p*

*e*

*r*

*a*

*t*

*i*

*o*

*n*

*s*

*Re*

*s*

*e*

*a*

*r*

*c*

*h*,

**1**

**8**(8), 767-786.

*M*

*a*

*t*

*h*

*e*

*m*

*a*

*t*

*i*

*c*

*a*

*l*

*P*

*r*

*o*

*g*

*r*

*a*

*m*

*m*

*i*

*n*

*g*,

*S*

*e*

*r*

*.*

**A**

**7**

**3**(2), 129-174.

*C*

*L*

*EI E*

*l*

*e*

*c*

*t*

*r*

*on*

*ic*

*J*

*o*

*u*

*r*

*n*

*a*

*l*,

**1**

**2**(1), paper 2.

*A*

*p*

*p*

*l*

*i*

*e*

*d*

*M*

*at*

*h*

*e*

*m*

*a*

*t*

*i*

*cs*

*L*

*e*

*t*

*te*

*r*,

**6**(3), 3-6.