- Posts: 22
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Array question - adding subheaders and labels
- Gensz78
- Topic Author
- Offline
- Junior Member
Less
More
6 years 4 months ago #161707
by Gensz78
Array question - adding subheaders and labels was created by Gensz78
Hi!
I'd like to add subheaders with labels to an array question. I've already been able to add subheaders with some js (see attached survey), but I'd like the labels (1 to 9) on the first line to repeat at each subheader.
Also, if possible, I'd like to change the style of category headers: make the font bigger and change the color to dark blue. (In the actual survey, the subquestions are quite long so the subheaders don't pop out)
Please note that I use LimeSurvey Version 2.65.1+170522, and that I don't have access to the template.
Could anyone help me with this?
Thanks!
Gen
I'd like to add subheaders with labels to an array question. I've already been able to add subheaders with some js (see attached survey), but I'd like the labels (1 to 9) on the first line to repeat at each subheader.
Also, if possible, I'd like to change the style of category headers: make the font bigger and change the color to dark blue. (In the actual survey, the subquestions are quite long so the subheaders don't pop out)
Please note that I use LimeSurvey Version 2.65.1+170522, and that I don't have access to the template.
Could anyone help me with this?
Thanks!
Gen
Attachments:
The topic has been locked.
- Joffm
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12889
- Thank you received: 3965
6 years 4 months ago #161743
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Array question - adding subheaders and labels
Hi, with this script
and this css
you get this
Maybe you can use it.
Of course you have to adapt the lines
$('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
Best regards
Joffm
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Identify this question var thisQuestion = $('#question{QID}'); // Define the sub-heading text strings var subHeading1 = 'Subheading 1'; var subHeading2 = 'Subheading 2'; var columnsLength = $('tr.answers-list:eq(0) > *', thisQuestion).length; // Insert the new rows $('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>'); $('tr.answers-list:eq(2)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>'); // Fix up the row classes var rowClass = 1; $('table.subquestions-list tbody tr', thisQuestion).each(function(i) { if($(this).hasClass('sub-header-row')) { rowClass = 1 } else { rowClass++; $(this).removeClass('array1 array2') if(rowClass % 2 == 0) { $(this).addClass('array2'); } else { $(this).addClass('array1'); } } }); }); </script>
and this css
Code:
<style type="text/css">.sub-header-row { margin-bottom: 20px; } .sub-header-row th { background-color: #547599; color: #FFFFFF !important; text-align: center; } </style>
you get this
Maybe you can use it.
Of course you have to adapt the lines
$('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
Best regards
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
The topic has been locked.
- Gensz78
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 22
- Thank you received: 0
6 years 4 months ago #161744
by Gensz78
Replied by Gensz78 on topic Array question - adding subheaders and labels
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
6 years 4 months ago - 6 years 4 months ago #161753
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Array question - adding subheaders and labels
This modification of the script will insert the column labels after every new sub-header row:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Identify this question var thisQuestion = $('#question{QID}'); // Define the sub-heading text strings var subHeading1 = 'Subheading 1'; var subHeading2 = 'Subheading 2'; var columnsLength = $('tr.answers-list:eq(0) > *', thisQuestion).length; // Insert the new rows $('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>'); $('tr.answers-list:eq(2)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>'); // Fix up the row classes var rowClass = 1; $('table.subquestion-list tbody tr', thisQuestion).each(function(i) { if($(this).hasClass('sub-header-row')) { rowClass = 1 } else { rowClass++; $(this).removeClass('array1 array2') if(rowClass % 2 == 0) { $(this).addClass('array2'); } else { $(this).addClass('array1'); } } }); // Insert the column labels $('.sub-header-row', thisQuestion).after($('table.subquestion-list thead tr:eq(0)', thisQuestion).clone()); }); </script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 6 years 4 months ago by tpartner.
The topic has been locked.
- Joffm
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12889
- Thank you received: 3965
6 years 4 months ago #161754
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Array question - adding subheaders and labels
Well, to be honest,
why don't you just have one question per each "subheader" and show them in a group. That's easy out of the box.
Joffm
why don't you just have one question per each "subheader" and show them in a group. That's easy out of the box.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
The topic has been locked.
- Joffm
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12889
- Thank you received: 3965
6 years 4 months ago - 6 years 4 months ago #161759
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Array question - adding subheaders and labels
Well, Tony was faster and as usual provides the JS solution.
Joffm
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 6 years 4 months ago by Joffm.
The topic has been locked.
- Gensz78
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 22
- Thank you received: 0
6 years 3 months ago #161910
by Gensz78
Replied by Gensz78 on topic Array question - adding subheaders and labels
Both of these solutions work great! Thank you so much!
Gen
Gen
The topic has been locked.