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:


www.limesurvey.org/manual/Workarounds:_M...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?

Just answering my own question - if anyone is looking for the same.

To get this working in LS3 change the following:
to

and to

Why not use sub-question relevance (which was not available when that workaround was written)?

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?

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 don't understand your comment about hiding columns. Can you please explain the complete question behaviour?

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)

In that case, I think you want something like this:


Sample survey attached:

Like always - many thanks!
When I have the layout ready for the dynamic scrolling / carousel grid question I make sure to share this.

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.

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>

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.

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...

Yep, that's what I was getting at.

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