Search code examples
javascriptjqueryhtmlqualtrics

addEventListener.delay() can be doable?


Hi I have a code in qualtrics written with jquery. I need to implement delay function for event listening. My code enables key press as inputs. there should be a delay function...

I should disable the keys for the first 2000ms then enable them.

My task has 3 different parts and all parts are dipslayed or hid according to the time.

so here is my code;

function disableMouse(event) {
  event.stopPropagation()
}
window.disableMouseFunction = disableMouse


Qualtrics.SurveyEngine.addOnload(function() {

  document.body.style.cursor = 'none'; // hide cursor

  setTimeout(function() {
    document.addEventListener('keydown', function keydownCallback(e) {
      var that = this;
      var aa = null;
      switch (e.keyCode) {

        case 37: // left arrow key                 
          that.setChoiceValue(1, true) //pic a     
          aa = 1;
          break;

        case 39: // right arrow key                  
          that.setChoiceValue(2, true) //pic B     
          aa = 1;
          break;
      }
      if (aa) {
        document.removeEventListener('keydown', keydownCallback, true);
        //move to the next page after delay
        that.clickNextButton();
      }
    });
  }, 1000);
});

Qualtrics.SurveyEngine.addOnReady(function() {
  setTimeout(function() {
    jQuery('#showfirst').delay(500).hide(1);
    jQuery('#hideafter').delay(500).show(1);
    jQuery('#hideafter').delay(2000).hide(1);
    jQuery('#reveallater').delay(2550).show(2);
  })
});

Solution

  • I could not disable the input for first 2 seconds, so I just hide the choices and make them appear after 2 seconds. People do not try to answer when the selections are not visible. Not the perfect solution but it works.

    <style> .QuestionBody { display: none;} </style> //in qualtrics
    

    This can be a helpful trick for those who have similar problems.