Feat : added daily dsa and og images to selection sort

Sohan-Rout · Sohan-Rout · commit 0cff6ff5fbbb · 2025-08-08T21:47:37.000+05:30
diff --git a/app/visualizer/searching/binarysearch/page.jsx b/app/visualizer/searching/binarysearch/page.jsx
@@ -56,7 +56,7 @@ export const metadata = {
 export default function Page() {
   const paths = [
     { name: "Home", href: "/" },
-    { name: "Visulaizer", href: "/visualizer" },
+    { name: "Visualizer", href: "/visualizer" },
     { name: "Binary Search", href: "" },
   ];
 
diff --git a/app/visualizer/searching/linearsearch/page.jsx b/app/visualizer/searching/linearsearch/page.jsx
@@ -56,7 +56,7 @@ export const metadata = {
 export default function Page() {
   const paths = [
     { name: "Home", href: "/" },
-    { name: "Visulaizer", href: "/visualizer" },
+    { name: "Visualizer", href: "/visualizer" },
     { name: "Linear Search", href: "" },
   ];
 
diff --git a/app/visualizer/sorting/bubblesort/page.jsx b/app/visualizer/sorting/bubblesort/page.jsx
@@ -52,7 +52,7 @@ export const metadata = {
 export default function Page() {
   const paths = [
     { name: "Home", href: "/" },
-    { name: "Visulaizer", href: "/visualizer" },
+    { name: "Visualizer", href: "/visualizer" },
     { name: "Bubble Sort", href: "" },
   ];
 
diff --git a/app/visualizer/sorting/insertionsort/page.jsx b/app/visualizer/sorting/insertionsort/page.jsx
@@ -52,7 +52,7 @@ export const metadata = {
 export default function Page() {
   const paths = [
     { name: "Home", href: "/" },
-    { name: "Visulaizer", href: "/visualizer" },
+    { name: "Visualizer", href: "/visualizer" },
     { name: "Insertion Sort", href: "" },
   ];
 
diff --git a/app/visualizer/sorting/mergesort/content.jsx b/app/visualizer/sorting/mergesort/content.jsx
@@ -43,8 +43,30 @@ const content = () => {
   ];
 
     return (
-      <main className="max-w-4xl mx-auto">
-  <article className="bg-white dark:bg-gray-800 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 Merge 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">
diff --git a/app/visualizer/sorting/selectionsort/content.jsx b/app/visualizer/sorting/selectionsort/content.jsx
@@ -73,8 +73,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 Selection 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">
@@ -172,9 +194,7 @@ const content = () => {
                   <span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
                     {items.points}
                   </span>
-                  <span className="ml-2">
-                    {items.subpoints}
-                  </span>
+                  <span className="ml-2">{items.subpoints}</span>
                 </li>
               ))}
             </ul>
@@ -184,13 +204,13 @@ const content = () => {
             </p>
 
             <div className="mt-8">
-          <ComplexityGraph
-            bestCase={(n) => n*n}
-            averageCase={(n) => n*n}
-            worstCase={(n) => n*n}
-            maxN={25}
-          />
-        </div>
+              <ComplexityGraph
+                bestCase={(n) => n * n}
+                averageCase={(n) => n * n}
+                worstCase={(n) => n * n}
+                maxN={25}
+              />
+            </div>
           </div>
         </section>
 
@@ -250,7 +270,7 @@ const content = () => {
         {/* Additional Info */}
         <section className="p-6">
           <div className="prose dark:prose-invert max-w-none">
-            <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+            <div className="px-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
               <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
                 {paragraph[3]}
               </p>
@@ -262,4 +282,4 @@ const content = () => {
   );
 };
 
-export default content;
+export default content;
diff --git a/app/visualizer/sorting/selectionsort/page.jsx b/app/visualizer/sorting/selectionsort/page.jsx
@@ -36,7 +36,7 @@ export const metadata = {
   openGraph: {
     images: [
       {
-        url: "/og/selectionSort.png",
+        url: "/og/sorting/selectionSort.png",
         width: 1200,
         height: 630,
         alt: "Selection Sort Algorithm Visualization",
@@ -60,7 +60,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>
 
@@ -84,14 +84,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>
 
@@ -104,7 +104,7 @@ export default function Page() {
           />
         </section>
 
-        <section>
+        <section className="px-6">
           <ExploreOther
             title="Explore Sorting Algorithms"
             links={[
diff --git a/app/visualizer/sorting/selectionsort/quiz.jsx b/app/visualizer/sorting/selectionsort/quiz.jsx
@@ -88,39 +88,30 @@ const SelectionSortQuiz = () => {
   const [selectedAnswer, setSelectedAnswer] = useState(null);
   const [score, setScore] = useState(0);
   const [showResult, setShowResult] = useState(false);
-  const [setQuizCompleted] = 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(() => {
@@ -132,7 +123,6 @@ const SelectionSortQuiz = () => {
   };
 
   const handlePreviousQuestion = () => {
-    setShowExplanation(false);
     setCurrentQuestion(currentQuestion - 1);
     setSelectedAnswer(answers[currentQuestion - 1]);
   };
@@ -144,9 +134,7 @@ const SelectionSortQuiz = () => {
     setShowResult(false);
     setQuizCompleted(false);
     setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
     setShowIntro(true);
-    setPenaltyApplied(false);
   };
 
   const calculateWeakAreas = () => {
@@ -220,10 +208,6 @@ const SelectionSortQuiz = () => {
                 <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
                 <span>0 points for wrong answers</span>
               </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
               <li className="flex items-start">
                 <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
                 <span>Earn stars based on your final score (max 5 stars)</span>
@@ -325,29 +309,6 @@ const SelectionSortQuiz = () => {
               ))}
             </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">
diff --git a/public/og/selectionSort.png b/public/og/selectionSort.png
diff --git a/public/og/sorting/selectionSort.png b/public/og/sorting/selectionSort.png
