Multiple types in array - rank all then choose some items

More
3 years 2 months ago #102971 by elissa
Hi,
I've searched the formum and manual and cannot find the solution. I need to ask an array question consisting of several items that all need to be assessed. After assessing all the respondent should choose some, let's say 5, most important items. I would like to have it in one table as in the picture (colors are not important). I was thinking about Multiple question types in array workaround but I'm not sure if I can apply it here. Any advice? Thanks.
Elisa


Elzbieta Lesinska
LS Polish translator and supervisor
Attachments:

Please Log in to join the conversation.

More
3 years 2 months ago #102975 by tpartner
I would use a solution similar to this post where we moved input elements from a following question into the array .

In your case the following question would be a multiple-choice type and the input element selector would be "input.text".

Would it be mandatory that 5 check-boxes ar selected?

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
3 years 2 months ago #102976 by elissa
Thanks Tony, I'll try it. Yes, the 5 check-boxes are mandatory. Or, alternatively, up to 5 check-boxes are mandatory.

Elzbieta Lesinska
LS Polish translator and supervisor

Please Log in to join the conversation.

More
3 years 2 months ago #102977 by tpartner
Hi Elisa, here's a quick adaptation of that post.

This script moves the check-boxes from a following question into the array and validates for 5 checked boxes.

1) Add this to the question source and modify the error messages as required:
<script type="text/javascript" charset="utf-8">	
 
	$(document).ready(function(){
 
		// The error messages
		var error1 = 'You can only select 5 attributes.';
		var error2 = 'Please select 5 attributes.';
 
		// Identify the questions
		var thisQuestion = $('#question{QID}');
		var nextMultiOpt = $(thisQuestion).nextAll('.multiple-opt:eq(0)');
 
		// Add a class to the array question (for styling) 
		$(thisQuestion).addClass('array-plus-checkboxes');
 
		// Hide the next question 
		$(nextMultiOpt).hide();
 
		// Add an extra column to the array
		$('table.question thead tr', thisQuestion).append('<th class="newColumn1" />');
		$('table.question tbody tr', thisQuestion).each(function(i) {
			$(this).append('<td class="newColumn1" />');
		});
 
		// Move the hidden question text to the inserted column
		$('table.question thead tr th.newColumn1', thisQuestion).text($('.questiontext', nextMultiOpt).text());
 
		// Move the checkboxes into the array
		$('input.checkbox', nextMultiOpt).each(function(i){
			$('table.question tbody tr:eq('+i+') td.newColumn1', thisQuestion).append(this);
		});
 
		// Listener on the checkboxes (to test for maximum 5 checked boxes)
		$('input.checkbox', thisQuestion).click(function(event) {
			if($('input.checkbox:checked', thisQuestion).length > 5) {
				alert(error1);
				$(this).attr('checked', false);
			}
			if($('input.checkbox:checked', thisQuestion).length == 5) {
				$('th.newColumn1', thisQuestion).removeClass('mandatory-error');
			}
		});
 
		// Interrupt the Next/Submit function (to test for minimum 5 checked boxes)
		$('form#limesurvey').submit(function(){
 
			// Override the built-in "disable navigation buttons" feature
			$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');
 
			$('th.newColumn1', thisQuestion).removeClass('mandatory-error');
 
			if($('input.checkbox:checked', thisQuestion).length < 5) {
				$('th.newColumn1', thisQuestion).addClass('mandatory-error');
				alert(error2);
				return false;
			}
		});
 
		// Some cleanup styles
		$('col', thisQuestion).css({
			'width': 'auto'
		});
 
	});
</script>

2) Add something like this to the end of template.css:
.array-plus-checkboxes tbody td {
	width: 12%;
}
 
.array-plus-checkboxes td.newColumn1 {
	width: 15%;
}
 
.array-plus-checkboxes .newColumn1 {
	background-color: #FF6;
}
 
.array-plus-checkboxes .newColumn1.mandatory-error {
	color: #FF0000;
}

Here is a sample survey:

File Attachment:

File Name: test_move_...rray.lss
File Size:27 KB

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
3 years 2 months ago #102978 by elissa
Tony, you know you are great! It works. Thank you very much. Chapeau bas. I tried to adapt the script myself but I'm too JS illiterate to do that. I wish you all the best in the New Year!

Elzbieta Lesinska
LS Polish translator and supervisor

Please Log in to join the conversation.

More
3 years 2 months ago #102979 by tpartner
Happy New Year to you and your family too.

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
2 years 8 months ago #110519 by elissa
Hello,
I'm coming back with this topic because the solution doesn't seem to work anymore. It worked perfectly in January with the former version of LM but after updating to the current version there is something wrong with it. I can fill in the questions but after pressing the submit key answers are deleted and I get a message of non answered questions. I'm asking for help with correcting this and adapting to the current version of LS.

Elzbieta Lesinska
LS Polish translator and supervisor

Please Log in to join the conversation.

More
2 years 8 months ago - 2 years 8 months ago #110521 by danika
Hi Elisa,

I am researching the very same question myself and found this in the manual. Whether it applies to LS 2.05+ or not though I would like to find out?

Perhaps you've already seen this yourself. But, I am interested to hear the answer because it would certainly solve a lot of design issues.
Last Edit: 2 years 8 months ago by danika.

Please Log in to join the conversation.

More
2 years 8 months ago #110525 by elissa
Thanks Danika. I think that I've identified the issue - this is the part with interrupting submitting key when less than 5 attributes are checked in the second question (line 44). The other part of the script is OK. The problem is that I'm a java script illiterate and I cannot solve it myself ;-).

Elzbieta Lesinska
LS Polish translator and supervisor

Please Log in to join the conversation.

More
2 years 8 months ago #110533 by danika
Thanks, Elisa.

Please post back to update. These are some of the same challenges I hope to resolve as well.

Cheers

Please Log in to join the conversation.

More
2 years 8 months ago #110594 by tpartner
Hi Elisa,

Try this:

<script type="text/javascript" charset="utf-8">	
 
	$(document).ready(function(){
 
		// The error messages
		var error1 = 'You can only select 5 attributes.';
		var error2 = 'Please select 5 attributes.';
 
		// Identify the questions
		var thisQuestion = $('#question{QID}');
		var nextMultiOpt = $(thisQuestion).nextAll('.multiple-opt:eq(0)');
 
		// Add a class to the array question (for styling) 
		$(thisQuestion).addClass('array-plus-checkboxes');
 
		// Hide the next question 
		$(nextMultiOpt).hide();
 
		// Add an extra column to the array
		$('table.question thead tr', thisQuestion).append('<th class="newColumn1" />');
		$('table.question tbody tr', thisQuestion).each(function(i) {
			$(this).append('<td class="newColumn1" />');
		});
 
		// Move the hidden question text to the inserted column
		$('table.question thead tr th.newColumn1', thisQuestion).text($('.questiontext', nextMultiOpt).text());
 
		// Move the checkboxes into the array
		$('input.checkbox', nextMultiOpt).each(function(i){
			$('table.question tbody tr:eq('+i+') td.newColumn1', thisQuestion).append(this);
		});
 
		// Listener on the checkboxes (to test for maximum 5 checked boxes)
		$('input.checkbox', thisQuestion).click(function(event) {
			if($('input.checkbox:checked', thisQuestion).length > 5) {
				alert(error1);
				$(this).attr('checked', false);
			}
			if($('input.checkbox:checked', thisQuestion).length == 5) {
				$('th.newColumn1', thisQuestion).removeClass('mandatory-error');
			}
		});
 
		// Interrupt the Next/Submit function (to test for minimum 5 checked boxes)
		$('#movenextbtn, #movesubmitbtn').bind('click', function () {
 
			$('th.newColumn1', thisQuestion).removeClass('mandatory-error');
 
			if($('input.checkbox:checked', thisQuestion).length < 5) {
				$('th.newColumn1', thisQuestion).addClass('mandatory-error');
				alert(error2);
				return false;
			}
		});
 
		// Some cleanup styles
		$('col', thisQuestion).css({
			'width': 'auto'
		});
 
	});
</script>

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
2 years 8 months ago #110690 by elissa
Thanks a lot Tony. It works perfecty.
Cheers,
Elisa

Elzbieta Lesinska
LS Polish translator and supervisor

Please Log in to join the conversation.

More
6 months 4 weeks ago #141232 by elissa
I'm digging up this topic because I need to adapt the given workaround to LS 2.5. The script was created for LS 2.0 and worked perfectly. I copied it to the survey in LS 2.5 and added some code to the default template (the code given by Tony at the top) but this doesn't look good. The script itself seems to work very well but the styles do not. When I insert the exact code given by Tony to the question I cannot control the subquestion column width. When I delete this part of the code:
// Some cleanup styles
		$('col', thisQuestion).css({
			'width': 'auto'
		});
I can control the subquestion width but the answer columns have different width and the last column (the second question) is too thin.

I'll be very grateful for help with adapting this workaround for LS 2.5.
Regards

With the "auto width" command:


After deleting the "auto width" command:

Elzbieta Lesinska
LS Polish translator and supervisor
Attachments:

Please Log in to join the conversation.

More
6 months 4 weeks ago #141242 by tpartner
In LimeSurvey 2.5, add this script to the array question source:
<script type="text/javascript" charset="utf-8">		
	$(document).ready(function(){
 
		// The error messages
		var error1 = 'You can only select 5 attributes.';
		var error2 = 'Please select 5 attributes.';
 
		// Identify some elements
		var thisQuestion = $('#question{QID}');
		var nextMultiOpt = $(thisQuestion).nextAll('.multiple-opt:eq(0)');
		var thisTable = $('table.subquestion-list', thisQuestion);
		var answerCols = $('col:not(.col-answers)', thisTable);
 
		// Find intitial answer column widths
		var colWidth = ($(answerCols[0]).width()/$(thisTable).width())*100;
		var colWidthTotal = answerCols.length*colWidth;
 
		// Add a class to the array question (for styling) 
		$(thisQuestion).addClass('array-plus-checkboxes');
 
		// Hide the next question 
		$(nextMultiOpt).hide();
 
		// Add an extra column to the array
		$('colgroup', thisTable).append('<col class="inserted-col" />');
		$('thead tr', thisTable).append('<th class="newColumn1" />');
		$('tr.answers-list', thisTable).append('<td class="newColumn1" />');
 
		// Move the hidden question text to the inserted column
		$('thead tr th.newColumn1', thisTable).text($('.questiontext', nextMultiOpt).text());
 
		// Move the checkboxes into the array
		$('input.checkbox', nextMultiOpt).each(function(i){
			$('tbody tr:eq('+i+') td.newColumn1', thisTable).append(this);
		});
 
		// Reset the answer column widths
		$('col:not(.col-answers)', thisTable).css({
			'width': (colWidthTotal/$('col:not(.col-answers)', thisTable).length)+'%'
		});
 
		// Remove responsive classes
		$(thisTable).closest('.no-more-tables').removeClass('no-more-tables no-more-tables-array-no-dropdown');
		$('td.answer-item .visible-xs-block', thisTable).remove();
 
		// Listener on the checkboxes (to test for maximum 5 checked boxes)
		$('input.checkbox', thisTable).click(function(event) {
			if($('input.checkbox:checked', thisTable).length > 5) {
				alert(error1);
				$(this).attr('checked', false);
			}
			if($('input.checkbox:checked', thisTable).length == 5) {
				$('th.newColumn1', thisTable).removeClass('mandatory-error');
			}
		});
 
		// Interrupt the Next/Submit function (to test for minimum 5 checked boxes)
		$('#movenextbtn, #movesubmitbtn').bind('click', function () {
 
			$('th.newColumn1', thisTable).removeClass('mandatory-error');
 
			if($('input.checkbox:checked', thisTable).length < 5) {
				$('th.newColumn1', thisTable).addClass('mandatory-error');
				alert(error2);
				return false;
			}
		});
 
	});
</script>

Add this to the end of template.css:
.array-plus-checkboxes .newColumn1 {
	background-color: #C0CEDD;
	text-align: center;
}
 
.array-plus-checkboxes .newColumn1.mandatory-error {
	color: #FF0000;
}



Sample survey attached:

File Attachment:

File Name: limesurvey...38-2.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:
The following user(s) said Thank You: elissa

Please Log in to join the conversation.

More
6 months 4 weeks ago #141254 by elissa
Tony,
As usual, this a big job and really great help for me. Thank you.

Cheers

Elzbieta Lesinska
LS Polish translator and supervisor

Please Log in to join the conversation.