Array question - adding subheaders and labels

More
6 months 1 week ago #161707 by Gensz78
Gensz78 created the topic: Array question - adding subheaders and labels
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
Attachments:

Please Log in or Create an account to join the conversation.

More
6 months 1 week ago #161743 by Joffm
Joffm replied the topic: Array question - adding subheaders and labels
Hi, with this script
<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
<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
Attachments:

Please Log in or Create an account to join the conversation.

More
6 months 1 week ago #161744 by Gensz78
Gensz78 replied the 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?

Attachments:

Please Log in or Create an account to join the conversation.

More
6 months 6 days ago - 6 months 6 days ago #161753 by tpartner
tpartner replied the topic: Array question - adding subheaders and labels
This modification of the script will insert the column labels after every new sub-header row:

<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 months 6 days ago by tpartner.

Please Log in or Create an account to join the conversation.

More
6 months 6 days ago #161754 by Joffm
Joffm replied the 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
Attachments:

Please Log in or Create an account to join the conversation.

More
6 months 6 days ago - 6 months 6 days ago #161759 by Joffm
Joffm replied the topic: Array question - adding subheaders and labels
Well, Tony was faster and as usual provides the JS solution.

Joffm
Last Edit: 6 months 6 days ago by Joffm.

Please Log in or Create an account to join the conversation.

More
6 months 1 day ago #161910 by Gensz78
Gensz78 replied the topic: Array question - adding subheaders and labels
Both of these solutions work great! Thank you so much!

Gen

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!