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>