Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

images for radio buttons

  • airraidsiren1974
  • airraidsiren1974's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 3 weeks ago #149097 by airraidsiren1974
images for radio buttons was created 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!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 3 weeks 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.
The topic has been locked.
  • airraidsiren1974
  • airraidsiren1974's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 3 weeks ago #149139 by airraidsiren1974
Replied by airraidsiren1974 on topic images for radio buttons
Arrgh they seemed to attatch yesterday when i posted this. Will try again.
The topic has been locked.
  • airraidsiren1974
  • airraidsiren1974's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 3 weeks ago #149144 by airraidsiren1974
Replied by airraidsiren1974 on topic images for radio buttons
Unanswered


Answered
The topic has been locked.
  • airraidsiren1974
  • airraidsiren1974's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 3 weeks ago #149145 by airraidsiren1974
Replied by airraidsiren1974 on 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.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 3 weeks ago - 7 years 3 weeks 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.

Code:
.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.
Last edit: 7 years 3 weeks ago by tpartner.
The following user(s) said Thank You: airraidsiren1974
The topic has been locked.
  • airraidsiren1974
  • airraidsiren1974's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 3 weeks ago #149216 by airraidsiren1974
Replied by airraidsiren1974 on topic images for radio buttons
Thank you!!!
The topic has been locked.
More
6 years 11 months 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.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 11 months 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:

Code:
<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:

Code:
.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.
The following user(s) said Thank You: surveyman
The topic has been locked.
More
5 years 11 months 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,
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 11 months ago #166400 by tpartner
Replied by tpartner on topic images for radio buttons
This works in 3.5.4

Code:
/** 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.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 11 months 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.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose