Back to limesurvey.org

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 11 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 11 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 11 months ago - 6 years 11 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 11 months ago by LouisGac.
The topic has been locked.
  • okkhalid
  • okkhalid's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 11 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.

Attachments:
The topic has been locked.
More
6 years 11 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 11 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 11 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 11 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 11 months 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 11 months 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 11 months 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 11 months 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.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source