Hi,
Here the "image-select"
I really do not see why participants couldn't be sure to select the option the want to select.
Now, trhe version you mentiened (4.25) never existed.
There is a release 4.3.25 from Nov 4, 2020.
And because version 4.x. started a bit clumpsy there were some new release candidates of 4.4.x.
Nevertheless, the "image-select" option seems still to be broken in version 5.x.
So either you update to the actual version 6.x. where the "image-select" works.
Or you may follow this thread to create a table in the question text of an "array" question and move the radio buttons into it.
[url]
forums.limesurvey.org/index.php/forum/de...swer?start=24#232590
[/url]
Here an adapted example
This code in the source code of the question
At first "the table"
Code:
<table align="center" border="1" cellpadding="5" cellspacing="3" class="table table-responsive" style="width:1100px">
<tbody>
<tr>
<td class="td0 lightgreen" colspan="6">Please, select one of the images</td>
</tr>
<tr style="height:80px;">
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_02.jpg" /></td>
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_03.jpg" /></td>
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_04.jpg" /></td>
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_05.jpg" /></td>
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_06.jpg" /></td>
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_07.jpg" /></td>
</tr>
<tr style="height:80px;">
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_08.jpg" /></td>
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_09.jpg" /></td>
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_10.jpg" /></td>
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_16.jpg" /></td>
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_12.jpg" /></td>
<td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_13.jpg" /></td>
</tr>
</tbody>
</table>
The script to insert the buttons
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Move the radios
$('.question-text table:eq(0) tr:eq(1) td:eq(0)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(0) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(1) td:eq(1)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(1) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(1) td:eq(2)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(2) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(1) td:eq(3)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(3) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(1) td:eq(4)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(4) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(1) td:eq(5)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(5) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(2) td:eq(0)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(6) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(2) td:eq(1)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(7) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(2) td:eq(2)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(8) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(2) td:eq(3)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(9) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(2) td:eq(4)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(10) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(2) td:eq(5)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(11) *', thisQuestion));
// Some classes for presentation
$('.question-text table:eq(0) input:radio', thisQuestion).closest('td').addClass('answer-item radio-item text-center radio');
$('.question-text table:eq(0) .radio-item label', thisQuestion).show();
// Click event on the table cells
$('.question-text table:eq(0) .radio-item', thisQuestion).on('click', function(e) {
$('input:radio', this).trigger('click');
});
$('.question-text table:eq(0) input:radio', thisQuestion).on('click', function(e) {
e.stopPropagation();
});
// Clean-up styles
$('.answer-container', thisQuestion).hide();
$('.question-text table:eq(0) .label-text', thisQuestion).remove();
$('.question-text table:eq(0) .radio-text', thisQuestion).css({
'cursor': 'pointer'
});
$('td.radio', thisQuestion).css({
'display': 'table-cell',
'padding': '3px'
});
});
</script>
<style type="text/css">/* classes to display the form */
.dir-ltr .radio-item .ls-label-xs-visibility, .dir-ltr .checkbox-item .ls-label-xs-visibility {
left: auto;
margin-left: 0px;
}
And some css
Code:
.td0 {
text-align: left;
vertical-align: middle;
font-size:13px;
color:black;
padding-top:5px;
padding-bottom:5px;
border-left:0;
border-right:0;
}
.lightgreen {
background-color: mediumseagreen;
}
.yellow {
background-color: #ffe699;
}
.center {
text-align: center;
}
/* classes to change the size of radios */
.radio-item .ls-label-xs-visibility {
width: 30px;
height: 30px;
}
.radio-item label {
padding-left: 25px;
padding-top: 3px;
}
.radio-item label:before {
width: 30px;
height: 30px;
border-color: #aaa;
margin-right: 20px;
}
.radio-item label::after {
background-color: #702000;
width: 20px;
height: 20px;
left: 5px;
top: 5px;
}
</style>
You may adapt to your needs.
Joffm
