On some pages of a survey, I have created a popup using javascript as per the code below. The problem is that this popup option ("Review Instructions") appears on subsequent pages of the survey as well, even though those pages do not have any javascript code. How do I get rid of it on subsequent pages? Thanks!
Qualtrics.SurveyEngine.addOnload(function() {
var instructionsText = ` ….some text ….
`;
// Function to show the popup with instructions
function showInstructions() {
var popup = document.createElement("div");
popup.style.position = "fixed";
popup.style.width = "80%";
popup.style.height = "60%";
//...(more design aspects)
var closeButton = document.createElement("button");
closeButton.innerHTML = "Close";
closeButton.style.marginTop = "10px";
closeButton.onclick = function() {
document.body.removeChild(popup);
};
popup.innerHTML = instructionsText;
popup.appendChild(closeButton);
document.body.appendChild(popup);
}
// Add a button to trigger the popup
var instructionsButton = document.createElement("button");
instructionsButton.innerHTML = "Review Instructions";
instructionsButton.onclick = showInstructions;
// Style the button to position it near the top center of the page
instructionsButton.style.position = "fixed";
instructionsButton.style.top = "20px";
instructionsButton.style.left = "50%";
instructionsButton.style.transform = "translateX(-50%)";
instructionsButton.style.zIndex = "1000";
instructionsButton.style.padding = "12px 20px"; // Make the button box larger
instructionsButton.style.fontSize = "16px"; // Increase the font size
});
Qualtrics.SurveyEngine.addOnUnload(function() {
// Remove the button when navigating away from this page
if (this.instructionsButton) {
this.instructionsButton.remove();
}
});