A

Project Based Learning Report

On

Sorting Visualizer

Submitted in partial fulfillment of the requirements

for the award of the degree of

Bachelor of Technology
in
Computer Science and Engineering

by

Akshat Singh (2000970100011)

Amogh Mishra (2000970100014)
Abhay Garg (2000970100001)

Under the Supervision of

Prof. Dr. Vinit Kumar

Galgotias College of Engineering & Technology

Greater Noida, Uttar Pradesh
India-201306

Affiliated to

Dr. A.P.J. Abdul Kalam Technical University

Lucknow, Uttar Pradesh,
India-226031
December, 2021
 GALGOTIAS COLLEGE OF ENGINEERING & TECHNOLOGY
GREATER NOIDA, UTTAR PRADESH, INDIA- 201306.

CERTIFICATE

This is to certify that the project report entitled “SORTING VISUALIZER”

submitted by Mr. AKSHAT SINGH (2000970100011), Mr. AMOGH MISHRA
(2000970100014) and Mr. ABHAY GARG (2000970100001) to the Galgotias College of
Engineering & Technology, Greater Noida, Uttar Pradesh, affiliated to Dr. A.P.J. Abdul
Kalam Technical University Lucknow, Uttar Pradesh in partial fulfillment of Degree of
Bachelor of Technology in Computer Science and Engineering is a bonafide record of the
Project Based Learning Report carried out by them under my supervision during the odd
semester 2022-2023.

Dr. Vinit Kumar Dr. Vishnu Sharma

Professor Professor and Head
Deptt. of CSE Deptt. of CSE
GALGOTIAS COLLEGE OF ENGINEERING & TECHNOLOGY
GREATER NOIDA, UTTAR PRADESH, INDIA- 201306.

ACKNOWLEDGEMENT

We have taken efforts in this project. However, it would not have

been possible without the kind support and help of many
individuals and organizations. We would like to extend our sincere
thanks to all of them.

We are highly indebted to Dr. Vinit Kumar for his guidance and
constant supervision. Also, we are highly thankful to them for
providing necessary information regarding the project & also for
their support in completing this project.

We are extremely indebted to Dr. Vishnu Sharma, HOD,

Department of Computer Science and Engineering, GCET, for the
valuable suggestions and constant support throughout our project
tenure. We would also like to express our sincere thanks to the
faculties of Department of Computer Science and Engineering,
GCET for their support in completing this project on time.

We would also like to express gratitude towards our parents for

their kind co-operation and encouragement which helped us in
completion of this project. Our thanks and appreciations also go to
our friends in developing the project and all the people who have
willingly helped us out with their abilities.

(Akshat Singh)

(Amogh Mishra)

(Abhay Garg)
 ABSTRACT

The main goal of this project was to create a teaching support software with visualization of
the most known sorting algorithms and their variations. The application supports a graphic
visualization of selected algorithms on randomly generated or manually created array, step-
by-step execution possibility, pseudo-code and current state of variables.

This report outlines a study that tested the benefits of animated sorting algorithms for
teaching. To visualize four sorting algorithms, a web-based animation application was
constructed. A visualization of data is implemented as a bar graph, after which a data sorting
and algorithm may be applied. The resulting animation is then performed either automatically
or by the user, who then sets their own pace. This is a research on the computer science
curriculum's approach to learning algorithms. The experiment featured a presentation and a
survey, both of which asked students questions which may illustrate improvements in
algorithm comprehension. These findings and reactions are catalogued in this document and
compared to earlier investigations.

KEYWORDS: sorting algorithm; educational soft ware ; rea ct visualizer ; sel ection
sort; merge sort; bubbl e sort; insertion sort; heap so rt.
 INDEX
1. INTRODUCTION

INTROUCTION TO PROJECT
PURPOSE OF THE PROJECT
EXISTING SYSTEM DESIGN
PROPOSED SYSTEM: IMPLEMENTATION

2. SYSTEM ANALYSIS

THE MODEL OF THE SYSTEM

OUTPUT REPRESENTATION
USED TECHNOLOGIES
SYSTEM STRUCTURE OVERVIEW

3. RESEARCH METHODOLOGY

WATERFALL METHODOLOGY
AGILE METHODOLOGY
FLOW CHART OF THE APPLICATION LOGIC

4. REQUIREMENT SPECIFICATIONS

SYSTEM REQUIREMENTS
PERFORMANCE REQUIREMENTS

5. SYSTEM DESIGN

INTRODUCTION

6. SYSTEM TESTING

UNIT TESTING

7. CONCLUSION AND FUTURE SCOPE OF YOUR PROJECT TO

THIS REAL WORLD
8. REFERENCES
 CHAPTER 1
INTRODUCTION
 INTRODUCTION

Nowadays sorting algorithms are widely used in computer software. For

example, if you open file explorer on your PC, you may see files sorted in
different ways. Searching in sorted data is more efficient than in not
sorted ones. Students of computer science start learning different
algorithms in the first year of studies and sorting algorithms are among
them.

Since we faced the problems of sorting during the course of algorithm

design in the first year of our studies, there is an understanding that the
visual representation is a vital part of the studying process. During
working on the thesis it was very exciting to learn different techniques of
sorting algorithms into the depth.

The main goal of the project was to create a program which would serve
as a tool for understanding how most known sorting algorithms work.
There was an attempt to make the best possible user experience. The
demonstration software is made in a user-friendly and easy-to-use style.
To gain maximal benefit from learning you can try each sorting algorithm
on your data.

The text of the report describes principles of the most known sorting
algorithms which are demonstrated in the computer program. It might be
used as a source for learning algorithms by students. Also, the program
might be easily used as a demonstration by lecturers and tutors during
classes. Besides, there is programmer documentation and user guide to
the provided software.

Readers of this text are expected to have some programming experience

to know basic data structures such as arrays, lists, trees and understand
recursive procedures. Also, knowledge of some simple algorithms and
their implementations could be helpful. In order to understand the topic
better, knowledge of linear algebra and calculus is involved.
 PURPOSE

The main purpose of this project is to create a web application as a

visualization tool. A single-page web application built using modern
JavaScript technology that will visualize the flow and logic of various
sorting algorithms. The UI will contain options to select one of the
sorting algorithms which were implemented and several items or
elements in the data array, control buttons to start, pause, navigate to
previous or next steps along with an option for sorting speed and color
mode. The data array of the selected size will be filled in with randomly
generated unique values. The data set is represented as a vertical bar with
the height of their respective values. After the sorting is started, the
stepwise arrangement of data in ascending order based on their
value/height will be visualized in the UI.
 EXISTING SYSTEM DESIGN

The User Interface

The design and structure of the user interface components has remained
unchanged even if the underlying back-end code was refactored midway
through the construction. Each component has its own feature: The
canvas has twelve features; 10 control buttons, and a volume toggle
button. The canvas area is where the four sorting algorithms are
visualized, and that area will be the location where the sorting algorithms'
output is edited in.

The first row of four blue-bordered buttons at the bottom of the canvas
are the selectable algorithms: Selection Sort, Bubble Sort, Insertion Sort,
and Merge/Insertion Sort. This type of visualization is offered to users to
select an algorithm of their choice, and to observe how that algorithm
functions. Before launching the animation, the user will need to select an
algorithm.

The sorting algorithm must be selected before the input data type is
specified. To choose between sorting input data that is already in order or
to reverse and randomize the order, the three gray-bordered buttons on
the left of the bottom row are available.

Sorted order is the default. The sorting algorithm is picked once the input
and sorting method have been selected. Following, the “Start” button in
the next row of buttons is clicked to perform the sort from the beginning
to the end.
The user can click the yellow-orange-bordered “Step” button to watch the
algorithm step-by-step. Once the process is already underway, you can
simply stop it by pressing the “Stop” button.

In order to reduce misunderstanding in userfriendliness, We've tried to

make the interface basic and placed buttons related to one another for
easy access. The algorithm buttons are on separate tiers and have a blue
coloration associated with them. Additional buttons are arranged in a
grouped fashion, with a gray background. The "oddballs" are the
animation controls. Despite being grouped together, each controller has a
distinct color to denote the kind of animation it does.

