Array question - adding subheaders and labels

Mehr
7 Monate 4 Tage her #161707 von Gensz78
Gensz78 erstellte das Thema 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
Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
7 Monate 3 Tage her #161743 von Joffm
Joffm antwortete auf das Thema: 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


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
7 Monate 3 Tage her #161744 von Gensz78
Gensz78 antwortete auf das Thema: 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?

Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
7 Monate 3 Tage her - 7 Monate 3 Tage her #161753 von tpartner
tpartner antwortete auf das Thema: 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.
Letzte Änderung: 7 Monate 3 Tage her von tpartner.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
7 Monate 3 Tage her #161754 von Joffm
Joffm antwortete auf das Thema: 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
Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
7 Monate 3 Tage her - 7 Monate 3 Tage her #161759 von Joffm
Joffm antwortete auf das Thema: 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
Letzte Änderung: 7 Monate 3 Tage her von Joffm.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
6 Monate 3 Wochen her #161910 von Gensz78
Gensz78 antwortete auf das Thema: Array question - adding subheaders and labels
Both of these solutions work great! Thank you so much!

Gen

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha