Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Thumbs up/down questions

  • HeikoTietze
  • HeikoTietze's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 8 months ago #157561 by HeikoTietze
Thumbs up/down questions was created by HeikoTietze
Is there a solution for this kind of +1/-1 voting? No answer should be 0.

Goal is to present pictures and allow voting on it.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 8 months ago #157570 by tpartner
Replied by tpartner on topic Thumbs up/down questions
In version 2.67.x, you can convert a list-radio question to thumbs up/down via CSS as follows:

1) Give the question a class "thumbs-question"

2) Add something like this to the end of template.css

Code:
.thumbs-question .answer-container {
    padding-top: 1em;
}
 
.thumbs-question .radio label, .checkbox label {
    min-height: 48px;
    line-height: 48px;
  margin: 10px 0;
}
 
.thumbs-question .radio label::before {
    background-color: transparent;
    border: 0 none;
    border-radius: 0;
    height: auto;
    width: auto;
    left: 0;
    transition: all 0.15s ease-in-out 0s;
  font-family: FontAwesome;
  font-size: 48px;
    content: "\f164";
  color: #CCC;
}
 
.thumbs-question .radio-list .answer-item.radio:nth-child(2) label::before {
    content: "\f165";
}
 
.thumbs-question .radio label:hover::before {
    color: #b9cc14;
  opacity: 0.5;
    filter: alpha(opacity=50);
}
 
.thumbs-question .radio-list .answer-item.radio:nth-child(2) label:hover::before {
    color: #e75041;
}
 
.thumbs-question .radio input[type="radio"]:checked + label::before {
    color: #b9cc14;
  outline: none !important;
  opacity: 1;
    filter: alpha(opacity=100);
}
 
.thumbs-question .radio-list .answer-item.radio:nth-child(2) input[type="radio"]:checked + label::before {
    color: #e75041;
}
 
.thumbs-question .radio label::after {
  display: none;
}

To handle the "scoring", you will likely need to use assessments and load equation questions with the values. See "Qcode.value - www.limesurvey.org/manual/Expression_Man...#Access_to_Variables

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
  • HeikoTietze
  • HeikoTietze's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 8 months ago - 7 years 8 months ago #157576 by HeikoTietze
Replied by HeikoTietze on topic Thumbs up/down questions
Works like a charm, thanks a lot Tony!

For newbies like me:
* General options > Question type: <List radio>
* Additional options > CSS class(es): thumbs-question
* Edit > Answer options: 2 (without text)
* Survey properties > General settings & texts > Presentation & navigation > Show "No answer": Off

However, I'd like to place the two controls horizontally next to each other using two columns. Doing this makes both a thumb up (f164). Looks like the second column is not nth-child(2). What can I do?
Last edit: 7 years 8 months ago by HeikoTietze. Reason: typo
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 8 months ago #157588 by tpartner
Replied by tpartner on topic Thumbs up/down questions
Remove the question setting for columns and add this to your CSS:

Code:
.thumbs-question .answer-item {
  float: left;
  width: auto !important;
  margin: 0 10px 10px 10px;
}

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: HeikoTietze
The topic has been locked.
  • HeikoTietze
  • HeikoTietze's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 8 months ago #157590 by HeikoTietze
Replied by HeikoTietze on topic Thumbs up/down questions
Awesome! Final thing: How can I forward (auto next) on click? Always clicking one of the thumbs and the Next button is tedious. Next should remain in case of no clear opinion, alternatively I could add 'no answer' option too.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 8 months ago #157615 by tpartner
Replied by tpartner on topic Thumbs up/down questions
Add this to the end of template.js:

Code:
$(document).ready(function() { 
  $('.thumbs-question input.radio').on('click', function(e) {
    $('#movenextbtn, #movesubmitbtn').trigger('click');
  });  
});
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: HeikoTietze
The topic has been locked.
  • HeikoTietze
  • HeikoTietze's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 8 months ago #157616 by HeikoTietze
Replied by HeikoTietze on topic Thumbs up/down questions
Now it's perfect. Thanks a lot!
The topic has been locked.
More
7 years 1 month ago #166198 by csknfrt
Replied by csknfrt on topic Thumbs up/down questions
I added to custom.css but it didn't work. How can I use this in LS versiyon 3.5.4+180320

