From e26b83852b6590b3c5b680f7b8510928afd73901 Mon Sep 17 00:00:00 2001 From: Ayushswirlon Date: Sun, 7 Jul 2024 11:07:16 +0530 Subject: [PATCH 1/4] tour-guide-added --- visual.html | 257 ++++++++++++++++++++++++++-------------------------- 1 file changed, 129 insertions(+), 128 deletions(-) diff --git a/visual.html b/visual.html index f9a0de2..45a39ec 100644 --- a/visual.html +++ b/visual.html @@ -4,7 +4,6 @@ Sorting Algorithms Visualization - -

Sorting Algorithms Visualization

SORTING VISUALIZATION

-
-

Time Complexity

-

Best Case: O(n)

-

Worst Case: O(n^2)

-

Average Case: O(n^2)

-

Space Complexity: O(1)

-
- - - - - - - + + + + + +
+
+ +
+
+

+

+
@@ -324,71 +355,32 @@

SORTING VISUALIZATION

async function heapSort() { let n = array.length; - // Build heap (rearrange array) for (let i = Math.floor(n / 2) - 1; i >= 0; i--) await heapify(n, i); - // One by one extract an element from heap for (let i = n - 1; i > 0; i--) { if (stop) return; - // Move current root to end await swap(0, i); - - // call max heapify on the reduced heap await heapify(i, 0); - document.getElementById(`bar-${i}`).classList.add("sorted"); } document.getElementById(`bar-0`).classList.add("sorted"); } - async function combSort() { - let gap = array.length; - let shrink = 1.3; - let sorted = false; - - while (!sorted) { - gap = Math.floor(gap / shrink); - if (gap <= 1) { - gap = 1; - sorted = true; - } - - let i = 0; - while (i + gap < array.length) { - if (stop) return; - if (array[i] > array[i + gap]) { - await swap(i, i + gap); - sorted = false; - } - i++; - } - } - - for (let i = 0; i < array.length; i++) { - document.getElementById(`bar-${i}`).classList.add("sorted"); - } - } - async function heapify(n, i) { - let largest = i; // Initialize largest as root - let l = 2 * i + 1; // left = 2*i + 1 - let r = 2 * i + 2; // right = 2*i + 2 + let largest = i; + let l = 2 * i + 1; + let r = 2 * i + 2; - // If left child is larger than root if (l < n && array[l] > array[largest]) largest = l; - // If right child is larger than largest so far if (r < n && array[r] > array[largest]) largest = r; - // If largest is not root if (largest != i) { await highlightBars([i, largest], "comparing"); await swap(i, largest); - - // Recursively heapify the affected sub-tree await heapify(n, largest); } } @@ -449,26 +441,7 @@

SORTING VISUALIZATION

visualizeArray(array); } - function stopClicked(){ - document.getElementById("resume").disabled = false; - document.getElementById("reset").disabled = false; - } - function disableSubmitButton() { - document.getElementById("submit").disabled = true; - document.getElementById("start").disabled = true; - document.getElementById("resume").disabled = true; - document.getElementById("reset").disabled = true; - } - - function enableSubmitButton() { - document.getElementById("submit").disabled = false; - document.getElementById("start").disabled = false; - document.getElementById("resume").disabled = false; - document.getElementById("reset").disabled = false; - } - async function startSort() { - disableSubmitButton(); reset(); const sortMethod = document.getElementById("sortSelect").value; switch(sortMethod) { @@ -482,69 +455,97 @@

SORTING VISUALIZATION

await insertionSort(); break; case "merge": - await mergeSortWrapper(); + await mergeSortWrapper();k break; case "heap": await heapSort(); break; - case "comb": - await combSort(); - break; case "quick": await quickSort(); break; } - enableSubmitButton(); } - const TimeComplexity={ - bubble: { - best: "O(n)", - average: "O(n^2)", - worst: "O(n^2)", - space: "O(1)" + // Tour guide implementation + const tourSteps = [ + { + title: "Welcome to Sorting Visualizer", + description: "This tour will guide you through the features of our sorting algorithm visualizer.", + target: "heading" + }, + { + title: "Enter Your Array", + description: "Type your numbers separated by spaces in this input box.", + target: "array" }, - selection: { - best: "O(n^2)", - average: "O(n^2)", - worst: "O(n^2)", - space: "O(1)" + { + title: "Submit Array", + description: "Click this button to visualize your entered array.", + target: "submit" }, - insertion: { - best: "O(n)", - average: "O(n^2)", - worst: "O(n^2)", - space: "O(1)" + { + title: "Choose Sorting Algorithm", + description: "Select the sorting algorithm you want to visualize.", + target: "sortSelect" }, - merge: { - best: "O(n log n)", - average: "O(n log n)", - worst: "O(n log n)", - space: "O(n)" + { + title: "Start Sorting", + description: "Click this button to start the sorting process.", + target: "startSort" }, - comb: { - best: "O(n log n)", - average: "O(n^2)", - worst: "O(n^2)", - space: "O(1)" + { + title: "Additional Controls", + description: "Use these buttons to stop, resume, reset, or clear the visualization.", + target: "buttons" } + ]; + + let currentStep = 0; + + function startTour() { + document.getElementById("tourOverlay").style.display = "block"; + showStep(currentStep); } - function updateTimeComplexity(){ - const sortMethod = document.getElementById("sortSelect").value; - const complexity=TimeComplexity[sortMethod]; - document.getElementById("best-case").textContent = `Best Case: ${complexity.best}`; - document.getElementById("average-case").textContent = `Average Case: ${complexity.average}`; - document.getElementById("worst-case").textContent = `Worst Case: ${complexity.worst}`; - document.getElementById("space-complexity").textContent = `Space Complexity: ${complexity.space}`; + function showStep(step) { + const tourPopup = document.getElementById("tourPopup"); + const targetElement = document.getElementById(tourSteps[step].target); + const targetRect = targetElement.getBoundingClientRect(); + + // Calculate position + let top = targetRect.bottom + 10; + let left = targetRect.left + targetRect.width / 2 - 150; // Center the popup + + // Adjust if it goes off-screen + if (left < 10) left = 10; + if (left + 300 > window.innerWidth) left = window.innerWidth - 310; + if (top + 200 > window.innerHeight) top = targetRect.top - 210; + + tourPopup.style.left = `${left}px`; + tourPopup.style.top = `${top}px`; + + document.getElementById("tourTitle").textContent = tourSteps[step].title; + document.getElementById("tourDescription").textContent = tourSteps[step].description; + + if (step === tourSteps.length - 1) { + document.getElementById("tourNext").textContent = "Finish"; + } else { + document.getElementById("tourNext").textContent = "Next"; + } } + + document.getElementById("tourNext").addEventListener("click", () => { + currentStep++; + if (currentStep < tourSteps.length) { + showStep(currentStep); + } else { + document.getElementById("tourOverlay").style.display = "none"; + currentStep = 0; + } + }); + + // Start the tour when the page loads + window.addEventListener("load", startTour); - - - + \ No newline at end of file From fdc1c872d5e346cbe61d27077f6ea2f73a6320ce Mon Sep 17 00:00:00 2001 From: Ayushswirlon Date: Sun, 7 Jul 2024 11:18:01 +0530 Subject: [PATCH 2/4] updated-the-tour-guide --- visual.html | 169 ++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 152 insertions(+), 17 deletions(-) diff --git a/visual.html b/visual.html index 45a39ec..2b2b3f4 100644 --- a/visual.html +++ b/visual.html @@ -4,6 +4,7 @@ Sorting Algorithms Visualization + +

Sorting Algorithms Visualization

SORTING VISUALIZATION

+
+

Time Complexity

+

Best Case: O(n)

+

Worst Case: O(n^2)

+

Average Case: O(n^2)

+

Space Complexity: O(1)

+
- + - - - - - + + + + +
-

@@ -355,32 +373,71 @@

async function heapSort() { let n = array.length; + // Build heap (rearrange array) for (let i = Math.floor(n / 2) - 1; i >= 0; i--) await heapify(n, i); + // One by one extract an element from heap for (let i = n - 1; i > 0; i--) { if (stop) return; + // Move current root to end await swap(0, i); + + // call max heapify on the reduced heap await heapify(i, 0); + document.getElementById(`bar-${i}`).classList.add("sorted"); } document.getElementById(`bar-0`).classList.add("sorted"); } + async function combSort() { + let gap = array.length; + let shrink = 1.3; + let sorted = false; + + while (!sorted) { + gap = Math.floor(gap / shrink); + if (gap <= 1) { + gap = 1; + sorted = true; + } + + let i = 0; + while (i + gap < array.length) { + if (stop) return; + if (array[i] > array[i + gap]) { + await swap(i, i + gap); + sorted = false; + } + i++; + } + } + + for (let i = 0; i < array.length; i++) { + document.getElementById(`bar-${i}`).classList.add("sorted"); + } + } + async function heapify(n, i) { - let largest = i; - let l = 2 * i + 1; - let r = 2 * i + 2; + let largest = i; // Initialize largest as root + let l = 2 * i + 1; // left = 2*i + 1 + let r = 2 * i + 2; // right = 2*i + 2 + // If left child is larger than root if (l < n && array[l] > array[largest]) largest = l; + // If right child is larger than largest so far if (r < n && array[r] > array[largest]) largest = r; + // If largest is not root if (largest != i) { await highlightBars([i, largest], "comparing"); await swap(i, largest); + + // Recursively heapify the affected sub-tree await heapify(n, largest); } } @@ -441,7 +498,26 @@

visualizeArray(array); } + function stopClicked(){ + document.getElementById("resume").disabled = false; + document.getElementById("reset").disabled = false; + } + function disableSubmitButton() { + document.getElementById("submit").disabled = true; + document.getElementById("start").disabled = true; + document.getElementById("resume").disabled = true; + document.getElementById("reset").disabled = true; + } + + function enableSubmitButton() { + document.getElementById("submit").disabled = false; + document.getElementById("start").disabled = false; + document.getElementById("resume").disabled = false; + document.getElementById("reset").disabled = false; + } + async function startSort() { + disableSubmitButton(); reset(); const sortMethod = document.getElementById("sortSelect").value; switch(sortMethod) { @@ -455,24 +531,73 @@

await insertionSort(); break; case "merge": - await mergeSortWrapper();k + await mergeSortWrapper(); break; case "heap": await heapSort(); break; + case "comb": + await combSort(); + break; case "quick": await quickSort(); break; } + enableSubmitButton(); } - // Tour guide implementation + const TimeComplexity={ + bubble: { + best: "O(n)", + average: "O(n^2)", + worst: "O(n^2)", + space: "O(1)" + }, + selection: { + best: "O(n^2)", + average: "O(n^2)", + worst: "O(n^2)", + space: "O(1)" + }, + insertion: { + best: "O(n)", + average: "O(n^2)", + worst: "O(n^2)", + space: "O(1)" + }, + merge: { + best: "O(n log n)", + average: "O(n log n)", + worst: "O(n log n)", + space: "O(n)" + }, + comb: { + best: "O(n log n)", + average: "O(n^2)", + worst: "O(n^2)", + space: "O(1)" + } + } + + function updateTimeComplexity(){ + const sortMethod = document.getElementById("sortSelect").value; + const complexity=TimeComplexity[sortMethod]; + document.getElementById("best-case").textContent = `Best Case: ${complexity.best}`; + document.getElementById("average-case").textContent = `Average Case: ${complexity.average}`; + document.getElementById("worst-case").textContent = `Worst Case: ${complexity.worst}`; + document.getElementById("space-complexity").textContent = `Space Complexity: ${complexity.space}`; + } const tourSteps = [ { title: "Welcome to Sorting Visualizer", description: "This tour will guide you through the features of our sorting algorithm visualizer.", target: "heading" }, + { + title: "Time Complexity", + description: "This section shows the time and space complexity of the selected sorting algorithm.", + target: "best-case" + }, { title: "Enter Your Array", description: "Type your numbers separated by spaces in this input box.", @@ -491,7 +616,7 @@

{ title: "Start Sorting", description: "Click this button to start the sorting process.", - target: "startSort" + target: "start" }, { title: "Additional Controls", @@ -545,7 +670,17 @@

}); // Start the tour when the page loads - window.addEventListener("load", startTour); + window.addEventListener("load", function() { + loader.style.display = "none"; + startTour(); + }); + - \ No newline at end of file + + From 26fbb4ad06ae639b6d8752b2010e77ae2d562fb2 Mon Sep 17 00:00:00 2001 From: Ayushswirlon Date: Sun, 7 Jul 2024 17:15:34 +0530 Subject: [PATCH 3/4] added the skip button and modify the tour guide --- visual.html | 93 +++++++++++++++++++++++++++++++++++------------------ 1 file changed, 62 insertions(+), 31 deletions(-) diff --git a/visual.html b/visual.html index 2b2b3f4..cca7606 100644 --- a/visual.html +++ b/visual.html @@ -99,7 +99,7 @@ margin: 10px 20px; } .tour-overlay { - position: fixed; + position: relative; top: 0; left: 0; width: 100%; @@ -110,15 +110,16 @@ } .tour-popup { - position: absolute; - background-color: white; - border-radius: 5px; - padding: 20px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); - max-width: 300px; - z-index: 1001; - } - + position: fixed; + background-color: white; + border-radius: 5px; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + max-width: 300px; + z-index: 1001; + max-height: calc(100vh - 40px); /* Ensure it doesn't exceed viewport height */ + overflow-y: auto; /* Allow scrolling if content is too long */ +} .tour-popup h3 { margin-top: 0; color: #333; @@ -135,11 +136,20 @@ padding: 5px 10px; border-radius: 3px; cursor: pointer; + margin-right: 10px; } .tour-popup button:hover { background-color: #0056b3; } + + .tour-popup .skip-btn { + background-color: #dc3545; + } + + .tour-popup .skip-btn:hover { + background-color: #c82333; + } @@ -183,9 +193,11 @@

SORTING VISUALIZATION

+
+