Next button disappears after a click | XM Community
Skip to main content

Hi community, I have two questions in my survey, one pick/group/rank question (Q1) and a multiple choice question (Q2).

In the pick/group/rank question (Q1), I need to set the number of items that must be placed in each group (e.g., in the first group, 1 item; in the second group, 2 items). Since qualtrics does not provide a function to do that, I need to use some javascripts. The javascripts disable the “next” button until a set number of issues is placed in each box. And the javascripts work well for this question.

The next question is a multiple choice question (Q2). It belongs to a new question block, and does not have javascripts. However, for this question, the “next” button disappears after a single click on the page and does not reappear (so i cannot move to the next page). This “next” button does not disappear if I take out the javascripts from the previous pick/group/rank question (Q1), so I think this means the javascripts from the previous one (Q1) are affecting this one (Q2). Could you help me figure out why and how to let the “next” button not disappear for Q2? Thank you very much! 

Below is the javascript for Q1:

Qualtrics.SurveyEngine.addOnload(function()
{


});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
    that = this;
    that.hideNextButton ();
    document.addEventListener('mouseup',()=>{
     var group1=jQuery("#"+that.questionId+"group0 li").length;
     var group2=jQuery("#"+that.questionId+"group1 li").length;
     var group3=jQuery("#"+that.questionId+"group2 li").length;
     var group4=jQuery("#"+that.questionId+"group3 li").length;
     var group5=jQuery("#"+that.questionId+"group4 li").length;
     var group6=jQuery("#"+that.questionId+"group5 li").length;
     var group7=jQuery("#"+that.questionId+"group6 li").length;

     
      if(group1 == "1" && group2=="2" && group3=="3" && group4=="4" && group5=="3" && group6=="2" && group7=="1") 
       {that.showNextButton ();} 
        else  {that.hideNextButton ();} 
    }

        
        )
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/
    
});

 

Your shouldn’t add an event handler to the document. The mouseup handler is hiding the next button on the next page (since all the group lengths are zero).

Your shouldn’t add an event handler to the document. The mouseup handler is hiding the next button on the next page (since all the group lengths are zero).

Thank you Tom for your answe! The handler was added to the pick/group/rank question (Q1), not the Q2 question in another block. If it still affects Q2, is there a way to revise the Q1 javascript to make the impact of the javascript limited to Q1?

I added the mouseup handler to the pick/group/rank question because I need the system to check whether the correct number of issues are placed in each group every time participants click and move the items. Is there a way I could achieve that without using the handler? 

Really appreciate your help!

 

 

 

Your shouldn’t add an event handler to the document. The mouseup handler is hiding the next button on the next page (since all the group lengths are zero).

Thank you Tom for your answe! The handler was added to the pick/group/rank question (Q1), not the Q2 question in another block. If it still affects Q2, is there a way to revise the Q1 javascript to make the impact of the javascript limited to Q1?

I added the mouseup handler to the pick/group/rank question because I need the system to check whether the correct number of issues are placed in each group every time participants click and move the items. Is there a way I could achieve that without using the handler? 

Really appreciate your help!

There are many other ways to do it.  But, the simple answer is to add your handler to the question instead of the document:

document.getElementById(this.questionId).addEventListener('mouseup',()=>{

 

Your shouldn’t add an event handler to the document. The mouseup handler is hiding the next button on the next page (since all the group lengths are zero).

Thank you Tom for your answe! The handler was added to the pick/group/rank question (Q1), not the Q2 question in another block. If it still affects Q2, is there a way to revise the Q1 javascript to make the impact of the javascript limited to Q1?

I added the mouseup handler to the pick/group/rank question because I need the system to check whether the correct number of issues are placed in each group every time participants click and move the items. Is there a way I could achieve that without using the handler? 

Really appreciate your help!

There are many other ways to do it.  But, the simple answer is to add your handler to the question instead of the document:

document.getElementById(this.questionId).addEventListener('mouseup',()=>{

 

It works!!! Thank you so much!!!

Leave a Reply


Terms & Conditions