Welcome to the LimeSurvey Community Forum

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

Sliders With Control Buttons

  • Gino909
  • Gino909's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 5 months ago #175629 by Gino909
Sliders With Control Buttons was created by Gino909
Hi
We search for help for a project we facing.
We need to create a survey with +/- Buttons. Therefore we found the following workaround:

manual.limesurvey.org/Workarounds:_Quest...With_Control_Buttons

We have installed the sample template and survey but it seems not working anymore.
Can someone help us in this topic? Does someone use this extension?

We are working with version 2.65

Any hint of help very appriciated

Thank you

Gino
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago #175635 by tpartner
Replied by tpartner on topic Sliders With Control Buttons
That jQuery plugin was developed for version 2.05 which used jQuery UI sliders. The newer versions of LimeSurvey use Bootstrap sliders so a new plugin is required. If I have time, I will put something together next week.

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: Gino909
The topic has been locked.
  • Gino909
  • Gino909's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 5 months ago #175669 by Gino909
Replied by Gino909 on topic Sliders With Control Buttons
Hi Tony
Thank you for your answer! That would be great if you could help us in this situation.
Please let me know! Thank you
BR, Gino
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago - 5 years 5 months ago #175829 by tpartner
Replied by tpartner on topic Sliders With Control Buttons
I can't test in 2.65 but this will work in 2.73.

1) Place this in template.js:
Code:
(function( $ ){
 
  $.fn.sliderButtons = function(options) {
 
    // The defaults, extended and modified with any passed in the function call
    var opts = $.extend( {
    downText: '-',    // Text for the "down" button
    upText: '+',    // Text for the "up" button
    scrolling: true,  // Continuous slider movement if left mouse button held down
    scrollInterval: 150,// Interval (in ms) between slider movement when button is held down
    valuePrefix: '',  // Prefix for callout
    valueSuffix: ''  // Suffix for callout
    }, options);
 
    return this.each(function(i) {
 
      var thisQuestion = $(this);
 
      // Add some classes
      $(thisQuestion).addClass('slider-button-question');    
 
      // Insert the buttons
      $('.question-item', thisQuestion).append('<div class="clearfix" />\
                            <div class="slider-button-wrapper">\
                              <button type="button" class="slider-button down btn btn-md  btn-primary">'+opts.downText+'</button>\
                              <button type="button" class="slider-button up btn btn-md  btn-primary">'+opts.upText+'</button>\
                            </div>');      
      // Initial button states
      function handleButtonState(slider) {
        var thisRow = $(slider).closest('.question-item');
        var thisSliderVal = $(slider).val();
        var thisSliderStep = $(slider).attr('data-bs-slider-step');
        var thisSliderMin = $(slider).attr('data-bs-slider-min');
        var thisSliderMax = $(slider).attr('data-bs-slider-max');
        $('button.slider-button', thisRow).prop('disabled', false);
        if (thisSliderVal == thisSliderMin) {
          $('button.slider-button.down', thisRow).prop('disabled', true);
        }
        if (thisSliderVal == thisSliderMax) {
          $('button.slider-button.up', thisRow).prop('disabled', true);
        }
      }
 
      $('input:text.form-control', thisQuestion).each(function(i) {
        var thisInput = $(this);
        $(this).on('slideEnabled', function( event, ui ) {
          var thisRow = $(thisInput).closest('.question-item');
          handleButtonState(thisInput);
          if($('input.text', thisRow).val() != '') {
            $('.tooltip-inner', thisRow).text(opts.valuePrefix+$(thisInput).val()+opts.valueSuffix);
          }
 
          // Listener on sliders
          $(thisInput).on('slide slideStop', function( event, ui ) {
            handleButtonState(thisInput);
          });
        });
      });  
 
      // Function to handle button actions
      function handleButtons(thisButton) {
        var thisRow = $(thisButton).closest('.question-item');
        var thisSlider = $('input:text.form-control:eq(0)', thisRow);
        var thisSliderStep = $(thisSlider).attr('data-bs-slider-step');
        var stepDecimals = 0;
        if(thisSliderStep.toString().indexOf('.') >= 0) {
          stepDecimals = thisSliderStep.toString().split('.')[1].length;
        }
        var thisSliderVal = Number($(thisSlider).val()).toFixed(stepDecimals);
        var thisSliderMin = $(thisSlider).attr('data-bs-slider-min');
        var thisSliderMax = $(thisSlider).attr('data-bs-slider-max');
        console.log(thisSliderVal+':'+thisSliderMax);
        if ($(thisButton).hasClass('down') &amp;&amp; Number(thisSliderVal) > Number(thisSliderMin)) {
          $(thisSlider).bootstrapSlider('setValue', Number(thisSliderVal)-Number(thisSliderStep));
        }
        if ($(thisButton).hasClass('up') &amp;&amp; Number(thisSliderVal) < Number(thisSliderMax)) {
          $(thisSlider).bootstrapSlider('setValue', Number(thisSliderVal)+Number(thisSliderStep));
        }
        var newValue = Number($(thisSlider).val()).toFixed(stepDecimals).replace(/\./, LSvar.sLEMradix);
        var hiddenInput = $('input.em_sq_validation:eq(0)', thisRow);
        $(hiddenInput).val(newValue).trigger('change');
        $('.tooltip-inner', thisRow).text(opts.valuePrefix+newValue+opts.valueSuffix);
      }
 
      // Scrolling
      if(opts.scrolling == true) {
 
        var sliderTimeout;
        var clicker = $('button.slider-button', thisQuestion);
        var count = 0;
 
        $('button.slider-button', thisQuestion).on('mousedown touchstart', function(){
          var thisButton = $(this);
          sliderTimeout = setInterval(function(){
            handleButtons(thisButton);
          }, opts.scrollInterval);        
          return false;
        });        
 
        $(document).on('mouseup touchend', function(){
          clearInterval(sliderTimeout);
          return false;
        });
        $('button.slider-button', thisQuestion).mouseout(function(){
          handleButtonState($(this).closest('.question-item').find('input:text.form-control'));
        });
      }
 
      // Listener on the buttons
      $('button.slider-button', thisQuestion).on('click touchend', function(e) {
        handleButtons(this)  ;    
        handleButtonState($(this).closest('.question-item').find('input:text.form-control:eq(0)'));
      });
 
      // Listener on reset buttons
      $('.slider-reset', thisQuestion).on( "click", function( event, ui ) {
        var thisReset = $(this);
        setTimeout(function() {
          handleButtonState($(thisReset).closest('.question-item').find('input:text.form-control:eq(0)'));
        }, 150);
      });
    });
  };
})( jQuery );

2) Place something like this in template.css:
Code:
  .slider-button-question .slider-container {
    margin-bottom: 0;
  }
 
  .slider-button-question .slider-button-wrapper {
    margin: 0 0 0 25px;
    text-align: center;
  }
 
  .slider-button-question .slider-button-wrapper button {
    padding: 0 10px;
    margin: 0 0 0 5px;
  }
 
  .slider-button-question .slider-button-wrapper button:disabled {
    opacity:0.65;
    filter:alpha(opacity=65);
    cursor: default;
  }
 
  .slider-button-question .slider-reset {
    margin-top: 42px;
  }

3) Place something like this in the source of the question:
Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){
    $('#question{QID}').sliderButtons({
      downText: 'Down', // Text for the "down" button
      upText: 'Up', // Text for the "up" button
      scrolling: true, // Continuous slider movement if left mouse button held down
      scrollInterval: 250, // Interval (in ms) between slider movement when button is held down
      valueSuffix: "%"  // Suffix for callout
    });
  });  
</script>

Here is a sample survey with all JavaScript and CSS in the source of the first question:

File Attachment:

File Name: limesurvey...0-25.lss
File Size:22 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 5 years 5 months ago by tpartner.
The following user(s) said Thank You: Gino909
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago #175868 by tpartner
Replied by tpartner on topic Sliders With Control Buttons
Here is a custom question theme for sliders with control buttons in LimeSurvey 3.x - github.com/tpartner/LimeSurvey-Slider-Controls-3x

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: DenisChenu
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago - 5 years 5 months ago #175878 by DenisChenu
Replied by DenisChenu on topic Sliders With Control Buttons
A question Tony : why you disable hidden ? github.com/Shnoulle/LimeSurvey-Slider-Co...eric/config.xml#L110

I understand it can not be needed, but sometime : i add a question, activate susrvey, and final user want to remove this question.
Or i add more question than needed, set hidden to show it some week after (but i can use condition).

PS : and as always : thank you for your question template ;)

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: 5 years 5 months ago by DenisChenu.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago - 5 years 5 months ago #175880 by tpartner
Replied by tpartner on topic Sliders With Control Buttons

A question Tony : why you disable hidden ?

Simply because I figured if you are using this custom question, it won't be hidden. Yes, I agree that it may be used after activation (when a client changes their mind) to hide a question but I prefer relevance for that. :)

Some outstanding issues...

1) We need a better way to hide those attributes - this method smells of a hack.

2) We need an automatic path to the /assets directory for the preview image - github.com/Shnoulle/LimeSurvey-Slider-Co...meric/config.xml#L32 . I tried several relative paths without success until I ended up with what you see - ugh!

3) I am still waiting for a fix on this bug - github.com/Shnoulle/LimeSurvey-Slider-Co...eric/config.xml#L110 - so we can have language-dependent button labels, etc.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 5 years 5 months ago by tpartner.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago #175900 by DenisChenu
Replied by DenisChenu on topic Sliders With Control Buttons

tpartner wrote:

A question Tony : why you disable hidden ?

Simply because I figured if you are using this custom question, it won't be hidden.

Yes, but it can be true for a majority of setings, question type :).

In my opinion : if the setting is incompatible : must be hidden, but if the setting work : don't hide it.

About other part : i start to fix some issue in question template … I think 3 is the priority.
You report the 2 other's ?

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.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago #175907 by tpartner
Replied by tpartner on topic Sliders With Control Buttons

In my opinion : if the setting is incompatible : must be hidden, but if the setting work : don't hide it.

Okay, I bow to your criticism - github.com/tpartner/LimeSurvey-Slider-Co...8326b9b5a6339ac86f82

You report the 2 other's ?

- bugs.limesurvey.org/view.php?id=14185
- bugs.limesurvey.org/view.php?id=14186

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: DenisChenu
The topic has been locked.
  • Gino909
  • Gino909's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 5 months ago #175983 by Gino909
Replied by Gino909 on topic Sliders With Control Buttons
Hi tpartner

You are a genius! :woohoo:
thank you very much for providing this solution!
Works great also with Version 2.65. We will integrate it and test it. But at first look it is doing what we need to do!
Have a nice weekend and thanks again!
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose