I applied a lot of questions but I don't know which question IDs should I take and where can I insert the ID in the below-mentioned source code???
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
/***********
Display multiple questions side by side
***********/
//////// Define question attributes for later use ////////
// Give questions row specific attributes so we can easily manipulate them by row
$('#question190, #question191, #question192, #question193, #question194').attr('name', 'qRow1');
$('#question195, #question196, #question197, #question198, #question199').attr('name', 'qRow2');
$('#question200, #question201, #question202, #question203, #question204').attr('name', 'qRow3');
$('#question205, #question206, #question207, #question208, #question209').attr('name', 'qRow4');
// Give questions column specific attributes so we can easily manipulate them by column
// I know, not the correct use of "rel" attribute but...too bad!
$('#question190, #question195, #question200, #question205').attr('rel', 'qCol1');
$('#question191, #question196, #question201, #question206').attr('rel', 'qCol2');
$('#question192, #question197, #question202, #question207').attr('rel', 'qCol3');
$('#question193, #question198, #question203, #question208').attr('rel', 'qCol4');
$('#question194, #question199, #question204, #question209').attr('rel', 'qCol5');
//////// Survey layout manipulation ////////
// Fix the width of the survey
$( 'table.outerframe' ).css({
'width': '900px'
});
// Wrap each row in a div
// This is kinda verbose but IE won't let me use jQuery shortcuts
var el = document.createElement('div');
el.setAttribute('id','inlineWrapper1');
document.body.appendChild(el);
$('div[name="qRow1"]').wrapAll($('#inlineWrapper1'));
el.setAttribute('id','inlineWrapper2');
document.body.appendChild(el);
$('div[name="qRow2"]').wrapAll($('#inlineWrapper2'));
el.setAttribute('id','inlineWrapper3');
document.body.appendChild(el);
$('div[name="qRow3"]').wrapAll($('#inlineWrapper3'));
el.setAttribute('id','inlineWrapper4');
document.body.appendChild(el );
$('div[name="qRow4"]').wrapAll($('#inlineWrapper4'));
// Style the wrapper divs
$('#inlineWrapper1, #inlineWrapper2, #inlineWrapper3, #inlineWrapper4' ).css({
'width': '850px',
'margin': '0 auto 0 auto',
'clear': 'both'
});
// Get all the questions to sit politely side by side
$( 'div[name="qRow1"], div[name="qRow2"], div[name="qRow3"], div[name="qRow4"]' ).css({
'float': 'left'
});
//////// Column manipulation ////////
// Set the column widths - can be set individually if necessary
// Must add up to less than 100%
$('div[rel="qCol1"]' ).css({
'width': '12%'
});
$('div[rel="qCol2"], div[rel="qCol3"], div[rel="qCol4"], div[rel="qCol5"]' ).css({
'width': '22%'
});
//////// Question manipulation ////////
// Hide the answer element in boilerplate questions
$('div.boilerplate td.answer' ).parent().hide();
// Hide the question text elements in non-boilerplate questions
$('div.text-short td.questiontext, div.list-dropdown td.questiontext, div.yes-no td.questiontext, div.numeric td.questiontext').parent().hide();
// Push the question tables to 100%
$( 'div[name="qRow1"] table, div[name="qRow2"] table, div[name="qRow3"] table, div[name="qRow4"] table' ).css({
'width': '100%'
});
// Get everything to line up nicely vertically
$( 'td.questiontext, td.answer p' ).css({
'text-align': 'center'
});
// Adjust cell heights so everything lines up nicely horizontally
$( 'td.answer, td.questiontext' ).css({
'height':'35px'
});
// Yes-no question styles
$( 'div.yes-no ul' ).css({
'text-align': 'center',
'font-size': '90%',
'margin': '0',
'padding-bottom': '5px'
});
$( 'div.yes-no td.answer' ).css({
'padding-bottom': '0'
});
// Short-text question styles
$( 'div.text-short input' ).css({
'width': '125px',
'margin-left': '0'
});
// Numeric question styles
$( 'div.numeric input' ).css({
'width': '125px',
'margin-left': '0'
});
$( 'div.numeric p.tip' ).css({
'display': 'none'
});
// Get rid of the margins around select boxes
$( 'p.question' ).css({'margin':'0'});
// Reduce the space caused by the question help table
$( 'div[name="qRow1"], div[name="qRow2"], div[name="qRow3"]' ).css({
'margin-bottom': '-8px'
});
});
</script>
Topic Author
