Is there a way to hide the next button (to prevent interviewee from moving on) under circumstances? | XM Community
Question

Is there a way to hide the next button (to prevent interviewee from moving on) under circumstances?


Is there a way to hide the next button (to prevent interviewee from moving on) under circumstances?
Basically I would want interviewee to answer certain questions in a specific way to move onto the next questions. I have tried using Force Response, but not all the questions have to necessarily be answered. I have used custom validation but I think I would like to try using Javascript to hide the next button if possible. Is this possible?


11 replies

Userlevel 7
Badge +22

What question type are you using?
Generally custom validation, force response is enough to validate the questions.
To hide next button on question, we use below code:
jQuery("#NextButton").hide();

It's Multiple Choice Questions. Validation does work but was wondering if it is possible to add Logic to the Javascript to hide the next button. How would I add the logic or the circumstances?
Ie: Interviewees that answers Q1-Q3 or leaves Q1-Q3 blank and only answers 4 can be shown the next button.

Userlevel 5
Badge +4

nicoleenvirosell - Yes for particular question if you want to show the next button based on the response of that question then we can do that using JS, here is an example, this will display the next button if select 2nd choice of that question.
Qualtrics.SurveyEngine.addOnload(function ()
{
  this.hideNextButton();
  this.questionclick = function(event,element)
  {
    //by default you get the click event as the first parameter and the clicked element as the second parameter
    console.log(event, element);
    if (element.type == 'radio')
    {
      var choiceNum = element.id.split('~')[2];
      if (choiceNum == 2)
      {
        //show the next button
        this.showNextButton();
      }
      else
      {
        //hide the next button
        this.hideNextButton();
      }
    }
  }
});

Interviewees that answers Q1-Q3 or leaves Q1-Q3 blank and only answers 4 can be shown the next button. - For this you can set one counter in embedded data variable and using that embedded variable at question 4 you can show or hide the next button.

SurajK - I have the code below in my survey to hide next button throughout entire survey but when I add code above to a question it does not trigger the next button to appear...did the code override one another?

Userlevel 5
Badge +4

https://www.qualtrics.com/community/discussion/comment/27387#Comment_27387Since you are hiding the next button on overall basis, use the below code as per the selection. In the below code if you select 2nd choice the next button will appear.
Qualtrics.SurveyEngine.addOnReady(function()
{
  this.questionclick = function(event,element)
  {
    if (element.type == 'radio')
    {
      var choiceNum = element.id.split('~')[2];
      if (choiceNum == 2)
      {
       jQuery("#NextButton").css('visibility','visible')
      }
    }
  }
});

https://www.qualtrics.com/community/discussion/comment/27390#Comment_27390I added your code into the question that I want the next button displayed (while keeping the overall hidden next button code) and when I click the 2nd choice it doesn't appear but instead it flashes the timer symbol really quickly.

Userlevel 5
Badge +4

https://www.qualtrics.com/community/discussion/comment/27391#Comment_27391I hope you have added the next button hidden code in the look and feel -> General ->Header -> Source.
Also, once check your choice ids for the options at that question where you want to make the next button appear. You can check the choice by enabling the support mode (Ctrl+Shift+Tools -> Support mode)

https://www.qualtrics.com/community/discussion/comment/27393#Comment_27393Both of these were issues and fixed the problem! Appreciate the help SurajK!!!

SurajK I noticed once I got this code to work, that if a user clicks the second choice and next button appears, they can then click the first choice and the next button will still be there. Does this mean I need to add a "hide next button" code for all answers that are NOT the second choice?
I thought the overall hide next button coding in look and feel would override this but after user clicks second choice and triggers next button to appear it does not go away if user click another choice.

Userlevel 5
Badge +4

https://www.qualtrics.com/community/discussion/comment/27457#Comment_27457You can just add the else condition, see below.
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
//this.hideNextButton();


  this.questionclick = function(event,element)
  {
// jQuery('.Skin label.MultipleAnswer.q-checked, .Skin label.MultipleAnswer.q-checked.q-focused, .Skin label.SingleAnswer.q-checked, .Skin label.SingleAnswer.q-checked.q-focused').attr('style','background:none !important')
    if (element.type == 'radio')
    {
      var choiceNum = element.id.split('~')[2];
      if (choiceNum == 2)
      {
       jQuery("#NextButton").css('visibility','visible')


      }
else
{ jQuery("#NextButton").css('visibility','hidden')}


    }
  }
  
 
});

https://www.qualtrics.com/community/discussion/comment/27467#Comment_27467I have added the else statement in but now when I click the choice number two it flashes the next button then goes away. If I click choice two a second time then the next button will stay.
I see your code at the beginning of this thread to another user is in OnLoad whereas the above you have OnReady. Would that be what is causing this? Perhaps the overall hide next button code in look and feel is overriding this?

Leave a Reply