Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Array (numbers) & slider with labels

  • realChopin
  • realChopin's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 11 months ago #196262 by realChopin
Array (numbers) & slider with labels was created 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! :)
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #196280 by tpartner
Replied by tpartner on topic Array (numbers) & slider with labels
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.
The following user(s) said Thank You: realChopin
The topic has been locked.
  • realChopin
  • realChopin's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 11 months ago #196307 by realChopin
Replied by realChopin on topic Array (numbers) & slider with labels
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!



The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #196312 by Joffm
Replied by Joffm on topic Array (numbers) & slider with labels
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
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago - 3 years 11 months ago #196331 by DenisChenu
Replied by DenisChenu on topic Array (numbers) & slider with labels
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 .
I don't answer to private message.
Last edit: 3 years 11 months ago by DenisChenu.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #196338 by tpartner
Replied by tpartner on topic Array (numbers) & slider with labels
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.
The following user(s) said Thank You: realChopin
The topic has been locked.
  • realChopin
  • realChopin's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 11 months ago #196340 by realChopin
Replied by realChopin on topic Array (numbers) & slider with labels
True.. Maybe I change it again
The topic has been locked.
  • realChopin
  • realChopin's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 11 months ago #196341 by realChopin
Replied by realChopin on topic Array (numbers) & slider with labels
This would look great! Did you use array (numeric) or a multiple numeric input? I use version 2.64.1
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #196343 by tpartner
Replied by tpartner on topic Array (numbers) & slider with labels
I used multiple numeric but in your version you may need to add this to the end of your template.css file.

Code:
@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.
The topic has been locked.
  • realChopin
  • realChopin's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 11 months ago #196349 by realChopin
Replied by realChopin on topic Array (numbers) & slider with labels
Thank you so much, this works!! :)
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose