Clickable image as answer

More
7 months 4 weeks ago #152719 by letty
letty created the topic: Clickable image as answer
How could i have clickable image as answer (without radio buttons)?

Please Log in to join the conversation.

More
7 months 4 weeks ago #152734 by SurveyDennis
SurveyDennis replied the 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
dennis [at] SurveyFriendly [dot] com

Please Log in to join the conversation.

More
7 months 3 weeks ago #152811 by letty
letty replied the 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!!

Please Log in to join the conversation.

More
7 months 3 weeks ago #152989 by SurveyDennis
SurveyDennis replied the 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
dennis [at] SurveyFriendly [dot] com

Please Log in to join the conversation.

More
7 months 3 weeks ago - 7 months 3 weeks ago #152992 by letty
letty replied the 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: 7 months 3 weeks ago by letty.

Please Log in to join the conversation.

More
7 months 3 weeks ago #152998 by tpartner
tpartner replied the 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.

Please Log in to join the conversation.

More
7 months 3 weeks ago #153127 by letty
letty replied the 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.

Please Log in to join the conversation.

More
7 months 3 weeks ago #153191 by tpartner
tpartner replied the 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:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('#question{QID}').addClass('with-clickable-images');
	});
</script>

2) Add these rules to template.css:
.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.

Please Log in to join the conversation.

More
7 months 1 week ago #154547 by spada
spada replied the 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

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!