Making items in pick, group, and rank reusable | XM Community
Skip to main content

The survey question below includes five items and several groups. Participants will be asked to drag the items into the groups. I am wondering if it’s possible to make the items reusable. For instance, I'd like participants to be able to drag a circle to both Round 1 and Round 2, or drag two circles to Round 1.

I realize I could duplicate shapes in the item list or split the question into multiple parts, but these options would make my survey overly cumbersome. I’m specifically seeking a way to make the items reusable, potentially through adding JavaScript codes.

 

 

*By the way, I’ve asked ChatGPT 4 to write JavaScript codes for this issue. Although the code runs, it doesn't seem to work as intended – the items are still not reusable and disappear from the groups after a single use. I’ve attached the codes written by ChatGPT in the space below.

 

Qualtrics.SurveyEngine.addOnload(function() {
    // Function to handle the item drop event
    function handleDropEvent(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("text");
        var originalItem = document.getElementById(data);

        // Create a clone of the item and append it to the target group
        var clone = originalItem.cloneNode(true);
        clone.id = ""; // Clear the ID to avoid duplicate IDs in the document
        clone.draggable = true;
        clone.addEventListener('dragstart', handleDragStartEvent);

        // Ensure that we append the clone to the group container, not a child element
        var dropTarget = event.target;
        while (!dropTarget.classList.contains('Group') || !dropTarget.classList.contains('BorderColor') || !dropTarget.classList.contains('Columns')) {
            dropTarget = dropTarget.parentNode;
        }
        // Append to the ul element inside the group container
        dropTarget.querySelector('ul').appendChild(clone);
    }

    // Function to handle the drag start event
    function handleDragStartEvent(event) {
        event.dataTransfer.setData("text", event.target.id);
    }

    // Add event listeners to items
    var items = n'QR~QID184~1', 'QR~QID184~2', 'QR~QID184~3', 'QR~QID184~4', 'QR~QID184~5'];
    items.forEach(function(itemId) {
        var item = document.getElementById(itemId);
        item.draggable = true;
        item.addEventListener('dragstart', handleDragStartEvent);
    });

    // Add event listeners to groups
    var groups = s'QID184group0', 'QID184group1', 'QID184group2', 'QID184group3', 'QID184group4'];
    groups.forEach(function(groupId) {
        var group = document.getElementById(groupId);
        group.addEventListener('dragover', function(event) {
            event.preventDefault(); // Necessary to allow dropping
        });
        group.addEventListener('drop', handleDropEvent);
    });
});

@Jacobz1 
Have you tried using stack items after duplicating images?

 


@Jacobz1 
Have you tried using stack items after duplicating images?

 

Yes I have, but unfortunately the resulting design is not as user friendly as I want it to be. It would be preferable if there is some way to make each individual shape reusable (as opposed to stacking all shapes onto each other).

 

Thank you for your suggestion though!


Leave a Reply