How do I allow the group container to accept an item when dropped anywhere in the container border? | XM Community
Skip to main content
Question

How do I allow the group container to accept an item when dropped anywhere in the container border?

  • December 19, 2020
  • 2 replies
  • 36 views
N

Hi there! This question pertains to the "Pick, group, rank" feature.
I have a list of about 45 items, and participants are to choose 15 of those items and place them in a single group container. I have added custom code to make the group container as long as the item list, however, I can only drop items into the top of the container. This negates the reason for making the container long in the first place. How can I allow "entry" of each item into any part of the container? (i.e. so a user can drag an item from the list directly into the container, adjacent to the item and not have to scroll up to the top of the container to drop it in)
I don't know much about coding, so please keep terminology simple.
Thank you!
The current code I have put in is:
.Skin .PGR .DragAndDrop td.itemsContainerTd {width:100%}
.Skin .PGR .DragAndDrop td.itemsContainerTd {height:100%}
.Skin .PGR .DragAndDrop .Group h2, .Skin .PGR .DragAndDrop .Group ul, .Skin .PGR .DragAndDrop .Items h2, .Skin .PGR .DragAndDrop .Items ul {width:100%}
.Skin .PGR .DragAndDrop td.groupsContainerTd div > div { border: 4px solid; height: 2000px; }

Abhishek_U

2 replies

A
Level 7 ●●●●●●●
Forum|alt.badge.img+22
  • ahmedA
  • Level 7 ●●●●●●●
  • December 19, 2020

Remove all the CSS and just add this to the question JS. The problem is that you were increasing the height of the lines that were drawn around the container, but not the actual container. So it looked big, but its entire area wasn't being used to detect inputs. It looks really ugly though. You can change the 

1000px
to increase of decrease the height as per your requirements.
Qualtrics.SurveyEngine.addOnReady(function () {
    qid = this.questionId;
    groups = document.querySelectorAll("[id^='" + qid + "group']");
    groups.forEach((box) => {
        box.style.height = "1000px";
    });
});
Here's a working demo.

B
Forum|alt.badge.img
  • bsk
  • June 4, 2021

Hello, I have three groups that people need to drop many phrases for each of them however when I used this code question HTML, it does not work. Is this one only for 2 groups?

Terms & ConditionsAccessibility statement