From 0fb050e1b7ee7d41eace8db87afba86f7c6d3e2f Mon Sep 17 00:00:00 2001 From: Sohan Rout Date: Sun, 12 Oct 2025 15:10:18 +0530 Subject: [PATCH 1/3] Feat : queue is empty layout updated --- .../queue/operations/isempty/content.jsx | 382 ++++++++------- .../queue/operations/isempty/page.jsx | 2 +- .../queue/operations/isfull/animation.jsx | 448 ++++++++---------- .../queue/operations/isfull/codeBlock.jsx | 6 +- .../queue/operations/isfull/content.jsx | 180 ++++--- .../queue/operations/isfull/page.jsx | 139 +++++- .../queue/operations/isfull/quiz.jsx | 249 ++++------ lib/modulesMap.js | 1 + 8 files changed, 721 insertions(+), 686 deletions(-) diff --git a/app/visualizer/queue/operations/isempty/content.jsx b/app/visualizer/queue/operations/isempty/content.jsx index 2f1eba2..550f888 100755 --- a/app/visualizer/queue/operations/isempty/content.jsx +++ b/app/visualizer/queue/operations/isempty/content.jsx @@ -2,24 +2,24 @@ import { useEffect, useState } from "react"; const content = () => { - const [theme, setTheme] = useState('light'); + const [theme, setTheme] = useState("light"); const [mounted, setMounted] = useState(false); useEffect(() => { const updateTheme = () => { - const savedTheme = localStorage.getItem('theme') || 'light'; + const savedTheme = localStorage.getItem("theme") || "light"; setTheme(savedTheme); }; updateTheme(); setMounted(true); - window.addEventListener('storage', updateTheme); - window.addEventListener('themeChange', updateTheme); + window.addEventListener("storage", updateTheme); + window.addEventListener("themeChange", updateTheme); return () => { - window.removeEventListener('storage', updateTheme); - window.removeEventListener('themeChange', updateTheme); + window.removeEventListener("storage", updateTheme); + window.removeEventListener("themeChange", updateTheme); }; }, []); @@ -29,54 +29,49 @@ const content = () => { ]; const example = [ - { points : "Empty Queue: []", - subpoints : [ - "isEmpty() → returns true", - ], - }, - { points : "Non-empty Queue: [10, 20, 30]", - subpoints : [ - "isEmpty() → returns false", - ], - }, + { points: "Empty Queue: []", subpoints: ["isEmpty() → returns true"] }, + { + points: "Non-empty Queue: [10, 20, 30]", + subpoints: ["isEmpty() → returns false"], + }, ]; const implementation = [ - { points : "Array-based Implementation:", - subpoints : [ + { + points: "Array-based Implementation:", + subpoints: [ "Check if front pointer == rear pointer", "Or maintain a separate size counter", ], - }, - { points : "Linked List Implementation:", - subpoints : [ - "Check if head pointer == null", - ], - }, + }, + { + points: "Linked List Implementation:", + subpoints: ["Check if head pointer == null"], + }, ]; const steps = [ - { points : "Examine the front of the queue" }, - { points : "If front is null (or front == rear in array implementation)" }, - { points : "Return true (queue is empty)" }, - { points : "Else return false (queue has elements)" }, + { points: "Examine the front of the queue" }, + { points: "If front is null (or front == rear in array implementation)" }, + { points: "Return true (queue is empty)" }, + { points: "Else return false (queue has elements)" }, ]; const complexity = [ - { points : "It only requires a simple pointer comparison" }, - { points : "No iteration through elements is needed" }, - { points : "Performance doesn't depend on queue size" }, + { points: "It only requires a simple pointer comparison" }, + { points: "No iteration through elements is needed" }, + { points: "Performance doesn't depend on queue size" }, ]; const usage = [ - { points : "Before dequeue operations to prevent underflow" }, - { points : "In queue processing loops" }, - { points : "As a termination condition in algorithms" }, - { points : "To initialize queue operations safely" }, + { points: "Before dequeue operations to prevent underflow" }, + { points: "In queue processing loops" }, + { points: "As a termination condition in algorithms" }, + { points: "To initialize queue operations safely" }, ]; - return ( -
+ return ( +
{mounted && ( @@ -107,153 +102,176 @@ const content = () => {
- {/* What is the isEmpty Operation? */} -
-

- - What is the isEmpty Operation? -

-
-

- {paragraphs[0]} -

-
-
+ {/* What is the isEmpty Operation? */} +
+

+ + What is the isEmpty Operation? +

+
+

+ {paragraphs[0]} +

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

- - How Does It Work? -

-
-

- The isEmpty operation simply checks the current state of the queue. Example scenarios: -

- -
    - {example.map((item, index) => ( -
  1. - {item.points} - {item.subpoints && ( -
      - {item.subpoints.map((subitem, subindex) => ( -
    • - {subitem} -
      • - ))} -
    - )} -
    2. - ))} -
- -

- The operation doesn't modify the queue in any way - it only checks its state. -

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

+ + How Does It Work? +

+
+

+ The isEmpty operation simply checks the current state of the + queue. Example scenarios: +

- {/* Implementation Details */} -
-

- - Implementation Details -

-
-

- Different implementations check emptiness differently: -

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

- - Algorithm Steps -

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

+ The operation doesn't modify the queue in any way - it only checks + its state. +

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

- - Time Complexity -

-
-

- The isEmpty operation always runs in O(1) constant time because: -

-
    - {complexity.map((item, index) => ( -
  • - {item.points} -
    • - ))} -
-
-
+ {/* Implementation Details */} +
+

+ + Implementation Details +

+
+

+ Different implementations check emptiness differently: +

- {/* Practical Usage */} -
-

- - Practical Usage -

-
-

- isEmpty is commonly used: -

-
    - {usage.map((item, index) => ( -
  • - {item.points} -
    • - ))} -
-
-
+
    + {implementation.map((item, index) => ( +
  1. + {item.points} + {item.subpoints && ( +
      + {item.subpoints.map((subitem, subindex) => ( +
    • + {subitem} +
      • + ))} +
    + )} +
    2. + ))} +
+
+
- {/* Additional Info */} -
-
-
-

- {paragraphs[1]} -

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

+ + Algorithm Steps +

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

+ + Time Complexity +

+
+

+ The isEmpty operation always runs in O(1) constant time because: +

+
    + {complexity.map((item, index) => ( +
  • + {item.points} +
    • + ))} +
+
+
- {/* Mobile iframe at bottom */} + {/* Practical Usage */} +
+

+ + Practical Usage +

+
+

+ isEmpty is commonly used: +

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

+ {paragraphs[1]} +

+
+
+
+ + + {/* Mobile iframe at bottom */}
{mounted && ( + )} +
+
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+ +
{/* What is the isFull Operation? */}

@@ -230,30 +275,10 @@ const content = () => {

- {/* Special Cases */} -
-

- - Special Cases -

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

{paragraphs[1]}

@@ -261,8 +286,37 @@ const content = () => {
+ + {/* Mobile iframe at bottom */} +
+ {mounted && ( + + )} +
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
); - }; - - export default content; \ No newline at end of file +}; + +export default content; diff --git a/app/visualizer/queue/operations/isfull/page.jsx b/app/visualizer/queue/operations/isfull/page.jsx index 288383a..2b0d03d 100755 --- a/app/visualizer/queue/operations/isfull/page.jsx +++ b/app/visualizer/queue/operations/isfull/page.jsx @@ -1,31 +1,118 @@ import Animation from "@/app/visualizer/queue/operations/isfull/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/queue/operations/isfull/content"; +import Quiz from '@/app/visualizer/queue/operations/isfull/quiz'; +import Code from "@/app/visualizer/queue/operations/isfull/codeBlock"; +import ModuleCard from "@/app/components/ui/ModuleCard"; +import { MODULE_MAPS } from "@/lib/modulesMap"; +import ExploreOther from '@/app/components/ui/exploreOther'; +import Footer from '@/app/components/footer'; +import BackToTop from '@/app/components/ui/backtotop'; export const metadata = { - title: 'Queue Is Full Operation | Learn with JS, C, Python, Java Code', - description: 'Understand how to check if a Queue is full using interactive visualizations and detailed code examples in JavaScript, C, Python, and Java. Perfect for mastering DSA and technical interviews.', - keywords: [ - 'Queue Is Full', - 'Is Full Operation Queue', - 'Queue Full Condition', - 'Queue Capacity Check', - 'Queue Code in JavaScript', - 'Queue Code in C', - 'Queue Code in Python', - 'Queue Code in Java', - 'Queue DSA', - 'Learn Queue Operations', - 'Queue Data Structure', - 'Visualize Queue', + title: "Queue Is Full Operation | Learn with JS, C, Python, Java Code", + description: + "Understand how to check if a Queue is full using interactive visualizations and detailed code examples in JavaScript, C, Python, and Java. Perfect for mastering DSA and technical interviews.", + keywords: [ + "Queue Is Full", + "Is Full Operation Queue", + "Queue Full Condition", + "Queue Capacity Check", + "Queue Code in JavaScript", + "Queue Code in C", + "Queue Code in Python", + "Queue Code in Java", + "Queue DSA", + "Learn Queue Operations", + "Queue Data Structure", + "Visualize Queue", + ], + robots: "index, follow", + openGraph: { + images: [ + { + url: "/og/queue/isFull.png", + width: 1200, + height: 630, + alt: "isFull Algorithm Visualization", + }, ], - robots: 'index, follow', - }; - -export default function page(){ - return( - <> - - - - ); -}; \ No newline at end of file + }, +}; + +export default function page() { + const paths = [ + { name: "Home", href: "/" }, + { name: "Visualizer", href: "/visualizer" }, + { name: "Queue : IsFull", href: "" }, + ]; + + return ( + <> +
+ +
+ +
+
+
+ +
+
+
+

+ Queue +

+
+

+ IsFull +

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

+ Test Your Knowledge before moving forward! +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ + ); +} diff --git a/app/visualizer/queue/operations/isfull/quiz.jsx b/app/visualizer/queue/operations/isfull/quiz.jsx index c48a37d..867e46c 100755 --- a/app/visualizer/queue/operations/isfull/quiz.jsx +++ b/app/visualizer/queue/operations/isfull/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'; @@ -5,62 +6,51 @@ import { motion, AnimatePresence } from 'framer-motion'; const QueueQuiz = () => { const questions = [ { - question: "What does the peek front operation do in a queue?", + question: "What does the isFull operation determine in a queue?", options: [ - "Removes the front element", - "Adds an element to the front", - "Retrieves the front element without removing it", - "Priority-Based" + "Whether the queue contains any elements", + "Whether the queue has reached its maximum capacity", + "The position of the front element", + "The time complexity of other operations" ], - correctAnswer: 2, - explanation: "Peek retrieves the front element but doesn’t remove it." + correctAnswer: 1, + explanation: "isFull checks if the queue has reached its maximum capacity in fixed-size implementations." }, { - question: "What is the main difference between peekFront() and dequeue()?", + question: "In which type of queue implementation is isFull most commonly needed?", options: [ - "peekFront() removes the element, dequeue() does not", - "dequeue() accesses the rear", - "peekFront() leaves the queue unchanged", - "They are the same" + "Linked list-based queues", + "Dynamic arrays", + "Array-based queues with fixed capacity", + "All queue implementations" ], correctAnswer: 2, - explanation: "peekFront() retrieves without removal; dequeue() removes the front element." - }, - { - question: "What will the queue look like after calling peekFront() on [A, B, C, D]", - options: ["[B, C, D]", "[A, B, C]", "[A, B, C, D]", "[D, C, B, A]"], - correctAnswer: 2, - explanation: "peekFront() does not modify the queue." + explanation: "isFull is crucial for array-based queues with fixed capacity to prevent overflow." }, { - question: "What is the time complexity of the peek operation?", - options: [ - "O(1)", - "O(log n)", - "O(n)", - "O(n²)" - ], - correctAnswer: 0, - explanation: "Direct access makes it constant time." + question: "What is the time complexity of the isFull operation?", + options: ["O(n)", "O(1)", "O(log n)", "O(n²)"], + correctAnswer: 1, + explanation: "isFull runs in O(1) constant time as it only requires simple pointer comparisons." }, { - question: "In an array-based queue, how is peekFront() typically implemented?", + question: "In a circular array implementation, when is the queue considered full?", options: [ - "Return array[0]", - "Return array[front]", - "Return array[rear]", - "Remove array[front]" + "When front == 0", + "When rear == capacity - 1", + "When (rear + 1) % capacity == front", + "When front == rear" ], - correctAnswer: 1, - explanation: "The front index gives the first element." + correctAnswer: 2, + explanation: "In circular arrays, the queue is full when the next position after rear equals front." }, { - question: "Which operation retrieves the front element without removing it?", - options: ["Enqueue", "Dequeue", "Peek", "Search"], - correctAnswer: 2, - explanation: "Peek (or front) examines the front element without modification." + question: "What would isFull() return for a queue with capacity 3 containing [10, 20, 30]?", + options: ["true", "false", "null", "Error"], + correctAnswer: 0, + explanation: "The queue has reached its maximum capacity of 3 elements, so isFull returns true." } -]; + ]; const [currentQuestion, setCurrentQuestion] = useState(0); const [selectedAnswer, setSelectedAnswer] = useState(null); @@ -68,13 +58,10 @@ const QueueQuiz = () => { 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; @@ -84,18 +71,9 @@ const QueueQuiz = () => { 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 +88,6 @@ const QueueQuiz = () => { }; const handlePreviousQuestion = () => { - setShowExplanation(false); setCurrentQuestion(currentQuestion - 1); setSelectedAnswer(answers[currentQuestion - 1]); }; @@ -122,38 +99,30 @@ const QueueQuiz = () => { setShowResult(false); setQuizCompleted(false); setAnswers(Array(questions.length).fill(null)); - setShowExplanation(false); setShowIntro(true); - setPenaltyApplied(false); }; const calculateWeakAreas = () => { const weakAreas = []; if (answers[0] !== questions[0].correctAnswer) { - weakAreas.push("understanding the basic principle of Selection Sort"); + weakAreas.push("understanding the purpose of isFull operation"); } if (answers[1] !== questions[1].correctAnswer) { - weakAreas.push("time complexity analysis"); + weakAreas.push("identifying when isFull is needed"); } if (answers[2] !== questions[2].correctAnswer) { - weakAreas.push("counting swaps in Selection Sort"); + weakAreas.push("time complexity analysis"); } if (answers[3] !== questions[3].correctAnswer) { - weakAreas.push("comparison with other simple sorts"); + weakAreas.push("circular array implementation details"); } if (answers[4] !== questions[4].correctAnswer) { - weakAreas.push("space complexity"); - } - if (answers[5] !== questions[5].correctAnswer) { - weakAreas.push("stability characteristics"); - } - if (answers[6] !== questions[6].correctAnswer) { - weakAreas.push("practical applications"); + weakAreas.push("practical application of isFull"); } return weakAreas.length > 0 ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.` - : "Perfect! You've mastered all Selection Sort concepts!"; + : "Perfect! You've mastered all Queue isFull operation concepts!"; }; const startQuiz = () => { @@ -170,22 +139,22 @@ const QueueQuiz = () => { }; return ( -
+
{showIntro ? ( -
-
+

- Queue Quiz Challenge + Queue isFull Operation Quiz

-
+

How it works:

@@ -220,14 +189,14 @@ const QueueQuiz = () => {
- { />
- {
-
- + {

{questions[currentQuestion].question}

- +
{questions[currentQuestion].options.map((option, index) => ( - handleAnswerSelect(index)} >
- + {String.fromCharCode(65 + index)} {option} @@ -302,32 +267,9 @@ const QueueQuiz = () => { ))}
- - {selectedAnswer !== null && ( -
- - - {showExplanation && ( - - {questions[currentQuestion].explanation} - - )} - -
- )} + - +
- +
@@ -362,84 +303,62 @@ const QueueQuiz = () => {
{[...Array(5)].map((_, i) => ( - ))}
- +

- {score === questions.length - ? "Perfect Score!" - : score >= questions.length * 0.8 - ? "Excellent Work!" - : score >= questions.length * 0.6 - ? "Good Job!" - : score >= questions.length * 0.4 - ? "Keep Practicing!" - : "Let's Review Again!"} + {score === questions.length ? "Perfect Score!" : + score >= questions.length * 0.8 ? "Excellent Work!" : + score >= questions.length * 0.6 ? "Good Job!" : + score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}

- You scored {((score / questions.length) * 100).toFixed(0)}% - correct + You scored {((score / questions.length) * 100).toFixed(0)}% correct

- +

Performance Analysis

{calculateWeakAreas()}

- +
-

- Question Breakdown: -

+

Question Breakdown:

{questions.map((q, index) => ( -
-

- {q.question} -

-
+
+

{q.question}

+
{answers[index] === q.correctAnswer ? ( ) : ( )}
-

- Your answer:{" "} - {answers[index] !== null - ? q.options[answers[index]] - : "Not answered"} -

+

Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}

{answers[index] !== q.correctAnswer && ( -

- Correct answer: {q.options[q.correctAnswer]} -

+

Correct answer: {q.options[q.correctAnswer]}

)}
))}
- +
- ); - }; - - export default content; \ No newline at end of file + {/* Mobile iframe at bottom */} +
+ {mounted && ( + + )} +
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
+ + ); +}; + +export default content; diff --git a/app/visualizer/queue/types/singleEnded/page.jsx b/app/visualizer/queue/types/singleEnded/page.jsx index 0ff2da3..a7e992f 100755 --- a/app/visualizer/queue/types/singleEnded/page.jsx +++ b/app/visualizer/queue/types/singleEnded/page.jsx @@ -1,30 +1,118 @@ import Animation from "@/app/visualizer/queue/types/singleEnded/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/queue/types/singleEnded/content"; +import Quiz from "@/app/visualizer/queue/types/singleEnded/quiz"; +import Code from "@/app/visualizer/queue/types/singleEnded/codeBlock"; +import ModuleCard from "@/app/components/ui/ModuleCard"; +import { MODULE_MAPS } from "@/lib/modulesMap"; +import ExploreOther from '@/app/components/ui/exploreOther'; +import Footer from '@/app/components/footer'; +import BackToTop from '@/app/components/ui/backtotop'; export const metadata = { - title: 'Single Ended Queue | Learn with JS, C, Python, Java Code', - description: 'Understand Single Ended Queue in Data Structures with animations and full code examples in JavaScript, C, Python, and Java. Ideal for beginners learning queue operations and preparing for interviews.', - keywords: [ - 'Single Ended Queue', - 'Single Ended Queue DSA', - 'Queue Data Structure', - 'Single Ended Queue in JavaScript', - 'Single Ended Queue in C', - 'Single Ended Queue in Python', - 'Single Ended Queue in Java', - 'DSA Queue Operations', - 'Learn Queue DSA', - 'Queue Code Examples', - 'DSA Visualizer' + title: "Single Ended Queue | Learn with JS, C, Python, Java Code", + description: + "Understand Single Ended Queue in Data Structures with animations and full code examples in JavaScript, C, Python, and Java. Ideal for beginners learning queue operations and preparing for interviews.", + keywords: [ + "Single Ended Queue", + "Single Ended Queue DSA", + "Queue Data Structure", + "Single Ended Queue in JavaScript", + "Single Ended Queue in C", + "Single Ended Queue in Python", + "Single Ended Queue in Java", + "DSA Queue Operations", + "Learn Queue DSA", + "Queue Code Examples", + "DSA Visualizer", + ], + robots: "index, follow", + openGraph: { + images: [ + { + url: "/og/queue/singleEnded.png", + width: 1200, + height: 630, + alt: "Single Ended Queue Algorithm Visualization", + }, ], - robots: 'index, follow', - }; - -export default function Page(){ - return( - <> - - - - ); -}; \ No newline at end of file + }, +}; + +export default function Page() { + const paths = [ + { name: "Home", href: "/" }, + { name: "Visualizer", href: "/visualizer" }, + { name: "Queue : Single Ended", href: "" }, + ]; + + return ( + <> +
+ +
+ +
+
+
+ +
+
+
+

+ Queue +

+
+

+ Single Ended +

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

+ Test Your Knowledge before moving forward! +

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