VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Jnana Sangama, Belagavi-590018

JavaScript and jQuery [BCGL456A]

A Mini Project Report on
“ FlashCard Quiz Game ”
Submitted in partial fulfilment of Fourth Semester of
Bachelor of Engineering
In

Computer science & Design

By

Dhurthi [1AT23CG039}

Under the guidance of

Prof. Niranjani M
Assistant professor, CSE Dept

ATRIA INSTITUTE OF TECHNOLOGY

DEPARTMENT OF COMPUTE SCIENCE &
DESIGN BANGALORE-560024

Dept. of CS&D, AIT 1

 CERTIFICATE

This is to certify that the project work entitled “FlashCard

Quiz Game”, carried out by Dhruthi C (1AT23CG039) is
Bonafide student of Department of Computer Science and
Design at Atria Institute of Technology, Bangalore.
In partial fulfilment for the award of Degree of Bachelor of
Engineering in Computer Science & Design of Visvesvaraya
Technological University, Belagavi, during the academic year
2024-25.
It is certified that all corrections/suggestions indicated for
Internal Assessment have been incorporated in the report
deposited in the department library.
The project report has been approved as it satisfies the
academic requirements in respect of project work prescribed
for the said degree.

Prof. Niranjani M Dr. Devi Kannan

Assistant Professor Professor and HOD

Department of CSE Department of CSE
Atria.I.T. Atria.I.T.

Dept. of CS&D, AIT 2

 DECLARATION

I Dhruthi C [1AT23CG039] & student of 4th semester

Bachelor of Engineering, Department of Computer Science
and Design, Atria Institute of Technology, Bangalore.
Hereby declare that the project work entitled “FlashCard
Quiz Game” has been carried out under the supervision of
Prof. Niranjani M, Assistant Professor, Dept. of CS&E, Atria
Institute of Technology and submitted in partial fulfilment
of the course requirements for the award of degree in B.E
in Computer Science & Design of Visvesvaraya
Technological University, Belagavi during the year 2024-
2025. We further declare that the report has not been
submitted to any other University for the award of any
other degree.

Place: Bangalore Signature of the

students Date:
Dhurthi C (1AT23CG039)

Dept. of CS&D, AIT 3

 Acknowledgment

We express gratitude to our institution and

management for providing us with good infrastructure,
laboratory, facilities and inspiring staff, and whose
gratitude was of immense help in completion of this
project successfully.

We express our sincere gratitude to Rajesha S, Principal,

Atria Institute of Technology, for providing us the required
environment and for his valuable suggestion.

Our sincere thanks to Dr. Devi Kannan, Head of the

Dept. Computer Science and Engineering, Atria Institute
of Technology, for her valuable support and for
rendering usresources for this project work.

We express our gratitude to Prof. Niranjani M

Assistant Professor, Dept. of Computer Science and
Engineering, Atria Institute of Technology, who guided
us with valuable suggestions in completing this project
at every stage.

Last but not the least, the project would not have been a
success without the support of our parents and friends.
Our sincere thanks should be rendered to everyone who
helpedus in all possible ways.

Dept. of CS&D, AIT 4

 Table of Contents
1. Abstract

2. Introduction
2.1. Research And Significance
2.2. Aim & Scope

3. Implementation
3.1. Proposed System
3.2. Requirement Specification
3.3. System Functionalities
3.4. Sorting Algorithms

4. Software Development Methodology

4.1. Model
4.2. Code blocks

5. Result & Discussion

6. Conclusion

7. References

Dept. of CS&D, AIT 5

 Abstract
The integration of game-based learning tools into education has
gained significant popularity due to their ability to enhance user
engagement and knowledge retention. This paper introduces a web-
based Flashcard Quiz Game designed to promote interactive learning
across various topics. The game presents users with multiple genres
such as Games, Food, Country, and Nature, each offering 10 curated
questions to test and improve users' general knowledge and recall
abilities.

The application is designed with user interaction and customization in

mind. Users can select their preferred topic, difficulty level, and enjoy a
responsive interface that adjusts to different devices. The game
incorporates features such as a countdown timer, randomized
question order, and a progress bar to maintain focus and provide real-
time feedback during the quiz session.

To enrich the user experience, additional functionalities such as sound

effects, answer review options, leaderboard tracking, and dark mode
have been implemented. These enhancements are aimed at improving
motivation, competitiveness, and accessibility for a wider range of
learners. The app also supports user authentication to enable
personalized experiences and progress saving.

This paper further outlines the technical architecture and

development process of the application, discussing how it leverages
front-end technologies like HTML, CSS, JavaScript, and jQuery along
with backend integration using MySQL or MongoDB. The educational
benefits of using such an interactive flashcard-based approach are also
explored, demonstrating its value in both individual learning and
classroom environments.

Dept. of CS&D, AIT 6

 Introduction
Visualization is proposed as one of the ways for supporting student learning. Me
and my partner are visual learners, and we are keener to picking up concepts
by seeing it get done, rather than reading about it.
For example, when we were learning about sorting algorithms during the fourth
semester Computer Science degree, we found it hard to grasp the working of a
sorting algorithm just by seeing it explained on board or reading it as there is
loads of recursion that takes place, we thought that maybe if these algorithms
were taught visually and professors show how the data moves to its position,
we would understand the concept better.
For years, many educators have depended on lecturing, storytelling, and
blackboard teaching to deliver information. Standardized exams, in written
format, highlight verbal learning. But in a world entirely filled with laptops,
smartphones, tablets, and VR machines it becomes predominant to
dynamically teach students to read and produce visual texts and to espouse this
instinct to risk falling behind.
As such, many professors find themselves without the assets needed to give 21st
century students the dexterity they’ll need to succeed in a progressively visual
world. The advantages, difficulties, and possibilities of integrating such
visualization, on the other hand, need to be clarified.
Teaching staff are becoming more interested in integrating visual representation
into their methods to generate stimulating learning experiences for students in
face-to-face, blended, and online contexts.
Visualization can be incorporated into presentation software such as
PowerPoint, which is a widely used slide ware, but critics argue that they are
mostly used for decoration rather than just in innovative ways to promote
learning.
Visual representation has a lot of potential to improve learning and teaching at all
stages, from pedagogical practice research to scholarship, connecting research
and teaching, planning and curriculum development, and presentation and
assessment, to name a few.
To keep current, curricula can include research, which may include the teacher's
own disciplinary and pedagogical studies. While visualization can help to
visually reinforce text-heavy forms of communication, they can also express
meaning and affect The Significance of Visual Learning and Teaching are:
 help students engage with the topics

Dept. of CS&D, AIT 7

  increase retention by 30-44%
 develop higher-order reasoning skills
 sharpen fundamental abilities that permit students to see and visualize data
clearly
Research And Significance
The main aim of this application Sorting Algorithm Visualizer is to assist students
who are primarily visual learners and understand topic better when they are
exposed to content visually. Thus, we have developed a web-based application
that animates how sorting algorithms work and it visualizes the process for us.
We visualized five of the commonly used sorting algorithms by representing
the data as a bar graph. Each number is represented as a bar of different heights
based on the value and even redundant or repeated data is also sorted out. The
seven algorithms are: Bubble sort, Selection Sort, Insertion Sort, Quick Sort &
Merge Sort. The main goal for us was for the animation to be web based so
that a whole lot of people using different technologies can use it without
having the trouble of installing special software or an application. The web
application is coded with HTML5, CSS3 and JavaScript. The physical
elements of the web application are coded via HTML5. The appearance I.e.,
the interactive layout of the web application is entirely done by CSS. Finally,
the remaining is done by JavaScript, which is used for the histogram
representation, movement of bars, algorithm design.
Aim & Scope
The primary aim of this proposed system is to help students who are naturally
visual learners and tend to grasp concepts and remember it if they see it
visually that is where Sorting Algorithm Visualizer comes which helps people
understand basic sorting algorithms by seeing them visually take place.
This is not only for new learners but also for people who want to brush up on
their knowledge of sorting algorithms helping them remember the topic faster
rather than reading through it all over again.
Since this is a web application a large number of people can use it with ease
without having the need of downloading any external software or application
and this can be very helpful for students.
Visual Learning People have natural tendencies to communicate visually, and
visuals play a huge part in how the information is processed.

Dept. of CS&D, AIT 8

 Primitive cave drawings show an original desire to use pictures in an attempt
to convey thoughts and meaning. Even today, most toddlers seek to make
meaningful marks, drawing rudimentary pictures to show what’s going on in
their heads.
Generative Art is one of the ways to represent computational processes.
Transforming the data generated by an autonomous system into the features of
an artwork can lead to unexpected results.
Sorting Algorithm Visualizer was made to create visual representations of
sorting algorithms with the hope of finding visual patterns.
It turned out that the visual footprints of algorithms are unique and differ from
each other and helps people who are new to the concept of sorting understand
these algorithms quicker and the way they work.

