Hi,
I need to do something similar
But only at first glance.
The other solution was based on an array
As you can imagine this is quite different as an array allows only one response per row.
But here you expect three responses per row
You may use an array(text) and insert checkboxes.
Then you have to handle that each pair is exclusive.
Here's a script I adapted from a former solution of @tpartner.
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Column-specific classes
$('tr.subquestion-list', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
// Insert checkboxes
$('.answer-item.column-2, .answer-item.column-4, .answer-item.column-6', thisQuestion).addClass('custom-checkbox-item');
$('.custom-checkbox-item', thisQuestion).each(function(i) {
var thisID = $('input:text:eq(0)', this).attr('id');
$('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
if($('input:text:eq(0)', this).val() == 'Y') {
$('input:checkbox:eq(0)', this).prop('checked', true);
}
$(this).removeClass('text-item').addClass('checkbox-item');
$('input:text:eq(0)', this).remove();
});
// Identify exclusive items
$('.answer-item.column-1, .answer-item.column-2', thisQuestion).addClass('exclusive-item1');
$('.answer-item.column-3, .answer-item.column-4', thisQuestion).addClass('exclusive-item2');
$('.answer-item.column-5, .answer-item.column-6', thisQuestion).addClass('exclusive-item3');
// Listeners for exclusive items
$('.exclusive-item1 input:text', thisQuestion).on('keyup change', function(e) {
if($.trim($(this).val()) != '') {
$(this).closest('tr.subquestion-list').find('.exclusive-item1 input:checkbox').prop('checked', false);
}
});
$('.exclusive-item1 input:checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisItem = $(this).closest('.answer-item');
$(this).closest('tr.subquestion-list').find('.exclusive-item1 input:text').val('');
}
});
$('.exclusive-item2 input:text', thisQuestion).on('keyup change', function(e) {
if($.trim($(this).val()) != '') {
$(this).closest('tr.subquestion-list').find('.exclusive-item2 input:checkbox').prop('checked', false);
}
});
$('.exclusive-item2 input:checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisItem = $(this).closest('.answer-item');
$(this).closest('tr.subquestion-list').find('.exclusive-item2 input:text').val('');
}
});
$('.exclusive-item3 input:text', thisQuestion).on('keyup change', function(e) {
if($.trim($(this).val()) != '') {
$(this).closest('tr.subquestion-list').find('.exclusive-item3 input:checkbox').prop('checked', false);
}
});
$('.exclusive-item3 input:checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisItem = $(this).closest('.answer-item');
$(this).closest('tr.subquestion-list').find('.exclusive-item3 input:text').val('');
}
});
});
</script>
Additionally you may adapt the column width and the background colors
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
// Add a question class
thisQuestion.addClass('custom-array');
// Column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
});
</script>
<style type="text/css">.custom-array table.subquestion-list col {
width: auto !important;
}
.custom-array table.subquestion-list thead .column-0 { width: 25%; }
.custom-array table.subquestion-list thead .column-1 { width: 15%; }
.custom-array table.subquestion-list thead .column-2 { width: 10%; background-color:#efefef; }
.custom-array table.subquestion-list thead .column-3 { width: 15%; }
.custom-array table.subquestion-list thead .column-4 { width: 10%; background-color:#efefef; }
.custom-array table.subquestion-list thead .column-5 { width: 15%; }
.custom-array table.subquestion-list thead .column-6 { width: 10%; background-color:#efefef; }
.custom-array table.subquestion-list td.column-2,
.custom-array table.subquestion-list td.column-4,
.custom-array table.subquestion-list td.column-6 {
background-color:#efefef;
}
</style>
What is left for you?
The validation. That each row contains exactly three responses.
Joffm