diff --git a/app/api/auth/route.js b/app/api/auth/route.js index 8858035..985d309 100755 --- a/app/api/auth/route.js +++ b/app/api/auth/route.js @@ -35,14 +35,17 @@ export async function POST(req) { if (action === 'signup') { // Create Supabase user with metadata - const { user, error } = await supabase.auth.signUp( - { email, password }, - { data: { display_name: name } } - ) + const { data, error } = await supabase.auth.signUp({ + email, + password, + options: { + data: { display_name: name }, + }, + }) if (error) { return new Response(JSON.stringify({ success: false, message: error.message }), { status: 400 }) } - return new Response(JSON.stringify({ success: true, message: 'Signup successful! Check your email.' }), { status: 200 }) + return new Response(JSON.stringify({ success: true, message: 'Signup successful. Verification email sent.', trigger: true }), { status: 200 }) } else if (action === 'login') { diff --git a/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx b/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx index 0eb7947..ed04091 100755 --- a/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx +++ b/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx @@ -1,18 +1,11 @@ "use client"; import React, { useState } from "react"; -import Footer from "@/app/components/footer"; -import Content from "@/app/visualizer/queue/operations/enqueue-dequeue/content"; -import CodeBlock from "@/app/visualizer/queue/operations/enqueue-dequeue/codeBlock"; -import ExploreOther from "@/app/components/ui/exploreOther"; -import Quiz from '@/app/visualizer/queue/operations/enqueue-dequeue/quiz'; -import BackToTop from '@/app/components/ui/backtotop'; -import GoBackButton from "@/app/components/ui/goback"; const QueueVisualizer = () => { const [queue, setQueue] = useState([]); const [inputValue, setInputValue] = useState(""); const [operation, setOperation] = useState(null); - const [message, setMessage] = useState("Queue ready"); + const [message, setMessage] = useState(""); const [isAnimating, setIsAnimating] = useState(false); const enqueue = () => { @@ -20,10 +13,8 @@ const QueueVisualizer = () => { setMessage("Please enter a value"); return; } - setIsAnimating(true); setOperation(`Enqueuing "${inputValue}" to rear...`); - setTimeout(() => { setQueue((prev) => [...prev, inputValue]); setOperation(null); @@ -38,11 +29,9 @@ const QueueVisualizer = () => { setMessage("Queue is empty!"); return; } - setIsAnimating(true); const dequeuedValue = queue[0]; setOperation(`Dequeuing "${dequeuedValue}" from front...`); - setTimeout(() => { setQueue((prev) => prev.slice(1)); setOperation(null); @@ -55,244 +44,186 @@ const QueueVisualizer = () => { setQueue([]); setInputValue(""); setOperation(null); - setMessage("Queue reset"); }; return ( -
-
- {/* go back block here */} -
- -
- - {/* main logic here */} -

- Queue - Enqueue & Dequeue -

-
- -

- Visualize First-In-First-Out (FIFO) operations in real-time -

- - {/* Controls */} -
-
-
- setInputValue(e.target.value)} - placeholder="Enter value..." - className="flex-1 p-3 border rounded-lg dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all min-w-[180px] max-w-xs" - disabled={isAnimating} - onKeyDown={(e) => e.key === "Enter" && enqueue()} - /> -
- - - - -
-
- - {/* Status indicators */} -
- {operation && ( -
- e.key === "Enter" && enqueue()} + /> +
+ + +
- )} +
-
- - {message.includes("added") ? ( - - ) : message.includes("removed") ? ( - - ) : ( - - )} - - {message} + {/* status row */} +
+ {operation && ( +
+ + + + {operation} +
+ )} + {message && ( +
+ + {message.includes("added") ? ( + + ) : message.includes("removed") ? ( + + ) : ( + + )} + + {message} +
+ )}
-
- - {/* Queue Visualization */} -
-

Queue Visualization

- {/* Queue elements */} -
-
- {queue.length === 0 ? ( -
- Queue is empty - add some elements! + {/* ------- Queue Visualization (hidden when empty) ------- */} + {queue.length > 0 && ( +
+

Queue Visualization

+ + {/* Queue row with Front / Rear labels on the sides */} +
+ {/* Front label */} +
+ Front + + +
- ) : ( -
- {/* Front and Rear indicators above elements */} -
-
- Front - - - -
-
- Rear - - - -
-
- {/* Queue elements in a horizontal line */} -
- {queue.map((item, index) => ( + {/* Elements */} +
+ {queue.map((item, index) => ( +
- {/* Queue element */} -
- {item} -
- - {/* Show both pointers if they point to same element */} - {queue.length === 1 && ( -
- - Front - - - Rear - -
- )} + {item}
- ))} -
+
+ ))}
- )} + + {/* Rear label */} +
+ Rear + + + +
+
-
+ )}
-
- -

