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

Set up your survey to use JavaScript and place the following script in the source of the first question:


Sample survey attached:

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?

Try something like this (I added a test so it will only fire if that question combination is found):

Ah--there we go. Works like a champ. Tons of thanks.

Hello,

My LS version is 3.5.1

This code works but I want to go next question directly;

I tried this code but it didn't work;

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

Regards,

Try this:

Hello tpartner,

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

Regards,

This will give you a little extra offset to allow for the header. You may need to modify the 100 value.

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.

That script does work for me in version 3.5.1 with the vanilla template.

Hello,

I use this code thanks again. it's very good on windows and android devices but I think that there is a problem for ios devices. When I use this code scroll does not change on the ios devices.

I have just searched the issue on the internet. There is some fix but I did not do it. Do you have any idea about that?

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

It works for me, what device and OS are you using?

Dear all,
The above posted code works fine for me, however, I would like to adapt the code so it also works for array questions. That is, after each answer in an array the focus moves to the next line in the array. The behaviour would be particularly useful for answering them on cell phones.
Can anyone help me in getting the correct scroll location? Unfortunately, I am not very familiar with js and CSS.

With the help of a friend I got a solution that works fine for me: