Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Segmenting sub-questions by category

More
9 years 7 months ago #119616 by dla
Replied by dla on topic Segmenting sub-questions by category
Thanks, good to know.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 7 months ago - 9 years 7 months ago #119627 by tpartner
Replied by tpartner on topic Segmenting sub-questions by category
Okay, here's an example of a script that will insert a label for the top header row and then insert a couple of sub-header rows:

Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function() {
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    //Insert the first header label  
    $('table.subquestions-list thead tr:eq(0)', thisQuestion).addClass('sub-header-row');
    $('table.subquestions-list thead tr:eq(0) td:eq(0)', thisQuestion).remove();
    $('table.subquestions-list thead tr:eq(0)', thisQuestion).prepend('<th class="sub-header-text">Sub-Header 1</th>');
 
    // Create a clone of the top header row
    var subHeader = $('table.subquestions-list thead tr:eq(0)', thisQuestion).clone();
 
    // Insert a clone of the clone after row 2
    $('.sub-header-text', subHeader).text('Sub-Header 2');
    $('tr.answers-list:eq(1)', thisQuestion).after(subHeader.clone());
 
    // Insert a clone of the clone after row 5
    $('.sub-header-text', subHeader).text('Sub-Header 3');
    $('tr.answers-list:eq(4)', thisQuestion).after(subHeader.clone());
 
    // 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>

Then, you could add something like this to template.css to style the header rows (this is for the default template):

Code:
.sub-header-row {
  background-color: #999999;
}
 
.sub-header-row th {
  font-weight: bold;
  text-align: center;
  color: #FFFFFF;
  background-color: transparent !important;
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 9 years 7 months ago by tpartner.
The following user(s) said Thank You: dla, eloner
The topic has been locked.
More
9 years 7 months ago #119630 by dla
Replied by dla on topic Segmenting sub-questions by category
Wow, it's spectacular!
Thanks a lot Tony, and also Benoît for initating the process.

Here a glance:


Attachments:
The topic has been locked.
More
9 years 7 months ago #119766 by eloner
Replied by eloner on topic Segmenting sub-questions by category
I tried do replicate the example (using a copy of the default template with Version 2.05+ Build 150413).
In general It works well with Chrome and Safari, but (given that you use javascript) id does not with Internet Explorer.
Finally, with Firefox it works fine, but I can't see the different background color of the header.
So, we should always pay attention to the browser (at least, we should test it with different browsers) and to the device used by the respondents.
I know Tony has already given some advices about the problems with Internet Explorer in other posts.
Cheers,
Elo
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 7 months ago - 9 years 7 months ago #119771 by tpartner
Replied by tpartner on topic Segmenting sub-questions by category

...but (given that you use javascript) id does not with Internet Explorer.

The JS does work in IE, I have tested in IE 7-11, what version are you using? Do you have JavaScript enabled?


...with Firefox it works fine, but I can't see the different background color of the header.

Again, I tested in Firefox, Chrome, Safari, IE 7-11 and the only problem I saw was in some early versions of IE7 which the following CSS rules should fix.

Code:
.sub-header-row {
  background-color: #999999;
}
 
.sub-header-row th {
  font-weight: bold;
  text-align: center;
  color: #FFFFFF;
  background-color: transparent !important;
  *background-color: #999999 !important;
}
 
.checkedLabel {
  color:#009900;
}
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 9 years 7 months ago by tpartner.
The topic has been locked.
More
9 years 7 months ago #119783 by eloner
Replied by eloner on topic Segmenting sub-questions by category
Thank you Tony, your work is precious!
Your new code fixed the problem in Firefox.
I still have some problem with IE (I have IE11). I have javascript activated, but the results is:

(honestly I don't use IE, but I have a version always updated on my system)... we are lucky as there are always few people using this browser! ;)
Cheers,
Elo
Attachments:
The topic has been locked.
More
9 years 7 months ago #119784 by eloner
Replied by eloner on topic Segmenting sub-questions by category
Sorry for attaching a file in italian, but the language it is not relevant in this context.
However, in chrome, firefox and safari I see the question like this:



cheers,
Elo
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 7 months ago #119788 by tpartner
Replied by tpartner on topic Segmenting sub-questions by category
Try this:
Code:
.sub-header-row {
  background-color: #999999;
}
 
.sub-header-row th {
  font-weight: bold;
  text-align: center;
  color: #FFFFFF;
  background-color:#999999 !important;
}
 
.checkedLabel {
  color:#009900;
}
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
9 years 7 months ago #119791 by eloner
Replied by eloner on topic Segmenting sub-questions by category
Almost perfect, now it works...
Just a little problem is that the first header is missing:



cheers,
ELO
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 7 months ago #119794 by tpartner
Replied by tpartner on topic Segmenting sub-questions by category
I don't get that. Here's what I see in IE11, version 11.0.9600.17728 with the attached survey and template (copy of default).


File Attachment:

File Name: default_test.zip
File Size:91 KB


File Attachment:

File Name: limesurvey...9141.lss
File Size:19 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: eloner
The topic has been locked.
More
9 years 7 months ago #119823 by dla
Replied by dla on topic Segmenting sub-questions by category
Eloner, I confirm that Tony's code works fine on IE11.
Good luck for your study, I see that we have very similar fields and approaches.

Thanks Tony for the checkedLabel color - perfectionist improvement!

David
The following user(s) said Thank You: eloner
The topic has been locked.
More
9 years 6 months ago #120049 by eloner
Replied by eloner on topic Segmenting sub-questions by category
Hello,
I took some time to check the problem. I just used the wrong template! :blush:
Now it works well also with IE!
Thank you Tony and all the people who replied to the post!
Cheers Elo
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source