I do not think it is the best way.
1. You use an array(text)
2. It is a waste of space (I assume there re more than these three items)
To do this enter this javascript snippet into the question text (in source code mode)
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);
});
});
// Hide the text inputs in columns 1
$('.column-1 input[type="text"]', thisQuestion).hide();
// Loop through all column-1 inputs
$('.answer-item.column-1 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+'-1" class="radio" value="1" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
<label class="control-label radio-label" for="'+thisID+'-1">Ja, ohne Schwierigkeiten</label>\
</span><br/>\
<span class="inserted-radio-wrapper">\
<input id="'+thisID+'-2" class="radio" value="2" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
<label class="control-label radio-label" for="'+thisID+'-2">Ja, mit leichten Schwierigkeiten</label>\
</span><br/>\
<span class="inserted-radio-wrapper">\
<input id="'+thisID+'-3" class="radio" value="3" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
<label class="control-label radio-label" for="'+thisID+'-3">Ja, mit mittleren Schwierigkeiten</label></span><br/>\
<span class="inserted-radio-wrapper">\
<input id="'+thisID+'-4" class="radio" value="4" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
<label class="control-label radio-label" for="'+thisID+'-4">Ja, mit erheblichen Schwierigkeiten</label></span><br/>\
<span class="inserted-radio-wrapper">\
<input id="'+thisID+'-5" class="radio" value="5" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
<label class="control-label radio-label" for="'+thisID+'-5">Dazu bin ich nicht in der Lage</label></span><br/>\
<span class="inserted-radio-wrapper">\
<input id="'+thisID+'-6" class="radio" value="6" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
<label class="control-label radio-label" for="'+thisID+'-6">Weiß ich nicht</label>\
</span>');
// Initial radio states
$(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true);
});
// Listener on the radios
$('.answer-item.column-1 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-1', thisQuestion).css({
'text-align': 'left',
'margin-left': '0px'
});
$('.answer-item.column-1 .inserted-radio-wrapper', thisQuestion).css({
'display': 'inline-block',
'margin': '0px 0px 0 0px',
'padding-left':'20px'
});
$('.answer-item.column-1 label', thisQuestion).css({
'padding': '0'
});
$('.ls-answers tbody .answertext', thisQuestion).css({
'text-align': 'left',
'vertical-align': 'top'
});
$('.answer-item.column-1 .radio-label', thisQuestion).css({
'padding-left': '3px',
'margin-right': '3px',
'padding':'0px 0px 0px 3px',
'margin-left':'10px'
});
// 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>
Topic Author