Implementation
There have been a lot of studies and animation tools on visualizing sorting
algorithms. Some are based on how to make such an application and others on
different technologies which were aimed for increasing the understanding of
the concept.

Proposed System
The proposed system consists of various features which makes this web
application efficient for the user. The entire user interface is entirely done by
front end technologies (HTML, CSS, Bootstrap and JavaScript). The user
interface has various components: The main navbar allows the user to set the
size of the array and to control the speed of visualization, the buttons to
generate a new random array, to stop the visualization and the sorting
algorithm buttons.

Requirement Specification
This proposed software runs effectively on a computing system that has the
minimum requirements. Undertaking all the equipment necessities are not
satisfied but rather exist in their systems administration between the user’s
machines already. So, the main need is to introduce appropriate equipment for
the product.

Dept. of CS&D, AIT 9

The requirements are split into two categories, namely:
Software Requirements :
The basic software requirements to run the program are:
1. Windows 10
2. Visual Studio Code
3. HTML, CSS, JavaScript, Bootstrap
4. Browser example Mozilla Firefox, Safari, chrome, etc.
Hardware Requirements :
The basic hardware required to run the program are:
1. Hard disk of 5 GB
2. System memory (RAM) of 512 MB
3. I3 processor-based computer or higher

System Functionalities
The first row of the Navbar section has the range unit to set the size of the
array with a minimum size of 10 and a maximum of 50 elements the wide
range is mainly to show how these algorithms work for larger data visually as
it’s impossible to show students how an array with over 100 elements gets
sorted but visually seeing it people can understand how they work.
The second part has the range controller to set the speed of visualization with
the slowest speed at showing every swap in detail so that students can grasp
the idea of what's going on and the fastest to show how different algorithms
quickly sort an array at larger data, for example trying to sort an array of 100
elements by bubble sort can take a really long time as the slowest setting and
can be time consuming but merge sort can do it in couple of seconds by this
even students can get an idea of how algorithms differ between each other in
speed.
The third part has the buttons to generate new array and to stop the sorting
midway. The fourth part contains all buttons for the selectable algorithms:
Bubble Sort, Selection Sort, Insertion Sort, Merge Sort & Quick Sort by
default no algorithm is selected, user needs to select the desired algorithm to
see it visually. The fifth part is the color palette. The colors used on the graph
where blue represents the default array, yellow represents the current element
in which the

Dept. of CS&D, AIT 10

user is on, red represents the elements which are compared and to be swapped
and green represents the element which is in it sorted position.
The last part contains the bar graph representation where the sorting takes
places, initially the default bars are represented by blue color and when an
algorithm is selected the sorting takes place and colors change accordingly.
We have kept user interface as simple as we could and grouped similar things
together. All the buttons do show certain features when the cursor is hovered
over them. The button when hovered over it and when an algorithm is clicked
all the elements except for the “new array” button is frozen and can't be
clicked until and unless the “new array” button is clicked.

Sorting Algorithms
A Sorting Algorithms main purpose is to reposition a given array or list of
elements in ascending or descending order. Now taking about the algorithms
itself we are using 5 sorting algorithms in this visualizer namely Bubble Sort,
Selection Sort, Insertion Sort, Quick Sort & Merge Sort. These algorithms are
the commonly used algorithms for sorting.
Bubble Sort
Bubble sort also known as sinking sort from time to time, is a simple sorting
algorithm that repeatedly steps through the list, compares adjacent elements
and swaps them if they are in the wrong order. The pass through the list is
repeated until the list is sorted. But the algorithm is not suitable for amounts of
data as its average complexity is of Ο(n2 ), Where n is the number of elements.
The pseudocode of bubble sort is shown below

Dept. of CS&D, AIT 11

Selection Sort
Selection sort is an in-place comparison sorting algorithm. It has an O(n^2)
time complexity, which makes it unsuitable for an array size of large numbers,
and in general executes worse than the similar insertion sort. Selection sort is
well known for its simplicity and has performance advantages over more
intricate algorithms in certain circumstances, particularly where additional
memory is limited. The algorithm works by pushing the least element to the
start of the array by swapping it with the first element of the array and the
pointer pointing to the first element is moved to the next element and this
process goes on till the last element of the array and eventually the array will
be sorted. Figure 4.5 shows the pseudo code.

Insertion Sort
Insertion Sort is an in-place comparison sorting algorithm. In this algorithm, a
sub array is kept which is always sorted. An element which needs to be
inserted in this sub array, has to find its right position were it should be and
then it will to be inserted in that position. Hence, it's called Insertion Sort. The
pseudo code of it is shown below in Figure 4.6.

Dept. of CS&D, AIT 12

Quick Sort
Quick Sort is very efficient sorting algorithm except for its worst-case
complexity and it is based on partitioning the array into two halves by taking a
pivot element which can either be the first of last element of the array, the
element on the left side of the pivot will be smaller than it and elements on the
right side will be larger than it we do this partitioning recursively until the
array is sorted. In the below Figure 4.7 the pseudocode is shown.

Merge Sort
Merge Sort is one the most efficient sorting algorithms among all the
algorithms as even its worst-case time complexity being O(n log n). It follows
the divide and conquer method as it divides the array into smaller sub arrays
and compares these sub arrays and sorts them accordingly and merges these
sorted sub arrays to get the final array. The pseudo code is shown below in
Figure 4.8.

Dept. of CS&D, AIT 13

 Software Development Methodology
The project is implemented by a combination of HTML5 , CSS , and
JavaScript. It contains 3 files “index.html” which consists of the html code
along with the scripts which links to JavaScript files, “style.css” which
contains the user interface design and finally the “scripts” file which contains
majority of the code that is the visualization and all the sorting algorithms. The
code follows Model View- Controller architecture. Below in Figure 5.1 the
architecture diagram is shown

Model
The Model is incorporated of one object, called sorter. This object holds all the
sorting algorithm code arranged as individual methods. A centralized
algorithm buttons when clicked goes to a switch case of sorting algorithm
methods, and then calls the appropriate one.
The 5 buttons labeled as the 5 sorting algorithms (Bubble sort, Selection Sort,
Insertion Sort, Quick Sort, Merge Sort) on the user interface directly control
this object. When the user selects a sorting algorithm, the corresponding
sorting algorithm method is called, and the time complexities, swaps,
comparisons and time taken for the algorithm to take place are calculated.
All of this is stored as a variable named as best, avg, worst, swaps, comp and
two other variables named t0 ad t1 to calculate the time taken to execute the
algorithm, this is public and attainable for the methods connected to the
buttons on the web application user interface.
The divs array is the kind of interface through which the user interface
connects with the back end code. The result is a visualization of the bars
comparing with each other and moving to its correct position thus giving us
the sorted bar graph.

Dept. of CS&D, AIT 14

The View iterates over the array and update the bars in the bar graph to show
the steps that the algorithm took. One thing to keep in mind about the steps is
that they are only documented if the algorithm changes the position of a piece
of data. Selection Sort,
for example, completes quickly because it always moves one piece of data to
its correct and final position after each step, whereas other algorithms may
require multiple moves before a piece of data reaches its final position.
This is deceiving because, while Selection Sort appears to finish the fastest
visually, it performs the most work when comparing data and is the least
preferred alternative when sorting data.
As a consequence, the visualization does not efficiently express data
comparisons, which is a key feature of sorting algorithms. The memory
specifications of a two-dimensional array are one of its drawbacks.
Because the div stores each step required to sort the data, the array's size is
determined by the number of divs. We should look at the time it takes to
analyze the algorithm's space requirements. Big-Oh analysis is a common
technique in Computer Science for analyzing time requirements.
The notation consists of a capital letter O followed by a constraint in
parentheses that denotes the algorithm's worst-case performance. Selection
Sort and Insertion Sort, for example, have a time complexity of O(n^2),
pronounced Big-Oh of n squared, since they complete at a rate proportionally
bounded by n^2, or the number of items in the set of data squared. This isn't
always the same as the amount of space required for the array.
Because there are (10-150) pieces of data in each algorithm, the array is
random cells wide and the number of rows needed differs. The size of the divs
array is determined by several factors, including the sorting algorithm used, the
points in the algorithm that are displayed, and whether the entire array is stored
or only one row is computed at a time.
For example, points could be displayed each time an item is moved or each
time an item is returned to its proper location. The size of the divs array is
determined by the algorithm selected.
Even if we display every time a value's position changes and store all the rows
of the trace in the array at once, we only need n rows with Selection Sort.
There are no extra data movements at each step because one of the values is
switched into its proper location.

