Have an idea?

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

Formatting for Constant Sum question

I have a question that will have 8 items to be assigned 100 points to.  I know I can set up a regular constant sum or use a grid as a constant sum.  My current issue is my client is looking to have it displayed similar to how a CBC chip allocation question looks.  Randomizing the 8 items into 3 different rows where a text description is above the input box rather than to the right or left of the input box.

Unless there is a way with javascript to alter an existing constant sum setup I could only think to do this from scratch with a free-format question and create a total box and some script to make sure they add to 100.

Any ideas how to best accomplish this look?
asked Nov 18 by Jay Rutherford Platinum (52,065 points)
I was able to take a standard constant sum question and modify it a bit to get something close to what my client wanted.  The only thing I couldn't figure out was making it so my item text would be above the entry box instead of to the right of it.
What modifications have you made so far?
Nothing major.  I formatted each answer choice as a table so I could apply a background color and apply a border to give each response a 'box' look  and added some css to append text ('tokens') after each numeric entry  (which actually puts it right below the entry box).  I'm also using a customized legacy style which gives it a good look with even spacing when I set this up with multiple columns.  It doesn't look bad as it is now and the biggest difference from their original request is that the numeric entry is to the left of the text box rather than below it.

1 Answer

0 votes
Best answer
Try adding this to a fresh constant sum question:

#[% QuestionName() %]_div .inner_table tbody tbody {
    display: flex;
    flex-wrap: wrap;

#[% QuestionName() %]_div .inner_table tbody tbody > tr {
    display: flex;
    flex-direction: column-reverse;
    width: 30%;
    border: 1px solid black;
    margin: 4px;

#[% QuestionName() %]_div .option_cell {
    text-align: center;

That "30%" is what is controlling how many items display in each row, therefore controlling the number of rows.  You can adjust it to your liking.
answered Nov 18 by Zachary Platinum Sawtooth Software, Inc. (212,950 points)
selected Nov 18 by Jay Rutherford
Hey I like that!  Thanks Zach.  I'll see what they think of this layout, it's definitely more in line with what they originally presented.