Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Array Question with "Other" Answer

Array Question with "Other" Answer 1 year 6 days ago #107753

  • trivender
  • trivender's Avatar
  • OFFLINE
  • Expert Lime
  • Posts: 151
  • Thank you received: 7
  • Karma: 7
I tried to write a little jquery code showing my thoughts . Please suggest how it looks.
<script>
$(document).ready(function(){
$('button#movesubmitbtn').on('click',function(){
var $otherRow = $('div.array-flexible-row table.subquestions-list tr:has("input:text")');
for(var i=0;i<$otherRow.length;i++){
var checkedRadio = $otherRow.eq(i).find('td:not("td.noanswer-item")').find('input:checked').length;
var boxVal = $.trim($otherRow.eq(i).find('input:text').val());
if(((checkedRadio != 0) && (boxVal == "")) || ((checkedRadio == 0) && (boxVal != ""))){
alert('Please review your answer in other specify row.');
return false;
}
break;
}
});
//clear other specify value on click of no answer
$('td.noanswer-item').on('click',function(){
$(this).parent().find('input:text').val('');
});
//uncheck no answer on keydown inside otherspecify box.
$('div.array-flexible-row table.subquestions-list input:text').on('keydown',function(){
$(this).parent().parent().find('td.noanswer-item input:radio').prop('checked',false);
});
});
</script>
Trivender Singh
Survey Designer and Programmer
"I always suggest to have a group by group display layout and create a seprate group for each question. This will be extra work but you will get flexiblity to create your question by using more than more lime survey question types."
The administrator has disabled public write access.

Array Question with "Other" Answer 1 year 5 days ago #107792

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4728
  • Thank you received: 955
  • Karma: 410
Okay, using the "No Answer" survey setting simplifies things a bit and to expand a little on your line of thinking...
  1. Add a class to the "Other" row for styling and manipulation
  2. Use question-specific selectors
  3. Use keyup and change events to on the text inputs (in case someone pastes)
  4. Prevent the click event on the submit button from firing more than once if there are multiple instances of these questions
<script type="text/javascript" charset="utf-8">	
 
	$(document).ready(function() {
 
		// Identify the questions
		var thisQuestion = $('#question'+{QID}+'');
		var nextQuestion = $(thisQuestion).nextAll('.text-short:eq(0)');
 
		// Hide the short-text question
		$(nextQuestion).hide();
 
		// Move the hidden text input into the array
		$('th.answertext:last', thisQuestion).append($('input[type="text"]', nextQuestion)).closest('tr').addClass('otherRow');
 
		// Some styling...
		$('input[type="text"]', thisQuestion).css({
			'width': '50%'
		});		
 
		// Handle the "Other" radios
		$('input[type="text"]', thisQuestion).on('keyup change',function(event){
			event.stopPropagation();
 
			if($.trim($(this).val()) == '') {
				$('.otherRow input:radio[value!=""]', thisQuestion).prop('checked',false);
				$('.otherRow input:radio[value=""]', thisQuestion).click();
			}
			else {
				$('.otherRow input:radio[value=""]', thisQuestion).prop('checked',false);
			}
		});	
 
		// Handle the "Other" text input
		$('.otherRow input.radio', thisQuestion).on('click',function(event){
			if($(this).attr('value') == '') {
				$('.otherRow input[type="text"]', thisQuestion).val('');
			}
		});
 
		// Validate the "Other" text input(s) on submit
		if($('#movenextbtn, #movesubmitbtn').attr('data-inserted-other') != 'true') { // We're only doing this once on this page
			$('#movenextbtn, #movesubmitbtn').attr('data-inserted-other', 'true').on('click.insertedOther', function (event) {
 
				var otherError = 0;
 
				$('.array-flexible-row .otherRow').each(function(i) {
 
					if(($('input:radio[value!=""]:checked', this).length > 0 && $('input[type="text"]', this).val() == '') || ($('input:radio[value!=""]:checked', this).length == 0 && $('input[type="text"]', this).val() != '')) {
						otherError = 1;
					}
				});
 
				if(otherError == 1) {
					alert('Please review your answer in the "Other" row(s).');
					return false;
				}
			});
		}
	});
</script>


File Attachment:

File Name: limesurvey_survey_559779.lss
File Size: 26 KB
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: jake1729

Array Question with "Other" Answer 1 year 5 days ago #107841

  • jajas
  • jajas's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 36
  • Karma: 0
Dear LS Team,

To make it simple, how about make enhancement in limesurvey,
for array question add Option for Other answer like single or multiple question type?

i believe LS team can do that.
The administrator has disabled public write access.

Array Question with "Other" Answer 1 year 4 days ago #107844

  • jajas
  • jajas's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 36
  • Karma: 0
How about array question like attached image.

any idea?

Need suggestion please...
Attachments:
The administrator has disabled public write access.

Array Question with "Other" Answer 1 year 4 days ago #107848

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4728
  • Thank you received: 955
  • Karma: 410
To make it simple, how about make enhancement in limesurvey,
for array question add Option for Other answer like single or multiple question type?
You can submit a feature request - www.limesurvey.org/en/community-services/feature-requests.


How about array question like attached image.
I think you have enough information in this thread to accomplish that.


.
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 4 days ago by tpartner.
The administrator has disabled public write access.

Array Question with "Other" Answer 3 months 2 weeks ago #116018

  • jake1729
  • jake1729's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 1
  • Karma: 0
Thank you, this is great. How would you expand this so that you could have multiple "Other" inputs (say 3)?

I really appreciate your help.
The administrator has disabled public write access.

Array Question with "Other" Answer 3 months 2 weeks ago #116021

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4728
  • Thank you received: 955
  • Karma: 410
Try this:

<script type="text/javascript" charset="utf-8">	
 
	$(document).ready(function() {
 
		// Identify the questions
		var thisQuestion = $('#question'+{QID}+'');
		var nextQuestion1 = $(thisQuestion).nextAll('.text-short:eq(0)');
		var nextQuestion2 = $(thisQuestion).nextAll('.text-short:eq(1)');
		var nextQuestion3 = $(thisQuestion).nextAll('.text-short:eq(2)');
		var nextQuestions = $(nextQuestion1).add(nextQuestion2).add(nextQuestion3);
		var nextLength = nextQuestions.length;
		var sqLength = ('tr.answers-list', thisQuestion).length;
 
		// Hide the short-text questions
		$(nextQuestions).hide();
 
		// Move the hidden text inputs into the array
		for (i = 0; i < nextLength; i++) {
			var workingIndex = (sqLength - 1) - (nextLength - i);
			var nextQ = nextQuestions[i];
			$('th.answertext:eq('+workingIndex+')', thisQuestion).append($('input[type="text"]', nextQ)).closest('tr').addClass('otherRow');
		}	
 
		// Some styling...
		$('input[type="text"]', thisQuestion).css({
			'width': '50%'
		});		
 
		// Handle the "Other" radios
		$('input[type="text"]', thisQuestion).on('keyup change',function(event){
			event.stopPropagation();
 
			var thisRow = $(this).closest('tr.answers-list');			
			if($.trim($(this).val()) == '') {
				$('input:radio[value!=""]', thisRow).prop('checked',false);
				$('input:radio[value=""]', thisRow).click();
			}
			else {
				$('input:radio[value=""]', thisRow).prop('checked',false);
			}
		});	
 
		// Handle the "Other" text inputs
		$('.otherRow input.radio', thisQuestion).on('click',function(event){
			var thisRow = $(this).closest('tr.answers-list');
			if($(this).attr('value') == '') {
				$('input[type="text"]', thisRow).val('');
			}
		});
 
		// Validate the "Other" text inputs on submit
		if($('#movenextbtn, #movesubmitbtn').attr('data-inserted-other') != 'true') { // We're only doing this once on this page
			$('#movenextbtn, #movesubmitbtn').attr('data-inserted-other', 'true').on('click.insertedOther', function (event) {
 
				var otherError = 0;
 
				$('.array-flexible-row .otherRow').each(function(i) {
 
					if(($('input:radio[value!=""]:checked', this).length > 0 && $('input[type="text"]', this).val() == '') || ($('input:radio[value!=""]:checked', this).length == 0 && $('input[type="text"]', this).val() != '')) {
						otherError = 1;
					}
				});
 
				if(otherError == 1) {
					alert('Please review your answer in the "Other" row(s).');
					return false;
				}
			});
		}
	});
</script>


File Attachment:

File Name: limesurvey_survey_425451.lss
File Size: 22 KB


capture_2015-01-08.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: 3 months 2 weeks ago by tpartner.
The administrator has disabled public write access.

Array Question with "Other" Answer 2 months 4 weeks ago #116830

  • trivender
  • trivender's Avatar
  • OFFLINE
  • Expert Lime
  • Posts: 151
  • Thank you received: 7
  • Karma: 7
Hi tpartner,

It would great if we can do one more enhancement in this code.

This code works perfect when Array question in non-mandatory but if I make Array question mandatory from question setting then "OtherSpecify" row also forced to answer that is usually not desired. My plan is to keep Array question non-mandatory through settings and update javascript code to force all rows except other specify. Also the UI on error should also be similar default error ie append an error message "This question is mandatory. Please complete all parts." below question text and red highlight the labels of rows that are not answered.

Can you please help us ... :)

Thanks
Trivender Singh
Survey Designer and Programmer
"I always suggest to have a group by group display layout and create a seprate group for each question. This will be extra work but you will get flexiblity to create your question by using more than more lime survey question types."
Last Edit: 2 months 4 weeks ago by trivender. Reason: typo
The administrator has disabled public write access.

Array Question with "Other" Answer 2 months 3 weeks ago #116839

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4728
  • Thank you received: 955
  • Karma: 410
The way that I would handle that would be to...

1) Keep the mandatory setting on the question.

2) Add an "N/A" answer to the y-scale.

3) Add the following new script that will:
- Insert the "Other" input as previously
- Hide the "N/A" column
- Click the hidden "N/A" radio by default
- If text is entered in "Other", the hidden "N/A" is unchecked
- If all text is removed fromn "Other", the hidden "N/A" is checked

Now the hidden "N/A" can satisfy the mandatory requirement if nothing is entered in "Other".

Note that this script will not work on the same page as previous scripts from this thread without modification to those previous scripts.

<script type="text/javascript" charset="utf-8">	
 
	$(document).ready(function() {
 
		// Identify the questions
		var thisQuestion = $('#question'+{QID}+'');
		var nextQuestion = $(thisQuestion).nextAll('.text-short:eq(0)');
 
		// Hide the short-text question
		$(nextQuestion).hide();
 
		// Add a class to the "N/A" column
		$('table.subquestions-list thead tr th:last', thisQuestion).addClass('na-column');
		$('table.subquestions-list tbody tr', thisQuestion).each(function(i) {
			$('td:last', this).addClass('na-column');
		});
 
		// Hide the "N/A" column
		$('.na-column', thisQuestion).hide();
		var ansColWidth = Number($('.col-answers', thisQuestion).attr('width').replace(/%/, ''));
		var newColWidth = (100-ansColWidth)/($('col.odd, col.even', thisQuestion).length-1);
		$('col.odd, col.even', thisQuestion).attr('width', newColWidth+'%');
 
		// Move the hidden text input into the array
		$('th.answertext:last', thisQuestion).append($('input[type="text"]', nextQuestion)).closest('tr').addClass('otherRow');
 
		// Initial "N/A" radio setting
		if($('.otherRow input:radio:checked', thisQuestion).length == 0) {
			$('.otherRow .na-column input:radio', thisQuestion).trigger('click');
		}
 
		// Some styling...
		$('input[type="text"]', thisQuestion).css({
			'width': '50%'
		});		
 
		// Handle the "Other" radios
		$('input[type="text"]', thisQuestion).on('keyup change',function(event){
			event.stopPropagation();
 
			if($.trim($(this).val()) == '') {
				$('.otherRow input:radio', thisQuestion).prop('checked',false);
				$('.otherRow .na-column input:radio', thisQuestion).click();
			}
			else {
				$('.otherRow .na-column input:radio', thisQuestion).prop('checked',false);
			}
		});	
	});
</script>

File Attachment:

File Name: limesurvey_survey_test_8.lss
File Size: 19 KB
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: 2 months 3 weeks ago by tpartner.
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.175 seconds
Donation Image