Steps for concealing the subsequent button in a Qualtrics survey until a specific time of day

Question

Steps for concealing the subsequent button in a Qualtrics survey until a specific time of day

I've been attempting to conceal the next button on a Qualtrics survey until a specific day and time (stored as 'threshold' in my code). I've experimented with

Qualtrics.SurveyEngine.addOnload(function()
{
    var threshold = '2020-02-07T20:00:00.000Z';
    var today = new Date();
    if(threshold < today) $('NextButton').hide();
    else $('NextButton').show();

});

along with

Qualtrics.SurveyEngine.addOnload(function() {   
    function hideEl(element) {
        element.hide();
    }   
    var nb = $('NextButton');
    var threshold = '2020-02-07 08:12';
    var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var time = today.getHours() + ":" + today.getMinutes();
    var dateTime = date+' '+time;
        hideEl.defer(nb);
    if(var dateTime < threshold ) nb.hide();
    else nb.show();

    });

and

Qualtrics.SurveyEngine.addOnload(function() {
    function hideEl(element) {
        element.hide();
    }
    var threshold = '2020-02-07T20:00:00.000Z';
    var today = new Date();
    var nb = $('NextButton');
    hideEl.defer(nb);
 $(this.questionId).on('display', function(event) {
        if(today<threshold) nb.hide();
        else nb.show();
    });
});

Unfortunately, none of these attempts have successfully achieved the desired result. Any suggestions?

Thank you!!

javascript qualtrics

Answer 1

Answer №1

If you are eager to see the page load with your button visible, simply waiting in place will not suffice. This is because your onload code only executes once. To resolve this issue, one solution is to determine the amount of time (in milliseconds) it will take for your button to appear after the page loads. Subsequently, you can set a timeout function to trigger the display of the button once that specified duration has elapsed.

function onLoadCb() {
  // Specify when you want your button to become visible:
  const timeToShow = new Date('<enter your desired date>');
  // Convert the specified time to milliseconds:
  const msToShow = Number(timeToShow);
  // Obtain the current time in milliseconds:
  const now = Date.now();
  // Perform necessary calculations:
  const msToWait = msToShow - now;

  // Implement a timeout function to trigger the button display after the calculated delay:
  setTimeout(() => {
    // It's time to reveal the button!
    $('.NextButton').show();
  }, msToWait);
}

Answer 2

If you are eager to see the page load with your button visible, simply waiting in place will not suffice. This is because your onload code only executes once. To resolve this issue, one solution is to determine the amount of time (in milliseconds) it will take for your button to appear after the page loads. Subsequently, you can set a timeout function to trigger the display of the button once that specified duration has elapsed.

function onLoadCb() {
  // Specify when you want your button to become visible:
  const timeToShow = new Date('<enter your desired date>');
  // Convert the specified time to milliseconds:
  const msToShow = Number(timeToShow);
  // Obtain the current time in milliseconds:
  const now = Date.now();
  // Perform necessary calculations:
  const msToWait = msToShow - now;

  // Implement a timeout function to trigger the button display after the calculated delay:
  setTimeout(() => {
    // It's time to reveal the button!
    $('.NextButton').show();
  }, msToWait);
}

Steps for concealing the subsequent button in a Qualtrics survey until a specific time of day

Answer №1

Similar questions

Is your Node.js HTTP Request failing to function properly?

Firebase authentication encountered an error due to a network request failure

Latest output is fetched by jQuery from the load() method

Function asynchronously returning Promise even after Await statement is executed

Vue automatically clears the INPUT field when disabling it

React 18 doesn't trigger component re-rendering with redux

Expo project encountering issues with nested navigation in React-Native

utilizing staggered animations with three.js

Error: Variable 'err' is undefined in Node.js

Tips for adding a new property to an array object in TypeScript using a condition

React Native - A button positioned with a lower zIndex will always be displayed on top of a view with a higher

Issues with Autofocus while Searching and Selecting from Dropdown menu

Utilize mongoose-delete to bring back items that have been marked for deletion but are still

Attempting to persist a nested document in MongoDB using mongoose within a Nodejs environment

Accessing Next and Previous Elements Dynamically in TypeScript from a Dictionary or Array

Guide on how to use JavaScript to make an HTML5 input field mandatory

YUI3 Searching with Selectors

What is the best way to incorporate a state variable into a GraphQL query using Apollo?

Disable the scroll bar on a bootstrap modal

How can I make an image appear in React when it is