A PROJECT REPORT

on
“SORTING VISUALIZER”

Submitted in Partial fulfillment for the award of degree of

Bachelor of Technology
(Computer Science and Engineering )

Seminar Coordinator: Submitted By:

Jeba Nega Cheltha Saksham Sharma
Assistant Professor 21ESKCS197

Department of Computer Science & Engineering

Swami Keshvanand Institute of Technology, M & G, Jaipur
Ramnagaria (Jagatpura), Jaipur-302017
November, 2023
 CERTIFICATE

Designed By: Saksham Sharma, 21ESKCS197 2

 ACKNOWLEDGEMENT

It is my pleasure to be indebted to various people, who directly or indirectly

contributed in the development of this work and who influenced my thinking,
behavior, and acts during the course of study.

I express my sincere gratitude to Prof. Dr. Mukesh Gupta HOD,(Department) for

providing me an opportunity to work in a consistent direction and providing all
necessary means to complete my presentations and report thereafter.

I would like to thank my esteemed supervisor Mrs. Jeba Nega Cheltha , Department
of Computer Science & Engineering ,Swami Keshvanand Institute of Technology,
Management and Gramothan ,Jaipur for his valuable suggestion,keen interest,constant
encouragement,incessant inspiration and continuous help throughout this work.
His/Her excellent guidance has been instrumental in making this work a success.

I express my sincere heartfelt gratitude to all the staff members of Department of

Computer Science & Engineering who helped me directly or indirectly during this
course of work.

I would also like to express my thanks to my parents for their support and blessings.
A special thank goes to all my friends for their support in completion of this work.

Saksham Sharma
21ESKCS197

Designed By: Saksham Sharma, 21ESKCS197 i

 Contents

1 INTRODUCTION 2
1.1 Problem Identification . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Project Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Intended Users . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.4 Tools and Technologies to be used . . . . . . . . . . . . . . . . . . 3

2 METHODOLOGY 4
2.1 Software Model Used . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2 Product User Interfaces . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 Product Feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4 Design and Implementation Constraints . . . . . . . . . . . . . . . 9
2.5 E-R Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.6 Use-Case Diagrams ................................................................................... 10

3 DEPENDENCIES 11
3.1 Assumptions and Dependencies ................................................................ 11
3.2 Communication Interface .......................................................................... 11
3.3 Hardware Requirements ............................................................................ 11

4 NON-FUNCTIONAL REQUIREMENTS 13
4.1 Security Requirements ............................................................................... 13
4.2 Scalability Requirements ........................................................................... 13

5 IMPLEMENTATION AND TESTING 14

5.1 Code ........................................................................................................... 14

6 CONCLUSION AND FUTURE SCOPE 20

7 REFERENCES 21

Designed By: Saksham Sharma, 21ESKCS197 ii

 Chapter 1

INTRODUCTION

1.1 Problem Identification

The Data Structure subject is an essential Computer Science subject. Sorting

algorithms are important topics in Data Structure where students are expected to learn
how various sorting algorithms work and their time complexities. Some sorting
algorithms may easily cause confusions to novice students, as they usually find it
challenging to understand and memorize these algorithms. There is a need to find a
means of technology enhanced learning to improve the learning process of students.
Game based learning is a pedagogy where students learn through game playing. This
mode of learning could effectively engage students to focus on the learning topics
more efficiently. The study uses a sorting algorithm serious game to allow students to
learn four types of sorting algorithms: Bubble sort, Selection sort, Insertion sort and
Quick sort.

1.2 Project Scope

Sorting.Visualizer is a web app for visualizing a bunch of different sorting algorithms
Like Selection Sort, Bubble Sort, Insertion Sort, Merge Sort, Quick Sort, Heap Sort
With the functionality of (Speed Control) and (Array Size Control).

1.3 Intended Users

The tool currently focuses on different sorting and path-finding algorithms and
visualizing them on a canvas where users can play around, interact, and modify both
code and data to learn and improve their understanding of the same. Also, with the
added support of an in-built IDE, our work transcends the existing algorithm teaching
methodologies. It is intended to be used as a supplement tool for teaching or as a
stand-alone application for algorithm visualization. A study with AlgoRhythm is
described, showing that there is an advantage of using this tool over traditional
methods and the interest in learning displayed by students using this tool is
significantly higher.

Designed By: Saksham Sharma, 21ESKCS197 1

Visualization of algorithms has helped bring a breakthrough in computer science
education but it is yet to make its way to schools/colleges’ lecture halls as the main
educational tool. It is not a hidden fact that the process of teaching and learning
algorithms is often complex and the difficulty level increases with every next
algorithm in the list. An algorithm visualizer can be a useful tool to help students
understand and learn such algorithms. Our work is exactly the tool that helps its users
to grasp the knowledge behind these algorithms in a fun, interactive, and self-paced
environment. This paper outlines the architecture of the resulting tool.

1.4 Tools and Technologies to be used

There are following Web technology has used for build this Educational website.

• HTML
• CSS
• JavaScript
• PHP

Designed By: Saksham Sharma, 21ESKCS197 2

 Chapter 2

METHODOLOGY

2.1 Software Model Used

Water Fall Method
This Document plays a vital role in the software development life cycle (SDLC)
as it describes the complete requirements of thee system.It is meant for use by the
developers and will be the basic during testing phase.Any changes made to the re-
quirements in the future will have to go through formal change approval process.
WATER FALL MODEL was being chosen because all requirements were known be-
forehand and the objective of our software development is the computerization/au-
tomation of an already existing working system.

The difference phase in Water Fall Model are -

• Requirement Analysis
In this phase, all requirements of the project are analyzed and document in a
specification document and a feasibility analysis is done to check if the require-
ments are valid.
• System Design
In this phase, the system design is prepared which specifies hardware and sys-
tem requirements such as data layers, programming languages, network infras-
tructure, user interfaces, etc.
Designed By: Saksham Sharma, 21ESKCS197 3
 • Implementation
As the name implies in this phase the source code is written as per require-
ments.The physical design specifications are turned into a working code.The
system is developed in small programs called units,after which these units are
integrated.
• Testing and Deployment
The code is then handed over to the testing team.Testers check the program for
all possible defects,by running test cases either manually or by automation.And
last the software is deployed into alive environment (client’s server) in order to
test its performance.

Designed By: Saksham Sharma, 21ESKCS197 4

2.2 Product User Interfaces
Following are the User Interfaces of project.
1. Start page.

2. Options

3. Array Representaion

Designed By: Saksham Sharma, 21ESKCS197 5

 4. Before Sorting.

5. After Sorting.

Designed By: Saksham Sharma, 21ESKCS197 6

 6. During Sorting.

7. Quick Sort

8. Merge Sort

Designed By: Saksham Sharma, 21ESKCS197 7

2.3 Product Feature
1. Users can learn about different sorting algorithms.
2. User can visualize how the algorithm is working in a better way.
3. Users can get information about the different stages of algorithm.
4. Users can understand algorithms in a better way.

2.4 Design and Implementation Constraints

1. Operating system constraints
• System should be compatible and will smoothly run on windows xp or
above.
2. Device Constraints
• Personal Portfolio core system and its user interface should be compatible
with Windows.

2.5 E-R Diagram

Designed By: Saksham Sharma, 21ESKCS197 8

2.6 Use-Case Diagrams

Designed By: Saksham Sharma, 21ESKCS197 9

 Chapter 3

DEPENDENCIES

3.1 Assumptions and Dependencies

One assumption about the software is that it will always be used on Windows that
have resources to run the website if the tablet/system does not have enough hardware
resources available for the website then maybe some are used where the website does
not work as intended or not even at all.
PC should have min.2Gb RAM ,Windows xp (32-bit) and dual core.
System should have Internet Access.

3.2 Communication Interface

• Client (customer) on internet will be using HTTP/HTTPS protocol.

• Client (system user) on internet will be using HTTP/HTTPS protocol.

3.3 Hardware Requirements

Client Side
Processor RAM Disk Space
Internet Ex- Intel Pentium 128 MB 100 MB
plorer - 6 III or AMD -
800 MHz

Designed By: Saksham Sharma, 21ESKCS197 10

 Server Side
Processor RAM Disk Space
RAD Intel Pentium 1 GB 3.5 GB
III or AMD -
800 MHz
DB2 - 9.5 Intel Pentium 256 MB 500
III or AMD - MB(Excluding
800 MHz Data Size)

Recommended Requirements :

Client Side
Processor RAM Disk Space
Internet Ex- All Intel or 256 MB 100 MB
plorer - 6 AMD - 1
GHz

Server Side
RAD All Intel or 2 GB 3.5 GB
AMD - 2
GHz
DB2 - 9.5 All Intel or 512 MB 500
AMD - 2 MB(Excludin g
GHz Data Size)

3.4 Software Requirements

Software used Description
Platform Any JavaScript enabled web broswer
Tools/IDE Notepad, Virtual Studio Code(VS Code)
and CodeSandBox
Technologies Used HTML,CSS,JavaScript

Designed By: Saksham Sharma, 21ESKCS197 11

 Chapter 4

NON-FUNCTIONAL REQUIREMENTS

4.1 Security Requirements

There is a need for a proper and encrypted login authentication for

head chef and admin as employee sensitive information as well as
inventory should be protected form hacking.

4.2 Scalability Requirements

Selection of serve side configuration and database software should be

done in such as manner that a large number of visitor’s order can be
booked and seats can be offered to them.

Designed By: Saksham Sharma, 21ESKCS197 12

 Chapter 5

IMPLEMENTATION AND TESTING

5.1 Code

Designed By: Saksham Sharma, 21ESKCS197 13

Designed By: Saksham Sharma, 21ESKCS197 14
Designed By: Saksham Sharma, 21ESKCS197 15
Designed By: Saksham Sharma, 21ESKCS197 16
Designed By: Saksham Sharma, 21ESKCS197 17
Designed By: Saksham Sharma, 21ESKCS197 18
 Chapter 6

CONCLUSION AND FUTURE SCOPE

Conclusion
This web-based animation tool for viewing the following sorting
algorithms functions in great part because of all the time and effort that I
invested into it. Overall, I am 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: resolving the memory difficulties.
Following this, we would implement Merge/Insertion Sort, which takes
into account the Merge Sort. Then, I would start up Quick Sort so as to
finish the job because the code is ready to be integrated. Finally, I would
make the online tool available to the public, with the feature I 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 I try to figure out how to
make the code as efficient as possible, I'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.
Scope of Sorting Visualizer
1. Get knowledge.
2. Get Yourself Known In The Community.
3. Easy learning of algorithms.
4. Better visualization.
5. Opportunity Of learning.

Designed By: Saksham Sharma, 21ESKCS197 19

 Chapter 7

REFERENCES

1. HTML form (w3school)

https://www.w3schools.com/html/
2. CSS from GeeksforGeeks
https://www.geeksforgeeks.org/css/
3. Javascript from GeeksforGeeks
https://www.geeksforgeeks.org/javascript/
4. Database from Summer Intership Training PDF
5. HTML,CSS,JAVASCRIPT(YouTube) [Login/Sign]
https://www.youtube.com/watch?v=piG91X4sV2U
6. HTML, CSS, JAVASCRIPT(YouTube) [Home Page]
https://www.youtube.com/watch?v=LO4YTml3IAQ

Designed By: Saksham Sharma, 21ESKCS197 20