Welcome to the LimeSurvey Community Forum

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

Array (Text): Combining sliders with Yes/No question

  • zschaerer
  • zschaerer's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 10 months ago #154962 by zschaerer
Hello,

I want to create a question array combining sliders and radio buttons (yes/no). From a combination of two other topics ( www.limesurvey.org/forum/design-issues/1...han-textboxes#139987 and www.limesurvey.org/forum/can-i-do-this-w...,-slider-col3#143079 ), I have managed to manipulate the question type array (text) and change the text inputs to sliders and check boxes or drop downs. I don't know, though, how to get the yes/no buttons.

Thanks in advance for any help!

P.S: Limesurvey version 2.64.7+ Build 170404.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 10 months ago #154970 by tpartner
Can you attach a test survey containing only that array question and your JavaScript?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • zschaerer
  • zschaerer's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 10 months ago #154975 by zschaerer
I just sent you a pm with a link.

I would like to change the check boxes in the right column to yes/no radio buttons.

Also, I thought it would be easy to change the split sliders that I copied from www.limesurvey.org/forum/can-i-do-this-w...,-slider-col3#143079 into normal sliders. However, my very limited Javascript knowledge does not allow this. I'll open an own thread for that, though.

Cheers, z
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 10 months ago #154979 by tpartner
I didn't mean a link to a survey, I meant attach an export of a test survey. I don't have time to recreate everyone's survey for testing.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • zschaerer
  • zschaerer's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 10 months ago #154980 by zschaerer
Sorry, here is the file.



File Attachment:

File Name: limesurvey...6649.lss
File Size:20 KB
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 10 months ago #154981 by tpartner
What would you like the slider max/min/step values to be?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • zschaerer
  • zschaerer's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 10 months ago #154982 by zschaerer
min: -5
max: 5
step: 0.1
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 10 months ago - 6 years 10 months ago #154983 by tpartner
In that case, you can use this script. It will insert single-value sliders in column 1 and radios in column 2.

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Assign column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
 
      $('> *:gt(0)', this).each(function(i){
        $(this).addClass('column-'+(i+1));
        $(this).attr('data-column', i+1);
      });
    });
 
        // Insert the sliders
    $('.answer-item.column-1 input[type="text"]', thisQuestion).each(function(i) {
      $(this).closest('td').addClass('with-slider');
      var thisValue = $(this).val();
 
      $(this).bootstrapSlider({
        'min': -5,
        'max': 5,
        'step': 0.1,
        'range': false,
        'value': Number(thisValue),
        'tooltip': 'always'
      });
 
      // Initialization stuff
      if(thisValue == '') {
        $(this).val('');
        $(this).closest('td').find('.tooltip').hide();
      }
      else {
        updateCallOut($(this).closest('td'));
      }
    });
 
    // A function to update the slider callout
    function updateCallOut(el) {
      var thisTooltip = $(el).find('.tooltip');
      //$('.tooltip-inner', thisTooltip).text(callOutText);
      thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
    }
 
    // Listener on sliders
    $('td.with-slider .slider').on('mousedown', function(event, ui) {
      updateCallOut($(this).closest('td'));
    });      
    $('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
      updateCallOut($(this).closest('td'));
      checkconditions($(this).val(), $(this).attr('name'), 'text');
    });
 
    // Listener on resizing (override the bootstrap callout behaviour)
    $(window).resize(function() {
      $('td.with-slider', thisQuestion).each(function(i) {
        if($('input[type="text"]', this).val() != '') {
          updateCallOut(this);
        }
      });
    });
 
    // Some clean-up styles (could be placed in template.css
    $('thead th, .answer-item.column-1', thisQuestion).css({
      'text-align': 'center'
    });
    $('.slider.slider-horizontal', thisQuestion).css({
      'margin': '1.7em auto 1em'
    });
    $('.slider-handle', thisQuestion).css({
      'top': '-4px'
    });
 
    // Hide the text inputs in columns 2
    $('.column-2 input[type="text"]', thisQuestion).hide();
 
 
    // Loop through all column-2 inputs
    $('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) {
      var thisID = $(this).attr('id');
      var thisValue = $(this).val();
 
      // Insert the radios into
      $(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\
                    <input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
                    <label class="control-label radio-label" for="'+thisID+'-Y">Yes</label>\
                  </span>\
                  <span class="inserted-radio-wrapper">\
                    <input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
                    <label class="control-label radio-label" for="'+thisID+'-N">No</label>\
                  </span>');
 
      // Initial radio states
      $(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true);
    });
 
    // Listener on the radios
    $('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() {
      var thisInput = $(this).closest('td').find('input[type="text"]');
      $(this).closest('td').find('input[type="text"]').val($(this).val());
      checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
    });
 
    // Some clean-up styles (could be placed in template.css
    $('thead th, .answer-item.column-2', thisQuestion).css({
      'text-align': 'center'
    });
    $('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({
      'display': 'inline-block',
      'margin': '25px 10px 0 20px'
    });
    $('.answer-item.column-2 label', thisQuestion).css({
      'padding': '0'
    });
    $('.answer-item.column-2 .radio-label', thisQuestion).css({
      'padding-left': '3px',
      'margin-right': '3px'
    });
  });
</script>

You may want to add this to the end of template.css to clean it up a bit on phones:

Code:
.column-2.radio label.read::before {
  display:none !important;
}



Sample survey attached:

File Attachment:

File Name: limesurvey...6491.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: 6 years 10 months ago by tpartner.
The topic has been locked.
  • zschaerer
  • zschaerer's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 10 months ago #154993 by zschaerer
Thanks a lot, this works perfectly!
The topic has been locked.
  • zschaerer
  • zschaerer's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 9 months ago #155152 by zschaerer
There are two more things I would like to adapt:
1. Add labels to the slider in the way it was done here: www.limesurvey.org/forum/design-issues/1...in-dual-array#121844
2. Change the visual appearance of the sliders so that the left and right side of the button look the same (i.e. so that it doesn't look like the left side "fills up" when you move the slider button to the right).

Any hints on that?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 9 months ago #155154 by tpartner
Use a script like this:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Assign column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
 
      $('> *:gt(0)', this).each(function(i){
        $(this).addClass('column-'+(i+1));
        $(this).attr('data-column', i+1);
      });
    });
 
        // Insert the sliders
    $('.answer-item.column-1 input[type="text"]', thisQuestion).each(function(i) {
      $(this).closest('td').addClass('with-slider');
      var thisValue = $(this).val();
 
      $(this).bootstrapSlider({
        'min': -5,
        'max': 5,
        'step': 0.1,
        'range': false,
        'value': Number(thisValue),
        'tooltip': 'always'
      });
 
      // Initialization stuff
      if(thisValue == '') {
        $(this).val('');
        $(this).closest('td').find('.tooltip').hide();
      }
      else {
        updateCallOut($(this).closest('td'));
      }
    });
 
    // A function to update the slider callout
    function updateCallOut(el) {
      var thisTooltip = $(el).find('.tooltip');
      //$('.tooltip-inner', thisTooltip).text(callOutText);
      thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
    }
 
    // Listener on sliders
    $('td.with-slider .slider').on('mousedown', function(event, ui) {
      updateCallOut($(this).closest('td'));
    });      
    $('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
      updateCallOut($(this).closest('td'));
      checkconditions($(this).val(), $(this).attr('name'), 'text');
    });
 
    // Listener on resizing (override the bootstrap callout behaviour)
    $(window).resize(function() {
      $('td.with-slider', thisQuestion).each(function(i) {
        if($('input[type="text"]', this).val() != '') {
          updateCallOut(this);
        }
      });
    });
 
    // Insert slider left/right text
    var leftText = 'Left text';
    var rightText = 'Right text';
    $('td.with-slider', thisQuestion).append('<div class="left-text">'+leftText+'</div><div class="right-text">'+rightText+'</div>');
 
    // Some clean-up styles for the sliders (could be placed in template.css)
    $('thead th, .answer-item.column-1', thisQuestion).css({
      'text-align': 'center'
    });
    $('.slider.slider-horizontal', thisQuestion).css({
      'margin': '1.7em auto 1em'
    });
    $('.slider-selection', thisQuestion).css({
      'background': 'transparent none',
      'box-shadow': 'none'
    });
    $('.slider-handle', thisQuestion).css({
      'top': '-4px'
    });
    $('.left-text, .right-text', thisQuestion).css({
      'margin-top': '-0.5em',
      'font-size': '90%'
    });
    $('.left-text', thisQuestion).css({
      'float': 'left'
    });
    $('.right-text', thisQuestion).css({
      'float': 'right'
    });
 
    // Hide the text inputs in columns 2
    $('.column-2 input[type="text"]', thisQuestion).hide();
 
    // Loop through all column-2 inputs
    $('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) {
      var thisID = $(this).attr('id');
      var thisValue = $(this).val();
 
      // Insert the radios
      $(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\
                    <input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
                    <label class="control-label radio-label" for="'+thisID+'-Y">Yes</label>\
                  </span>\
                  <span class="inserted-radio-wrapper">\
                    <input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
                    <label class="control-label radio-label" for="'+thisID+'-N">No</label>\
                  </span>');
 
      // Initial radio states
      $(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true);
    });
 
    // Listener on the radios
    $('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() {
      var thisInput = $(this).closest('td').find('input[type="text"]');
      $(this).closest('td').find('input[type="text"]').val($(this).val());
      checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
    });
 
    // Some clean-up styles for the radios (could be placed in template.css)
    $('thead th, .answer-item.column-2', thisQuestion).css({
      'text-align': 'center'
    });
    $('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({
      'display': 'inline-block',
      'margin': '25px 10px 0 20px'
    });
    $('.answer-item.column-2 label', thisQuestion).css({
      'padding': '0'
    });
    $('.answer-item.column-2 .radio-label', thisQuestion).css({
      'padding-left': '3px',
      'margin-right': '3px'
    });
  });
</script>



Sample survey:

File Attachment:

File Name: limesurvey...6649.lss
File Size:22 KB

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: zschaerer
The topic has been locked.
  • zschaerer
  • zschaerer's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 9 months ago #155178 by zschaerer
Is it possible to have different labels for each slider?
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose