- Posts: 72
- Thank you received: 10
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Expandable Array - Dynamic Grid
- SurveyDennis
- Topic Author
- Offline
- Senior Member
Less
More
4 years 9 months ago #186276
by SurveyDennis
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Expandable Array - Dynamic Grid was created 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?
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?
Code:
<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
The topic has been locked.
- SurveyDennis
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
- Thank you received: 10
4 years 9 months ago #186279
by SurveyDennis
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Replied by SurveyDennis on topic Expandable Array - Dynamic Grid
Just answering my own question - if anyone is looking for the same.
To get this working in LS3 change the following:
to
and
to
To get this working in LS3 change the following:
Code:
var arrayRow = '#question' + qID + ' table.question tbody tr';
Code:
var arrayRow = '#question' + qID + ' table.ls-answers tbody tr';
and
Code:
$( '#question' + qID + ' table.question tbody td' ).click(function (event) {
Code:
$( '#question' + qID + ' table.ls-answers tbody td' ).click(function (event) {
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
4 years 9 months ago #186281
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 Expandable Array - Dynamic Grid
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.
The topic has been locked.
- SurveyDennis
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
- Thank you received: 10
4 years 9 months ago - 4 years 9 months ago #186282
by SurveyDennis
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Replied by SurveyDennis on topic Expandable Array - Dynamic Grid
Actually I have one question to the above.
I am adding an extra line to hide the answered row:
}
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:
But that's not correct, I have a feeling this can be done much easier. Any idea?
I am adding an extra line to hide the answered row:
Code:
$(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:
Code:
$(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?
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Last edit: 4 years 9 months ago by SurveyDennis. Reason: Adding the lsq
The topic has been locked.
- SurveyDennis
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
- Thank you received: 10
4 years 9 months ago #186283
by SurveyDennis
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Replied by SurveyDennis on topic Expandable Array - Dynamic Grid
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?
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
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
4 years 9 months ago #186284
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 Expandable Array - Dynamic Grid
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.
The topic has been locked.
- SurveyDennis
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
- Thank you received: 10
4 years 9 months ago - 4 years 9 months ago #186286
by SurveyDennis
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Replied by SurveyDennis on topic Expandable Array - Dynamic Grid
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)
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
Last edit: 4 years 9 months ago by SurveyDennis.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
4 years 9 months ago #186287
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 Expandable Array - Dynamic Grid
In that case, I think you want something like this:
Sample survey attached:
Code:
<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:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: SurveyDennis
The topic has been locked.
- SurveyDennis
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
- Thank you received: 10
4 years 9 months ago #186288
by SurveyDennis
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Replied by SurveyDennis on topic Expandable Array - Dynamic Grid
Like always - many thanks!
When I have the layout ready for the dynamic scrolling / carousel grid question I make sure to share this.
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
The topic has been locked.
- SurveyDennis
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
- Thank you received: 10
4 years 7 months ago - 4 years 7 months ago #188531
by SurveyDennis
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Replied by SurveyDennis on topic Expandable Array - Dynamic Grid (carousel/scrolling)
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.
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.
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Last edit: 4 years 7 months ago by SurveyDennis.
The topic has been locked.
- Andrea01
- Offline
- Senior Member
Less
More
- Posts: 64
- Thank you received: 0
4 years 2 months ago #194173
by Andrea01
Replied by Andrea01 on topic Expandable Array - Dynamic Grid
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>
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>
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
4 years 2 months ago #194176
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 Expandable Array - Dynamic Grid
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.
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.
The topic has been locked.