Rather than hide radios of sub-questions, I would use JavaScript to insert new rows with the sub-titles.
The following example workaround will insert new rows at positions 1, 3 and 6 as in the image below.
1)
Set up your survey to use JavaScript
.
2) Add the following script to the source of the array. Replace "QQ" with the array
question ID
and adjust the row numbers and subtitles as necessary.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Call the function to insert sub-titles
// Parameters (Question ID, Row number, Sub-title)
insertSubTitle(QQ, 1, 'Group 1');
insertSubTitle(QQ, 3, 'Group 2');
insertSubTitle(QQ, 6, 'Group 3');
// A function to insert sub-title rows in an array
function insertSubTitle(qID, row, subtitle) {
// Add some row-specific classes
$('#question'+qID+' table.question tbody[id^="javatbd"]').each(function(i, el){
$(el).addClass('ansRow-'+(i+1));
});
// Find number of columns
var cols = $('#question'+qID+' table.question tbody[id^="javatbd"]:first tr:first > *').length;
// Define the row to be inserted
var insertedRow = '<tbody> \
<tr class="insertedRow"> \
<td colspan="'+cols+'">'+subtitle+'</td> \
</tr> \
</tbody>';
// And insert the row
$(insertedRow).insertBefore('#question'+qID+' .ansRow-'+row+'');
// Fix up the row background colours
var rowIndex = 0;
$('#question'+qID+' table.question tr').each(function(i, el){
rowIndex ++;
if($(el).hasClass('insertedRow')) {
rowIndex = 0;
}
$(el).removeClass('array1, array2');
if(rowIndex % 2 == 0) {
$(el).addClass('array1');
}
else {
$(el).addClass('array2');
}
});
}
});
</script>
3) Add the following rules to the end of your template.css file:
Code:
.insertedRow {
background-color: #66CCCC;
font-weight: bold;
}
.insertedRow td {
text-align: left !important;
}
