- Posts: 256
- Thank you received: 37
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Array Question with "Other" Answer
- first
- Offline
- Elite Member
Less
More
9 years 10 months ago #107753
by first
Survey Designer and Programmer
Replied by first on topic Array Question with "Other" Answer
I tried to write a little jquery code showing my thoughts . Please suggest how it looks.
Code:
<script> $(document).ready(function(){ $('button#movesubmitbtn').on('click',function(){ var $otherRow = $('div.array-flexible-row table.subquestions-list tr:has("input:text")'); for(var i=0;i<$otherRow.length;i++){ var checkedRadio = $otherRow.eq(i).find('td:not("td.noanswer-item")').find('input:checked').length; var boxVal = $.trim($otherRow.eq(i).find('input:text').val()); if(((checkedRadio != 0) && (boxVal == "")) || ((checkedRadio == 0) && (boxVal != ""))){ alert('Please review your answer in other specify row.'); return false; } break; } }); //clear other specify value on click of no answer $('td.noanswer-item').on('click',function(){ $(this).parent().find('input:text').val(''); }); //uncheck no answer on keydown inside otherspecify box. $('div.array-flexible-row table.subquestions-list input:text').on('keydown',function(){ $(this).parent().parent().find('td.noanswer-item input:radio').prop('checked',false); }); }); </script>
Survey Designer and Programmer
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
9 years 10 months ago #107792
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 Array Question with "Other" Answer
Okay, using the "No Answer" survey setting simplifies things a bit and to expand a little on your line of thinking...
- Add a class to the "Other" row for styling and manipulation
- Use question-specific selectors
- Use keyup and change events to on the text inputs (in case someone pastes)
- Prevent the click event on the submit button from firing more than once if there are multiple instances of these questions
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Identify the questions var thisQuestion = $('#question'+{QID}+''); var nextQuestion = $(thisQuestion).nextAll('.text-short:eq(0)'); // Hide the short-text question $(nextQuestion).hide(); // Move the hidden text input into the array $('th.answertext:last', thisQuestion).append($('input[type="text"]', nextQuestion)).closest('tr').addClass('otherRow'); // Some styling... $('input[type="text"]', thisQuestion).css({ 'width': '50%' }); // Handle the "Other" radios $('input[type="text"]', thisQuestion).on('keyup change',function(event){ event.stopPropagation(); if($.trim($(this).val()) == '') { $('.otherRow input:radio[value!=""]', thisQuestion).prop('checked',false); $('.otherRow input:radio[value=""]', thisQuestion).click(); } else { $('.otherRow input:radio[value=""]', thisQuestion).prop('checked',false); } }); // Handle the "Other" text input $('.otherRow input.radio', thisQuestion).on('click',function(event){ if($(this).attr('value') == '') { $('.otherRow input[type="text"]', thisQuestion).val(''); } }); // Validate the "Other" text input(s) on submit if($('#movenextbtn, #movesubmitbtn').attr('data-inserted-other') != 'true') { // We're only doing this once on this page $('#movenextbtn, #movesubmitbtn').attr('data-inserted-other', 'true').on('click.insertedOther', function (event) { var otherError = 0; $('.array-flexible-row .otherRow').each(function(i) { if(($('input:radio[value!=""]:checked', this).length > 0 && $('input[type="text"]', this).val() == '') || ($('input:radio[value!=""]:checked', this).length == 0 && $('input[type="text"]', this).val() != '')) { otherError = 1; } }); if(otherError == 1) { alert('Please review your answer in the "Other" row(s).'); return false; } }); } }); </script>
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: jake1729
The topic has been locked.
- jajas
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 40
- Thank you received: 0
9 years 10 months ago #107841
by jajas
Replied by jajas on topic Array Question with "Other" Answer
Dear LS Team,
To make it simple, how about make enhancement in limesurvey,
for array question add Option for Other answer like single or multiple question type?
i believe LS team can do that.
To make it simple, how about make enhancement in limesurvey,
for array question add Option for Other answer like single or multiple question type?
i believe LS team can do that.
The topic has been locked.
- jajas
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 40
- Thank you received: 0
9 years 10 months ago #107844
by jajas
Replied by jajas on topic Array Question with "Other" Answer
How about array question like attached image.
any idea?
Need suggestion please...
any idea?
Need suggestion please...
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
9 years 10 months ago - 9 years 10 months ago #107848
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 Array Question with "Other" Answer
You can submit a feature request - www.limesurvey.org/en/community-services/feature-requests .To make it simple, how about make enhancement in limesurvey,
for array question add Option for Other answer like single or multiple question type?
I think you have enough information in this thread to accomplish that.How about array question like attached image.
.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 9 years 10 months ago by tpartner.
The topic has been locked.
- jake1729
- Offline
- New Member
Less
More
- Posts: 8
- Thank you received: 0
9 years 2 months ago #116018
by jake1729
Replied by jake1729 on topic Array Question with "Other" Answer
Thank you, this is great. How would you expand this so that you could have multiple "Other" inputs (say 3)?
I really appreciate your help.
I really appreciate your help.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
9 years 2 months ago - 9 years 2 months ago #116021
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 Array Question with "Other" Answer
Try this:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Identify the questions var thisQuestion = $('#question'+{QID}+''); var nextQuestion1 = $(thisQuestion).nextAll('.text-short:eq(0)'); var nextQuestion2 = $(thisQuestion).nextAll('.text-short:eq(1)'); var nextQuestion3 = $(thisQuestion).nextAll('.text-short:eq(2)'); var nextQuestions = $(nextQuestion1).add(nextQuestion2).add(nextQuestion3); var nextLength = nextQuestions.length; var sqLength = ('tr.answers-list', thisQuestion).length; // Hide the short-text questions $(nextQuestions).hide(); // Move the hidden text inputs into the array for (i = 0; i < nextLength; i++) { var workingIndex = (sqLength - 1) - (nextLength - i); var nextQ = nextQuestions[i]; $('th.answertext:eq('+workingIndex+')', thisQuestion).append($('input[type="text"]', nextQ)).closest('tr').addClass('otherRow'); } // Some styling... $('input[type="text"]', thisQuestion).css({ 'width': '50%' }); // Handle the "Other" radios $('input[type="text"]', thisQuestion).on('keyup change',function(event){ event.stopPropagation(); var thisRow = $(this).closest('tr.answers-list'); if($.trim($(this).val()) == '') { $('input:radio[value!=""]', thisRow).prop('checked',false); $('input:radio[value=""]', thisRow).click(); } else { $('input:radio[value=""]', thisRow).prop('checked',false); } }); // Handle the "Other" text inputs $('.otherRow input.radio', thisQuestion).on('click',function(event){ var thisRow = $(this).closest('tr.answers-list'); if($(this).attr('value') == '') { $('input[type="text"]', thisRow).val(''); } }); // Validate the "Other" text inputs on submit if($('#movenextbtn, #movesubmitbtn').attr('data-inserted-other') != 'true') { // We're only doing this once on this page $('#movenextbtn, #movesubmitbtn').attr('data-inserted-other', 'true').on('click.insertedOther', function (event) { var otherError = 0; $('.array-flexible-row .otherRow').each(function(i) { if(($('input:radio[value!=""]:checked', this).length > 0 && $('input[type="text"]', this).val() == '') || ($('input:radio[value!=""]:checked', this).length == 0 && $('input[type="text"]', this).val() != '')) { otherError = 1; } }); if(otherError == 1) { alert('Please review your answer in the "Other" row(s).'); return false; } }); } }); </script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 9 years 2 months ago by tpartner.
The topic has been locked.
- first
- Offline
- Elite Member
Less
More
- Posts: 256
- Thank you received: 37
9 years 1 month ago - 9 years 1 month ago #116830
by first
Survey Designer and Programmer
Replied by first on topic Array Question with "Other" Answer
Hi tpartner,
It would great if we can do one more enhancement in this code.
This code works perfect when Array question in non-mandatory but if I make Array question mandatory from question setting then "OtherSpecify" row also forced to answer that is usually not desired. My plan is to keep Array question non-mandatory through settings and update javascript code to force all rows except other specify. Also the UI on error should also be similar default error ie append an error message "This question is mandatory. Please complete all parts." below question text and red highlight the labels of rows that are not answered.
Can you please help us ...
Thanks
It would great if we can do one more enhancement in this code.
This code works perfect when Array question in non-mandatory but if I make Array question mandatory from question setting then "OtherSpecify" row also forced to answer that is usually not desired. My plan is to keep Array question non-mandatory through settings and update javascript code to force all rows except other specify. Also the UI on error should also be similar default error ie append an error message "This question is mandatory. Please complete all parts." below question text and red highlight the labels of rows that are not answered.
Can you please help us ...
Thanks
Survey Designer and Programmer
Last edit: 9 years 1 month ago by first. Reason: typo
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
9 years 1 month ago - 9 years 1 month ago #116839
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 Array Question with "Other" Answer
The way that I would handle that would be to...
1) Keep the mandatory setting on the question.
2) Add an "N/A" answer to the y-scale.
3) Add the following new script that will:
- Insert the "Other" input as previously
- Hide the "N/A" column
- Click the hidden "N/A" radio by default
- If text is entered in "Other", the hidden "N/A" is unchecked
- If all text is removed fromn "Other", the hidden "N/A" is checked
Now the hidden "N/A" can satisfy the mandatory requirement if nothing is entered in "Other".
Note that this script will not work on the same page as previous scripts from this thread without modification to those previous scripts.
1) Keep the mandatory setting on the question.
2) Add an "N/A" answer to the y-scale.
3) Add the following new script that will:
- Insert the "Other" input as previously
- Hide the "N/A" column
- Click the hidden "N/A" radio by default
- If text is entered in "Other", the hidden "N/A" is unchecked
- If all text is removed fromn "Other", the hidden "N/A" is checked
Now the hidden "N/A" can satisfy the mandatory requirement if nothing is entered in "Other".
Note that this script will not work on the same page as previous scripts from this thread without modification to those previous scripts.
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Identify the questions var thisQuestion = $('#question'+{QID}+''); var nextQuestion = $(thisQuestion).nextAll('.text-short:eq(0)'); // Hide the short-text question $(nextQuestion).hide(); // Add a class to the "N/A" column $('table.subquestions-list thead tr th:last', thisQuestion).addClass('na-column'); $('table.subquestions-list tbody tr', thisQuestion).each(function(i) { $('td:last', this).addClass('na-column'); }); // Hide the "N/A" column $('.na-column', thisQuestion).hide(); var ansColWidth = Number($('.col-answers', thisQuestion).attr('width').replace(/%/, '')); var newColWidth = (100-ansColWidth)/($('col.odd, col.even', thisQuestion).length-1); $('col.odd, col.even', thisQuestion).attr('width', newColWidth+'%'); // Move the hidden text input into the array $('th.answertext:last', thisQuestion).append($('input[type="text"]', nextQuestion)).closest('tr').addClass('otherRow'); // Initial "N/A" radio setting if($('.otherRow input:radio:checked', thisQuestion).length == 0) { $('.otherRow .na-column input:radio', thisQuestion).trigger('click'); } // Some styling... $('input[type="text"]', thisQuestion).css({ 'width': '50%' }); // Handle the "Other" radios $('input[type="text"]', thisQuestion).on('keyup change',function(event){ event.stopPropagation(); if($.trim($(this).val()) == '') { $('.otherRow input:radio', thisQuestion).prop('checked',false); $('.otherRow .na-column input:radio', thisQuestion).click(); } else { $('.otherRow .na-column input:radio', thisQuestion).prop('checked',false); } }); }); </script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 9 years 1 month ago by tpartner.
The following user(s) said Thank You: zeitweise
The topic has been locked.
- jelo
- Offline
- Platinum Member
Less
More
- Posts: 5070
- Thank you received: 1263
8 years 9 months ago #121021
by jelo
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Replied by jelo on topic Array Question with "Other" Answer
Was the attachment revoked or is that a problem from the new website (which was introduced today)?tpartner wrote:
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
- jelo
- Offline
- Platinum Member
Less
More
- Posts: 5070
- Thank you received: 1263
8 years 9 months ago #121220
by jelo
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Replied by jelo on topic Array Question with "Other" Answer
Is there an elegant way to keep the others fields at the bottom when applying the randomize option?
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
8 years 9 months ago #121265
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 Array Question with "Other" Answer
To do that, you would need to have the JS move the "Other" sub-question to the end of the array before inserting the text input.
So, for example, if your "Other" sub-question has a code of "99", something like this:
So, for example, if your "Other" sub-question has a code of "99", something like this:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Identify the questions var thisQuestion = $('#question'+{QID}+''); var nextQuestion = $(thisQuestion).nextAll('.text-short:eq(0)'); // Hide the short-text question $(nextQuestion).hide(); // Move the "Other" row to the end (in case of randomization) $('table.subquestions-list', thisQuestion).append($('tr.answers-list[id$="X'+{QID}+'99"]')); // Add a class to the "N/A" column $('table.subquestions-list thead tr th:last', thisQuestion).addClass('na-column'); $('table.subquestions-list tbody tr', thisQuestion).each(function(i) { $('td:last', this).addClass('na-column'); }); // Hide the "N/A" column $('.na-column', thisQuestion).hide(); var ansColWidth = Number($('.col-answers', thisQuestion).attr('width').replace(/%/, '')); var newColWidth = (100-ansColWidth)/($('col.odd, col.even', thisQuestion).length-1); $('col.odd, col.even', thisQuestion).attr('width', newColWidth+'%'); // Move the hidden text input into the array $('th.answertext:last', thisQuestion).append($('input[type="text"]', nextQuestion)).closest('tr').addClass('otherRow'); // Initial "N/A" radio setting if($('.otherRow input:radio:checked', thisQuestion).length == 0) { $('.otherRow .na-column input:radio', thisQuestion).trigger('click'); } // Some styling... $('input[type="text"]', thisQuestion).css({ 'width': '50%' }); // Handle the "Other" radios $('input[type="text"]', thisQuestion).on('keyup change',function(event){ event.stopPropagation(); if($.trim($(this).val()) == '') { $('.otherRow input:radio', thisQuestion).prop('checked',false); $('.otherRow .na-column input:radio', thisQuestion).click(); } else { $('.otherRow .na-column input:radio', thisQuestion).prop('checked',false); } }); }); </script>
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: first
The topic has been locked.