diff --git a/app/visualizer/searching/binarysearch/content.jsx b/app/visualizer/searching/binarysearch/content.jsx index 5de72eb..9c1c214 100644 --- a/app/visualizer/searching/binarysearch/content.jsx +++ b/app/visualizer/searching/binarysearch/content.jsx @@ -9,143 +9,183 @@ const content = () => { ]; const searching = [ - { points : "First middle is 7 (too high)" }, - { points : "Search left half: [1, 3, 5]" }, - { points : "New middle is 3 (too low)" }, - { points : "Search right portion: [5]" }, - { points : "Found at position 2" }, + { points: "First middle is 7 (too high)" }, + { points: "Search left half: [1, 3, 5]" }, + { points: "New middle is 3 (too low)" }, + { points: "Search right portion: [5]" }, + { points: "Found at position 2" }, ]; const steps = [ - {points : "Start with the entire sorted array" }, - {points : "Compare the target with the middle element:", - subpoints : [ + { points: "Start with the entire sorted array" }, + { + points: "Compare the target with the middle element:", + subpoints: [ "If equal, return the position", "If target is smaller, search the left half", - "If target is larger, search the right half" - ] - }, - {points : "Repeat until the element is found or the subarray is empty" }, - {points : 'If not found, return "Not Found"' }, + "If target is larger, search the right half", + ], + }, + { points: "Repeat until the element is found or the subarray is empty" }, + { points: 'If not found, return "Not Found"' }, ]; const complexity = [ - { points : "Best Case: Target is the middle element → O(1)." }, - { points : "Worst Case: Element not present → O(log n) (halves search space each step)." }, + { points: "Best Case: Target is the middle element → O(1)." }, + { + points: + "Worst Case: Element not present → O(log n) (halves search space each step).", + }, ]; - return ( -
-
- {/* What is Binary Search */} -
-

- - What is Binary Search? -

-
-

- {paragraphs[0]} -

+ return ( +
+
+
+ +
+
+ + Powered by{" "} + + Hello World + + +
-
+
+ {/* What is Binary Search */} +
+

+ + What is Binary Search? +

+
+

+ {paragraphs[0]} +

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

- - How Does It Work? -

-
-

- Imagine you have a sorted list of numbers: [1, 3, 5, 7, 9, 11, 13] and you want to find the number 7. -

- -
    -
  1. - Compare 7 with the middle element (7). It matches! Return the position. -
    2. -
  2. - If searching for 5: -
      - {searching.map((item, index) => ( -
    • - {item.points} -
      • - ))} -
    -
    3. -
- -

- {paragraphs[1]} -

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

+ + How Does It Work? +

+
+

+ Imagine you have a sorted list of numbers: [1, 3, 5, 7, 9, 11, 13] + and you want to find the number 7. +

- {/* Algorithm Steps */} -
-

- - Algorithm Steps -

-
-
    - {steps.map((item, index) => ( -
  1. - {item.points} - {item.subpoints && ( +
      +
    1. + Compare 7 with the middle element (7). It matches! Return the + position. +
      2. +
    2. + If searching for 5:
        - {item.subpoints.map((subitem, subindex) => ( -
      • - {subitem} + {searching.map((item, index) => ( +
      • + {item.points}
        • ))}
      - )} -
      3. - ))} -
    -
-
+ + - {/* Time Complexity */} -
-

- - Time Complexity -

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

+ {paragraphs[1]} +

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

- {paragraphs[2]} -

-
-
-
-
-
- ); - }; - - export default content; \ No newline at end of file + {/* Algorithm Steps */} +
+

+ + Algorithm Steps +

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

+ + Time Complexity +

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

+ {paragraphs[2]} +

+
+
+
+ + + ); +}; + +export default content; diff --git a/app/visualizer/searching/binarysearch/page.jsx b/app/visualizer/searching/binarysearch/page.jsx index 6755cc4..1909979 100644 --- a/app/visualizer/searching/binarysearch/page.jsx +++ b/app/visualizer/searching/binarysearch/page.jsx @@ -68,7 +68,7 @@ export default function Page() {
-
+
@@ -86,18 +86,18 @@ export default function Page() {
-
+
-
+

Test Your Knowledge before moving forward!

-
+
@@ -110,7 +110,7 @@ export default function Page() { />
-
+
{ const [selectedAnswer, setSelectedAnswer] = useState(null); const [score, setScore] = useState(0); const [showResult, setShowResult] = useState(false); - const [setQuizCompleted] = useState(false); + const [quizCompleted, setQuizCompleted] = useState(false); const [answers, setAnswers] = useState(Array(questions.length).fill(null)); - const [showExplanation, setShowExplanation] = useState(false); const [showIntro, setShowIntro] = useState(true); const [showSuccessAnimation, setShowSuccessAnimation] = useState(false); - const [penaltyApplied, setPenaltyApplied] = useState(false); const handleAnswerSelect = (optionIndex) => { - if (selectedAnswer !== null) return; setSelectedAnswer(optionIndex); const newAnswers = [...answers]; newAnswers[currentQuestion] = optionIndex; @@ -84,18 +81,9 @@ const BinarySearchQuiz = () => { const handleNextQuestion = () => { if (selectedAnswer === null) return; - if (showExplanation && !penaltyApplied) { - setScore(prevScore => Math.max(0, prevScore - 0.5)); - setPenaltyApplied(true); - } - if (selectedAnswer === questions[currentQuestion].correctAnswer) { setScore(score + 1); } - - setShowExplanation(false); - setPenaltyApplied(false); - if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); setSelectedAnswer(null); @@ -110,7 +98,6 @@ const BinarySearchQuiz = () => { }; const handlePreviousQuestion = () => { - setShowExplanation(false); setCurrentQuestion(currentQuestion - 1); setSelectedAnswer(answers[currentQuestion - 1]); }; @@ -122,9 +109,7 @@ const BinarySearchQuiz = () => { setShowResult(false); setQuizCompleted(false); setAnswers(Array(questions.length).fill(null)); - setShowExplanation(false); setShowIntro(true); - setPenaltyApplied(false); }; const calculateWeakAreas = () => { @@ -293,29 +278,6 @@ const BinarySearchQuiz = () => { ))}
- {selectedAnswer !== null && ( -
- - - {showExplanation && ( - - {questions[currentQuestion].explanation} - - )} - -
- )}
diff --git a/app/visualizer/searching/linearsearch/content.jsx b/app/visualizer/searching/linearsearch/content.jsx index 9225f20..e6b5f9c 100644 --- a/app/visualizer/searching/linearsearch/content.jsx +++ b/app/visualizer/searching/linearsearch/content.jsx @@ -10,26 +10,32 @@ const content = () => { ]; const working = [ - { points : "Start from the first number (5). Is 5 equal to 8? No." }, - { points : "Move to the next number (3). Is 3 equal to 8? No." }, - { points : "Move to the next number (8). Is 8 equal to 8? Yes! Stop here. The position is 2 (or 3 if counting starts from 1)." }, + { points: "Start from the first number (5). Is 5 equal to 8? No." }, + { points: "Move to the next number (3). Is 3 equal to 8? No." }, + { + points: + "Move to the next number (8). Is 8 equal to 8? Yes! Stop here. The position is 2 (or 3 if counting starts from 1).", + }, ]; const complexity = [ - { data : "Best Case: Target is the first element → O(1)" }, - { data : "Worst Case: Target is last or not present → O(n) (checks all elements)" }, + { data: "Best Case: Target is the first element → O(1)" }, + { + data: "Worst Case: Target is last or not present → O(n) (checks all elements)", + }, ]; const algorithm = [ - { points : "Start from the first element." }, - { points : "Compare the current element with the target value.", - subpoints : [ + { points: "Start from the first element." }, + { + points: "Compare the current element with the target value.", + subpoints: [ "If they match, return the position.", "If not, move to the next element.", ], - }, - { points : "Repeat until the end of the list." }, - { points : 'If the element is not found, return "Not Found".' }, + }, + { points: "Repeat until the end of the list." }, + { points: 'If the element is not found, return "Not Found".' }, ]; return ( @@ -44,110 +50,131 @@ const content = () => { >
- Powered by Hello World + + Powered by{" "} + + Hello World + +
-
- {/* What is Linear Search */} -
-

- - What is Linear Search? -

-
-

- {paragraphs[0]} -

-
-
+
+ {/* What is Linear Search */} +
+

+ + What is Linear Search? +

+
+

+ {paragraphs[0]} +

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

- - How Does It Work? -

-
-

- {paragraphs[1]} -

- -
    - {working.map((item, index) => ( -
  1. - {item.points} -
    2. - ))} -
- -

- {paragraphs[2]} -

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

+ + How Does It Work? +

+
+

+ {paragraphs[1]} +

- {/* Algorithm Steps */} -
-

- - Algorithm Steps -

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

- - Time Complexity -

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

+ {paragraphs[2]} +

+
+
-
- 1} - averageCase={(n) => n} - worstCase={(n) => n} - maxN={25} - /> -
- -
-

- {paragraphs[3]} -

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

+ + Algorithm Steps +

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

+ + Time Complexity +

+
+
    + {complexity.map((item, index) => ( +
  • + + {item.data.split(":")[0]}: + + {item.data.split(":")[1]} +
    • + ))} +
+ +
+ 1} + averageCase={(n) => n} + worstCase={(n) => n} + maxN={25} + /> +
+ +
+

+ {paragraphs[3]} +

+
+
+
+
+ ); }; diff --git a/app/visualizer/searching/linearsearch/page.jsx b/app/visualizer/searching/linearsearch/page.jsx index 44b6121..fe12aef 100644 --- a/app/visualizer/searching/linearsearch/page.jsx +++ b/app/visualizer/searching/linearsearch/page.jsx @@ -86,18 +86,18 @@ export default function Page() { -
+
-
+

Test Your Knowledge before moving forward!

-
+
@@ -110,7 +110,7 @@ export default function Page() { />
-
+
{ const [selectedAnswer, setSelectedAnswer] = useState(null); const [score, setScore] = useState(0); const [showResult, setShowResult] = useState(false); - const [setQuizCompleted] = useState(false); + const [quizCompleted, setQuizCompleted] = useState(false); const [answers, setAnswers] = useState(Array(questions.length).fill(null)); - const [showExplanation, setShowExplanation] = useState(false); const [showIntro, setShowIntro] = useState(true); const [showSuccessAnimation, setShowSuccessAnimation] = useState(false); - const [penaltyApplied, setPenaltyApplied] = useState(false); const handleAnswerSelect = (optionIndex) => { - if (selectedAnswer !== null) return; // Prevent changing answer after selection setSelectedAnswer(optionIndex); const newAnswers = [...answers]; newAnswers[currentQuestion] = optionIndex; @@ -83,20 +80,11 @@ const LinearSearchQuiz = () => { const handleNextQuestion = () => { if (selectedAnswer === null) return; - - // Apply penalty if explanation was shown - if (showExplanation && !penaltyApplied) { - setScore(prevScore => Math.max(0, prevScore - 0.5)); - setPenaltyApplied(true); - } if (selectedAnswer === questions[currentQuestion].correctAnswer) { setScore(score + 1); } - - setShowExplanation(false); - setPenaltyApplied(false); - + if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); setSelectedAnswer(null); @@ -111,7 +99,6 @@ const LinearSearchQuiz = () => { }; const handlePreviousQuestion = () => { - setShowExplanation(false); setCurrentQuestion(currentQuestion - 1); setSelectedAnswer(answers[currentQuestion - 1]); }; @@ -123,9 +110,7 @@ const LinearSearchQuiz = () => { setShowResult(false); setQuizCompleted(false); setAnswers(Array(questions.length).fill(null)); - setShowExplanation(false); setShowIntro(true); - setPenaltyApplied(false); }; const calculateWeakAreas = () => { @@ -294,29 +279,6 @@ const LinearSearchQuiz = () => { ))} - {selectedAnswer !== null && ( -
- - - {showExplanation && ( - - {questions[currentQuestion].explanation} - - )} - -
- )}
diff --git a/app/visualizer/sorting/bubblesort/animation.jsx b/app/visualizer/sorting/bubblesort/animation.jsx index 2a3bd7c..f273b4a 100644 --- a/app/visualizer/sorting/bubblesort/animation.jsx +++ b/app/visualizer/sorting/bubblesort/animation.jsx @@ -116,97 +116,97 @@ const BubbleSortVisualizer = () => { }, []); return ( -
-

- Watch Bubble Sort in action as it repeatedly swaps adjacent elements - to sort the array step by step. -

- -
- {/* Controls */} -
-
-
- - { - setArray(arr); - setSorted(false); - resetStats(); - }} - disabled={sorting} - className="w-full" - /> -
-
- - -
-
- - {/* Speed controls */} -
- - Speed: - - setSpeed(parseFloat(e.target.value))} - className="w-24 sm:w-32" +
+

+ Watch Bubble Sort in action as it repeatedly swaps adjacent elements to + sort the array step by step. +

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

- Array Visualization -

- {array.length > 0 ? ( -
- {array.map((value, index) => { - const isComparing = - index === currentIndices.i || index === currentIndices.j; - const isSorted = sorted; - - return ( -
-
+

+ Array Visualization +

+ {array.length > 0 ? ( +
+ {array.map((value, index) => { + const isComparing = + index === currentIndices.i || index === currentIndices.j; + const isSorted = sorted; + + return ( +
+
{ ? "bg-green-400 dark:bg-green-400 border-green-600 dark:border-green-600 dark:text-gray-900" : "bg-blue-400 dark:bg-blue-400 border-blue-600 dark:border-blue-600 dark:text-gray-900" }`} - > - {value} -
-
- {index === currentIndices.i && "i"} - {index === currentIndices.j && "j"} -
+ > + {value}
- ); - })} -
- ) : ( -
- {sorting ? "Sorting..." : "Generate or enter an array to begin"} -
- )} -
+
+ {index === currentIndices.i && "i"} + {index === currentIndices.j && "j"} +
+
+ ); + })} +
+ ) : ( +
+ {sorting ? "Sorting..." : "Generate or enter an array to begin"} +
+ )}
-
+
+
); }; -export default BubbleSortVisualizer; +export default BubbleSortVisualizer; \ No newline at end of file diff --git a/app/visualizer/sorting/bubblesort/content.jsx b/app/visualizer/sorting/bubblesort/content.jsx index ce77ad2..6ba2230 100644 --- a/app/visualizer/sorting/bubblesort/content.jsx +++ b/app/visualizer/sorting/bubblesort/content.jsx @@ -57,8 +57,30 @@ const content = () => { ]; return ( -
-
+
+
+
+ +
+
+ + Powered by{" "} + + Hello World + + +
+
+
{/* What is Bubble Sort */}

@@ -193,7 +215,7 @@ const content = () => { {/* Additional Info */}
-
+

{paragraph[2]}

@@ -205,4 +227,4 @@ const content = () => { ); }; -export default content; +export default content; \ No newline at end of file diff --git a/app/visualizer/sorting/bubblesort/page.jsx b/app/visualizer/sorting/bubblesort/page.jsx index 0047f6d..c9b6b6f 100644 --- a/app/visualizer/sorting/bubblesort/page.jsx +++ b/app/visualizer/sorting/bubblesort/page.jsx @@ -64,7 +64,7 @@ export default function Page() {
-
+
@@ -86,14 +86,14 @@ export default function Page() {
-
+

Test Your Knowledge before moving forward!

-
+
@@ -106,7 +106,7 @@ export default function Page() { />
-
+
{ const [showResult, setShowResult] = useState(false); const [quizCompleted, setQuizCompleted] = useState(false); const [answers, setAnswers] = useState(Array(questions.length).fill(null)); - const [showExplanation, setShowExplanation] = useState(false); const [showIntro, setShowIntro] = useState(true); const [showSuccessAnimation, setShowSuccessAnimation] = useState(false); - const [penaltyApplied, setPenaltyApplied] = useState(false); const handleAnswerSelect = (optionIndex) => { - if (selectedAnswer !== null) return; setSelectedAnswer(optionIndex); const newAnswers = [...answers]; newAnswers[currentQuestion] = optionIndex; @@ -111,18 +108,10 @@ const BubbleSortQuiz = () => { const handleNextQuestion = () => { if (selectedAnswer === null) return; - if (showExplanation && !penaltyApplied) { - setScore((prevScore) => Math.max(0, prevScore - 0.5)); - setPenaltyApplied(true); - } - if (selectedAnswer === questions[currentQuestion].correctAnswer) { setScore(score + 1); } - setShowExplanation(false); - setPenaltyApplied(false); - if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); setSelectedAnswer(null); @@ -137,7 +126,6 @@ const BubbleSortQuiz = () => { }; const handlePreviousQuestion = () => { - setShowExplanation(false); setCurrentQuestion(currentQuestion - 1); setSelectedAnswer(answers[currentQuestion - 1]); }; @@ -149,9 +137,7 @@ const BubbleSortQuiz = () => { setShowResult(false); setQuizCompleted(false); setAnswers(Array(questions.length).fill(null)); - setShowExplanation(false); setShowIntro(true); - setPenaltyApplied(false); }; const calculateWeakAreas = () => { @@ -332,29 +318,7 @@ const BubbleSortQuiz = () => { ))}
- {selectedAnswer !== null && ( -
- - - {showExplanation && ( - - {questions[currentQuestion].explanation} - - )} - -
- )} +
diff --git a/app/visualizer/sorting/insertionsort/animation.jsx b/app/visualizer/sorting/insertionsort/animation.jsx index 6f946a6..49058fc 100644 --- a/app/visualizer/sorting/insertionsort/animation.jsx +++ b/app/visualizer/sorting/insertionsort/animation.jsx @@ -1,15 +1,8 @@ "use client"; import React, { useState, useRef, useEffect } from "react"; import { gsap } from "gsap"; -import Footer from "@/app/components/footer"; import RandomArray from "@/app/components/ui/randomArray"; import CustomArrayInput from "@/app/components/ui/customArrayInput"; -import Content from "@/app/visualizer/sorting/insertionsort/content"; -import ExploreOther from "@/app/components/ui/exploreOther"; -import CodeBlock from "@/app/visualizer/sorting/insertionsort/codeBlock"; -import Quiz from "@/app/visualizer/sorting/insertionsort/quiz"; -import GoBackButton from '@/app/components/ui/goback'; -import BackToTop from "@/app/components/ui/backtotop"; const InsertionSortVisualizer = () => { const [array, setArray] = useState([]); @@ -92,7 +85,11 @@ const InsertionSortVisualizer = () => { const movingBar = barRefs.current[j + 1]; if (movingBar) { await gsap.to(movingBar, { y: -20, duration: 0.2 }); - await gsap.to(movingBar, { x: "+=70", duration: 0.3, ease: "power2.inOut" }); + await gsap.to(movingBar, { + x: "+=70", + duration: 0.3, + ease: "power2.inOut", + }); await gsap.to(movingBar, { y: 0, duration: 0.2 }); gsap.set(movingBar, { clearProps: "transform" }); } @@ -120,7 +117,11 @@ const InsertionSortVisualizer = () => { if (insertBar) { const moveX = (j + 1 - i) * 70; await gsap.to(insertBar, { y: -20, duration: 0.2 }); - await gsap.to(insertBar, { x: moveX, duration: 0.3, ease: "power2.inOut" }); + await gsap.to(insertBar, { + x: moveX, + duration: 0.3, + ease: "power2.inOut", + }); await gsap.to(insertBar, { y: 0, duration: 0.2 }); gsap.set(insertBar, { clearProps: "transform" }); } @@ -169,100 +170,84 @@ const InsertionSortVisualizer = () => { }, []); return ( -
-
- - { /* go back block here */} -
- -
- - { /* main logic here */} -

- Insertion Sort -

-
- -

- Visualize how Insertion Sort builds the final sorted array one element - at a time. -

- -
- {/* Controls */} -
-
-
- - -
-
- - -
-
- - {/* Speed controls */} -
- Speed: - setSpeed(parseFloat(e.target.value))} - className="w-32" +
+

+ Visualize how Insertion Sort builds the final sorted array. +

+ +
+ {/* Controls */} +
+
+
+ + - {speed}x
+
+ + +
+
- {/* Stats */} -
-
-
Comparisons:
-
{comparisons}
-
-
-
Shifts:
-
{swaps}
-
+ {/* Speed controls */} +
+ Speed: + setSpeed(parseFloat(e.target.value))} + className="w-32" + disabled={sorting} + /> + {speed}x +
+ + {/* Stats */} +
+
+
Comparisons:
+
{comparisons}
+
+
+
Shifts:
+
{swaps}
+
- {/* Visualization */} -
-

Array Visualization

- {array.length > 0 ? ( -
- {array.map((value, index) => { - const isCurrent = index === currentIndices.current; - const isComparing = index === currentIndices.comparing; - const isSorted = index <= currentIndices.sortedUpTo || sorted; - - return ( -
-
(barRefs.current[index] = el)} - className={`bar w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 text-lg font-medium + {/* Visualization */} +
+

Array Visualization

+ {array.length > 0 ? ( +
+ {array.map((value, index) => { + const isCurrent = index === currentIndices.current; + const isComparing = index === currentIndices.comparing; + const isSorted = index <= currentIndices.sortedUpTo || sorted; + + return ( +
+
(barRefs.current[index] = el)} + className={`bar w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 text-lg font-medium ${ isCurrent ? "bg-yellow-400 dark:bg-yellow-400 border-yellow-600 dark:border-yellow-600 dark:text-gray-800" @@ -272,91 +257,67 @@ const InsertionSortVisualizer = () => { ? "bg-green-400 dark:bg-green-400 border-green-600 dark:border-green-600 dark:text-gray-800" : "bg-blue-400 dark:bg-blue-400 border-blue-600 dark:border-blue-600 dark:text-gray-800" }`} - > - {value} -
-
- {index} - {isCurrent && " (current)"} - {isComparing && " (comparing)"} - {isSorted && !isCurrent && !isComparing && " (sorted)"} -
+ > + {value} +
+
+ {index} + {isCurrent && " (current)"} + {isComparing && " (comparing)"} + {isSorted && !isCurrent && !isComparing && " (sorted)"}
- ); - })} -
- ) : ( -
- {sorting ? "Sorting..." : "Generate or enter an array to begin"} -
- )} - - {/* Algorithm Steps Visualization */} - {sorting && array.length > 0 && ( -
-

Current Step

-
-
-
- Current element being inserted -
-
-
- Element being compared -
-
-
- Sorted portion
+ ); + })} +
+ ) : ( +
+ {sorting ? "Sorting..." : "Generate or enter an array to begin"} +
+ )} + + {/* Algorithm Steps Visualization */} + {sorting && array.length > 0 && ( +
+

Current Step

+
+
+
+ Current element being inserted
- -
-

- {currentIndices.current >= 0 ? ( - <> - Inserting{" "} - - array[{currentIndices.current}] ={" "} - {array[currentIndices.current]} - {" "} - into the sorted portion (indexes 0 to{" "} - {currentIndices.sortedUpTo}) - - ) : ( - "Starting sort..." - )} -

+
+
+ Element being compared +
+
+
+ Sorted portion
- )} -
-
- { /* quiz block here */} -

- Test Your Knowledge before moving forward! -

- - - - -
-
-
+
+

+ {currentIndices.current >= 0 ? ( + <> + Inserting{" "} + + array[{currentIndices.current}] ={" "} + {array[currentIndices.current]} + {" "} + into the sorted portion (indexes 0 to{" "} + {currentIndices.sortedUpTo}) + + ) : ( + "Starting sort..." + )} +

+
+
+ )} +
- -
-
+
); }; -export default InsertionSortVisualizer; \ No newline at end of file +export default InsertionSortVisualizer; diff --git a/app/visualizer/sorting/insertionsort/content.jsx b/app/visualizer/sorting/insertionsort/content.jsx index acef65e..99eb6d3 100644 --- a/app/visualizer/sorting/insertionsort/content.jsx +++ b/app/visualizer/sorting/insertionsort/content.jsx @@ -1,211 +1,248 @@ -import { time } from "framer-motion"; +"use client"; +import ComplexityGraph from "@/app/components/ui/graph"; const content = () => { const paragraph = [ `Insertion Sort is a simple sorting algorithm that builds the final sorted array one item at a time. It works similarly to how you might sort playing cards in your hands - you take each new card and insert it into its proper position among the already sorted cards.`, `The algorithm maintains a "sorted sublist" that grows with each iteration.`, - `Like Bubble Sort, Insertion Sort is in-place and requires only O(1) additional space.`, `Insertion Sort is often used when the data is nearly sorted (where it approaches O(n) time) or when the dataset is small. Some hybrid algorithms like TimSort use Insertion Sort for small subarrays due to its low overhead.`, ]; const working = [ - { points : "First Element (7):", - subpoints : [ - "Already \"sorted\" as the first item", - "→ [7, 3, 5, 2, 1]", - ], + { + points: "First Element (7):", + subpoints: ['Already "sorted" as the first item', "→ [7, 3, 5, 2, 1]"], }, - { points : "Second Element (3):", - subpoints : [ - "Insert before 7", - "→ [3, 7, 5, 2, 1]", - ], + { + points: "Second Element (3):", + subpoints: ["Insert before 7", "→ [3, 7, 5, 2, 1]"], }, - { points : "Third Element (5):", - subpoints : [ - "Insert between 3 and 7", - "→ [3, 5, 7, 2, 1]", - ], + { + points: "Third Element (5):", + subpoints: ["Insert between 3 and 7", "→ [3, 5, 7, 2, 1]"], }, - { points : "Fourth Element (2):", - subpoints : [ - "Insert at beginning", - "→ [2, 3, 5, 7, 1]", - ], + { + points: "Fourth Element (2):", + subpoints: ["Insert at beginning", "→ [2, 3, 5, 7, 1]"], }, - { points : "Fifth Element (1):", - subpoints : [ - "Insert at beginning", - "→ [1, 2, 3, 5, 7]", - ], + { + points: "Fifth Element (1):", + subpoints: ["Insert at beginning", "→ [1, 2, 3, 5, 7]"], }, ]; const algorithm = [ - { steps : "Start with the second element (consider first element as sorted)" }, - { steps : "Pick the next element (key) from the unsorted portion" }, - { steps : "Compare the key with elements in the sorted portion:", - points : [ + { + steps: "Start with the second element (consider first element as sorted)", + }, + { steps: "Pick the next element (key) from the unsorted portion" }, + { + steps: "Compare the key with elements in the sorted portion:", + points: [ "Shift elements greater than the key one position right", "Stop when you find an element ≤ the key", ], - }, - { steps : "Insert the key in its correct position" }, - { steps : "Repeat until all elements are processed" }, + }, + { steps: "Insert the key in its correct position" }, + { steps: "Repeat until all elements are processed" }, ]; const timeComplexity = [ - { points : "Best Case: Already sorted array → O(n) (only comparisons, no shifts)." }, - { points : "Average Case: Randomly ordered array → O(n²)." }, - { points : "Worst Case: Reverse sorted array → O(n²) (maximum comparisons and shifts)." }, + { + points: + "Best Case: Already sorted array → O(n) (only comparisons, no shifts).", + }, + { points: "Average Case: Randomly ordered array → O(n²)." }, + { + points: + "Worst Case: Reverse sorted array → O(n²) (maximum comparisons and shifts).", + }, ]; const advantages = [ - { points : "Efficient for small datasets (often faster than more complex algorithms for n ≤ 10)" }, - { points : "Stable (doesn't change relative order of equal elements)" }, - { points : "Adaptive (performs well with partially sorted data)" }, - { points : "Online (can sort as it receives input)" }, + { + points: + "Efficient for small datasets (often faster than more complex algorithms for n ≤ 10)", + }, + { points: "Stable (doesn't change relative order of equal elements)" }, + { points: "Adaptive (performs well with partially sorted data)" }, + { points: "Online (can sort as it receives input)" }, ]; - return ( -
-
- {/* What is Insertion Sort */} -
-

- - What is Insertion Sort? -

-
-

- {paragraph[0]} -

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

+ + What is Insertion Sort? +

+
+

+ {paragraph[0]} +

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

- - How Does It Work? -

-
-

- Consider this unsorted array: [7, 3, 5, 2, 1] -

- -
    - {working.map((items, index) => ( -
  1. - {items.points} - {items.subpoints && ( -
      - {items.subpoints.map((subitems, subindex) => ( -
    • - {subitems} -
      • - ))} -
    - )} -
    2. - ))} -
- -

- {paragraph[1]} -

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

+ + How Does It Work? +

+
+

+ Consider this unsorted array: [7, 3, 5, 2, 1] +

- {/* Algorithm Steps */} -
-

- - Algorithm Steps -

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

- - Time Complexity -

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

+ {paragraph[1]} +

+
+
- {/* Space Complexity */} -
-

- - Space Complexity -

-
-

- {paragraph[2]} -

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

+ + Algorithm Steps +

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

- - Advantages -

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

+ + Time Complexity +

+
+
    + {timeComplexity.map((item, index) => ( +
  • + + {item.points.split(":")[0]}: + + {item.points.split(":")[1]} +
    • + ))} +
+
+
+ n} + averageCase={(n) => n * n} + worstCase={(n) => n * n} + maxN={25} + /> +
+
- {/* Additional Info */} -
-
-
-

- {paragraph[3]} -

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

+ + Advantages +

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

+ {paragraph[2]} +

+
+
+
+

+
+ ); +}; + +export default content; diff --git a/app/visualizer/sorting/insertionsort/page.jsx b/app/visualizer/sorting/insertionsort/page.jsx index 795f8b8..301e2ec 100644 --- a/app/visualizer/sorting/insertionsort/page.jsx +++ b/app/visualizer/sorting/insertionsort/page.jsx @@ -1,38 +1,117 @@ import Animation from "@/app/visualizer/sorting/insertionsort/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/insertionsort/content"; +import Quiz from "@/app/visualizer/sorting/insertionsort/quiz"; +import Code from "@/app/visualizer/sorting/insertionsort/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: 'Insertion Sort Algorithm | Learn with Interactive Animations', - description: 'Understand how Insertion Sort works through 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 data structures and algorithms visually and through hands-on coding.', + title: "Insertion Sort Algorithm | Learn with Interactive Animations", + description: + "Understand how Insertion Sort works through 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 data structures and algorithms visually and through hands-on coding.", keywords: [ - 'Insertion Sort Visualizer', - 'Insertion Sort Animation', - 'Insertion Sort Visualization', - 'DSA Insertion Sort', - 'Learn Insertion Sort', - 'Insertion Sort Quiz', - 'Sorting Algorithm Quiz', - 'Sorting Algorithm Visualization', - 'Step by Step Insertion Sort', - 'Interactive DSA Tool', - 'DSA for Beginners', - 'Insertion Sort Explained', - 'Practice Insertion Sort', - 'Interactive Insertion Sort Quiz', - 'Insertion Sort in JavaScript', - 'Insertion Sort in C', - 'Insertion Sort in Python', - 'Insertion Sort in Java', - 'Insertion Sort Code Examples', + "Insertion Sort Visualizer", + "Insertion Sort Animation", + "Insertion Sort Visualization", + "DSA Insertion Sort", + "Learn Insertion Sort", + "Insertion Sort Quiz", + "Sorting Algorithm Quiz", + "Sorting Algorithm Visualization", + "Step by Step Insertion Sort", + "Interactive DSA Tool", + "DSA for Beginners", + "Insertion Sort Explained", + "Practice Insertion Sort", + "Interactive Insertion Sort Quiz", + "Insertion Sort in JavaScript", + "Insertion Sort in C", + "Insertion Sort in Python", + "Insertion Sort in Java", + "Insertion Sort Code Examples", ], - robots: 'index, follow', + robots: "index, follow", }; export default function Page() { - return( + const paths = [ + { name: "Home", href: "/" }, + { name: "Visulaizer", href: "/visualizer" }, + { name: "Insertion Sort", href: "" }, + ]; + + return ( <> - - +
+ +
+ +
+
+
+ +
+
+
+

+ Sorting +

+
+

+ Insertion Sort +

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

+ Test Your Knowledge before moving forward! +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
); -}; \ No newline at end of file +} diff --git a/app/visualizer/sorting/insertionsort/quiz.jsx b/app/visualizer/sorting/insertionsort/quiz.jsx index d5dc32b..19e4959 100644 --- a/app/visualizer/sorting/insertionsort/quiz.jsx +++ b/app/visualizer/sorting/insertionsort/quiz.jsx @@ -1,3 +1,4 @@ +"use client"; import React, { useState, useEffect } from 'react'; import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa'; import { motion, AnimatePresence } from 'framer-motion'; @@ -89,34 +90,26 @@ const InsertionSortQuiz = () => { const [showResult, setShowResult] = useState(false); const [quizCompleted, setQuizCompleted] = useState(false); const [answers, setAnswers] = useState(Array(questions.length).fill(null)); - const [showExplanation, setShowExplanation] = useState(false); const [showIntro, setShowIntro] = useState(true); const [showSuccessAnimation, setShowSuccessAnimation] = useState(false); - const [penaltyApplied, setPenaltyApplied] = useState(false); const handleAnswerSelect = (optionIndex) => { - if (selectedAnswer !== null) return; setSelectedAnswer(optionIndex); - const newAnswers = [...answers]; - newAnswers[currentQuestion] = optionIndex; - setAnswers(newAnswers); }; const handleNextQuestion = () => { if (selectedAnswer === null) return; - - if (showExplanation && !penaltyApplied) { - setScore(prevScore => Math.max(0, prevScore - 0.5)); - setPenaltyApplied(true); - } - if (selectedAnswer === questions[currentQuestion].correctAnswer) { - setScore(score + 1); - } - - setShowExplanation(false); - setPenaltyApplied(false); - + // Update answers and recalculate score from scratch + const newAnswers = [...answers]; + newAnswers[currentQuestion] = selectedAnswer; + setAnswers(newAnswers); + + const newScore = newAnswers.reduce((acc, ans, idx) => { + return ans === questions[idx].correctAnswer ? acc + 1 : acc; + }, 0); + setScore(newScore); + if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); setSelectedAnswer(null); @@ -131,7 +124,6 @@ const InsertionSortQuiz = () => { }; const handlePreviousQuestion = () => { - setShowExplanation(false); setCurrentQuestion(currentQuestion - 1); setSelectedAnswer(answers[currentQuestion - 1]); }; @@ -143,9 +135,7 @@ const InsertionSortQuiz = () => { setShowResult(false); setQuizCompleted(false); setAnswers(Array(questions.length).fill(null)); - setShowExplanation(false); setShowIntro(true); - setPenaltyApplied(false); }; const calculateWeakAreas = () => { @@ -191,7 +181,7 @@ const InsertionSortQuiz = () => { }; return ( -
+
{showIntro ? ( { 0 points for wrong answers -
  • - - -0.5 point penalty for viewing explanations -
  • Earn stars based on your final score (max 5 stars) @@ -324,29 +310,7 @@ const InsertionSortQuiz = () => { ))}
    • - {selectedAnswer !== null && ( -
    - - - {showExplanation && ( - - {questions[currentQuestion].explanation} - - )} - -
    - )} +
    diff --git a/lib/modulesMap.js b/lib/modulesMap.js index 73bf1e1..4803e5e 100644 --- a/lib/modulesMap.js +++ b/lib/modulesMap.js @@ -2,5 +2,6 @@ export const MODULE_MAPS = { linearSearch : "378adcd8-7356-4d10-84cf-1dad1cbd496a", binarySearch : "e527f92a-7962-4b0b-a46a-52ecf08a73ef", bubbleSort : "b1387e6d-ebf8-4b52-9c5d-ab8c94f8eda4", + insertionSort : "f8ae92e2-1371-4852-a615-0354011f8f48", selectionSort : "7dffce41-ff4c-4700-8cfe-04b8793cc25c", } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index dc151ce..a361147 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3167,9 +3167,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001707", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz", - "integrity": "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==", + "version": "1.0.30001733", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001733.tgz", + "integrity": "sha512-e4QKw/O2Kavj2VQTKZWrwzkt3IxOmIlU6ajRb6LP64LHpBo1J67k2Hi4Vu/TgJWsNtynurfS0uK3MaUTCPfu5Q==", "funding": [ { "type": "opencollective",