Drag and drop questions - How do I force at least two items in each used box? | XM Community
Skip to main content

Hellos!
I have a drag and drop question in which respondents need to allocate 100 items to 20 boxes.
1) They do not have to use all 20 boxes.
2) They have to allocate all 100 items.
3) They must allocate at least 2 items in each box *that they use* (i.e. not all 20, consistent with (1)).
Would anyone be able to suggest a JavaScript code that enables me to enforce rule (3), please?
Many thanks in advance for any help you may be able to offer!

Best,
Giulia


Hi Juls ,
I'm sure you have a research reason why you are setting up the survey in this way, but as a user my original perception is that 100 items is too many for one question. Is there anyway you can segment this into different sections, maybe like 3-5 sections to make this more palpable? You will run into issues with people being able to see all 100 items on one page, especially if this is a survey available by mobile. I feel the respondents may feel overwhelmed by this ask.
However, if you maintain you need to categorize all 100 items to 20 boxes per your priorities above, I would recommend reaching out to TomG or Tom1842 for some help with custom code. You can find them in the Developers Corner. It might require a call for them to see the question, but I know both of them usually willing to help out if they have bandwidth.
Thomas W.


Hi Juls ,
I assume you are using Pick Group and Rank question setup of Qualtrics.
So , to achieve you task,
Please copy paste below code in you addOnReady function of JS API of Qualtrics
To perform the requested condition in statement 1 and 3:
//to access the question body to apply event listener
let ques=document.getElementById("Questions")
//to access the groups in which options are dragged
let quest=document.querySelectorAll("[role=list]")
//to access the next button
let button=document.getElementById('NextButton');
//event listener on question body for when mouse is released
ques.addEventListener("mouseup", function(event) {
 for(let i=1;i   { //validates your condition of statement 3
if((questqi].childElementCount>=2)||(questqi].childElementCount==0))
{
   button.disabled=false;
   
}
else
{button.disabled=true;
//disables the button and breaks from the loop if condition is not satisfied
     break; 
}      
   }
});

image.png

For statement 2 , you can use validation as below
image.png Hope it solves your query😊!!



Hi qualtrics_nerd

Thank you so much for sharing this. I really appreciate. It is very useful: it deactivates the "next" button on the page until I have two items in at least one of the boxes.
Is there any way for me to extend this condition to all the other boxes that are used, in addition to at least one? I think this is what you are trying to do with the loop, but it seems the loop stops at the first box I put two items in, with the next button reactivating even if all the other boxes I have used only have one element in them. I am not sure how to tweak the loop to get the counter to run until the N of loops I have effectively used. Would you have any suggestions?

Thanks lots.
Best,
Juls


https://community.qualtrics.com/XMcommunity/discussion/comment/54513#Comment_54513Hi Juls ,
Maybe while copying some brackets were misplaced,
can you check again with below code as it is working fine on my end with all the boxes used
it enables next button if either atleast 2 items in the either box or zero
for selection of all items i am using validation:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
//to access the question body to apply event listener
let ques=document.getElementById("Questions")
//to access the groups in which options are dragged
let quest=document.querySelectorAll("[role=list]")
//to access the next button
let button=document.getElementById('NextButton');
//event listener on question body for when mouse is released
ques.addEventListener("mouseup", function(event) {
 for(let i=1;i  { //validates your condition of statement 3 
if((questqi].childElementCount>=2)||(questqi].childElementCount==0))
{
  button.disabled=false;
   
}
else
{button.disabled=true;
//disables the button and breaks from the loop if condition is not satisfied
   break;  
}    
  }
});


});

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

});


qualtrics_nerd - amazing it is indeed working now.
Yes, I had solved the selection of all items, exactly as you also suggest.

Thank you so much for this!
J


Leave a Reply