Can you please help with two other variations of such a question, but when the "Other" textboxes are located horizontally?

tpartner wrote: For array-numbers-checkboxes...

Place a multiple-short-text question directly after the array. This question should have exactly the same sub-questions as the array y-scale.

Give the array question a CSS class "with-checkbox-array-comments".

Add this to custom.js:

Code:

Copy Code

$(document).on('ready pjax:scriptcomplete',function(){
  // Apply the plugin to specific arrays
  $('.array-multi-flexi.with-checkbox-array-comments').cbArrayComments();
});
 
// A jQuery plugin insert comments into checkbox arrays
(function( $ ){
 
  $.fn.cbArrayComments = function(options) {  
 
    var opts = $.extend( {
    }, options);
 
    return this.each(function() { 
 
      // Identify the questions
      var thisQuestion = $(this);
      var q1ID = $(thisQuestion).attr('id').replace(/question/, '');
      var thisQuestion = $('#question'+q1ID);
      var nextQuestion = thisQuestion.nextAll('.multiple-short-txt:eq(0)');
      var q2ID = $(nextQuestion).attr('id').replace(/question/, '');
 
      //Hide the multiple-short-text
      nextQuestion.hide();
 
      // Move the text inputs
      $('tr.subquestion-list', thisQuestion).each(function(i) {
        var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1];
        $('td.answer-item:last input[type="checkbox"]', this).css({
          'position': 'absolute',
          'left': '-9999em'
        });
        $('td.answer-item:last', this).removeClass('checkbox-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion));
      });
 
      // Listeners on the text inputs
      $('input[type="text"]', thisQuestion).on('keyup change', function(e) {
        var thisCheckbox = $(this).closest('td').find('input[type="checkbox"]');
        if($.trim($(this).val()) != '') {
          $(thisCheckbox).prop('checked', true);
          $(thisCheckbox).prev('input:hidden').val(1);
        }
        else {
          $(thisCheckbox).prop('checked', false);
          $(thisCheckbox).prev('input:hidden').val('');
        }
        // Fire Expression manager
        $(thisCheckbox).trigger('change');
      });
    });
 
  };
})( jQuery );

Well, in theory, it's similar to what Tony wrote earlier (when text boxes were in the last column), but I can't figure out what should be changed to move them to the other column.

// A jQuery plugin to insert comments into a specified column of a checkbox array
(function( $ ){
 
  $.fn.cbArrayComments2 = function(options) {  
 
    var opts = $.extend( {
      column: -1 // Text Input column (-1 will default to last column) 
    }, options);
 
    return this.each(function() { 
 
      // Identify the questions
      var thisQuestion = $(this);
      var q1ID = $(thisQuestion).attr('id').replace(/question/, '');
      var thisQuestion = $('#question'+q1ID);
      var nextQuestion = thisQuestion.nextAll('.multiple-short-txt:eq(0)');
      var q2ID = $(nextQuestion).attr('id').replace(/question/, '');
 
      //Hide the multiple-short-text
      nextQuestion.hide();
 
      // Move the text inputs
      var column = $('tr.subquestion-list:eq(0) td.answer-item', thisQuestion).length;
      if(opts.column > 0) {
        column = opts.column;
      }
 
      $('tr.subquestion-list', thisQuestion).each(function(i) {
        var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1];
        $('td.answer-item:eq('+(column-1)+') input[type="checkbox"]', this).css({
          'position': 'absolute',
          'left': '-9999em'
        });
        $('td.answer-item:eq('+(column-1)+')', this).removeClass('checkbox-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion));
      });
 
      // Listeners on the text inputs
      $('input[type="text"]', thisQuestion).on('keyup change', function(e) {
        var thisCheckbox = $(this).closest('td').find('input[type="checkbox"]');
        if($.trim($(this).val()) != '') {
          $(thisCheckbox).prop('checked', true);
          $(thisCheckbox).prev('input:hidden').val(1);
        }
        else {
          $(thisCheckbox).prop('checked', false);
          $(thisCheckbox).prev('input:hidden').val('');
        }
        // Fire Expression manager
        $(thisCheckbox).trigger('change');
      });
    });
 
  };
})( jQuery );

<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    $('#question{QID}').cbArrayComments2({
      column: 3 // Text Input column (-1 will default to last column)
    });
  });
</script>

I would like to make this type of question so that "Don't know" is at the end and when clicked it cancels the first choices.

tpartner wrote:

Well, in theory, it's similar to what Tony wrote earlier (when text boxes were in the last column), but I can't figure out what should be changed to move them to the other column.

To place the text inputs in specific columns...

1) Place this in your theme custom.js file:

Code:

Copy Code

// A jQuery plugin to insert comments into a specified column of a checkbox array
(function( $ ){
 
  $.fn.cbArrayComments2 = function(options) {  
 
    var opts = $.extend( {
      column: -1 // Text Input column (-1 will default to last column) 
    }, options);
 
    return this.each(function() { 
 
      // Identify the questions
      var thisQuestion = $(this);
      var q1ID = $(thisQuestion).attr('id').replace(/question/, '');
      var thisQuestion = $('#question'+q1ID);
      var nextQuestion = thisQuestion.nextAll('.multiple-short-txt');
      var q2ID = $(nextQuestion).attr('id').replace(/question/, '');
 
      //Hide the multiple-short-text
      nextQuestion.hide();
 
      // Move the text inputs
      var column = $('tr.subquestion-list:eq(0) td.answer-item', thisQuestion).length;
      if(opts.column > 0) {
        column = opts.column;
      }
 
      $('tr.subquestion-list', thisQuestion).each(function(i) {
        var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1];
        $('td.answer-item:eq('+(column-1)+') input[type="checkbox"]', this).css({
          'position': 'absolute',
          'left': '-9999em'
        });
        $('td.answer-item:eq('+(column-1)+')', this).removeClass('checkbox-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion));
      });
 
      // Listeners on the text inputs
      $('input[type="text"]', thisQuestion).on('keyup change', function(e) {
        var thisCheckbox = $(this).closest('td').find('input[type="checkbox"]');
        if($.trim($(this).val()) != '') {
          $(thisCheckbox).prop('checked', true);
          $(thisCheckbox).prev('input:hidden').val(1);
        }
        else {
          $(thisCheckbox).prop('checked', false);
          $(thisCheckbox).prev('input:hidden').val('');
        }
        // Fire Expression manager
        $(thisCheckbox).trigger('change');
      });
    });
 
  };
})( jQuery );

2) Place something like this in the source of the question (in this case, the comments will be in column 3):

Code:

Copy Code

<script type="text/javascript" charset="utf-8">
  [code type=javascript]<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    $('#question{QID}').cbArrayComments2({
      column: 3 // Text Input column (-1 will default to last column)
    });
  });
</script>