Array (numbers) & slider with labels

More
2 months 2 days ago #196262 by realChopin
Dear all,
I am very new here in the forum and have not yet found an answer to my problem.
I would like to ask several questions in a matrix and I have already managed to get a slider (1-10). It would be great if I could still get two things done:
- When the question appears, the numbers (1-10 above the slider) should already be visible and not just the empty slider.
- If possible, there should be "not at all" in front of the slider and "very much" behind the slider. I have also tried the question type "multiple numeric input", but I didn't manage it.

This is the code I used for the slider:

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider (197354);

function insertSlider (qID) {

// Identify this question
var thisQuestion = $('#question'+qID);
thisQuestion.addClass('with-dropdown-sliders');

// Loop through all array drop-downs
$('select.multiflexiselect', thisQuestion).each(function(i, el){
var thisCell = $(el).closest('td');

// Hide the dropdown
$(el).hide();

// Some dropdown values
var currentVal = $(el).val();
var firstVal = Number($('option[value!=""]:first', el).attr('value'));
var secondVal = Number($('option[value!=""]:eq(1)', el).attr('value'));
var lastVal = Number($('option[value!=""]:last', el).attr('value'));

// Insert an input for the slider
var thisInput = $('<input class="inserted-input" type="text" />').insertAfter(el);

// Initiate the slider
thisInput.val(currentVal).bootstrapSlider({
'min': firstVal,
'max': lastVal,
'step': secondVal - firstVal,
'value': Number(currentVal),
'tooltip': 'always'
});

// Listener on the slider
$(thisInput).on('slideStop', function () {
if($('.tooltip', thisCell).is(':hidden')) {
$('.tooltip', thisCell).show();
$('.tooltip', thisCell).css('margin-left', '-'+($('.tooltip', thisCell).width()/2)+'px');
}
$(el).val($(thisInput).val());
});

// Hide the slider call-out if no value selected yet
if(currentVal == '') {
$('.tooltip', thisCell).hide();
}
});
}
});
</script>
<style type="text/css">.with-dropdown-sliders .slider.slider-horizontal {
margin: 1.5em auto 1em auto;
width: 90%;
}

.with-dropdown-sliders .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}


@media(min-width: 769px){
.answertext{
text-align: left !important;
padding-left: 20px !important;
}
}

@media(max-width: 769px){
.answertext{
text-align: left !important;
padding-left: 0px !important;
font-size: 1 em !important;
}

.qnumcode.question-text{
font-size: 1.1 em;
text-align: center;
}
}
</style>



I would be very grateful for any help! :)
Attachments:

Please Log in to join the conversation.

More
2 months 2 days ago #196280 by tpartner
It looks to me like you only have one column so should be using the core sliders in a multiple-numeric type question.

What did you try with that question type and what went wrong?

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: realChopin

Please Log in to join the conversation.

More
2 months 2 days ago #196307 by realChopin
Thank you very much for your answer! Yes I tried the core slider and it works, except that in the mobile version the labeling is then moved around a lot, so it will probably be unclear to participants.

Would you know how to improve this?
Should I insert the label of the slider in a different way than directly in the sub-questions (see picture)?

Best wishes!



Attachments:

Please Log in to join the conversation.

More
2 months 2 days ago #196312 by Joffm
As you see, on mobiles a slider question is very difficult to handle.
What we do, is to check whether the survey is answered on a mobile or not and then display the question in different ways,
e.g. without the left and right text (which is the same in your survey, so you may explain this in the question text)

Of course you have to restructure your data afterwards a bit.

Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: realChopin

Please Log in to join the conversation.

More
2 months 2 days ago - 2 months 2 days ago #196331 by DenisChenu
If you want something easy use : don't use slider ... dropdown or number are always the best solution.

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
An error happen ? Before make a new topic : remind the Debug mode .
Last edit: 2 months 2 days ago by DenisChenu.

Please Log in to join the conversation.

More
2 months 2 days ago #196338 by tpartner
What LS version are you using?

This is what I see in version 3.22.6 .


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:
The following user(s) said Thank You: realChopin

Please Log in to join the conversation.

More
2 months 2 days ago #196340 by realChopin
True.. Maybe I change it again

Please Log in to join the conversation.

More
2 months 2 days ago #196341 by realChopin
This would look great! Did you use array (numeric) or a multiple numeric input? I use version 2.64.1

Please Log in to join the conversation.

More
2 months 2 days ago #196343 by tpartner
I used multiple numeric but in your version you may need to add this to the end of your template.css file.

@media (max-width: 768px) {
 
	.withslider,
	.withslider label {
		padding: 0
	}
 
	.slider-container > div {
		position: relative;
		padding: 50px 0 0 0;
	}
 
	span.slider-left-span,
	span.slider-right-span {
		position: absolute;
		top: 0;
		width: auto;
	}
 
	span.slider-left-span {
		left: 0;
	}
 
	span.slider-right-span {
		right: 0;
	}
}

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
2 months 2 days ago #196349 by realChopin
Thank you so much, this works!! :)

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now