All in one but showing one by one

More
11 months 1 week ago #162089 by SurveyDennis
SurveyDennis created the topic: All in one but showing one by one
I would like to show all questions on one page.
Setting the format to "All in one".

However I want to show all questions one by one, is this possible?

The reason I want to achieve this is because I would like to display all (answered) questions as well.

Be SurveyFriendly too
dennis [at] SurveyFriendly [dot] com

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

More
11 months 1 week ago - 11 months 1 week ago #162092 by tpartner
tpartner replied the topic: All in one but showing one by one
You could use JavaScript to hide all questions and then use the "submit" button to show them sequentially (but this may play havoc with any relevance you may have in place).

Something like this in template.js:

	$(document).ready(function(){	
 
		// Hide all but the first question
		$('.question-container').not(':eq(0)').hide();
 
		// Identify some elements 
		var nextButton = $('#movenextbtn, #movesubmitbtn');
		var firstQ = $('.question-container:first');
		var lastQ = $('.question-container:last');
 
		// Text for the submit button
		var nextText = 'Next';
		var submitText = 'Submit';
		$(nextButton).text(nextText);
 
		// Insert a Previous button
		var previousButton = $('<button type="button" class="button btn btn-lg  btn-default" style="display:none">Previous</button>').appendTo($(nextButton).closest('#navigator-container').find('.save-all.text-left'));
 
		// Listener on the submit button
		$(nextButton).on('click', function(e) {
			// Identify some elements
			var visibleQ = $('.question-container:visible');
			var nextQ = $(visibleQ).next('.question-container');
 
			// If there is a next question
			if(nextQ.length > 0) {
				// Prevent default action
				e.preventDefault();
 
				// Show the next question
				$(visibleQ).fadeOut(300, function(e) {
					$(nextQ).fadeIn(300, function(e) {
						if($(lastQ).is(':visible')) {
							$(nextButton).text(submitText);
						}
					});
				});
 
				// Handle the submit button text
				$('#navigator-container').fadeOut(300, function(e) {
					$(previousButton).show();
					if($(lastQ).is(':visible')) {
						$(nextButton).text(submitText);
					}
					$('#navigator-container').fadeIn(300, function(e) {
						$('#navigator-container button').prop('disabled', false).removeClass('disabled active');
					});
				});
			}
			// No next question so submit the page
			else {
				$(nextButton).removeClass('active');
			}
 
		});
 
		// Listener on the previous button
		$(previousButton).on('click', function(e) {
			// Identify some elements
			var visibleQ = $('.question-container:visible');
			var prevQ = $(visibleQ).prev('.question-container');
 
			e.preventDefault();
 
			// Show the previous question
			$(visibleQ).fadeOut(300, function(e) {
				$(prevQ).fadeIn(300);
			});
 
			// Handle the previous button visibility 
			$('#navigator-container').fadeOut(300, function(e) {
				if($(firstQ).is(':visible')) {
					$(previousButton).hide();
				}
				$('#navigator-container').fadeIn(300, function(e) {
					$('#navigator-container button').prop('disabled', false).removeClass('disabled active');
				});
			});
		});
	});

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 11 months 1 week ago by tpartner.
The following user(s) said Thank You: SurveyDennis

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

More
11 months 1 week ago - 11 months 1 week ago #162097 by SurveyDennis
SurveyDennis replied the topic: All in one but showing one by one
Thanks Tony,

I am probably doing something wrong (when adding your script in the template.js from the default template).
But like always your code is very clear so I will see if I can manage this.

When I add the code with in the question itself the next question is hidden, and the next one appears on a following up screen.

Just as example: www.surveyfriendly.com/ls1/index.php/sur...94/newtest/Y/lang/en

Be SurveyFriendly too
dennis [at] SurveyFriendly [dot] com
Last Edit: 11 months 1 week ago by SurveyDennis.

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

More
11 months 1 week ago #162098 by tpartner
tpartner replied the topic: All in one but showing one by one
I see a JavaScript error in your survey.


Here is a working survey with the script in the source of Q1. Tested with the default template in version 2.73.0+171219.

File Attachment:

File Name: limesurvey...2-31.lss
File Size:25 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 1 week ago #162099 by SurveyDennis
SurveyDennis replied the topic: All in one but showing one by one
Thanks again Tony,
I have uploaded your lss. I can see it working

www.surveyfriendly.com/ls1/index.php/sur...98/newtest/Y/lang/en

But just to be sure, the previous questions don't stay on the screen after answering them and moving to the next question.

I still have that error indeed in the default template.
Strange, I didn't changed that (LS Version 2.55.1+161026)

Be SurveyFriendly too
dennis [at] SurveyFriendly [dot] com

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

More
11 months 1 week ago - 11 months 1 week ago #162101 by tpartner
tpartner replied the topic: All in one but showing one by one
Yes, using that script, each question is hidden as the next one is shown.

If you want the currently visible questions to remain as the next ones are shown, use this script:

	$(document).ready(function(){	
 
		// Hide all but the first question
		$('.question-container').not(':eq(0)').hide();
 
		// Identify some elements 
		var nextButton = $('#movenextbtn, #movesubmitbtn');
		var firstQ = $('.question-container:first');
		var lastQ = $('.question-container:last');
 
		// Text for the submit button
		var nextText = 'Next';
		var submitText = 'Submit';
		$(nextButton).text(nextText);
 
		// Listener on the submit button
		$(nextButton).on('click', function(e) {
			// Identify some elements
			var visibleQ = $('.question-container:visible');
			var nextQ = $(visibleQ).next('.question-container');
 
			// If there is a next question
			if(nextQ.length > 0) {
				// Prevent default action
				e.preventDefault();
 
				// Show the next question
				$(nextQ).fadeIn(600, function(e) {
					if($(lastQ).is(':visible')) {
						$(nextButton).text(submitText);
					}
				});
 
				// Handle the submit button text and scrolling
				$(nextButton).fadeOut(150, function(e) {
					if($(lastQ).is(':visible')) {
						$(nextButton).text(submitText);
						$('html, body').animate({ 
							scrollTop: $(document).height() 
						}, 1000);
					}
					else {
						$('html, body').animate({
							scrollTop: $(nextQ).offset().top
						}, 1000);
					}
					$(nextButton).fadeIn(150, function(e) {
						$('#navigator-container button').prop('disabled', false).removeClass('disabled active');
					});
				});
			}
			// No next question so submit the page
			else {
				$(nextButton).removeClass('active');
				alert($(document).height());
			}
 
		});
	});

Sample survey attached:

File Attachment:

File Name: limesurvey...1-01.lss
File Size:24 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 11 months 1 week ago by tpartner.
The following user(s) said Thank You: SurveyDennis

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

More
11 months 1 week ago #162102 by SurveyDennis
SurveyDennis replied the topic: All in one but showing one by one
Like always - many thanks for this!! All working!!

Be SurveyFriendly too
dennis [at] SurveyFriendly [dot] com

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!