Welcome to the LimeSurvey Community Forum

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

Combine several questions types into one grid, using newest template

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 6 months ago - 4 years 6 months ago #189693 by tpartner
You need to use :nth-child(2) in the selector as the table cells in the first answer column are actually the second child in each row (the sub-question text is in the first child).

- api.jquery.com/nth-child-selector/

Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).ready(function() {
    var thisQuestion = $('#question{QID}');
 
    // Insert selects into last column
    $('.answer-item:nth-child(2)', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
                          <option value="">Please choose...</option>\
                          <option value="1">Option 1</option>\
                          <option value="2">Option 2</option>\
                          <option value="2">Option 3</option>\
                          <option value="2">Option 4</option>\
                        </select>'); 
 
    // Listeners
    $('.inserted-select', thisQuestion).on('change', function(i) {
      var thistextInput = $(this).closest('.answer-item').find('input:text');
      if($(this).val() != '') {
        $(thistextInput).val($.trim($('option:selected', this).text())).trigger('change');
      }
      else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
      }
      checkconditions($(thistextInput).attr('value'), $(thistextInput).attr('name'), $(thistextInput).attr('type'));
    });
 
    // Returning to page
    $('.with-select input:text', thisQuestion).each(function(i) {
      var thisCell = $(this).closest('.answer-item');
      var inputText = $.trim($(this).val());
      var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
      $('select.inserted-select', thisCell).val(selectval);
    });
 
    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...2282.lss
File Size:17 KB

Also, is there a list somewhere with the codes used to access the different parts of the answer so I can learn to do this by myself? I am new to java scripting but would really like to learn...

You can use browser developer tools (F12) to explore the HTML elements.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 6 months ago by tpartner.
The topic has been locked.
More
4 years 6 months ago #189695 by asilbering
Thanks Tony!

Have a nice day,
Ana
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose