Expandable Array - Dynamic Grid

More
4 months 2 weeks ago #194186 by tpartner
I ask again, what would happen if a respondent changes the browser window size while answering?

(as holch indicates, that could be a simple as rotating a tablet orientation)

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 2 weeks ago #194187 by Andrea01
Changing window size or rotating device would not be a problem if the script would work properly. Reaction is according to responsive design.
thanks, Andrea

Please Log in to join the conversation.

More
4 months 2 weeks ago #194188 by tpartner

Reaction is according to responsive design.

This would require significantly more code.

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 2 weeks ago #194193 by Andrea01
Responsive Code as per Template FRUITY,
LS 3.22.4+200212.

Please Log in to join the conversation.

More
1 month 2 weeks ago #199793 by oksana
Hi guys,

I have an two issues on expandable array. That script doesn't work if i use filter or equatation relevance for subquestions of Array. You can find lss of the example attached. THere are 3 questions there: Q3 - expandable array works fine, FILTERquest - answers should be shown on other screen(array) and Q3with filter - that doesn't work.

What is the reason and how can it be fixed. I used that type of question a lot in 2.05 and it work fine even with filtered questions.

And the second question. When i used this script in 2.05 i added a small part to script that checks is all the subquestions checked and than goes to the movenextbutton. But in 3.6 it doesn't work. Can someone check?

this code checks if it is last 'tr' in the table and clicks NEXT button
if ($(this).parent().parent().find('tr').last()[0] === $(this).parents('tr:eq(0)')[0]) {
setTimeout(function(){
$('#movenextbtn, #movesubmitbtn').trigger('click');
}, 200);
}
}
});

Thanks in advance.
Attachments:

Please Log in to join the conversation.

More
1 month 2 weeks ago #199811 by tpartner
There is no version 3.6. What version are you using?

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
1 month 2 weeks ago - 1 month 2 weeks ago #199812 by oksana
On the footer of the page it's pointed 3.6.3
Attachments:
Last edit: 1 month 2 weeks ago by oksana.

Please Log in to join the conversation.

More
1 month 2 weeks ago - 1 month 2 weeks ago #199817 by tpartner
I don't like the idea of hiding the rows as they are answered without any indication of the answer because it gives no opportunity to fix mistaken clicks.

Having said that, this script works in 3.22.x:

<script type="text/javascript">
 
	$(document).on('ready pjax:scriptcomplete',function(){
 
		// A function to show subsequent rows of an array as options are checked
		function expandingArray(qID) {
			var thisQuestion = $('#question'+qID);
 
			$('table.ls-answers', thisQuestion).hide();
 
			// Delay to let the relevence be set
			setTimeout(function(){
				// Build an array of the question rows
				var arrayRows = $('table.ls-answers tbody tr.radio-list:not(.ls-irrelevant)', thisQuestion);
 
				// Initially hide all rows unless an input was previously checked
				$(arrayRows).addClass('relevant-row').each(function(i) {
 
					if ($('input:radio:checked', this).length != 0) { 
						$(this).attr('data-name', 'clickedRow');
					}
					else {
						$(this).attr('data-name', 'hidden').hide();
					}
				});
 
				// Now show the first hidden row
				addRow();
 
				$('table.ls-answers', thisQuestion).show();
 
				// Add another row when an option is checked for the first time
				$( 'td.answer-item input:radio', thisQuestion).on('click', function (event) {
					var thisRow = $(this).closest('tr');
 
					if ($(thisRow).attr('data-name') != 'clickedRow') {
						addRow();
						$(thisRow).attr('data-name', 'clickedRow');
						// if you also want to hide the answered row:
						$(thisRow).hide();
					}
 
					// The original function of the click event
					checkconditions(this.value, this.name, this.type);
 
 
					if ($(thisRow).is('#question'+qID+' .relevant-row:last')) {
						setTimeout(function(){
							$(thisQuestion).hide();
							$('#ls-button-submit').trigger('click');
						}, 200);
					}
 
 
				});
 
			}, 500);
 
 
			// Function to add a row
			function addRow() {
				$('.relevant-row[data-name="hidden"]:first' ).attr('data-name', 'visible').show();
 
				// Now, scroll down
				$("html, body").animate({ scrollTop: $(document).height() }, 1000);
			}
		}
 
		// Call the function with a question ID
		expandingArray({QID});
 
	});
</script>

File Attachment:

File Name: limesurvey...5789.lss
File Size:30 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:
Last edit: 1 month 2 weeks ago by tpartner.

Please Log in to join the conversation.

More
3 weeks 4 days ago #200951 by Andrea01
Hi Tony,

thanks for the script. Finally I had time to have a look at it and it works fine with Matrix filter for subquestions.

However, there is one big problem: If radio button of a subquestion is clicked, you can't see that the radio button is checked. It forwards immediately to the next subquestion. Respondents should see their answer for 500ms before next subquestion is shown.

Can you please help?

Thanks and best regards
Andrea

Please Log in to join the conversation.

More
3 weeks 4 days ago #200956 by Joffm
Hi,
with my not existing knowledge of javascript I tried something with success:

I changed
if ($(thisRow).attr('data-name') != 'clickedRow') {
						addRow();
						$(thisRow).attr('data-name', 'clickedRow');
						// if you also want to hide the answered row:
						$(thisRow).hide();
					}
to
if ($(thisRow).attr('data-name') != 'clickedRow') {
						$(thisRow).attr('data-name', 'clickedRow');
						// if you also want to hide the answered row:
						$(thisRow).fadeOut(1000);
						setTimeout(function(){
						  addRow();
						}, 1000);
					}
 

Now there is a fade-out and fade-in.
I set to 1000ms. You can change to your needs.

Very probably Tony will have some improvements.

Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
3 weeks 4 days ago #200958 by tpartner

However, there is one big problem: If radio button of a subquestion is clicked, you can't see that the radio button is checked. It forwards immediately to the next subquestion. Respondents should see their answer for 500ms before next subquestion is shown.

Please read the thread contents and look into the .lss files attached. That behaviour is not a "big problem", it is what oksana wanted. That's why I said "I don't like the idea of hiding the rows as they are answered without any indication of the answer because it gives no opportunity to fix mistaken clicks.".

Simply comment out:
$(thisRow).hide();

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
3 weeks 4 days ago #200965 by Joffm
Well, nor do I like this behaviour.

Respondents should see their answer for 500ms before next subquestion is shown.

I understood this, that she was concerned about the fact that the subquestion is hidden without visible result of the click.
Therefore she would like to have a small delay.

You see, in your survey the result of the click is not visible, at once the next row is displayed.

Maybe I misunderstood.

Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
3 weeks 4 days ago #200985 by Andrea01
I just added "1000" to "hide" and "show". Now it works fine for me.
That’s all I can do with my poor js-skills.

I am aware that it is no perfect solution, because respondents cannot fix mistaken clicks.
But otherwise they have to scroll down on the smartphone to answer the items and would not see the question any more …

A much better solution would be a fixed question container. Respondents could scroll down an answer the items and would always see the question.


The code I use now:

if ($(thisRow).attr('data-name') != 'clickedRow') {
addRow();
$(thisRow).attr('data-name', 'clickedRow');
// if you also want to hide the answered row:
$(thisRow).hide(1000);
}

// Function to add a row
function addRow() {
$('.relevant-row[data-name="hidden"]:first' ).attr('data-name', 'visible').show(1000);

Best regards,
Andrea

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now