Dept. of CS&D, AIT 15

Code
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1"
/>
<title>Sorting Visualizer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]
beta2/dist/css/
bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />

</head>
<header>
<h1 align="center">Sorting Visualizer</h1>
<nav>
<div class="row">
<div class="col gap-2 d-sm-flex" id="newArray">
<button
type="button
"
class="btn btn-outline-success btn-light newArray"
>
New Array
</button>
</div>
<div class="col" id="input">
<span id="size"
>Size
<input
id="arr_sz"
type="range
" min="10"
max="50"
step="1"
value="40" /></span
><span id="speed"

Dept. of CS&D, AIT 16

 >Speed
<input
id="speed_inpu
t"
type="range"
min="30"
max="300"
stepdown="10"
value="100"
/></span>
</div>
<div class="col gap-2 d-sm-flex justify-content-end">
<button
type="button
"
class="btn btn-outline-primary btn-light bubbleSort"
>
Bubble Sort</button
><button
type="button
"
class="btn btn-outline-primary btn-light selectionSort"
>
Selection Sort</button
><button
type="button
"
class="btn btn-outline-primary btn-light insertionSort"
>
Insertion Sort</button
><button
type="button
"
class="btn btn-outline-primary btn-light quickSort"
>
Quick Sort</button
><button
type="button
"
class="btn btn-outline-primary btn-light mergeSort"
>
Merge Sort
</button>
</div>
</div>
</nav>
</header>
<body class="p-3 mb-2 bg-#f8f9fa text-dark">
<div id="bars" class="flex-container"></div>
<script
Dept. of CS&D, AIT 17
 src="https://cdn.jsdelivr.net/npm/bootstrap@5
.0.0-
beta2/dist/js/bootstrap.bundle.min.js"

Dept. of CS&D, AIT 18

 integrity="sha384-
b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
<script src="index.js"></script>
</body>
</html>

CSS CODE
body {
font-family:
Lato,Merriweather,Roboto,Montserrat; font-
size: 20px;
padding: 0 20px 30px 0;
line-height: 1.4;
/* Lato,Merriweather,Roboto,Montserrat */
}

.flex-container {
display: flex;
flex-wrap:
nowrap; width:
100%; height:
400px;
justify-content: center;
align-items: flex-end; /* Aligns bars from the bottom */
transition: 2s all ease;
}

.flex-item {
background: cyan;
border: 0.5pt solid #000;
width: 10px;
transition: 0.1s all ease;
}

#input {
display: flex;
padding: 10px;
justify-content: space-around;
}

.h1,

Dept. of CS&D, AIT 19

 margin-bottom: 20px;
}

@media screen and (max-width: 600px) {

.col #input {
display: flex;
justify-content:
center; align-items:
center;
}

.col span {
display: flex;
flex-direction:
column; justify-
content: center;
align-items: center;
padding: 10px;
}

.row {
display: inline;
text-align:
center;
}

.flex-container
{ margin-
top: 0;
}

#input {
display: inline;
text-align:
center;
}

.justify-content-
end { margin-
top: 0;
}

.btn {
margin-bottom: 10px;
}
}

Dept. of CS&D, AIT 20

JavaScript CODE
function swap(e, r) {
let t = e.style.height;
(e.style.height = r.style.height), (r.style.height = t);
}
function disableSortingBtn() {
(document.querySelector(".bubbleSort").disabled = !0),
(document.querySelector(".insertionSort").disabled = !0),
(document.querySelector(".mergeSort").disabled = !0),
(document.querySelector(".quickSort").disabled = !0),
(document.querySelector(".selectionSort").disabled = !0);
}
function enableSortingBtn() {
(document.querySelector(".bubbleSort").disabled = !1),
(document.querySelector(".insertionSort").disabled = !1),
(document.querySelector(".mergeSort").disabled = !1),
(document.querySelector(".quickSort").disabled = !1),
(document.querySelector(".selectionSort").disabled = !1);
}
function disableSizeSlider() {
document.querySelector("#arr_sz").disabled = !
0;
}
function enableSizeSlider() {
document.querySelector("#arr_sz").disabled = !
1;
}
function disableNewArrayBtn() {
document.querySelector(".newArray").disabled =
!1;
}
function enableNewArrayBtn() {
document.querySelector(".newArray").disabled =
!1;
}
function waitforme(e) {
return new Promise((r) =>
{ setTimeout(() => {
r("");
}, e);
});
}
let arraySize = document.querySelector("#arr_sz");
arraySize.addEventListener("input", function () {
console.log(arraySize.value, typeof arraySize.value),
createNewArray(parseInt(arraySize.value));
});
let delay = 260,
delayElement = document.querySelector("#speed_input");
Dept. of CS&D, AIT 21
 delayElement.addEventListener("input", function () {
console.log(delayElement.value, typeof delayElement.value),
(delay = 320 - parseInt(delayElement.value));
});
let array = [];
function createNewArray(e = 60)
{ deleteChild(), (array =
[]);
for (let r = 0; r < e; r++) array.push(Math.floor(250 *
Math.random()) + 1);
const r = document.querySelector("#bars");
for (let t = 0; t < e; t++) {
const e = document.createElement("div");
(e.style.height = 1.5 * array[t] + "px"),
e.classList.add("bar"),
e.classList.add("flex-
item"),
e.classList.add(`barNo$
{t}`), r.appendChild(e);
}
}
function deleteChild() {
document.querySelector("#bars").innerHTML =
"";
}
createNewArray();
const newArray = document.querySelector(".newArray");
newArray.addEventListener("click", function () {
console.log("From newArray " +
arraySize.value), console.log("From newArray
" + delay), enableSortingBtn(),
enableSizeSlider(),
createNewArray(arraySize.value);
});

// bubble sort
async function bubble() {
const ele = document.querySelectorAll(".bar");
for (let i = 0; i < ele.length - 1; i++) {
for (let j = 0; j < ele.length - i - 1; j++)
{ console.log("In jth loop");
ele[j].style.background = "blue";
ele[j + 1].style.background = "blue";
if (parseInt(ele[j].style.height) > parseInt(ele[j +
1].style.height)) {
await waitforme(delay);
swap(ele[j], ele[j +
1]);
}
ele[j].style.background = "cyan";
Dept. of CS&D, AIT 22
 ele[j + 1].style.background = "cyan";
}
ele[ele.length - 1 - i].style.background = "green";
}
ele[0].style.background = "green";
}
const bubSortbtn = document.querySelector(".bubbleSort");
bubSortbtn.addEventListener("click", async function () {
disableSortingBtn();
disableSizeSlider();
disableNewArrayBtn()
; await bubble();
enableSortingBtn();
enableSizeSlider();
enableNewArrayBtn();
});

// insertion sort
async function insertion() {
const ele = document.querySelectorAll(".bar");
ele[0].style.background = "green";
for (let i = 1; i < ele.length; i+
+) { let j = i - 1;
let key = ele[i].style.height;
ele[i].style.background =
"blue"; await waitforme(delay);
while (j >= 0 && parseInt(ele[j].style.height) > parseInt(key))
{ ele[j].style.background = "blue";
ele[j + 1].style.height =
ele[j].style.height; j--;
await waitforme(delay);
for (let k = i; k >= 0; k--) {
ele[k].style.background = "green";
}
}
ele[j + 1].style.height = key;
ele[i].style.background = "green";
}
}
const inSortbtn = document.querySelector(".insertionSort");
inSortbtn.addEventListener("click", async function () {
disableSortingBtn();
disableSizeSlider();
disableNewArrayBtn()
; await insertion();

Dept. of CS&D, AIT 23

 enableSortingBtn(
);
enableSizeSlider(
);
enableNewArrayBtn
();
});

// merge sort
async function merge(e, t, r, a)
{ const n = r - t + 1,
l = a - r;
let o = new
Array(n), g =
new Array(l);
for (let r = 0; r < n; r++)
await waitforme(delay),
(e[t + r].style.background =
"orange"), (o[r] = e[t +
r].style.height);
for (let t = 0; t < l; t++)
await waitforme(delay),
(e[r + 1 + t].style.background =
"yellow"), (g[t] = e[r + 1 +
t].style.height);
await
waitforme(delay);
let i = 0,
s = 0,
y = t;
for (; i < n && s < l; )
await waitforme(delay),
parseInt(o[i]) <=
parseInt(g[s])
? (n + l === e.length
? (e[y].style.background = "green")
: (e[y].style.background =
"lightgreen"), (e[y].style.height =
o[i]),
i++,
y++)
: (n + l === e.length
? (e[y].style.background = "green")
: (e[y].style.background =
"lightgreen"), (e[y].style.height =
g[s]),
s++,
y++);
for (; i < n; )
await
Dept. of CS&D, AIT 24
 waitforme(delay),
n + l === e.length
? (e[y].style.background = "green")
: (e[y].style.background = "lightgreen"),
(e[y].style.height = o[i]),
i++,
y++;

Dept. of CS&D, AIT 25

 for (; s < l; )
await
waitforme(delay),
n + l === e.length
? (e[y].style.background = "green")
: (e[y].style.background = "lightgreen"),
(e[y].style.height = g[s]),
s++,
y++;
}
async function mergeSort(e, t, r) {
if (t >= r)
return void console.log(`return cause just 1 elemment l=$
{t}, r=${r}`);
const a = t + Math.floor((r - t) / 2);
await mergeSort(e, t, a),
await mergeSort(e, a + 1,
r), await merge(e, t, a,
r);
}
const mergeSortbtn = document.querySelector(".mergeSort");
mergeSortbtn.addEventListener("click", async function () {
let e =
document.querySelectorAll(".bar"), t
= parseInt(e.length) - 1;
disableSortingBtn(),
disableSizeSlider(),
disableNewArrayBtn(),
await mergeSort(e, 0,
t),
enableSortingBtn(),
enableSizeSlider(),
enableNewArrayBtn();
});

// quick sort
async function partitionLomuto(e, t,
a) { let n = t - 1;
e[a].style.background = "red";
for (let r = t; r <= a - 1; r++)
(e[r].style.background = "yellow"),
await waitforme(delay),
parseInt(e[r].style.height) < parseInt(e[a].style.height)
? (console.log("In partitionLomuto for j
if"), n++,
swap(e[n], e[r]),
(e[n].style.background =
"orange"),
n != r && (e[r].style.background = "orange"),
await waitforme(delay))
Dept. of CS&D, AIT 26
 : (e[r].style.background = "pink");

Dept. of CS&D, AIT 27

 n++,
await waitforme(delay),
swap(e[n], e[a]),
(e[a].style.background =
"pink"),
(e[n].style.background = "green"),
await waitforme(delay);
for (let t = 0; t < e.length; t++)
"green" != e[t].style.background && (e[t].style.background
= "cyan");
return n;
}
async function quickSort(e, t, a) {
if (t < a) {
let n = await partitionLomuto(e, t, a);
await quickSort(e, t, n - 1), await quickSort(e, n + 1, a);
} else
t >= 0 &&
a >= 0 &&
t < e.length
&& a <
e.length &&
((e[a].style.background = "green"),
(e[t].style.background = "green"));
}
const quickSortbtn = document.querySelector(".quickSort");
quickSortbtn.addEventListener("click", async function () {
let e =
document.querySelectorAll(".bar"), t
= e.length - 1;
disableSortingBtn(),
disableSizeSlider(),
disableNewArrayBtn(),
await quickSort(e, 0,
t),
enableSortingBtn(),
enableSizeSlider(),
enableNewArrayBtn();
});

// selection sort
async function selection() {
const e = document.querySelectorAll(".bar");
for (let t = 0; t < e.length; t++)
{ let n = t;
e[t].style.background = "blue";
for (let a = t + 1; a < e.length; a++)
(e[a].style.background = "red"),
await waitforme(delay),
parseInt(e[a].style.height) < parseInt(e[n].style.height)
Dept. of CS&D, AIT 28
 ? (n !== t && (e[n].style.background = "cyan"), (n =
a))
: (e[a].style.background = "cyan");
await waitforme(delay),
swap(e[n], e[t]),
(e[n].style.background = "cyan"),
(e[t].style.background = "green");
}
}
const selectionSortbtn =
document.querySelector(".selectionSort");
selectionSortbtn.addEventListener("click", async function () {
disableSortingBtn(),
disableSizeSlider(),
disableNewArrayBtn(),
await selection(),
enableSortingBtn(),
enableSizeSlider(),
enableNewArrayBtn();
});

Dept. of CS&D, AIT 29

 Result & Discussion
The main goal was to keep the web page and user interface as simple as
possible so that it’s easy for the user to navigate through the page. All the
similar elements are coupled together. In this system the user interface build is
professional.
It is the front end of the project or it can also be termed as user interface. Here
the user the gets the multiple options to execute or access their task as per
need. The user interface has 14 components:
The main navbar allows the user to set the size of the array and to control the
speed of visualization, the buttons to generate a new random array, to stop the
visualization and the sorting algorithm buttons.
Below it is the secondary navbar containing the color palette which shows the
colors used during the visualization.
Below it is the canvas which is divided into 3 parts: The algorithms description,
the bar graph and the text box fields which show the time complexities, number
of swaps, number of comparisons and the time taken for each algorithm
whenever a particular algorithm is clicked.

Dept. of CS&D, AIT 30

Dept. of CS&D, AIT 31
 Conclusion

The visualization project of sorting algorithms, focusing on Bubble Sort,

Selection Sort, Insertion Sort, Quick Sort, and Merge Sort, provides a
comprehensive and insightful analysis of these fundamental algorithms. By
graphically representing the process and performance of each sorting method,
this project effectively demonstrates the intricacies and efficiencies inherent in
different approaches to sorting.
Bubble Sort, while simple and easy to understand, is shown to be inefficient
for large datasets due to its O(n^2) time complexity, making it a clear example
of how an algorithm's simplicity can often come at the cost of performance.
Selection Sort, sharing the same O(n^2) complexity, highlights a different
sorting mechanism but ultimately faces similar efficiency issues, reinforcing
the need for more advanced algorithms for practical applications.
On the other hand, Insertion Sort, with its adaptive nature and O(n) time
complexity for nearly sorted arrays, shows a more nuanced performance. The
project effectively illustrates how Insertion Sort can be efficient in specific
scenarios despite its O(n^2) complexity in the average and worst cases.
Quick Sort and Merge Sort emerge as the more robust and practical solutions
for large datasets, with their O(n log n) average-case time complexities. Quick
Sort's performance is highlighted by its efficiency and speed, albeit with a
sensitivity to pivot choice,
while Merge Sort's stability and predictable performance make it a reliable
choice for many applications.
The visualizations help in understanding the divide-and-conquer approach of
these algorithms, showing how they manage and reduce complexity.
This project not only enhances comprehension of sorting algorithms but also
underscores the importance of selecting the right algorithm based on the
specific requirements and constraints of the task at hand.

Dept. of CS&D, AIT 32

 Future Work

1. Interactive Learning Platforms: As technology continues to evolve,

there’s a growing demand for interactive and engaging educational
content. Your sorting algorithm visualization project could be integrated
into online learning platforms, coding bootcamps, or university courses.
Imagine a dynamic interface where learners can tweak parameters (like
array size or animation speed) and observe how different sorting
algorithms behave. This would enhance understanding and retention,
especially for computer science students.
2. Real-Time Complexity Analysis: Currently, your project visualizes the
sorting process step by step. However, you could take it a step further by
incorporating real-time complexity analysis. For instance: Display time
complexity (e.g., O(n^2) for bubble sort) alongside the visualization.
Highlight critical points (such as pivot selection in quicksort) and
explain their impact on performance. Compare algorithms side by side,
emphasizing trade-offs (e.g., quicksort’s average-case efficiency vs.
merge sort’s stability).
3. Algorithm Customization: Allow users to customize sorting algorithms.
They could: Choose different pivot strategies for quicksort (first, last, or
median-of-three). Experiment with hybrid algorithms (e.g., Timsort,
which combines merge sort and insertion sort). Adjust sorting thresholds
(e.g., when to switch from quicksort to insertion sort).
4. Visualizing Parallelism: Modern CPUs have multiple cores, and
parallelism is crucial for performance. Extend your project to visualize
parallel sorting: Implement parallel versions of sorting algorithms (e.g.,
parallel merge sort). Show how threads or processes collaborate during
sorting. Discuss synchronization challenges and benefits.

Dept. of CS&D, AIT 33

 References

1. https://sist.sathyabama.ac.in/sist_naac/documents/1.3.4/b.e-cse-batchno-
26.pdf
2. https://theses.cz/id/3w4s3a/Mykhailo-Klunko-bc-thesis.pdf
3. Introduction to the Design and Analysis of Algorithms, By Anany
Levitin, 3rd Edition (Indian), 2017, Pearson.
4. Computer Algorithms/C++, Ellis Horowitz, SatrajSahni and
Rajasekaran, 2nd Edition, 2014, Universities Press.
5. Introduction to Algorithms, Thomas H. Cormen, Charles E.
Leiserson, Ronal L. Rivest, Clifford Stein, 3rd Edition, PHI.
6. Design and Analysis of Algorithms, S. Sridhar, Oxford (Higher Education)

Dept. of CS&D, AIT 34