Welcome to the LimeSurvey Community Forum

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

emoji answers

  • okkhalid
  • okkhalid's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 2 months ago #163025 by okkhalid
emoji answers was created by okkhalid
Hello, I'm building a short survey, and I need all the answers as: faces - Emoji.

:( :laugh: :angry: :sick: :S

Any guidance on how to do that.
The topic has been locked.
More
6 years 2 months ago #163029 by fvanderstarre
Replied by fvanderstarre on topic emoji answers
Hi, when editing your answer options you can use the HTML editor to select emojis. :)
The following user(s) said Thank You: okkhalid
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
6 years 2 months ago - 6 years 2 months ago #163030 by LouisGac
Replied by LouisGac on topic emoji answers
you can also use the 5 point choice question type with slider layout, it will do what you want out of the box
Last edit: 6 years 2 months ago by LouisGac.
The topic has been locked.
  • okkhalid
  • okkhalid's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 2 months ago #163062 by okkhalid
Replied by okkhalid on topic emoji answers

fvanderstarre wrote: Hi, when editing your answer options you can use the HTML editor to select emojis. :)


Perfect, thank you so much, I have done it, but I still see the selection icons on the left, is that possible to remove it or hide it so people can only click on the picture.

The topic has been locked.
More
6 years 2 months ago #163065 by jelo
Replied by jelo on topic emoji answers
LS 3.0 has a question template for single choice radio, which you can use to just show images.

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
  • okkhalid
  • okkhalid's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 2 months ago #163067 by okkhalid
Replied by okkhalid on topic emoji answers
Thank you so much Jelo,

I'm using the version 2.73 as I would like to use the Android app to run the surveys,

Any help how to hide it?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 2 months ago #163079 by tpartner
Replied by tpartner on topic emoji answers
Give the question a CSS class "with-emoji" and add something like this to the end of template.css:

Code:
.with-emoji .radio label::before,
.with-emoji .radio 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: okkhalid
The topic has been locked.
  • okkhalid
  • okkhalid's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 2 months ago #163092 by okkhalid
Replied by okkhalid on topic emoji answers

tpartner wrote: Give the question a CSS class "with-emoji" and add something like this to the end of template.css:

Code:
.with-emoji .radio label::before,
.with-emoji .radio label::after {
  display: none;
}


Thank tpartner,

It worked, but I have small issue, now when a user select any of the 3 emoji it does not show what is the selection, do know how I can add 2 images one of them overly that show one the user select it.

Before when a user select any image the radio circle shows black dot, so it shows at least which selection. but now when click on any of the 3 images nothing confirm that what user select before go next.

Please guide. thank you agian
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 1 month ago #163097 by tpartner
Replied by tpartner on topic emoji answers
Well, I suppose you could do it with CSS backgrounds and/or borders, but if you want to use two images...

1) Place your 2 images in the answer text with a class "unchecked" or "checked".
Code:
<img class="unchecked" src="/limeSurvey/upload/surveys/123456/images/img_1.jpg" style="width: 100px;" />
<img class="checked" src="/limeSurvey/upload/surveys/123456/images/img_2.jpg" style="width: 100px;" />


2) Place this at the end of template.css:
Code:
.with-emoji .radio label::before,
.with-emoji .radio label::after {
  display: none;
}
 
.with-emoji .radio .label-text img.checked {
  display: none;
}
 
.with-emoji .radio input[type="radio"]:checked + label + .label-text img.unchecked {
  display: none;
}
 
.with-emoji .radio input[type="radio"]:checked + label + .label-text img.checked {
  display: inline;
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • okkhalid
  • okkhalid's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 1 month ago #163098 by okkhalid
Replied by okkhalid on topic emoji answers
Thank you so much tpartner for all the help, it works with images :)

If not hard do you mind to explain how I can do it with your suggestion:

tpartner wrote: Well, I suppose you could do it with CSS backgrounds and/or borders



I think this will be faster.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 1 month ago #163101 by tpartner
Replied by tpartner on topic emoji answers
Something like this:

Code:
.with-emoji .radio label::before,
.with-emoji .radio label::after {
  display: none;
}
 
.with-emoji .radio .label-text img {
  border: 4px solid #FFFFFF;
  box-sizing: content-box;
  -moz-transition: border-color 350ms ease; 
  -o-transition: border-color 350ms ease; 
  -webkit-transition:border-color 350ms ease; 
  transition: border-color 350ms ease;
}
 
.with-emoji .radio .label-text:hover img {
  border-color: #ECF0F1;
}
 
.with-emoji .radio input[type="radio"]:checked + label + .label-text img {
  border-color: #233140;
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • okkhalid
  • okkhalid's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 1 month ago #163377 by okkhalid
Replied by okkhalid on topic emoji answers
Hello, now my answers in vertical, how I can do it horizontally. please and thank you,

Do I need to make the image smaller, as it very big, is there is any way to make it with the css?

Thank you so much :)
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose