Get IDs of buckets in Matrix Likert Drag & Drop | XM Community
Skip to main content

I am trying to limit the number of elements that can be placed in a bucket in a matrix likert drag & drop. I know there is the Validation option but I specifically want to make it so that it it is impossible to add another element after the limit is reached.

I saw a very similar question on StackOverflow: https://stackoverflow.com/questions/50893258/qualtrics-drag-and-drop-allowing-just-one-item-per-bucket. I have pasted the code from this question below.

 

Could someone explain to me how I get the IDs of the buckets? That is, what I should replace for ‘#QID8group0’ etc down below

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/   
jQuery(function() {
jQuery("ul.droptrue").sortable({
    connectWith: "ul",
});

jQuery("ul.dropfalse").sortable({
    connectWith: "ul",
    dropOnEmpty: false
});

jQuery("#QID8group0,#QID8group1, #QID8group2, #QID8group3, #QID8group4, #QID8group5, #QID8group6,#QID8group7,#QID8group8,#QID8group9").disableSelection();

 jQuery("#QID8group0,#QID8group1, #QID8group2, #QID8group3, #QID8group4, #QID8group5, #QID8group6,#QID8group7,#QID8group8,#QID8group9").on("sortreceive", function(event, ui) {
    var jQuerylist = jQuery(this);

    if (jQuerylist.children().length > 1) {
        jQuery(ui.sender).sortable('cancel');
    }
});
});

});

 

Not sure if this code will work for you but you can find the ids of your survey elemets by following this post.

@Shashi Thanks a ton for your response. That post helps find the id of an input field, but I’m having trouble extrapolating it to getting the id for a matrix likert bucket. Looking at the CSS I can identify that for me the bucket in question has a ‘data-answerid’ value, but I don’t know what to put for “#QID8group0”. My question is QID1 and the bucket I want to limit is group 8, so trying “#QID1group8” doesn’t do anything.
Any more guidance would be extremely appreciated!

Hi, that code was made for PGR question, which uses jQueryUI and so can use .sortable and .disableSelection.

Matrix drag and drop does not appear to use jQueryUI and so adapting that PGR code for this question type is unfortunately not as straight forward as swapping out the selectors.

For Matrix drag and drop, there are 2 ways to add statements to the Scale point buckets: Drag and Drop a statement into the Scale point bucket or Click a statement and then on a Scale point bucket to add the statement to the bucket. The 2nd approach can be disabled by adding the below JavaScript:

jQuery("#"+this.questionId+" .AnswerBucket").eq(0).css({"pointer-events":"none"});

However, I struggled to find a way to disable the 1st approach. I think that in order to have the statement revert back to its original location when trying to add it to a bucket that already has a statement in it, the bucket needs to not be recognized as a droppable location.

I might recommend to create this question using the PGR question type so that you can use the existing code. If you do, I would just add the below to get the vertical scroll bar to display.

jQuery("#"+this.questionId).css({"height":"500px", "overflow-y":"scroll"});

 

Leave a Reply


Terms & Conditions