Rank order drag and drop horizontally aligned

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). 

@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!

Hi! Is this a freeform drag and drop? I am having an issue with drag and drop such that it works during question preview but not the actual survey or even the block preview. Do you know anything that could be preventing this from working in these situations?