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

More

6 years 3 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!

The topic has been locked.

Joffm
Away
LimeSurvey Community Team

More

6 years 3 months ago #202508 by Joffm

Replied by Joffm on topic Add borders to separate scales in dual scale array

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

More

6 years 3 months ago #202527 by tpartner

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:

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:

File Attachment:

File Name: limesurvey...9116.lss
File Size:25.29 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
Away
LimeSurvey Community Team

More

6 years 3 months ago #202532 by Joffm

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

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

6 years 3 months ago #202538 by DenisChenu

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

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

6 years 3 months ago #202541 by tpartner

Replied by tpartner on topic Add borders to separate scales in dual scale array

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
Topic Author
Offline
New Member

More

6 years 3 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!

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

6 years 3 months ago #202546 by DenisChenu

Replied by DenisChenu on topic Add borders to separate scales in dual scale array

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 support - Plugins, theme and development .
I don't answer to private message.

The topic has been locked.

Moderators: tpartner, holch

Powered by Kunena Forum

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Add borders to separate scales in dual scale array

File Attachment:

Lime-years ahead

Legal

About Us

Open Source