Welcome, Guest
Username: Password: Remember me

TOPIC: Display number of rows in array question based on previous numerical input

Display number of rows in array question based on previous numerical input 2 years 4 months ago #95371

  • ricardo
  • ricardo's Avatar
  • Offline
  • Expert Lime
  • Posts: 117
  • Thank you received: 1
  • Karma: 0
I'd like to create an array question that only displays certain number of rows based on a response to a previous numerical input.

In this example, if a person says that she teaches 2 courses (#1), question 2 should display only 2 rows (#2)






is it possible to do this?

Thanks

This message has an attachment image.
Please log in or register to see it.

Last Edit: 2 years 4 months ago by ricardo. Reason: wrong pic
The administrator has disabled public write access.

Display number of rows in array question based on previous numerical input 2 years 3 months ago #95385

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5077
  • Thank you received: 1045
  • Karma: 438
If both questions are on the same page as your image indicates, add this to the source of the numeric question.
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
 
		// Identify the questions
		var q1ID = '{QID}';
		var q1 = $('#question'+q1ID+'');
		var q2 = $(q1).nextAll('.array-multi-flexi-text:eq(0)'); 
		var q2ID = $(q2).attr('id').split('question')[1];
 
		// Initial row handling
		handleRows($('input[type="text"]', q1));
 
		// Listener on the numeric input
		$('input[type="text"]', q1).change(function(){
			var maxRows = $('tr:[id^="javatbd"]', q2).length;
			if($(this).val() > maxRows) {
				alert('You can only display a maximum of '+maxRows+' rows!');
				$(this).val('');
			}
			else {
				handleRows(this);
			}
		});
 
		function handleRows(el) {
			var numRows = $(el).val();
			$('tr:[id^="javatbd"]', q2).hide();
			$('tr:[id^="javatbd"]', q2).each(function(i){
				if(i >= numRows) {
					$('input[type="text"], select', this).val('');
				}
				else {
					$(this).show();
				}
			})
		}
	});
</script>

Here's a sample survey:

File Attachment:

File Name: limesurvey...4-28.lss
File Size:19 KB

This message has an attachment file.
Please log in or register to see it.

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.

Display number of rows in array question based on previous numerical input 2 years 3 months ago #95387

  • ricardo
  • ricardo's Avatar
  • Offline
  • Expert Lime
  • Posts: 117
  • Thank you received: 1
  • Karma: 0
As always, Thank you very much, Tony.

ricardo
The administrator has disabled public write access.

Display number of rows in array question based on previous numerical input 2 years 3 months ago #95391

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5077
  • Thank you received: 1045
  • Karma: 438
You're welcome :). Enjoy your Sunday.
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.

Display number of rows in array question based on previous numerical input 2 years 3 months ago #95763

  • ricardo
  • ricardo's Avatar
  • Offline
  • Expert Lime
  • Posts: 117
  • Thank you received: 1
  • Karma: 0
Hi Tony,

There small glitch in this workaround

The rows don't display as soon as the number is entered...they only show up after clicking somewhere else...is there a way to make the rows appear as soon as the number is entered.




this is a link to the question broaderimpacts.org/surveys/limesurvey/index.php/289571/lang-en

rg

This message has an attachment image.
Please log in or register to see it.

The administrator has disabled public write access.

Display number of rows in array question based on previous numerical input 2 years 3 months ago #95776

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5077
  • Thank you received: 1045
  • Karma: 438
That is not a "glitch", it is by design.

The handleRows() function is not fired until the respondent is finished inputting their value (the input is de-focussed) to avoid "bouncing" if you have more than 9 rows. (if someone enters 12, it would first show 2 rows and then 12)

If have less than 10 rows, change this:
$('input[type="text"]', q1).change(function(){

To this:
$('input[type="text"]', q1).mouseup(function(){
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.

Display number of rows in array question based on previous numerical input 2 years 3 months ago #95786

  • ricardo
  • ricardo's Avatar
  • Offline
  • Expert Lime
  • Posts: 117
  • Thank you received: 1
  • Karma: 0
thanks, Tony

Also, is it possible to make the array question mandatory? This is what it looks now. In this example, only info about 3 courses should be entered...but still the person gets the warning


This message has an attachment image.
Please log in or register to see it.

The administrator has disabled public write access.

Display number of rows in array question based on previous numerical input 2 years 3 months ago #95798

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5077
  • Thank you received: 1045
  • Karma: 438
The easiest way to handle that would be to populate all of the hidden text inputs with an "N/A" value.

So, the script in the "How many courses..." question would become:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
 
		// Identify the questions
		var q1ID = '{QID}';
		var q1 = $('#question'+q1ID+'');
		var q2 = $(q1).nextAll('.array-multi-flexi-text:eq(0)'); 
		var q2ID = $(q2).attr('id').split('question')[1];
 
		// Initial row handling
		handleRows($('input[type="text"]', q1));
 
		// Listener on the numeric input
		$('input[type="text"]', q1).mouseup(function(){
			var maxRows = $('tr:[id^="javatbd"]', q2).length;
			if($(this).val() > maxRows) {
				alert('You can only display a maximum of '+maxRows+' rows!');
				$(this).val('');
			}
			else {
				handleRows(this);
			}
		});
 
		function handleRows(el) {
			var numRows = $(el).val();
			$('tr:[id^="javatbd"]', q2).hide();
			$('tr:[id^="javatbd"]', q2).each(function(i){
				if(i >= numRows) {
					$('input[type="text"], select', this).val('');
				}
				else {
					$(this).show();
				}
			})
		}
 
		// Interrupt next/submit function
		$('form#limesurvey').submit(function(){
 
			// Load hidden inputs
			$('.subquestions-list tr:hidden input[type="text"]', q2).val('N/A');
 
			// Carry on with submit
			return true;
		});
	});
</script>
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: oppur

Display number of rows in array question based on previous numerical input 2 years 3 months ago #96331

  • oppur
  • oppur's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 2
  • Karma: 0
tpartner wrote:
If both questions are on the same page as your image indicates, add this to the source of the numeric question.
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
 
		// Identify the questions
		var q1ID = '{QID}';
		var q1 = $('#question'+q1ID+'');
		var q2 = $(q1).nextAll('.array-multi-flexi-text:eq(0)'); 
		var q2ID = $(q2).attr('id').split('question')[1];
 
		// Initial row handling
		handleRows($('input[type="text"]', q1));
 
		// Listener on the numeric input
		$('input[type="text"]', q1).change(function(){
			var maxRows = $('tr:[id^="javatbd"]', q2).length;
			if($(this).val() > maxRows) {
				alert('You can only display a maximum of '+maxRows+' rows!');
				$(this).val('');
			}
			else {
				handleRows(this);
			}
		});
 
		function handleRows(el) {
			var numRows = $(el).val();
			$('tr:[id^="javatbd"]', q2).hide();
			$('tr:[id^="javatbd"]', q2).each(function(i){
				if(i >= numRows) {
					$('input[type="text"], select', this).val('');
				}
				else {
					$(this).show();
				}
			})
		}
	});
</script>

Here's a sample survey:

File Attachment:

File Name: limesurvey...4-28.lss
File Size:19 KB

Thank you. This work fine in Chrome, Safari, IE8. But not in IE10.
The administrator has disabled public write access.

Display number of rows in array question based on previous numerical input 2 years 3 months ago #96350

  • oppur
  • oppur's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 2
  • Karma: 0
I found a temporary solution:
If I add to template startpage.pstpl
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
then this script work on IE10
Last Edit: 2 years 3 months ago by oppur.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.170 seconds