Making items in pick, group, and rank reusable

Question

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 = ['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 = ['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);    });});

Deepak · Answer

@Jacobz1Have you tried using stack items after duplicating images?

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded