- Posts: 14
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Array - Text (Col1), Dropdown (Col2), Slider(Col3)
- ConradNg
- Topic Author
- Offline
- New Member
Less
More
7 years 5 months ago - 7 years 5 months ago #143028
by ConradNg
Array - Text (Col1), Dropdown (Col2), Slider(Col3) was created by ConradNg
Hi Lime Experts,
I am currently using v2.50+. I have been tasked with creating a question that enables users to add answer field. Using the logic from another post ( www.limesurvey.org/forum/can-i-do-this-w...ers-add-answer-field ) I am able to achieve this.
My subquestions within the array(text) contains the express similar to: ((R1bbb_SQ001_SQ001.NAOK > "")) and unhides the next subquestion when text has been entered on the previous row. Now, I need to further enhance this array to have one column for short text, one columns with a dropdown, and one column potentially with a slider to specify month range (Jan-Dec, Nov-Apr) while retaining the forementioned function to "enables users to add answer field / row".
Is there anyway I can create a dropdown question and link it to the subquestion within the array so I could achieve an array with different question types? I am open to any modifications and suggestions that can make this table function...
Thank you.
I am currently using v2.50+. I have been tasked with creating a question that enables users to add answer field. Using the logic from another post ( www.limesurvey.org/forum/can-i-do-this-w...ers-add-answer-field ) I am able to achieve this.
My subquestions within the array(text) contains the express similar to: ((R1bbb_SQ001_SQ001.NAOK > "")) and unhides the next subquestion when text has been entered on the previous row. Now, I need to further enhance this array to have one column for short text, one columns with a dropdown, and one column potentially with a slider to specify month range (Jan-Dec, Nov-Apr) while retaining the forementioned function to "enables users to add answer field / row".
Is there anyway I can create a dropdown question and link it to the subquestion within the array so I could achieve an array with different question types? I am open to any modifications and suggestions that can make this table function...
Thank you.
Attachments:
Last edit: 7 years 5 months ago by ConradNg.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
7 years 5 months ago #143065
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 - Text (Col1), Dropdown (Col2), Slider(Col3)
You'll need to use JavaScript to insert those control elements.
Here's a post on how to insert the drop-downs - www.limesurvey.org/forum/design-issues/1...han-textboxes#139987
The sliders will take a little thought. LS 2.5x uses bootstrap sliders which, in my opinion, are less customizable and harder to manipulate.
Here's a post on how to insert the drop-downs - www.limesurvey.org/forum/design-issues/1...han-textboxes#139987
The sliders will take a little thought. LS 2.5x uses bootstrap sliders which, in my opinion, are less customizable and harder to manipulate.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: ConradNg
The topic has been locked.
- ConradNg
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
7 years 5 months ago #143076
by ConradNg
Replied by ConradNg on topic Array - Text (Col1), Dropdown (Col2), Slider(Col3)
AMAZING! Thank you!
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
7 years 5 months ago #143079
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 - Text (Col1), Dropdown (Col2), Slider(Col3)
Here is a script to insert modified bootstrap sliders to record a month-range into a column of an array-texts question. The data recorded will be the start/end month numbers.
So, to combine this with your drop-downs, it would be something like this (I have moved the columns around for visual appearance):
Sample survey attached:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Assign column-specific classes $('table.subquestion-list tr', thisQuestion).each(function(i) { $('> *:gt(0)', this).each(function(i){ $(this).addClass('column-'+(i+1)); $(this).attr('data-column', i+1); }); }); // Insert the sliders $('.answer-item.column-3 input[type="text"]', thisQuestion).each(function(i) { $(this).closest('td').addClass('with-slider'); var thisValue = $(this).val(); var thisValueArr = thisValue.split(','); var sliderValues = []; if(thisValueArr.length > 1) { $(thisValueArr).each(function(i) { sliderValues.push(Number(this)); }); } else { sliderValues = [1, 12]; } $(this).bootstrapSlider({ 'min': 1, 'max': 12, 'step': 1, 'range': true, 'value': sliderValues, 'tooltip': 'always' }); // Initialization stuff if(thisValue == '') { $(this).val(''); $(this).closest('td').find('.tooltip').hide(); } else { updateCallOut($(this).closest('td')); } }); // A function to insert months in the slider callout function updateCallOut(el) { var thisTooltip = $(el).find('.tooltip'); var thisValueArr = $(el).find('input[type="text"]').val().split(','); var months = { 1: 'January', 2: 'February', 3: 'March', 4: 'April', 5: 'May', 6: 'June', 7: 'July', 8: 'August', 9: 'September', 10: 'October', 11: 'November', 12: 'December' }; var startMonth = months[thisValueArr[0]]; var endMonth = months[thisValueArr[1]]; var callOutText = startMonth; if(startMonth != endMonth) { callOutText = startMonth+'-'+endMonth; } $('.tooltip-inner', thisTooltip).text(callOutText); thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px'); } // Listener on sliders $('td.with-slider .slider').on('mousedown', function(event, ui) { updateCallOut($(this).closest('td')); }); $('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) { updateCallOut($(this).closest('td')); checkconditions($(this).val(), $(this).attr('name'), 'text'); }); // Listener on resizing (override the bootstrap callout behaviour) $(window).resize(function() { $('td.with-slider', thisQuestion).each(function(i) { if($('input[type="text"]', this).val() != '') { updateCallOut(this); } }); }); // Some clean-up styles (could be placed in template.css $('.slider.slider-horizontal', thisQuestion).css({ 'margin': '1.7em auto 1em' }); $('.slider-handle', thisQuestion).css({ 'top': '-4px' }); }); </script>
So, to combine this with your drop-downs, it would be something like this (I have moved the columns around for visual appearance):
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Assign column-specific classes $('table.subquestion-list tr', thisQuestion).each(function(i) { $('> *:gt(0)', this).each(function(i){ $(this).addClass('column-'+(i+1)); $(this).attr('data-column', i+1); }); }); // Hide the text inputs in columns 2 $('.column-2 input[type="text"]', thisQuestion).hide(); // Define the select element (dropdown) var select1 = '<select class="inserted-select"> \ <option value="">-- Please Choose --</option> \ <option value="Not started">Not started</option> \ <option value="In progress">In progress</option> \ <option value="Completed">Completed</option> \ </select>'; // Insert the select elements into column 2 $('.answer-item.column-2').append(select1); // Initial dropdown values in column 2 (if the question has already been answered) $('.answer-item.column-2 input[type="text"]').each(function(i){ if($.trim($(this).val()) != '') { $(this).closest('td').find('.inserted-select').val($.trim($(this).val())); } }); // Listener on the dropdowns (insert selected values into hidden text input) $('.inserted-select').change(function() { var thisInput = $(this).closest('td').find('input[type="text"]'); $(thisInput).val($(this).val()); checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text'); }); // Insert the sliders $('.answer-item.column-3 input[type="text"]', thisQuestion).each(function(i) { $(this).closest('td').addClass('with-slider'); var thisValue = $(this).val(); var thisValueArr = thisValue.split(','); var sliderValues = []; if(thisValueArr.length > 1) { $(thisValueArr).each(function(i) { sliderValues.push(Number(this)); }); } else { sliderValues = [1, 12]; } $(this).bootstrapSlider({ 'min': 1, 'max': 12, 'step': 1, 'range': true, 'value': sliderValues, 'tooltip': 'always' }); // Initialization stuff if(thisValue == '') { $(this).val(''); $(this).closest('td').find('.tooltip').hide(); } else { updateCallOut($(this).closest('td')); } }); // A function to insert months in the slider callout function updateCallOut(el) { var thisTooltip = $(el).find('.tooltip'); var thisValueArr = $(el).find('input[type="text"]').val().split(','); var months = { 1: 'January', 2: 'February', 3: 'March', 4: 'April', 5: 'May', 6: 'June', 7: 'July', 8: 'August', 9: 'September', 10: 'October', 11: 'November', 12: 'December' }; var startMonth = months[thisValueArr[0]]; var endMonth = months[thisValueArr[1]]; var callOutText = startMonth; if(startMonth != endMonth) { callOutText = startMonth+'-'+endMonth; } $('.tooltip-inner', thisTooltip).text(callOutText); thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px'); } // Listener on sliders $('td.with-slider .slider').on('mousedown', function(event, ui) { updateCallOut($(this).closest('td')); }); $('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) { updateCallOut($(this).closest('td')); checkconditions($(this).val(), $(this).attr('name'), 'text'); }); // Listener on resizing (override the bootstrap callout behaviour) $(window).resize(function() { $('td.with-slider', thisQuestion).each(function(i) { if($('input[type="text"]', this).val() != '') { updateCallOut(this); } }); }); // Some clean-up styles (could be placed in template.css $('select', thisQuestion).css({ 'border': '2px solid #dce4ec', 'padding': '0.7em', 'border-radius': '4px' }); $('.slider.slider-horizontal', thisQuestion).css({ 'margin': '1.7em auto 1em' }); $('.slider-handle', thisQuestion).css({ 'top': '-4px' }); }); </script>
Sample survey attached:
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: ConradNg
The topic has been locked.