Welcome to the LimeSurvey Community Forum

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

3 part slider (multi numeric)

wingmorgan
Topic Author
Offline
New Member

More

3 years 4 months ago #210047 by wingmorgan

3 part slider (multi numeric) was created by wingmorgan

Hi,

Trying to setup question: What is the approx % split of your customers? with three 'blocks' "under 30", 30-40, "over 40".

The desire is to have a multi-way slider (bad ascii art).

Code:

    20%          30%                       50%
|-- <30 --M---- 30-40 ------M------------- 40+ ---------------|

From seiyria.com/bootstrap-slider/ - "Example 12: Coloring the low and high track segments." Looks promising for the underlying CSS rendering.

Any suggestions for an example / method for hooking this together with the multi-numeric question type with slider options (I'm guessing with custom.css etc).

Thanks,

Carl / Wing

(Using hosted limequery.net service / versions etc)

[ Bonus points I would love a dynamic pie chart visualisation, rather than linear - but that is a different thread / request

]

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

3 years 4 months ago - 3 years 4 months ago #210079 by tpartner

Replied by tpartner on topic 3 part slider (multi numeric)

LimeSurvey does not offer a range slider but you could insert a custom range slider.

1) Create a multiple-numeric question with 3 sub-questions. Do not implement the LimeSurvey slider.

2) Add the following script to the source of the question. This will hide the answer inputs, insert a range slider and populate the hidden answer inputs with "low", "middle" and "high" percentages.

Code:

<script type="text/javascript" charset="utf-8">  
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var qID = '{QID}';
    var thisQuestion = $('#question'+qID);
 
    // Path to the LS installation root
    var rootPath = location.pathname.split('index.php')[0]; 
 
    // Hide the answer inputs
    $('.subquestion-list', thisQuestion).hide();
 
    // Insert an input for the slider
    $('.answer-container', thisQuestion).prepend('<div class="inserted-slider-wrapper"><input id="range'+qID+'" type="text" value="" /></div>');
 
    // Include the Bootstrap slider styles
    $('head').append('<link rel="stylesheet" href="'+rootPath+'assets/packages/bootstrap/plugins/slider/css/bootstrap-slider.css" type="text/css" />');
 
    // Get the Bootstrap slider script
    $.getScript(rootPath+'assets/packages/bootstrap/plugins/slider/bootstrap-slider.js')
      .done(function( script, textStatus ) {
 
        //Initial slider values
        var lowValue = 33;
        var highValue = 67;
        var emptyInputs = $(':text.form-control', thisQuestion).filter(function() {
          return $.trim($(this).val()) == '';
        });
        if(emptyInputs.length == 0) {
          lowValue = Number($(':text.form-control:eq(0)', thisQuestion).val());
          highValue = Number($(':text.form-control:eq(0)', thisQuestion).val()) + Number($(':text.form-control:eq(1)', thisQuestion).val());
        }
 
        // Initate the range slider
        $('#range'+qID+'').slider({
          min: 0,
          max: 100,
          step: 1,
          range: true,
          value: [lowValue,highValue]
        })
        // Listener on the slider
        .on('change', function(e) {
          var lowPercent = round((e.value.newValue[0]/100)*100);
          var highPercent = round(100 - (e.value.newValue[1]/100)*100);
          var middlePercent = round(100 - (highPercent+lowPercent));
 
          // Load the answer inputs
          $(':text.form-control:eq(0)', thisQuestion).val(lowPercent).trigger('keyup');
          $(':text.form-control:eq(1)', thisQuestion).val(middlePercent).trigger('keyup');
          $(':text.form-control:eq(2)', thisQuestion).val(highPercent).trigger('keyup');
 
          handleTooltips();
        });
 
        // Insert some custom tooltips
        $('.slider-track > div', thisQuestion).append('<div class="inserted-tooltip hidden" />');
        handleTooltips();
      })
      .fail(function( jqxhr, settings, exception ) {
        console.log( exception );
    });
 
    // A function to handle the custom tooltips
    function handleTooltips() {
      $(':text.form-control', thisQuestion).each(function(i) {
        if($(this).val() != '') {
          $('.inserted-tooltip:eq('+i+')', thisQuestion).text($(this).val()+'%').removeClass('hidden');
        }
      });
    }
    });
</script>

3) Add the following styles to the question source:

Code:

<style type="text/css">
 
  .inserted-slider-wrapper .slider.slider-horizontal {
    width: 100%;
    margin: 40px 0 20px 0;
  }
 
  .inserted-slider-wrapper .slider-track,
  .inserted-slider-wrapper .slider-selection {
    box-shadow: none;
    background: transparent none;
  }
 
  .inserted-slider-wrapper .slider-track-low {
    background: red;
  }
 
  .inserted-slider-wrapper .slider-selection {
    background: orange;
  }
 
  .inserted-slider-wrapper .slider-track-high {
    background: green;
  }
 
  .inserted-slider-wrapper .inserted-tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    padding: 0 5px 2px 5px;
    border: 1px solid #ccc;
    border-radius: 4px; 
    transform: translateX(-50%);
  }
 
  .inserted-slider-wrapper .tooltip {
    display: none !important;
  }
</style>

Sample survey attached:

File Attachment:

File Name: limesurvey...1(2).lss
File Size:26 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 3 years 4 months ago by tpartner.

The following user(s) said Thank You: wingmorgan

The topic has been locked.

wingmorgan
Topic Author
Offline
New Member

More

3 years 4 months ago #210082 by wingmorgan

Replied by wingmorgan on topic 3 part slider (multi numeric)

Thanks Tony - looks really promising....

When I pulled download latest LS CE 3.25.6 and did a local install from scratch (Ubuntu Bionic based) everything works just fine - very pretty.....

However, when I tried importing your LSS using on the SaaS option (currently 3.25.4) it doesn't seem to render the bars - my limited digging shows 404s for

Code:

/375771assets/packages/bootstrap/plugins/slider/bootstrap-slider.js?_=1610068553035:1375771?newtest=Y&amp;lang=en:424 
bootstrap-slider.css:1

Which feels like a plugin / theme based mis-match, but I'm flailing in the dark somewhat. I think I might have cut/paste from other support links wrt bootstrap-slider.js without realising dependencies / subtleties....

Do I just need to wait for the back end to be updated or am I off in the weeds trying to use limequery.net for this?

Many thanks,

Carl

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

3 years 4 months ago - 3 years 4 months ago #210095 by tpartner

Replied by tpartner on topic 3 part slider (multi numeric)

Try replacing this:

Code:

// Path to the LS installation root
var rootPath = location.pathname.split('index.php')[0];

With an absolute path to your LimeSurvey installation root:

Code:

// Path to the LS installation root
var rootPath = 'http://yourDomaine/LimeSurvey/';

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 3 years 4 months ago by tpartner.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

3 years 2 months ago #212294 by tpartner

Replied by tpartner on topic 3 part slider (multi numeric)

Here is a custom question theme for a range slider:

3.x - github.com/tpartner/LimeSurvey-Range-Slider-3x

4.x - github.com/tpartner/LimeSurvey-Range-Slider-4x

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

3 part slider (multi numeric)

File Attachment:

Lime-years ahead

Legal

About Us

Open Source