Hi!I have seen this question asked multiple times on this forum, but I could not find a definitive answer. I would like to have the rank order question in the drag and drop modality, where the items are displayed horizontally. I know this problem needs some custom code, which I cannot seem to figure out (even with chatGPT). I am wondering if anyone else maybe encountered the same issue and could help me out with their custom code. Thank you very much in advance! <3

Thank you for providing the QSF. I see what you mean. Try using this updated CSS which adjusts some item sizing:/* Use full screen */.Skin .SkinInner {width: 100% !important;max-width: 100% !important;}/* fix Group headers */.Skin .PGR .DragAndDrop .Group h2 {width: 100% !important;font-size: 12px;}/* Shrink Group containers */.Skin .PGR .DragAndDrop .Group>div>ul, .Skin .PGR .DragAndDrop .Items>ul { min-height: 120px !important;}/* Shrink Group container */.Skin .PGR .DragAndDrop td.groupsContainerTd div>div { min-height: 120px !important;}/* Remove item padding, item sizing */.Skin .PGR .DragAndDrop .QuestionBody .Group>div>ul>li, .Skin .RO .DND>ul>li {padding: 0px !important;width: 100px !important;}/* Label sizing*/.Skin .PGR .DragAndDrop .QuestionBody label {width: 100px !important;}/* Item sizing */.Skin .PGR .DragAndDrop .Items>ul>li {width: 100px !important;display: block !important;}/* Item sizing */.Skin .PGR .DragAndDrop .Items { width: 100% !important;}/* Hide rank */.rank {display: none !important;}/* Set Group Width and Item Columns */@media (min-width:481px) {.Skin .PGR .DragAndDrop .Group { width: 10%;}.Skin .PGR .DragAndDrop .Items ul {width: 100% !important; columns: 10; -webkit-columns: 10; -moz-columns: 10;}}@media (max-width:480px) {.Skin .PGR .DragAndDrop .Group { width: 50% !important;}.Skin .PGR .DragAndDrop .Items ul {width: 100% !important; columns: 2; -webkit-columns: 2; -moz-columns:2;}}

Hi, I took a swing at this one and I think the below comes close to what you are looking for. It uses a modified Pick, Group, and Rank question type to arrange the Groups and Items horizontallyand Custom Validation so that each Group/Rank can only have 1 Item placed within it to proceed. Here is what it looks like on desktop:To give it a try, set the survey to Classic layout and then add a Pick Group and Rank question. Give it 10 Groups and 10 Items. Enable the “Add Columns” setting. Set the Group names to be Rank 1 through Rank 10 and then enable Custom Validation so that “Each group contains” Min =1 and Max=1.Add the below to the question’s JavaScript to movethe Groupcontainer into a newly created row beneath the Items container:Qualtrics.SurveyEngine.addOnload(function(){/*Place your JavaScript here to run when the page loads*/var qid = this.questionId;var lastrow = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table tr:last';jQuery(lastrow).after('<tr>...</tr>');});Qualtrics.SurveyEngine.addOnReady(function(){/*Place your JavaScript here to run when the page is fully displayed*/var qid = this.questionId;var groupcont = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table > tbody > tr > td.groupsContainerTd.BorderColor';var newrow = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table > tbody > tr:nth-child(2)';jQuery(groupcont).detach().appendTo(newrow);});Qualtrics.SurveyEngine.addOnUnload(function(){/*Place your JavaScript here to run when the page is unloaded*/});Finally, add the below CSS to the Style section of the survey’s Look & Feel. I commented out what each piece is doing. You will want to adjust the Item columns and Group width % for however many ranks you have./* Use full screen */.Skin .SkinInner {width: 100% !important;max-width: 100% !important;}/* fix Group headers */.Skin .PGR .DragAndDrop .Group h2 {width: 100% !important;font-size: 12px;}/* Shrink Group containers */.Skin .PGR .DragAndDrop .Group>div>ul, .Skin .PGR .DragAndDrop .Items>ul { min-height: 50px !important;}/* Shrink Group container */.Skin .PGR .DragAndDrop td.groupsContainerTd div>div { min-height: 50px !important;}/* Remove item padding, item sizing */.Skin .PGR .DragAndDrop .QuestionBody .Group>div>ul>li, .Skin .RO .DND>ul>li {padding: 0px !important;width: 100px !important;}/* Label sizing*/.Skin .PGR .DragAndDrop .QuestionBody label {width: 100px !important;}/* Item sizing */.Skin .PGR .DragAndDrop .Items>ul>li {width: 100px !important;}/* Hide rank */.rank {display: none !important;}/* Set Group Width and Item Columns */@media (min-width:481px) {.Skin .PGR .DragAndDrop .Group { width: 10%;}.Skin .PGR .DragAndDrop .Items ul {width: 100% !important; columns: 10; -webkit-columns: 10; -moz-columns: 10;}}@media (max-width:480px) {.Skin .PGR .DragAndDrop .Group { width: 50% !important;}.Skin .PGR .DragAndDrop .Items ul {width: 100% !important; columns: 2; -webkit-columns: 2; -moz-columns:2;}}

Rank order drag and drop horizontally aligned

Rank order drag and drop horizontally aligned | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded