Pick drop and rank | XM Community
Skip to main content

Hi everyone,

I'm working on a survey in Qualtrics with a "Pick, Group" question where participants need to select up to 4 items from a list of 8 and place them into a group box. I want to ensure that once they've selected 4 items, they can't select more, and they can't change their selections once they've placed them in the group. I also want to disable clicks on any remaining items after the limit is reached.

Is there a way to implement this functionality, either through Qualtrics settings or a known workaround? Any advice or guidance would be greatly appreciated!

Thanks in advance for your help!

@Danielarosalesd As I understood, you only have 1 group? Can‘t you select „Add validation“ > „Each group contains“ to select 4 options to be selected? Or „Must have“ with min and Max equal to 4. Additionally, I would activate „Force response“.

To deactivate changes after selection is complete, you will probably need JavaScript. Which layout do you use?

@Danielarosalesd I just prepared the JavaScript which you could use in your “Pick, group and rank” question: 

Qualtrics.SurveyEngine.addOnload(function() {
    const ulElement = document.getElementById(this.questionId + 'group0');
    const targetElement = document.getElementById(this.questionId);

    // Function to check the number of li elements and disable pointer events if there are 4
    function checkAndDisable() {
        const liElements = ulElement.getElementsByTagName('li');

        if (liElements.length >= 4) {
            targetElement.style.pointerEvents = 'none';
        }
    }

    // MutationObserver to watch for changes in the list
    const observer = new MutationObserver(checkAndDisable);

    // Configuration for the observer: look for changes in the child list
    const config = { childList: true };

    // Start observing the ul element
    observer.observe(ulElement, config);

    // Initial check in case the list already has 4 or more items
    checkAndDisable();
});

This is based on a question with 1 group: 

The 1st line of code: 

const ulElement = document.getElementById(this.questionId + 'group0');

...expects the group element to have the ID QID...group0. If the code does not work for you, you may check the ID of your group: 

Once 4 options were added to the group, drag & drop is enabled for the whole question by setting pointerEvents style to none. 

Important: This will not work for simple layout! 

In addition to the JavaScript, you should define the response requirements like this: 

Best
Christian

Leave a Reply


Terms & Conditions