Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Array question - adding subheaders and labels

More
8 years 9 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
The topic has been locked.
Partner Banner
More
8 years 9 months ago #161743 by Joffm
Replied by Joffm on topic Array question - adding subheaders and labels
Hi, with this script
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
The topic has been locked.
More
8 years 9 months ago #161744 by Gensz78
Replied by Gensz78 on topic Array question - adding subheaders and labels
This is great, thank you!

Is it possible to have the 1 to 9 labels (what is right now on the first line in the image below) repeat on all subheader rows?

The topic has been locked.
More
8 years 9 months ago - 8 years 9 months ago #161753 by tpartner
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: 8 years 9 months ago by tpartner.
The topic has been locked.
More
8 years 9 months ago #161754 by Joffm
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
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
More
8 years 9 months ago - 8 years 9 months ago #161759 by Joffm
Replied by Joffm on topic Array question - adding subheaders and labels
Well, Tony was faster and as usual provides the JS solution.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 8 years 9 months ago by Joffm.
The topic has been locked.
More
8 years 9 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
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source