BHARATI VIDYAPEETH (DEEMED TO BE UNIVERSITY)

COLLEGE OF
ENGINEERING

DEPARTMENT OF ENGINEERING & TECHNOLOGY OFF

CAMPUS, KHARGHAR, NAVI MUMBAI,410210

Mini Project Report

On
Title
Subject-: - Subject Name
Presented By

Roll No. Name PRN

02 Omkar Garate 2043110164
41 Aditya Mahamunkar 2043110209
57 Sakshi Kharatmol 2043110211
58 Trupti Kure 2143110212
Signature of Internal Examiner Signature of External Examiner
 BHARATI VIDYAPEETH (DEEMED TO BE UNIVERSITY)
COLLEGE OF ENGINEERING

DEPARTMENT OF ENGINEERING & TECHNOLOGY OFFCAMPUS,

KHARGHAR, NAVI MUMBAI,410210

CERTIFICATE
This is to certify that the requirements for the project report entitled ‘TITLE’ have been successfully
completed by the following students:

Name PRN No.

Rahul Durvas B804
Panav Patel B826
Srushti Raut B836
Sohan Vichare B852

in partial fulfillment of B.Tech in the Department of CSBS, BVDU DET, during the Academic Year
2023 – 2024.

Subject In charge
 BHARATI VIDYAPEETH (DEEMED TO BE UNIVERSITY)

DEPARTMENT OF ENGINEERING & TECHNOLOGY

OFFCAMPUS, KHARGHAR, NAVI MUMBAI,410210

DECLARATION

We declare that this written submission for B.TECH project entitled “TITLE” represent our ideas in our own words and
where others' ideas or words have been included, we have adequately cited and referenced the original sources. We also
declare that we have adhered to all principles of academic honesty and integrity and have not misrepresented or fabricated
or falsified any ideas / data / fact / source in our submission. We understand that any violation of the above will cause for
disciplinary action by institute and also evoke penal action from the sources which have not been properly cited or from
whom prior permission have not been taken when needed.

Project Group Members Signature

Rahul Durvas: __________

Panav Patel: __________
Srushti Raut: __________
Sohan Vichare: __________
 Abstract

This paper 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.
 Index

Chapter No. Title Page No.

1 Introduction 7

2 Literature Survey 8

3 System Design 12

4 Implementation 14

5 Result 15

6 Conclusion 16

7 References 17
Chapter 1

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 I faced the problems of sorting during the course of
algorithm design in the first year of my 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 thesis 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 thesis 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.
Chapter 2

Literature Survey

S. Reference Methods Advantages Limitation Results Remark

No s s
.
1 SORTING Sorting This NULL It can serve
ALGORITHM Algorithms, technique is numerous
VISUALIZER React quite simple requests to
Visualizer, to explain to the web site
someone in by separate
conversation users.
, but more
advanced
sorting
algorithms
2 Visualization of Visualization Visualizatio The purpose
sorting system n of sorting of our
algorithms algorithms research was
(ViSA) to develop an
offers a full educational
range of tool that
functionaliti would
es such as engage
data set students in
entry and the learning
animation process,
control helping them
to acquire
knowledge
about well-
known
sorting
algorithms.
3 Algorithm Dijkstra speed of Our work
Visualizer: Its algoritm,sorti learning can serve out
features and ng algorithms according to to be a great
working their teaching aid.
comfort and
level of
expertise.
4 Realizing Agile Visualizer is One can
Algorithms Methology an manage the
 Using GUI interactive dimensions
on-line of array and
platform that speed of the
presents sorting the
graphical elements.
view of
algorithms
from code
[2]
5 ALGORITHM Interface and To improve customize
VISUALIZATIO functionality, understandin the data as
N - MODERN User interface g of DSA, well as add
WEB-BASED animation more sorting
VISUALIZATIO and and
N OF SORTING graphical searching
AND representatio algorithms to
SEARCHING n techniques enhance the
ALGORITHMS have software
evolved and reliability.
are often
used to
understand
the step-by-
step
workflow of
algorithms.
6 Conflictive Algorithm Algorithm The We propose
animations as Animation, animation educative that
engaging Program tools such as effect of visualizers
learning tools Visualization, ANIMAL intentional consider the
(R¨oßling & errors in possibility of
Freisleben instruction creating
2002) is not well conflictive
provide the researched, animations
tools for and could and
visualizers produce an uploading
to create adverse them to
animations result. online
of repositories1
algorithms.
7 ViSA: VISA To provide The purpose
Visualization of an easy to of this is
Sorting use learning to
Algorithms interface acquire
with as knowledge
much as about well-
 possible known
feedback sorting
information algorithms.
presented to
the user
through
explanation
8 Designing algorithms; a process The general
Educationally animation; that is both conclusion is
Effective empirical abstract and that
Algorithm evaluation; dynamic interactive
Visualizations learning; hypermedia
visualization. algorithm
visualization.
9 Using Student- is a dynamic the Effective
Built Algorithm graphical animation solution for
Animations as depiction of system must students.
Learning Aids the data and be very easy
operations of to learn and
an algorithm use.
10 Software The goal of We have
visualization this work is introduced a
enables users
Traversal-based Visualization to Structures
of Data produce a new model
to mentally debugging of software
picture a environment visualization
computer where data called
program or structures traversal-
algorithm can be based
abstractly visualization,
displayed. which is
capable of
displaying
abstract
representatio
ns of data
structures in
a debugger.
11 Learning to Educational special There are
program - Technology, approach in different
difficulties and Learning the way reasons why
solutions Styles, it is learned programming
Programming and taught. learning is
Teaching and inherently
Learning, difficult.

12 On the Programming experimenta development

 Development of Language, l tool that and testing of
a Programming First was a web-based
Teaching Tool: Programming developed to teaching
The Effect of Course achieve the tool for
Teaching by above- programming
Templates on mentioned courses.
the Learning goals.
Process

13 Failure rates in ailure rate, Consequentl The We did not

introductory pass rate, y, we have limitation find the
programming introductory designed a of this failure-rate
programming. study aiming study is the of CS1 to be
at finding relative alarmingly
the average low high;
failure and number of
pass rate for respondent
CS1 courses s.
around
the world.

14 Verificator: learning The main

Educational Tool programming, goal of this
for Learning teaching paper is to
Programming software, introduce
Verificator Verificator,
and
improving
the process
of teaching
programmin
g
15 Augmented Algorithm, The goal Thus, this
Reality Visualization, and main thesis was an
Application for Sorting objective of attempt to
Architects and algorithm, the thesis eliminate that
interior React, were to by creating a
designers: JavaScript, bring sorting tool that can
Interno A cost TypeScript algorithms visualize the
effective solution and process and
visualization steps of
together sorting
algorithms.
Chapter 3
System Design

HTML5, CSS, and JavaScript make up the back-end code. There are three varieties of code in
one .html file and all three can be executed from this file alone. Including different types of web
languages in a single page is one of the shortcomings of HTML 5. Since, therefore, there were
three different types, each had been segregated, producing three different files (plus the
miscellaneous sound and image files). Readability and keeping relevant code together are
benefits of excellent programming practices. However, in the end, I opted not to break the code
into two separate sections because of these two reasons. By just having to worry about one
project file instead of three, the project may be more easily transported and sent. And because the
changes to the coding languages are identified unambiguously in the project file, they do not
reduce readability. An RIA can have more than one programming language in a single file (Rich
Internet Application). As you can see, the three coding languages are the only important
components. However, since JavaScript runs immediately in the browser, it is unnecessary to
employ a server on the back-end (like PHP). HTML5 and CSS are employed in web
development. As illustrated with a single, bidirectional arrow, the HTML5 and JavaScript
communicate to run the relevant algorithms and update the interface. The code for HTML5 and
CSS did not change significantly throughout the project. The parts of HTML5 that were updated
were the function calls for each button, since they were altered from a functional programming
mindset to an object-oriented one.
Technology and Language used for project: -

