Welcome to the LimeSurvey Community Forum

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

Problems with sliders within dual array

  • Frollein
  • Frollein's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 9 months ago - 8 years 9 months ago #121826 by Frollein
Problems with sliders within dual array was created by Frollein
Dear Forum,

this great workaround helped me to create a dual array containing sliders:
manual.limesurvey.org/Workarounds:_Quest...20in%20Array-Numbers

I love this function, but still have two problems:
1. When the handle of one slider is moved more than once, sometimes the shown number doesn't change anymore. So, if you move the handle from the 2-position to 3, 4, or anywhere else, it still shows 2. Also, the wrong number is taken as value. Is there any possibility to fix this?
2. Is it possible to label the sliders separately for each column? I'd like to label the first column-sliders with something like rarely|often and the second column-sliders with something like weak|strong.

Thanks!

--
Version 2.05+ Build 150520
Last edit: 8 years 9 months ago by Frollein.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 9 months ago - 8 years 9 months ago #121831 by tpartner
Replied by tpartner on topic Problems with sliders within dual array
That workaround was for an old version of jQuery - I have updated it for 2.05.

Here is the new JavaScript:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
 
    insertSlider ({QID});
 
    function insertSlider (qID) {
 
      $('#question'+qID+' select').each(function(i, el){
 
        // Hide the dropdown
        $(el).hide();
 
        var id = $(el).attr('id').replace(/#/g,'-');

        // Some dropdown values
        var currentVal = Number($('option:selected', el).val());
        var firstVal = Number($('option[value!=""]:first', el).val());
        var secondVal = Number($('option[value!=""]:first', el).next('option').val());
        var lastVal = Number($('option[value!=""]:last', el).val());
 
        // Insert a container for the slider
        var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);
 
        // Initiate the slider
        var slider = $('<div id="slider-'+id+'" class="customSlider"></div>').appendTo(container).slider({
          min: firstVal,
          max: lastVal,
          range: 'min',
          value: currentVal,
          step: secondVal - firstVal,
          slide: function( event, ui ) {
            $(el).val(ui.value);
            $('#callOut-'+id).text($(el).val());
          }
        });
 
        // Insert a callout
        var callout = $('<div id="callOut-'+id+'" class="slider_callout slider-callout"></div>').appendTo($('#slider-'+id+' .ui-slider-handle')).text($('option:selected', el).val());
 
        // Set a value as soon as the slider handle is clicked
        $('#slider-'+id+' .ui-slider-handle').mousedown(function() {
          $(el).val(slider.slider('value'));
          $('#callOut-'+id).text($(el).val());
        });
      });
    }
  });
</script>

And the new CSS:

Code:
.customSliderWrapper {
  position: relative;
  margin: 0 10px;
  padding-top: 1.75em;
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 9 months ago by tpartner.
The following user(s) said Thank You: Frollein
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 9 months ago #121832 by tpartner
Replied by tpartner on topic Problems with sliders within dual array
Regarding question 2, there isn't a lot of room in the array cells for left and right labels. Can you provide a mockup of what you want?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Frollein
  • Frollein's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 9 months ago #121841 by Frollein
Replied by Frollein on topic Problems with sliders within dual array
Thanks so much! The script works fine.
You are right, there's not a lot of room for labels except maybe below the slider? I thought of something like this:
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 9 months ago #121844 by tpartner
Replied by tpartner on topic Problems with sliders within dual array
Okay, to insert slider left/right text, you would need to use JavaScript like this (modify the "column1LeftText, column1RightText , column2LeftText , column2RightText" variables as necessary):

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
 
    insertSlider ({QID});
 
    function insertSlider (qID) {
 
      // Define slider left and right texts
      var column1LeftText = 'selten';
      var column1RightText = 'häufig';
      var column2LeftText = 'schwach';
      var column2RightText = 'stark';
 
      $('#question'+qID+' select').each(function(i, el){
 
        // Hide the dropdown
        $(el).hide();
 
        var id = $(el).attr('id').replace(/#/g,'-');

        // Some dropdown values
        var currentVal = Number($('option:selected', el).val());
        var firstVal = Number($('option[value!=""]:first', el).val());
        var secondVal = Number($('option[value!=""]:first', el).next('option').val());
        var lastVal = Number($('option[value!=""]:last', el).val());
 
        // Insert a container for the slider
        var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);
 
        // Initiate the slider
        var slider = $('<div id="slider-'+id+'" class="customSlider"></div>').appendTo(container).slider({
          min: firstVal,
          max: lastVal,
          range: 'min',
          value: currentVal,
          step: secondVal - firstVal,
          slide: function( event, ui ) {
            $(el).val(ui.value);
            $('#callOut-'+id).text($(el).val());
          }
        });
 
        // Insert a callout
        var callout = $('<div id="callOut-'+id+'" class="slider_callout slider-callout"></div>').appendTo($('#slider-'+id+' .ui-slider-handle')).text($('option:selected', el).val());
 
        // Set a value as soon as the slider handle is clicked
        $('#slider-'+id+' .ui-slider-handle').mousedown(function() {
          $(el).val(slider.slider('value'));
          $('#callOut-'+id).text($(el).val());
        });
 
        // Insert the slider left/right text elements
        var thisCellIndex =  $('td.answer-item', $(this).closest('tr.questions-list')).index($(this).closest('.answer-item'));
        var insertedLeftText = column1LeftText;
        var insertedRightText = column1RightText;
        if(thisCellIndex > 0) {
        var insertedLeftText = column2LeftText;
        var insertedRightText = column2RightText;
        }
        $('#slider-'+id).after('<div class="inserted-slider-text-wrapper">\
                      <div class="inserted-slider-left-text">'+insertedLeftText+'</div>\
                      <div class="inserted-slider-right-text">'+insertedRightText+'</div>\
                    </div>');
      });
    }
  });
</script>


And, CSS like this:

Code:
.customSliderWrapper {
  position: relative;
  margin: 0 10px;
  padding-top: 1.75em;
}
 
.inserted-slider-text-wrapper {
  margin-top: 5px;
}
 
.inserted-slider-left-text,
.inserted-slider-right-text {
  font-size: 10px;
}
 
.inserted-slider-left-text {
  float: left;
}
 
.inserted-slider-right-text {
  float: right;
}


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: Frollein
The topic has been locked.
  • Frollein
  • Frollein's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 8 months ago #121870 by Frollein
Replied by Frollein on topic Problems with sliders within dual array
Wow- looks great! Thanks!
It works out very well with my modified basic and default themes! I tested it also with the the clear_logo theme, where the labels present centered though.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose