Welcome to the LimeSurvey Community Forum

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

Designing a Question with Repeated Contrasting Pairs

  • modernity4r
  • modernity4r's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
3 months 2 weeks ago #254385 by modernity4r
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.4.1+240108
Own server or LimeSurvey hosting: Both
Survey theme/template: Fruity
==================I have a question where respondents need to choose one item from a contrasting pair. This is repeated for 8 pairs. Rather than making separate questions in a question group, I want to include all the pairs in one single question using an array function. I am trying to design something similar to the "Choose Between Pairs of Contrasting Leadership Styles" example, but I cannot find the right logic to fit my needs. I am currently conceptualizing how to set up a question with 8 repeated choice sets of contrasting pairs. Thank you in advance.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 months 2 weeks ago #254386 by Joffm
Read the manual!!
"Question types / array / General description"

2nd example "Semantic differential"

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: modernity4r

Please Log in to join the conversation.

  • modernity4r
  • modernity4r's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
3 months 2 weeks ago - 3 months 2 weeks ago #254391 by modernity4r
I apologize if I caused any confusion. I reviewed the manual regarding the requested design, but it was different from what I needed. The "Semantic differential" example under "Question types / array / General description" is a scale question type. However, as shown in the (re)attached image, I need to create an example where respondents select one of two contrasting pairs.:( It is possible to create one pair question using bootstrap buttons or the list(radio) type, but repeating 8 pairs through separate question groups would not look aesthetically pleasing on the screen, which is why I asked this question. I wanted to explore options to nicely display the 8 contrasting pairs in a single question rather than across multiple screens or a lengthy group of questions. Please let me know if you have any suggestions on how I could achieve this.
Attachments:
Last edit: 3 months 2 weeks ago by modernity4r.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 months 2 weeks ago - 3 months 2 weeks ago #254392 by Joffm
But this is exactly what you want to achieve 
The differential with two answer options per row.
And with some css you may style differently.
Here an example
 

An array is not a scale.
It is a scale if you define this.
If you code the answer options e.g. "A" and "B" or whatever, it is simply nominal.
​​​​​​

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 months 2 weeks ago by Joffm.

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 months 2 weeks ago - 3 months 2 weeks ago #254415 by holch
Your example is just a variation of the semantic differential. Just create a scale with only two points and the semantic differential does exactly what you need or what you are showing. The only difference: the text is on the outside, not on the inside. But that shouldn't be an issue. I find it clearer when the text is on the outside anyway.

Example of a array question with 5 answer options with semantic differential setting:
Option 1 o--o--o--o--o Option 2

Example of a array question with 2 answer options with semantic differential setting:
Option 1 o--o Option 2

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Last edit: 3 months 2 weeks ago by holch.
The following user(s) said Thank You: modernity4r

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 months 2 weeks ago #254416 by tpartner
You can closely match the mock-up with a little JavaScript manipulation of an array question that uses the sematic-differential feature. Add this script to the source of the question.

Code:
<script type="text/javascript" data-author="Tony Partner">
    $(document).on('ready pjax:scriptcomplete',function(){
        var thisQuestion = $('#question{QID}');
 
        // Move the array labels
        $('tr.answers-list', thisQuestion).each(function(i) {
            $('.answer-item:first', this).append('<span class="inserted-label">'+$('.answertext', this).text()+'</span>'); 
            $('.answer-item:last', this).prepend('<span class="inserted-label">'+$('.answertextright', this).text()+'</span>');        
        });
 
        // Listener on the array cells
        $('.answer-item', thisQuestion).on('click', function(e) {
            $(':radio', this).trigger('click');        
        });
        $('.answer-item :radio', thisQuestion).on('click', function(e) {
            e.stopPropagation();
        });
 
        // Some cleanup styling
        $('table.subquestion-list', thisQuestion).removeClass('ls-answers');
        $('table.subquestion-list colgroup, table.subquestion-list thead, table.subquestion-list th', thisQuestion).remove();
        $('table.subquestion-list label', thisQuestion).css({
            'margin': '-3px 0 0 0',
            'padding': '0'
        });
        $('table.subquestion-list .inserted-label', thisQuestion).css({
            'padding': '0 0.25em'
        });
        $('table.subquestion-list td:first-child', thisQuestion).css({
            'text-align': 'left'
        });
        $('table.subquestion-list td:last-child', thisQuestion).css({
            'text-align': 'right'
        });
    });
</script>

 

Sample survey attached:  

File Attachment:

File Name: limesurvey...1-12.lss
File Size:34 KB

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: modernity4r

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 months 2 weeks ago - 3 months 2 weeks ago #254422 by Joffm
Just to add:
My shown example was a quick one taken from one of my tutorials - only to show the way..
Here is the same  adapted to your sample.
The script - of course also based on Tony - is a bit different.
Here the styling is more or less in the subquestion text itself 
 

Subquestion text (right side of the differential):
Code:
<div class="row row-no-gutters" style="font-size:16px;">
    <div class="col-sm-6" style="text-align:left">Bold</div>
    <div class="col-sm-6" style="text-align:right">Meticulous</div>
</div>


and the script only moves the columns
Code:
<script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Define this question
        var thisQuestion = $('#question{QID}');
 
 
        // Move the last column
        $('col:nth-last-child(2)', thisQuestion).before($('col:last-child', thisQuestion));
 
        $('table.subquestion-list tr', thisQuestion).each(function(i) {
            $('> *:nth-last-child(2)', this).before($('> *:last-child', this));
        });
    });