Languages:

1. Web Development tools

2. HTML5, CSS3
Chapter 4

Implementation

Code for Website Frontend:

Index.html:

Technologies used:
1. HTML, CSS and JS
2. Visual Studio Code
Chapter 5
Results
 Chapter 6

Conclusion
This sorting visualizer will help you to analyze the working of mentioned algorithms. It will show the
actual transitions between the numbers which looks more attractive. Website is using neon colors so
that the animations will look good. This visualizer currently has only 4 sorting techniques which are
bubble sort, selection sort, insertion sort and quick sort. We've abstracted away all of the back-end
code behind all of the different algorithms and animation selectors. We have used javascipt to
function our visualizer.
References

[1] Sewar Khalifeh and Amjed A. Al-Mousa. 2021. A Book Recommender System Using
Collaborative Filtering Method. In International Conference on Data Science, E-learning and
Information Systems 2021 (DATA'21). Association for Computing Machinery, New York, NY,
USA, 131–135.
[2] Pangesti, Witriana Endah, Rachmat Suryadithia, Muhammad Faisal, Bilal Abdul Wahid, and
Arman Syah Putra. "Collaborative Filtering Based Recommender Systems For Marketplace
Applications." International Journal of Educational Research and Social Sciences (IJERSC) 2,
no. 5 (2021): 1201-1209.
[3] Kim, S., Han, S., Mok, H. E., & Choi, H. (2021). Cross Media-Platform Book Recommender
System: Based on Book and Movie Ratings. The Journal of the Convergence on Culture
Technology, 7(1), 582-587.
[4] Rezaimehr, F., & Dadkhah, C. (2021). A survey of attack detection approaches in collaborative
filtering recommender systems. Artificial Intelligence Review, 54(3), 2011-2066.
[5] Lee, S., Ji, H., Kim, J., & Park, E. (2021). What books will be your bestseller? A machine
learning approach with Amazon Kindle. The Electronic Library, 39(1), 137-151.
[6] Castells, P., Hurley, N., & Vargas, S. (2022). Novelty and diversity in recommender systems. In
Recommender systems handbook (pp. 603-646). Springer, New York, NY.
[7] Portugal, Ivens, Paulo Alencar, and Donald Cowan. "The use of machine learning algorithms in
recommender systems: A systematic review." Expert Systems with Applications 97 (2018):
205-227.
[8] Wang, D., Liang, Y., Xu, D., Feng, X., & Guan, R. (2018). A content-based recommender
system for computer science publications. Knowledge-Based Systems, 157, 1-9.
[9] Tarus, J. K., Niu, Z., & Mustafa, G. (2018). Knowledge-based recommendation: a review of
ontology-based recommender systems for e-learning. Artificial intelligence review, 50(1), 21-
48.
[10] Beutel, Alex, et al. "Fairness in recommendation ranking through pairwise comparisons."
Proceedings of the 25th ACM SIGKDD International Conference on Knowledge Discovery &
Data Mining. 2019.
[11] Shi, Chuan, et al. "Heterogeneous information network embedding for recommendation."
IEEE Transactions on Knowledge and Data Engineering 31.2 (2018): 357-370.
[12] Zhang, Yongfeng, et al. "Towards conversational search and recommendation: System ask,
user respond." Proceedings of the 27th acm international conference on information and
knowledge management. 2018.
[13] Nilashi, M., Ibrahim, O., & Bagherifard, K. (2018). A recommender system based on
collaborative filtering using ontology and dimensionality reduction techniques. Expert Systems
with Applications, 92, 507-520.
[14] Helberger, N., Karppinen, K., & D’acunto, L. (2018). Exposure diversity as a design principle
for recommender systems. Information, Communication & Society, 21(2), 191-207.
[15] Koren, Y., Rendle, S., & Bell, R. (2022). Advances in collaborative filtering. Recommender
systems handbook, 91-142.