Rank order drag and drop horizontally aligned

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

Page 1 / 1

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 horizontally and 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 move the Group container 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;
}

}

Also, while the above PGR idea works well I think, a simpler approach and closer to your original question would be to use the Rank Order drag and drop and add the below CSS to the Style section of the Look & Feel:

.Skin .RO .DND>ul>li {
border: 1px solid;
}

@media (min-width:481px) {

.Skin .RO .DND>ul {
  columns: 10;
  -webkit-columns: 10;
  -moz-columns: 10;
}

}

@media (max-width:480px) {

.Skin .RO .DND>ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

}

}

Dear @Tom_1842 , first of all, thank you so much! You really helped me out here! Both your approaches are beautiful. I have one small question about your first approach. As you can see in the screenshot I included all the images are really squeezed together (they are normally all square sized). Do you know how I can display them with a little space in between?

Thank you again for your amazing help and I hope you have a wonderful Friday!

Hmm the items should be displaying with a little space in between, did you copy all of the CSS? What browser are you using? Below is how it looks in Chrome for me:

Maybe you could post a QSF here of your survey and I can take a look at any settings that may be affecting the display.

Hi Tom! I checked and in Chrome I am running into the same problem. I added the QSF in this post (I had to compress it to a .zip file otherwise my MacBook would not let me export it).

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

}

@Tom_1842 Thank you so much for helping me out! Your final suggestion worked perfectly! Have a great weekend! :)

Hi!

For my research, I would like to use the Matrix table - drag & drop. Mainly because Qualtrics does support scoring in this question type but not in 'select, group and rank'. However, as described above, I would like to have the items horizontally above the 'answer boxes'. In addition, the largest questions consist of 8 boxes and 18 items. Unfortunately, the combination of the following javascript code & CSS codes do not work for this. I have already tried replacing the PGR in the CSS code with jQuery, but this does not give the desired result either.

Javascript:

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*/

});

CSS:

/* 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: 5px !important;
width: 150px !important;
}

/* Label sizing*/
.Skin .PGR .DragAndDrop .QuestionBody label {
width: 100px !important;
}

/* Item sizing */
.Skin .PGR .DragAndDrop .Items>ul>li {
width: 92px !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: 23%;
}

.Skin .PGR .DragAndDrop .Items ul {
width: 100% !important;
columns: 7;
-webkit-columns: 7;
-moz-columns: 7;
}

}

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

}

Can anyone help to get both codes working so that all 18 items are visible horizontally above the 8 boxes? Maybe @Tom_1842?

So that it ends up looking something like this (this does not require the items to contain the images as shown).

Thank you very much in advance!

Leave a Reply

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded