Have an idea?

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

Price Ladder from Question Library

I'm using this question from the Question Library and my client has had concerns about it not being clear enough of going from one price to the next.  At this point, I have added instruction and hidden the Next Button until they have seen all the prices.  They still aren't happy with it being clear that a new price has shown up.  What I'd like to be able to do is have the color of the actual price text change each time a new price is shown.  I've done similar things in a Looping question by using a list with a bunch of different color codes and then using this logic:
<font color="[% ListLabel (ColorList,LoopIteration()) %]">[% LoopLabel() %]</font>

Zach, is there a way we can do something similar here?
asked Aug 12, 2020 by Jay Rutherford Gold (43,155 points)

1 Answer

0 votes
The simplest way to achieve this customization would involve adding the styling with span tags to the price array:

var prices = ['<span style="color: green;">$1</span>', '<span style="color: red;">$2</span>', '<span style="color: purple;">$3</span>'];

Then do a search for "priceLadderingPrice" in the script.  There should be two matches.  On both of those lines in the code, replace "text" with "html."

$('#[% QuestionName() %]_div .priceLadderingPrice').html(prices[priceLadderingPosition - 1]);

answered Aug 12, 2020 by Zachary Platinum Sawtooth Software, Inc. (177,175 points)
Works exactly as I needed Zach!  Thanks, as always sir.  Hopefully this will satisfy a clear transition.  

It might be worth considering updating the Price Ladder question in the Question Library to include this option, as well as hiding the Next button until the exercise is completed.  That is what I have done at this point, as well as making the delay on the background color change a little longer as well.