tpartner wrote: In version 2.67.x, you can convert a list-radio question to thumbs up/down via CSS as follows:

1) Give the question a class "thumbs-question"

2) Add something like this to the end of template.css

Code:
.thumbs-question .answer-container {
    padding-top: 1em;
}
 
.thumbs-question .radio label, .checkbox label {
    min-height: 48px;
    line-height: 48px;
  margin: 10px 0;
}
 
.thumbs-question .radio label::before {
    background-color: transparent;
    border: 0 none;
    border-radius: 0;
    height: auto;
    width: auto;
    left: 0;
    transition: all 0.15s ease-in-out 0s;
  font-family: FontAwesome;
  font-size: 48px;
    content: "\f164";
  color: #CCC;
}
 
.thumbs-question .radio-list .answer-item.radio:nth-child(2) label::before {
    content: "\f165";
}
 
.thumbs-question .radio label:hover::before {
    color: #b9cc14;
  opacity: 0.5;
    filter: alpha(opacity=50);
}
 
.thumbs-question .radio-list .answer-item.radio:nth-child(2) label:hover::before {
    color: #e75041;
}
 
.thumbs-question .radio input[type="radio"]:checked + label::before {
    color: #b9cc14;
  outline: none !important;
  opacity: 1;
    filter: alpha(opacity=100);
}
 
.thumbs-question .radio-list .answer-item.radio:nth-child(2) input[type="radio"]:checked + label::before {
    color: #e75041;
}
 
.thumbs-question .radio label::after {
  display: none;
}

To handle the "scoring", you will likely need to use assessments and load equation questions with the values. See "Qcode.value - www.limesurvey.org/manual/Expression_Man...#Access_to_Variables

The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 1 month ago #166243 by tpartner
Replied by tpartner on topic Thumbs up/down questions
This works in version 3.5.4:

Code:
.thumbs-question .answer-container {
  padding-top: 1em;
}
 
.thumbs-question .answer-item {
  float: left;
  clear: none;
  width: auto !important;
  margin: 0 25px 10px 25px;
}
 
.thumbs-question .answer-item label {
  min-height: 48px;
  line-height: 48px;
  margin: 10px 0;
  font-size: 0px;
}
 
.thumbs-question .answer-item label::before {
  background-color: transparent;
  border: 0 none;
  border-radius: 0;
  height: auto;
  width: auto;
  left: 0;
  transition: all 0.15s ease-in-out 0s;
  font-family: FontAwesome;
  font-size: 48px;
  content: "\f164";
  color: #CCC;
}
 
.thumbs-question .radio-list .answer-item:nth-child(2) label::before {
  content: "\f165";
}
 
.thumbs-question .answer-item label:hover::before {
  color: #b9cc14;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
 
.thumbs-question .radio-list .answer-item:nth-child(2) label:hover::before {
  color: #e75041;
}
 
.thumbs-question .answer-item input[type="radio"]:checked + label::before {
  color: #b9cc14;
  outline: none !important;
  opacity: 1;
  filter: alpha(opacity=100);
}
 
.thumbs-question .radio-list .answer-item:nth-child(2) input[type="radio"]:checked + label::before {
  color: #e75041;
}
 
.thumbs-question .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 topic has been locked.
More
7 years 1 month ago #166251 by csknfrt
Replied by csknfrt on topic Thumbs up/down questions
Thank you tpartner it works.
The topic has been locked.
More
7 years 1 month ago #166324 by phplist
Replied by phplist on topic Thumbs up/down questions
Any chance of getting this feature into a pull request and the core application? It would undoubtedly be a useful feature.
Open Source email marketing and analytics established in 2000. Available self-hosted, and with fully managed plans at phplist.com.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 1 month ago #166331 by tpartner
Replied by tpartner on topic Thumbs up/down questions
I doubt it.

Given time,I may role it into a custom question theme but I don't really like to do that unless there is significant structure/behaviour changes required. This is pretty simply done with a little CSS.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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