The colors are modeled on a traffic light with green being the go signal,
red being the stop signal, and yellow being the signal to slow down (or in
this case, yellow-orange means pace yourself). Additionally, each button
also provides visual feedback to the user by changing color as the cursor
hovers over it. The volume toggle button is the final function that is
available on the Web page. The button appears to the left of a speaker
picture on the lower left-hand side of the web page.

While conducting some study on sound effects for animations, We

realized the tool could be more participatory by both hearing and seeing
the animation, rather than merely observing. To determine the sound each
bar makes, use the following rule: each bar has a sound allocated to it
based on its height. To hear four octaves on a piano, from low to high, the
bars need to be in order. With the sound enabled, each bar in the sound
animation plays a different tone from left to right when it appears.
You'll only be able to hear the full four octaves in order if the bars are out
of order. The bar's presently being played color will change to green, and
then, when the sound animation is finished, it will change back to blue.
However, because the animation is hungry with memory, the animation
may stop momentarily and then resume. This means that the sound
animation is turned off by default, but the user has the option to toggle it.
You'll get the best results if you use the sound animation with Selection
Sort.

Fig. Main Window of Application

 PROPOSED SYSTEM: IMPLEMENTATION

The use of HTML5 (Hypertext Markup Language 5), JavaScript, and

CSS combine to form this project's implementation (Cascading Style
Sheets). There is only one project file which is an HTML file and
contains the code. The only additional piece of code added to the main
HTML file is the .m4a sound files to support the sound animation
functionality (which are saved as .m4a files).

As of now, We only did extensive testing using the Mozilla Firefox

browser, and it's the browser of choice in this context. However, tests
done quickly revealed the possibility of Google Chrome and Safari
integration. This software uses both object-oriented and functional
programming paradigms in how it organizes the code.

Before the final phase of development, the design was almost completely
functional, where only three objects were used: one to control the canvas
that displayed the animation, another to represent a piece of data, or “bar”
object (blue rectangle with dynamically changing height and position),
and a final one to represent the positions that each bar moved to, or “pos”
objects. Although this incorporated several function calls, some instance
variables and Boolean values were utilized to keep track of the algorithm
picked and when to animation, but this led to a greatly integrated mass of
code that was difficult to maintain.

Several big refactorings later, the code has now taken on the form of a
Model-View-Controller Architecture. Although, because of its functional
character, it possesses a multitude of individualized functions that alter
the instance variables and Boolean values, which means it has a multitude
of functions that directly alter the View and Controller. The major
module in the HTML code between the <script> and </script> tags is
known as the global scope. Everything within the framework is able to
access the aforementioned variables and methods.

The View

There are three items on the view: the sortArea, the bar, and the position.
These objects operate within the container defined by the <script> and
</script> tags in the .html file. This function's space is sometimes
referred to as the "main" function, the first function invoked in a program.

Fig. View and explanation of the application

It is the sortArea that keeps the bars up to date using a timer, while at the
same time generating the bar graph. As a result, whenever "Step" is
invoked, the bar values are updated depending on the steps array
(discussed later). In the sortArea, after every second iteration of the timer,
the rectangles will be redrawn with varied heights that represent the new
values.

The bars change sixty times per second, so when the “Step” button is
selected, the change is instantaneous. In the sortArea, the bar object
represents each piece of data. The statement encompasses all of the
aspects of color, value, location, height, and sound. While having a
distinct array named bars for the current bars in the bar graph helps
preserve attributes such as the total number of bars (total value)
independent of other characteristics, it is simple to update any or all of the
attributes by iterating over the array as necessary.

To update the bars to a fresh data configuration, the In Order, Reverse,

and Random buttons iterate fast across the array. The bar object is related
to the pos object (which is short for position).

The region on the canvas that is updated when the SortArea event fires is
an x-y pixel coordinate grid. This item was made to make arranging the
bars a little bit simpler (1-32). Thus, if I wanted to move a bar, I would
supply merely the number of the bar's location.

In order for the bar to move, it will first determine the exact coordinates
and then go to that location. Another way to say this is to say that,
position one is defined by the two-dimensional coordinate pair (9, 135),
which is the bottom left-hand corner of the bar. As long as each bar has a
rectangular object that is associated with it, as well as a top left-hand
corner point that defines the rectangle's height, the bar must be relocated
to its right location.
 CHAPTER 2

SYSTEM ANALAYSIS
 THE MODEL

The model is made up of one item, known as the sorter. This object
houses the algorithm's code divided into methods. Start method
centralizes on an integer constant and uses it to order the algorithm's
possible algorithms. This object is directly controlled by the four sorting
algorithms shown on the user interface as "Selection Sort, Bubble Sort,
Insertion Sort, and Merge/Insertion Sort." The sort algorithm method is
invoked as the user selects a sorting technique and clicks on one of the
sort algorithm buttons.
Then, when the algorithm sorts the data, a trace is created. The steps
array, which contains all the movements in the animation, is a two
dimensional integer array that is available to methods on the web user
interface. A typical back-end code interface is implemented using the
steps array. The “Start,” “Stop,” and “Step” buttons function as
controllers for which sub-array will be displayed on the canvas, after the
computational back-end has completed the tracing.
If this loads before the user has selected "Start" or "Step", then this
represents a user action. When you click the “Step” button, the next step
on the canvas loads and animates. An animated sequence of a single bar
moving across the others is produced because the timer continually
redraws the bars. There's no “Start” button, only a “Step” button that is
set to go off on a timer. Using a two-dimensional array gives you the
option to view the sorting algorithm's stages within the View.
The process of adding an algorithm is similar to writing down the trace of
the new algorithm, which is then saved in the same location. To complete
the algorithm's walkthrough, the View will cycle through the data and
update the bars in the bar graph to show how the algorithm calculated the
steps it took. It's important to note that if the algorithm generated a
change in the position of a piece of data, the steps are merely recorded.
 Fig. View of Insertion Sorting

Let's give an example: When sorting the pieces of data using Selection
Sort, each piece of data is moved to its final and accurate location after
one step, whilst the others require numerous steps to get at their final
positions. While this sorting method appears to do the most effort
compared to other sorting methods, it finishes sorting the most slowly.
As a result, the visualization doesn't provide the correct visual impression
of the data comparisons, which is one of the most important aspects of
sorting algorithms. Two-dimensional arrays do demand more memory
than a one-dimensional array. The size of the array is based on the
number of steps that are required to sort the data.
We may assess the algorithm's space needs by examining how long it
takes. In Computer Science, using Big-Oh analysis is the standard way
for determining how long something will take. The notation consists of a
capital letter O, which represents the worst-case performance of the
algorithm in question, followed by a constraint in parentheses that
describes the worst-case performance of the algorithm.

Fig. View of Merge Sorting

 USED TECHNOLOGIES

Nowadays there are a lot of programming languages, libraries,

frameworks. On the one hand, a software developer has a wide choice.
On the other hand, here comes up a new problem to make the right choice
which should fit the best to the current task. The main programming
language of the thesis software is Java3.
To be more precise, Java Platform, Standard Edition 8. Java is a cross-
platform, object-oriented language. Its motto is "write once, run
anywhere". It means that compiled java application runs on all platforms,
that are supported by Java. Java applications are compiled to the kind of
byte code and may be running on the Java virtual machine (JVM)4
regardless of the platform. As for the visual side of the application, Java
provides a good JavaFX5 library which is enough for the purpose.
Here Java FX was used both for the user interface and algorithms
visualization. Also, Java FX provides the possibility of using Cascading
Style Sheets (CSS). The visualization software uses CSS6 for styling
some elements of the user interface. The project was created and
developed in the NetBeans IDE, although you may use other IDEs that
support importing the NetBeans projects. It was developed under the
Windows operating system and was tested with different resolutions and
on the macOS. A version control system Git7 in connection with the
GitHub was used.
 STRUCTURE OVERVIEW

Program source codes are structured into packages:

Each package contains certain classes, which are grouped by the purpose
of use. Next subsections contain some general descriptions of the classes
from packages. More detailed descriptions of the class functions are
located directly in the source codes.

A Root Package

The root package contains only one class. It is MainUI.java. This class
serves as the main class which starts the application. Although JavaFX
provides the possibility of using XML-based language for creating a user
interface, here it is not used. The MainUI class defines main user
interface elements and does the instantiating of controllers.

Constants, Data and Enum packages

All these three packages work with data and data structures, although a
bit differently. Constants package has only an eponymous class. This
class contains final static variables that are used as default values in the
program. Data package contains classes which serve as definitions for
data objects. BindingData class instance holds binding data for the
buttons from the control panel. Results class defines object that is used
for transferring results from the input dialog. Enum package contains one
definition of the enum class. Algorithm enum defines list of algorithms
that are visualized in the program. For example, a list with algorithm
names in the main window is generated from this enum.

Controllers package

The package has two Java class files: AnimationController.java and

ViewController.java. The first one is responsible for the control of
animations run. And the second one controls the graphic part of the
application: creation the right graphic representation of array nodes,
control of animation creation, pseudo code creation control. Both are used
in the main class.

NodeControllers package

NodeControllers package includes BrickNode.java,

ColorInfoManager.java, DynamicNodes.java, FixedNodes.java,
Pseudocode.java, Tree.java and VariablesInfo.java. BrickNode class
defines kind of representation of the key from the array. After
instantiating it can be styled in many ways. This is done by the different
node managers.

We shall talk about them next. Before moving on, we describe node
managers generally. These objects are responsive for creation a visual
representation from the given data.

Also, they may create some additional graphic items, e.g. buckets for the
Bucket Sort. Node managers define animations for the certain types of
nodes and define their own metric system for certain type of nodes. The
first is DynamicNodes class. DynamicNodes object manages visual nodes
whose height depends on their value. Then, there is FixedNodes class.
This node manager class defines a manager that controls nodes of fixed
size. Finally, there is Tree node manager. Tree represents manager that
creates and controls a visual binary heap and corresponding visual array.

(a) Dynamic-size nodes (b) Fixed-size nodes (c) Tree nodes

Pseudo-code class, as it is clear from the title, defines a manager that

controls the creation and animating of the pseudo-code that appears on
the information side panel. VariablesInfo, in turn, defines another
dynamic part of the information side panel, that shows current details
during the visualization process and state of some variables.
ColorInfoManager represents information about the meaning of single
colors of nodes. Usually, a description is shown for the dynamic type of
nodes which tend to change their colours.

UI package

UI or user interface package includes different additional classes that

define additional parts of the graphic user interface. There are InfoDialog
which represents dialog that shows short descriptions of individual
algorithms. InputDialog instance accepts user input data. AboutDialog
shows information about the application. Toast is a help message in
Android OS8 style.

Utilities package

The Utilities package contains different kinds of tools. ArrayUtils is a

supporting tool while working with an array. DescriptionReader is a tool
for reading algorithm description from a file. Scaling class defines a tool
that counts the scaling factor to fit different screens.

Algorithms package

And the last, but not the least significant, package called Algorithms. It
contains classes that actually do animating of the algorithms. Each class
that creates animations is supposed to extend Sorting class and implement
the AbstractAlgorithm interface. List of class definitions here
corresponds to the list of algorithms in the Algorithm enum.

Resources

Apart from the source code packages, project has a resource folder inside.
This folder contains images that are used in the program: icons, button
images. Also, it includes CSS files that are used for the styling of the
main window (style.css) and of the input dialog (dialog.css). In the
resource folder exists a subfolder that stores files with descriptions of the
algorithms. File names here correspond to the long names from the
Algorithm enum without spaces. Such name conventions help the reader
tool to find the right description.
 CHAPTER 3

RESEARCH
METHODOLOGY
This section contains a description of the research methodologies
followed during the implementation of the project. The project was
implemented with a mixture of both Waterfall and Agile methodologies
often referred to as Hybrid Development methodology. Brief descriptions
of the methodologies are given below.

WATERFALL METHODOLOGY

The waterfall model is the first modern approach to the (SDLC) software
development life cycle model. The model describes the project
development in multiple sequential phases. Each phase track progress of
the project from multiple dimensions and the result of each phase act as
input for the next phase.

The description of the sequential phases that comprise the waterfall

model are as follow:

 Requirement analysis: In the first phase of the waterfall model, all

the business requirements and logic of the system are documented.
The requirements are divided into two categories viz Functional
requirements and Non-Functional requirements. Functional
requirements define the system behavior while Non-functional
requirements define how the system should behave. These
requirements are gathered through the discussion of the end-users
and/or clients and finally validated for the possibility of the
implementation with given time and resources. The documented
requirement serves as a guideline for the next phase.
 System design: In the second phase, all the collected requirements
are taken into consideration to prepare documentation for the
 system and software design. In this phase, there are two types of
design development High-Level Design (HLD) and Low-Level
Design (LLD). HLD describes the properties of every module such
as description, name, outline, functionality, relationship,
identification of database table, and complete architecture diagram
along with technical details. And LLD is more of a description of
the functional logic of the modules, database table with the
properties like type and size, complete interface details, handling
errors, and input/output for every module.
 Implementation: In the third phase, the coding of the application
begins according to the specification of the system design. The
system is built using the chosen programming of language/s. The
tasks are divided into multiple smaller units which are assigned to
the developers. Along the way, the unit or the modules are
integrated into larger functional components of the system as
described in the previous phases. This is normally the longest-
running phase-out of all the phases in the waterfall model.
 Testing: Testing is the fourth phase of the waterfall model. Once,
the system is ready, it is deployed or hosted in a testing
environment. The testing of the system is carried out to verify
functional and non-functional requirements are met which is set by
the customer during the requirement analysis phase. During the
testing, the possible bugs and defects are tracked and reported
back to the developers, and fixed. The system is tested multiple
times and the process continues until the application is stable, bug-
free as much as possible, and covers all the business requirements.
 Deployment: In this phase, the application is deployed or
packaged for installation to the environment where the end-users
 can start using it. The system is monitored for any possible
deployment issues.
 Maintenance: After the deployment or release of the system, the
end-users will start using it. During this phase, three major
activities are performed Bug fixing, upgrade, and enhancement.
Feedbacks are taken from the end user's experience and any bugs
that are tracked will be fixed. It ensures the system is consistently
performing as per the specification.

Fig. Waterfall Model

 AGILE METHODOLOGY

Agile methodology is one of the project management methodologies, it

breaks down the development into multiple iterative cycles. Each cycle
lasts one to three weeks and involves team collaboration across multiple
dimensions of project development such as Planning, Requirement
Analysis, Design, Implementation, Testing, and Delivery continuously.
This approach allows the project to be adjusted and remodelled easily and
reaches the goal with updated requirements that fits the latest business
need.

Fig. Agile Methodology

The hybrid method which is a combination of the Waterfall method and

Agile method shown in figure 4 below was used while coding the
application. This provided benefits of both methodologies and to iterate
the logic, design, and features of the application much conveniently.

Fig. Hybrid Method

 FLOW CHART OF THE APPLICATION LOGIC

The flow chart below describes the logic of the application. It begins with
opening the application, then the user can see customizable settings in the
application UI. They can be changed, or the default setting can be used in
which case it will generate the steps of sorting for the default sorting
algorithm. To visualize the sorting process, all navigation buttons except
the “reset” button can be pressed or the “start” button for automatic
visualization. The reset button will generate the random array again. After
the visualization is complete, the process can be repeated, or the
application can be closed.

Fig. Application Flow Chart

 CHAPTER 4
REQUIREMENT SPECIFICATIONS
 SYSTEM REQUIREMENTS

Since Java is cross-platform, you may use the application within the most
popular PC operating systems where Java is supported. Here are given
minimal system requirements for several operating systems.

Requirements:

 Operating system: minimum Windows XP SP3 or Mac OS X

10.4.10 or Ubuntu 8.04
 Java: Java SE 8 with minimum update 40 (8u40) or update 51
(8u51) in case of Windows 10 operating system
 Processor: Dual-Core processor, 1.8 GHz
 Memory: 512MB of RAM (1GB recommended)
 PERFORMANCE REQUIREMENTS

Since Java applications are not native applications to the most popular
operating systems for PC9 , you need to have JDK10 or JRE11 installed
and configured. In case it is already done, it is enough to run the file of
the application with .jar extension as simple application.

Also, it is possible to use option "Open with". Here is necessary to select

the right application. For example, in the Windows operating system it is
usually "Java(TM) Platform SE binary" or javaw.exe.

Next opportunity is to run it through the command line. For Windows and
macOS it is done the same way. Type the command from below and add
the right path before the file name.

ja va −j a r So r ti ng−V i s u a l i z a t i o n . j a r

Just after running the application, the main window (Figure 12) shows up
and the application is ready to use.
 CHAPTER 5

SYSTEM DESIGN
 INTRODUCTION

HTML, CSS

HTML was introduced in 1993. It was developed by Tim Berners-Lee.

HTML is a short form for Hypertext Markup Language. A markup
language is a computer language used to create documents that are
human-readable using elements that are expressed as tags. HTML is one
of the most popular markup languages. It is used to build web documents
or web pages and describe their structure. HTML provides structure to the
webpage using its elements or tags. HTML can be written in any basic
text editor. The content of the HTML file is stored in the file with the
extension “.html” or “.htm” which is shown in figure 6 below. The
structure of a basic webpage written in HTML is shown in the figure
below. The file can be opened with a web browser that uses an HTML
interpreter to parse and display the file on the webpage. From the first
release, there have been 5 different versions of HTML. The latest one is
called HTML5.

Fig. HTML file with basic syntax and its output

CSS stands for Cascade Style Sheets. It is a tool used to add presentation
styles such as colors, layout, animations, and fonts to the web pages. It
allows the web pages to adapt to the different screen sizes across various
devices. CSS is independent of HTML thus it can also be used with any
XML-based markup language. CSS uses a selector to target the HTML
element and add styling to them. The CSS properties can be placed inside
the tag inside the tag of HTML file or it can be separated into a different
file with “.css” extension. Figure 7 below shows a basic HTML file with
CSS for styling.

Fig. Styling the webpage with CSS

JavaScript and TypeScript

JavaScript is one of the most popular scripting languages at the current

time. Though, widely popular as JavaScript, its official name is
ECMAScript. It is a lightweight, interpreted, or just-in-time (JIT)
compiled programming language. It was initially created by Brendan Eich
and first released on the year 1995. Currently, it is standardized and
maintained by ECMA International. The file extension for JavaScript is
“.js”.

TypeScript is a language built on top of JavaScript with

additional features that are initially unavailable. In general,
TypeScript is a superset of JavaScript. TypeScript provides
features such as static type checking, types, interfaces,
immutable and read-only objects, etc. TypeScript adds strictly
typed language experience to JavaScript. But JavaScript engines
cannot run TypeScript so, the code written in TypeScript is
compiled into JavaScript by tools like typescript compiler or
babel first and then it can run in a browser, Node.JS, or in any
JavaScript app.

The codes are written in a file with a “.ts” extension, any valid
JavaScript code is also TypeScript code, but TypeScript’s type
checking will point out errors that might cause possible type
mismatch and help minimize run time errors. The main aim of
TypeScript for building a JavaScript application is to avoid a
potential syntactical error that may cause runtime errors earlier
during the development phase. TypeScript also helps bring a
proper structure and documentation to the codebase and
scalability to the whole project. TypeScript is developed and
maintained by Microsoft.

Fig. JavaScript code vs TypeScript code

The above figure differentiates between the syntax of JavaScript and

TypeScript. It also includes the type checking feature of TypeScript.
 CHAPTER 6

SYSTEM TESTING
 UNIT TESTING

In order to perform an experiment to evaluate my animation tool, we

recruited coworkers to act as test subjects and survey respondents. To that
end, the plan was to expose her Computer Science Data Structures class
to the tool and get them to take part in a survey comprising questions that
gave the students the ability to write down what they observed and learnt,
even if it was little. Despite the class size being of twenty-one students,
only thirteen were present; fortunately, all of the students who had
completed the survey were there. The set-up here was ideal since it
addressed the audience for whom we were designing this course: a group
of college students who were taking their first course in computer science
and who needed assistance with algorithms.

Results

Start by arranging the data, and then pick the visualization algorithm to
use. Algorithm buttons provide sorting of data as it arrives on the
interface. Asking to specify the ordering of elements takes precedence
because when the algorithm has completed running the initialization
process, the interface is now showing a new ordering, while the code has
already completed running the initialization with the prior data set. There
was considerable confusion caused by the way the ordering buttons and
algorithm buttons were shown in the UI after the surveys were completed.

When beginning the sorting process, the student noted that she was
having problems starting because she believed that she was hitting the
buttons in the wrong order. This then led to her failing to execute the
animation.
Overall, our animation tool did not aid with the understanding of sorting
algorithms. Among those who answered question 3, which questioned if
their knowledge of a particular algorithm changed after using the tool, 5
of the 13 students (38%) stated that they had in some way altered their
previous knowledge of the algorithm. Many thought the tool was a good
concept, while the other 7 did not find it useful at all. It was said that one
student stated a false positive about the instrument (whom I did not
include in the 5 that said it was helpful).

Fig. View after the array is sorted

A shortcoming of the animation is that it does not provide comparisons of

the data's motions that result in such movements. Selection Sort's
performance advantage over the other sorting algorithms is due to the fact
that there are O(n) swaps, which eliminates superfluous computer
movements. Comparing the data produces a runtime complexity of O(n
squared) (the slowest overall).

Feedback

Testing the algorithm's memory needs leads to endless stalemates and

crashes. Students were notified of this issue before to the test, and three
students responded to the question concerning it. After seeing the 3.9
average rating on question 4, in which the students were asked to evaluate
the usefulness of the tool, we were still amazed. Also, to my amazement,
we found features that we'd rejected when we first thought of them,
which we have listed below:

 Ability to modify the animation's pace.

 Using visual feedback while clicking the buttons on the user
interface to keep them selected.
 By creating a box-like split for Merge Sort, you'll be able to more
clearly identify the split phases.
 Colours should be used to show whether or not anything is being
compared.
 CONCLUSION AND FUTURE WORK

This web-based animation tool for viewing the following sorting

algorithms functions in great part because of all the time and effort that
we invested into it. In spite of its memory overhead, the feedback given
to it was mostly good from the students that worked with it.

This is consistent with our prior research, which revealed that there was
no substantial difference in learning the content. What we do agree with
totally is the attitude that holds there is a great need to investigate and
produce animated presentations to enhance education in the classroom.
Overall, we are not concerned that a large rework to a different language
will be required soon because JavaScript is still one of the most popular
web languages.

We all know about my laundry list of upcoming projects, but there is one
elephant in the room that still has to be addressed: resolving the memory
difficulties. Following this, we would implement Merge/Insertion Sort,
which takes into account the Merge Sort. Then, we would start up Quick
Sort so as to finish the job because the code is ready to be integrated.
Finally, we would make the online tool available to the public, with the
feature we want most, which is to make it available to the public.

This might be tough as well. The application that created the animation
tool knows that it's available locally, but because of concurrency, it can
serve numerous requests to the web site by separate users. As we try to
figure out how to make the code as efficient as possible, we'd need to
spend some time thinking about how to make it work with numerous
people using it. This would be excellent, as it would enable a form of
comparison study.
 REFERENCES

For the successful completion of this project, we referred to multiple

sources for gathering information and data.

These sources include various research papers, related internet sites and
books.

These can be summarized as-

[1] CORMEN, T. H.; LEISERSON, C. E.; RIVEST, D. L.; STEIN, C.

Introduction to algorithms. Second Edition. 2001. ISBN 0-262-03293-7.

[2] KNUTH, D. The Art of Computer Programming: Fundamental

Algorithms. Third Edition. 2004. ISBN 0-201-89683-4.

[3] SIPSER, M. Introduction to the Theory of Computation. Boston, MA:

PWS Publishing Company, 1997. ISBN 0-534-94728-X.

[4] KNUTH, D. The Art of Computer Programming: Sorting and

Searching. Second Edition. 2004. ISBN 0-201-89685-0.

[5] SEDGEWIK, R. Algorithms in C : Fundamentals, data structures,

sorting, searching. Third Edition. 2007. ISBN 0-201-31452-5.

[6] GeeksforGeeks. Available from: hhttps://www.geeksforgeeks.org/i

[7] Stackoverflow. Available from: hhttps://stackoverflow.com/i.

[8] Java documentation. Available from:

hhttps://docs.oracle.com/javase/8/i.