This script will handle randomization, but you will need to define all header rows (including the first) with the corresponding sub-question code.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var qID = {QID};
var thisQuestion = $('#question'+qID);
// Insert new header rows
$('table.subquestion-list thead tr:eq(0)', thisQuestion).addClass('header-row');
var headerRow = $('.header-row:eq(0)', thisQuestion).clone();
$('tr.answers-list', thisQuestion).before($(headerRow).clone());
// Define the column labels for the inserted header rows
var headerLabels = {
'SQ001': ['Bad', '2', '3', '4', 'Good'],
'SQ002': ['Strongly Disagree', 'Disagree', 'Neutral', 'Agree', 'Strongly Agree'],
'SQ003': ['Dislike', '2', '3', '4', 'Like'],
'SQ004': ['Slow', '2', '3', '4', 'Fast']
}
// Insert the labels
$.each(headerLabels, function(i, values) {
var thisAnswerRow = $('tr.answers-list[id$="X'+qID+i+'"]');
var thisHeaderRow = $(thisAnswerRow).prevAll('.header-row:eq(0)');
$.each(values, function(i, val) {
$('th:eq('+(i+1)+')', thisHeaderRow).text(val);
$('.answer-item:eq('+i+') div.label-text', thisAnswerRow).text(val);
});
});
// Fix up the styles
$('tr.answers-list', thisQuestion).removeClass('array2').addClass('array1');
var newStyles = 'table.subquestion-list thead {\
display: none;\
}\
table.subquestion-list tbody tr.header-row th {\
padding-top: 2em;\
}\
@media only screen and (max-width: 801px) {\
.header-row {\
display: none !important;\
}\
}';
$('head').append('<style type="text/css">'+newStyles+'</style>');
});
</script>
