Expandable Array - Dynamic Grid

Plus d'informations
il y a 8 mois 4 semaines #186276 par 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

Connexion ou Créer un compte pour participer à la conversation.

LimeSurvey Partners
Plus d'informations
il y a 8 mois 4 semaines #186279 par 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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 8 mois 4 semaines #186281 par tpartner
Réponse de tpartner sur le sujet 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.
Official LimeSurvey Partner - partnersurveys.com

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 8 mois 4 semaines - il y a 8 mois 4 semaines #186282 par 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?

Fichier attaché :

Nom du fichier : limesurvey..._181.lsq
Taille du ficher :6 ko

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Pièces jointes :
Dernière édition: il y a 8 mois 4 semaines par SurveyDennis. Raison: Adding the lsq

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 8 mois 4 semaines #186283 par 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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 8 mois 4 semaines #186284 par tpartner
Réponse de tpartner sur le sujet 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.
Official LimeSurvey Partner - partnersurveys.com

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 8 mois 4 semaines - il y a 8 mois 4 semaines #186286 par 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
Pièces jointes :
Dernière édition: il y a 8 mois 4 semaines par SurveyDennis.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 8 mois 4 semaines #186287 par tpartner
Réponse de tpartner sur le sujet Expandable Array - Dynamic Grid
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:

Fichier attaché :

Nom du fichier : limesurvey...7-04.lss
Taille du ficher :20 ko

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Pièces jointes :
Les utilisateur(s) suivant ont remercié: SurveyDennis

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 8 mois 4 semaines #186288 par 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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 6 mois 3 semaines - il y a 6 mois 3 semaines #188531 par 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.


Fichier attaché :

Nom du fichier : carouselgrid.lss
Taille du ficher :26 ko

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
Pièces jointes :
Dernière édition: il y a 6 mois 3 semaines par SurveyDennis.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 2 semaines #194173 par Andrea01
Réponse de Andrea01 sur le sujet 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>

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 2 semaines #194176 par tpartner
Réponse de tpartner sur le sujet 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.
Official LimeSurvey Partner - partnersurveys.com

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 2 semaines #194178 par holch
Réponse de holch sur le sujet Expandable Array - Dynamic Grid

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'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
Les utilisateur(s) suivant ont remercié: tpartner

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 2 semaines #194179 par tpartner
Réponse de tpartner sur le sujet Expandable Array - Dynamic Grid
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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 2 semaines #194181 par Andrea01
Réponse de Andrea01 sur le sujet Expandable Array - Dynamic Grid
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
Pièces jointes :

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!