Similar to Stacked Maxdiff

Question

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?

Answer 1

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>

Comments

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