In an array-numbers-checkboxes question with "Random order" set to "Yes", this script will fix the position of the y-scale sub-question defined by the
fixedSqCode variable in the last position and will render the last row as exclusive.
The attached survey also has the question validation outlined above.
Code:
<script type="text/javascript" data-author="Tony Partner">
$(document).ready(function() {
var qID = '{QID}';
var thisQuestion = $('#question'+qID);
// Fix the bottom row position
var fixedSqCode = 'Y14';
var fixedRow = $('tr[id^="javatbd"][id$="X'+qID+fixedSqCode+'"]', thisQuestion);
$('table.subquestion-list tbody:last', thisQuestion).append(fixedRow);
// Fix up the row classes
var rowClass = 1;
$('tr[id^="javatbd"]', thisQuestion).removeClass('ls-even ls-odd').each(function(i) {
if(i%2 == 0) {
$(this).addClass('ls-even');
}
else {
$(this).addClass('ls-odd');
}
});
// Add column-specific classes
$('tr.subquestion-list', thisQuestion).each(function(i) {
$('> *', this).each(function(i) {
$(this).addClass('column-'+i).attr('data-column', i);
});
});
// Add some classes to the checkbox cells
$('td.checkbox-item', thisQuestion).addClass('normal-opt');
$('tr[id^="javatbd"]:last td.checkbox-item', thisQuestion).removeClass('normal-opt').addClass('exclusive-opt');
// A listener on the checkboxes
$('td.checkbox-item input[type="checkbox"]', thisQuestion).change(function (event) {
handleExclusive($(this).closest('td'));
});
function handleExclusive(thisCell) {
var thisColumn = $(thisCell).attr('data-column');
var thisCheckBox = $('input[type="checkbox"]', thisCell);
// Uncheck the appropriate boxes in a column
$('.checkbox-item[data-column="'+thisColumn+'"] input[type="checkbox"]').prop('disabled', false);
if ($(thisCell).hasClass('normal-opt') && $(thisCheckBox).is(':checked')) {
$('.exclusive-opt[data-column="'+thisColumn+'"] input:hidden').val('');
$('.exclusive-opt[data-column="'+thisColumn+'"] input[type="checkbox"]').prop('checked', false).trigger('change');
}
else if ($(thisCheckBox).is(':checked')) {
$('.normal-opt[data-column="'+thisColumn+'"] input:hidden').val('');
$('.normal-opt[data-column="'+thisColumn+'"] input[type="checkbox"]').prop('checked', false).trigger('change').prop('disabled', true);
}
}
});
</script>
Sample survey attached:
