True visual analogue scales in Limesurvey?

More
9 years 1 week ago #62933 by joshendrikx
Hi Tony,

I finally had the time to take a look at your suggestions and with some trial and error (I'm totally new to any type of coding) it all work just as I wanted it to. So I really want to thank you again for your help!

Kind regards,

Jos

Please Log in to join the conversation.

More
8 years 9 months ago #65617 by mfino242
Hi all,

I was trying to put textual anchors into my slider. I tried the suggestion presented earlier however it didn't work. It ended up looking like this

Low|High <
>

instead of

Low <
> High

Any help would be greatly appreciated.

Please Log in to join the conversation.

More
8 years 9 months ago #65619 by holch
What do you have in the space for "Slider left/right text separator"?

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Please Log in to join the conversation.

More
4 years 6 months ago #129816 by pio
tpartner, thank you for your answers.

clicking the slider bar works well...

However I have copied and pasted your java script code.

The slider handle is hidden, but it doesn't show up if I click on the slider..

any ideas?

Please Log in to join the conversation.

More
4 years 6 months ago #129832 by tpartner
Assuming you do not set an initial value for the sliders, inserting this into the question text will initially hide the handles of all un-moved sliders and then show the handles as the sliders are clicked. (there is no need to replace "{QID}", it will automatically pipe in the question ID)

<script type="text/javascript" charset="utf-8">		
	$(document).ready(function(){ 
 
		// Hide slider handles on un-moved sliders
		$('#question{QID} input.text').each(function(i){
			if($(this).val() == '') {
				$(this).closest('li.question-item').find('.ui-slider-handle').hide();
			}
		});
 
		// Click events on the sliders
		$('#question{QID} .ui-slider-1').on('click', function(e) {
			$(this).closest('li.question-item').find('.ui-slider-handle').show();
		});
    });
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
The following user(s) said Thank You: pio

Please Log in to join the conversation.

More
4 years 6 months ago #129835 by pio
wow, that's really cool, thanks a lot! I really appreciate your quick reply!

I'll need to dive into js a little bit

Please Log in to join the conversation.

More
4 years 4 months ago - 4 years 4 months ago #131581 by pio
Hello,

I've put an image at each side of the scale and would like the images to be aligned, so that the slider is in the middle (something like valign = "middle"). Any ideas how to accomplish this? (-> attachment)

edit: Would it be possible to do something like this with a scale from 0 to 10? (-> question2.jpg)

thanks,
Piotr
Attachments:
Last edit: 4 years 4 months ago by pio.

Please Log in to join the conversation.

More
4 years 4 months ago #131583 by tpartner
Can you activate a test survey so we can see that source?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Please Log in to join the conversation.

More
4 years 4 months ago #131585 by pio
yes, sure:
delphi.kli.psy.rub.de/limesurvey/index.p...722?lang=de-informal

(javascript doesn't work, because the administrator of our server didn't swith on js in limesurvey)

Please Log in to join the conversation.

More
4 years 4 months ago - 4 years 4 months ago #131586 by pio
sorry, just activated it
Attachments:
Last edit: 4 years 4 months ago by pio.

Please Log in to join the conversation.

More
4 years 4 months ago #131617 by tpartner
Add something like this to template.css. You will need to modify "46926" to match the question ID in your live survey.

#question46926 label.slider-label {
    padding-top: 50px;
    padding-right: 50px;
}
 
#question46926 div.multinum-slider {
    margin: 80px 20px 0 20px;
}


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:

Please Log in to join the conversation.

More
4 years 4 months ago #131649 by pio
thank you very much!

Please Log in to join the conversation.

More
3 years 2 weeks ago - 3 years 2 weeks ago #156223 by de_huig

tpartner wrote: Okay, now that I've woken up and re-read the thread, I think I understand - you're only concerned about clicking the slider bar, not dragging the handle.

Add the following to the end of template.css to convert the slider handle to a vertical bar and hide the slider callout (these styles are for the default template). Replace "QQ" with your question ID.

#questionQQ .ui-slider .ui-slider-handle {
	height:25px;
	width: 2px;
	margin-left: 0;
	top: -8px;
	background: #79B7E7 none;
	border: 0 none;
}
 
#questionQQ .slider_callout {
	display: none;
}

If you want to initially hide the slider handle, set up your survey to use JavaScript and add the following script to the source of the slider question. Again, replace "QQ" with the question ID.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
 
		var qID = QQ;
 
		$('#question'+qID+' .ui-slider .ui-slider-handle').hide();
		$('#question'+qID+' .ui-slider').live('mouseup', function() {
		  $('#question'+qID+' .ui-slider .ui-slider-handle').show();
		});
 
	});
 
</script>


Hi!
I'm not sure what the policy is on responding on old topics/questions, but I figured I should try it anyway..Here's the thing: A couple of years ago I found the quoted piece of code which was really helpful to me at the time. However, it doesn't seem to work in the 2.50 version. Am I missing something here, or what should I adjust? I would like to let people rate a short movieclip with a slider, for which the handle should only become visible at mouseclick, and for which the value(s) are hidden all the time. I did some googling on the topic, but since that wasn't really helpful I figured I should ask for your help. JavaScript is on (according to the test with an Alert). Thanks in advance!
Last edit: 3 years 2 weeks ago by de_huig.

Please Log in to join the conversation.

More
3 years 2 weeks ago #156228 by holch
Templates have changed significantly in 2.6x and old templates will most probably not work with the newer version. And many of Tpartners excellent workarounds will also not work, because the html/css code has changed quite a bit. Thus most javascript workarounds provided by Tpartner need to be adapted to the new version. And there are sooo many of those great workarounds that were developed by mainly Tpartner, no one can really keep track of them.

By the way: Bad news! Due to the experience and some flaws in the new templates, in LS 3.0 we will see another ruptur in templates. Hopefully this will be the last major change in Templating for a long time.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The following user(s) said Thank You: de_huig

Please Log in to join the conversation.

More
3 years 2 weeks ago #156254 by tpartner
Version 2.6x uses Bootstrap sliders instead of jQuery UI sliders so, as holch points out, some workarounds may fail.

For 2.6x (and 3.x which will also use Bootstrap sliders), this script will hide the slider tooltip permanently and hide the slider handle until the slider track is clicked on.

Note: there may be issues if you allow the respondent to return to the page as there is no simple way to determine if a Bootstrap slider has never been clicked.

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$('#question{QID} .question-item').hide();
 
		$('#question{QID} input[type="text"]').each(function(i) {
			$('#question{QID} input[type="text"]').on('slideEnabled', function(e) {
				var thisRow = $(this).closest('.question-item');
				$('.slider .tooltip', thisRow).addClass('hidden');
				$('.slider .slider-handle', thisRow).hide();
 
				$('.slider', thisRow).on('slideStop', function(e) {
					$('.slider-handle', thisRow).show();
				});
 
				$(thisRow).show();
			});
		});
	});
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
The following user(s) said Thank You: de_huig

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now