images for radio buttons

More
1 year 5 months 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 or Create an account to join the conversation.

More
1 year 5 months 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 or Create an account to join the conversation.

More
1 year 5 months 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 or Create an account to join the conversation.

More
1 year 5 months ago #149144 by airraidsiren1974
airraidsiren1974 replied the topic: images for radio buttons
Unanswered


Answered
Attachments:

Please Log in or Create an account to join the conversation.

More
1 year 5 months 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 or Create an account to join the conversation.

More
1 year 5 months ago - 1 year 5 months 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: 1 year 5 months ago by tpartner.
The following user(s) said Thank You: airraidsiren1974

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago #149216 by airraidsiren1974
airraidsiren1974 replied the topic: images for radio buttons
Thank you!!!

Please Log in or Create an account to join the conversation.

More
1 year 4 months 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 or Create an account to join the conversation.

More
1 year 4 months 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 or Create an account to join the conversation.

More
4 months 3 weeks ago #166386 by csknfrt
csknfrt replied the topic: images for radio buttons
Hello tpartner,

unfortunately, it doesn't work with LS 3.5.4

Regars,

Please Log in or Create an account to join the conversation.

More
4 months 3 weeks ago #166400 by tpartner
tpartner replied the topic: images for radio buttons
This works in 3.5.4

/** SMILEYS QUESTION **/
 
.array-flexible-row.with-smileys table.subquestion-list {
	width: 100% !important;
	max-width: 395px;
	border: 0 none;
}
 
.array-flexible-row.with-smileys table.subquestion-list thead th,
.array-flexible-row.with-smileys col {
	width: auto !important;
	border: 0 none;
}
 
.array-flexible-row.with-smileys table.subquestion-list thead td,
.array-flexible-row.with-smileys table.subquestion-list th.answertext {
	width: 0;
    padding: 0;
	border: 0 none;
}
 
.array-flexible-row.with-smileys table.subquestion-list tbody tr:hover {
	background: transparent none;
}
 
.array-flexible-row.with-smileys table.subquestion-list td.answer-item {
	width: 20%;
    padding: 0;
	border: 1px solid #DBDBDB
}
 
.array-flexible-row.with-smileys .radio-item label {
	display: block;
	width: 100%;
	height: 0;
	margin: 0;
	padding: 100% 0 0 0;
	background: transparent 0 0 no-repeat;
	font-size: 0;
}
 
.array-flexible-row.with-smileys .radio-item input[type="radio"]:checked + label {
	background: #ECF0F1;
}
 
.array-flexible-row.with-smileys .radio-item label::before {
    position: absolute;
    left: 50%;
	top: 8px;
    display: inline-block;
    width: 79.4872%;
    height: 0;
    margin-left: -39.7436%;
    padding-top: 79.4872%;
    content: "";
    border: 0 none;
    border-radius: 0;
	background: transparent 0 0 no-repeat;
	background-size: cover;
	opacity: 0.5;
    filter: alpha(opacity=50);
}
 
.array-flexible-row.with-smileys .radio-item.answer_cell_A1 label::before { background-image: url(../images/smiley_1_62x62.png); }
.array-flexible-row.with-smileys .radio-item.answer_cell_A2 label::before { background-image: url(../images/smiley_2_62x62.png); }
.array-flexible-row.with-smileys .radio-item.answer_cell_A3 label::before { background-image: url(../images/smiley_3_62x62.png); }
.array-flexible-row.with-smileys .radio-item.answer_cell_A4 label::before { background-image: url(../images/smiley_4_62x62.png); }
.array-flexible-row.with-smileys .radio-item.answer_cell_A5 label::before { background-image: url(../images/smiley_5_62x62.png); }
 
.array-flexible-row.with-smileys .radio-item input[type="radio"]:hover + label::before {
	opacity: 0.65;
    filter: alpha(opacity=65);
}
 
.array-flexible-row.with-smileys .radio-item input[type="radio"]:checked + label::before {
	opacity: 1;
    filter: alpha(opacity=100);
}
 
.array-flexible-row.with-smileys .radio-item input[type="radio"]:focus + label::before {
    outline: none;
}
 
.array-flexible-row.with-smileys .radio-item label::after {
	display: none;
}
 
/* Defeat the core responsive styles */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
    .array-flexible-row.with-smileys table.ls-answers {
		display: table;
		border: 0 none;
	}
 
	.array-flexible-row.with-smileys table.ls-answers thead,
	.array-flexible-row.with-smileys table.ls-answers tbody {
		display: table-row-group;
		border: 0 none;
	}
 
	.array-flexible-row.with-smileys table.ls-answers tr {
		display: table-row;
		border: 0 none;
	}
 
	.array-flexible-row.with-smileys table.ls-answers th {
		display: table-cell;
		border: 0 none;
	}
 
	.array-flexible-row.with-smileys table.ls-answers td {
		display: table-cell;
	}
 
    .dir-ltr .array-flexible-row.with-smileys table.ls-answers,
	.dir-ltr .array-flexible-row.with-smileys table.ls-answers thead,
	.dir-ltr .array-flexible-row.with-smileys table.ls-answers tbody,
	.dir-ltr .array-flexible-row.with-smileys table.ls-answers th,
	.dir-ltr .array-flexible-row.with-smileys table.ls-answers td,
    .dir-rtl .array-flexible-row.with-smileys table.ls-answers,
	.dir-rtl .array-flexible-row.with-smileys table.ls-answers thead,
	.dir-rtl .array-flexible-row.with-smileys table.ls-answers tbody,
	.dir-rtl .array-flexible-row.with-smileys table.ls-answers th,
	.dir-rtl .array-flexible-row.with-smileys table.ls-answers td,
	.array-flexible-row.with-smileys table.ls-answers tr {
		text-align:center;
	}
 
    .dir-ltr table.ls-answers .radio-item label.ls-label-xs-visibility::before,
	.dir-ltr table.ls-answers .checkbox-item label.ls-label-xs-visibility::before,
    .dir-rtl table.ls-answers .radio-item label.ls-label-xs-visibility::before,
	.dir-rtl table.ls-answers .checkbox-item label.ls-label-xs-visibility::before {
		margin-right: 0;
		margin-left: -39.7436%;
	}
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in or Create an account to join the conversation.

More
4 months 3 weeks ago #166443 by tpartner
tpartner replied the topic: images for radio buttons
I've put together a custom question theme based on the 5-point-choice question type - github.com/tpartner/LimeSurvey-5-Point-Smileys

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!