Welcome to the LimeSurvey Community Forum

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

Segmenting sub-questions by category

dla
Topic Author
Offline
New Member

More

10 years 4 months ago #119579 by dla

Segmenting sub-questions by category was created by dla

Hi,

I'm using Limesurvey for a social network analysis. Principle is to submit to respondants a list of >140 NPO names and ask them to click the buttons (4 types) that matches the kind of relationship they have with each NPO.

I attach 2 jpg to show the setting.

Since the list of NPO is quite long, I'd like to segment it into categories (e.g. "educational", "social", etc.) to make it easier for the respondants.

My question : How can I insert categories in this list ? For instance, between "ADC77" and "ADSEA AESF" (jpg) writing "Educational" without buttons and without entry in the database.

Thanks a lot for any suggestion!

David

The topic has been locked.

Ben_V
Offline
Platinum Member

More

10 years 4 months ago #119584 by Ben_V

Replied by Ben_V on topic Segmenting sub-questions by category

If you need some inspiration:

1) you can adapt (ID, selectors, colspan, etc.) and try:
(have to be placed in the question, question help or elsewhere)

Code:

<script type="text/javascript" charset="utf-8">  
$(document).ready(function(){ 
$( "<tbody ><tr class='array1'><th class='answertext' >New Label</th><td colspan='5'></tr>" ).insertBefore( "#javatbdxxxxxx" );
});
</script>

2) Read this post and this one too

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)

The topic has been locked.

dla
Topic Author
Offline
New Member

More

10 years 4 months ago #119593 by dla

Replied by dla on topic Segmenting sub-questions by category

Thank you, it helps!
Would it be possible to put on the same row the category (e.g. INSERTION) and the header ?
pic 1 is what I get with your tweak, pic 2 is what would ideal...
Many thanks
David

The topic has been locked.

Ben_V
Offline
Platinum Member

More

10 years 4 months ago #119602 by Ben_V

Replied by Ben_V on topic Segmenting sub-questions by category

Maybe:

Code:

<script type="text/javascript" charset="utf-8">  
$(document).ready(function(){ 
$( "<tbody ><tr class='array1'><th class='answertext' >New Label</th><td>connaissance</td><td>contacts</td><td>partenariats</td><td>sans réponse</td></tr>" ).insertBefore( "#javatbdxxxxxx" );
});
</script>

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

10 years 4 months ago #119605 by tpartner

Replied by tpartner on topic Segmenting sub-questions by category

Or to expand on Ben's thoughts, maybe something like this which inserts a modified clone of the header row.

Code:

<script type="text/javascript" charset="utf-8">  
  $(document).ready(function() {
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Create a new "sub-header" row
    var subHeader = $('table.subquestions-list thead tr:eq(0)', thisQuestion).clone();  
    $('td:eq(0)', subHeader).remove();
    subHeader.addClass('sub-header');
    subHeader.prepend('<th class="answertext">New Label</th>');  
 
    // Insert the new "sub-header" row
    $('#javatbdxxxxxx').after(subHeader);
  });    
</script>

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

The topic has been locked.

dla
Topic Author
Offline
New Member

More

10 years 4 months ago #119606 by dla

Replied by dla on topic Segmenting sub-questions by category

Thanks, it's almost that... But how to push to the right the labels "connaissance-contacts-partenariats-sans réponse" and adjust their size to the columns ?

Merci!
David

2015-04-24_3.jpg

The topic has been locked.

dla
Topic Author
Offline
New Member

More

10 years 4 months ago #119607 by dla

Replied by dla on topic Segmenting sub-questions by category

Thanks Tony, your suggestion crossed my answer to Benoît - and brought as well the solution. GREAT!
It just remains the almost neglectable issue of the very first sub-header (see pic below "New Label") that appear below the first row (AGISSONS). It should be someting like a up-header to come above the this first row and below the header.

Tony, I also see that you write in your codes "var thisQuestion = $('#question{QID}'" : what does it bring to enter QID here since it doesnt appear necessary?

Thanks to both of you

David

2015-04-24_4.jpg

The following user(s) said Thank You: Ben_V

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

10 years 4 months ago #119608 by tpartner

Replied by tpartner on topic Segmenting sub-questions by category

Sorry, I don't understand what you want for a layout. Can you provide a mockup?

There is no need to replace {QID}, that is automatically parsed by Expression Manager.

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

The following user(s) said Thank You: Ben_V

The topic has been locked.

dla
Topic Author
Offline
New Member

More

10 years 4 months ago #119611 by dla

Replied by dla on topic Segmenting sub-questions by category

Thanks.
What I mean is that the first sub-header sould be positionned ABOVE the first row, as in the pic below.
What is a mockup? Is this the lsq file of the question?

2015-04-24_5.jpg

The topic has been locked.

Ben_V
Offline
Platinum Member

More

10 years 4 months ago - 10 years 4 months ago #119612 by Ben_V

Replied by Ben_V on topic Segmenting sub-questions by category

In the worst case Tony will provide you with a smart code to hide this row... using javascript

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)

Last edit: 10 years 4 months ago by Ben_V.

The topic has been locked.

dla
Topic Author
Offline
New Member

More

10 years 4 months ago #119613 by dla

Replied by dla on topic Segmenting sub-questions by category

Sure, but the delete key would do it as well

The topic has been locked.

Ben_V
Offline
Platinum Member

More

10 years 4 months ago #119615 by Ben_V

Replied by Ben_V on topic Segmenting sub-questions by category

dla wrote: ... {QID}'" : what does it bring to enter QID here since it doesnt appear necessary?

The complete list of available {keywords} (with allowed places to use) lives here

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)

The following user(s) said Thank You: dla

The topic has been locked.

dla
Topic Author
Offline
New Member

More

10 years 4 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
Offline
LimeSurvey Community Team

More

10 years 4 months ago - 10 years 4 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;
}