Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Similar to Stacked Maxdiff

Hi,
I would like have a maxdiff question in which 'Best' is on top, Items are at the center and 'Worst' radio buttons are at the bottom.
---------------
Best
Items        Item #9        Item #4        Item #6
Worst
---------------

I checked in the sawtooth but it has only the following option

*************
Items        Item #9        Item #4        Item #6
Best
Worst
*************

Is there any way something like jQuery to move the 'Best' and its radio buttons just above the items?
asked Dec 13, 2021 by Abdul Bronze (3,220 points)
edited Dec 13, 2021 by Abdul

1 Answer

0 votes
 
Best answer
Set your format to "Items - Best - Worst (Stacked)," then add this script to the MaxDiff:

<script>
$(document).ready(function(){
    var tbody = $('#[% QuestionName() %]_div .inner_table > tbody');
    $(tbody).prepend($(tbody).children(':nth-child(2)'))
})
</script>
answered Dec 13, 2021 by Zachary Platinum Sawtooth Software, Inc. (202,625 points)
selected Dec 13, 2021 by Abdul
Thank you so much Zachary.
You can vertically align the images with this CSS rule:

#[% QuestionName() %]_div .item_text_cell {
    vertical-align: top;
}


Your "!important" rule is bumping into another "!important" rule, so you would need to use a more specific CSS selector to take priority.  Something akin to this:

#[% QuestionName() %]_div .highlight {
    background-color: transparent !important;
}
...