LS: 3.15.1+181017 / vanilla template / the survey will be displayed only on pc in chrome website (no mobile or different browsers)
I'm using radio-button-list question type. I would like to arrange this question in the following way:
- on the center of screen i would like to present an image
- on each corner of the screen (top-left, top-right, bottom-left, bottom-right) i would like to present possible answer option (buttons with labels). Explanatory figure in the attachment.
I tried to modify the ".radio-list" from "theme.css" via theme editor but with no effect.
My skill with html/css can be described as "monkey see, monkey do" so please take this into account while answering my question.
Move the buttons into the question text element via JavaScript:
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Move the answer buttons into the question text element
$('.answer-container', thisQuestion).removeClass('col-xs-12').appendTo($('.ls-label-question', thisQuestion));
// Loop through the answer buttons
$('.bootstrap-buttons-div', thisQuestion).each(function(i) {
// Assign classes for styling
$(this).addClass('item-'+(i+1));
});
});
</script>
Hmm...that older version uses a different HTML structure for the button question. I cannot test directly but try replacing the script and styles in the question text with these:
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Move the answer buttons into the question text element
$('.answer-container', thisQuestion).removeClass('col-xs-12').appendTo($('.ls-label-question', thisQuestion));
// Loop through the answer buttons
$('.ls-label-question .button-item', thisQuestion).each(function(i) {
// Assign classes for styling
$(this).addClass('item-'+(i+1));
});
});
</script>
