diff --git a/app/visualizer/page.jsx b/app/visualizer/page.jsx index 4da9ed2..5c462ec 100644 --- a/app/visualizer/page.jsx +++ b/app/visualizer/page.jsx @@ -55,6 +55,16 @@ export const metadata = { 'DSA with Code' ], robots: 'index, follow', + openGraph: { + images: [ + { + url: "/og/visualizer.png", + width: 1200, + height: 630, + alt: "Algorithm Visualization", + }, + ], + }, }; const sections = [ diff --git a/app/visualizer/searching/binarysearch/page.jsx b/app/visualizer/searching/binarysearch/page.jsx index fb67b3f..4d919b5 100644 --- a/app/visualizer/searching/binarysearch/page.jsx +++ b/app/visualizer/searching/binarysearch/page.jsx @@ -44,7 +44,7 @@ export const metadata = { openGraph: { images: [ { - url: "/og/binarySearch.png", + url: "/og/searching/binarySearch.png", width: 1200, height: 630, alt: "Binary Search Algorithm Visualization", diff --git a/app/visualizer/searching/linearsearch/page.jsx b/app/visualizer/searching/linearsearch/page.jsx index b40237f..8ef3263 100644 --- a/app/visualizer/searching/linearsearch/page.jsx +++ b/app/visualizer/searching/linearsearch/page.jsx @@ -44,7 +44,7 @@ export const metadata = { openGraph: { images: [ { - url: "/og/linearSearch.png", + url: "/og/searching/linearSearch.png", width: 1200, height: 630, alt: "Linear Search Algorithm Visualization", diff --git a/app/visualizer/sorting/insertionsort/animation.jsx b/app/visualizer/sorting/insertionsort/animation.jsx index 49058fc..a72f2e1 100644 --- a/app/visualizer/sorting/insertionsort/animation.jsx +++ b/app/visualizer/sorting/insertionsort/animation.jsx @@ -234,7 +234,7 @@ const InsertionSortVisualizer = () => { {/* Visualization */} -
+

Array Visualization

{array.length > 0 ? (
diff --git a/app/visualizer/sorting/insertionsort/codeBlock.jsx b/app/visualizer/sorting/insertionsort/codeBlock.jsx index 8f33ae5..22eeda9 100644 --- a/app/visualizer/sorting/insertionsort/codeBlock.jsx +++ b/app/visualizer/sorting/insertionsort/codeBlock.jsx @@ -226,10 +226,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/insertionsort/page.jsx b/app/visualizer/sorting/insertionsort/page.jsx index 1a67094..c805310 100644 --- a/app/visualizer/sorting/insertionsort/page.jsx +++ b/app/visualizer/sorting/insertionsort/page.jsx @@ -124,4 +124,4 @@ export default function Page() {
); -} +} \ No newline at end of file diff --git a/app/visualizer/sorting/insertionsort/quiz.jsx b/app/visualizer/sorting/insertionsort/quiz.jsx index 19e4959..642ce01 100644 --- a/app/visualizer/sorting/insertionsort/quiz.jsx +++ b/app/visualizer/sorting/insertionsort/quiz.jsx @@ -181,7 +181,7 @@ const InsertionSortQuiz = () => { }; return ( -
+
{showIntro ? ( { className="text-center" >
-
+

Insertion Sort Quiz Challenge

-
+

How it works:

diff --git a/app/visualizer/sorting/mergesort/animation.jsx b/app/visualizer/sorting/mergesort/animation.jsx index 985f6a6..bf20356 100644 --- a/app/visualizer/sorting/mergesort/animation.jsx +++ b/app/visualizer/sorting/mergesort/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 Content from "@/app/visualizer/sorting/mergesort/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/mergesort/codeBlock"; -import Quiz from "@/app/visualizer/sorting/mergesort/quiz"; -import GoBackButton from "@/app/components/ui/goback"; -import BackToTop from "@/app/components/ui/backtotop"; const MergeSortVisualizer = () => { const [array, setArray] = useState([]); @@ -228,20 +221,7 @@ const MergeSortVisualizer = () => { return ( -
-
- - { /* go back block here */} -
- -
- - { /* main logic here */} -

- Merge Sort -

-
- +

Visualize the divide-and-conquer approach of Merge Sort with recursive splitting and merging. @@ -364,57 +344,8 @@ const MergeSortVisualizer = () => {

)}
- - {/* Enhanced Recursion Tree */} - - {/* Algorithm Explanation with Visual Guide */} -
-

Merge Sort Process

-
-
-

Steps:

-
    -
  1. - Divide array into halves recursively until single elements -
    2. -
  2. Merge adjacent subarrays in sorted order
    3. -
  3. Continue merging until whole array is sorted
    4. -
-
-
-
- - { /* quiz block here */} -

- Test Your Knowledge before moving forward! -

- - - - -
-
-
- -
-
); }; diff --git a/app/visualizer/sorting/mergesort/content.jsx b/app/visualizer/sorting/mergesort/content.jsx index 4e73d82..d6ff335 100644 --- a/app/visualizer/sorting/mergesort/content.jsx +++ b/app/visualizer/sorting/mergesort/content.jsx @@ -1,3 +1,6 @@ +"use client"; +import ComplexityGraph from "@/app/components/ui/graph"; + const content = () => { const paragraph = [ `Merge Sort is an efficient, stable, comparison-based sorting algorithm that follows the divide-and-conquer approach. It works by recursively dividing the unsorted list into sublists until each sublist contains a single element, then repeatedly merges these sublists to produce new sorted sublists until there is only one sorted list remaining.`, @@ -7,42 +10,59 @@ const content = () => { ]; const algorithm = [ - { points : "Divide:", - subpoints : [ + { + points: "Divide:", + subpoints: [ "Find the middle point to divide the array into two halves", "Recursively call merge sort on the first half", "Recursively call merge sort on the second half", ], }, - { points : "Merge:", - subpoints : [ + { + points: "Merge:", + subpoints: [ "Create temporary arrays for both halves", "Compare elements from each half and merge them in order", "Copy any remaining elements from either half", ], - }, + }, ]; const timeComplexity = [ - { points : "Best Case: O(n log n) (already sorted, but still needs all comparisons)" }, - { points : "Average Case: O(n log n)" }, - { points : "Worst Case: O(n log n) (consistent performance)" }, + { + points: + "Best Case: O(n log n) (already sorted, but still needs all comparisons)", + }, + { points: "Average Case: O(n log n)" }, + { points: "Worst Case: O(n log n) (consistent performance)" }, ]; const advantages = [ - { points : "Stable sorting (maintains relative order of equal elements)" }, - { points : "Excellent for large datasets (consistent O(n log n) performance)" }, - { points : "Well-suited for external sorting (sorting data too large for RAM)" }, - { points : "Easily parallelizable (divide steps can be done concurrently)" }, + { points: "Stable sorting (maintains relative order of equal elements)" }, + { + points: + "Excellent for large datasets (consistent O(n log n) performance)", + }, + { + points: + "Well-suited for external sorting (sorting data too large for RAM)", + }, + { points: "Easily parallelizable (divide steps can be done concurrently)" }, ]; const disadvantages = [ - { points : "Requires O(n) additional space (not in-place)" }, - { points : "Slower than O(n²) algorithms for very small datasets due to recursion overhead" }, - { points : "Not as cache-efficient as some other algorithms (e.g., QuickSort)" }, + { points: "Requires O(n) additional space (not in-place)" }, + { + points: + "Slower than O(n²) algorithms for very small datasets due to recursion overhead", + }, + { + points: + "Not as cache-efficient as some other algorithms (e.g., QuickSort)", + }, ]; - return ( + return (
@@ -67,128 +87,151 @@ const content = () => {
- {/* What is Merge Sort */} -
-

- - What is Merge Sort? -

-
-

- {paragraph[0]} -

-
-
+ {/* What is Merge Sort */} +
+

+ + What is Merge Sort? +

+
+

+ {paragraph[0]} +

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

- - Algorithm Steps -

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

+ + Algorithm Steps +

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

- - Time Complexity -

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

- {paragraph[1]} -

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

+ + Time Complexity +

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

+ {paragraph[1]} +

+
+ n * Math.log(n)} + averageCase={(n) => n * Math.log(n)} + worstCase={(n) => n * Math.log(n)} + maxN={25} + /> +
+
+
- {/* Space Complexity */} -
-

- - Space Complexity -

-
-

- {paragraph[2]} -

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

+ + Space Complexity +

+
+

+ {paragraph[2]} +

+
+
- {/* Advantages */} -
-

- - Advantages -

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

+ + Advantages +

+
+
    + {advantages.map((items, index) => ( +
  • + {items.points} +
    • + ))} +
+
+
- {/* Disadvantages */} -
-

- - Disadvantages -

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

+ + Disadvantages +

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

- {paragraph[3]} -

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

+ {paragraph[3]} +

+
+
+
+ + + ); +}; + +export default content; diff --git a/app/visualizer/sorting/mergesort/page.jsx b/app/visualizer/sorting/mergesort/page.jsx index f16bb05..41116fa 100644 --- a/app/visualizer/sorting/mergesort/page.jsx +++ b/app/visualizer/sorting/mergesort/page.jsx @@ -1,37 +1,131 @@ import Animation from "@/app/visualizer/sorting/mergesort/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/mergesort/content"; +import Quiz from "@/app/visualizer/sorting/mergesort/quiz"; +import Code from "@/app/visualizer/sorting/mergesort/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: 'Merge Sort Algorithm | Step-by-Step Algorithm Animation', - description: 'Explore how Merge Sort works with interactive, step-by-step visualizations, hands-on practice, and a quiz to test your understanding. Includes code examples in JavaScript, C, Python, and Java. Ideal for beginners learning efficient divide-and-conquer sorting algorithms.', + title: "Merge Sort Algorithm | Learn with Interactive Animations", + description: + "Understand how Merge 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 efficient divide-and-conquer sorting algorithms both visually and through hands-on coding.", keywords: [ - 'Merge Sort Visualizer', - 'Merge Sort Animation', - 'Merge Sort Visualization', - 'Merge Sort Algorithm', - 'Merge Sort Quiz', - 'Sorting Algorithm Quiz', - 'Divide and Conquer Sorting', - 'Sorting Algorithm Visualization', - 'Learn Merge Sort', - 'DSA Merge Sort', - 'Practice Merge Sort', - 'Interactive Merge Sort Tool', - 'Test Merge Sort Knowledge', - 'Merge Sort in JavaScript', - 'Merge Sort in C', - 'Merge Sort in Python', - 'Merge Sort in Java', - 'Merge Sort Code Examples', + "Merge Sort Visualizer", + "Merge Sort Animation", + "Merge Sort Visualization", + "Merge Sort Algorithm", + "Merge Sort Quiz", + "Sorting Algorithm Quiz", + "Divide and Conquer Sorting", + "Sorting Algorithm Visualization", + "Learn Merge Sort", + "DSA Merge Sort", + "Practice Merge Sort", + "Interactive Merge Sort Tool", + "Test Merge Sort Knowledge", + "Merge Sort in JavaScript", + "Merge Sort in C", + "Merge Sort in Python", + "Merge Sort in Java", + "Merge Sort Code Examples", ], robots: "index, follow", + openGraph: { + images: [ + { + url: "/og/sorting/mergeSort.png", + width: 1200, + height: 630, + alt: "Merge Sort Algorithm Visualization", + }, + ], + }, }; export default function Page() { - return( + const paths = [ + { name: "Home", href: "/" }, + { name: "Visualizer", href: "/visualizer" }, + { name: "Merge Sort", href: "" }, + ]; + return ( <> - - +
+ +
+ +
+
+
+ +
+
+
+

+ Sorting +

+
+

+ Merge Sort +

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

+ Test Your Knowledge before moving forward! +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
); -}; \ No newline at end of file +} diff --git a/app/visualizer/sorting/mergesort/quiz.jsx b/app/visualizer/sorting/mergesort/quiz.jsx index a7d0281..76ec22b 100644 --- a/app/visualizer/sorting/mergesort/quiz.jsx +++ b/app/visualizer/sorting/mergesort/quiz.jsx @@ -1,3 +1,4 @@ +"use client"; import React, { useState } from 'react'; import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa'; import { motion, AnimatePresence } from 'framer-motion'; @@ -89,37 +90,28 @@ const MergeSortQuiz = () => { 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); - + 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); + setSelectedAnswer(newAnswers[currentQuestion + 1]); } else { setShowSuccessAnimation(true); setTimeout(() => { @@ -131,7 +123,6 @@ const MergeSortQuiz = () => { }; const handlePreviousQuestion = () => { - setShowExplanation(false); setCurrentQuestion(currentQuestion - 1); setSelectedAnswer(answers[currentQuestion - 1]); }; @@ -143,9 +134,7 @@ const MergeSortQuiz = () => { setShowResult(false); setQuizCompleted(false); setAnswers(Array(questions.length).fill(null)); - setShowExplanation(false); setShowIntro(true); - setPenaltyApplied(false); }; const calculateWeakAreas = () => { @@ -219,10 +208,6 @@ const MergeSortQuiz = () => { 0 points for wrong answers -
  • - - -0.5 point penalty for viewing explanations -
  • Earn stars based on your final score (max 5 stars) @@ -324,29 +309,6 @@ const MergeSortQuiz = () => { ))}

    • - {selectedAnswer !== null && ( -
    - - - {showExplanation && ( - - {questions[currentQuestion].explanation} - - )} - -
    - )}
    diff --git a/lib/modulesMap.js b/lib/modulesMap.js index 4803e5e..7ab6af3 100644 --- a/lib/modulesMap.js +++ b/lib/modulesMap.js @@ -4,4 +4,5 @@ export const MODULE_MAPS = { bubbleSort : "b1387e6d-ebf8-4b52-9c5d-ab8c94f8eda4", insertionSort : "f8ae92e2-1371-4852-a615-0354011f8f48", selectionSort : "7dffce41-ff4c-4700-8cfe-04b8793cc25c", + mergeSort : "d6704302-d35c-4c32-a259-9518dec15920", } \ No newline at end of file diff --git a/public/og/binarySearch.png b/public/og/binarySearch.png deleted file mode 100644 index 182de34..0000000 Binary files a/public/og/binarySearch.png and /dev/null differ diff --git a/public/og/linearSearch.png b/public/og/linearSearch.png deleted file mode 100644 index b9f00f0..0000000 Binary files a/public/og/linearSearch.png and /dev/null differ diff --git a/public/og/searching/binarySearch.png b/public/og/searching/binarySearch.png new file mode 100644 index 0000000..2374136 Binary files /dev/null and b/public/og/searching/binarySearch.png differ diff --git a/public/og/searching/linearSearch.png b/public/og/searching/linearSearch.png new file mode 100644 index 0000000..21fa64b Binary files /dev/null and b/public/og/searching/linearSearch.png differ diff --git a/public/og/sorting/mergeSort.png b/public/og/sorting/mergeSort.png new file mode 100644 index 0000000..bfc2aa1 Binary files /dev/null and b/public/og/sorting/mergeSort.png differ diff --git a/public/og/sorting/quickSort.png b/public/og/sorting/quickSort.png new file mode 100644 index 0000000..596def2 Binary files /dev/null and b/public/og/sorting/quickSort.png differ diff --git a/public/og/visualizer.png b/public/og/visualizer.png new file mode 100644 index 0000000..dd20010 Binary files /dev/null and b/public/og/visualizer.png differ