Merge pull request #83 from Ayushswirlon/visual-sort-tour-guide

Visual sort tour guide
MastanSayyad · Jul 8, 2024 · 1eb9668 · 1eb9668
2 parents e7d766a + ca90523
commit 1eb9668
Showing 1 changed file with 167 additions and 0 deletions.
diff --git a/visual.html b/visual.html
@@ -98,6 +98,58 @@
             justify-content:space-around;
             margin: 10px 20px;
         }
+        .tour-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+            z-index: 1000;
+            display: none;
+        }
+
+        .tour-popup {
+            position: fixed;
+            background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
+            border-radius: 5px;
+            padding: 20px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+            max-width: 300px;
+            z-index: 1001;
+            max-height: calc(100vh - 40px); /* Ensure it doesn't exceed viewport height */
+            overflow-y: auto; /* Allow scrolling if content is too long */
+        }
+        .tour-popup h3 {
+            margin-top: 0;
+            color: #333;
+        }
+
+        .tour-popup p {
+            margin-bottom: 15px;
+        }
+
+        .tour-popup button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 3px;
+            cursor: pointer;
+            margin-right: 10px;
+        }
+
+        .tour-popup button:hover {
+            background-color: #0056b3;
+        }
+
+        .tour-popup .skip-btn {
+            background-color: #dc3545;
+        }
+
+        .tour-popup .skip-btn:hover {
+            background-color: #c82333;
+        }
     </style>
 </head>
 <body>
@@ -136,6 +188,15 @@ <h2 id="heading">SORTING VISUALIZATION</h2>
             <button class="btn-danger" onClick="window.location.reload();">Clear</button>
         </div>
     </div>
+    <div class="tour-overlay" id="tourOverlay">
+        <div class="tour-popup" id="tourPopup">
+            <h3 id="tourTitle"></h3>
+            <p id="tourDescription"></p>
+            <button id="tourNext">Next</button>
+            <button id="tourSkip" class="skip-btn">Skip</button>
+        </div>
+    </div>
+
 
     <script>
         let array = [];
@@ -538,6 +599,112 @@ <h2 id="heading">SORTING VISUALIZATION</h2>
             document.getElementById("worst-case").textContent = `Worst Case: ${complexity.worst}`;
             document.getElementById("space-complexity").textContent = `Space Complexity: ${complexity.space}`;
         }
+        const tourSteps = [
+            {
+                title: "Welcome to Sorting Visualizer",
+                description: "This tour will guide you through the features of our sorting algorithm visualizer.",
+                target: "heading"
+            },
+            {
+                title: "Time Complexity",
+                description: "This section shows the time and space complexity of the selected sorting algorithm.",
+                target: "best-case"
+            },
+            {
+                title: "Enter Your Array",
+                description: "Type your numbers separated by spaces in this input box.",
+                target: "array"
+            },
+            {
+                title: "Submit Array",
+                description: "Click this button to visualize your entered array.",
+                target: "submit"
+            },
+            {
+                title: "Choose Sorting Algorithm",
+                description: "Select the sorting algorithm you want to visualize.",
+                target: "sortSelect"
+            },
+            {
+                title: "Start Sorting",
+                description: "Click this button to start the sorting process.",
+                target: "start"
+            },
+            {
+                title: "Additional Controls",
+                description: "Use these buttons to stop, resume, reset, or clear the visualization.",
+                target: "buttons"
+            }
+        ];
+
+        let currentStep = 0;
+
+        function startTour() {
+            document.getElementById("tourOverlay").style.display = "block";
+            showStep(currentStep);
+        }
+
+        function showStep(step) {
+    const tourPopup = document.getElementById("tourPopup");
+    const targetElement = document.getElementById(tourSteps[step].target);
+    const targetRect = targetElement.getBoundingClientRect();
+
+    // Calculate position
+    let top = targetRect.bottom + 10;
+    let left = targetRect.left + targetRect.width / 2 - 150; // Center the popup
+
+    // Adjust if it goes off-screen
+    if (left < 10) left = 10;
+    if (left + 300 > window.innerWidth) left = window.innerWidth - 310;
+
+    // Check if the popup would go below the viewport
+    if (top + 200 > window.innerHeight) {
+        // Position above the target element if it would go below
+        top = targetRect.top - 210;
+
+        // If it's still off-screen (too high), position it at the top of the viewport
+        if (top < 10) {
+            top = 10;
+        }
+    }
+
+    // Ensure the popup is within the viewport vertically
+    top = Math.max(10, Math.min(top, window.innerHeight - 210));
+
+    tourPopup.style.left = `${left}px`;
+    tourPopup.style.top = `${top}px`;
+
+    document.getElementById("tourTitle").textContent = tourSteps[step].title;
+    document.getElementById("tourDescription").textContent = tourSteps[step].description;
+
+    if (step === tourSteps.length - 1) {
+        document.getElementById("tourNext").textContent = "Finish";
+    } else {
+        document.getElementById("tourNext").textContent = "Next";
+    }
+
+    // Scroll the target element into view if it's not fully visible
+    targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+}
+        document.getElementById("tourNext").addEventListener("click", () => {
+            currentStep++;
+            if (currentStep < tourSteps.length) {
+                showStep(currentStep);
+            } else {
+                document.getElementById("tourOverlay").style.display = "none";
+                currentStep = 0;
+            }
+        });
+
+        // Start the tour when the page loads
+        window.addEventListener("load", function() {
+            loader.style.display = "none";
+            startTour();
+        });
+        document.getElementById("tourSkip").addEventListener("click", () => {
+    document.getElementById("tourOverlay").style.display = "none";
+    currentStep = 0;
+});
     </script>
     <script>
       var loader = document.getElementById("Loader");