Check out the LimeSurvey source code on GitHub!

Slider 5 point choice start on the right side

More
3 years 3 months ago #101144 by philippesafecoms
Hello everyone,

I need help with something I would like to do.

I am using LimeSurvey Version 2.00+ Build 131022 - template I use is the default which I change for me but based on it.

I am working on a survey and I have 5 questions using the type 5 point choice with the slider.

I would like to have the slider start from the right side with the happy face as well.

I cannot figure out how to do this.

Thank you for any help.

Please Log in to join the conversation.

More
3 years 3 months ago - 3 years 3 months ago #101157 by tpartner
Set up your survey to use JavaScript and add this to the source of the question:

<script type="text/javascript" charset="utf-8">	
	$(document).ready(function(){
 
		var qID = {QID};
 
		if($('#question'+qID+' input.radio:checked').length == 0) {
			$('#question'+qID+' input.radio[value="5"]').trigger('click');
			$('#question'+qID+' .slider').slider('value', 5);
			$('#question'+qID+' .emoticon-2').attr('src', $('#question'+qID+' .emoticon-2').attr('src').replace(/1.png/, '5.png'));
		}
	});
</script>

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
3 years 3 months ago #101196 by philippesafecoms
Thank you very much for your help tpartner.

it works great.

Please Log in to join the conversation.

More
3 years 3 months ago #101197 by philippesafecoms
I just realize something as well.

When I want to move the slider and I have to click, hold and drag the cursor.

Does anyone know how to do this?

I suppose I could trick the javascript of tony to add this functionality but I am not good in javascript...

please help.

Thank you

Please Log in to join the conversation.

More
3 years 3 months ago #101209 by tpartner
Add these rules to the end of template.css. They will allow you to move the slider by clicking on it and generally improve the appearance of the slider.

.slider-5 .slider {
	visibility: visible !important;
	border: 0 none;
	background: transparent none;
	height: 20px;
}
 
.slider-5 .slider-labels {
	width: 100% !important;
}
 
.slider-5 .slider-labels div {
	width: auto !important;
	margin-left: 83px;
}
 
.slider-5 .slider-labels .slider-label-1 {
	margin-left: 12px;
}
 
.slider-5 .slider .ui-slider-handle {
	width: 12px !important;
	margin-left: -6px !important;
	background-position: center 0;
	background-color: transparent;
	background-repeat: no-repeat;
}

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
3 years 3 months ago #101211 by philippesafecoms
This is great.

Thank you very much Tony

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form