Add Colors in questions

More
2 years 11 months ago - 2 years 11 months ago #157647 by mistercitrus
I'm wondering what the easiest way to accomplish on the form what I've done in mspaint.exe here (see attachment)
Just need to add some colors to a number of questions, the entire survey would share the same color scheme and each question would always have 5 responses if that makes things simpler.







Open to other solutions such as graphic 'buttons' or just colored text to
The closest I've seen is this example -

LouisGac wrote: Hi,

It should be possible to adapt old survey template with the new system without too much difficulties.
We're working on it for the future.

Here basically the work that must be done (you can help with it) :

1. All the question types, less arrays, have now separated views :
github.com/LimeSurvey/LimeSurvey/tree/ma...ews/survey/questions

In a close future, this will give the possibility to any LimeSurvey user with some skill in PHP/JS/CSS to add new question rendering, with its own HTML, JS files, and CSS, and to share them as question modules.

Have a look to the YES/NO question or GENDER question and their new question attribute to see how it works. Basically, for gender question, you can see that we added new 'button' views :
github.com/LimeSurvey/LimeSurvey/tree/ma...vey/questions/gender



accessible via the 'display' question attribute.



2. So, we must finish to export the array question HTML to view

3. Then we must add the old question HTML of 2.0x as views accessible via a display option


For now, I will advise you just to build new template on the base of one of the new ones. They use Bootstrap (easy to use), and are fully responsive.

Attachments:
Last edit: 2 years 11 months ago by mistercitrus.

Please Log in to join the conversation.

LimeSurvey Partners
More
2 years 11 months ago - 2 years 11 months ago #157649 by Joffm
Replied by Joffm on topic Add Colors in questions
Hi, mistercitrus,

here is a solution for array. Only example with three colored columns.
Insert into the sourcecode of the question:
<style type="text/css">
.answer_cell_001,
.answer_cell_1
{
	Background-color: red !important;
}
.answer_cell_003,
.answer_cell_3
{
	Background-color: yellow !important;
}
.answer_cell_006,
.answer_cell_6
{
	Background-color: #DDDDDD !important;
}
</style>
You see the cells are hard coded. So you have to adapt. You get e.g. the following (screenshot)
And the smileys? Well, that's something different.
Of course I used an existing question of one of our questionnaires.


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

Please Log in to join the conversation.

More
2 years 11 months ago #157658 by tpartner
Replied by tpartner on topic Add Colors in questions
From your mock-up, it appears that you also want to colour the header labels.

1) Assign a question class "coloured-array".


2) Add something like this to the end of template.js:
$(document).ready(function() {
	$('.coloured-array').each(function(i) {
		// Assign column-specific classes
		$('table.subquestion-list tr', this).each(function(i) {
			$('> *:gt(0)', this).each(function(i){
				$(this).addClass('column-'+(i+1));
			});
		});
	});
});

3) Add something like this to the end of template.css:
.coloured-array .column-1 {	background-color: #FF5B5B;}
 
.coloured-array .column-2 {	background-color: #FF9B57;}
 
.coloured-array .column-3 {	background-color: #F4F781;}
 
.coloured-array .column-4 {	background-color: #99FDA3;}
 
.coloured-array .column-5 {	background-color: #53C170;}





Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:

Please Log in to join the conversation.

More
2 years 11 months ago #157674 by mistercitrus
www.limesurvey.org/media/kunena/attachme...11021/capture-11.png example looks spot-on
Just having some trouble getting it to activate the css changes
I've created a new template (copy of default) and made those changes, adding
/*** Array Colors are defined here***/
 
.coloured-array .column-1 { background-color: #FF5B5B;}
 
.coloured-array .column-2 {	background-color: #FF9B57;}
 
.coloured-array .column-3 {	background-color: #F4F781;}
 
.coloured-array .column-4 {	background-color: #99FDA3;}
 
.coloured-array .column-5 {	background-color: #53C170;}

to the end of the new template's css/template.css and then
$('.coloured-array').each(function(i) {
		// Assign column-specific classes
		$('table.subquestion-list tr', this).each(function(i) {
			$('> *:gt(0)', this).each(function(i){
				$(this).addClass('column-'+(i+1));
			});
		});
	});

just before the error section of scripts/template.js (line 138)

my array questions all have "coloured-array" without quotes in the CSSClass(es) in the advanced settings. I have gone over it a couple of times and don't think I've missed anything but when I perform a preview of the survey or question group I can see no changes and the source for the page if I view it doesn't show the entries in the css.

Please Log in to join the conversation.

More
2 years 11 months ago #157675 by mistercitrus
A better way of explaining the issue is if I preview then 'view source' in the browser the CSS points to "/tmp/assets/8ca1ef2c/css/template.css" and if i inspect that file none of the changes I've made to template.css are reflected, is this a caching issue?

Please Log in to join the conversation.

More
2 years 11 months ago #157676 by mistercitrus
Nevermind! I fixed it, Just needed to make a new survey with the new template (applying to an existing survey doesn't work) but excellent solution, thank you!

Please Log in to join the conversation.

More
2 years 8 months ago #160942 by Els_Severens
Hello

I also want to do something like that, but I cannot find what names my cells have. Can you tell me where I can find that?

thanks!

Please Log in to join the conversation.

More
2 years 8 months ago #160946 by Joffm
Replied by Joffm on topic Add Colors in questions
Hello,
you want to do something like that. What exactly?

And to answer your question about the names of cells:
Use a web inspector which is included in all new browsers.

But better to tell us what is different from the solution tpartner provided.

And - of course - your LS version.

Regards
Joffm


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

Please Log in to join the conversation.

More
4 months 3 weeks ago #195742 by Filippo_nov
Replied by Filippo_nov on topic Add Colors in questions
Hi,

I tried your solution and It works great!
What about dual scale arrays?
How could I set every column/header colours?

Thank you!

Please Log in to join the conversation.

More
4 months 3 weeks ago #195755 by tpartner
Replied by tpartner on topic Add Colors in questions
What LimeSurvey version do you use?

Can you provide a small sample survey (.lss file) containing only the relevant question?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Please Log in to join the conversation.

More
4 months 2 weeks ago #195766 by Filippo_nov
Replied by Filippo_nov on topic Add Colors in questions
I'm using Limesurvey professional 3.22.9.

Using this:
$(document).on('ready pjax:scriptcomplete',function(){

$(document).ready(function() {
$('.coloured-array').each(function(i) {
// Assign column-specific classes
$('table.subquestion-list tr', this).each(function(i) {
$('> *:gt(0)', this).each(function(i){
$(this).addClass('column-'+(i+1)); }); }); });});

+
.coloured-array .column-2 { background-color: #FFBA70;}


I was able to change correctly the colour of the columns of a single scale array.
I tried to use this code also for dual scale array but it doesnt't work properly (ie. it changes also the background color of the headers).
I'd like to change the background color only of columns and not of the header (see image attached).
And here's the question.
Attachments:

Please Log in to join the conversation.

More
4 months 2 weeks ago - 4 months 2 weeks ago #195776 by tpartner
Replied by tpartner on topic Add Colors in questions
Something like this should work for a dual-scale array.

JavaScript:

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

CSS:

<style type="text/css">
	.coloured-array.array-flexible-duel-scale .column-1 {	background-color: #FF9B57;} /* Orange */
	.coloured-array.array-flexible-duel-scale .column-2 {	background-color: #F4F781;} /* Yellow*/
	.coloured-array.array-flexible-duel-scale .column-3 {	background-color: #53C170;} /* Green*/
	.coloured-array.array-flexible-duel-scale .column-4 {	background-color: #FF9B57;} /* Orange */
	.coloured-array.array-flexible-duel-scale .column-5 {	background-color: #F4F781;} /* Yellow*/
	.coloured-array.array-flexible-duel-scale .column-6 {	background-color: #53C170;} /* Green*/
	.coloured-array.array-flexible-duel-scale .column-7 {	background-color: #FF5B5B;} /* Red*/
</style>



Sample survey attached:

File Attachment:

File Name: limesurvey...8261.lss
File Size:21 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
Last edit: 4 months 2 weeks ago by tpartner.
The following user(s) said Thank You: Filippo_nov

Please Log in to join the conversation.

More
4 months 2 weeks ago #195886 by Filippo_nov
Replied by Filippo_nov on topic Add Colors in questions
Thank you!
It works perfectly!

Please Log in to join the conversation.

More
1 month 5 days ago #202476 by elisam05
Replied by elisam05 on topic Add Colors in questions
Hello,

I'm using Limesurvey professional 3.22.9.

I used the following code that you previuosly suggested to set the background colors in the dual scale array:

<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>[/i
]

<style type="text/css">
.coloured-array.array-flexible-duel-scale .column-1 { background-color: #FF9B57;} /* Orange */
.coloured-array.array-flexible-duel-scale .column-2 { background-color: #F4F781;} /* Yellow*/
.coloured-array.array-flexible-duel-scale .column-3 { background-color: #53C170;} /* Green*/
.coloured-array.array-flexible-duel-scale .column-4 { background-color: #FF9B57;} /* Orange */
.coloured-array.array-flexible-duel-scale .column-5 { background-color: #F4F781;} /* Yellow*/
.coloured-array.array-flexible-duel-scale .column-6 { background-color: #53C170;} /* Green*/
.coloured-array.array-flexible-duel-scale .column-7 { background-color: #FF5B5B;} /* Red*/
</style>


It works perfectly but it only sets the color of the header. Is there a way to change the color of the entire colums in the dual scale array, including also the answer cells?
I attach a picture of the result I'd like to obtain.

Just to notice, in the previous topic conversation there was also an example for the single scale array: that works great to change the color of the entire columns, but I can't use it for the dual scale array.



Thank you for the attention
Attachments:

Please Log in to join the conversation.

More
1 month 5 days ago - 1 month 5 days ago #202481 by Joffm
Replied by Joffm on topic Add Colors in questions
Hi,

I added this to the css
    td.answer_cell_1_A1 {	background-color: #FF9B57;}
    td.answer_cell_1_A2 {	background-color: #F4F781;}
    td.answer_cell_1_A3 {	background-color: #53C170;}
    td.answer_cell_2_A1 {	background-color: #FF9B57;}
    td.answer_cell_2_A2 {	background-color: #F4F781;}
    td.answer_cell_2_A3 {	background-color: #53C170;}



In this example the answer options are coded "A1", "A2", ...
If you use other codes you have to adapt.

You see that you might use slightly different colors than the header - whatever you like.

Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
Last edit: 1 month 5 days ago by Joffm.
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now