Welcome to the LimeSurvey Community Forum

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

Insert blank line in array question

stevelegare
Topic Author
Offline
Premium Member

More

9 years 6 months ago #113701 by stevelegare

Insert blank line in array question was created by stevelegare

Hi all,
How can I insert blank lines in array question to group questions (see attachment)?
Thanks

Attachments:

array_blank.png

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

9 years 6 months ago - 9 years 6 months ago #113705 by tpartner

Replied by tpartner on topic Insert blank line in array question

Assuming you want the alternating row colours to restart after every blank row, add something like this to the question source:

Code:

<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // The row numbers that you want preceded by a blank row
    var rowNumbers = [1, 7, 10, 13];
 
    // Create a clean clone of a row
    var rowClone = $('tr.subquestions-list:eq(0)', thisQuestion).clone();
    $(rowClone).attr('id', '').removeClass('array1 array2 ').addClass('inserted-row');
    $('td, th', rowClone).attr('class', '').html('');
 
    // Insert the blank rows
    var rowNumbers = rowNumbers.reverse();
    $(rowNumbers).each(function(i, val) {
      $('tr.subquestions-list:eq('+(val-1)+')', thisQuestion).before($(rowClone).clone());
    });
 
    // Fix up the row classes
    var rowClass = 1;
    $('tr.subquestions-list', thisQuestion).each(function(i) {
      if($(this).hasClass('inserted-row')) {
        rowClass = 1
      }
      else {
        rowClass++;
        $(this).removeClass('array1 array2 ')
        if(rowClass % 2 == 0) {
          $(this).addClass('array2');
        }
        else {
          $(this).addClass('array1');
        }
      }
    });
  });
</script>

And add something like this to the end of template.css:

Code:

.inserted-row th,
.inserted-row td {
  background: #999;
  padding: 8px !important;
}

.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 9 years 6 months ago by tpartner.

The topic has been locked.

stevelegare
Topic Author
Offline
Premium Member

More

9 years 6 months ago #113710 by stevelegare

Replied by stevelegare on topic Insert blank line in array question

Great.
Thanks for your example.

Do you know how can I manage to put a label in the first column of each blank row?

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

9 years 6 months ago - 9 years 6 months ago #113728 by tpartner

Replied by tpartner on topic Insert blank line in array question

To add labels the JS would look like this:

Code:

<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // The row numbers that you want preceded by a blank row
    var rowNumbers = [1, 7, 10, 13];
 
    // The row labels
    var rowLabels = ['Label 1', 'label 2', 'Label 3', 'Label 4'];
 
    // Create a clean clone of a row
    var rowClone = $('tr.subquestions-list:eq(0)', thisQuestion).clone();
    $(rowClone).attr('id', '').removeClass('array1 array2 ').addClass('inserted-row');
    $('td, th', rowClone).attr('class', '').html('');
 
    // Insert the blank rows
    var rowNumbers = rowNumbers.reverse();
    $(rowNumbers).each(function(i, val) {
      $('tr.subquestions-list:eq('+(val-1)+')', thisQuestion).before($(rowClone).clone());
    });
 
    // Insert the row labels
    $(rowLabels).each(function(i, val) {
      $('tr.inserted-row th:eq('+i+')', thisQuestion).text(val);
    });
 
    // Fix up the row classes
    var rowClass = 1;
    $('tr.subquestions-list', thisQuestion).each(function(i) {
      if($(this).hasClass('inserted-row')) {
        rowClass = 1
      }
      else {
        rowClass++;
        $(this).removeClass('array1 array2 ')
        if(rowClass % 2 == 0) {
          $(this).addClass('array2');
        }
        else {
          $(this).addClass('array1');
        }
      }
    });
  });
</script>

And the CSS might look like this:

Code:

.inserted-row th,
.inserted-row td {
  background: #999;
  padding: 8px !important;
}
 
.inserted-row th {
  color: #FFF;
  font-weight: bold;
}

.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 9 years 6 months ago by tpartner.

The following user(s) said Thank You: stevelegare

The topic has been locked.

stevelegare
Topic Author
Offline
Premium Member

More

9 years 6 months ago #113735 by stevelegare

Replied by stevelegare on topic Insert blank line in array question

Thanks Tpartner,
This will help me a lot.

The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Insert blank line in array question

Lime-years ahead

Legal

About Us

Open Source