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

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 10 months ago #155184 by tpartner
Replied by tpartner on topic Array (Text): Combining sliders with Yes/No question
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);
        }
      });
    });
 
    // Define the slider left/right labels
    var sliderLeftLabels = ['Left text 1', 'Left text 2','Left text 3','Left text 4','Left text 5'];
    var sliderRightLabels = ['Right text 1', 'Right text 2', 'Right text 3', 'Right text 4', 'Right text 5'];
 
    // Insert slider left/right labels
    $('td.with-slider', thisQuestion).append('<div class="left-text"></div><div class="right-text"></div>');
    $('.left-text', thisQuestion).each(function(i) {
      $(this).text(sliderLeftLabels[i]);
    });
    $('.right-text', thisQuestion).each(function(i) {
      $(this).text(sliderRightLabels[i]);
    });
 
    // 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>



File Attachment:

File Name: limesurvey...5-24.lss
File Size:23 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
  • zschaerer
  • zschaerer's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 10 months ago #155193 by zschaerer
Replied by zschaerer on topic Array (Text): Combining sliders with Yes/No question
Thank you very much for your help, this is now just how I need it.
The topic has been locked.
  • zschaerer
  • zschaerer's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 10 months ago #155360 by zschaerer
Replied by zschaerer on topic Array (Text): Combining sliders with Yes/No question
I have noticed a bug in this workaround: the random display of the questions does not work properly. If the random display function is activated, the rows of the first column (questions) are displayed randomly but the rows of the other columns (answer options) are not. Is it possible to fix this?
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 #155380 by tpartner
Replied by tpartner on topic Array (Text): Combining sliders with Yes/No question
This was not intended to work with the LimeSurvey random answers setting. There is no way for that to work if you have defined sequential slider labels.

You will need to disable the LimeSurvey setting and randomize the rows via JavaScript:

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);
        }
      });
    });
 
    // Define the slider left/right labels
    var sliderLeftLabels = ['Left text 1', 'Left text 2','Left text 3','Left text 4','Left text 5'];
    var sliderRightLabels = ['Right text 1', 'Right text 2', 'Right text 3', 'Right text 4', 'Right text 5'];
 
    // Insert slider left/right labels
    $('td.with-slider', thisQuestion).append('<div class="left-text"></div><div class="right-text"></div>');
    $('.left-text', thisQuestion).each(function(i) {
      $(this).text(sliderLeftLabels[i]);
    });
    $('.right-text', thisQuestion).each(function(i) {
      $(this).text(sliderRightLabels[i]);
    });
 
    // 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'
    });
 
    // Randomize the array rows
    function shuffleArray(array) {
      for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
      }
      return array;
    }
    var tr = $('tr.subquestion-list', thisQuestion).detach().toArray();
        shuffleArray(tr);
        $.each(tr, function(i, el) {
            $('table.subquestion-list tbody', thisQuestion).first().append(el);
        });
 
    // Fix up the row background colours
    var rowIndex = 0;
    $('table.subquestion-list tbody tr', thisQuestion).each(function(i){
      rowIndex ++;
      $(this).removeClass('array1, array2');
      if(rowIndex % 2 == 0) {
        $(this).addClass('array1');
      }
      else {
        $(this).addClass('array2');
      }
    });
  });
</script>

File Attachment:

File Name: limesurvey...5-31.lss
File Size:23 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 6 years 10 months ago by tpartner.
The following user(s) said Thank You: zschaerer
The topic has been locked.
More
4 years 1 week ago #196682 by Christin8
Replied by Christin8 on topic Array (Text): Combining sliders with Yes/No question
Hello,
I'm trying to apply this in version 3.21.1, but it doesn't work.
What can I do?
Thanks for help!
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source