Hi,
at first you have to consider:
These are two independent questions.
1a. Which attributes do you associate with category 1?
1b. Which attributes do you associate with category 2?
Both "multiple". This is straightforward, easy and built-in.
Additionally you may display these two questions side by side, like this
As here you only display two multiple questions your requirement is still fulfilled.
Unfortunately you did not answer the questions at the beginning (why not?)
Therefore we can't know if you are allowed to use javascript.
But here it is.
Put it in one of the questions (and you have to enter into css classes: "flex-layout")
Code:
<script type="text/javascript" data-author="Tony Partner">
$(document).ready(function() {
// The number of questions to wrap in the flex container
var numberQuestions = 2;
// Identify the questions
var thisQuestion = $('#question{QID}');
var rowQuestions = thisQuestion.add(thisQuestion.nextAll('.question-container:lt('+(numberQuestions-1)+')'));
// Wrap the questions in a <div> element
rowQuestions.wrapAll('<div class="question-flex-container" />');
});
</script>
Code:
<style type="text/css">@media only screen and (min-width: 576px) {
.question-flex-container {
display: flex;
justify-content: space-evenly;
}
.flex-layout.question-container { width:100%;
}
</style>
And of course you can use an array(numbers) with checkbox layout.
Here you have to use your own question validation equation to make sure that there is at least one checkbox per column selected.
Furthermore you have to insert the "Other"-option.
Add a question of type "short text" after your array
Put this script into the array question
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify the questions
var thisQuestion = $('#question'+{QID}+'');
var nextQuestion1 = $(thisQuestion).nextAll('.text-short:eq(0)');
var nextQuestions = $(nextQuestion1);
var nextLength = nextQuestions.length;
var sqLength = ('tr.answers-list', thisQuestion).length;
// Hide the short-text questions
$(nextQuestions).hide();
// Move the hidden text inputs into the array
for (i = 0; i < nextLength; i++) {
var workingIndex = (sqLength - 1) - (nextLength - i);
var nextQ = nextQuestions[i];
$('th.answertext:eq('+workingIndex+')', thisQuestion).append($('input[type="text"]', nextQ)).closest('tr').addClass('otherRow');
}
// Some styling...
$('input[type="text"]', thisQuestion).css({
'width': '100%'
});
});
</script>[/i]
Like this
Joffm