Check out the LimeSurvey source code on GitHub!

Border for an array question

More
3 years 1 month ago - 3 years 1 month ago #103738 by Dede1989
Hello guys,

I want to add a visual separator for my array question e.g. a black border or space between two answering options. I attach a screenshot which should clarify what i want to realize. Maybe somebody can help me?

Dede1989

Last Edit: 3 years 1 month ago by Dede1989.

Please Log in to join the conversation.

More
3 years 1 month ago #103746 by tpartner
You will need to insert a new column with JavaScript and style it with CSS.

Add this script to the question source:
<script type="text/javascript" charset="utf-8">	
 
	$(document).ready(function() {
 
		var newColPosition = 6;
 
		// Identify this question ID
		var qID = {QID};
 
		// Insert a new column
		$('#question'+qID+' table.question col:eq('+(newColPosition-1)+')', this).after('<col class="inserted-column" />');
		$('#question'+qID+' table.question thead th:eq('+(newColPosition-2)+')', this).after('<th class="inserted-column" />');
		$('#question'+qID+' table.question tbody tr').each(function(i) {
			$('td:eq('+(newColPosition-2)+')', this).after('<td class="inserted-column" />');
		});
	});
 
</script>


2) Add something like this to the end of template.css:
.inserted-column {
	padding: 1px !important;
	background-color: #000000 !important;
}

.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
3 years 1 month ago #103751 by Dede1989
Thanks alot. If I use your code I get this:

Please Log in to join the conversation.

More
3 years 1 month ago #103753 by tpartner
Can you activate a test survey so I can see the source?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
3 years 1 month ago - 3 years 1 month ago #103754 by Dede1989
Testsurvey:

Link
Last Edit: 3 years 1 month ago by Dede1989.

Please Log in to join the conversation.

More
3 years 1 month ago #103755 by tpartner
For that template, use this script:

<script type="text/javascript" charset="utf-8">	
 
	$(document).ready(function() {
 
		var newColPosition = 6;
 
		// Identify this question ID
		var qID = {QID};
 
		// Insert a new column
		$('#question'+qID+' table.question.subquestions-list col:eq('+(newColPosition-1)+')', this).after('<col class="inserted-column" />');
		$('#question'+qID+' table.question.subquestions-list thead th:eq('+(newColPosition-2)+')', this).after('<th class="inserted-column" />');
		$('#question'+qID+' table.question.subquestions-list tbody tr').each(function(i) {
			$('td:eq('+(newColPosition-2)+')', this).after('<td class="inserted-column" />');
		});
	});
 
</script>

.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
3 years 1 month ago #103756 by Dede1989
Thanks alot. It works fine! Where can I change the border color and thickness to fit for this template?

Please Log in to join the conversation.

More
3 years 1 month ago #103757 by tpartner
Modify the CSS snippet I gave you.

Maybe something like:
.inserted-column {
	padding: 4px !important;
	background-color: #999999!important;
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form