Is that code able to check if two sliders on a Multiple numerical input question are untouched?
To achieve something like this for sliders with default values set, I would...
1) Add a multiple-short-text question in the same group, directly after the slider question. This question has the same sub-questions as the sliders (to record when a slider is manipulated) plus one extra sub-question (to record whether the page has been visited). We'll hide this question with JavaSccript.
2) Add the following script to the source of the slider question. If you want to apply this to several slider questions, you can move the handleSliders() function to template.js. I think the comments in the function adequately describe what's happening.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the handleSliders() function to this question
handleSliders($('#question{QID}'));
});
function handleSliders(thisQuestion) {
// Identify and hide the hidden question
var qHidden = $(thisQuestion).nextAll('.multiple-short-txt:eq(0)');
$(qHidden).hide();
// Initial classes on the slider sub-question items (rows)
$('li.question-item', thisQuestion).addClass('slider-unmoved');
$('input.text', qHidden).each(function(i) {
if($(this).val() == 1) {
$('li.question-item:eq('+i+')', thisQuestion).removeClass('slider-unmoved').addClass('slider-moved');
}
});
// Listener on the sliders
$('.ui-slider', thisQuestion).on('slidechange', function(event, ui) {
var thisRow = $(this).closest('li.question-item');
var thisRowIndex = $('li.question-item', $(this).closest('ul.questions-list')).index(thisRow);
// Set the value in the hidden question
if($('input.text', thisRow).val() != '') {
thisRow.removeClass('slider-unmoved').addClass('slider-moved');
$('input.text:eq('+thisRowIndex+')', qHidden).val(1);
}
});
// Interrupt the Next/Submit click
$('#movenextbtn, #movesubmitbtn').bind('click', function () {
// Pop up confirm if we found an unmoved slider
// Pop up only occurs once and only if the page has not been previously visited
var cont = true;
if($('.slider-unmoved', thisQuestion).length > 0 && $('input.text:last', qHidden).val() != 1) {
$('.slider-unmoved', thisQuestion).addClass('highlight');
cont = confirm('You have an unanswered item(s).\nDo you want to continue?');
}
$('input.text:last', qHidden).val(1);
return cont;
});
}
</script>
3) Then you have 3 new classes on the slider question sub-question items (<li> elements):
- li.slider-unmoved
- li.slider-unmoved.highlight
- li.slider-moved
So, you could do something like this in template.css:
Code:
li.slider-unmoved.highlight .slider-label {
background: pink;
}
Sample survey attached.
