- Posts: 9
- Thank you received: 0
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
- Topic Author
- Offline
- New Member
Less
More
3 years 8 months ago #202505
by flo2442
Add borders to separate scales in dual scale array was created 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!
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12779
- Thank you received: 3940
3 years 8 months ago #202508
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Add borders to separate scales in dual scale array
Hi,
I cannot help with borders, but with colors
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.
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10630
- Thank you received: 3696
3 years 8 months ago #202527
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Add borders to separate scales in dual scale array
Regarding the borders, add something like this to the question source:
Sample survey attached:
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 && $(this).index() <= s1LastIndex) { $(this).addClass('scale-1'); } if($(this).index() >= s2FirstIndex && $(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:
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12779
- Thank you received: 3940
3 years 8 months ago #202532
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Add borders to separate scales in dual scale array
Of course, as I said.
You were the one I thought of by saying "somebody else"
Joffm
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13935
- Thank you received: 2551
3 years 8 months ago #202538
by DenisChenu
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.
Replied by DenisChenu on topic Add borders to separate scales in dual scale array
We muist add js …
It's sad, CSS only must do the trick. Lack of some css class in default twig
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10630
- Thank you received: 3696
3 years 8 months ago #202541
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Add borders to separate scales in dual scale array
Yeah, I get that here too. "Somebody" take out the garbage. "Somebody" mow the lawn.Joffm said: You were the one I thought of by saying "somebody else"
Yes, it needs classes - it could be done via pure CSS in a custom question theme but this is quick-and-dirty.DenisChenu said: We muist add js …
It's sad, CSS only must do the trick. Lack of some css class in default twig
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 9
- Thank you received: 0
3 years 8 months ago #202545
by flo2442
Replied by flo2442 on topic Add borders to separate scales in dual scale array
That works great!
Thank you both for your solutions, I appreciated so much your answers. Quick and effective!
Thank you both for your solutions, I appreciated so much your answers. Quick and effective!
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13935
- Thank you received: 2551
3 years 8 months ago #202546
by DenisChenu
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.
Replied by DenisChenu on topic Add borders to separate scales in dual scale array
I really think adding more class on each "block" can be included in coretpartner wrote:
Yes, it needs classes - it could be done via pure CSS in a custom question theme but this is quick-and-dirty.DenisChenu said: We must add js …
It's sad, CSS only must do the trick. Lack of some css class in default twig
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.