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
Offline
LimeSurvey Community Team

More

7 years 8 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
Topic Author
Offline
New Member

More

7 years 8 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
Topic Author
Offline
New Member

More

7 years 7 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
Offline
LimeSurvey Community Team

More

7 years 7 months ago - 7 years 7 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:

limesurvey...5-31.lss

Last edit: 7 years 7 months ago by tpartner.

The following user(s) said Thank You: zschaerer

The topic has been locked.

Christin8
Offline
Junior Member

More

4 years 9 months 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.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

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

File Attachment:

File Attachment:

Lime-years ahead

Legal

About Us

Open Source