Welcome, Guest
Username: Password: Remember me

TOPIC: Array/Matrix Question Design Issue

Array/Matrix Question Design Issue 3 years 5 months ago #57399

  • DPajak
  • DPajak's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 15
  • Karma: 0
I have a matrix question where I want the table to look like as in the following picture:



So there needs to be a space between the "I don't know" field and the rest. Searching the forum I found the following solution:

So the space is working perfectly:



My first question is now, how I can set the colors of the last column do be different from the rest (as in my first picture)? And my second question is, how can I adjust the width of the question/answer text in the first column?

I have tried a few thing in the template.css. but couldn't find out the right way to do it.

Thank you for any help.
The administrator has disabled public write access.

Re: Array/Matrix Question Design Issue 3 years 5 months ago #57409

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5301
  • Thank you received: 291
  • Karma: 247
1. Column color: Can you post a link to an actived survey that uses this question layout?

2. Check the advanced attributed when editing a question. There should be an "answerwidth" setting where you can assign the first column X percent of the whole width.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Array/Matrix Question Design Issue 3 years 5 months ago #57419

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
1. Adding something like this to the end of template.css should do the trick with the colours in the last column:
#questionQQ .array1 .lastCell {
	background-color: #CFD0D1;
} 
 
#questionQQ .array2 .lastCell {
	background-color: #B1B3B4;
}

2. Mazi's suggestion would normally work but in this case we have reset the column widths so try something like this:
#questionQQ table.question tbody th {
	width: 20%;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Aw: Re: Array/Matrix Question Design Issue 3 years 5 months ago #57426

  • DPajak
  • DPajak's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 15
  • Karma: 0
Thank you very much Tony.

The color issue is working, but I still have an issue with the widths.

My template.css for the widths looks like this now:
#question448 tbody th {
	width: 11%;
}
 
#question448 table.question tbody th {
	width: 34%;
}

But when I look up the source code of the question preview in my browser I can find values of 20% for the first column and 13.3% for the rest:
</script><br /><span class="questionhelp"></span></td></tr><tr><td class="answer"><table class="question" summary="Bitte geben Sie an, wie viele Ihrer ehemaligen Kollegen die folgenden Möglichkeiten während des Verlagerungsprozess hatten:
 
    $(document).ready(function() {
 
		var qID = 448;
 
		// Reset column widths
		$('#question'+qID+' col').attr('width', 'auto');
 
		// Insert new column
		$('').insertBefore('#question'+qID+' table.question thead tr th:last');
		$('#question'+qID+' table.question tbody tr').each(function(i) {
			$('td:last', this).addClass('lastCell');
		});
		$('').insertBefore('.lastCell');
 
	});
 
 - an array type question"><colgroup class="col-responses"><col class="col-answers" width="20%" /><col class="odd" width="13.3%" /><col class="even" width="13.3%" /><col class="odd" width="13.3%" /><col class="even" width="13.3%" /><col class="odd" width="13.3%" /><col class="even" width="13.3%" /></colgroup>

I am not that familiar with CSS, so your help would be again appreciated.
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 3 years 5 months ago #57459

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
That script is in the summary tag and therefor is incomplete so may confuse other users. Additionally, I found a small bug with IE8 and added some more classes to aid in styling. Use this script, replacing "QQ" with your question ID:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
 
		var qID = QQ;
 
		// Reset column widths
		$('#question'+qID+' col').css({'width': 'auto'});
 
		// Insert new column
		$('#question'+qID+' table.question thead tr th').addClass('headerCell');
		$('#question'+qID+' table.question thead tr th:last').removeClass('headerCell').addClass('lastCell');
		$('<th class="spacerCell"></th>').insertBefore('#question'+qID+' table.question thead tr th.lastCell');
		$('#question'+qID+' table.question tbody tr').each(function(i) {
			$('td', this).addClass('answerCell');
			$('td:last', this).removeClass('answerCell').addClass('lastCell');
		});
		$('<td class="spacerCell"></td>').insertBefore('#question'+qID+' table.question tbody tr td.lastCell');
 
	});
 
</script>

Here is an image showing the associated classes:
Untitled-1_2011-02-24.png


So, the following styles give the result in the image (replace "QQ" with the question ID):
#questionQQ .spacerCell {
	background-color: #FFFFFF;
	width: 2%;
}
 
#questionQQ tbody th.answertext {
	width: 25%;
}
 
#questionQQ tbody td.answerCell {
	width: 15%;
}
 
#questionQQ .lastCell {
	width: 15%;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 3 years 5 months ago #57462

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5301
  • Thank you received: 291
  • Karma: 247
Great screenshot, Tony. Can you add that to the according question page at the wiki?!

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 3 years 5 months ago #57537

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
Can you add that to the according question page at the wiki?
Most of these classes are inserted by the JavaScript so I don't think it would be of any value in the question page.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 3 years 5 months ago #57554

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6228
  • Thank you received: 793
  • Karma: 238
tpartner wrote:
Can you add that to the according question page at the wiki?
Most of these classes are inserted by the JavaScript so I don't think it would be of any value in the question page.
Maybe for 1.92 it's good to have more automatic class ?

:)
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 3 years 5 months ago #57563

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
Yep, more classes is better. :)
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 3 years 5 months ago #57585

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6228
  • Thank you received: 793
  • Karma: 238
tpartner wrote:
Yep, more classes is better. :)

Done : bugs.limesurvey.org/view.php?id=4984
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.207 seconds
Donation Image