Welcome to the LimeSurvey Community Forum

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

Can I have sliders in a Matrix question?

More
12 years 3 months ago #69475 by Ralle
Hi there,

Can you tell me if it is possible to have a dual matrix question using sliders to input numerical values?

Thank you already!
Ralle
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
12 years 3 months ago - 12 years 3 months ago #69480 by tpartner
Replied by tpartner on topic Can I have sliders in a Matrix question?
The slider is only available "out-of-the-box" in the Multiple Numerical question type.

In an array-dual-scale-dropdown, you can use custom JavaScript to:
- hide the dropdowns
- insert a slider in each array cell
- select the hidden dropdown value based on the slider value

1) Set up your survey to use JavaScript .

2) Create your array-dual-scale-dropdown question with the numerics you require as answer options for each scale.

3) Add the following script to the source of the array. Replace "QQ" with the array question ID .
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
 
    insertSlider (QQ);
 
    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:last', el).val());
 
        // Insert a a container for the slider
        var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);
 
        // Insert a callout
        var callout = $('<div id="callOut-'+id+'" class="customCallout"></div>').appendTo(container).text($('option:selected', el).val());
 
        // 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 ) {
            $('option[value="'+ui.value+'"]', el).attr('selected', 'selected');
            //$('#callOut-'+id).text($('option:selected', el).val()).css({'left': $('#slider-'+id+' .ui-slider-handle').css('left')});
 
            function updateCustomCallout() {
              $('#callOut-'+id).text($('option:selected', el).val()).css({'left': $('#slider-'+id+' .ui-slider-handle').css('left')});
            }
            // Delay updating the callout because it was picking up the last postion of the slider
            setTimeout(updateCustomCallout, 10);
          }
        });
 
        // Change the slider if the dropdown is changed
        // (not required if dropdown is hidden)
        $(el).change(function() {
          slider.slider('value', Number($('option:selected', el).val()));
          $('#callOut-'+id).text($('option:selected', el).val());
        });
 
        // Set a value as soon as the slider handle is clicked
        $('#slider-'+id+' .ui-slider-handle').mousedown(function() {
          $('option[value="'+slider.slider('value')+'"]', el).attr('selected', 'selected');
          $('#callOut-'+id).text(slider.slider('value'));
        });
      });
    }
 
  });
</script>

4) Add the following styles to template.css (these are for the default template and may need to be tweaked for others):
Code:
.customCallout {
  position: relative;
  width: 50px;
  text-align: left;
  height: 1.75em; 
  font-weight: bold;
  margin-left: -0.3em;
}
 
.customSliderWrapper {
  position: relative;
  margin: 0 10px;
}


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 12 years 3 months ago by tpartner.
The following user(s) said Thank You: Ralle, tomscher
The topic has been locked.
More
12 years 3 months ago #69490 by Ralle
Replied by Ralle on topic Can I have sliders in a Matrix question?
Wow, that's great!
Thank you very, very much for supplying copy&paste-ready code solving exactly what I was asking. Awesome job!
The topic has been locked.
  • Mazi
  • Mazi's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
12 years 3 months ago #69492 by Mazi
Replied by Mazi on topic Can I have sliders in a Matrix question?
Really cool solution! You know where to place it :-)

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support: survey-consulting.com
Contact: marcel.minke(at)survey-consulting.com
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
12 years 3 months ago #69581 by tpartner
Replied by tpartner on topic Can I have sliders in a Matrix question?
I added this solution to the workarounds section - docs.limesurvey.org/Workarounds%3A+Quest...y-Dual-Scale-Numbers

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
12 years 2 months ago - 12 years 2 months ago #72086 by yuniper
Replied by yuniper on topic Can I have sliders in a Matrix question?
Hi guys,

I am completely new to Limesurvey but am very intersted in the options explained above. I have tried to replicate this and succeeded in getting 2 slide scales next to eachother but I cannot move to a specific value. Instead when I click on the scale the value 1 appears above it (see picture). I am thinking I may have done something wrong when specifying the answer options?

Also in my case I would actually like the first scale to be "regular" tick the option that is applicable style and the second scale to look like a slider scale in the range of 0-100. To be more specific, I only want the respondent to fill out the slider scale question if they answered "yes" to the first question...

Any tips are highly appreciated :)
Attachments:
Last edit: 12 years 2 months ago by yuniper.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
12 years 2 months ago #72095 by tpartner
Replied by tpartner on topic Can I have sliders in a Matrix question?
yuniper. can you attach a sample survey with your code in it?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
12 years 2 months ago #72115 by yuniper
Replied by yuniper on topic Can I have sliders in a Matrix question?
Hi tpartner

I think I can if you give me more specific instructions ;)
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
12 years 2 months ago #72125 by tpartner
Replied by tpartner on topic Can I have sliders in a Matrix question?
Create a small sample survey with your question(s) and JavaScript code in place.

Export the survey as a LimeSurvey XML survey file (*.lss).


Then attach it here.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Mazi
  • Mazi's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
12 years 2 months ago #72126 by Mazi
Replied by Mazi on topic Can I have sliders in a Matrix question?

yuniper wrote: Hi tpartner

I think I can if you give me more specific instructions ;)

???

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support: survey-consulting.com
Contact: marcel.minke(at)survey-consulting.com
The topic has been locked.
More
12 years 2 months ago #72133 by yuniper
Replied by yuniper on topic Can I have sliders in a Matrix question?
Thanks for the instructions, have attached it to this post :)

File Attachment:

File Name: limesurvey...1274.lss
File Size:28 KB
The topic has been locked.
More
12 years 2 months ago #72134 by yuniper
Replied by yuniper on topic Can I have sliders in a Matrix question?
PS when I preview the survey, I do get the start screen but a blank one after that. Whereas I _can_ preview the items individually..
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose