<body>
<div class="container">
<div class="left-side">
<button id="showDialogButton">Take Tour</button>
<button id="showModalButton">Show Terms & services</button>
<dialog id="tour-dialog">
<div id="tour-content">
<div class="triangle-top"></div>
<h2>Welcome to the Guided Tour!</h2>
<p>
This tour will guide you through the basics of this
website.
</p>
<div class="buttons">
<button id="next-button">Next</button>
<button id="cancel-button">Cancel</button>
</div>
</div>
<div id="tour-content-html" style="display: none">
<div class="triangle-top"></div>
<h2>This is where you enter HTML</h2>
<p>This section is dedicated to entering HTML code.</p>
<div class="buttons">
<button id="next-button">Next</button>
<button id="cancel-button">Cancel</button>
</div>
</div>
<div id="tour-content-css" style="display: none">
<div class="triangle-top"></div>
<h2>This is where you enter CSS</h2>
<p>This section is dedicated to entering CSS code.</p>
<div class="buttons">
<button id="next-button">Next</button>
<button id="cancel-button">Cancel</button>
</div>
</div>
<div id="tour-content-js" style="display: none">
<div class="triangle-top"></div>
<h2>This is where you enter Javascript</h2>
<p>This section is dedicated to entering Javascript code.</p>
<div class="buttons">
<button id="thankyou-button">Thank You!</button>
</div>
</div>
</dialog>
<dialog id="modal">
<p>This is a Modal</p>
<p>Lorem Ipsum terms and services</p>
<label>
<input type="checkbox" id="termsAndServicesCheckbox" />
Accept terms and services </label
><br />
<button id="closeModal">Accept</button>
</dialog>
</div>
</div>
</body>
.left-side, .right-side {
flex: 1;
padding: 20px;
}
#difficult-word {
text-decoration: underline;
cursor: pointer;
}
#modal{
position: relative;
height: 150px;
width: 300px;
right: 80%;
top: 30%;
}
#mypopover {
position: absolute;
height: 150px;
width: 150px;
left: 30%;
top: 15%; /* Position directly below the span */
margin-top: 5px; /* Add a small margin for spacing */
}
#tour-dialog {
position: relative;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
}
.triangle-top {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
#tour-content-html{
left: 80%;
top: 15%;
}
// Get DOM elements
const showDialogButton = document.getElementById("showDialogButton");
const showModalButton = document.getElementById("showModalButton");
const modalElement = document.getElementById("modal");
const modalCloseButton = document.getElementById("closeModal");
const difficultWords = document.getElementById(".difficult-word");
//const popover = document.getElementById("mypopover");
const tourDialog = document.getElementById("tour-dialog");
const nextButton = document.getElementById("next-button");
const cancelButton = document.getElementById("cancel-button");
const thankyouButton = document.getElementById("thankyou-button");
let currentStep = 0; // Keeps track of the current tour step
// Attach event listeners once
showDialogButton.addEventListener("click", () => {
tourDialog.show();
currentStep = 0; // Reset step when opening
});
tourDialog.addEventListener("click", handleButtonClick);
function handleButtonClick(event) {
const clickedElement = event.target;
if (clickedElement.id === "next-button") {
// ... handle next button click logic ...
currentStep++; // Go to next step
console.log(currentStep);
switch (currentStep) {
case 1:
tourDialog.style.top = "-15%";
tourDialog.style.left = "-40%";
document.getElementById("tour-content").style.display = "none";
document.getElementById("tour-content-html").style.display = "block";
break;
case 2:
tourDialog.style.top = "-5%";
tourDialog.style.left = "";
document.getElementById("tour-content-html").style.display = "none";
document.getElementById("tour-content-css").style.display = "block";
nextButton.textContent = "Next"; // Modify button text
break;
case 3:
tourDialog.style.top = "-5%";
tourDialog.style.left = "40%";
document.getElementById("tour-content-css").style.display = "none";
document.getElementById("tour-content-js").style.display = "block";
nextButton.textContent = "Next"; // Modify button text
break;
case 4:
tourDialog.close();
break;
}
} else if (clickedElement.id === "cancel-button") {
document.getElementById("tour-content").style.display = "";
document.getElementById("tour-content-html").style.display = "none";
document.getElementById("tour-content-css").style.display = "none";
document.getElementById("tour-content-js").style.display = "none";
tourDialog.style.top = "-5%";
tourDialog.style.left = "5%";
currentStep = 0;
tourDialog.close();
}
}
thankyouButton.addEventListener("click", () => {
document.getElementById("tour-content").style.display = "";
document.getElementById("tour-content-html").style.display = "none";
document.getElementById("tour-content-css").style.display = "none";
document.getElementById("tour-content-js").style.display = "none";
tourDialog.style.top = "-5%";
tourDialog.style.left = "5%";
currentStep = 0;
console.log(currentStep);
tourDialog.close()
});
// Show Modal button
showModalButton.addEventListener("click", () => {
modalElement.showModal();
});
modalCloseButton.addEventListener("click", () => {
if (termsAndServicesCheckbox.checked) {
modalElement.close();
} else {
// Show an error message (e.g., using a separate element or alert)
alert("Please accept terms and services.");
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.