Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Clickable image as answer

  • letty
  • letty's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 10 months ago #152719 by letty
Clickable image as answer was created by letty
How could i have clickable image as answer (without radio buttons)?
The topic has been locked.
More
6 years 10 months ago #152734 by SurveyDennis
Replied by SurveyDennis on topic Clickable image as answer
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>

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
The topic has been locked.
  • letty
  • letty's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 10 months ago #152811 by letty
Replied by letty on topic Clickable image as answer
I tried but it doesn't work. Is it because of version of limesurvey?
I am using Version 2.05+.

Thanks!!
The topic has been locked.
More
6 years 10 months ago #152989 by SurveyDennis
Replied by SurveyDennis on topic Clickable image as answer
Do you have a testlink? Happy to take a look and see if I can spot it

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
The topic has been locked.
  • letty
  • letty's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 10 months ago - 6 years 10 months ago #152992 by letty
Replied by letty on topic Clickable image as answer
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 !!
Last edit: 6 years 10 months ago by letty.
The following user(s) said Thank You: surveySn
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 10 months ago #152998 by tpartner
Replied by tpartner on topic Clickable image as answer
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.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • letty
  • letty's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 10 months ago #153127 by letty
Replied by letty on topic Clickable image as answer
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.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 10 months ago #153191 by tpartner
Replied by tpartner on topic Clickable image as answer
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:
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#question{QID}').addClass('with-clickable-images');
  });
</script>

2) Add these rules to template.css:
Code:
.with-clickable-images input.radio {
  position: absolute;
  left: -9999em;
}
 
.with-clickable-images .answer-item label {
  border: 2px solid #CCC;
  padding: 15px;
  cursor: pointer;
}
 
.with-clickable-images .answer-item label:hover {
  background-color: #EFFFEE;
  border-color: #D2F2D3;
}
 
.with-clickable-images input.radio:checked + label {
  background-color: #D2F2D3;
  border-color: #97E199;
  cursor: default;
}


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

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
6 years 10 months ago #154547 by spada
Replied by spada on topic Clickable image as answer
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
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose