This was not intended to work with the LimeSurvey random answers setting. There is no way for that to work if you have defined sequential slider labels.
You will need to disable the LimeSurvey setting and randomize the rows via JavaScript:
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Assign column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('> *:gt(0)', this).each(function(i){
$(this).addClass('column-'+(i+1));
$(this).attr('data-column', i+1);
});
});
// Insert the sliders
$('.answer-item.column-1 input[type="text"]', thisQuestion).each(function(i) {
$(this).closest('td').addClass('with-slider');
var thisValue = $(this).val();
$(this).bootstrapSlider({
'min': -5,
'max': 5,
'step': 0.1,
'range': false,
'value': Number(thisValue),
'tooltip': 'always'
});
// Initialization stuff
if(thisValue == '') {
$(this).val('');
$(this).closest('td').find('.tooltip').hide();
}
else {
updateCallOut($(this).closest('td'));
}
});
// A function to update the slider callout
function updateCallOut(el) {
var thisTooltip = $(el).find('.tooltip');
//$('.tooltip-inner', thisTooltip).text(callOutText);
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
}
// Listener on sliders
$('td.with-slider .slider').on('mousedown', function(event, ui) {
updateCallOut($(this).closest('td'));
});
$('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
updateCallOut($(this).closest('td'));
checkconditions($(this).val(), $(this).attr('name'), 'text');
});
// Listener on resizing (override the bootstrap callout behaviour)
$(window).resize(function() {
$('td.with-slider', thisQuestion).each(function(i) {
if($('input[type="text"]', this).val() != '') {
updateCallOut(this);
}
});
});
// Define the slider left/right labels
var sliderLeftLabels = ['Left text 1', 'Left text 2','Left text 3','Left text 4','Left text 5'];
var sliderRightLabels = ['Right text 1', 'Right text 2', 'Right text 3', 'Right text 4', 'Right text 5'];
// Insert slider left/right labels
$('td.with-slider', thisQuestion).append('<div class="left-text"></div><div class="right-text"></div>');
$('.left-text', thisQuestion).each(function(i) {
$(this).text(sliderLeftLabels[i]);
});
$('.right-text', thisQuestion).each(function(i) {
$(this).text(sliderRightLabels[i]);
});
// Some clean-up styles for the sliders (could be placed in template.css)
$('thead th, .answer-item.column-1', thisQuestion).css({
'text-align': 'center'
});
$('.slider.slider-horizontal', thisQuestion).css({
'margin': '1.7em auto 1em'
});
$('.slider-selection', thisQuestion).css({
'background': 'transparent none',
'box-shadow': 'none'
});
$('.slider-handle', thisQuestion).css({
'top': '-4px'
});
$('.left-text, .right-text', thisQuestion).css({
'margin-top': '-0.5em',
'font-size': '90%'
});
$('.left-text', thisQuestion).css({
'float': 'left'
});
$('.right-text', thisQuestion).css({
'float': 'right'
});
// Hide the text inputs in columns 2
$('.column-2 input[type="text"]', thisQuestion).hide();
// Loop through all column-2 inputs
$('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) {
var thisID = $(this).attr('id');
var thisValue = $(this).val();
// Insert the radios
$(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\
<input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
<label class="control-label radio-label" for="'+thisID+'-Y">Yes</label>\
</span>\
<span class="inserted-radio-wrapper">\
<input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
<label class="control-label radio-label" for="'+thisID+'-N">No</label>\
</span>');
// Initial radio states
$(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true);
});
// Listener on the radios
$('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() {
var thisInput = $(this).closest('td').find('input[type="text"]');
$(this).closest('td').find('input[type="text"]').val($(this).val());
checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
});
// Some clean-up styles for the radios (could be placed in template.css)
$('thead th, .answer-item.column-2', thisQuestion).css({
'text-align': 'center'
});
$('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({
'display': 'inline-block',
'margin': '25px 10px 0 20px'
});
$('.answer-item.column-2 label', thisQuestion).css({
'padding': '0'
});
$('.answer-item.column-2 .radio-label', thisQuestion).css({
'padding-left': '3px',
'margin-right': '3px'
});
// Randomize the array rows
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;
}
var tr = $('tr.subquestion-list', thisQuestion).detach().toArray();
shuffleArray(tr);
$.each(tr, function(i, el) {
$('table.subquestion-list tbody', thisQuestion).first().append(el);
});
// Fix up the row background colours
var rowIndex = 0;
$('table.subquestion-list tbody tr', thisQuestion).each(function(i){
rowIndex ++;
$(this).removeClass('array1, array2');
if(rowIndex % 2 == 0) {
$(this).addClass('array1');
}
else {
$(this).addClass('array2');
}
});
});
</script>
