Hi,
this question type "dual scale" is called like that, because there are two scales, no more, no less.
And it has a certain meaning in market and opinion research.
Second: How do you imagine to place 36 radio buttons on a page?
Did you try with a "normal" array?
So, to achieve this you may use an array(numbers) with dropdown layout.
As obviously all your scales have the same options place this javascript into the sourcecode of your question
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
// Insert selects
$('.answer-item', thisQuestion).append('<select class="inserted-select form-control list-question-select">\
<option value="">Please choose...</option>\
<option value="1">very good</option>\
<option value="2">good</option>\
<option value="3">neither / nor</option>\
<option value="4">poor</option>\
<option value="5">very poor</option>\
<option value="6">DK/NA</option>\
</select>');
// Listeners
$('.inserted-select', thisQuestion).on('change', function(i) {
if($(this).val() != '') {
$(this).closest('.answer-item').find('input:text').val($.trim($(this).val())).trigger('change');
}
else {
$(this).closest('.answer-item').find('input:text').val('').trigger('change');
}
});
// Returning to page
$('input:text', thisQuestion).each(function(i) {
var thisCell = $(this).closest('.answer-item');
var inputVal = $.trim($(this).val());
$('select.inserted-select', thisCell).val(inputVal);
});
// Clean-up styles
$('select.inserted-select', thisQuestion).css({
'max-width': '100%'
});
$('input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});
});
</script>
Or you use this workaround
with this script. Of course you have to adapt it.
Code:
<style type="text/css">.big-radio {
width: 16px !important;
height: 16px !important;
}
.clickable-span:hover {
cursor: pointer;
text-decoration: underline;
}
td.with-select input.form-control { display:none;}
.ls-answers .ls-heading th {
text-align: left;
}
</style>
<script type="text/javascript" charset="utf-8">
var checkClosest = function(elem) {
elem.firstElementChild.click();
};
$(document).on('ready pjax:scriptcomplete', function(){
var thisQuestion = $('#question{QID}');
// Insert radios
if(!document.querySelector(".inserted-radio")){
$('.answer-item.answer_cell_X001', thisQuestion).addClass('with-select').append(
'<div style="text-align: left" class="list-question-select">\
<span onclick="checkClosest(this)">\
<input value="1" class="inserted-radio" type="radio" name="radio_" id="radio-1" /> Sehr oft </span><br />\
<span onclick="checkClosest(this)">\
<input value="2" class="inserted-radio" type="radio" name="radio_" id="radio-2" /> Oft </span><br />\
<span onclick="checkClosest(this)">\
<input value="3" class="inserted-radio" type="radio" name="radio_" id="radio-3" /> Manchmal </span><br />\
<span onclick="checkClosest(this)">\
<input value="4" class="inserted-radio" type="radio" name="radio_" id="radio-4" /> Selten </span><br />\
<span onclick="checkClosest(this)">\
<input value="5" class="inserted-radio" type="radio" name="radio_" id="radio-5" /> Nie </span> \
</div>'
);
$('.answer-item.answer_cell_X002', thisQuestion).addClass('with-select').append(
'<div style="text-align: left" class="list-question-select">\
<span onclick="checkClosest(this)">\
<input value="1" class="inserted-radio" type="radio" name="radio_" id="radio-1" /> Sehr oft </span><br />\
<span onclick="checkClosest(this)">\
<input value="2" class="inserted-radio" type="radio" name="radio_" id="radio-2" /> Oft </span><br />\
<span onclick="checkClosest(this)">\
<input value="3" class="inserted-radio" type="radio" name="radio_" id="radio-3" /> Manchmal </span><br />\
<span onclick="checkClosest(this)">\
<input value="4" class="inserted-radio" type="radio" name="radio_" id="radio-4" /> Selten </span><br />\
<span onclick="checkClosest(this)">\
<input value="5" class="inserted-radio" type="radio" name="radio_" id="radio-5" /> Nie </span> \
</div>'
);
$('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append(
'<div style="text-align: left" class="list-question-select">\
<span onclick="checkClosest(this)">\
<input value="1" class="inserted-radio" type="radio" name="radio_" id="radio-1" /> Sehr oft </span><br />\
<span onclick="checkClosest(this)">\
<input value="2" class="inserted-radio" type="radio" name="radio_" id="radio-2" /> Oft </span><br />\
<span onclick="checkClosest(this)">\
<input value="3" class="inserted-radio" type="radio" name="radio_" id="radio-3" /> Manchmal </span><br />\
<span onclick="checkClosest(this)">\
<input value="4" class="inserted-radio" type="radio" name="radio_" id="radio-4" /> Selten </span><br />\
<span onclick="checkClosest(this)">\
<input value="5" class="inserted-radio" type="radio" name="radio_" id="radio-5" /> Nie </span> \
</div>'
);
$('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append(
'<div style="text-align: left" class="list-question-select">\
<span onclick="checkClosest(this)">\
<input value="1" class="inserted-radio" type="radio" name="radio_" id="radio-1" /> Sehr oft </span><br />\
<span onclick="checkClosest(this)">\
<input value="2" class="inserted-radio" type="radio" name="radio_" id="radio-2" /> Oft </span><br />\
<span onclick="checkClosest(this)">\
<input value="3" class="inserted-radio" type="radio" name="radio_" id="radio-3" /> Manchmal </span><br />\
<span onclick="checkClosest(this)">\
<input value="4" class="inserted-radio" type="radio" name="radio_" id="radio-4" /> Selten </span><br />\
<span onclick="checkClosest(this)">\
<input value="5" class="inserted-radio" type="radio" name="radio_" id="radio-5" /> Nie </span> \
</div>'
);
$('.answer-item.answer_cell_X005', thisQuestion).addClass('with-select').append(
'<div style="text-align: left" class="list-question-select">\
<span onclick="checkClosest(this)">\
<input value="1" class="inserted-radio" type="radio" name="radio_" id="radio-1" /> Sehr oft </span><br />\
<span onclick="checkClosest(this)">\
<input value="2" class="inserted-radio" type="radio" name="radio_" id="radio-2" /> Oft </span><br />\
<span onclick="checkClosest(this)">\
<input value="3" class="inserted-radio" type="radio" name="radio_" id="radio-3" /> Manchmal </span><br />\
<span onclick="checkClosest(this)">\
<input value="4" class="inserted-radio" type="radio" name="radio_" id="radio-4" /> Selten </span><br />\
<span onclick="checkClosest(this)">\
<input value="5" class="inserted-radio" type="radio" name="radio_" id="radio-5" /> Nie </span> \
</div>'
);
}
document.querySelectorAll("input[id^='answer']").forEach( function(inputElem){
var currID = inputElem.id.substr(6);
inputElem.parentElement.querySelector("div.list-question-select").querySelectorAll('input').forEach( function(radioNeedsName){
radioNeedsName.name += currID;
// Łapiemy zmiany i uzupełniamy oryginalny element
radioNeedsName.addEventListener("change", function(){
inputElem.value = event.target.value;
})
})
});
// Clean-up styles
$('input.inserted-radio').addClass('big-radio');
$('.list-question-select').find('span').addClass('clickable-span')
$('.with-select input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});
});
</script>
Joffm
