Hello, I am trying to code a drag and drop question using Simple Layout, where a participant has to allocate 12 candies (items) across a certain number of baskets (groups). I have successfully moved the items in a horizontal row above the groups and centered them. However, I can’t seem to center the groups. I want them to 1) stretch across the entire width 2) Be centered, with some gap between the groups.
The JS code I have used is
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery(".rank").hide();
var qid = this.questionId;
// Create a new row below the candies
var lastrow =
'#' + qid +
' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table tr:last';
jQuery(lastrow).after(
'<tr class="basketRow"><td colspan="2"></td></tr>'
);
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/// Move the basket section below the candies
var qid = this.questionId;
var groups =
'#' + qid +
' td.groupsContainerTd';
var basketRow =
'#' + qid +
' .basketRow td';
jQuery(groups).detach().appendTo(basketRow);
});
The CSS I am using is
.Skin .PGR .DragAndDrop table {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.Skin .PGR .DragAndDrop .Items ul {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
/* Hide the "Items" title */
.Skin .PGR .DragAndDrop .Items h2 {
display: none !important;
}
.Skin .PGR .DragAndDrop {
border: 2px solid black !important;
}
.Skin .PGR .DragAndDrop table {
border: 4px solid red !important;
}
.Skin .PGR .DragAndDrop .Items {
border: 3px solid green !important;
}
.Skin .PGR .DragAndDrop td.groupsContainerTd > div {
border: 4px solid blue !important;
}
.Skin .PGR .DragAndDrop td {
border: 3px solid purple !important;
}
Have color coded the containers in case it helps to identify where the problem may lie.
