How to add explanatory header texts to answer options in array question?

More
4 years 3 weeks ago #101190 by aqmattil
aqmattil created the topic: How to add explanatory header texts to answer options in array question?
Hello,

I ran across a smallish (?) issue while trying to implement a specific type of survey. I tried to look around the forums for advice, to no avail. I'd be grateful if someone could give me pointers to the right direction. Quite likely there is a very simple solution that has eluded me...

The issue: I'm trying to make a following kind of a question (all questions in this survey are of the same type):

<start question>
xxxxyyyyzzzzwwww<-- explanatory text for answer options (each text needs to span two values; couldn't get td colspan="2" working)
12345678<-- answer option value that I want to store
Current stateO<-- radio button for answers (only one answer for each question)
Desired future stateO<-- radio button for answers (only one answer for each question)
<end question>

For each question I'm trying to store two answers, one for "current state", and one for "future state".

My first attempt was to make an array question with two sub-questions and the explanatory texts as answer options, but I couldn't get these to span two columns. Also, with this approach the saved results are either text or numerical values, depending on what the user has chosen. For reporting and graphing purposes, I only need numerical values (as little post-processing as possible would be lovely, as I can't be using R in this project).

I could do the array-subquestion questions with numerical values to overcome the post-processing problem, but for the purposes of the survey this would not be a good idea as I need to provide the explanatory texts for the user.

So, what I'd like to know is, how can I get the explanatory texts implemented for each question? Each question will have different explanatory texts. Probably some Javascript, but where to start?

Best regards,
Aleksi

Please Log in to join the conversation.

More
4 years 3 weeks ago - 4 years 3 weeks ago #101218 by tpartner
tpartner replied the topic: How to add explanatory header texts to answer options in array question?

...but where to start?

Here! :cheer:

1) Add this little plugin to the end of template.js. The plugin will insert a new row with colspan=2 cells in the <thead> element of an array and then load those cells with labels.
(function( $ ){
 
	$.fn.extraHeaders = function(options) {  
 
		return this.each(function() {
 
			if($(this).hasClass('array-flexible-row')) { // Only works for arrays
 
				var thisQuestion = $(this);
 
				// Add some classes
				$(this).addClass('extra-headers-question');
 
				// Insert a clone of the header row
				$('.subquestions-list thead', thisQuestion).prepend($('.subquestions-list thead tr:eq(0)', thisQuestion).clone());
				$('.subquestions-list thead tr:eq(0)', thisQuestion).addClass('explanatory-text-row');
 
				//Get rid of the extra cells in the new row
				$('.subquestions-list thead tr:eq(0) th', thisQuestion).each(function(i) {
					// Remove every second cell
					if(i%2 != 0) {
						$(this).remove();
					}
				});
				$('.subquestions-list thead tr:eq(0) th', thisQuestion).attr('colspan', 2);
 
				// Insert the explanatory labels
				$('.subquestions-list thead tr:eq(0) th', thisQuestion).each(function(i) {
					$(this).html(options.columnLabels[1]);
				});
			}
		});
 
	};
})( jQuery );

2) Create your array question with numbers as X-axis options.

3) Add this plugin call to the source of the array. Note that the "columnLabels" must be enclosed in quotes and all but the last one must be followed by a comma.
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function() { 
 
		// Apply the "extraHeaders" plugin to this question
		$('#question{QID}').extraHeaders({
			columnLabels: [
				"Explanatory Text 1", 
				"Explanatory Text 2", 
				"Explanatory Text 3", 
				"Explanatory Text 4"
			]	
		});   
    });
</script>



Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 4 years 3 weeks ago by tpartner.

Please Log in to join the conversation.

More
4 years 3 weeks ago #101219 by tpartner
tpartner replied the topic: How to add explanatory header texts to answer options in array question?
Oops, small typo in the plugin - use this:
(function( $ ){
 
	$.fn.extraHeaders = function(options) {  
 
		return this.each(function() {
 
			if($(this).hasClass('array-flexible-row')) { // Only works for arrays
 
				var thisQuestion = $(this);
 
				// Add some classes
				$(this).addClass('extra-headers-question');
 
				// Insert a clone of the header row
				$('.subquestions-list thead', thisQuestion).prepend($('.subquestions-list thead tr:eq(0)', thisQuestion).clone());
				$('.subquestions-list thead tr:eq(0)', thisQuestion).addClass('explanatory-text-row');
 
				//Get rid of the extra cells in the new row
				$('.subquestions-list thead tr:eq(0) th', thisQuestion).each(function(i) {
					// Remove every second cell
					if(i%2 != 0) {
						$(this).remove();
					}
				});
				$('.subquestions-list thead tr:eq(0) th', thisQuestion).attr('colspan', 2);
 
				// Insert the explanatory labels
				$('.subquestions-list thead tr:eq(0) th', thisQuestion).each(function(i) {
					$(this).html(options.columnLabels[i]);
				});
			}
		});
 
	};
})( jQuery );

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: aqmattil

Please Log in to join the conversation.

More
4 years 3 weeks ago #101280 by aqmattil
aqmattil replied the topic: How to add explanatory header texts to answer options in array question?
Fantastic, works like a charm! Thank you!

Br,
Aleksi

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!