- Posts: 966
- Thank you received: 219
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Auto advance and hide "Next" button.
- tammo
- Topic Author
- Offline
- Official LimeSurvey Partner
Less
More
2 years 4 months ago #223119
by tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
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:
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10103
- Thank you received: 3591
2 years 4 months ago #223120
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Topic Author
- Offline
- Official LimeSurvey Partner
Less
More
- Posts: 966
- Thank you received: 219
2 years 4 months ago #223121
by tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
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.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10103
- Thank you received: 3591
2 years 4 months ago #223129
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Auto advance and hide "Next" button.
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....although the "Next" button flashes once after the page is loaded.
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
- Topic Author
- Offline
- Official LimeSurvey Partner
Less
More
- Posts: 966
- Thank you received: 219
2 years 4 months ago #223131
by tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
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.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13624
- Thank you received: 2490
2 years 4 months ago #223186
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
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
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 service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
- tammo
- Topic Author
- Offline
- Official LimeSurvey Partner
Less
More
- Posts: 966
- Thank you received: 219
2 years 2 months ago - 2 years 2 months ago #223925
by tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
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:
Can you see what we do wrong here?
Thanks in advance,
Tammo
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>
Thanks in advance,
Tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
Last edit: 2 years 2 months ago by tammo.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10103
- Thank you received: 3591
2 years 2 months ago #224086
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Topic Author
- Offline
- Official LimeSurvey Partner
Less
More
- Posts: 966
- Thank you received: 219
2 years 2 months ago #224088
by tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
Replied by tammo on topic Auto advance and hide "Next" button.
Here is the .lss file. Thank you for looking into it.
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10103
- Thank you received: 3591
2 years 2 months ago #224208
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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.
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
- Topic Author
- Offline
- Official LimeSurvey Partner
Less
More
- Posts: 966
- Thank you received: 219
2 years 2 months ago #224211
by tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
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.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10103
- Thank you received: 3591
2 years 2 months ago #224219
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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?
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.