Change focus to next question on page

More
1 month 3 weeks ago - 1 month 3 weeks ago #157772 by wizard2none
wizard2none created the topic: Change focus to next question on page
Each group in my survey has the following attributes:

1) There are two questions in each question group.
2) The first question is a qualifying Yes/No question.
3) The second question is a multiple-choice question which is initially hidden.

If the answer to the first question is Yes, then the multiple-choice question becomes unhidden.

My problem is after the user selects 'Yes', which unhides the second question, the user can not see the second question unless they knew to scroll down.

Is it possible to have LS automatically scroll down to the second question when it becomes unhidden, namely when the user selects Yes to the first question?

I have attached screenshots to show what I mean.
File: 'Before'--screenshot on page load (before the first question is answered).
Problem is it stays the same even after the user clicks 'Yes' which unhides the second question.

File: 'After'--screenshot of what the user would see if he knew to scroll down.

Setup: Hosting on LimeSurvey.org with version 2.67.2
Attachments:
Last Edit: 1 month 3 weeks ago by wizard2none. Reason: Formatting Correction

Please Log in to join the conversation.

More
1 month 3 weeks ago #157801 by tpartner
tpartner replied the topic: Change focus to next question on page
Set up your survey to use JavaScript and place the following script in the source of the first question:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('#question{QID} .answers-list label:first').on('click', function(e) {
			$("html, body").animate({ 
				scrollTop: $(document).height() 
			}, 1000);
		});
	});
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...8981.lss
File Size:16 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:

Please Log in to join the conversation.

More
1 month 3 weeks ago - 1 month 3 weeks ago #157808 by wizard2none
wizard2none replied the topic: Change focus to next question on page
Thanks--placing it in the first question of a question group works!

Since I have 25 groups I was trying to get your code to work by placing it at the bottom of 'template.js' (note: using the default template). That way the behavior would be there with when each group (i.e. page) is loaded.

I placed the following code at the bottom of 'template.js' file:

$(document).ready(function() {
$('#question{QID} .answers-list label:first').on('click', function(e) {
$("html, body").animate({
scrollTop: $(document).height()
}, 1000);
});
});

But, that doesn't work--meaning it no longer scrolls. Can you say what I'm doing wrong?
Last Edit: 1 month 3 weeks ago by wizard2none. Reason: Fix Formatting

Please Log in to join the conversation.

More
1 month 3 weeks ago #157815 by tpartner
tpartner replied the topic: Change focus to next question on page
Try something like this (I added a test so it will only fire if that question combination is found):

$(document).ready(function() {
	var q1 = $('.question-container:eq(0)');
	var q2 = $('.question-container:eq(1)');
	if($(q1).hasClass('yes-no') && $(q2).hasClass('multiple-opt')) {
		$('.answers-list label:first', q1).on('click', function(e) {
			$("html, body").animate({ 
				scrollTop: $(document).height() 
			}, 1000);
		});
	}
});

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

Please Log in to join the conversation.

More
1 month 3 weeks ago #157818 by wizard2none
wizard2none replied the topic: Change focus to next question on page
Ah--there we go. Works like a champ. Tons of thanks.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now