- Posts: 2
- Thank you received: 0
How to combine two functions in one question?
1 year 4 months ago - 1 year 4 months ago #137057
by Till
Till created the topic: How to combine two functions in one question?
We design a survey for a Social Network Analysis in which we ask the employees in a company to nominate colleagues for certain relationship types. For instance, with whom are you friends outside of work?
An array lists all employees and participants can make their choices.
Function 1: We use a radio buttons for nominating colleagues. To undo a nomination we’ve implemented a reset button next to each name (see screenshot). That works
Function 2: Now we would like to insert subheadings in order to group the individual names (by organisational departments) to make it easier for participants to find their peers (there will be 70 names in total). We’ve tried the “hide” function to omit an answer and to display the department name instead. That works without the reset button, but not in combination. We also tried the function “subheading”, but also that did not work.
I'm rather new to LimeSurvey and coding, and I'm not entirely sure how to combine functions properly.
How could we combine the reset button with either the “hide” function or the ”subheading” function?
Or, is there a better way to group answers?
Thanks,
Till
We use LimeSurvey Version 2.05+. This is how the script for the radio button looks like (in the question source):
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
addReset('{QID}');
function addReset(qID) {
$('#question'+qID+' table.subquestions-list').css('table-layout', 'auto');
$('#question'+qID+' table.subquestions-list thead tr').append('<th />');
$('#question'+qID+' tr.answers-list').append('<td class="buttonCell"><input type="button" value="Reset" class="resetButton" /></td>');
$('#question'+qID+' .resetButton').click(function(e){
var parentRow = $(this).closest('tr');
$('input.radio', parentRow).attr('checked', false);
});
}
});
</script>
An array lists all employees and participants can make their choices.
Function 1: We use a radio buttons for nominating colleagues. To undo a nomination we’ve implemented a reset button next to each name (see screenshot). That works
Function 2: Now we would like to insert subheadings in order to group the individual names (by organisational departments) to make it easier for participants to find their peers (there will be 70 names in total). We’ve tried the “hide” function to omit an answer and to display the department name instead. That works without the reset button, but not in combination. We also tried the function “subheading”, but also that did not work.
I'm rather new to LimeSurvey and coding, and I'm not entirely sure how to combine functions properly.
How could we combine the reset button with either the “hide” function or the ”subheading” function?
Or, is there a better way to group answers?
Thanks,
Till
We use LimeSurvey Version 2.05+. This is how the script for the radio button looks like (in the question source):
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
addReset('{QID}');
function addReset(qID) {
$('#question'+qID+' table.subquestions-list').css('table-layout', 'auto');
$('#question'+qID+' table.subquestions-list thead tr').append('<th />');
$('#question'+qID+' tr.answers-list').append('<td class="buttonCell"><input type="button" value="Reset" class="resetButton" /></td>');
$('#question'+qID+' .resetButton').click(function(e){
var parentRow = $(this).closest('tr');
$('input.radio', parentRow).attr('checked', false);
});
}
});
</script>
Please Log in to join the conversation.
1 year 4 months ago #137105
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
tpartner replied the topic: How to combine two functions in one question?
I believe something like this should let you insert "header" rows without affecting your reset buttons:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// Define the sub-heading text strings
var subHeading1 = 'Subheading 1';
var subHeading2 = 'Subheading 2';
var answersLength = $('tr.answers-list:eq(0) td.answer-item', thisQuestion).length;
// Insert the new rows
$('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th>'+subHeading1+'</th><td colspan="'+answersLength+'" /></tr>');
$('tr.answers-list:eq(5)', thisQuestion).before('<tr class="sub-header-row"><th>'+subHeading2+'</th><td colspan="'+answersLength+'" /></tr>');
// Fix up the row classes
var rowClass = 1;
$('table.subquestions-list tbody tr', thisQuestion).each(function(i) {
if($(this).hasClass('sub-header-row')) {
rowClass = 1
}
else {
rowClass++;
$(this).removeClass('array1 array2')
if(rowClass % 2 == 0) {
$(this).addClass('array2');
}
else {
$(this).addClass('array1');
}
}
});
});
</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.
4 months 3 weeks ago #155220
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
tpartner replied the topic: How to combine two functions in one question?
This script will center the sub-headings:
Then, maybe something like this at the end of template.css:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// Define the sub-heading text strings
var subHeading1 = 'Subheading 1';
var subHeading2 = 'Subheading 2';
var columnsLength = $('tr.answers-list:eq(0) > *', thisQuestion).length;
// Insert the new rows
$('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
$('tr.answers-list:eq(2)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>');
// Fix up the row classes
var rowClass = 1;
$('table.subquestions-list tbody tr', thisQuestion).each(function(i) {
if($(this).hasClass('sub-header-row')) {
rowClass = 1
}
else {
rowClass++;
$(this).removeClass('array1 array2')
if(rowClass % 2 == 0) {
$(this).addClass('array2');
}
else {
$(this).addClass('array1');
}
}
});
});
</script>Then, maybe something like this at the end of template.css:
.sub-header-row th {
background-color: #547599;
color: #FFFFFF;
text-align: center;
}
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.
4 months 3 weeks ago #155227
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
tpartner replied the topic: How to combine two functions in one question?
It's a caching issue in your browser, completely clear your cache before testing.
Here's what I see:
Here's what I see:
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.
)