- Posts: 222
- Thank you received: 10
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Adding textbox in basic array
- krosser
- Topic Author
- Offline
- Elite Member
Less
More
6 years 2 weeks ago #167112
by krosser
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Replied by krosser on topic Adding textbox in basic array
Hey Tony,
Can you please help with two other variations of such a question, but when the "Other" textboxes are located horizontally?
I have made sample questions to illustrate it. I have a bunch of questions like this in the survey...
The difference between the two is the number of columns, which I suppose would need different JS code, correct?
I would be happy if you could help out!
Can you please help with two other variations of such a question, but when the "Other" textboxes are located horizontally?
I have made sample questions to illustrate it. I have a bunch of questions like this in the survey...
The difference between the two is the number of columns, which I suppose would need different JS code, correct?
I would be happy if you could help out!
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Attachments:
The topic has been locked.
- krosser
- Topic Author
- Offline
- Elite Member
Less
More
- Posts: 222
- Thank you received: 10
6 years 2 weeks ago - 6 years 2 weeks ago #167168
by krosser
Hi Tony,
When I use this workaround, then other questions with multiple short text are hidden in the same question group and I can't make them visible.
It happens in both cases - when I add a JS code to a single array question and when I use a jQuery plugin css.
Is it possible to avoid this in the code somehow?
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Replied by krosser on topic Adding textbox in basic array
tpartner wrote:
In that case, you should centralize the script with a jQuery plugin.I've got a bunch of questions like this...
1) Assign a CSS class "with-array-comments" to all of the array questions where you want the text inputs inserted.
2) Add the following to the end of your theme custom.js file:
Code:$(document).on('ready pjax:scriptcomplete',function(){ // Apply the plugin to specific arrays $('.array-flexible-row.with-array-comments').arrayComments(); }); // A jQuery plugin insert comments into radio arrays (function( $ ){ $.fn.arrayComments = function(options) { var opts = $.extend( { }, options); return this.each(function() { // Identify the questions var thisQuestion = $(this); var q1ID = $(thisQuestion).attr('id').replace(/question/, ''); var thisQuestion = $('#question'+q1ID); var nextQuestion = thisQuestion.nextAll('.multiple-short-txt'); var q2ID = $(nextQuestion).attr('id').replace(/question/, ''); //Hide the multiple-short-text nextQuestion.hide(); // Move the text inputs $('tr.answers-list', thisQuestion).each(function(i) { var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1]; $('td.answer-item:last input[type="radio"]', this).css({ 'position': 'absolute', 'left': '-9999em' }); $('td.answer-item:last', this).removeClass('radio-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion)); }); // Listeners on the text inputs $('input[type="text"]', thisQuestion).on('keyup change', function(e) { var thisRadio = $(this).closest('td').find('input[type="radio"]'); var thisRadioVal = thisRadio.val(); if($.trim($(this).val()) != '') { $(thisRadio).trigger('click'); } else { $(thisRadio).prop('checked', false); thisRadioVal = ''; } // Reset Expression manager checkconditions(thisRadioVal, $(thisRadio).attr('name'), 'radio', 'click'); }); // Listeners on the radios $('input[type="radio"]', thisQuestion).on('click', function(e) { if(!$(this).closest('td').hasClass('inserted-text-item')) { $(this).closest('tr').find('input[type="text"]').val(''); } }); }); }; })( jQuery );
Hi Tony,
When I use this workaround, then other questions with multiple short text are hidden in the same question group and I can't make them visible.
It happens in both cases - when I add a JS code to a single array question and when I use a jQuery plugin css.
Is it possible to avoid this in the code somehow?
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Last edit: 6 years 2 weeks ago by krosser. Reason: To specify that it happens in the same question group
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
6 years 2 weeks ago #167170
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 Adding textbox in basic array
Sorry, typo.
Change this line:
To this:
Change this line:
Code:
var nextQuestion = thisQuestion.nextAll('.multiple-short-txt');
To this:
Code:
var nextQuestion = thisQuestion.nextAll('.multiple-short-txt:eq(0)');
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- krosser
- Topic Author
- Offline
- Elite Member
Less
More
- Posts: 222
- Thank you received: 10
6 years 2 weeks ago #167171
by krosser
No problem. Many thanks for getting back to this, Tony!
Can you please also take a look at the situation which I described in a previous post, when textboxes are located horizontally? When you have time, man.
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Replied by krosser on topic Adding textbox in basic array
tpartner wrote: Sorry, typo.
Change this line:Code:var nextQuestion = thisQuestion.nextAll('.multiple-short-txt');
To this:Code:var nextQuestion = thisQuestion.nextAll('.multiple-short-txt:eq(0)');
No problem. Many thanks for getting back to this, Tony!
Can you please also take a look at the situation which I described in a previous post, when textboxes are located horizontally? When you have time, man.
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
- RitaShen
- Offline
- Premium Member
Less
More
- Posts: 114
- Thank you received: 1
6 years 2 weeks ago - 6 years 2 weeks ago #167224
by RitaShen
Replied by RitaShen on topic Adding textbox in basic array
Attachments:
Last edit: 6 years 2 weeks ago by RitaShen.
The topic has been locked.
- Joffm
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12942
- Thank you received: 3979
6 years 2 weeks ago #167249
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Adding textbox in basic array
Hi, Rita,
I have another solution for you.
Of course it is an adaption from Tony:
Of course you can change the css at the end of the script .
Best regards
Joffm
I have another solution for you.
Of course it is an adaption from Tony:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ // Identify this question var qID = {QID}; var thisQuestion = $('#question'+qID); // Add some classes $(thisQuestion).addClass('with-exclusive-items'); $('td.answer-item', thisQuestion).addClass('non-exclusive-item'); // Loop through the last-column cells $('td.answer-item:last-child', thisQuestion).each(function(i) { varThisID = $('input[type="text"]', this).attr('id'); // Add a class $(this).removeClass('non-exclusive-item').addClass('exclusive-item'); // Hide the text input $('td.answer-item:last-child input[type="text"]', thisQuestion).hide(); // Insert checkboxes $(this).append('<div class="checkbox">\ <input class="checkbox" name="" id="'+varThisID+'_cbox" value="N/A" type="checkbox">\ <label for="'+varThisID+'_cbox" class="answertext inserted-label"></label>\ </div>'); }); // Listener on the checkboxes $('.exclusive-item input[type="checkbox"]', thisQuestion).on('change', function(e) { var thisRow = $(this).closest('tr.subquestion-list'); var thisCell = $(this).closest('td.answer-item'); if($(this).is(':checked')) { $('input[type="text"]', thisCell).val('1'); $('.non-exclusive-item input[type="text"]', thisRow).val(''); } else { $('input[type="text"]', thisCell).val(''); } // Fire Expression Manager $('input[type="text"]', thisRow).each(function(i) { $(this).trigger('keyup'); }); }); // Listener on the text inputs $('.non-exclusive-item input[type="text"]', thisQuestion).on('keyup change', function(e) { var thisRow = $(this).closest('tr.subquestion-list'); if($.trim($(this).val()) != '') { $('.exclusive-item input[type="checkbox"]', thisRow).prop('checked',false); $('.exclusive-item input[type="text"]', thisRow).val(''); } // Fire Expression Manager $('.exclusive-item input[type="text"]', thisRow).trigger('keyup'); }); // Insert some styles (these could be in template.css) // For the LS 2.67 default template var newStyles = '.with-exclusive-items thead th.answertext {\ text-align: center;\ }\ .with-exclusive-items .exclusive-item {\ text-align: center;\ vertical-align: middle;\ cursor: pointer;\ }\ .with-exclusive-items .checkbox {\ padding-left: 0;\ }\ .with-exclusive-items .inserted-label {\ width: 24px;\ min-height: 24px;\ padding: 0;\ }\ .with-exclusive-items .inserted-label::before {\ margin: 4px 0 0 4px;\ }\ .with-exclusive-items .inserted-label::after {\ margin: 4px 0 0 4px;\ }'; $('head').append('<style type="text/css">'+newStyles+'</style>'); }); </script>
Of course you can change the css at the end of the script .
Best regards
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
The following user(s) said Thank You: RitaShen
The topic has been locked.
- RitaShen
- Offline
- Premium Member
Less
More
- Posts: 114
- Thank you received: 1
6 years 2 weeks ago #167251
by RitaShen
Replied by RitaShen on topic Adding textbox in basic array
is the question type are the same as array and multiple short text?
The topic has been locked.
- Joffm
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12942
- Thank you received: 3979
6 years 2 weeks ago #167253
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Adding textbox in basic array
The question type is array(text)
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: RitaShen
The topic has been locked.
- RitaShen
- Offline
- Premium Member
Less
More
- Posts: 114
- Thank you received: 1
6 years 2 weeks ago #167254
by RitaShen
Replied by RitaShen on topic Adding textbox in basic array
I appreciate your kind assistance
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
6 years 2 weeks ago - 6 years 2 weeks ago #167283
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 Adding textbox in basic array
Can you attach a small sample survey?Can you please help with two other variations of such a question, but when the "Other" textboxes are located horizontally?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 6 years 2 weeks ago by tpartner.
The topic has been locked.
- krosser
- Topic Author
- Offline
- Elite Member
Less
More
- Posts: 222
- Thank you received: 10
6 years 1 week ago #167535
by krosser
Hi Tony! Is it possible to modify the code so that when you type in a textbox it excludes all others? (like it is in this workaround )
Many thanks!
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Replied by krosser on topic Adding textbox in basic array
tpartner wrote: For array-numbers-checkboxes...
Place a multiple-short-text question directly after the array. This question should have exactly the same sub-questions as the array y-scale.
Give the array question a CSS class "with-checkbox-array-comments".
Add this to custom.js:
Code:$(document).on('ready pjax:scriptcomplete',function(){ // Apply the plugin to specific arrays $('.array-multi-flexi.with-checkbox-array-comments').cbArrayComments(); }); // A jQuery plugin insert comments into checkbox arrays (function( $ ){ $.fn.cbArrayComments = function(options) { var opts = $.extend( { }, options); return this.each(function() { // Identify the questions var thisQuestion = $(this); var q1ID = $(thisQuestion).attr('id').replace(/question/, ''); var thisQuestion = $('#question'+q1ID); var nextQuestion = thisQuestion.nextAll('.multiple-short-txt:eq(0)'); var q2ID = $(nextQuestion).attr('id').replace(/question/, ''); //Hide the multiple-short-text nextQuestion.hide(); // Move the text inputs $('tr.subquestion-list', thisQuestion).each(function(i) { var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1]; $('td.answer-item:last input[type="checkbox"]', this).css({ 'position': 'absolute', 'left': '-9999em' }); $('td.answer-item:last', this).removeClass('checkbox-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion)); }); // Listeners on the text inputs $('input[type="text"]', thisQuestion).on('keyup change', function(e) { var thisCheckbox = $(this).closest('td').find('input[type="checkbox"]'); if($.trim($(this).val()) != '') { $(thisCheckbox).prop('checked', true); $(thisCheckbox).prev('input:hidden').val(1); } else { $(thisCheckbox).prop('checked', false); $(thisCheckbox).prev('input:hidden').val(''); } // Fire Expression manager $(thisCheckbox).trigger('change'); }); }); }; })( jQuery );
Hi Tony! Is it possible to modify the code so that when you type in a textbox it excludes all others? (like it is in this workaround )
Many thanks!
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
- krosser
- Topic Author
- Offline
- Elite Member
Less
More
- Posts: 222
- Thank you received: 10
6 years 1 day ago - 6 years 1 day ago #167878
by krosser
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Replied by krosser on topic Adding textbox in basic array
Hey guys,
I need to make this kind of question - array(numbers) with multiple choice and text boxes for Others.
Well, in theory, it's similar to what Tony wrote earlier (when text boxes were in the last column), but I can't figure out what should be changed to move them to the other column.
I would like to make this type of question so that "Don't know" is at the end and when clicked it cancels the first choices. So, I wonder if two JS scripts can be run at the same time or there must be one that combines the two workarounds? Because the code for the last column that cancels the previous ones exists .
I'd appreciate if someone could help.
BTW I use LS 3.7
I need to make this kind of question - array(numbers) with multiple choice and text boxes for Others.
Well, in theory, it's similar to what Tony wrote earlier (when text boxes were in the last column), but I can't figure out what should be changed to move them to the other column.
I would like to make this type of question so that "Don't know" is at the end and when clicked it cancels the first choices. So, I wonder if two JS scripts can be run at the same time or there must be one that combines the two workarounds? Because the code for the last column that cancels the previous ones exists .
I'd appreciate if someone could help.
BTW I use LS 3.7
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Attachments:
Last edit: 6 years 1 day ago by krosser.
The topic has been locked.