- Posts: 10
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Thumbs up/down questions
- HeikoTietze
- Topic Author
- Offline
- New Member
Less
More
6 years 7 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.
Goal is to present pictures and allow voting on it.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
6 years 7 months ago #157570
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
To handle the "scoring", you will likely need to use assessments and load equation questions with the values. See "Qcode.value - manual.limesurvey.org/Expression_Manager#Access_to_Variables
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 - manual.limesurvey.org/Expression_Manager#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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 10
- Thank you received: 0
6 years 7 months ago - 6 years 7 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?
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: 6 years 7 months ago by HeikoTietze. Reason: typo
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
6 years 7 months ago #157588
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 10
- Thank you received: 0
6 years 7 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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
6 years 7 months ago #157615
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 10
- Thank you received: 0
6 years 7 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.
- csknfrt
- Offline
- New Member
Less
More
- Posts: 19
- Thank you received: 1
5 years 11 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 - manual.limesurvey.org/Expression_Manager#Access_to_Variables
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
5 years 11 months ago #166243
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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.
- csknfrt
- Offline
- New Member
Less
More
- Posts: 19
- Thank you received: 1
5 years 11 months ago #166251
by csknfrt
Replied by csknfrt on topic Thumbs up/down questions
Thank you tpartner it works.
The topic has been locked.
- phplist
- Offline
- New Member
Less
More
- Posts: 9
- Thank you received: 0
5 years 11 months ago #166324
by phplist
Open Source email marketing and analytics established in 2000. Available self-hosted, and with fully managed plans at phplist.com.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
5 years 11 months ago #166331
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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.
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.