Thomas
Thomas

Reputation: 3

Qualtrics, Javascript: how to implement a pause and show previously hidden choices?

I design a new survey and in one of my multiple choice questions, the alternatives are supposed to be hidden for 1 sec and so that the user is inclined to spend more attention to the question before answering. So far my code is only able to hide the choices but waiting and showing is still missing. (code below)

Thanks for any help or suggestions on how to solve this issue.

Qualtrics.SurveyEngine.addOnload(function () {
    this.hideNextButton();
    this.hideChoices();

    //HERE I WOULD LIKE THE CODE TO WAIT FOR 1 sec 

    //HERE I WOULD LIKE THE CHOICES TO REAPPEAR ON THE SCREEN

    this.questionclick = function (event, element) {
        if (this.getChoiceValue(4) == true) {
            this.clickNextButton();
        } else if (this.getChoiceValue(5) == true) {
            this.clickNextButton();
        }
    }
});

Upvotes: 0

Views: 458

Answers (1)

Tomalak
Tomalak

Reputation: 338188

There are two parts of the problem here.

  1. How to wait one second? That's done with setTimeout() and a callback function.
  2. How to make sure the callback function works on the right object? - That's done by storing the object we want to work on in a variable.

So, without knowing anything about Qualtrics SurveyEngine, it is clear from your code that this inside the onLoad callback refers to your survey object. We will need that object later in the setTimeout callback, so let's store it. The rest is easy:

Qualtrics.SurveyEngine.addOnload(function () {
  var survey = this;

  // attach click event handler    
  self.questionclick = function (event, element) {
    // using `survey` instead of `this` would work here, too
    if (this.getChoiceValue(4) || this.getChoiceValue(5)) {
      this.clickNextButton();
    }
  };

  // hide buttons
  survey.hideNextButton();
  survey.hideChoices();

  // after 1000ms, show buttons again
  setTimeout(function () {
    survey.showNextButton();
    survey.showChoices();
  }, 1000);
});

Upvotes: 2

Related Questions