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:
Code:
<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:
Code:
.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:
Topic Author
.