Welcome, Guest
Username: Password: Remember me

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

How to add explanatory header texts to answer options in array question? 1 year 4 weeks ago #101190

  • aqmattil
  • aqmattil's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 2
  • Karma: 0
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
The administrator has disabled public write access.

How to add explanatory header texts to answer options in array question? 1 year 3 weeks ago #101218

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4369
  • Thank you received: 828
  • Karma: 381
...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>


h5349782.PNG
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 1 year 3 weeks ago by tpartner.
The administrator has disabled public write access.

How to add explanatory header texts to answer options in array question? 1 year 3 weeks ago #101219

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4369
  • Thank you received: 828
  • Karma: 381
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
The following user(s) said Thank You: aqmattil

How to add explanatory header texts to answer options in array question? 1 year 3 weeks ago #101280

  • aqmattil
  • aqmattil's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 2
  • Karma: 0
Fantastic, works like a charm! Thank you!

Br,
Aleksi
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.139 seconds
Donation Image