Expandable Array - Dynamic Grid

More
11 months 3 weeks ago #186276 by SurveyDennis
I would like to create a dynamic grid question - showing one row at the time.

Show the next row after answering the current row (and then hide the answered row as well).


As base I think this is the right starting point:


manual.limesurvey.org/Workarounds:_Manip...ipt#Expandable_Array

This works just fine in LS 1.9, but I would like to use this in version 3.

Can anyone spot what needs to be changed to get it working in LS3?
<script type="text/javascript">
 
	$(document).ready(function() {
 
		// A function to show subsequent rows of an array as options are checked
		function expandingArray(qID) {
 
			// Build an array of the question rows
			var arrayRow = '#question' + qID + ' table.question tbody tr';
 
			// Initially hide all rows unless an input was previously checked
			$( arrayRow ).each(function(i) {
 
				if ( $( arrayRow  + ':eq(' + i + ') input.radio:checked' ).length != 0 ) {
					$(this).attr('name', 'clickedRow');
				}
				else {
					$(this).attr('name', 'hidden').hide();
				}
			});
 
			// Now show the first hidden row
			addRow();
 
			// Add another row when an option is checked for the first time
			$( '#question' + qID + ' td.answer input.radio' ).click(function (event) {
 
				if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
					addRow();
					$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
				}
 
				// The original function of the click event
				checkconditions(this.value, this.name, this.type);
			});
 
			// Add another row when an table cell is clicked for the first time
			$( '#question' + qID + ' table.question tbody td' ).click(function (event) {
 
				if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
					addRow();
					$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
				}
			});
 
			// Function to add a row
			function addRow() {
				$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
				// Now, scroll down
				$("html, body").animate({ scrollTop: $(document).height() }, 1000);
			}
		}
 
		// Call the function with a question ID
		expandingArray(QQ);
 
	});
</script>

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com

Please Log in to join the conversation.

LimeSurvey Partners
More
11 months 3 weeks ago #186279 by SurveyDennis
Just answering my own question - if anyone is looking for the same.

To get this working in LS3 change the following:
var arrayRow = '#question' + qID + ' table.question tbody tr';
to
var arrayRow = '#question' + qID + ' table.ls-answers tbody tr';


and
$( '#question' + qID + ' table.question tbody td' ).click(function (event) {
to
$( '#question' + qID + ' table.ls-answers tbody td' ).click(function (event) {

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com

Please Log in to join the conversation.

More
11 months 3 weeks ago #186281 by tpartner
Why not use sub-question relevance (which was not available when that workaround was written)?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Please Log in to join the conversation.

More
11 months 3 weeks ago - 11 months 3 weeks ago #186282 by SurveyDennis
Actually I have one question to the above.


I am adding an extra line to hide the answered row:

$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
// if you also want to hide the answered row:
$(this).parents('tr:eq(0)').attr('name', 'clickedRow').hide();
}

That works nice.


But when I come to the last item (row).
I also want to hide the columns.

For example for the third row:
$(this).parents('tr:eq(2)').attr('name', 'ls-heading').hide();

But that's not correct, I have a feeling this can be done much easier. Any idea?

File Attachment:

File Name: limesurvey..._181.lsq
File Size:6 KB

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Attachments:
Last edit: 11 months 3 weeks ago by SurveyDennis. Reason: Adding the lsq

Please Log in to join the conversation.

More
11 months 3 weeks ago #186283 by SurveyDennis
Okay I will look into the sub-question - relevance manual / examples.

I have to be honest I didn't looked at that before at all.
But then the syntax should probably look like: {Q4_SQ001.question}:{Q4_SQ002.shown}

Can I solve this fully with this rather then with some JS?

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com

Please Log in to join the conversation.

More
11 months 3 weeks ago #186284 by tpartner
I don't understand your comment about hiding columns. Can you please explain the complete question behaviour?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Please Log in to join the conversation.

More
11 months 3 weeks ago - 11 months 3 weeks ago #186286 by SurveyDennis
If I am using the row by row solution.
And when I also hide the option that has been answered.

Then at the last item, after answering that option, that row will also be removed/hidden.
In that case only the columns of the heading remains on the page.

I would like to hide that heading (ls-heading)


Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Attachments:
Last edit: 11 months 3 weeks ago by SurveyDennis.

Please Log in to join the conversation.

More
11 months 3 weeks ago #186287 by tpartner
In that case, I think you want something like this:

<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
 
		var thisQuestion = $('#question{QID}');
 
		// Initially hide all but the first row
		$('tr.answers-list:gt(0)', thisQuestion).hide();
 
		// Listener on the radios
		$('input:radio', thisQuestion).on('click', function(e) {
			var thisRow = $(this).closest('tr');
			var nextRow = $(thisRow).next('tr.answers-list');
 
			if(nextRow.length > 0) {
				// Hide this row and show the next
				$(thisRow).fadeOut(300, function(e) {
					$(nextRow).fadeIn(300);
				});
			}
			else {
				// No next row so hide the table
				$('table.ls-answers', thisQuestion).fadeOut(300);
			}
		});
	});
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...7-04.lss
File Size:20 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
The following user(s) said Thank You: SurveyDennis

Please Log in to join the conversation.

More
11 months 3 weeks ago #186288 by SurveyDennis
Like always - many thanks!
When I have the layout ready for the dynamic scrolling / carousel grid question I make sure to share this.

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com

Please Log in to join the conversation.

More
9 months 3 weeks ago - 9 months 3 weeks ago #188531 by SurveyDennis
Whenever I have some spare time I work on these questiontypes.

Again I am a small step further in the right direction.


To see this in action: carousel grid


For who is interested please find attached the .lss with some Javascript and CSS.

---


I have a question - but this is not Limesurvey but Javascript.

Ofcourse I understand this not a JS forum, but there are so many clever JS experts here as well :-)


