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);
});
});