Welcome to the LimeSurvey Community Forum

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

Expandable Array - Dynamic Grid

  • SurveyDennis
  • SurveyDennis's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
4 years 8 months ago #186276 by SurveyDennis
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?
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
  • SurveyDennis's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
4 years 8 months ago #186279 by SurveyDennis
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:
Code:
var arrayRow = '#question' + qID + ' table.question tbody tr';
to
Code:
var arrayRow = '#question' + qID + ' table.ls-answers tbody tr';


and
Code:
$( '#question' + qID + ' table.question tbody td' ).click(function (event) {
to
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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 8 months ago #186281 by tpartner
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
  • SurveyDennis's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
4 years 8 months ago - 4 years 8 months ago #186282 by SurveyDennis
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:

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?

File Attachment:

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

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Last edit: 4 years 8 months ago by SurveyDennis. Reason: Adding the lsq
The topic has been locked.
  • SurveyDennis
  • SurveyDennis's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
4 years 8 months ago #186283 by SurveyDennis
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?

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 8 months ago #186284 by tpartner
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
  • SurveyDennis's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
4 years 8 months ago - 4 years 8 months ago #186286 by SurveyDennis
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)


Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Last edit: 4 years 8 months ago by SurveyDennis.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 8 months ago #186287 by tpartner
Replied by tpartner on topic Expandable Array - Dynamic Grid
In that case, I think you want something like this:

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:

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.
The following user(s) said Thank You: SurveyDennis
The topic has been locked.
  • SurveyDennis
  • SurveyDennis's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
4 years 8 months ago #186288 by SurveyDennis
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.

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
The topic has been locked.
  • SurveyDennis
  • SurveyDennis's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
4 years 6 months ago - 4 years 6 months ago #188531 by SurveyDennis
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.


File Attachment:

File Name: carouselgrid.lss
File Size:26 KB

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Last edit: 4 years 6 months ago by SurveyDennis.
The topic has been locked.
More
4 years 1 month 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>
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 1 month ago #194176 by tpartner
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.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose