Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l)

Mehr
1 Monat 2 Wochen her - 1 Monat 2 Wochen her #192617 von Kristoss
Hi Guys,

LS: 3.15.1+181017 / vanilla template / the survey will be displayed only on pc in chrome website (no mobile or different browsers)


I'm using radio-button-list question type. I would like to arrange this question in the following way:

- on the center of screen i would like to present an image

- on each corner of the screen (top-left, top-right, bottom-left, bottom-right) i would like to present possible answer option (buttons with labels). Explanatory figure in the attachment.

I tried to modify the ".radio-list" from "theme.css" via theme editor but with no effect.

My skill with html/css can be described as "monkey see, monkey do" so please take this into account while answering my question.
Anhänge:
Letzte Änderung: 1 Monat 2 Wochen her von Kristoss.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

LimeSurvey Partners
Mehr
1 Monat 2 Wochen her - 1 Monat 2 Wochen her #192619 von tpartner
Can you attach a small sample survey (.lss file) containing only that question?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Letzte Änderung: 1 Monat 2 Wochen her von tpartner.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 2 Wochen her #192623 von Kristoss
Thank you for quick reaction.

Sample survey in the attachment.
Anhänge:

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 2 Wochen her - 1 Monat 2 Wochen her #192625 von tpartner
You will need do do it with two steps...

Move the buttons into the question text element via JavaScript:

<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Move the answer buttons into the question text element
		$('.answer-container', thisQuestion).removeClass('col-xs-12').appendTo($('.ls-label-question', thisQuestion));
 
		// Loop through the answer buttons
		$('.bootstrap-buttons-div', thisQuestion).each(function(i) {
 
			// Assign classes for styling
			$(this).addClass('item-'+(i+1));
		});
    });
</script>

Add some styles like this:

<style type="text/css">
 
	#question{QID} .ls-label-question {
		position: relative;
		margin: 50px auto;
		width: 640px;
	}
 
	#question{QID} .ls-label-question .answers-list {
		padding: 0;
	}
 
	#question{QID} .ls-label-question .bootstrap-buttons-div {
		position: absolute;
		width: 200px;
	}
 
	#question{QID} .ls-label-question .bootstrap-buttons-div.item-1 {
		top: 20px;
		left: -140px;
	}
 
	#question{QID} .ls-label-question .bootstrap-buttons-div.item-2 {
		top: 20px;
		right: -140px;
	}
 
	#question{QID} .ls-label-question .bootstrap-buttons-div.item-3 {
		bottom: 20px;
		left: -140px;
	}
 
	#question{QID} .ls-label-question .bootstrap-buttons-div.item-4 {
		bottom: 20px;
		right: -140px;
	}
</style>



Here is your sample survey back with those changes:

Dateianhang:

Dateiname: limesurvey...1321.lss
Dateigröße:19 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Anhänge:
Letzte Änderung: 1 Monat 2 Wochen her von tpartner.
Folgende Benutzer bedankten sich: DenisChenu, gabrieljenik

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 2 Wochen her #192635 von Kristoss
Thank you for help but unfortunately I cannot reproduce your output. I'm adding my screenshot - this is how your survey is displayed on my setting.
Anhänge:

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 2 Wochen her #192636 von tpartner
Can you activate the sample survey and give us a link?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 2 Wochen her #192637 von Kristoss
Yes. I see the source code in the question but the output is regular as for button-list question.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 2 Wochen her #192665 von tpartner
Without a link to a live survey I cannot see if there are and JavaScript errors or other issues.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 2 Wochen her #192673 von Kristoss

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 2 Wochen her - 1 Monat 2 Wochen her #192691 von tpartner
Hmm...that older version uses a different HTML structure for the button question. I cannot test directly but try replacing the script and styles in the question text with these:

<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Move the answer buttons into the question text element
		$('.answer-container', thisQuestion).removeClass('col-xs-12').appendTo($('.ls-label-question', thisQuestion));
 
		// Loop through the answer buttons
		$('.ls-label-question .button-item', thisQuestion).each(function(i) {
 
			// Assign classes for styling
			$(this).addClass('item-'+(i+1));
		});
    });
</script>

<style type="text/css">
 
	#question{QID} .ls-label-question {
		position: relative;
		margin: 50px auto;
		width: 640px;
	}
 
	#question{QID} .ls-label-question .answers-list {
		padding: 0;
	}
 
	#question{QID} .ls-label-question .answers-list .btn-group {
		display: block;
		position: static;
	}
 
	#question{QID} .ls-label-question .button-item {
		display: block;
		position: absolute;
		width: 200px;
		border-radius: 6px;
	}
 
	#question{QID} .ls-label-question .button-item.item-1 {
		top: 20px;
		left: -140px;
	}
 
	#question{QID} .ls-label-question .button-item.item-2 {
		top: 20px;
		right: -140px;
	}
 
	#question{QID} .ls-label-question .button-item.item-3 {
		bottom: 20px;
		left: -140px;
	}
 
	#question{QID} .ls-label-question .button-item.item-4 {
		bottom: 20px;
		right: -140px;
	}
</style>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Letzte Änderung: 1 Monat 2 Wochen her von tpartner.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha