Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Change focus to next question on page

More
8 years 3 weeks ago - 8 years 3 weeks ago #157772 by wizard2none
Change focus to next question on page was created by wizard2none
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
Last edit: 8 years 3 weeks ago by wizard2none. Reason: Formatting Correction
The topic has been locked.
More
8 years 3 weeks ago #157801 by tpartner
Replied by tpartner on 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:

Code:
<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.09 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
8 years 3 weeks ago - 8 years 3 weeks ago #157808 by wizard2none
Replied by wizard2none on 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: 8 years 3 weeks ago by wizard2none. Reason: Fix Formatting
The topic has been locked.
More
8 years 3 weeks ago #157815 by tpartner
Replied by tpartner on 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):

Code:
$(document).ready(function() {
  var q1 = $('.question-container:eq(0)');
  var q2 = $('.question-container:eq(1)');
  if($(q1).hasClass('yes-no') &amp;&amp; $(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.
The topic has been locked.
More
8 years 3 weeks ago #157818 by wizard2none
Replied by wizard2none on topic Change focus to next question on page
Ah--there we go. Works like a champ. Tons of thanks.
The topic has been locked.
More
7 years 6 months ago #165451 by csknfrt
Replied by csknfrt on 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;
Code:
<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;
Code:
 
<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,
The topic has been locked.
More
7 years 6 months ago #165469 by tpartner
Replied by tpartner on topic Change focus to next question on page
Try this:

Code:
<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.
The topic has been locked.
More
7 years 6 months ago #165483 by csknfrt
Replied by csknfrt on 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,
The topic has been locked.
More
7 years 6 months ago #165484 by tpartner
Replied by tpartner on 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.

Code:
<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.
The topic has been locked.
More
7 years 5 months ago #165497 by csknfrt
Replied by csknfrt on 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.

Code:
<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>
 
The topic has been locked.
More
7 years 5 months ago #165500 by tpartner
Replied by tpartner on 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 topic has been locked.
More
6 years 7 months ago #179970 by csknfrt
Replied by csknfrt on topic Change focus to next question on page
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>
The topic has been locked.
More
6 years 7 months ago #179985 by tpartner
Replied by tpartner on topic Change focus to next question on page
It works for me, what device and OS are you using?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
5 years 5 months ago #195891 by matanzino
Replied by matanzino on topic Change focus to next question on page
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.
The topic has been locked.
More
5 years 5 months ago #195901 by matanzino
Replied by matanzino on topic Change focus to next question on page
With the help of a friend I got a solution that works fine for me:
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $('#question{QID} input[type="radio"]').on('change', function(event) {
          var radioList = $(this).closest('.radio-list');
    $("html, body").animate({ scrollTop: radioList.next('.radio-list').offset().top-100}, 1000);
    return true;
    });
  });
</script>
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source