Have an idea?

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

Verification Error of Free Format Slider Question with Text Box for Pricing Study

We have a free format question (qUSD) with four slider with a text box on the side. Minimum value of 300 and a maximum value of 1500:

Variables - text (NUMERIC)
qUSD_slider1
qUSD_slider2
qUSD_slider3
qUSD_slider4

We need to check that the prices are decreasing. But once we test, we experience errors except if (1) prices are all below 1000 (2) prices are all above 1000. I have included all the codes below:

Custom JavaScript Verification (after):
var amt1 = SSI_GetValue("qUSD_slider1");
var amt2 = SSI_GetValue("qUSD_slider2");
var amt3 = SSI_GetValue("qUSD_slider3");
var amt4 = SSI_GetValue("qUSD_slider4");

if((amt1 < amt2) || (amt2 < amt3) || (amt3 < amt4))
{
alert("Please review your answers");
var strErrorMessage = "The amount specified must be in a decreasing order. Your answer in the first question should not be less than your next answer and so on";
}
if((amt1 == 300) && (amt2 == 300) && (amt3 == 300) && (amt4 == 300))
{
  var strErrorMessage = "You must select a value.";
}


HTML:

<label style="font-size:13px;">At what price would you find this hand washing station to be <b><u>so expensive</u></b> that you would NOT even consider buying it?</label><br/></br>

<div style="width: 800px;font-size:13px;margin-left:100px;">
<table>
<tr>
<td><label style="margin-right:10px;">USD 300</label></td>
<td>
<div id="slider1" style="display: inline-block; width: 400px;"></div>
</td>
<td><label style="margin-left:10px;">USD 1,500</label></td>
<td><label for="amount1" style="margin-left:30px;color:#f6931f;">USD</label></td>
<td><input type="text" id="amount1" name="qUSD_slider1" style="border:1; width:100px; color:#f6931f;"/></td>
</tr>
</table>
</div>

<br/>

<label style="font-size:13px;">At what price would it <b><u>start getting expensive</u></b> but still be worth considering?</label><br/></br>

<div style="width:800px;font-size:13px;margin-left:100px;">
<table>
<tr>
<td><label style="margin-right:10px;">USD 300</label></td>
<td>
<div id="slider2" style="display: inline-block; width: 400px;"></div>
</td>
<td><label style="margin-left:10px;">USD 1,500</label></td>
<td><label for="amount2" style="margin-left:30px;color:#f6931f;">USD</label></td>
<td><input type="text" id="amount2" name="qUSD_slider2" style="border:1; width:100px; color:#f6931f;"/></td>
</tr>
</table>
</div>

<br/>

<label style="font-size:13px;">At what price would it be <b><u>such a good value</u></b> that you would definitely buy it?</label><br/></br>

<div style="width:800px;font-size:13px;margin-left:100px;">
<table>
<tr>
<td><label style="margin-right:10px;">USD 300</label></td>
<td>
<div id="slider3" style="display: inline-block; width: 400px;"></div>
</td>
<td><label style="margin-left:10px;">USD 1,500</label></td>
<td><label for="amount3" style="margin-left:30px;color:#f6931f;">USD</label></td>
<td><input type="text" id="amount3" name="qUSD_slider3" style="border:1; width:100px; color:#f6931f;"/></td>
</tr>
</table>
</div>

<br/>

<label style="font-size:13px;">At what price would it be <b><u>so inexpensive</u></b> that you would question its quality and NOT even consider buying it?</label><br/></br>

<div style="width:800px;font-size:13px;margin-left:100px;">
<table>
<tr>
<td><label style="margin-right:10px;">USD 300</label></td>
<td>
<div id="slider4" style="display: inline-block; width: 400px;"></div>
</td>
<td><label style="margin-left:10px;">USD 1,500</label></td>
<td><label for="amount4" style="margin-left:30px;color:#f6931f;">USD</label></td>
<td><input type="text" id="amount4" name="qUSD_slider4" style="border:1; width:100px; color:#f6931f;"/></td>
</tr>
</table>
</div>

Advanced Settings:

HTML <head> TAG

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
jQuery.noConflict();
jQuery(document).ready(function($){
    $( "#slider1" ).slider({
      value:300,
      min: 300,
      max: 1500,
      step: 10,
      slide: function( event, ui ) {
        $( "#amount1" ).val(ui.value );
      }
    });
    $( "#amount1" ).val($( "#slider1" ).slider( "value" ) );
  });
  </script>

<script>
jQuery.noConflict();
jQuery(document).ready(function($){
    $( "#slider2" ).slider({
      value:300,
      min: 300,
      max: 1500,
      step: 10,
      slide: function( event, ui ) {
        $( "#amount2" ).val(ui.value );
      }
    });
    $( "#amount2" ).val($( "#slider2" ).slider( "value" ) );
  });
  </script>

<script>
jQuery.noConflict();
jQuery(document).ready(function($){
    $( "#slider3" ).slider({
      value:300,
      min: 300,
      max: 1500,
      step: 10,
      slide: function( event, ui ) {
        $( "#amount3" ).val(ui.value );
      }
    });
    $( "#amount3" ).val( $( "#slider3" ).slider( "value" ) );
  });
  </script>

<script>
jQuery.noConflict();
jQuery(document).ready(function($){
    $( "#slider4" ).slider({
      value:300,
      min: 300,
      max: 1500,
      step: 10,
      slide: function( event, ui ) {
        $( "#amount4" ).val(ui.value );
      }
    });
    $( "#amount4" ).val( $( "#slider4" ).slider( "value" ) );
  });
  </script>

<script>
var qnum = (10/23)*100;

jQuery.noConflict();
jQuery(document).ready(function($){
    $( "#progressbar" ).progressbar({
      value: qnum
    });
  });
  </script>

<script>
jQuery.noConflict();
jQuery(document).ready(function($){
    $("#pbar").insertAfter('.submit_div');
})
</script>

<style>
  #progressbar .ui-progressbar-value {
    background-color: #ccc;
  }


#progressbar
{
height:10px;
}
</style>
asked Mar 19 by anonymous

1 Answer

0 votes
When SSI_GetValue is called on an <input> element, it uses the element's type to determine whether it should return the value as a number or as a string.  With "type=text", the function is returning strings, producing the peculiar behavior you are observing; "1000" is less than "200" from a text perspective.

To resolve this, you can either change your HTML to use "type=tel":

<input type="tel" id="amount1" name="qUSD_slider1"/>


or wrap your SSI_GetValue calls with a function like Number:

Number(SSI_GetValue("qUSD_slider1"))
answered Mar 19 by Zachary Platinum Sawtooth Software, Inc. (144,125 points)
Thanks a lot! It's perfect!
...