If using version 2.50, follow these steps to create a MaxDiff question type:
1)
Set up your survey to use JavaScript
.
2) Create an Array (flexible labels) by column question with 2 "answers" - these will be the left and right columns.
3) Create a copy the default template.
4) Add the following to the end of
template.js in your new template:
Code:
function maxDiff(qID, randomize) {
// Identify some elements
var thisQuestion = $('#question'+qID);
var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
// Assign a new question class
$(thisQuestion).addClass('max-diff-array');
// Move the columns
$('thead tr:eq(0) th:eq(1)', thisTable).prependTo('thead tr:eq(0)', thisTable);
$('tr.answers-list', thisTable).each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});
// Random rows
if(randomize) {
var rowsArr = [];
$('tr.answers-list', thisTable).each(function(i){
$(this).attr('data-index', i);
rowsArr.push(i);
});
shuffleArray(rowsArr);
$(rowsArr).each(function(i){
$('tbody', thisTable).append($('tr[data-index="'+this+'"]', thisTable));
});
}
// Prevent clicking twice in the same row
$('input.radio', thisQuestion).on('click', function () {
$('input.radio', thisQuestion).prop('disabled', false);
$('input.radio:checked', thisQuestion).each(function(i) {
var thisRow = $(this).closest('tr.answers-list');
$('input.radio', thisRow).not(this).prop('disabled', true);
});
});
// Fix up the row classes
var rowClass = 1;
$('tr.answers-list', thisTable).each(function(i) {
$(this).addClass('array'+(2-(i%2)));
});
}
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
5) Add something like the following to the end of
template.css in your new template:
Code:
.max-diff-array th.answertext {
text-align: center;
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}
/* Override the responsive "no-more-tables" stuff */
@media only screen and (max-width: 801px) {
.max-diff-array .no-more-tables table {
display: table;
border-collapse: inherit;
}
.max-diff-array .no-more-tables thead,
.max-diff-array .no-more-tables tbody {
display: table-row-group;
}
.max-diff-array .no-more-tables tr {
left: auto;
position: relative;
top: auto;
display: table-row;
border: 0 none;
}
.max-diff-array .no-more-tables th,
.max-diff-array .no-more-tables td {
display: table-cell;
text-align: center !important;
color: #2c3e50;
font-size: 15px;
}
.max-diff-array th.answertext {
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}
.max-diff-array .answer-item label span {
display: none !important;
}
}
6) Add a script like this to the question source of the Array (flexible labels) question:
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Call the maxDiff() function
// Set the second parameter to true for randomized rows
maxDiff({QID}, true);
});
</script>
Sample template and survey attached:
