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

More
9 years 1 month 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.
Partner Banner
More
9 years 1 month 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.
The topic has been locked.
More
9 years 1 month ago - 9 years 1 month 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: 9 years 1 month ago by HeikoTietze. Reason: typo
The topic has been locked.
More
9 years 1 month 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.
The following user(s) said Thank You: HeikoTietze
The topic has been locked.
More
9 years 1 month 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.
More
9 years 1 month 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.
More
9 years 1 month 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
8 years 6 months 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.
More
8 years 6 months 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
8 years 6 months ago #166251 by csknfrt
Replied by csknfrt on topic Thumbs up/down questions
Thank you tpartner it works.
The topic has been locked.
More
8 years 6 months 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.
More
8 years 6 months 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