Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: Slider values as text

Slider values as text 1 Jahr 5 Monate her #94807

  • RTMP
  • RTMPs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 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
Letzte Änderung: 1 Jahr 5 Monate her von RTMP.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Slider values as text 1 Jahr 5 Monate her #94850

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 6318
  • Dank erhalten: 812
  • Karma: 242
Actually, really need js if you really need a slider.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Slider values as text 1 Jahr 5 Monate her #94938

  • RTMP
  • RTMPs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Slider values as text 1 Jahr 5 Monate her #94941

  • holch
  • holchs Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 2670
  • Dank erhalten: 319
  • Karma: 119
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!
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Slider values as text 1 Jahr 5 Monate her #94943

  • RTMP
  • RTMPs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 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");
		}
	});
});
Letzte Änderung: 1 Jahr 5 Monate her von RTMP.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Slider values as text 1 Jahr 5 Monate her #94971

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4188
  • Dank erhalten: 786
  • Karma: 359
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'
	});

Capture_2013-04-16.JPG
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.
Letzte Änderung: 1 Jahr 5 Monate her von tpartner.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.176 Sekunden
Donation Image