How could i have clickable image as answer (without radio buttons)?

Maybe this could help.
Add this in the code of the question.
It will hide the radio buttons and puts a border around the answer options:

<style type="text/css">
input[type=radio] + label+div {
color: #000;
padding: 10px;
border: 1px solid #f1f1f1;
margin-left: -20px !important;
}
input[type=radio]:checked + label+div {
color: #0e3e63;
background-color: #f1f1f1;
font-style: normal;
padding: 10px;
border: 1px solid #0e3e63;
margin-left: -20px !important;
}
.radio label::before {
visibility: hidden !important;
}
.radio label::after {
visibility: hidden !important;
}
</style>

I tried but it doesn't work. Is it because of version of limesurvey?
I am using Version 2.05+.

Thanks!!

Do you have a testlink? Happy to take a look and see if I can spot it

Thanks for your assistance in advance.

Here's the survey link: survey.aswatson.net/WISE/index.php/364252/lang-en

You would find two questions in the survey.
For Q1, it is a radio question. I have put the javascript you shared to the "source" of question. But it doesn't work.

For Q2, it is an array question. i have took reference to following forum and placed the javascript as instructed. As a side note, i have made some modification and they are highlighted in orange /red below:
www.limesurvey.org/forum/design-issues/1...es-for-radio-buttons

Script added to template:
.array-flexible-row.with-smileys table.subquestions-list,
.array-flexible-row.with-smileys col.havewidth {
width: auto !important;
}

.array-flexible-row.with-smileys table.subquestions-list {
border-collapse: collapse;
border-spacing: 0px;
}

.array-flexible-row.with-smileys table.subquestions-list tbody tr {
background-color: transparent !important;
}

.array-flexible-row.with-smileys thead td,
.array-flexible-row.with-smileys th.answertext {
display: none;
}

.array-flexible-row.with-smileys table.subquestions-list td.answer-item {
padding: 0;
border: none;
}

.array-flexible-row.with-smileys td.answer-item input.radio {
display:none;
}

.array-flexible-row.with-smileys td.answer-item label {
display: block;
position: relative;
top: auto;
left: auto;
width: 140px;
height: 140px;
padding: 0;
background: transparent 0 0 no-repeat;
font-size: 0;
}

.array-flexible-row.with-smileys td.answer-item input[type="radio"]:checked + label {
border: 1px solid #D9176E;
}

.array-flexible-row.with-smileys td.answer-item label::before {
border: 1px solid #DBDBDB;
border-radius: 0;
content: "";
display: inline-block;
height: 140px;
width: 140px;
left: 50%;
top: 8px;
margin-left: -31px;
position: absolute;
background: transparent 0 0 no-repeat;
opacity: 1;
filter: alpha(opacity=100);
}

.array-flexible-row.with-smileys td.answer-item.answer_cell_001 label::before { background-image: url(/WISE/upload/surveys/364252/images/Q1-01_v2.jpg); }
.array-flexible-row.with-smileys td.answer-item.answer_cell_002 label::before { background-image: url(/WISE/upload/surveys/364252/images/Q1-03_v2.jpg); }
.array-flexible-row.with-smileys td.answer-item.answer_cell_003 label::before { background-image: url(/WISE/upload/surveys/364252/images/Q1-02_v2.jpg); }
.array-flexible-row.with-smileys td.answer-item.answer_cell_004 label::before { background-image: url(/WISE/upload/surveys/364252/images/Q1-04_v2.jpg); }
.array-flexible-row.with-smileys td.answer-item.answer_cell_005 label::before { background-image: url(/WISE/upload/surveys/364252/images/Q1-05_v2.jpg); }

.array-flexible-row.with-smileys td.answer-item.answer_cell_001:hover label::before{
border: 1px solid #D9176E;
}
.array-flexible-row.with-smileys td.answer-item.answer_cell_002:hover label::before{
border: 1px solid #D9176E;
}
.array-flexible-row.with-smileys td.answer-item.answer_cell_003:hover label::before{
border: 1px solid #D9176E;
}
.array-flexible-row.with-smileys td.answer-item.answer_cell_004:hover label::before{
border: 1px solid #D9176E;
}
.array-flexible-row.with-smileys td.answer-item.answer_cell_005:hover label::before{
border: 1px solid #D9176E;
}

.array-flexible-row.with-smileys td.answer-item input[type="radio"]:focus + label::before {
outline: none;
}

.array-flexible-row.with-smileys td.answer-item label::after {
display: none;
}



Script added to the source of question:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#question{QID}').addClass('with-smileys');
});
</script>

However, the radio button is still here. And don't know how to highlight the border of image when the image is selected.

Sorry for such long message and hope you could help. Thanks !!

It looks to me like you are trying to use both the antiquated image-tick workaround and my array with smileys workaround . They are not compatible - you will need to use one or the other.

Thanks for your prompt reply.

I used your suggested script for Q1 while my array with simleys workaround for Q2.
You mean I could not use both scripts in the same survey?

However, even i merely apply your suggested script and use default limesurvey template (i.e. "basic" template), it still doesn't work.
You may refer to same survey link which i have removed Q2 and used default limesurvey template.
survey.aswatson.net/WISE/index.php/364252/lang-en

Thanks.

You cannot use the image-tick plugin on a page where you are also trying to use a pure CSS solution.

Try this in the sample survey linked above...

1) Add this script to the question source:
2) Add these rules to template.css:

It should be noted that the pure CSS solution will not work for IE8 without an extra coding.

Hello letty.
As far as I can see at the link you gave ( link: survey.aswatson.net/WISE/index.php/364252/lang-en ) it seems that you found a solution for Q1a.
How did you do it ?
Many thanks to you all,
Danilo