Need help with dual Array with question in the middle...

More
1 year 9 months ago #156121 by TerryInLeesburg
We are trying to create a question like the attached picture.
I can get the dual scales, but is there a way to put the actual question in the "middle"?
Attachments:

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

LimeSurvey Partners
More
1 year 9 months ago #156133 by tpartner
What LimeSurvey version are you using?

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

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

More
1 year 9 months ago #156149 by TerryInLeesburg

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

More
1 year 9 months ago #156150 by tpartner
Set up your survey to use JavaScript and place the following script in the source of the question:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){	
 
		// Identify this question
		var qID = {QID};
		var thisQuestion = $('#question'+qID);
 
		// Remove LS imposed column widths 
		$('colgroup', thisQuestion).remove();
 
		// Move the table cells
		$('table.subquestion-list thead tr', thisQuestion).each(function(i, thisRow) {
			$('td.header_separator', thisRow).after($('th.header_answer_text', thisRow)).remove();
		});
		$('tr.answers-list', thisQuestion).each(function(i, thisRow) {
			$('td.dual_scale_separator', thisRow).after($('th.answertext', thisRow)).remove();
		});
 
		// Insert the center header label
		var centerHeader = 'Learning Methods';
		$('table.subquestion-list thead tr:eq(0) th.header_answer_text', thisQuestion).text(centerHeader);
 
		// Insert some clean-up styles (could be placed in template.css)
		$('<style type="text/css">\
			#question'+qID+' th.header_answer_text, #question'+qID+' th.answertext {\
				width:50%;\
				text-align:center;\
				hyphens: none;\
				overflow-wrap: normal;\
			}\
			#question'+qID+' td.radio-item {\
				padding: 10px;\
			}\
			#question'+qID+' .radio label::before, #question'+qID+' .radio label::after {\
				margin-left: 0;\
			}\
			@media only screen and (max-width: 801px) {\
				#question'+qID+' th.answertext {\
					clear: both;\
					text-align: left;\
				}\
				#question'+qID+' td.radio-item {\
					float: left;\
					width: auto !important;\
				}\
			}\
		</style>').appendTo( "head" )		
	});
</script>



Sample survey attached:

File Attachment:

File Name: limesurvey...6-21.lss
File Size:22 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: TerryInLeesburg

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

More
1 year 2 months ago - 1 year 2 months ago #162634 by VAMOS_FHB
For me, this does not work as it should (see attached screenshot) in LS 3.0.4
Attachments:
Last edit: 1 year 2 months ago by VAMOS_FHB.

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

More
1 year 2 months ago - 1 year 2 months ago #162635 by tpartner
That looks like a template problem.

This workaround is for the 2.7.x versions. What template are you using?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 1 year 2 months ago by tpartner.

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

More
11 months 2 weeks ago #166997 by VAMOS_FHB
I successfully have used this workaround in a survey. In another survey I'd now like to use the Expression Manager for conditional wording in the answers. This works fine with the normal array dual scale. But when using the tpartner's code, the expression inside the {} is no longer recongized. Is there a solution for that? LS version is 2.73.

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

More
11 months 2 weeks ago #167016 by tpartner
I see nothing in the script that should affect Expression Manager. Can you attach a small sample survey?

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

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

More
11 months 2 weeks ago #167028 by VAMOS_FHB
Attached you'll find an example. Thank you!
Attachments:

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

More
11 months 2 weeks ago #167045 by tpartner
It seems to be a bug in Expression Manager. The perfectly valid JavaScript syntax for the styles is preventing EM from parsing the values in the curly braces.

Try this:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){	
 
		// Identify this question
		var qID = {QID};
		var thisQuestion = $('#question'+qID);
 
		// Remove LS imposed column widths 
		$('colgroup', thisQuestion).remove();
 
		// Move the table cells
		$('table.subquestion-list thead tr', thisQuestion).each(function(i, thisRow) {
			$('td.header_separator', thisRow).after($('th.header_answer_text', thisRow)).remove();
		});
		$('tr.answers-list', thisQuestion).each(function(i, thisRow) {
			$('td.dual_scale_separator', thisRow).after($('th.answertext', thisRow)).remove();
		});
 
		// Insert some clean-up styles (could be placed in template.css)
		var newStyles = '<style type="text/css">\n'+
							'#question'+qID+' th.header_answer_text, #question'+qID+' th.answertext {\n'+
								'width:50%;\n'+
								'text-align:center;\n'+
								'hyphens: none;\n'+
								'overflow-wrap: normal;\n'+
							'}\n'+
							'#question'+qID+' td.radio-item {\n'+
								'padding: 10px;\n'+
							'}\n'+
							'#question'+qID+' .radio label::before, #question'+qID+' .radio label::after {\n'+
								'margin-left: 0;\n'+
							'}\n'+
							'@media only screen and (max-width: 801px) {\n'+
								'#question'+qID+' th.answertext {\n'+
									'clear: both;\n'+
									'text-align: left;\n'+
								'}\n'+
								'#question'+qID+' td.radio-item {\n'+
									'float: left;\n'+
									'width: auto !important;\n'+
								'}\n'+
							'}\n'+
						'</style>'
		$('head').append(newStyles);		
	});
</script>

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

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

More
11 months 2 weeks ago #167050 by VAMOS_FHB
Thank you for your help! With your code the EM is now working. But the answers are no longer in the middle of the dual array. In my example both arrays are now identical. So there there is no difference in the result compared to just using the "standard" dual array without any javascript code.

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

More
11 months 2 weeks ago #167059 by tpartner
Ah, Expression Manager again - no spaces after some opening curly braces. Use this code:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){		
 
		// Identify this question
		var qID = {QID};
		var thisQuestion = $('#question'+qID);
 
		// Remove LS imposed column widths 
		$('colgroup', thisQuestion).remove();
 
		// Move the table cells
		$('table.subquestion-list thead tr', thisQuestion).each(function(i, thisRow) {
			$('td.header_separator', thisRow).after($('th.header_answer_text', thisRow)).remove();
		});
		$('tr.answers-list', thisQuestion).each(function(i, thisRow) {
			$('td.dual_scale_separator', thisRow).after($('th.answertext', thisRow)).remove();
		});
 
		// Insert the center header label
		var centerHeader = ' ';
		$('table.subquestion-list thead tr:eq(0) th.header_answer_text', thisQuestion).text(centerHeader);
 
		// Insert some clean-up styles (could be placed in template.css)
		var newStyles = '<style type="text/css">\n'+
							'#question'+qID+' th.header_answer_text, #question'+qID+' th.answertext { \n'+
								'width:50%;\n'+
								'text-align:center;\n'+
								'hyphens: none;\n'+
								'overflow-wrap: normal;\n'+
							'}\n'+
							'#question'+qID+' td.radio-item { \n'+
								'padding: 10px;\n'+
							'}\n'+
							'#question'+qID+' .radio label::before, #question'+qID+' .radio label::after { \n'+
								'margin-left: 0;\n'+
							'}\n'+
							'@media only screen and (max-width: 801px) { \n'+
								'#question'+qID+' th.answertext { \n'+
									'clear: both;\n'+
									'text-align: left;\n'+
								'}\n'+
								'#question'+qID+' td.radio-item { \n'+
									'float: left;\n'+
									'width: auto !important;\n'+
								'}\n'+
							'}\n'+
						'</style>'
		$('head').append(newStyles);		
	});
</script>



Here is your sample survey back:

File Attachment:

File Name: limesurvey...6459.lss
File Size:28 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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!