Depended on the amount of rows in the grid I created the same amount of extra borders (so people see how many rows we have in this carousel grid):





What I can't manage is that when something is answered it also needs to remove one of the borders again.
So maybe if there is somebody that is interested in this and knows how to do it that would be great.


File Attachment:

File Name: carouselgrid.lss
File Size:26 KB

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Attachments:
Last edit: 9 months 3 weeks ago by SurveyDennis.

Please Log in to join the conversation.

More
4 months 1 week ago #194173 by Andrea01
I have following code to show arrays subquestions one by one if screen width =< 760px. This works perfect for me.

But if screen width => 760px, all subquestions are shown in a table and fade out one by one when clicked. This only works if subquestions are clicked in descending order. Otherwise it does not work

For example, if last subquestion is clicked first, the whole table (question) disappears. Or if subquestion 2 is clicked first, it fades out and shows again after clicking subquestion 1.

Can anyone help me to fix this.
Thank you and best regards
Andrea





<script type="text/javascript" charset="utf-8">



$(document).on('ready pjax:scriptcomplete',function(){

$('tr.radio-list input[type="radio"]').bind('click', function () {
var thisArray = $(this).closest('table');
if($('input[type="radio"]:checked', thisArray).length == $('tr.radio-list', thisArray).length) {
$("#ls-button-submit").delay(1).click();
}
});

$(".list-dropdown select").change(function(){
if($(this).val()!="" && $(this).val()!="-oth-"){
$("#ls-button-submit").delay(1).click();
}
});

$('#ls-button-submit').hide();


var thisQuestion = $('#question{QID}');
if (window.matchMedia("(max-width: 760px)").matches) {
// Initially hide all but the first row
$('tr.answers-list:gt(0)', thisQuestion).hide();
}

// Listener on the radios
$('input:radio', thisQuestion).on('click', function(e) {
var thisRow = $(this).closest('tr');
var nextRow = $(thisRow).next('tr.answers-list');

if(nextRow.length > 0) {
// Hide this row and show the next
$(thisRow).fadeOut(300, function(e) {
$(nextRow).fadeIn(300);
});
}
else {
// No next row so hide the table
//$('table.ls-answers', thisQuestion).fadeOut(300);
$('table.ls-answers', thisQuestion).fadeOut(300);

}
});
});
</script>

Please Log in to join the conversation.

More
4 months 1 week ago #194176 by tpartner
I see some stuff in there that is not related to an expandable array.

Can you please explain exactly what you are trying to achieve?

I don't think you should try for different behaviours depending on the window width - what would happen if a respondent changes the browser window size while answering.

I also don't see any provisions for returning to the question.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Please Log in to join the conversation.

More
4 months 1 week ago #194178 by holch

I don't think you should try for different behaviours depending on the window width - what would happen if a respondent changes the browser window size while answering.

And I think even more relevant: Turns the tablet or mobile phone from vertical to horizontal...

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The following user(s) said Thank You: tpartner

Please Log in to join the conversation.

More
4 months 1 week ago #194179 by tpartner
Yep, that's what I was getting at. ;)

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Please Log in to join the conversation.

More
4 months 1 week ago #194181 by Andrea01
Hi TPartner!

Enclosed please find survey.

What I am trying to achive is that, if on small screens, respondents get subquestion one after the other. I want to prevent respondents have to scroll down and not see the question anymore.

On larger screens, the whole array should be displayed.

I don't want the respondents to return to the question.

Thank you
Andrea
Attachments:

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now