Welcome to the LimeSurvey Community Forum

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

Array - Text (Col1), Dropdown (Col2), Slider(Col3)

  • ConradNg
  • ConradNg's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 5 months ago - 7 years 5 months ago #143028 by ConradNg
Hi Lime Experts,

I am currently using v2.50+. I have been tasked with creating a question that enables users to add answer field. Using the logic from another post ( www.limesurvey.org/forum/can-i-do-this-w...ers-add-answer-field ) I am able to achieve this.

My subquestions within the array(text) contains the express similar to: ((R1bbb_SQ001_SQ001.NAOK > "")) and unhides the next subquestion when text has been entered on the previous row. Now, I need to further enhance this array to have one column for short text, one columns with a dropdown, and one column potentially with a slider to specify month range (Jan-Dec, Nov-Apr) while retaining the forementioned function to "enables users to add answer field / row".



Is there anyway I can create a dropdown question and link it to the subquestion within the array so I could achieve an array with different question types? I am open to any modifications and suggestions that can make this table function...

Thank you.
Attachments:
Last edit: 7 years 5 months ago by ConradNg.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 5 months ago #143065 by tpartner
You'll need to use JavaScript to insert those control elements.

Here's a post on how to insert the drop-downs - www.limesurvey.org/forum/design-issues/1...han-textboxes#139987

The sliders will take a little thought. LS 2.5x uses bootstrap sliders which, in my opinion, are less customizable and harder to manipulate.

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: ConradNg
The topic has been locked.
  • ConradNg
  • ConradNg's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 5 months ago #143076 by ConradNg
AMAZING! Thank you!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 5 months ago #143079 by tpartner
Here is a script to insert modified bootstrap sliders to record a month-range into a column of an array-texts question. The data recorded will be the start/end month numbers.

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-3 input[type="text"]', thisQuestion).each(function(i) {
      $(this).closest('td').addClass('with-slider');
      var thisValue = $(this).val();
      var thisValueArr = thisValue.split(',');
      var sliderValues = [];
      if(thisValueArr.length > 1) {
        $(thisValueArr).each(function(i) {
          sliderValues.push(Number(this));
        }); 
      }
      else {
        sliderValues = [1, 12];
      }
 
      $(this).bootstrapSlider({
        'min': 1,
        'max': 12,
        'step': 1,
        'range': true,
        'value': sliderValues,
        'tooltip': 'always'
      });
 
      // Initialization stuff
      if(thisValue == '') {
        $(this).val('');
        $(this).closest('td').find('.tooltip').hide();
      }
      else {
        updateCallOut($(this).closest('td'));
      }
    });
 
    // A function to insert months in the slider callout
    function updateCallOut(el) {
      var thisTooltip = $(el).find('.tooltip');
      var thisValueArr = $(el).find('input[type="text"]').val().split(',');
      var months = {
        1: 'January', 
        2: 'February', 
        3: 'March', 
        4: 'April', 
        5: 'May', 
        6: 'June', 
        7: 'July', 
        8: 'August', 
        9: 'September', 
        10: 'October', 
        11: 'November', 
        12: 'December'
      };
      var startMonth = months[thisValueArr[0]];
      var endMonth = months[thisValueArr[1]];
      var callOutText = startMonth;
      if(startMonth != endMonth) {
        callOutText = startMonth+'-'+endMonth;
      }
      $('.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
    $('.slider.slider-horizontal', thisQuestion).css({
      'margin': '1.7em auto 1em'
    });
    $('.slider-handle', thisQuestion).css({
      'top': '-4px'
    });
  });
</script>

So, to combine this with your drop-downs, it would be something like this (I have moved the columns around for visual appearance):

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);
      });
    });
 
    // Hide the text inputs in columns 2
    $('.column-2 input[type="text"]', thisQuestion).hide();
 
    // Define the select element (dropdown)
    var select1 = '<select class="inserted-select"> \
              <option value="">-- Please Choose --</option> \
              <option value="Not started">Not started</option> \
              <option value="In progress">In progress</option> \
              <option value="Completed">Completed</option> \
            </select>';
 
    // Insert the select elements into column 2
    $('.answer-item.column-2').append(select1);
 
    // Initial dropdown values in column 2 (if the question has already been answered)
    $('.answer-item.column-2 input[type="text"]').each(function(i){
      if($.trim($(this).val()) != '') {
        $(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
      }
    });
 
    // Listener on the dropdowns (insert selected values into hidden text input)
    $('.inserted-select').change(function() {
      var thisInput = $(this).closest('td').find('input[type="text"]');
      $(thisInput).val($(this).val());
      checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
    });
 
 
    // Insert the sliders
    $('.answer-item.column-3 input[type="text"]', thisQuestion).each(function(i) {
      $(this).closest('td').addClass('with-slider');
      var thisValue = $(this).val();
      var thisValueArr = thisValue.split(',');
      var sliderValues = [];
      if(thisValueArr.length > 1) {
        $(thisValueArr).each(function(i) {
          sliderValues.push(Number(this));
        }); 
      }
      else {
        sliderValues = [1, 12];
      }
 
      $(this).bootstrapSlider({
        'min': 1,
        'max': 12,
        'step': 1,
        'range': true,
        'value': sliderValues,
        'tooltip': 'always'
      });
 
      // Initialization stuff
      if(thisValue == '') {
        $(this).val('');
        $(this).closest('td').find('.tooltip').hide();
      }
      else {
        updateCallOut($(this).closest('td'));
      }
    });
 
    // A function to insert months in the slider callout
    function updateCallOut(el) {
      var thisTooltip = $(el).find('.tooltip');
      var thisValueArr = $(el).find('input[type="text"]').val().split(',');
      var months = {
        1: 'January', 
        2: 'February', 
        3: 'March', 
        4: 'April', 
        5: 'May', 
        6: 'June', 
        7: 'July', 
        8: 'August', 
        9: 'September', 
        10: 'October', 
        11: 'November', 
        12: 'December'
      };
      var startMonth = months[thisValueArr[0]];
      var endMonth = months[thisValueArr[1]];
      var callOutText = startMonth;
      if(startMonth != endMonth) {
        callOutText = startMonth+'-'+endMonth;
      }
      $('.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
    $('select', thisQuestion).css({
      'border': '2px solid #dce4ec',
      'padding': '0.7em',
      'border-radius': '4px'
    });
    $('.slider.slider-horizontal', thisQuestion).css({
      'margin': '1.7em auto 1em'
    });
    $('.slider-handle', thisQuestion).css({
      'top': '-4px'
    });
  });
</script>



Sample survey attached:

File Attachment:

File Name: limesurvey...72-2.lss
File Size:21 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: ConradNg
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose