- Posts: 62
- Thank you received: 3
Ask the community, share ideas, and connect with other LimeSurvey users!
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Assign column-specific classes $('table.subquestion-list tr', thisQuestion).each(function(i) { var scale = 1; $('> *:gt(0)', this).each(function(i){ $(this).addClass('column-'+(i+1)+' scale-'+scale+''); $(this).attr('data-column', i+1); $(this).attr('data-scale', scale); if(i == 1) { scale++ } }); }); // Listener on the radios $('input.radio', thisQuestion).on('click', function(e){ $('input.radio', thisQuestion).prop('disabled', false); $('input.radio:checked', thisQuestion).each(function(e) { var thisCell = $(this).closest('td.answer-item'); var thisScale = $(thisCell).attr('data-scale'); $('td[data-scale="'+thisScale+'"]', thisQuestion).not(thisCell).find('input.radio').prop('disabled', true); }); }); // Insert scale headers and separator $('colgroup', thisQuestion).remove(); $('.scale-1.column-1', thisQuestion).before('<td class="inserted-scale-separator"></td>'); $('.scale-1.column-2', thisQuestion).after('<td class="inserted-scale-separator"></td>'); $('table.subquestion-list thead', thisQuestion).prepend('<tr class="scale-headers">\ <td></td>\ <td class="inserted-scale-separator"></td>\ <th class="text-center scale-1" data-scale="1" colspan="2">Scale 1</th>\ <td class="inserted-scale-separator"></td>\ <th class="text-center scale-2" data-scale="2" colspan="2">Scale 2</th>\ </tr>'); // Some styles (could be done in template.css) $('.inserted-scale-separator', thisQuestion).css({ 'width': '5px', 'background-color': '#FFFFFF' }); $('thead .scale-1', thisQuestion).css({ 'background-color': '#8da6c1', 'font-weight': 'bold' }); $('thead .scale-2', thisQuestion).css({ 'background-color': '#a7bacf', 'font-weight': 'bold' }); $('tbody .scale-1', thisQuestion).css({ 'background-color': '#c0cedd', 'font-weight': 'bold' }); $('tbody .scale-2', thisQuestion).css({ 'background-color': '#dae2eb', 'font-weight': 'bold' }); // Insert a "Reset" button $('table.subquestion-list', thisQuestion).after('<input type="button" style="float:right;" value="Reset Question" class="resetQuestionButton" />'); $('.resetQuestionButton', thisQuestion).click(function(e){ $('input.radio', thisQuestion).prop('checked', false); $('input.radio', thisQuestion).prop('disabled', false); }); }); </script>
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { customArrayScale('{QID}'); }); </script>
Yes, place this in template.js and then call it as above.From a "coding" prospective, there is a way to insert this javascript "structure" as a function, and "recall" this function on each question needed with a sample code like:
function customArrayScale(qID) { // Identify this question var thisQuestion = $('#question'+qID); // Assign column-specific classes $('table.subquestion-list tr', thisQuestion).each(function(i) { var scale = 1; $('> *:gt(0)', this).each(function(i){ $(this).addClass('column-'+(i+1)+' scale-'+scale+''); $(this).attr('data-column', i+1); $(this).attr('data-scale', scale); if(i == 1) { scale++ } }); }); // Listener on the radios $('input.radio', thisQuestion).on('click', function(e){ $('input.radio', thisQuestion).prop('disabled', false); $('input.radio:checked', thisQuestion).each(function(e) { var thisCell = $(this).closest('td.answer-item'); var thisScale = $(thisCell).attr('data-scale'); $('td[data-scale="'+thisScale+'"]', thisQuestion).not(thisCell).find('input.radio').prop('disabled', true); }); }); // Insert scale headers and separator $('colgroup', thisQuestion).remove(); $('.scale-1.column-1', thisQuestion).before('<td class="inserted-scale-separator"></td>'); $('.scale-1.column-2', thisQuestion).after('<td class="inserted-scale-separator"></td>'); $('table.subquestion-list thead', thisQuestion).prepend('<tr class="scale-headers">\ <td></td>\ <td class="inserted-scale-separator"></td>\ <th class="text-center scale-1" data-scale="1" colspan="2">Scale 1</th>\ <td class="inserted-scale-separator"></td>\ <th class="text-center scale-2" data-scale="2" colspan="2">Scale 2</th>\ </tr>'); // Some styles (could be done in template.css) $('.inserted-scale-separator', thisQuestion).css({ 'width': '5px', 'background-color': '#FFFFFF' }); $('thead .scale-1', thisQuestion).css({ 'background-color': '#8da6c1', 'font-weight': 'bold' }); $('thead .scale-2', thisQuestion).css({ 'background-color': '#a7bacf', 'font-weight': 'bold' }); $('tbody .scale-1', thisQuestion).css({ 'background-color': '#c0cedd', 'font-weight': 'bold' }); $('tbody .scale-2', thisQuestion).css({ 'background-color': '#dae2eb', 'font-weight': 'bold' }); // Insert a "Reset" button $('table.subquestion-list', thisQuestion).after('<input type="button" style="float:right;" value="Reset Question" class="resetQuestionButton" />'); $('.resetQuestionButton', thisQuestion).click(function(e){ $('input.radio', thisQuestion).prop('checked', false); $('input.radio', thisQuestion).prop('disabled', false); }); }