Welcome, Guest
Username: Password: Remember me

TOPIC: Slider values as text

Slider values as text 2 years 4 months ago #94807

  • RTMP
  • RTMP's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
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: 2 years 4 months ago by RTMP.
The administrator has disabled public write access.

Slider values as text 2 years 4 months ago #94850

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 7510
  • Thank you received: 1024
  • Karma: 297
Actually, really need js if you really need a slider.
The administrator has disabled public write access.

Slider values as text 2 years 4 months ago #94938

  • RTMP
  • RTMP's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
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.:
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 administrator has disabled public write access.

Slider values as text 2 years 4 months ago #94941

  • holch
  • holch's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 3737
  • Thank you received: 501
  • Karma: 163
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".
Have a look at the manual! It is a really valuable source for information. Here some helpful links:
Manual (EN) | Question Types | Question Attributes | Workarounds

If you found this answer helpful and it saved you some time please consider a donation to the project to keep Limesurvey going!
The administrator has disabled public write access.

Slider values as text 2 years 4 months ago #94943

  • RTMP
  • RTMP's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
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:
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):
$('.ui-slider').bind('slide', function(event, ui) { 
	$('.slider_callout').each(function(event, ui){
		if($(this).text = 1) {
			$(this).text = "sdfdsgfds");
		}
	});
});
Last Edit: 2 years 4 months ago by RTMP.
The administrator has disabled public write access.

Slider values as text 2 years 4 months ago #94971

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5111
  • Thank you received: 1049
  • Karma: 440
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:
$(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):
#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:
	// Call the sliderCallOutText plugin for all slider questions (with default text)	
	$('.multinum-slider').sliderCallOutText();
To something like this:
	// 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'
	});

This message has an attachment image.
Please log in or register to see it.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 2 years 4 months ago by tpartner.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.246 seconds