I want to hide the next button until a specific URL on the page has been clicked. I was able to achieve this by
-
Giving URL an ID (info)
-
Creating embedded variable to track links (collect = 0)
-
Editing Question JavaScript:
```
Qualtrics.SurveyEngine.addOnload(function() {
// Set the Embedded Data value to 0 initially
Qualtrics.SurveyEngine.setEmbeddedData("collect", "0");
console.log("Onload: collect value set to 0.");
// Hide the Next button initially
jQuery("#NextButton").hide();
console.log("Next button hidden on load.");
// Attach a click event handler to the "info" link
jQuery('#info').on('click', function(event) {
// Prevent the default link behavior
event.preventDefault();
// Set the Embedded Data value to 1
Qualtrics.SurveyEngine.setEmbeddedData("collect", "1");
console.log("Embedded data 'collect' set to 1.");
// Show the Next button after the link is clicked
jQuery("#NextButton").show();
console.log("Next button shown after clicking the link.");
// Open the link in a new window
window.open(this.href, '_blank');
});
});
Qualtrics.SurveyEngine.addOnReady(function() {
// Check the embedded data value when the page is fully displayed
var collectValue = Qualtrics.SurveyEngine.getEmbeddedData('collect');
console.log("OnReady: collect value is " + collectValue);
if (collectValue === '1') {
jQuery("#NextButton").show();
console.log("Next button shown on ready because 'collect' is 1.");
} else {
jQuery("#NextButton").hide();
console.log("Next button hidden on ready because 'collect' is not 1.");
}
});
```
But, this does not work when I add the timing question within the same survey block. I want to measure how long participants stay on this specific page (page submit metric), and also hide the next button until the url has been clicked. Any help would be greatly appreciated. Thanks.