- Test Your Knowledge before moving forward! -

- - - - -
-
- -
+ ); }; diff --git a/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx b/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx index 88b69f7..261ddf2 100755 --- a/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx +++ b/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx @@ -323,14 +323,14 @@ 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 */} -
+

- Queue Implementation (Enqueue & Dequeue) + Queue (Enqueue & Dequeue)

diff --git a/app/visualizer/queue/operations/enqueue-dequeue/content.jsx b/app/visualizer/queue/operations/enqueue-dequeue/content.jsx index 58747dc..7c750c9 100755 --- a/app/visualizer/queue/operations/enqueue-dequeue/content.jsx +++ b/app/visualizer/queue/operations/enqueue-dequeue/content.jsx @@ -1,4 +1,29 @@ +"use client"; +import ComplexityGraph from "@/app/components/ui/graph"; +import { useEffect, useState } from "react"; + const content = () => { + const [theme, setTheme] = useState('light'); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + const updateTheme = () => { + const savedTheme = localStorage.getItem('theme') || 'light'; + setTheme(savedTheme); + }; + + updateTheme(); + setMounted(true); + + window.addEventListener('storage', updateTheme); + window.addEventListener('themeChange', updateTheme); + + return () => { + window.removeEventListener('storage', updateTheme); + window.removeEventListener('themeChange', updateTheme); + }; + }, []); + const paragraph = [ `A Queue is a linear data structure that follows the First-In-First-Out (FIFO) principle. Elements are added at the rear (enqueue) and removed from the front (dequeue). It operates much like a real-world queue (line) where the first person to arrive is the first to be served.`, `The space complexity is O(n) where n is the number of elements in the queue, as it needs to store all elements.`, @@ -35,12 +60,40 @@ const content = () => { const complexity = [ { points : "Enqueue Operation: O(1) - Constant time to add to the end" }, { points : "Dequeue Operation: O(1) - Constant time to remove from the front" }, - { points : "Peek Operation: O(1) - Constant time to examine the front element" }, ]; return ( -
-
+
+
+
+ {mounted && ( + + )} +
+
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
+
{/* What is a Queue? */}

@@ -158,6 +211,15 @@ const content = () => { ))} + +
+ 1} + averageCase={(n) => 1} + worstCase={(n) => 1} + maxN={25} + /> +

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

{paragraph[2]}

@@ -185,6 +247,35 @@ const content = () => {
+ + {/* Mobile iframe at bottom */} +
+ {mounted && ( + + )} +
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
); }; diff --git a/app/visualizer/queue/operations/enqueue-dequeue/page.jsx b/app/visualizer/queue/operations/enqueue-dequeue/page.jsx index 7699a2b..7167457 100755 --- a/app/visualizer/queue/operations/enqueue-dequeue/page.jsx +++ b/app/visualizer/queue/operations/enqueue-dequeue/page.jsx @@ -1,33 +1,121 @@ import Animation from "@/app/visualizer/queue/operations/enqueue-dequeue/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/enqueue-dequeue/content"; +import Quiz from "@/app/visualizer/queue/operations/enqueue-dequeue/quiz"; +import Code from "@/app/visualizer/queue/operations/enqueue-dequeue/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: 'Enqueue and Dequeue Operations in Queue | Learn Queue with JS, C, Python, Java Code', - description: 'Visualize and understand the Enqueue and Dequeue operations in a Queue with real-time animations and code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview preparation.', + title: + "Enqueue and Dequeue Operations in Queue | Learn Queue with JS, C, Python, Java Code", + description: + "Visualize and understand the Enqueue and Dequeue operations in a Queue with real-time animations and code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview preparation.", keywords: [ - 'Enqueue Operation', - 'Dequeue Operation', - 'Queue Operations', - 'Queue DSA', - 'Queue Enqueue Dequeue', - 'Learn Queue', - 'Queue Visualization', - 'Interactive DSA Tools', - 'Queue Data Structure', - 'Queue Code Examples', - 'Enqueue Dequeue in JavaScript', - 'Enqueue Dequeue in C', - 'Enqueue Dequeue in Python', - 'Enqueue Dequeue in Java', + "Enqueue Operation", + "Dequeue Operation", + "Queue Operations", + "Queue DSA", + "Queue Enqueue Dequeue", + "Learn Queue", + "Queue Visualization", + "Interactive DSA Tools", + "Queue Data Structure", + "Queue Code Examples", + "Enqueue Dequeue in JavaScript", + "Enqueue Dequeue in C", + "Enqueue Dequeue in Python", + "Enqueue Dequeue in Java", ], robots: "index, follow", + openGraph: { + images: [ + { + url: "/og/queue/enqueueDequeue.png", + width: 1200, + height: 630, + alt: "Enqueue Dequeue Algorithm Visualization", + }, + ], + }, }; export default function Page() { + const paths = [ + { name: "Home", href: "/" }, + { name: "Visualizer", href: "/visualizer" }, + { name: "Enqueue-Dequeue", href: "" }, + ]; + return ( <> - - +
+ +
+ +
+
+
+ +
+
+
+

+ Queue +

+
+

+ Enqueue & Dequeue +

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

+ Test Your Knowledge before moving forward! +

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

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]}

)}
))}
- + -
-
-
- {/* Queue Visualization */} -
- {/* Operation Status */} + {/* status / operation banners */} +
{operation && ( -
- {operation} +
+ + + + {operation}
)} + {message && ( +
+ + {message.includes("added") ? ( + + ) : message.includes("removed") || message.includes("Front element") ? ( + + ) : ( + + )} + + {message} +
+ )} +
+
- {/* Message Display */} -
- {message} -
- - {/* Horizontal Queue - Left (Front) to Right (Rear) */} -
-
- Front - Rear + {/* ------- Queue Visualization (only when not empty) ------- */} + {queue.length > 0 && ( +
+

Queue Visualization

+ + {/* Front – items – Rear */} +
+ {/* Front label */} +
+ Front + + +
- {/* Queue elements */} -
- {queue.length === 0 ? ( + {/* Elements */} +
+ {queue.map((item, index) => (
- Queue is empty! -
- ) : ( -
- {queue.map((item, index) => ( -
-
- {item} -
-
- ))} +
+ {item} +
- )} + ))} +
+ + {/* Rear label */} +
+ Rear + + +
-
- -

- Test Your Knowledge before moving forward! -

- - - - - - -
- -
-
+ )} +
+ ); }; diff --git a/app/visualizer/queue/operations/peek-front/codeBlock.jsx b/app/visualizer/queue/operations/peek-front/codeBlock.jsx index dbea8eb..882d98d 100755 --- a/app/visualizer/queue/operations/peek-front/codeBlock.jsx +++ b/app/visualizer/queue/operations/peek-front/codeBlock.jsx @@ -169,14 +169,14 @@ 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 */} -
+

- Queue Implementation (Peek Front) + Queue Peek Front

diff --git a/app/visualizer/queue/operations/peek-front/content.jsx b/app/visualizer/queue/operations/peek-front/content.jsx index 0b0495e..0a276c9 100755 --- a/app/visualizer/queue/operations/peek-front/content.jsx +++ b/app/visualizer/queue/operations/peek-front/content.jsx @@ -1,4 +1,28 @@ +"use client"; +import { useEffect, useState } from "react"; + const content = () => { + const [theme, setTheme] = useState('light'); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + const updateTheme = () => { + const savedTheme = localStorage.getItem('theme') || 'light'; + setTheme(savedTheme); + }; + + updateTheme(); + setMounted(true); + + window.addEventListener('storage', updateTheme); + window.addEventListener('themeChange', updateTheme); + + return () => { + window.removeEventListener('storage', updateTheme); + window.removeEventListener('themeChange', updateTheme); + }; + }, []); + const paragraph = [ `The peek front operation (also called front) retrieves the element at the front of the queue without removing it. This operation allows you to examine the next element to be processed while maintaining the queue's integrity.`, `The peek front operation is essential for non-destructive queue inspection, enabling more flexible queue processing patterns while maintaining FIFO order. It's particularly valuable in scenarios where decision-making depends on the next item's properties without committing to its removal.`, @@ -50,21 +74,38 @@ const content = () => { { points : "Debugging queue contents" }, ]; - const errorHandling = [ - { points : "Always check isEmpty() before peeking" }, - { points : "Options for empty queue:", - subpoints : [ - "Throw exception (e.g., EmptyQueueException)", - "Return null/undefined", - "Return special sentinel value", - ], - }, - { points : "Document behavior in your API" }, - ]; - return ( -
-
+
+
+
+ {mounted && ( + + )} +
+
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
+
{/* What is Peek Front Operation? */}

@@ -196,39 +237,10 @@ const content = () => {

- {/* Error Handling */} -
-

- - Error Handling -

-
-

- Important considerations: -

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

{paragraph[1]}

@@ -236,6 +248,35 @@ const content = () => {
+ + {/* Mobile iframe at bottom */} +
+ {mounted && ( + + )} +
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
); }; diff --git a/app/visualizer/queue/operations/peek-front/page.jsx b/app/visualizer/queue/operations/peek-front/page.jsx index 1e0a225..024c1a2 100755 --- a/app/visualizer/queue/operations/peek-front/page.jsx +++ b/app/visualizer/queue/operations/peek-front/page.jsx @@ -1,33 +1,120 @@ import Animation from "@/app/visualizer/queue/operations/peek-front/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/peek-front/content"; +import Quiz from "@/app/visualizer/queue/operations/peek-front/quiz"; +import Code from "@/app/visualizer/queue/operations/peek-front/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 Peek Front Operation | Learn with JS, C, Java, Python Code', - description: 'Understand the Peek Front operation in Queue with interactive animations and code examples in JavaScript, C, Python, and Java. Ideal for DSA beginners and interview preparation.', + title: "Queue Peek Front Operation | Learn with JS, C, Java, Python Code", + description: + "Understand the Peek Front operation in Queue with interactive animations and code examples in JavaScript, C, Python, and Java. Ideal for DSA beginners and interview preparation.", keywords: [ - 'Queue Peek Front', - 'Queue peek front Visulaization', - 'Peek Front Operation', - 'Queue DSA', - 'Queue Front Element', - 'Queue Peek in JavaScript', - 'Queue Peek in C', - 'Queue Peek in Python', - 'Queue Peek in Java', - 'Queue Data Structure', - 'DSA Queue Operations', - 'Peek Front Code Examples', - 'Queue Visualization', - 'Learn Queue DSA' + "Queue Peek Front", + "Queue peek front Visulaization", + "Peek Front Operation", + "Queue DSA", + "Queue Front Element", + "Queue Peek in JavaScript", + "Queue Peek in C", + "Queue Peek in Python", + "Queue Peek in Java", + "Queue Data Structure", + "DSA Queue Operations", + "Peek Front Code Examples", + "Queue Visualization", + "Learn Queue DSA", ], - robots: 'index, follow', + robots: "index, follow", + openGraph: { + images: [ + { + url: "/og/queue/peekFront.png", + width: 1200, + height: 630, + alt: "Peek Front Algorithm Visualization", + }, + ], + }, }; export default function Page() { + const paths = [ + { name: "Home", href: "/" }, + { name: "Visualizer", href: "/visualizer" }, + { name: "Peek Front", href: "" }, + ]; + return ( <> - - +
+ +
+ +
+
+
+ +
+
+
+

+ Queue +

+
+

+ Peek Front +

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

+ Test Your Knowledge before moving forward! +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
); -}; \ No newline at end of file +} diff --git a/app/visualizer/queue/operations/peek-front/quiz.jsx b/app/visualizer/queue/operations/peek-front/quiz.jsx index c48a37d..fa1eed8 100755 --- a/app/visualizer/queue/operations/peek-front/quiz.jsx +++ b/app/visualizer/queue/operations/peek-front/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'; @@ -13,7 +14,7 @@ const QueueQuiz = () => { "Priority-Based" ], correctAnswer: 2, - explanation: "Peek retrieves the front element but doesn’t remove it." + explanation: "Peek retrieves the front element but doesn't remove it." }, { question: "What is the main difference between peekFront() and dequeue()?", @@ -53,14 +54,8 @@ const QueueQuiz = () => { ], correctAnswer: 1, explanation: "The front index gives the first element." - }, - { - 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." } -]; + ]; const [currentQuestion, setCurrentQuestion] = useState(0); const [selectedAnswer, setSelectedAnswer] = useState(null); @@ -68,13 +63,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 +76,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 +93,6 @@ const QueueQuiz = () => { }; const handlePreviousQuestion = () => { - setShowExplanation(false); setCurrentQuestion(currentQuestion - 1); setSelectedAnswer(answers[currentQuestion - 1]); }; @@ -122,38 +104,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 peek operation"); } if (answers[1] !== questions[1].correctAnswer) { - weakAreas.push("time complexity analysis"); + weakAreas.push("differentiating peekFront() and dequeue()"); } if (answers[2] !== questions[2].correctAnswer) { - weakAreas.push("counting swaps in Selection Sort"); + weakAreas.push("understanding queue state after peek"); } if (answers[3] !== questions[3].correctAnswer) { - weakAreas.push("comparison with other simple sorts"); + weakAreas.push("time complexity analysis"); } 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("array-based queue implementation"); } 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 peek operation concepts!"; }; const startQuiz = () => { @@ -170,22 +144,22 @@ const QueueQuiz = () => { }; return ( -
+
{showIntro ? ( -
-
+

- Queue Quiz Challenge + Queue Peek Operation Quiz

-
+

How it works:

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

{questions[currentQuestion].question}

- +
{questions[currentQuestion].options.map((option, index) => ( - handleAnswerSelect(index)} >
- + {String.fromCharCode(65 + index)} {option} @@ -302,32 +272,9 @@ const QueueQuiz = () => { ))}
- - {selectedAnswer !== null && ( -
- - - {showExplanation && ( - - {questions[currentQuestion].explanation} - - )} - -
- )} + - +
- +
@@ -362,84 +308,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]}

)}
))}
- +