Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Auto advance and hide "Next" button.

  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
2 years 11 months ago #223119 by tammo
Auto advance and hide "Next" button. was created by tammo
Please help us help you and fill where relevant:
Your LimeSurvey version: Version 5.2.6+211213
Own server or LimeSurvey hosting: Own
Theme: Custom
==================
For a quiz that I am developing I use only single choice radio button questions.
I want to auto-advance after each choice to a next question. For that I have a good script.
But I also want to "Next" button to hide and only to appear after X seconds (for when a respondent does not have a clue about the answer)

How do I do that?

My script for auto advancing to the next question is:

<script type="text/javascript" data-author="Tony Partner">
    $(document).on('ready pjax:scriptcomplete',function(){
        $('#question{QID} :radio').on('change', function(e) {
            $('#ls-button-submit').trigger('click');
        });
    });
</script>


 
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 11 months ago #223120 by tpartner
Replied by tpartner on topic Auto advance and hide "Next" button.
Hi Tammo, try this:
Code:
<script type="text/javascript" data-author="Tony Partner">
    $(document).on('ready pjax:scriptcomplete',function(){
 
    var delay = 10; // Delay time in seconds
 
    $('#ls-button-submit').addClass('hidden').hide();
 
    setTimeout(function() {
      $('#ls-button-submit').hide().removeClass('hidden').fadeIn(500);
    }, delay*1000);
 
        $('#question{QID} :radio').on('change', function(e) {
            $('#ls-button-submit').trigger('click');
        });
    });
</script>
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: tammo
The topic has been locked.
  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
2 years 11 months ago #223121 by tammo
Replied by tammo on topic Auto advance and hide "Next" button.
Thank you, this works, although the "Next" button flashes once after the page is loaded.

Strangely enough this code needs to be added to the question text. Adding it to the script text does not work.
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 11 months ago #223129 by tpartner
Replied by tpartner on topic Auto advance and hide "Next" button.

...although the "Next" button flashes once after the page is loaded.

This is always the case as the JavaScript is loaded. A workaround would be to hide the #ls-button-submit element in custom.css but this would affect all groups/pages using that survey theme.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
2 years 11 months ago #223131 by tammo
Replied by tammo on topic Auto advance and hide "Next" button.
I can imagine to do this for this specific use case and prepare a custom theme called "Quiz" where all "next" buttons are hidden for some seconds (until the Javascript kicks in).

On the last page of the quiz, people see the answers, but since this page is long (feedback for each question), people will not notify the missing "next" button while they are reading the feedback. Once they are ready, the waiting time has elapsed. And I could even set the waiting time to 0.
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team & Official Partner
  • LimeSurvey Community Team & Official Partner
More
2 years 10 months ago #223186 by DenisChenu
Replied by DenisChenu on topic Auto advance and hide "Next" button.
If you set it in custom.css : no-js / js class is here :)

Then
.js .btn-next{display:none}

And you show it when you need

And allow no-js user to do the quiz :)
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.
The topic has been locked.
  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
2 years 9 months ago - 2 years 9 months ago #223925 by tammo
Replied by tammo on topic Auto advance and hide "Next" button.
We had to adapt the script, because it turned out that on IPads and IPhones the radio button that was chosen did not show it was chosen. So we added a delay, but I am not completely happy with it, because it seems to work, but it also messes up the HTML of the button:
Code:
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
 
var delay = 2; // Delay time in seconds
 
$('#ls-button-submit').addClass('hidden').hide();
 
setTimeout(function() {
$('#ls-button-submit').hide().removeClass('hidden').fadeIn(500);
}, delay*1000);
 
$('#question{QID} :radio').on('change', function(e) {
setTimeout(function() {
$('#ls-button-submit').trigger('click');
}, delay*500);
});
});
</script>
Can you see what we do wrong here?

Thanks in advance,

Tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
Last edit: 2 years 9 months ago by tammo.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 9 months ago #224086 by tpartner
Replied by tpartner on topic Auto advance and hide "Next" button.
I don't see how that would affect the HTML. Can you attach a small sample survey?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
2 years 9 months ago #224088 by tammo
Replied by tammo on topic Auto advance and hide "Next" button.
Here is the .lss file. Thank you for looking into it.

 

File Attachment:

File Name: javascriptexample.lss
File Size:82 KB

 
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 9 months ago #224208 by tpartner
Replied by tpartner on topic Auto advance and hide "Next" button.
How do you see it messing up the button HTML?

This is what I see using the vanilla theme and I see no JS errors.

 
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
2 years 9 months ago #224211 by tammo
Replied by tammo on topic Auto advance and hide "Next" button.
Hi Tony,
this example shows it: please look at the HTML code for the next button on page 1 (with javascript) and page 2 (without javascript) 

research.respondage.com/index.php/774648...t=Y&lang=nl-informal

Please also see the attachments.
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 9 months ago #224219 by tpartner
Replied by tpartner on topic Auto advance and hide "Next" button.
That is not messed up, arguably jQuery has cleaned up the HTML.

1) When the "hidden" class is removed, unnecessary spaces in the class attribute are removed.

2) An inline style declaration "display:none" was applied to hide the button. When the button is shown, that declaration is removed leaving an empty style attribute. This is not invalid HTML.

Do you see display or functionality problems?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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