images for radio buttons

More
7 months 4 weeks ago #149097 by airraidsiren1974
airraidsiren1974 created the topic: images for radio buttons
Hi everyone,

I'm trying to get the imagetick workaround into one of my surveys. I need to have a different image for each option in an array question. I have everything worked out except this:

When an answer is selected, all the other images change to the unselected version of the image used for the answer selected... can someone point me to where I need to fix the javascript? I'm pretty sure it is on the imagetick_lime_2.js, but I can't figure it out.


Attached is what the question looks like before answered and after answered, and the source code for the question

Any help is appreciated!
Attachments:

Please Log in to join the conversation.

More
7 months 3 weeks ago #149138 by tpartner
tpartner replied the topic: images for radio buttons
I don't see any screenshots.

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 #149139 by airraidsiren1974
airraidsiren1974 replied the topic: images for radio buttons
Arrgh they seemed to attatch yesterday when i posted this. Will try again.

Please Log in to join the conversation.

More
7 months 3 weeks ago #149144 by airraidsiren1974
airraidsiren1974 replied the topic: images for radio buttons
Unanswered


Answered
Attachments:

Please Log in to join the conversation.

More
7 months 3 weeks ago #149145 by airraidsiren1974
airraidsiren1974 replied the topic: images for radio buttons
I would like only the answer chosen to change... Not all of them. What am I doing wrong? Thanks in advance. Will definitely be making a contribution once I get back to the office.

Please Log in to join the conversation.

More
7 months 3 weeks ago - 7 months 3 weeks ago #149174 by tpartner
tpartner replied the topic: images for radio buttons
I don't think that that very old workaround will work for what you are doing. It is designed to manipulate all elements in a block (question or array row)

I would be inclined to use pure CSS with pseudo-elements to accomplish it. (much like the radios in version 2.6x)

Something like the CSS below which:
- applies to an array question with a CSS class "with-smileys"
- applies to an array question with answer codes "A1, A2, A3, A4, A5"
- is written for 62x62 pixel images
- uses opacity for "hover" and "checked" effects.

Note that this is just a quick example that would need to be modified for responsiveness.

.array-flexible-row.with-smileys table.subquestion-list,
.array-flexible-row.with-smileys col.col-visible {
	width: auto !important;
}
 
.array-flexible-row.with-smileys table.array-no-dropdown td.answer-item.text-center {
    padding: 0;
	border: 1px solid #DBDBDB
}
 
.array-flexible-row.with-smileys .radio label {
	display: block;
	width: 78px;
	height: 78px;
	padding: 0;
	background: transparent 0 0 no-repeat;
}
 
.array-flexible-row.with-smileys .radio input[type="radio"]:checked + label {
	background: #ECF0F1;
}
 
.array-flexible-row.with-smileys .radio label::before {
    border: 0 none;
    border-radius: 0;
    content: "";
    display: inline-block;
    height: 62px;
    width: 62px;
    left: 50%;
	top: 8px;
    margin-left: -31px;
    position: absolute;
	background: transparent 0 0 no-repeat;
	opacity: 0.5;
    filter: alpha(opacity=50);
}
 
.array-flexible-row.with-smileys .radio.answer_cell_A1 label::before { background-image: url(../images/smiley_1_62x62.png); }
.array-flexible-row.with-smileys .radio.answer_cell_A2 label::before { background-image: url(../images/smiley_2_62x62.png); }
.array-flexible-row.with-smileys .radio.answer_cell_A3 label::before { background-image: url(../images/smiley_3_62x62.png); }
.array-flexible-row.with-smileys .radio.answer_cell_A4 label::before { background-image: url(../images/smiley_4_62x62.png); }
.array-flexible-row.with-smileys .radio.answer_cell_A5 label::before { background-image: url(../images/smiley_5_62x62.png); }
 
.array-flexible-row.with-smileys .radio input[type="radio"]:hover + label::before {
	opacity: 0.65;
    filter: alpha(opacity=65);
}
 
.array-flexible-row.with-smileys .radio input[type="radio"]:checked + label::before {
	opacity: 1;
    filter: alpha(opacity=100);
}
 
.array-flexible-row.with-smileys .radio input[type="radio"]:focus + label::before {
    outline: none;
}
 
.array-flexible-row.with-smileys .radio label::after {
	display: none;
}


Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 7 months 3 weeks ago by tpartner.
The following user(s) said Thank You: airraidsiren1974

Please Log in to join the conversation.

More
7 months 3 weeks ago #149216 by airraidsiren1974
airraidsiren1974 replied the topic: images for radio buttons
Thank you!!!

Please Log in to join the conversation.

More
6 months 2 weeks ago #152217 by surveyman
surveyman replied the topic: images for radio buttons
Interesting solution. The CSS has to be copied into the template CSS file? (in my case: template.css).
Do you know how to add the CSS to the question, and if this will work at an older LS installation as well? (2.06)
I didn't got it work in 2.06.

Please Log in to join the conversation.

More
6 months 2 weeks ago #152227 by tpartner
tpartner replied the topic: images for radio buttons
In 2.06, there is no facility in the GUI to apply a question class so you will need to set up your survey to use JavaScript and place the following script in the source of the question:

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


Then, add these style rules to the end of template.css:

.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: 1px solid #DBDBDB;
}
 
.array-flexible-row.with-smileys input.radio {
	position: absolute;
	left: -9999em;
}
 
.array-flexible-row.with-smileys td.answer-item label {
	display: block;
    position: relative;
    top: auto;    
	left: auto;
	width: 78px;
	height: 78px;
	padding: 0;
	background: transparent 0 0 no-repeat;
	font-size: 0;
}
 
.array-flexible-row.with-smileys td.answer-item input[type="radio"]:checked + label {
	background: #ECF0F1;
}
 
.array-flexible-row.with-smileys td.answer-item label::before {
    border: 0 none;
    border-radius: 0;
    content: "";
    display: inline-block;
    height: 62px;
    width: 62px;
    left: 50%;
	top: 8px;
    margin-left: -31px;
    position: absolute;
	background: transparent 0 0 no-repeat;
	opacity: 0.5;
    filter: alpha(opacity=50);
}
 
.array-flexible-row.with-smileys td.answer-item.answer_cell_00A1 label::before { background-image: url(smiley_1_62x62.png); }
.array-flexible-row.with-smileys td.answer-item.answer_cell_00A2 label::before { background-image: url(smiley_2_62x62.png); }
.array-flexible-row.with-smileys td.answer-item.answer_cell_00A3 label::before { background-image: url(smiley_3_62x62.png); }
.array-flexible-row.with-smileys td.answer-item.answer_cell_00A4 label::before { background-image: url(smiley_4_62x62.png); }
.array-flexible-row.with-smileys td.answer-item.answer_cell_00A5 label::before { background-image: url(smiley_5_62x62.png); }
 
.array-flexible-row.with-smileys td.answer-item input[type="radio"]:hover + label::before {
	opacity: 0.65;
    filter: alpha(opacity=65);
}
 
.array-flexible-row.with-smileys td.answer-item input[type="radio"]:checked + label::before {
	opacity: 1;
    filter: alpha(opacity=100);
}
 
.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;
}



Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: surveyman

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now