Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Insert blank line in array question

More
11 years 11 months ago #113701 by stevelegare
Hi all,
How can I insert blank lines in array question to group questions (see attachment)?
Thanks
The topic has been locked.
More
11 years 11 months ago - 11 years 11 months ago #113705 by tpartner
Assuming you want the alternating row colours to restart after every blank row, add something like this to the question source:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ // Identify this question var thisQuestion = $('#question{QID}'); // The row numbers that you want preceded by a blank row var rowNumbers = [1, 7, 10, 13]; // Create a clean clone of a row var rowClone = $('tr.subquestions-list:eq(0)', thisQuestion).clone(); $(rowClone).attr('id', '').removeClass('array1 array2 ').addClass('inserted-row'); $('td, th', rowClone).attr('class', '').html(''); // Insert the blank rows var rowNumbers = rowNumbers.reverse(); $(rowNumbers).each(function(i, val) { $('tr.subquestions-list:eq('+(val-1)+')', thisQuestion).before($(rowClone).clone()); }); // Fix up the row classes var rowClass = 1; $('tr.subquestions-list', thisQuestion).each(function(i) { if($(this).hasClass('inserted-row')) { rowClass = 1 } else { rowClass++; $(this).removeClass('array1 array2 ') if(rowClass % 2 == 0) { $(this).addClass('array2'); } else { $(this).addClass('array1'); } } }); }); </script>

And add something like this to the end of template.css:
Code:
.inserted-row th, .inserted-row td { background: #999; padding: 8px !important; }


.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 11 years 11 months ago by tpartner.
The topic has been locked.
More
11 years 11 months ago #113710 by stevelegare
Great.
Thanks for your example.

Do you know how can I manage to put a label in the first column of each blank row?
The topic has been locked.
More
11 years 11 months ago - 11 years 11 months ago #113728 by tpartner
To add labels the JS would look like this:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ // Identify this question var thisQuestion = $('#question{QID}'); // The row numbers that you want preceded by a blank row var rowNumbers = [1, 7, 10, 13]; // The row labels var rowLabels = ['Label 1', 'label 2', 'Label 3', 'Label 4']; // Create a clean clone of a row var rowClone = $('tr.subquestions-list:eq(0)', thisQuestion).clone(); $(rowClone).attr('id', '').removeClass('array1 array2 ').addClass('inserted-row'); $('td, th', rowClone).attr('class', '').html(''); // Insert the blank rows var rowNumbers = rowNumbers.reverse(); $(rowNumbers).each(function(i, val) { $('tr.subquestions-list:eq('+(val-1)+')', thisQuestion).before($(rowClone).clone()); }); // Insert the row labels $(rowLabels).each(function(i, val) { $('tr.inserted-row th:eq('+i+')', thisQuestion).text(val); }); // Fix up the row classes var rowClass = 1; $('tr.subquestions-list', thisQuestion).each(function(i) { if($(this).hasClass('inserted-row')) { rowClass = 1 } else { rowClass++; $(this).removeClass('array1 array2 ') if(rowClass % 2 == 0) { $(this).addClass('array2'); } else { $(this).addClass('array1'); } } }); }); </script>

And the CSS might look like this:
Code:
.inserted-row th, .inserted-row td { background: #999; padding: 8px !important; } .inserted-row th { color: #FFF; font-weight: bold; }


.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 11 years 11 months ago by tpartner.
The following user(s) said Thank You: stevelegare
The topic has been locked.
More
11 years 11 months ago #113735 by stevelegare
Thanks Tpartner,
This will help me a lot.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose