images for radio buttons

More
2 years 2 months ago #149097 by airraidsiren1974
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.

LimeSurvey Partners
More
2 years 2 months ago #149138 by tpartner
Replied by tpartner on 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.
Official LimeSurvey Partner - partnersurveys.com

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

More
2 years 2 months ago #149139 by airraidsiren1974
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
2 years 2 months ago #149144 by airraidsiren1974
Unanswered


Answered
Attachments:

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

More
2 years 2 months ago #149145 by airraidsiren1974
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
2 years 2 months ago - 2 years 2 months ago #149174 by tpartner
Replied by tpartner on 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.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
Last edit: 2 years 2 months ago by tpartner.
The following user(s) said Thank You: airraidsiren1974

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

More
2 years 2 months ago #149216 by airraidsiren1974
Thank you!!!

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

More
2 years 1 month ago #152217 by surveyman
Replied by surveyman on 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
2 years 1 month ago #152227 by tpartner
Replied by tpartner on 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.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
The following user(s) said Thank You: surveyman

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

More
1 year 1 month ago #166386 by csknfrt
Replied by csknfrt on 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
1 year 1 month ago #166400 by tpartner
Replied by tpartner on 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.
Official LimeSurvey Partner - partnersurveys.com

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

More
1 year 1 month ago #166443 by tpartner
Replied by tpartner on 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.
Official LimeSurvey Partner - partnersurveys.com

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

More
6 months 5 days ago #176812 by danielalm
Replied by danielalm on topic images for radio buttons
Great Question theme! I'm running the hosted solution, how can I add this theme?

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

More
6 months 5 days ago #176815 by jelo
Replied by jelo on topic images for radio buttons

danielalm wrote: Great Question theme! I'm running the hosted solution, how can I add this theme?

You need to ask LimeSurvey support to add it for you. LS3 isn't allowing to upload questions themes on your own via the GUI.

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The following user(s) said Thank You: tpartner

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!