Thumbs up/down questions

More
2 months 4 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 to join the conversation.

More
2 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 to join the conversation.

More
2 months 4 days ago - 2 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: 2 months 4 days ago by HeikoTietze. Reason: typo

Please Log in to join the conversation.

More
2 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 to join the conversation.

More
2 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 to join the conversation.

More
2 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 to join the conversation.

More
2 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 to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now