Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Slider values as text

More
10 years 11 months ago - 10 years 11 months 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
Last edit: 10 years 11 months ago by RTMP.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 11 months ago #94850 by DenisChenu
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.
More
10 years 11 months 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.:
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
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 11 months ago #94941 by holch
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.
More
10 years 11 months ago - 10 years 11 months 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:
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 :P

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: 10 years 11 months ago by RTMP.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 11 months ago - 10 years 11 months ago #94971 by tpartner
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:
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();
To something like this:
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.
Last edit: 10 years 11 months ago by tpartner.
The topic has been locked.
More
5 years 8 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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 8 months ago #170835 by tpartner
Replied by tpartner on topic Slider values as text
In 3.x, add a script like this to the source of the question:

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:

File Attachment:

File Name: limesurvey...7-06.lss
File Size:18 KB

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: cdorin, yannickberger, schmittg91
The topic has been locked.
More
5 years 8 months ago - 5 years 8 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)
Last edit: 5 years 8 months ago by yannickberger.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 8 months ago #170861 by tpartner
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.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose