Welcome to the LimeSurvey Community Forum

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

Array question - adding subheaders and labels

  • Gensz78
  • Gensz78's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 3 months ago #161707 by Gensz78
Hi!


I'd like to add subheaders with labels to an array question. I've already been able to add subheaders with some js (see attached survey), but I'd like the labels (1 to 9) on the first line to repeat at each subheader.

Also, if possible, I'd like to change the style of category headers: make the font bigger and change the color to dark blue. (In the actual survey, the subquestions are quite long so the subheaders don't pop out)

Please note that I use LimeSurvey Version 2.65.1+170522, and that I don't have access to the template.

Could anyone help me with this?

Thanks!

Gen
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 3 months ago #161743 by Joffm
Hi, with this script
Code:
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function() {  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Define the sub-heading text strings
    var subHeading1 = 'Subheading 1';
    var subHeading2 = 'Subheading 2';
 
    var columnsLength = $('tr.answers-list:eq(0) > *', thisQuestion).length;
 
    // Insert the new rows
    $('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
    $('tr.answers-list:eq(2)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>');  
 
    // Fix up the row classes
    var rowClass = 1;
    $('table.subquestions-list tbody tr', thisQuestion).each(function(i) {
      if($(this).hasClass('sub-header-row')) {
        rowClass = 1
      }
      else {
        rowClass++;
        $(this).removeClass('array1 array2')
        if(rowClass % 2 == 0) {
          $(this).addClass('array2');
        }
        else {
          $(this).addClass('array1');
        }
      }
    });
  });
</script>

and this css
Code:
<style type="text/css">.sub-header-row { margin-bottom: 20px; } .sub-header-row th { background-color: #547599; color: #FFFFFF !important; text-align: center; }
</style>

you get this


Maybe you can use it.
Of course you have to adapt the lines
$('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');


Best regards
Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • Gensz78
  • Gensz78's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 3 months ago #161744 by Gensz78
Replied by Gensz78 on topic Array question - adding subheaders and labels
This is great, thank you!

Is it possible to have the 1 to 9 labels (what is right now on the first line in the image below) repeat on all subheader rows?

The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 3 months ago - 6 years 3 months ago #161753 by tpartner
Replied by tpartner on topic Array question - adding subheaders and labels
This modification of the script will insert the column labels after every new sub-header row:

Code:
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function() {  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Define the sub-heading text strings
    var subHeading1 = 'Subheading 1';
    var subHeading2 = 'Subheading 2';
 
    var columnsLength = $('tr.answers-list:eq(0) > *', thisQuestion).length;
 
    // Insert the new rows
    $('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
    $('tr.answers-list:eq(2)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>');  
 
    // Fix up the row classes
    var rowClass = 1;
    $('table.subquestion-list tbody tr', thisQuestion).each(function(i) {
      if($(this).hasClass('sub-header-row')) {
        rowClass = 1
      }
      else {
        rowClass++;
        $(this).removeClass('array1 array2')
        if(rowClass % 2 == 0) {
          $(this).addClass('array2');
        }
        else {
          $(this).addClass('array1');
        }
      }
    });
 
    // Insert the column labels
    $('.sub-header-row', thisQuestion).after($('table.subquestion-list thead tr:eq(0)', thisQuestion).clone());
  });
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 6 years 3 months ago by tpartner.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 3 months ago #161754 by Joffm
Well, to be honest,

why don't you just have one question per each "subheader" and show them in a group. That's easy out of the box.



Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 3 months ago - 6 years 3 months ago #161759 by Joffm
Well, Tony was faster and as usual provides the JS solution.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 6 years 3 months ago by Joffm.
The topic has been locked.
  • Gensz78
  • Gensz78's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 3 months ago #161910 by Gensz78
Replied by Gensz78 on topic Array question - adding subheaders and labels
Both of these solutions work great! Thank you so much!

Gen
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose