- 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): Combining sliders with Yes/No question
- zschaerer
- Topic Author
- Offline
- New Member
Less
More
6 years 11 months ago #154962
by zschaerer
Array (Text): Combining sliders with Yes/No question was created by zschaerer
Hello,
I want to create a question array combining sliders and radio buttons (yes/no). From a combination of two other topics ( www.limesurvey.org/forum/design-issues/1...han-textboxes#139987 and www.limesurvey.org/forum/can-i-do-this-w...,-slider-col3#143079 ), I have managed to manipulate the question type array (text) and change the text inputs to sliders and check boxes or drop downs. I don't know, though, how to get the yes/no buttons.
Thanks in advance for any help!
P.S: Limesurvey version 2.64.7+ Build 170404.
I want to create a question array combining sliders and radio buttons (yes/no). From a combination of two other topics ( www.limesurvey.org/forum/design-issues/1...han-textboxes#139987 and www.limesurvey.org/forum/can-i-do-this-w...,-slider-col3#143079 ), I have managed to manipulate the question type array (text) and change the text inputs to sliders and check boxes or drop downs. I don't know, though, how to get the yes/no buttons.
Thanks in advance for any help!
P.S: Limesurvey version 2.64.7+ Build 170404.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
6 years 11 months ago #154970
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): Combining sliders with Yes/No question
Can you attach a test survey containing only that array question and your JavaScript?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- zschaerer
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
6 years 11 months ago #154975
by zschaerer
Replied by zschaerer on topic Array (Text): Combining sliders with Yes/No question
I just sent you a pm with a link.
I would like to change the check boxes in the right column to yes/no radio buttons.
Also, I thought it would be easy to change the split sliders that I copied from www.limesurvey.org/forum/can-i-do-this-w...,-slider-col3#143079 into normal sliders. However, my very limited Javascript knowledge does not allow this. I'll open an own thread for that, though.
Cheers, z
I would like to change the check boxes in the right column to yes/no radio buttons.
Also, I thought it would be easy to change the split sliders that I copied from www.limesurvey.org/forum/can-i-do-this-w...,-slider-col3#143079 into normal sliders. However, my very limited Javascript knowledge does not allow this. I'll open an own thread for that, though.
Cheers, z
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
6 years 11 months ago #154979
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): Combining sliders with Yes/No question
I didn't mean a link to a survey, I meant attach an export of a test survey. I don't have time to recreate everyone's survey for testing.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- zschaerer
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
6 years 11 months ago #154980
by zschaerer
Replied by zschaerer on topic Array (Text): Combining sliders with Yes/No question
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
6 years 11 months ago #154981
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): Combining sliders with Yes/No question
What would you like the slider max/min/step values to be?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- zschaerer
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
6 years 11 months ago #154982
by zschaerer
Replied by zschaerer on topic Array (Text): Combining sliders with Yes/No question
min: -5
max: 5
step: 0.1
max: 5
step: 0.1
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
6 years 11 months ago - 6 years 11 months ago #154983
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): Combining sliders with Yes/No question
In that case, you can use this script. It will insert single-value sliders in column 1 and radios in column 2.
You may want to add this to the end of template.css to clean it up a bit on phones:
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-1 input[type="text"]', thisQuestion).each(function(i) { $(this).closest('td').addClass('with-slider'); var thisValue = $(this).val(); $(this).bootstrapSlider({ 'min': -5, 'max': 5, 'step': 0.1, 'range': false, 'value': Number(thisValue), 'tooltip': 'always' }); // Initialization stuff if(thisValue == '') { $(this).val(''); $(this).closest('td').find('.tooltip').hide(); } else { updateCallOut($(this).closest('td')); } }); // A function to update the slider callout function updateCallOut(el) { var thisTooltip = $(el).find('.tooltip'); //$('.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 $('thead th, .answer-item.column-1', thisQuestion).css({ 'text-align': 'center' }); $('.slider.slider-horizontal', thisQuestion).css({ 'margin': '1.7em auto 1em' }); $('.slider-handle', thisQuestion).css({ 'top': '-4px' }); // Hide the text inputs in columns 2 $('.column-2 input[type="text"]', thisQuestion).hide(); // Loop through all column-2 inputs $('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) { var thisID = $(this).attr('id'); var thisValue = $(this).val(); // Insert the radios into $(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\ <input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\ <label class="control-label radio-label" for="'+thisID+'-Y">Yes</label>\ </span>\ <span class="inserted-radio-wrapper">\ <input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\ <label class="control-label radio-label" for="'+thisID+'-N">No</label>\ </span>'); // Initial radio states $(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true); }); // Listener on the radios $('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() { var thisInput = $(this).closest('td').find('input[type="text"]'); $(this).closest('td').find('input[type="text"]').val($(this).val()); checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text'); }); // Some clean-up styles (could be placed in template.css $('thead th, .answer-item.column-2', thisQuestion).css({ 'text-align': 'center' }); $('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({ 'display': 'inline-block', 'margin': '25px 10px 0 20px' }); $('.answer-item.column-2 label', thisQuestion).css({ 'padding': '0' }); $('.answer-item.column-2 .radio-label', thisQuestion).css({ 'padding-left': '3px', 'margin-right': '3px' }); }); </script>
You may want to add this to the end of template.css to clean it up a bit on phones:
Code:
.column-2.radio label.read::before { display:none !important; }
Sample survey attached:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 6 years 11 months ago by tpartner.
The topic has been locked.
- zschaerer
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
6 years 11 months ago #154993
by zschaerer
Replied by zschaerer on topic Array (Text): Combining sliders with Yes/No question
Thanks a lot, this works perfectly!
The topic has been locked.
- zschaerer
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
6 years 11 months ago #155152
by zschaerer
Replied by zschaerer on topic Array (Text): Combining sliders with Yes/No question
There are two more things I would like to adapt:
1. Add labels to the slider in the way it was done here: www.limesurvey.org/forum/design-issues/1...in-dual-array#121844
2. Change the visual appearance of the sliders so that the left and right side of the button look the same (i.e. so that it doesn't look like the left side "fills up" when you move the slider button to the right).
Any hints on that?
1. Add labels to the slider in the way it was done here: www.limesurvey.org/forum/design-issues/1...in-dual-array#121844
2. Change the visual appearance of the sliders so that the left and right side of the button look the same (i.e. so that it doesn't look like the left side "fills up" when you move the slider button to the right).
Any hints on that?
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
6 years 11 months ago #155154
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): Combining sliders with Yes/No question
Use a script like this:
Sample survey:
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-1 input[type="text"]', thisQuestion).each(function(i) { $(this).closest('td').addClass('with-slider'); var thisValue = $(this).val(); $(this).bootstrapSlider({ 'min': -5, 'max': 5, 'step': 0.1, 'range': false, 'value': Number(thisValue), 'tooltip': 'always' }); // Initialization stuff if(thisValue == '') { $(this).val(''); $(this).closest('td').find('.tooltip').hide(); } else { updateCallOut($(this).closest('td')); } }); // A function to update the slider callout function updateCallOut(el) { var thisTooltip = $(el).find('.tooltip'); //$('.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); } }); }); // Insert slider left/right text var leftText = 'Left text'; var rightText = 'Right text'; $('td.with-slider', thisQuestion).append('<div class="left-text">'+leftText+'</div><div class="right-text">'+rightText+'</div>'); // Some clean-up styles for the sliders (could be placed in template.css) $('thead th, .answer-item.column-1', thisQuestion).css({ 'text-align': 'center' }); $('.slider.slider-horizontal', thisQuestion).css({ 'margin': '1.7em auto 1em' }); $('.slider-selection', thisQuestion).css({ 'background': 'transparent none', 'box-shadow': 'none' }); $('.slider-handle', thisQuestion).css({ 'top': '-4px' }); $('.left-text, .right-text', thisQuestion).css({ 'margin-top': '-0.5em', 'font-size': '90%' }); $('.left-text', thisQuestion).css({ 'float': 'left' }); $('.right-text', thisQuestion).css({ 'float': 'right' }); // Hide the text inputs in columns 2 $('.column-2 input[type="text"]', thisQuestion).hide(); // Loop through all column-2 inputs $('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) { var thisID = $(this).attr('id'); var thisValue = $(this).val(); // Insert the radios $(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\ <input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\ <label class="control-label radio-label" for="'+thisID+'-Y">Yes</label>\ </span>\ <span class="inserted-radio-wrapper">\ <input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\ <label class="control-label radio-label" for="'+thisID+'-N">No</label>\ </span>'); // Initial radio states $(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true); }); // Listener on the radios $('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() { var thisInput = $(this).closest('td').find('input[type="text"]'); $(this).closest('td').find('input[type="text"]').val($(this).val()); checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text'); }); // Some clean-up styles for the radios (could be placed in template.css) $('thead th, .answer-item.column-2', thisQuestion).css({ 'text-align': 'center' }); $('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({ 'display': 'inline-block', 'margin': '25px 10px 0 20px' }); $('.answer-item.column-2 label', thisQuestion).css({ 'padding': '0' }); $('.answer-item.column-2 .radio-label', thisQuestion).css({ 'padding-left': '3px', 'margin-right': '3px' }); }); </script>
Sample survey:
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: zschaerer
The topic has been locked.
- zschaerer
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
6 years 11 months ago #155178
by zschaerer
Replied by zschaerer on topic Array (Text): Combining sliders with Yes/No question
Is it possible to have different labels for each slider?
The topic has been locked.