feat : added daily dsa in bubble sort

Author: Sohan-Rout

app/visualizer/searching/binarysearch/page.jsx

@@ -86,18 +86,18 @@ export default function Page() {
           <Content />
         </section>
 
-        <section>
+        <section className="px-6">
           <Animation />
         </section>
 
-        <section>
+        <section className="px-6">
           <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
             Test Your Knowledge before moving forward!
           </p>
           <Quiz />
         </section>
 
-        <section>
+        <section className="px-6">
           <CodeBlock />
         </section>
 
@@ -110,7 +110,7 @@ export default function Page() {
           />
         </section>
 
-        <section>
+        <section className="px-6">
           <ExploreOther
             title="Explore other operations"
             links={[{ text: "Linear Search", url: "./linearsearch" }]}

app/visualizer/searching/linearsearch/page.jsx

@@ -86,18 +86,18 @@ export default function Page() {
           <Content />
         </section>
 
-        <section>
+        <section className="px-6">
           <LinearSearchAnimation />
         </section>
 
-        <section>
+        <section className="px-6">
           <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
             Test Your Knowledge before moving forward!
           </p>
           <Quiz />
         </section>
 
-        <section>
+        <section className="px-6">
           <Code />
         </section>
 
@@ -110,7 +110,7 @@ export default function Page() {
           />
         </section>
 
-        <section>
+        <section className="px-6">
           <ExploreOther
             title="Explore other operations"
             links={[{ text: "Binary Search", url: "./binarysearch" }]}

app/visualizer/sorting/bubblesort/content.jsx

@@ -57,8 +57,30 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
+      <div className="col-span-1">
+        <div className="hidden md:block">
+          <iframe
+            src="https://hw.glich.co/resources/embed/daily/dsa"
+            width="100%"
+            height="400"
+            title="Daily DSA Challenge"
+          ></iframe>
+        </div>
+        <div className="flex justify-center">
+          <span className="text-xs hidden md:block">
+            Powered by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
+      </div>
+      <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">
         {/* What is Bubble Sort */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -205,4 +227,4 @@ const content = () => {
   );
 };
 
-export default content;
+export default content;

app/visualizer/sorting/bubblesort/page.jsx

@@ -64,7 +64,7 @@ export default function Page() {
 
       <div className="py-20 bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200">
         <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10">
+          <div className="mt-10 sm:mt-10 mb-4">
             <Breadcrumbs paths={paths} />
           </div>
           <div className="flex items-center flex-col">
@@ -86,14 +86,14 @@ export default function Page() {
           <Animation />
         </section>
 
-        <section>
+        <section className="px-6">
           <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
             Test Your Knowledge before moving forward!
           </p>
           <Quiz />
         </section>
 
-        <section>
+        <section className="px-6">
           <Code />
         </section>
 
@@ -106,7 +106,7 @@ export default function Page() {
           />
         </section>
 
-        <section>
+        <section className="px-6">
           <ExploreOther
           title="Explore Sorting Algorithms"
           links={[

app/visualizer/sorting/bubblesort/quiz.jsx

@@ -95,13 +95,10 @@ const BubbleSortQuiz = () => {
   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 = () => {
               ))}
             </div>
 
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
+
           </motion.div>
 
           <div className="flex justify-between">