Skip to content

Commit 04c04f7

Browse files
Sohan-RoutSohan-Rout
committed
fix : fixed binary search layout
1 parent b290f10 commit 04c04f7

5 files changed

Lines changed: 301 additions & 310 deletions

File tree

‎app/visualizer/searching/binarysearch/content.jsx‎

Lines changed: 161 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -9,143 +9,183 @@ const content = () => {
99
];
1010

1111
const searching = [
12-
{ points : "First middle is 7 (too high)" },
13-
{ points : "Search left half: [1, 3, 5]" },
14-
{ points : "New middle is 3 (too low)" },
15-
{ points : "Search right portion: [5]" },
16-
{ points : "Found at position 2" },
12+
{ points: "First middle is 7 (too high)" },
13+
{ points: "Search left half: [1, 3, 5]" },
14+
{ points: "New middle is 3 (too low)" },
15+
{ points: "Search right portion: [5]" },
16+
{ points: "Found at position 2" },
1717
];
1818

1919
const steps = [
20-
{points : "Start with the entire sorted array" },
21-
{points : "Compare the target with the middle element:",
22-
subpoints : [
20+
{ points: "Start with the entire sorted array" },
21+
{
22+
points: "Compare the target with the middle element:",
23+
subpoints: [
2324
"If equal, return the position",
2425
"If target is smaller, search the left half",
25-
"If target is larger, search the right half"
26-
]
27-
},
28-
{points : "Repeat until the element is found or the subarray is empty" },
29-
{points : 'If not found, return "Not Found"' },
26+
"If target is larger, search the right half",
27+
],
28+
},
29+
{ points: "Repeat until the element is found or the subarray is empty" },
30+
{ points: 'If not found, return "Not Found"' },
3031
];
3132

3233
const complexity = [
33-
{ points : "Best Case: Target is the middle element → O(1)." },
34-
{ points : "Worst Case: Element not present → O(log n) (halves search space each step)." },
34+
{ points: "Best Case: Target is the middle element → O(1)." },
35+
{
36+
points:
37+
"Worst Case: Element not present → O(log n) (halves search space each step).",
38+
},
3539
];
3640

37-
return (
38-
<main className="max-w-4xl mx-auto">
39-
<article className="bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
40-
{/* What is Binary Search */}
41-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
42-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
43-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
44-
What is Binary Search?
45-
</h1>
46-
<div className="prose dark:prose-invert max-w-none">
47-
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
48-
{paragraphs[0]}
49-
</p>
41+
return (
42+
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
43+
<div className="col-span-1">
44+
<div className="hidden md:block">
45+
<iframe
46+
src="https://hw.glich.co/resources/embed/daily/dsa"
47+
width="100%"
48+
height="400"
49+
title="Daily DSA Challenge"
50+
></iframe>
51+
</div>
52+
<div className="flex justify-center">
53+
<span className="text-xs hidden md:block">
54+
Powered by{" "}
55+
<a
56+
href="https://hw.glich.co/resources/daily"
57+
target="_blank"
58+
className="underline hover:text-blue-500 duration-300"
59+
>
60+
Hello World
61+
</a>
62+
</span>
63+
</div>
5064
</div>
51-
</section>
65+
<article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
66+
{/* What is Binary Search */}
67+
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
68+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
69+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
70+
What is Binary Search?
71+
</h1>
72+
<div className="prose dark:prose-invert max-w-none">
73+
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
74+
{paragraphs[0]}
75+
</p>
76+
</div>
77+
</section>
5278

53-
{/* How Does It Work */}
54-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
55-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
56-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
57-
How Does It Work?
58-
</h1>
59-
<div className="prose dark:prose-invert max-w-none">
60-
<p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
61-
Imagine you have a sorted list of numbers: [1, 3, 5, 7, 9, 11, 13] and you want to find the number 7.
62-
</p>
63-
64-
<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
65-
<li className="text-gray-700 dark:text-gray-300 pl-2">
66-
Compare 7 with the middle element (7). It matches! Return the position.
67-
</li>
68-
<li className="text-gray-700 dark:text-gray-300 pl-2">
69-
If searching for 5:
70-
<ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
71-
{searching.map((item, index) => (
72-
<li key={index} className="text-gray-600 dark:text-gray-400">
73-
{item.points}
74-
</li>
75-
))}
76-
</ul>
77-
</li>
78-
</ol>
79-
80-
<p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
81-
{paragraphs[1]}
82-
</p>
83-
</div>
84-
</section>
79+
{/* How Does It Work */}
80+
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
81+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
82+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
83+
How Does It Work?
84+
</h1>
85+
<div className="prose dark:prose-invert max-w-none">
86+
<p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
87+
Imagine you have a sorted list of numbers: [1, 3, 5, 7, 9, 11, 13]
88+
and you want to find the number 7.
89+
</p>
8590

86-
{/* Algorithm Steps */}
87-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
88-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
89-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
90-
Algorithm Steps
91-
</h1>
92-
<div className="prose dark:prose-invert max-w-none">
93-
<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
94-
{steps.map((item, index) => (
95-
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
96-
{item.points}
97-
{item.subpoints && (
91+
<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
92+
<li className="text-gray-700 dark:text-gray-300 pl-2">
93+
Compare 7 with the middle element (7). It matches! Return the
94+
position.
95+
</li>
96+
<li className="text-gray-700 dark:text-gray-300 pl-2">
97+
If searching for 5:
9898
<ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
99-
{item.subpoints.map((subitem, subindex) => (
100-
<li key={subindex} className="text-gray-600 dark:text-gray-400">
101-
{subitem}
99+
{searching.map((item, index) => (
100+
<li
101+
key={index}
102+
className="text-gray-600 dark:text-gray-400"
103+
>
104+
{item.points}
102105
</li>
103106
))}
104107
</ul>
105-
)}
106-
</li>
107-
))}
108-
</ol>
109-
</div>
110-
</section>
108+
</li>
109+
</ol>
111110

112-
{/* Time Complexity */}
113-
<section className="p-6">
114-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
115-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
116-
Time Complexity
117-
</h1>
118-
<div className="prose dark:prose-invert max-w-none">
119-
<ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
120-
{complexity.map((item, index) => (
121-
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
122-
<span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
123-
{item.points.split(':')[0]}:
124-
</span>
125-
<span className="ml-2">{item.points.split(':')[1]}</span>
126-
</li>
127-
))}
128-
</ul>
111+
<p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
112+
{paragraphs[1]}
113+
</p>
114+
</div>
115+
</section>
129116

130-
<div className="mt-8">
131-
<ComplexityGraph
132-
bestCase={(n) => 1}
133-
averageCase={(n) => Math.log2(n)}
134-
worstCase={(n) => Math.log2(n)}
135-
maxN={25}
136-
/>
137-
</div>
138-
139-
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
140-
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
141-
{paragraphs[2]}
142-
</p>
143-
</div>
144-
</div>
145-
</section>
146-
</article>
147-
</main>
148-
);
149-
};
150-
151-
export default content;
117+
{/* Algorithm Steps */}
118+
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
119+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
120+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
121+
Algorithm Steps
122+
</h1>
123+
<div className="prose dark:prose-invert max-w-none">
124+
<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
125+
{steps.map((item, index) => (
126+
<li
127+
key={index}
128+
className="text-gray-700 dark:text-gray-300 pl-2"
129+
>
130+
{item.points}
131+
{item.subpoints && (
132+
<ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
133+
{item.subpoints.map((subitem, subindex) => (
134+
<li
135+
key={subindex}
136+
className="text-gray-600 dark:text-gray-400"
137+
>
138+
{subitem}
139+
</li>
140+
))}
141+
</ul>
142+
)}
143+
</li>
144+
))}
145+
</ol>
146+
</div>
147+
</section>
148+
149+
{/* Time Complexity */}
150+
<section className="p-6">
151+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
152+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
153+
Time Complexity
154+
</h1>
155+
<div className="prose dark:prose-invert max-w-none">
156+
<ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
157+
{complexity.map((item, index) => (
158+
<li
159+
key={index}
160+
className="text-gray-700 dark:text-gray-300 pl-2"
161+
>
162+
<span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
163+
{item.points.split(":")[0]}:
164+
</span>
165+
<span className="ml-2">{item.points.split(":")[1]}</span>
166+
</li>
167+
))}
168+
</ul>
169+
170+
<div className="mt-8">
171+
<ComplexityGraph
172+
bestCase={(n) => 1}
173+
averageCase={(n) => Math.log2(n)}
174+
worstCase={(n) => Math.log2(n)}
175+
maxN={25}
176+
/>
177+
</div>
178+
179+
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
180+
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
181+
{paragraphs[2]}
182+
</p>
183+
</div>
184+
</div>
185+
</section>
186+
</article>
187+
</main>
188+
);
189+
};
190+
191+
export default content;

‎app/visualizer/searching/binarysearch/page.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default function Page() {
6868

6969
<div className="py-20 bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200">
7070
<section className="px-6 md:px-12">
71-
<div className="mt-10 sm:mt-10">
71+
<div className="mt-10 sm:mt-10 mb-4">
7272
<Breadcrumbs paths={paths} />
7373
</div>
7474
<div className="flex items-center flex-col">

‎app/visualizer/searching/binarysearch/quiz.jsx‎

Lines changed: 1 addition & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,12 @@ const BinarySearchQuiz = () => {
6666
const [selectedAnswer, setSelectedAnswer] = useState(null);
6767
const [score, setScore] = useState(0);
6868
const [showResult, setShowResult] = useState(false);
69-
const [setQuizCompleted] = useState(false);
69+
const [quizCompleted, setQuizCompleted] = useState(false);
7070
const [answers, setAnswers] = useState(Array(questions.length).fill(null));
71-
const [showExplanation, setShowExplanation] = useState(false);
7271
const [showIntro, setShowIntro] = useState(true);
7372
const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
74-
const [penaltyApplied, setPenaltyApplied] = useState(false);
7573

7674
const handleAnswerSelect = (optionIndex) => {
77-
if (selectedAnswer !== null) return;
7875
setSelectedAnswer(optionIndex);
7976
const newAnswers = [...answers];
8077
newAnswers[currentQuestion] = optionIndex;
@@ -84,18 +81,9 @@ const BinarySearchQuiz = () => {
8481
const handleNextQuestion = () => {
8582
if (selectedAnswer === null) return;
8683

87-
if (showExplanation && !penaltyApplied) {
88-
setScore(prevScore => Math.max(0, prevScore - 0.5));
89-
setPenaltyApplied(true);
90-
}
91-
9284
if (selectedAnswer === questions[currentQuestion].correctAnswer) {
9385
setScore(score + 1);
9486
}
95-
96-
setShowExplanation(false);
97-
setPenaltyApplied(false);
98-
9987
if (currentQuestion < questions.length - 1) {
10088
setCurrentQuestion(currentQuestion + 1);
10189
setSelectedAnswer(null);
@@ -110,7 +98,6 @@ const BinarySearchQuiz = () => {
11098
};
11199

112100
const handlePreviousQuestion = () => {
113-
setShowExplanation(false);
114101
setCurrentQuestion(currentQuestion - 1);
115102
setSelectedAnswer(answers[currentQuestion - 1]);
116103
};
@@ -122,9 +109,7 @@ const BinarySearchQuiz = () => {
122109
setShowResult(false);
123110
setQuizCompleted(false);
124111
setAnswers(Array(questions.length).fill(null));
125-
setShowExplanation(false);
126112
setShowIntro(true);
127-
setPenaltyApplied(false);
128113
};
129114

130115
const calculateWeakAreas = () => {
@@ -293,29 +278,6 @@ const BinarySearchQuiz = () => {
293278
))}
294279
</div>
295280

296-
{selectedAnswer !== null && (
297-
<div className="mb-6">
298-
<button
299-
onClick={() => setShowExplanation(!showExplanation)}
300-
className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
301-
>
302-
<FaInfoCircle className="mr-1" />
303-
{showExplanation ? 'Hide Explanation' : 'Show Explanation'}
304-
</button>
305-
<AnimatePresence>
306-
{showExplanation && (
307-
<motion.div
308-
initial={{ opacity: 0, height: 0 }}
309-
animate={{ opacity: 1, height: 'auto' }}
310-
exit={{ opacity: 0, height: 0 }}
311-
className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
312-
>
313-
{questions[currentQuestion].explanation}
314-
</motion.div>
315-
)}
316-
</AnimatePresence>
317-
</div>
318-
)}
319281
</motion.div>
320282

321283
<div className="flex justify-between">

0 commit comments

Comments
 (0)