diff --git a/app/visualizer/sorting/mergesort/animation.jsx b/app/visualizer/sorting/mergesort/animation.jsx index bf20356..3ffdf49 100644 --- a/app/visualizer/sorting/mergesort/animation.jsx +++ b/app/visualizer/sorting/mergesort/animation.jsx @@ -229,7 +229,7 @@ const MergeSortVisualizer = () => {
{/* Controls */} -
+
{ @@ -285,11 +285,11 @@ const MergeSortVisualizer = () => { {/* Stats */}
-
+
Comparisons:
{comparisons}
-
+
Merges:
{swaps}
@@ -297,7 +297,7 @@ const MergeSortVisualizer = () => {
{/* Main Array Visualization */} -
+

Main Array

{array.length > 0 ? (
diff --git a/app/visualizer/sorting/mergesort/codeBlock.jsx b/app/visualizer/sorting/mergesort/codeBlock.jsx index 36541bd..e6b6b34 100644 --- a/app/visualizer/sorting/mergesort/codeBlock.jsx +++ b/app/visualizer/sorting/mergesort/codeBlock.jsx @@ -312,10 +312,10 @@ int main() { initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} - className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300" + className="bg-white dark:bg-neutral-950 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300" > {/* Header */} -
+

diff --git a/app/visualizer/sorting/mergesort/content.jsx b/app/visualizer/sorting/mergesort/content.jsx index d6ff335..c189aa5 100644 --- a/app/visualizer/sorting/mergesort/content.jsx +++ b/app/visualizer/sorting/mergesort/content.jsx @@ -157,9 +157,9 @@ const content = () => {

n * Math.log(n)} - averageCase={(n) => n * Math.log(n)} - worstCase={(n) => n * Math.log(n)} + bestCase={(n) => n * Math.log2(n)} + averageCase={(n) => n * Math.log2(n)} + worstCase={(n) => n * Math.log2(n)} maxN={25} />
diff --git a/app/visualizer/sorting/mergesort/quiz.jsx b/app/visualizer/sorting/mergesort/quiz.jsx index 76ec22b..8ef796c 100644 --- a/app/visualizer/sorting/mergesort/quiz.jsx +++ b/app/visualizer/sorting/mergesort/quiz.jsx @@ -180,7 +180,7 @@ const MergeSortQuiz = () => { }; return ( -
+
{showIntro ? ( { className="text-center" >
-
+

Merge Sort Quiz Challenge

-
+

How it works:

diff --git a/app/visualizer/sorting/quicksort/animation.jsx b/app/visualizer/sorting/quicksort/animation.jsx index bf0aac3..7bbf0f1 100644 --- a/app/visualizer/sorting/quicksort/animation.jsx +++ b/app/visualizer/sorting/quicksort/animation.jsx @@ -1,226 +1,229 @@ -'use client'; -import React, { useState, useRef, useEffect } from 'react'; +"use client"; +import React, { useState, useRef, useEffect } from "react"; import { gsap } from "gsap"; -import Footer from '@/app/components/footer'; -import Content from '@/app/visualizer/sorting/quicksort/content'; -import ArrayGenerator from '@/app/components/ui/randomArray'; -import CustomArrayInput from '@/app/components/ui/customArrayInput'; -import ExploreOther from '@/app/components/ui/exploreOther'; -import CodeBlock from '@/app/visualizer/sorting/quicksort/codeBlock'; -import Quiz from '@/app/visualizer/sorting/quicksort/quiz'; -import GoBackButton from '@/app/components/ui/goback'; -import BackToTop from '@/app/components/ui/backtotop'; +import ArrayGenerator from "@/app/components/ui/randomArray"; +import CustomArrayInput from "@/app/components/ui/customArrayInput"; const QuickSortVisualizer = () => { - const [array, setArray] = useState([]); - const [sorting, setSorting] = useState(false); - const [sorted, setSorted] = useState(false); - const [speed, setSpeed] = useState(1); - const [comparisons, setComparisons] = useState(0); - const [swaps, setSwaps] = useState(0); - const [currentIndices, setCurrentIndices] = useState({ + const [array, setArray] = useState([]); + const [sorting, setSorting] = useState(false); + const [sorted, setSorted] = useState(false); + const [speed, setSpeed] = useState(1); + const [comparisons, setComparisons] = useState(0); + const [swaps, setSwaps] = useState(0); + const [currentIndices, setCurrentIndices] = useState({ + pivot: -1, + left: -1, + right: -1, + partitionIndex: -1, + stack: [], + partitions: [], + }); + const animationRef = useRef(null); + + // Reset all stats and state + const resetStats = () => { + setComparisons(0); + setSwaps(0); + setCurrentIndices({ pivot: -1, left: -1, right: -1, partitionIndex: -1, stack: [], - partitions: [] + partitions: [], }); - const animationRef = useRef(null); - - // Reset all stats and state - const resetStats = () => { - setComparisons(0); - setSwaps(0); - setCurrentIndices({ - pivot: -1, - left: -1, - right: -1, - partitionIndex: -1, - stack: [], - partitions: [] - }); - if (animationRef.current) { - clearTimeout(animationRef.current); - } - }; - - // Partition function for Quick Sort - const partition = async (arr, low, high) => { - const pivot = arr[high]; - let i = low - 1; - - setCurrentIndices(prev => ({ + if (animationRef.current) { + clearTimeout(animationRef.current); + } + }; + + // Partition function for Quick Sort + const partition = async (arr, low, high) => { + const pivot = arr[high]; + let i = low - 1; + + setCurrentIndices((prev) => ({ + ...prev, + pivot: high, + left: low, + right: high - 1, + })); + + for (let j = low; j < high; j++) { + setCurrentIndices((prev) => ({ ...prev, - pivot: high, - left: low, - right: high - 1 + left: j, + right: i, })); - - for (let j = low; j < high; j++) { - setCurrentIndices(prev => ({ - ...prev, - left: j, - right: i - })); - - setComparisons(prev => prev + 1); - await new Promise(resolve => - animationRef.current = setTimeout(resolve, 1000 / speed) - ); - - if (arr[j] < pivot) { - i++; - [arr[i], arr[j]] = [arr[j], arr[i]]; - setSwaps(prev => prev + 1); - setArray([...arr]); - // GSAP animation after swap/visual update - const bars = document.querySelectorAll(".array-bar"); - if (bars.length > 0) { - gsap.fromTo( - bars, - { scale: 1, opacity: 0.5 }, - { scale: 1.1, opacity: 1, duration: 0.3, stagger: 0.05 } - ); - } - await new Promise(resolve => - animationRef.current = setTimeout(resolve, 1000 / speed) + + setComparisons((prev) => prev + 1); + await new Promise( + (resolve) => (animationRef.current = setTimeout(resolve, 1000 / speed)) + ); + + if (arr[j] < pivot) { + i++; + [arr[i], arr[j]] = [arr[j], arr[i]]; + setSwaps((prev) => prev + 1); + setArray([...arr]); + // GSAP animation after swap/visual update + const bars = document.querySelectorAll(".array-bar"); + if (bars.length > 0) { + gsap.fromTo( + bars, + { scale: 1, opacity: 0.5 }, + { scale: 1.1, opacity: 1, duration: 0.3, stagger: 0.05 } ); } - } - - [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]]; - setSwaps(prev => prev + 1); - setArray([...arr]); - // GSAP animation after swap/visual update - const bars = document.querySelectorAll(".array-bar"); - if (bars.length > 0) { - gsap.fromTo( - bars, - { scale: 1, opacity: 0.5 }, - { scale: 1.1, opacity: 1, duration: 0.3, stagger: 0.05 } + await new Promise( + (resolve) => + (animationRef.current = setTimeout(resolve, 1000 / speed)) ); } - await new Promise(resolve => - animationRef.current = setTimeout(resolve, 1000 / speed) + } + + [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]]; + setSwaps((prev) => prev + 1); + setArray([...arr]); + // GSAP animation after swap/visual update + const bars = document.querySelectorAll(".array-bar"); + if (bars.length > 0) { + gsap.fromTo( + bars, + { scale: 1, opacity: 0.5 }, + { scale: 1.1, opacity: 1, duration: 0.3, stagger: 0.05 } ); - - return i + 1; - }; - - // Quick Sort algorithm - const quickSort = async () => { - if (sorted || sorting || array.length === 0) return; - - setSorting(true); - let arr = [...array]; - let stack = []; - let low = 0; - let high = arr.length - 1; - - stack.push({ low, high }); - - while (stack.length > 0) { - const { low, high } = stack.pop(); - - if (low < high) { - // Show current partition being processed - setCurrentIndices(prev => ({ - ...prev, - partitions: [...prev.partitions, { low, high }] - })); - - const pi = await partition(arr, low, high); - - setCurrentIndices(prev => ({ - ...prev, - partitionIndex: pi, - stack: [...stack], - pivot: -1, - left: -1, - right: -1 - })); - - // Push right subarray first so left is processed first - stack.push({ low: pi + 1, high }); - stack.push({ low, high: pi - 1 }); - - await new Promise(resolve => - animationRef.current = setTimeout(resolve, 1000 / speed) - ); - - // Remove completed partition - setCurrentIndices(prev => ({ - ...prev, - partitions: prev.partitions.filter(p => !(p.low === low && p.high === high)) - })); - } + } + await new Promise( + (resolve) => (animationRef.current = setTimeout(resolve, 1000 / speed)) + ); + + return i + 1; + }; + + // Quick Sort algorithm + const quickSort = async () => { + if (sorted || sorting || array.length === 0) return; + + setSorting(true); + let arr = [...array]; + let stack = []; + let low = 0; + let high = arr.length - 1; + + stack.push({ low, high }); + + while (stack.length > 0) { + const { low, high } = stack.pop(); + + if (low < high) { + // Show current partition being processed + setCurrentIndices((prev) => ({ + ...prev, + partitions: [...prev.partitions, { low, high }], + })); + + const pi = await partition(arr, low, high); + + setCurrentIndices((prev) => ({ + ...prev, + partitionIndex: pi, + stack: [...stack], + pivot: -1, + left: -1, + right: -1, + })); + + // Push right subarray first so left is processed first + stack.push({ low: pi + 1, high }); + stack.push({ low, high: pi - 1 }); + + await new Promise( + (resolve) => + (animationRef.current = setTimeout(resolve, 1000 / speed)) + ); + + // Remove completed partition + setCurrentIndices((prev) => ({ + ...prev, + partitions: prev.partitions.filter( + (p) => !(p.low === low && p.high === high) + ), + })); } - - setArray([...arr]); - setSorting(false); - setSorted(true); - setCurrentIndices({ - pivot: -1, - left: -1, - right: -1, - partitionIndex: -1, - stack: [], - partitions: [] - }); - }; - - // Reset everything - const reset = () => { + } + + setArray([...arr]); + setSorting(false); + setSorted(true); + setCurrentIndices({ + pivot: -1, + left: -1, + right: -1, + partitionIndex: -1, + stack: [], + partitions: [], + }); + }; + + // Reset everything + const reset = () => { + if (animationRef.current) { + clearTimeout(animationRef.current); + } + setArray([]); + setSorting(false); + setSorted(false); + resetStats(); + }; + + // Clean up on unmount + useEffect(() => { + return () => { if (animationRef.current) { clearTimeout(animationRef.current); } - setArray([]); - setSorting(false); - setSorted(false); - resetStats(); }; - - // Clean up on unmount - useEffect(() => { - return () => { - if (animationRef.current) { - clearTimeout(animationRef.current); - } - }; - }, []); - - // Function to render partition visualization - const renderPartitions = () => { - if (currentIndices.partitions.length === 0) return null; - - return ( -
-

Current Partitions

-
- {currentIndices.partitions.map((partition, idx) => { - const subArray = array.slice(partition.low, partition.high + 1); - return ( -
-
- - Partition {idx + 1}: Indexes {partition.low} to {partition.high} - - - {subArray.length} elements - -
-
- {subArray.map((value, subIdx) => { - const originalIndex = partition.low + subIdx; - const isPivot = originalIndex === currentIndices.pivot; - const isLeft = originalIndex === currentIndices.left; - const isRight = originalIndex === currentIndices.right; - - return ( -
-
{ + if (currentIndices.partitions.length === 0) return null; + + return ( +
+
+ {currentIndices.partitions.map((partition, idx) => { + const subArray = array.slice(partition.low, partition.high + 1); + return ( +
+
+ + Partition {idx + 1}: Indexes {partition.low} to{" "} + {partition.high} + + + {subArray.length} elements + +
+
+ {subArray.map((value, subIdx) => { + const originalIndex = partition.low + subIdx; + const isPivot = originalIndex === currentIndices.pivot; + const isLeft = originalIndex === currentIndices.left; + const isRight = originalIndex === currentIndices.right; + + return ( +
+
{ ? "bg-blue-400 dark:bg-blue-600 border-blue-600 dark:border-blue-400" : "bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600" }`} - > - {value} -
-
- [{originalIndex}] -
+ > + {value}
- ); - })} -
+
+ [{originalIndex}] +
+
+ ); + })}
- ); - })} -
+
+ ); + })}
- ); - }; - - return ( -
-
- {/* go back block here */} -
- -
+
+ ); + }; - {/* main logic here */} -

- Quick Sort -

-
- -

- Visualize Quick Sort's divide-and-conquer approach with interactive - partitions -

- -
- {/* Controls */} -
-
-
- { - setArray(newArray); - setSorted(false); - resetStats(); - }} - disabled={sorting} - /> - { - setArray(newArray); - setSorted(false); - resetStats(); - }} - disabled={sorting} - /> -
-
- - -
-
+ return ( +
+

+ Visualize Quick Sort's divide-and-conquer approach with interactive + partitions +

- {/* Speed controls */} -
- Speed: - setSpeed(parseFloat(e.target.value))} - className="w-32" - disabled={sorting} - /> - - {speed}x - -
+
+ {/* Controls */} +
+
+
+ { + setArray(newArray); + setSorted(false); + resetStats(); + }} + disabled={sorting} + /> + { + setArray(newArray); + setSorted(false); + resetStats(); + }} + disabled={sorting} + /> +
+
+ + +
+
- {/* Stats */} -
-
-
Comparisons:
-
{comparisons}
-
-
-
Swaps:
-
{swaps}
-
-
+ {/* Speed controls */} +
+ Speed: + setSpeed(parseFloat(e.target.value))} + className="w-32" + disabled={sorting} + /> + {speed}x +
+ + {/* Stats */} +
+
+
Comparisons:
+
{comparisons}
+
+
+
Swaps:
+
{swaps}
+
+
- {/* Main Array Visualization */} -
-

Main Array

- {array.length > 0 ? ( -
- {array.map((value, index) => { - const isPivot = index === currentIndices.pivot; - const isLeft = index === currentIndices.left; - const isRight = index === currentIndices.right; - const isPartition = index === currentIndices.partitionIndex; - const isInPartition = currentIndices.partitions.some( - (p) => index >= p.low && index <= p.high - ); + {/* Main Array Visualization */} +
+

Array Visualization

+ {array.length > 0 ? ( +
+ {array.map((value, index) => { + const isPivot = index === currentIndices.pivot; + const isLeft = index === currentIndices.left; + const isRight = index === currentIndices.right; + const isPartition = index === currentIndices.partitionIndex; + const isInPartition = currentIndices.partitions.some( + (p) => index >= p.low && index <= p.high + ); - return ( -
-
+
{ ? "bg-green-400 dark:bg-green-600 border-green-600 dark:border-green-400" : "bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600" }`} - > - {value} -
-
- {index} - {isPivot && " (pivot)"} - {isLeft && " (left)"} - {isRight && " (right)"} - {isPartition && " (partition)"} -
-
- ); - })} -
- ) : ( -
- {sorting - ? "Sorting..." - : "Generate or enter an array to begin"} -
- )} + > + {value} +
+
+ {index} + {isPivot && " (pivot)"} + {isLeft && " (left)"} + {isRight && " (right)"} + {isPartition && " (partition)"} +
+
+ ); + })}
- - {/* Partition Visualization */} - {renderPartitions()} - - {/* Algorithm Explanation */} -
-

- How Quick Sort Works -

-
-
    -
  1. - Select a pivot element - (here we use the last element) -
    2. -
  2. - Partition the array so elements{" "} - left of pivot are - smaller and elements{" "} - right are larger -
    3. -
  3. - The partition index{" "} - marks where the pivot belongs in the sorted array -
    4. -
  4. - Recursively apply the same process to the left and right - partitions -
    5. -
  5. - When all partitions are sorted, the entire array is sorted -
    6. -
-
+ ) : ( +
+ {sorting ? "Sorting..." : "Generate or enter an array to begin"}
-
+ )} +
- {/* quiz block here */} -

- Test Your Knowledge before moving forward! -

- - - - -
-
-
+ {/* Partition Visualization */} +
+

Partion Array

+ {renderPartitions()}
- -
- ); - }; - - export default QuickSortVisualizer; \ No newline at end of file + + ); +}; + +export default QuickSortVisualizer; \ No newline at end of file diff --git a/app/visualizer/sorting/quicksort/codeBlock.jsx b/app/visualizer/sorting/quicksort/codeBlock.jsx index 4a370b6..69c87d0 100644 --- a/app/visualizer/sorting/quicksort/codeBlock.jsx +++ b/app/visualizer/sorting/quicksort/codeBlock.jsx @@ -259,10 +259,10 @@ int main() { initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} - className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300" + className="bg-white dark:bg-neutral-950 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300" > {/* Header */} -
+

diff --git a/app/visualizer/sorting/quicksort/content.jsx b/app/visualizer/sorting/quicksort/content.jsx index daec800..0ec99b4 100644 --- a/app/visualizer/sorting/quicksort/content.jsx +++ b/app/visualizer/sorting/quicksort/content.jsx @@ -1,263 +1,332 @@ +"use client"; +import ComplexityGraph from "@/app/components/ui/graph"; + const content = () => { const paragraphs = [ `Quick Sort is an efficient, comparison-based sorting algorithm that follows the divide-and-conquer approach. It works by selecting a 'pivot' element from the array and partitioning the other elements into two sub-arrays according to whether they are less than or greater than the pivot. The sub-arrays are then recursively sorted.`, `The log n factor comes from the division steps when partitions are balanced. The n² occurs when the pivot selection consistently creates unbalanced partitions.`, `Quick Sort is O(log n) space complexity for the call stack in the average case, but can degrade to O(n) in the worst case with unbalanced partitions. It is generally considered an in-place algorithm as it doesn't require significant additional space.`, - `Quick Sort is the algorithm of choice for most standard library sorting implementations (like C's qsort, Java's Arrays.sort for primitives) due to its excellent average-case performance. It's particularly effective for large datasets that fit in memory.` + `Quick Sort is the algorithm of choice for most standard library sorting implementations (like C's qsort, Java's Arrays.sort for primitives) due to its excellent average-case performance. It's particularly effective for large datasets that fit in memory.`, ]; - const working =[ - { steps : "Partitioning Phase:", - points : [ + const working = [ + { + steps: "Partitioning Phase:", + points: [ "Choose last element as pivot (70)", "Rearrange: elements < pivot on left, > pivot on right → [10, 30, 40, 50] [70] [80, 90]", ], - }, - { steps : "Recursive Phase:", - points : [ + }, + { + steps: "Recursive Phase:", + points: [ "Apply same process to left sub-array [10, 30, 40, 50]", "Apply same process to right sub-array [80, 90]", "Combine results: [10, 30, 40, 50, 70, 80, 90]", ], - } + }, ]; const algorithm = [ - { steps : "Choose Pivot:", - points : [ + { + steps: "Choose Pivot:", + points: [ "Select an element as pivot (commonly last/first/random element)", ], - }, - { steps : "Partition:", - points : [ + }, + { + steps: "Partition:", + points: [ "Reorder array so elements < pivot come before it", "Elements > pivot come after it", "Pivot is now in its final sorted position", ], - }, - { steps : "Recurse:", - points : [ + }, + { + steps: "Recurse:", + points: [ "Apply quick sort to left sub-array (elements < pivot)", "Apply quick sort to right sub-array (elements > pivot)", ], - }, + }, ]; const timeComplexity = [ - { points : "Best Case: O(n log n) (balanced partitions)" }, - { points : "Average Case: O(n log n)" }, - { points : "Worst Case: O(n²) (unbalanced partitions)" }, + { points: "Best Case: O(n log n) (balanced partitions)" }, + { points: "Average Case: O(n log n)" }, + { points: "Worst Case: O(n²) (unbalanced partitions)" }, ]; const strategies = [ - { strategy : "Last element" }, - { strategy : "First element" }, - { strategy : "Random element" }, - { strategy : "Median-of-three" }, - { strategy : "Middle element" }, + { strategy: "Last element" }, + { strategy: "First element" }, + { strategy: "Random element" }, + { strategy: "Median-of-three" }, + { strategy: "Middle element" }, ]; const strategiesDetails = [ - { details : "Simple but can lead to worst-case on sorted arrays" }, - { details : "Similar issues as last element" }, - { details : "Reduces chance of worst-case scenarios" }, - { details : "Takes median of first, middle, last elements" }, - { details : "Often provides good balance" }, - ] + { details: "Simple but can lead to worst-case on sorted arrays" }, + { details: "Similar issues as last element" }, + { details: "Reduces chance of worst-case scenarios" }, + { details: "Takes median of first, middle, last elements" }, + { details: "Often provides good balance" }, + ]; const CombinedDeatils = strategies.map((item, index) => ({ - strategy : item.strategy, - details : strategiesDetails[index].details, - })) + strategy: item.strategy, + details: strategiesDetails[index].details, + })); - { /* Advantages */} + { + /* Advantages */ + } const advantages = [ - { points : "Fastest general-purpose in-memory sorting algorithm in practice" }, - { points : "In-place algorithm (requires minimal additional memory)" }, - { points : "Cache-efficient due to sequential memory access" }, - { points : "Can be easily parallelized for better performance" }, - ] + { + points: "Fastest general-purpose in-memory sorting algorithm in practice", + }, + { points: "In-place algorithm (requires minimal additional memory)" }, + { points: "Cache-efficient due to sequential memory access" }, + { points: "Can be easily parallelized for better performance" }, + ]; - { /* Disadvantages */} + { + /* Disadvantages */ + } const disadvantages = [ - { points : "Not stable (relative order of equal elements may change)" }, - { points : "Worst-case O(n²) performance (though rare with proper pivot selection)" }, - { points : "Performance depends heavily on pivot selection strategy" }, - { points : "Not ideal for linked lists (works best with arrays)" }, - ] + { points: "Not stable (relative order of equal elements may change)" }, + { + points: + "Worst-case O(n²) performance (though rare with proper pivot selection)", + }, + { points: "Performance depends heavily on pivot selection strategy" }, + { points: "Not ideal for linked lists (works best with arrays)" }, + ]; - return ( -
-
- {/* What is Quick Sort */} -
-

- - What is Quick Sort? -

-
-

- {paragraphs[0]} -

+ return ( +
+
+
+ +
+
+ + Powered by{" "} + + Hello World + + +
-
+
+ {/* What is Quick Sort */} +
+

+ + What is Quick Sort? +

+
+

+ {paragraphs[0]} +

+
+
- {/* How Does It Work */} -
-

- - How Does It Work? -

-
-

- Consider this unsorted array: [10, 80, 30, 90, 40, 50, 70] -

- -
    - {working.map((item, index) => ( -
  • - {item.steps} - {item.points && ( -
      - {item.points.map((subitem, subindex) => ( -
    1. - {subitem} -
      2. - ))} -
    - )} -
    • - ))} -
-
-
+ {/* How Does It Work */} +
+

+ + How Does It Work? +

+
+

+ Consider this unsorted array: [10, 80, 30, 90, 40, 50, 70] +

- {/* Algorithm Steps */} -
-

- - Algorithm Steps -

-
-
    - {algorithm.map((item, index) => ( -
  1. - {item.steps} - {item.points && ( -
      - {item.points.map((subitem, subindex) => ( -
    • - {subitem} -
      • - ))} -
    - )} -
    2. - ))} -
-
-
+
    + {working.map((item, index) => ( +
  • + {item.steps} + {item.points && ( +
      + {item.points.map((subitem, subindex) => ( +
    1. + {subitem} +
      2. + ))} +
    + )} +
    • + ))} +
+
+
- {/* Time Complexity */} -
-

- - Time Complexity -

-
-
    - {timeComplexity.map((item, index) => ( -
  • - - {item.points.split(':')[0]}: - - {item.points.split(':')[1]} -
    • - ))} -
-

- {paragraphs[1]} -

-
-
+ {/* Algorithm Steps */} +
+

+ + Algorithm Steps +

+
+
    + {algorithm.map((item, index) => ( +
  1. + {item.steps} + {item.points && ( +
      + {item.points.map((subitem, subindex) => ( +
    • + {subitem} +
      • + ))} +
    + )} +
    2. + ))} +
+
+
- {/* Space Complexity */} -
-

- - Space Complexity -

-
-

- {paragraphs[2]} -

-
-
+ {/* Time Complexity */} +
+

+ + Time Complexity +

+
+
    + {timeComplexity.map((item, index) => ( +
  • + + {item.points.split(":")[0]}: + + {item.points.split(":")[1]} +
    • + ))} +
+

+ {paragraphs[1]} +

+
+ n * Math.log2(n)} + averageCase={(n) => n * Math.log2(n)} + worstCase={(n) => n * n} + maxN={25} + /> +
+
+
- {/* Advantages */} -
-

- - Advantages -

-
-
    - {advantages.map((item, index) => ( -
  • - {item.points} -
    • - ))} -
-
-
+ {/* Space Complexity */} +
+

+ + Space Complexity +

+
+

+ {paragraphs[2]} +

+
+
- {/* Disadvantages */} -
-

- - Disadvantages -

-
-
    - {disadvantages.map((item, index) => ( -
  • - {item.points} -
    • - ))} -
-
-
+ {/* Advantages */} +
+

+ + Advantages +

+
+
    + {advantages.map((item, index) => ( +
  • + {item.points} +
    • + ))} +
+
+
- {/* Pivot Selection Strategies */} -
-

- - Pivot Selection Strategies -

-
-
    - {CombinedDeatils.map((item, index) => ( -
  • - {item.strategy}: {item.details} -
    • - ))} -
-
-
+ {/* Disadvantages */} +
+

+ + Disadvantages +

+
+
    + {disadvantages.map((item, index) => ( +
  • + {item.points} +
    • + ))} +
+
+
- {/* Additional Info */} -
-
-
-

- {paragraphs[3]} -

-
-
-
-
-
- ); - }; - - export default content; \ No newline at end of file + {/* Pivot Selection Strategies */} +
+

+ + Pivot Selection Strategies +

+
+
    + {CombinedDeatils.map((item, index) => ( +
  • + {item.strategy}:{" "} + {item.details} +
    • + ))} +
+
+
+ + {/* Additional Info */} +
+
+
+

+ {paragraphs[3]} +

+
+
+
+ + + ); +}; + +export default content; diff --git a/app/visualizer/sorting/quicksort/page.jsx b/app/visualizer/sorting/quicksort/page.jsx index 77776ac..4fcb0ae 100644 --- a/app/visualizer/sorting/quicksort/page.jsx +++ b/app/visualizer/sorting/quicksort/page.jsx @@ -1,37 +1,132 @@ import Animation from "@/app/visualizer/sorting/quicksort/animation"; import Navbar from "@/app/components/navbarinner"; +import Breadcrumbs from "@/app/components/ui/Breadcrumbs"; +import ArticleActions from "@/app/components/ui/ArticleActions"; +import Content from "@/app/visualizer/sorting/quicksort/content"; +import Quiz from "@/app/visualizer/sorting/quicksort/quiz"; +import Code from "@/app/visualizer/sorting/quicksort/codeBlock"; +import ExploreOther from "@/app/components/ui/exploreOther"; +import BackToTopButton from "@/app/components/ui/backtotop"; +import Footer from "@/app/components/footer"; +import ModuleCard from "@/app/components/ui/ModuleCard"; +import { MODULE_MAPS } from "@/lib/modulesMap"; export const metadata = { - title: 'Quick Sort Visualizer & Quiz | Fast Sorting Algorithm Animation with Code in JS, C, Python, Java', - description: 'Learn how Quick Sort works with visual, step-by-step animations, interactive practice, and a quiz to test your understanding. Includes code examples in JavaScript, C, Python, and Java. Perfect for mastering this efficient divide-and-conquer algorithm during DSA preparation.', + title: + "Quick Sort Algorithm | Learn with Interactive Animations", + description: + "Learn how Quick Sort works with step-by-step animations and test your knowledge with an interactive quiz. Includes code examples in JavaScript, C, Python, and Java. Perfect for beginners learning this efficient divide-and-conquer sorting algorithm visually and through hands-on coding.", keywords: [ - 'Quick Sort Visualizer', - 'Quick Sort Animation', - 'Quick Sort Algorithm', - 'Quick Sort Quiz', - 'Sorting Algorithm Quiz', - 'Sorting Algorithm Visualization', - 'DSA Quick Sort', - 'Learn Quick Sort', - 'Divide and Conquer Sorting', - 'Interactive Sorting Tool', - 'Practice Quick Sort', - 'Test Quick Sort Knowledge', - 'DSA for Beginners', - 'Quick Sort in JavaScript', - 'Quick Sort in C', - 'Quick Sort in Python', - 'Quick Sort in Java', - 'Quick Sort Code Examples', + "Quick Sort Visualizer", + "Quick Sort Animation", + "Quick Sort Visualization", + "Quick Sort Algorithm", + "Quick Sort Quiz", + "Sorting Algorithm Quiz", + "Divide and Conquer Sorting", + "Sorting Algorithm Visualization", + "Learn Quick Sort", + "DSA Quick Sort", + "Practice Quick Sort", + "Interactive Quick Sort Tool", + "Test Quick Sort Knowledge", + "Quick Sort in JavaScript", + "Quick Sort in C", + "Quick Sort in Python", + "Quick Sort in Java", + "Quick Sort Code Examples", ], robots: "index, follow", + openGraph: { + images: [ + { + url: "/og/sorting/quickSort.png", + width: 1200, + height: 630, + alt: "Quick Sort Algorithm Visualization", + }, + ], + }, }; export default function Page() { - return( + const paths = [ + { name: "Home", href: "/" }, + { name: "Visualizer", href: "/visualizer" }, + { name: "Quick Sort", href: "" }, + ]; + + return ( <> - - +
+ +
+
+
+
+ +
+
+
+

+ Sorting +

+
+

+ Quick Sort +

+ +
+
+ +
+ +
+ +
+ +
+

+ Test Your Knowledge before moving forward! +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +