Custom Code to Split PGR Items Column into 2 and move one of the columns to the right side | XM Community
Skip to main content

Hi Everyone,
I have a PGR question with 36 possible items. I am trying to split the items list into two with 20 on the left and 15-17 on the right. I would like the newly generated columns to have new names. I found the codes to change the name from Item and the code to move the entire list to the right on the forum. Unfortunately, I have no java knowledge so I have not been able to modify the code I found to split the items column. Each item has a display logic so eventually, not all 36 items will populate but I want respondents to be able to see the options available to rank on either side of the group container.
The image below is an example of what I am trying to achieve.
Does anyone know how to do this?
Thank you so much in advance for your help.
Qualtrics.jpg

Hi there, I found some threads that can make the Items display in multiple columns, but within the ItemContainer, not on either side of the GroupContainer. The ItemContainer and the GroupContainer are next to each other in a table, so to have certain items display to the right of the GroupContainer, I think you would either have to find a way to make the Item Container span the width of the QuestionContainer and individually define the alignment of each Item, or copy the ItemContainer and find a way to selectively remove Items from either side.
The closest I was able to come was to clone the ItemContainer and attach it to the end of the GroupContainer, but the UI gets confused so it would make for a poor respondent experience. Still, the JS code for doing that is below, and the QID can be updated for whatever corresponds to your PGR question if you want to play around with it.
jQuery('ul#QID1items.Edited.PGRSortable.ui-sortable').clone().appendTo('#QID1 > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table > tbody > tr');
PGR_ItemsBothSides.png
I would recommend trying to break that PGR into 2 questions if you can - one that asks about Concerns for Yourself and one that asks about Concerns for Northern Nigeria. That way you can have the Items be specific to each concern and wont run into any UI issues.
Threads that involve adding columns within the ItemContainer describe solutions that either adjust the width of the Items themselves or the amount of columns within the ItemsContainer. The solution described in the below threads modify the width of the Items themselves, and can make it so that 5 Items are able to display horizontally on desktops before creating a new line for the next 5 Items. Could be helpful if you're trying to save space.
https://community.qualtrics.com/XMcommunity/discussion/15907/in-the-pick-group-and-rank-category-is-there-anyway-of-changing-the-items-to-horizontal
https://community.qualtrics.com/XMcommunity/discussion/1156/split-items-column-in-2-for-pick-group-rank
The solution described in the below thread defines how many columns should exist in the ItemContainer, which I think I like a little better than modifying the Item width.
https://stackoverflow.com/questions/36586703/qualtrics-javascript-display-items-in-pick-group-rank-questiontype-in-columns

Hi Tom_1842
https://community.qualtrics.com/XMcommunity/discussion/comment/46048#Comment_46048Thank you so so much for this very detailed and helpful response. I will play around with the code and read through all of those threads. I truly appreciate it. I'll update you if I am successful.

Leave a Reply


Terms & Conditions