- Posts: 32
- Thank you received: 1
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Clickable image as answer
- letty
- Topic Author
- Offline
- Junior Member
Less
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.
- SurveyDennis
- Offline
- Senior Member
Less
More
- Posts: 72
- Thank you received: 10
6 years 10 months ago #152734
by SurveyDennis
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
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>
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
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 32
- Thank you received: 1
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!!
I am using Version 2.05+.
Thanks!!
The topic has been locked.
- SurveyDennis
- Offline
- Senior Member
Less
More
- Posts: 72
- Thank you received: 10
6 years 10 months ago #152989
by SurveyDennis
Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
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
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 32
- Thank you received: 1
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 !!
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
6 years 10 months ago #152998
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 32
- Thank you received: 1
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.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
6 years 10 months ago #153191
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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:
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.
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.
- spada
- Offline
- New Member
Less
More
- Posts: 8
- Thank you received: 0
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
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.