- Posts: 3
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Slider values as text
- RTMP
- Topic Author
- Offline
- New Member
Less
More
11 years 1 week ago - 11 years 1 week ago #94807
by RTMP
Slider values as text was created by RTMP
Hello,
Recently I heard about LimeSurvey and i wanted to test it. So far most things I needed, I managed to do on my own or I could find solution how to do them, here on forum and in workarounds.
But there is one thing that I cannot find out how to do. What I want to do is a slider with text instead value above slider when i pick my answer(for ex. instead "0" i want to have text "Very Bad" above slider)
I was thinking about some conditional that would set specific text when slider value meet condition, but unfortunately I don't know JS, and I have no clue how to make it on my own.
I use LimeSurvey Version 2.00+ and basic template
I would appreciate if someone could help me solve that
Recently I heard about LimeSurvey and i wanted to test it. So far most things I needed, I managed to do on my own or I could find solution how to do them, here on forum and in workarounds.
But there is one thing that I cannot find out how to do. What I want to do is a slider with text instead value above slider when i pick my answer(for ex. instead "0" i want to have text "Very Bad" above slider)
I was thinking about some conditional that would set specific text when slider value meet condition, but unfortunately I don't know JS, and I have no clue how to make it on my own.
I use LimeSurvey Version 2.00+ and basic template
I would appreciate if someone could help me solve that
Last edit: 11 years 1 week ago by RTMP.
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13597
- Thank you received: 2487
11 years 6 days ago #94850
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Replied by DenisChenu on topic Slider values as text
Actually, really need js if you really need a slider.
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
- RTMP
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
11 years 2 days ago #94938
by RTMP
Replied by RTMP on topic Slider values as text
Well, thats the only thing that i cannot do in lime from what i need.
I was looking around for solution and i think im getting closer. so far i think about array of labels for ex.:
and then set slider to show those string which array index is equal to slider value (so for ex. if slider value is 4 then it would show D)
what i need now is how to refer to all sliders in my template (because i still dont know JS well enought to do it on my own) so i can set all sliders to show strings from array instead slider value
I was looking around for solution and i think im getting closer. so far i think about array of labels for ex.:
Code:
var sllab = { 1: "A", 2: "B", 3: "C", 4: "D", 5: "E" };
and then set slider to show those string which array index is equal to slider value (so for ex. if slider value is 4 then it would show D)
what i need now is how to refer to all sliders in my template (because i still dont know JS well enought to do it on my own) so i can set all sliders to show strings from array instead slider value
The topic has been locked.
- holch
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11637
- Thank you received: 2737
11 years 2 days ago #94941
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic Slider values as text
I don't have a solution, but the slider is good for small grained evaluation. If you just have text instead, I feel that from a research and usability point of view, a normal scale with radio buttons would be much more appropriate. Because with numbers from 1-5 ratings in between 1 and 2 for example still make sense, but not really between A and B or "very interested" and "interested".
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
- RTMP
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
11 years 2 days ago - 11 years 2 days ago #94943
by RTMP
Replied by RTMP on topic Slider values as text
Well as i said "abcde" thingie is just an example to ilustrate what i want to achieve
Still trying to find out how to do it
thats what i came up with so far:
Of course its not working yet but thats how i see the way to solve this issue. what i still miss is:
1) how to refer to all sliders in a template I think i got it - ('.ui-slider')
2) how to refer to slider_callout in a properway that ill be able to set #amount as value of callout same here - ('.slider_callout')
but its still not working
meanwhile i think that i found another way to solve this issue (of course also not working):
Still trying to find out how to do it
thats what i came up with so far:
Code:
var sllab = { 1: "A", 2: "B", 3: "C", 4: "D", 5: "E" }; $('#questionp1.ui-slider').bind('slide', function(event, ui) { //i dont know how to refer to all $( "#amount" ).val(sllab[ui.value ]); //sliders so at the moment i try just to one question }; $( "#amount" ).val(sllab[$("#questionp1.ui-slider").slider("value")]); $('#slider-callout-').css('left', $(ui.handle).css('left')).text("#amount"); // i took this part from lime-slider.js // - i have no idea what it does but i guess that part refer to text over handle
Of course its not working yet but thats how i see the way to solve this issue. what i still miss is:
1) how to refer to all sliders in a template I think i got it - ('.ui-slider')
2) how to refer to slider_callout in a properway that ill be able to set #amount as value of callout same here - ('.slider_callout')
but its still not working
meanwhile i think that i found another way to solve this issue (of course also not working):
Code:
$('.ui-slider').bind('slide', function(event, ui) { $('.slider_callout').each(function(event, ui){ if($(this).text = 1) { $(this).text = "sdfdsgfds"); } }); });
Last edit: 11 years 2 days ago by RTMP.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10098
- Thank you received: 3589
11 years 1 day ago - 11 years 1 day ago #94971
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 Slider values as text
I think it would be easier to hide the existing callouts and insert new ones for the text.
Here's a jQuery plugin to do that with sliders that have values between 1 and 10.
1) Add this to template.js:
2) And add something like this to the end of template.css (this is for the default template):
If you want non-default text, change this:
To something like this:
Here's a jQuery plugin to do that with sliders that have values between 1 and 10.
1) Add this to template.js:
Code:
$(document).ready(function(){ // Call the sliderCallOutText plugin for all slider questions (with default text) $('.multinum-slider').sliderCallOutText(); }); ////////// NO EDITING REQUIRED BELOW HERE ////////// // A jQuery plugin to replace the slider callout values with text (function( $ ){ $.fn.sliderCallOutText = function(options) { // The defaults, extended and modified with any passed in the function call var opts = $.extend( { text_1 : 'One', text_2 : 'Two', text_3 : 'Three', text_4 : 'Four', text_5 : 'Five', text_6 : 'Six', text_7 : 'Seven', text_8 : 'Eight', text_9 : 'Nine', text_10 : 'Ten' }, options); return this.each(function() { if($(this).hasClass('multinum-slider')) { // Only works for sliders // Add some classes $(this).closest('.numeric-multi').addClass('customSlider textLabels'); // Hide the original and add a new callout $('.slider_callout', this).hide().after('<div id="slider-text-callout"></div>'); function updateCallOutText(thisSlider, slidervalue) { var parentLi = thisSlider.parents('li:eq(0)'); var id = thisSlider.attr('id').replace(/slider-/, ''); var sVal = slidervalue/$('#slider-param-divisor-'+id).attr('value'); var callOutText = ''; switch(sVal) { case 1 : callOutText = opts.text_1; break; case 2 : callOutText = opts.text_2; break; case 3 : callOutText = opts.text_3; break; case 4 : callOutText = opts.text_4; break; case 5 : callOutText = opts.text_5; break; case 6 : callOutText = opts.text_6; break; case 7 : callOutText = opts.text_7; break; case 8 : callOutText = opts.text_8; break; case 9 : callOutText = opts.text_9; break; case 10 : callOutText = opts.text_10; break; default: callOutText = 'No text found!'; } $('#slider-text-callout', parentLi).text(callOutText); setTimeout(function() { var textWidth = $('#slider-text-callout', parentLi).width(); var handleleft = $('.ui-slider-handle', parentLi).position().left; $('#slider-text-callout', parentLi).css({ 'left':(handleleft-textWidth/2)+'px' }); }, 10); } // Listeners for slider changes $('.ui-slider', this).bind('slide', function(event, ui) { updateCallOutText($(this), ui.value); }); $('.ui-slider', this).bind('slidechange', function(event, ui) { updateCallOutText($(this), ui.value); }); // Initial slider callout text (if slider was previously moved) if($('.slider_callout', this).text() != '') { var selection = $('.ui-slider', this).slider('value'); updateCallOutText($('.ui-slider', this), selection); } } }); }; })( jQuery );
2) And add something like this to the end of template.css (this is for the default template):
Code:
#slider-text-callout { font-size: 85%; font-weight: 400; height: 20px; overflow: hidden; position: absolute; text-align: center; top: -25px; min-width: 100px; width: auto; }
If you want non-default text, change this:
Code:
// Call the sliderCallOutText plugin for all slider questions (with default text) $('.multinum-slider').sliderCallOutText();
Code:
// Call the sliderCallOutText plugin for all slider questions with some custom text $('.multinum-slider').sliderCallOutText( { text_1 : 'ein', text_2 : 'zwei', text_3 : 'drei', text_4 : 'vier', text_5 : 'fünf', text_6 : 'sechs', text_7 : 'sieben', text_8 : 'acht', text_9 : 'neun', text_10 : 'zehn' });
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 11 years 1 day ago by tpartner.
The topic has been locked.
- yannickberger
- Offline
- New Member
Less
More
- Posts: 19
- Thank you received: 1
5 years 9 months ago #170827
by yannickberger
Replied by yannickberger on topic Slider values as text
I Know it's old, but is it still viable in 3.0 and later ?
Or we need to change something ?
Because I got the same issues : I want a slider with letter values
Or we need to change something ?
Because I got the same issues : I want a slider with letter values
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10098
- Thank you received: 3589
5 years 9 months ago #170835
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 Slider values as text
In 3.x, add a script like this to the source of the question:
Sample survey attached:
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Define the text strings var tipTexts = { 1: 'One', 2: 'Two', 3: 'Three', 4: 'Four', 5: 'Five', 6: 'Six', 7: 'Seven', 8: 'Eight', 9: 'Nine', 10: 'Ten' }; $('input:text', thisQuestion).on('slideEnabled',function(){ var thisItem = $(this).closest('li'); // Insert custom tooltip $('.tooltip-inner', thisItem).addClass('tooltip-inner-1 hidden'); $('.tooltip', thisItem).append('<div class="tooltip-inner tooltip-inner-2">'+tipTexts[$(this).val()]+'</div>'); // Listener on slider $(this).on('slide slideStop', function(event) { // Handle dynamic tooltip text $('.tooltip-inner-2', thisItem).text(tipTexts[$(this).val()]); }); }); }); </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: cdorin, yannickberger, schmittg91
The topic has been locked.
- yannickberger
- Offline
- New Member
Less
More
- Posts: 19
- Thank you received: 1
5 years 9 months ago - 5 years 9 months ago #170843
by yannickberger
Replied by yannickberger on topic Slider values as text
I managed to change labels, it worked just fine, thank you
I just got another question, How can I do to get the values for the slinder for conditions ?
Because when i use the conditions designer when I select the questions who's got the slider, I can only select (no answer)
I just got another question, How can I do to get the values for the slinder for conditions ?
Because when i use the conditions designer when I select the questions who's got the slider, I can only select (no answer)
Last edit: 5 years 9 months ago by yannickberger.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10098
- Thank you received: 3589
5 years 9 months ago #170861
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 Slider values as text
I never use the conditions designer. Use a relevance equation instead. It's far more versatile and powerful.
Bear in mind that the values in the data (and therefore for relevance) will be the numeric slider values, not your new inserted tooltip labels.
Bear in mind that the values in the data (and therefore for relevance) will be the numeric slider values, not your new inserted tooltip labels.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.