Welcome to the LimeSurvey Community Forum

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

Add borders to separate scales in dual scale array

  • flo2442
  • flo2442's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 8 months ago #202505 by flo2442
Hi everyone,


I'm trying to separate with some coloured borders the two scales in the dual scale array, so that is more intuitive the distinction between the two. I would like to obtain a result like in the picture below, with borders in a different color.

Someone can help me?
I'm using Limesurvey professional 3.22.9.

Thank you for the help in advance!
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 8 months ago #202508 by Joffm
Hi,
I cannot help with borders, but with colors

Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    $('.coloured-array.array-flexible-duel-scale').each(function(i) {
      // Assign column-specific classes
      $('table.subquestion-list tr.ls-heading:not(.groups)', this).each(function(i) {
        $('.answer-text', this).each(function(i){
          $(this).addClass('column-'+(i+1));
        });
      });
    });
  });
</script>
Code:
<style type="text/css">
    .coloured-array.array-flexible-duel-scale .column-1 {  background-color: #FF9B57;}
    .coloured-array.array-flexible-duel-scale .column-2 {  background-color: #FF9B57;}
    .coloured-array.array-flexible-duel-scale .column-3 {  background-color: #FF9B57;}
    .coloured-array.array-flexible-duel-scale .column-4 {  background-color: #53C170;}
    .coloured-array.array-flexible-duel-scale .column-5 {  background-color: #53C170;}
    .coloured-array.array-flexible-duel-scale .column-6 {  background-color: #53C170;}
    td.answer_cell_1_A1 {  background-color: #FF9B57;}
    td.answer_cell_1_A2 {  background-color: #FF9B57;}
    td.answer_cell_1_A3 {  background-color: #FF9B57;}
    td.answer_cell_2_A1 {  background-color: #53C170;}
    td.answer_cell_2_A2 {  background-color: #53C170;}
    td.answer_cell_2_A3 {  background-color: #53C170;}
</style>

You have to add the css class "coloured-array" to the question and adapt to your answer option codes.
As you see in the example: I used "A1", "A2", "A3"

Joffm

I am sure you will get your borders soon from somebody else.

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 8 months ago #202527 by tpartner
Regarding the borders, add something like this to the question source:

Code:
<script type="text/javascript" charset="utf-8">  
  $(document).on('ready',function(){
    $('.bordered-array.array-flexible-duel-scale').each(function(i) {
      var thisQuestion = $(this);
 
      // Assign scale-specific classes
 
      // Top header row
      $('table.subquestion-list .dsheader', thisQuestion).each(function(i) {
        $(this).addClass('dsheader-'+(i+1)+' scale-'+(i+1)+'');
      });
 
      // Answer rows
      $('table.subquestion-list tr[id^="javatbd"]', thisQuestion).each(function(i) {
        var thisRow = $(this); 
        var scale = 1;
        $('td', thisRow).each(function(i) {
          if($(this).hasClass('dual_scale_separator')) {
            scale++;
          }
          if($(this).hasClass('answer-item')) {
            $(this).addClass('scale-'+scale);
          }
        });
 
        $('td.scale-1:eq(0), td.scale-2:eq(0)', thisRow).addClass('first-scale-item');
        $('td.scale-1:last, td.scale-2:last', thisRow).addClass('last-scale-item');
      });
 
      // Second header row
      var s1FirstIndex = $('table.subquestion-list tr[id^="javatbd"]:eq(0) td.scale-1:eq(0)', thisQuestion).index();
      var s1LastIndex = $('table.subquestion-list tr[id^="javatbd"]:eq(0) td.scale-1:last', thisQuestion).index();
      var s2FirstIndex = $('table.subquestion-list tr[id^="javatbd"]:eq(0) td.scale-2:eq(0)', thisQuestion).index();
      var s2LastIndex = $('table.subquestion-list tr[id^="javatbd"]:eq(0) td.scale-2:last', thisQuestion).index();
      $('table.subquestion-list thead .ls-heading:last th.answer-text', thisQuestion).each(function(i) {
        if($(this).index() >= s1FirstIndex &amp;&amp; $(this).index() <= s1LastIndex) {
          $(this).addClass('scale-1');
        }
        if($(this).index() >= s2FirstIndex &amp;&amp; $(this).index() <= s2LastIndex) {
          $(this).addClass('scale-2');
        }
        if($(this).index() == s1FirstIndex || $(this).index() == s2FirstIndex) {
          $(this).addClass('first-scale-item');
        }
        if($(this).index() == s1LastIndex || $(this).index() == s2LastIndex) {
          $(this).addClass('last-scale-item');
        }
      });
    });
  });
</script>
Code:
<style type="text/css">
 
  @media only screen and (min-width: 768px) {
    .bordered-array .dsheader-1,
    .bordered-array .scale-1.first-scale-item {
      border-left: 4px solid green;
    }
 
    .bordered-array .dsheader-1,
    .bordered-array .scale-1.last-scale-item {
      border-right: 4px solid green;
    }
 
    .bordered-array .dsheader-2,
    .bordered-array .scale-2.first-scale-item {
      border-left: 4px solid red;
    }
 
    .bordered-array .dsheader-2,
    .bordered-array .scale-2.last-scale-item {
      border-right: 4px solid red;
    }
  }
 
  @media only screen and (max-width: 768px) {
    .bordered-array .scale-1,
    .bordered-array .leftheader {
      border-left: 2px solid green;
    }
 
    .bordered-array .scale-1,
    .bordered-array .leftheader {
      border-right: 2px solid green;
    }
 
    .bordered-array .leftheader {
      border-top: 2px solid green;
    }
 
    .bordered-array .scale-1.last-scale-item {
      border-bottom: 2px solid green;
    }
 
    .bordered-array .scale-2,
    .bordered-array .rightheader {
      border-left: 2px solid red;
    }
 
    .bordered-array .scale-2,
    .bordered-array .rightheader {
      border-right: 2px solid red;
    }
 
    .bordered-array .rightheader {
      border-top: 2px solid red;
    }
 
    .bordered-array .scale-2.last-scale-item {
      border-bottom: 2px solid red;
    }
  }
</style>





Sample survey attached:

File Attachment:

File Name: limesurvey...9116.lss
File Size:25 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 8 months ago #202532 by Joffm
Of course, as I said.
You were the one I thought of by saying "somebody else"

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 8 months ago #202538 by DenisChenu
We muist add js …

It's sad, CSS only must do the trick. Lack of some css class in default twig

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 8 months ago #202541 by tpartner

Joffm said: You were the one I thought of by saying "somebody else"

Yeah, I get that here too. "Somebody" take out the garbage. "Somebody" mow the lawn. :)


DenisChenu said: We muist add js …

It's sad, CSS only must do the trick. Lack of some css class in default twig

Yes, it needs classes - it could be done via pure CSS in a custom question theme but this is quick-and-dirty. :)

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • flo2442
  • flo2442's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 8 months ago #202545 by flo2442
That works great!

Thank you both for your solutions, I appreciated so much your answers. Quick and effective!
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 8 months ago #202546 by DenisChenu

tpartner wrote:

DenisChenu said: We must add js …

It's sad, CSS only must do the trick. Lack of some css class in default twig

Yes, it needs classes - it could be done via pure CSS in a custom question theme but this is quick-and-dirty. :)

I really think adding more class on each "block" can be included in core :)

Hard to report an issue, but really appreciate to have it :)

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose