Array headings with subheadings

More
4 months 3 weeks ago #182139 by krosser
Hi guys!

I would like to make such an array with subheadings (see the pic below). Unfortunately, I have not found a similar thread on the forum. If anyone knows a JS script, please share. Thanks!


I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Attachments:

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
4 months 3 weeks ago #182156 by tpartner
The full-size array should only take a little basic jQuery manipulation but how do you want it to behave on smaller devices (phones)?

Can you attach a small sample survey containing only that array?

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 or Create an account to join the conversation.

More
4 months 3 weeks ago #182168 by krosser

tpartner wrote: The full-size array should only take a little basic jQuery manipulation but how do you want it to behave on smaller devices (phones)?

Can you attach a small sample survey containing only that array?


Well, good point about smaller devices. It seems that this change would mess up rendering. I don't know whether it is possible to manage rendering of subheadings for both subquestion and answer axes. Because for subquestions it would be possible to place the heading on top of each subquestion-answer choice box.
But hopefully the survey is going to be used only on bigger screens.

The sample survey attached.

File Attachment:

File Name: limesurvey...5916.lss
File Size:19 KB

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Attachments:

Please Log in or Create an account to join the conversation.

More
4 months 3 weeks ago #182190 by holch

But hopefully the survey is going to be used only on bigger screens.


Unfortunately, this is rather wishful thinking. I just ran a survey among company employees and we specifically told them that they should answer on ther computer or notebook and not on a tablet or a smartphone, because one of the questions was an array with 7 columns (number input) and a variable amount of lines (subquestions in Limesurvey).

But even when stated in the email and in the introduction text of the survey, there are always people who will not read it and then wonder, why it takes them so long to fill in the questionnaire.

Surveys are generally not their primary concern and many people do it when they don't have much to do, so while they are commuting, waiting somewhere, etc. That is when they use their mobile phone.

It is difficult for us researcher, because sometimes a "nice" matrix question seems to be the obvious and easy solution, but with the mobile trend it is getting more an dmore difficult to use those type of questions. In my case I knew the respondents, they might even get in contact if something went wrong and I have sent them about 10.000.000 reminders and the company directors and area managers were interested that they fill the survey and that the response rate is high. But if you are running a survey with the general public, they might just leave your survey unanswered, if it is too complicated.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in or Create an account to join the conversation.

More
4 months 3 weeks ago #182196 by tpartner
To add those headers, place something like this in the source of the question:

<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
		// Insert the column categories
		$('#question{QID} table.subquestion-list thead tr:eq(0) td:eq(0)').remove();
		$('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
																	<td rowspan="2" colspan="2"></td>\
																	<th class="answer-text inserted-header" colspan="3">Category 1</th>\
																	<th class="answer-text inserted-header" colspan="3">Category 2</th>\
																</tr>');
		// Insert the row categories
		$('#question{QID} table.subquestion-list colgroup').remove();
		$('#question{QID} table.subquestion-list tr.answers-list:eq(0)').prepend('<th class="answertext inserted-header" rowspan="2">Category 1</th>');
		$('#question{QID} table.subquestion-list tr.answers-list:eq(2)').prepend('<th class="answertext inserted-header" rowspan="2">Category 2</th>');
	});	
</script>



Sample survey attached:

File Attachment:

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


If you want to disable the table transformations on smaller screens, see this post - www.limesurvey.org/forum/design-issues/1...ransformation#180555

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:
The following user(s) said Thank You: krosser

Please Log in or Create an account to join the conversation.

More
4 months 3 weeks ago #182230 by krosser
Many thanks, Tony.
Can you please help with adapting the code to the Array (Numbers)?
I have managed the columns part, but cannot figure out the rows.
<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
		// Insert the column categories
		$('#question{QID} table.subquestion-list thead tr:eq(0) td:eq(0)').remove();
		$('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
																	<td rowspan="2" colspan="1"></td>\
																	<th class="answer-text inserted-header" colspan="3">Category 1</th>\
																	<th class="answer-text inserted-header" colspan="3">Category 2</th>\
																</tr>');
		// Insert the row categories
 
	});	
</script>


Sample survey attached too.

File Attachment:

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

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Attachments:

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!