Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visual sort tour guide #83

Merged
merged 4 commits into from
Jul 8, 2024
Merged

Visual sort tour guide #83

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e26b838
tour-guide-added
Ayushswirlon Jul 7, 2024
fdc1c87
updated-the-tour-guide
Ayushswirlon Jul 7, 2024
26fbb4a
added the skip button and modify the tour guide
Ayushswirlon Jul 7, 2024
ca90523
added a shadow in the background
Ayushswirlon Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 167 additions & 0 deletions visual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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");
Expand Down
Loading