</script>


 and sets the column widths.
Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
    // Add a question class
    thisQuestion.addClass('custom-array');
 
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
  });
</script>
 
<style type="text/css">
  .custom-array table.subquestion-list col {
    width: auto !important;
  }
 
  .custom-array table.subquestion-list tr .column-0 {  width: 0%; }
  .custom-array table.subquestion-list tr .column-1 {  width: 5%; }
  .custom-array table.subquestion-list tr .column-2 {  width: 90%; }
  .custom-array table.subquestion-list tr .column-3 {  width: 5%; }
  
  tr.ls-heading {
    display:none;
  }   
</style>


Joffm

 

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 months 2 weeks ago by Joffm.
The following user(s) said Thank You: modernity4r

Please Log in to join the conversation.

  • modernity4r
  • modernity4r's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
3 months 1 week ago - 3 months 1 week ago #254470 by modernity4r
Dear holch

Thank you for the advice. However, due to the differences between PC screens and mobile phone screens, the method you are recommending could be conveyed differently to the respondent. The attached file below shows the differences between PC screens and mobile phone screens.
Last edit: 3 months 1 week ago by modernity4r.

Please Log in to join the conversation.

  • modernity4r
  • modernity4r's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
3 months 1 week ago - 3 months 1 week ago #254471 by modernity4r
Dear Tony, Joffm

Thank you both very much. You took the time to write detailed guidance and even long scripts for me. I really appreciate your effort. I will study and practice hard.

Jong-Hwa (modernity4r)
Last edit: 3 months 1 week ago by modernity4r.

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 months 1 week ago #254523 by holch
Why do you use a scale of 5 and not a scale of two, as you want to?

And yes, questions of the type array are displayed differently on smaller screens. This makes sense, as array questions are hard to answer on small screens if they would be displayed horizontally. However, this has nothing to do with the semantic differential, this happens with any array type question in Limesurvey.

How would you want to display such a question on a small screen without making people to scroll?

However, you could always adapt your survey theme to display these questions differently. But to be hones, it makes perfect sense to me, even in your use case.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 months 1 week ago #254530 by tpartner
I removed the "ls-answers" class from the array table so it will not transform to a vertical layout on smaller screens.

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: DenisChenu, holch

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose