Slider values as text

More
4 years 4 months ago - 4 years 4 months ago #94807 by RTMP
RTMP created the topic: Slider values as text
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: 4 years 4 months ago by RTMP.

Please Log in to join the conversation.

More
4 years 4 months ago #94850 by DenisChenu
DenisChenu replied the 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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 4 months ago #94938 by RTMP
RTMP replied the 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.:
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

Please Log in to join the conversation.

More
4 years 4 months ago #94941 by holch
holch replied the 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'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in to join the conversation.

More
4 years 4 months ago - 4 years 4 months ago #94943 by RTMP
RTMP replied the 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:
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: 4 years 4 months ago by RTMP.

Please Log in to join the conversation.

More
4 years 4 months ago - 4 years 4 months ago #94971 by tpartner
tpartner replied the 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:
$(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'
	});


Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 4 years 4 months ago by tpartner.

Please Log in to join the conversation.

Did you already participate in our customer survey?

Don't miss your chance for great prices.

Please click here to participate:

Start now

Start now!

Just create your account and start using Limesurvey today.

Register now