Thumbs up/down questions

More
10 months 5 days ago #157561 by HeikoTietze
HeikoTietze created the topic: Thumbs up/down questions
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.

Please Log in or Create an account to join the conversation.

More
10 months 4 days ago #157570 by tpartner
tpartner replied the 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

.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:

Please Log in or Create an account to join the conversation.

More
10 months 4 days ago - 10 months 4 days ago #157576 by HeikoTietze
HeikoTietze replied the 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: 10 months 4 days ago by HeikoTietze. Reason: typo

Please Log in or Create an account to join the conversation.

More
10 months 4 days ago #157588 by tpartner
tpartner replied the topic: Thumbs up/down questions
Remove the question setting for columns and add this to your CSS:

.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

Please Log in or Create an account to join the conversation.

More
10 months 4 days ago #157590 by HeikoTietze
HeikoTietze replied the 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.

Please Log in or Create an account to join the conversation.

More
10 months 3 days ago #157615 by tpartner
tpartner replied the topic: Thumbs up/down questions
Add this to the end of template.js:

$(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: LouisGac, HeikoTietze

Please Log in or Create an account to join the conversation.

More
10 months 3 days ago #157616 by HeikoTietze
HeikoTietze replied the topic: Thumbs up/down questions
Now it's perfect. Thanks a lot!

Please Log in or Create an account to join the conversation.

More
2 months 3 weeks ago #166198 by csknfrt
csknfrt replied the 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

.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 following user(s) said Thank You: LouisGac

Please Log in or Create an account to join the conversation.

More
2 months 3 weeks ago #166243 by tpartner
tpartner replied the topic: Thumbs up/down questions
This works in version 3.5.4:

.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 following user(s) said Thank You: LouisGac

Please Log in or Create an account to join the conversation.

More
2 months 3 weeks ago #166251 by csknfrt
csknfrt replied the topic: Thumbs up/down questions
Thank you tpartner it works.

Please Log in or Create an account to join the conversation.

More
2 months 3 weeks ago #166324 by phplist
phplist replied the 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.

Please Log in or Create an account to join the conversation.

More
2 months 3 weeks ago #166331 by tpartner
tpartner replied the 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.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!