Change focus to next question on page

More
11 months 3 weeks ago - 11 months 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: 11 months 3 weeks ago by wizard2none. Reason: Formatting Correction

Please Log in or Create an account to join the conversation.

More
11 months 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 or Create an account to join the conversation.

More
11 months 3 weeks ago - 11 months 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: 11 months 3 weeks ago by wizard2none. Reason: Fix Formatting

Please Log in or Create an account to join the conversation.

More
11 months 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 or Create an account to join the conversation.

More
11 months 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 or Create an account to join the conversation.

More
5 months 2 days ago #165451 by csknfrt
csknfrt replied the topic: Change focus to next question on page
Hello,

My LS version is 3.5.1

This code works but I want to go next question directly;
<script> type="text/javascript" charset="utf-8">
	$(document).ready(function(){ 
	$('#question{QID} input[type="radio"]').on('change', function() {
			  $("html, body").animate({ scrollTop: 750 }, 1000);
    return true;
});
 });
</script>

I tried this code but it didn't work;
 
<script> type="text/javascript" charset="utf-8">
	$(document).ready(function(){ 
	$('#question{QID} input[type="radio"]').on('change', function() {
			  $("html, body").animate({ scrollTop: nextQuestion.offset().top}, 1000);
    return true;
});
 });
</script>
 

What should I write instead of "scrollTop: nextQuestion.offset().top}"?

Regards,

Please Log in or Create an account to join the conversation.

More
5 months 2 days ago #165469 by tpartner
tpartner replied the topic: Change focus to next question on page
Try this:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){ 
		$('#question{QID} input[type="radio"]').on('change', function() {
			$("html, body").animate({ scrollTop: $('#question{QID}').next('.question-container').offset().top}, 1000);
			return true;
		});
	});
</script>

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

Please Log in or Create an account to join the conversation.

More
5 months 1 day ago #165483 by csknfrt
csknfrt replied the topic: Change focus to next question on page
Hello tpartner,

It works but there is a problem. I've added an attachment about the problem.

Regards,
Attachments:

Please Log in or Create an account to join the conversation.

More
5 months 1 day ago #165484 by tpartner
tpartner replied the topic: Change focus to next question on page
This will give you a little extra offset to allow for the header. You may need to modify the 100 value.

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){ 
		$('#question{QID} input[type="radio"]').on('change', function() {
			$("html, body").animate({ scrollTop: $('#question{QID}').next('.question-container').offset().top-100}, 1000);
			return true;
		});
	});
</script>

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

Please Log in or Create an account to join the conversation.

More
5 months 1 day ago #165497 by csknfrt
csknfrt replied the topic: Change focus to next question on page
Hello tpartner,

It works. Thank you for your help.

I have another question with this topic. In this method, Will progress bar be able to change?

I tried code below but it did not work.

<script type="text/javascript" charset="utf-8">	   
	$(document).ready(function() {
		var progressValue = 32;
		$('.progress-bar').css({
			'transition': 'width 0s ease 0s',
			'width': progressValue+'%'
		}).attr('aria-valuenow', progressValue).text(progressValue+'%');
	});
</script>
 

Please Log in or Create an account to join the conversation.

More
5 months 1 day ago #165500 by tpartner
tpartner replied the topic: Change focus to next question on page
That script does work for me in version 3.5.1 with the vanilla template.

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: LouisGac

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!