Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: Design options for Slider Bar Questions

Design options for Slider Bar Questions 1 Jahr 2 Monate her #96440

  • RBH
  • RBHs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 9
  • Karma: 0
Hi
Can anyone tell me what options exist in LimeSurvey 2 for the style of questions that use a slider bar for the response? I need more alternative designs to help overcome the following design problem.

I have discovered how to produce a slider question to capture the user's degree of preference between two opposing concepts. I label the two different concepts to appear at each end of the horizontal slider bar. Then I have a slider bar that has numbers appear over the top of the slider pointer. The scores range from -100 on the left to 100 on the right with zero at the mid-point.

This gives me the preference scores for how much the user prefers one concept over the other but there is a problem with this method. The scores at the left hand side are visibly negative. This may imply to the users that these scores are less desirable than those on the right which are positive and affect their response.

Is there any way round this by having a different type of slider bar eg with a scale that hides the scores above the slider and adds a series of unlabelled intervals marked off at set intervals such as this below?

Apples |---|---|---|---|---|---|---|---|---|---| Bananas

The user could then move the pointer to their desired level of preference with less risk of bias (generated by positive and negative visible scores) influencing their response.

Are there other options for sliders I may have missed in the question types?

Thanks,

Roger
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Design options for Slider Bar Questions 1 Jahr 2 Monate her #96460

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4071
  • Dank erhalten: 748
  • Karma: 341
You can solve both problems with CSS.

Something like this to hide the callout (where "123" is the question ID):
#question123 .slider_callout {
  display: none !important;
}

The tick-marks could be added to the .ui-slider element with a background image.
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Design options for Slider Bar Questions 1 Jahr 2 Monate her #96475

  • RBH
  • RBHs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 9
  • Karma: 0
Many thanks for the reply Tony - I'd like to follow through by asking which .css file I need to modify for removing the scores over the top of the slider pointer by modifying the .slider_callout line as you suggest. There are so many .css files I'm not sure which one or the directory it would be in.

Also, any help on how to insert the background image would also be appreciated. Should I modify an existing one? Is this done in the same .css file?

Thanks,

Roger
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Design options for Slider Bar Questions 1 Jahr 2 Monate her #96477

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4071
  • Dank erhalten: 748
  • Karma: 341
I'd like to follow through by asking which .css file I need to modify
Add the code to the end of template.css.
Also, any help on how to insert the background image would also be appreciated.
What template are you using? How many ticks do you want?
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Design options for Slider Bar Questions 1 Jahr 2 Monate her #96483

  • RBH
  • RBHs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 9
  • Karma: 0
Hi Tony,

I put the code in to remove the scores but they still seem to be there! I must have done something wrong...
I'm not sure where to find the Question ID: Is this the Question ID from my particular survey (ID=2), or is it the ID of the type of question (5-point-array slider: not sure what the type ID could be)?

I've uploaded the file below to show the code I added at the end. I'm using the default theme and ccs file.

Any further help appreciated.
Thanks,
Roger
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Design options for Slider Bar Questions 1 Jahr 2 Monate her #96484

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4071
  • Dank erhalten: 748
  • Karma: 341
I'm not sure where to find the Question ID
You can see the question ID in the question toolbar:
Capture_2013-05-27.JPG

I've uploaded the file below to show the code I added at the end.
I don't see any upload.
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Design options for Slider Bar Questions 1 Jahr 2 Monate her #96486

  • RBH
  • RBHs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 9
  • Karma: 0
Hi Tony,

Apologies that my template.css did not arrive. Your patience is appreciated. I needed the right ID for the question and now it works perfectly! The slider has no scores above.

Is there a quick way if, for example, I need to remove the scores above more than one question other than repeating the code multiple times?

I'd like now to see if I could place a new background graphic file to the slider with an unlabelled scale of 8 intervals with a mid-pointlike this:

|---|---|---|---|---|---|---|---|

That would be a great design option and give the scale useful detail.

Thanks for the help,
Roger
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Design options for Slider Bar Questions 1 Jahr 2 Monate her #96488

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4071
  • Dank erhalten: 748
  • Karma: 341
Is there a quick way if, for example, I need to remove the scores above more than one question other than repeating the code multiple times?
You could add something like this to the question source of all of those questions:
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function(){	
		$('#question{QID}').addClass('no-callout');
	});
</script>
That would apply a "no-callout" class to all of those questions, so in template.css you could now use this:
.no-callout .slider_callout {
	display: none !important;
}


I'd like now to see if I could place a new background graphic file to the slider with an unlabelled scale of 8 intervals with a mid-pointlike this:
1) Upload the image attached below to your template directory.

2) Add this to the question source to apply a "tick-slider" class:
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function(){	
		$('#question{QID}').addClass('tick-slider');
	});
</script>
3) Add this to the end of template.css:
.tick-slider .ui-slider {
	width: 241px;    
	height: 17px;
	margin-bottom: 20px;
	background: transparent url(bg_tick_slider_241x17.gif) 0 0 no-repeat;
	border: 0 none;
	-moz-border-radius: 0;
	border-radius: 0;
}
 
.tick-slider .ui-slider .ui-slider-handle {
	height: 1.8em;
}



If you want both features on a question, add this to the question source:
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function(){	
		$('#question{QID}').addClass('no-callout');	
		$('#question{QID}').addClass('tick-slider');
	});
</script>


Background image:
bg_tick_slider_241x17.gif
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 2 Monate her von tpartner.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.179 Sekunden
Donation Image