- Posts: 29
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
<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>
//////// 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');
//////// Define question attributes for later use //////// // Give questions row specific attributes so we can easily manipulate them by row $('#question35, #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! $('#question35, #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');
<?xml version="1.0" encoding="UTF-8"?> <document> <LimeSurveyDocType>Question</LimeSurveyDocType> <DBVersion>143</DBVersion> <languages> <language>de</language> </languages> <questions> <fields> <fieldname>qid</fieldname> <fieldname>parent_qid</fieldname> <fieldname>sid</fieldname> <fieldname>gid</fieldname> <fieldname>type</fieldname> <fieldname>title</fieldname> <fieldname>question</fieldname> <fieldname>preg</fieldname> <fieldname>help</fieldname> <fieldname>other</fieldname> <fieldname>mandatory</fieldname> <fieldname>question_order</fieldname> <fieldname>language</fieldname> <fieldname>scale_id</fieldname> <fieldname>same_default</fieldname> </fields> <rows> <row> <qid><![CDATA[5]]></qid> <parent_qid><![CDATA[0]]></parent_qid> <sid><![CDATA[58242]]></sid> <gid><![CDATA[1]]></gid> <type><![CDATA[X]]></type> <title><![CDATA[A2]]></title> <question><![CDATA[<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>]]></question> ...