A note before we go any farther: You
must not use the "Random answer order" setting for these array questions.
I wrapped everything in a function that you need to call with the start and end question numbers. So, in the case of your sample survey where you want questions 2-4 inline and then questions 6-9 inline, you would call the function twice:
Code:
sideBySide(2, 4);
sideBySide(6, 9);
The complete code for your survey:
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
sideBySide(2, 4);
sideBySide(6, 9);
function sideBySide(start, end) {
// Add some temporary classes to the target questions
$('div[id^="question"]').each(function(i){
var qNum = i + 1;
var el = $(this);
if (qNum >= start && qNum <= end) {
$(el).addClass('targetQ');
}
});
// Wrap the questions in a div
$('.targetQ').wrapAll('<div class="targetWrapper" />');
$('.targetWrapper').after('<div style="clear:both" />');
// Add some classes to the questions in the target wrapper
$('.targetWrapper .targetQ').addClass('inlineQuestion inlineQuestionSub');
$('.targetWrapper .inlineQuestionSub:first').removeClass('inlineQuestionSub').addClass('inlineQuestionPrime');
// Remove the text from the secondary questions
$('.targetWrapper .inlineQuestionSub th.answertext').text('');
// Apply some styles (these are for the default template)
$('.targetWrapper .inlineQuestion').css({ 'float': 'left' });
$('.targetWrapper .inlineQuestion col, .targetWrapper .inlineQuestion th.answertext').css({ 'width': 'auto' });
$('.targetWrapper .inlineQuestion .question-wrapper').css({ 'width': '100%' });
$('.targetWrapper .inlineQuestion td.answer').css({ 'padding': '0.5em 0' });
$('.targetWrapper .inlineQuestion td.questiontext').css({ 'text-align': 'center' });
// Center the wrapper div
var wrapperWidth = 0;
$('.targetWrapper .inlineQuestion').each(function(i){
wrapperWidth = wrapperWidth + $(this).width();
var padLeft = $('.answertext:eq(0)', this).width() + 3;
$('.questiontext', this).css({ 'padding-left':padLeft+'px', 'padding-right':'3px' });
});
$('.targetWrapper').css({ 'width':wrapperWidth+'px', 'margin': '0 auto' });
// Set the row heights
var wrapperWidth = 0;
$('.targetWrapper .inlineQuestionSub').each(function(i){
$('tbody[id^="javatbd"]', this).each(function(i){
var ansHeight = $('.targetWrapper .inlineQuestionPrime th.answertext:eq('+i+')').innerHeight();
if($.browser.mozilla) {
$('th.answertext', this).height(ansHeight-1);
}
else {
$('th.answertext', this).innerHeight(ansHeight);
}
});
});
// Remove the temporary classes
$('.targetQ').removeClass('targetQ');
$('.targetWrapper').removeClass('targetWrapper');
}
});
</script>
And the survey with the code in the source of the first array:
Topic Author
