Regarding the exclusive aspect, you could...
The JavaScript would look like this:
And, for the validation, assuming...
![capture-6_2017-08-04.png]()
Sample survey attached:
- Insert a fourth "N/A" column (x-scale sub-question)
- Use JavaScript to do the following:
- Hide the column 4 text inputs
- Insert check-boxes into column 4 cells
- If a column 4 box is checked, insert a value of 1 in its hidden input and clear all column 1-3 inputs
- If a column 1-3 text input is populated, un-check column 4 and clear the column 4 hidden input
- Add a question validation equation so that, in every row, either columns 1-3 are populated OR the hidden input in column 4 is populated
The JavaScript would look like this:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Identify this question
var qID = {QID};
var thisQuestion = $('#question'+qID);
// Add some classes
$(thisQuestion).addClass('with-exclusive-items');
$('td.answer-item', thisQuestion).addClass('non-exclusive-item');
// Loop through the last-column cells
$('td.answer-item:last-child', thisQuestion).each(function(i) {
varThisID = $('input[type="text"]', this).attr('id');
// Add a class
$(this).removeClass('non-exclusive-item').addClass('exclusive-item');
// Hide the text input
$('td.answer-item:last-child input[type="text"]', thisQuestion).hide();
// Insert checkboxes
$(this).append('<div class="checkbox">\
<input class="checkbox" name="" id="'+varThisID+'_cbox" value="N/A" type="checkbox">\
<label for="'+varThisID+'_cbox" class="answertext inserted-label"></label>\
</div>');
});
// Listener on the checkboxes
$('.exclusive-item input[type="checkbox"]', thisQuestion).on('change', function(e) {
var thisRow = $(this).closest('tr.subquestion-list');
var thisCell = $(this).closest('td.answer-item');
if($(this).is(':checked')) {
$('input[type="text"]', thisCell).val('1');
$('.non-exclusive-item input[type="text"]', thisRow).val('');
}
else {
$('input[type="text"]', thisCell).val('');
}
// Fire Expression Manager
$('input[type="text"]', thisRow).each(function(i) {
$(this).trigger('keyup');
});
});
// Listener on the text inputs
$('.non-exclusive-item input[type="text"]', thisQuestion).on('keyup change', function(e) {
var thisRow = $(this).closest('tr.subquestion-list');
if($.trim($(this).val()) != '') {
$('.exclusive-item input[type="checkbox"]', thisRow).prop('checked',false);
$('.exclusive-item input[type="text"]', thisRow).val('');
}
// Fire Expression Manager
$('.exclusive-item input[type="text"]', thisRow).trigger('keyup');
});
// Insert some styles (these could be in template.css)
// For the LS 2.67 default template
var newStyles = '.with-exclusive-items thead th.answertext {\
text-align: center;\
}\
.with-exclusive-items .exclusive-item {\
text-align: center;\
vertical-align: middle;\
cursor: pointer;\
}\
.with-exclusive-items .checkbox {\
padding-left: 0;\
}\
.with-exclusive-items .inserted-label {\
width: 24px;\
min-height: 24px;\
padding: 0;\
}\
.with-exclusive-items .inserted-label::before {\
margin: 4px 0 0 4px;\
}\
.with-exclusive-items .inserted-label::after {\
margin: 4px 0 0 4px;\
}';
$('head').append('<style type="text/css">'+newStyles+'</style>');
});
</script>And, for the validation, assuming...
- Question code: Q1
- Y-scale sub-question codes: Y1, Y2, Y3
- X-scale sub-question codes: X1, X2, X3, X4
Sample survey attached: