- Posts: 11
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Version: 3.17.3 How to Bold current question or add a check mark when answered
- epauldc29
- Offline
- New Member
Less
More
4 years 11 months ago #184434
by epauldc29
Replied by epauldc29 on topic Version: 3.17.3 How to Bold current question or add a check mark when answered
Attached is the LSS file
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
4 years 11 months ago - 4 years 11 months ago #184458
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Version: 3.17.3 How to Bold current question or add a check mark when answered
Place this in your custom.js file to assign a class "answered" to those types of questions when answered:
Then, you can use a rule something like this in custom.css:
Code:
$(document).on('ready pjax:scriptcomplete',function(){ // Initial "answered" states $('div[id^="question"]').addClass('unanswered'); $('div[id^="question"] tr[id^="javatbd"]').addClass('unanswered'); $('input:radio:checked, input:checkbox:checked, select[id^="answer"][value!=""], input:text[value!=""], textarea[value!=""]').each(function(i) { handleAnswers(this); }); // Listeners on the answers $('input:radio, input:checkbox, select[id^="answer"]').on('change', function(){ handleAnswers(this); }); $('input:radio').on('click', function(){ handleAnswers(this); }); $('input:text, textarea').on('keyup change', function(){ handleAnswers(this); }); $('.array-flexible-row tr[id^="javatbd"] td').click(function(){ handleAnswers($('input:radio', this)); }); }); // A function to test for answered questions function handleAnswers(input) { var parentQuestion = $(input).closest('div[id^="question"]'); var parentRow = $(input).closest('tr[id^="javatbd"]'); // Radio lists (anything checked) if($(parentQuestion).hasClass('list-radio') || $(parentQuestion).hasClass('yes-no') || $(parentQuestion).hasClass('gender') || $(parentQuestion).hasClass('choice-5-pt-radio') || $(parentQuestion).hasClass('list-with-comment')) { markAnswered(parentQuestion); } // Dropdown lists (anything selected) else if($(parentQuestion).hasClass('list-dropdown')) { if($(input).val() != '') { markAnswered(parentQuestion); } else { markUnanswered(parentQuestion); } } // Short-text, long-text, huge-text and numeric (any value in the input) else if($(parentQuestion).hasClass('text-short') || $(parentQuestion).hasClass('text-long') || $(parentQuestion).hasClass('text-huge') || $(parentQuestion).hasClass('numeric')) { if($(input).val() != '') { markAnswered(parentQuestion); } else { markUnanswered(parentQuestion); } } // Multi-short-text (all inputs must have a value) else if($(parentQuestion).hasClass('multiple-short-txt')) { if($('input:text[value!=""]', parentQuestion).length == $('input:text', parentQuestion).length) { markAnswered(parentQuestion); } else { markUnanswered(parentQuestion); } } // Array (all rows must have a checked radio) else if($(parentQuestion).hasClass('array-flexible-row')) { if($('input:radio:checked', parentQuestion).length == $('tr[id^="javatbd"]', parentQuestion).length) { markAnswered(parentQuestion); } else { markUnanswered(parentQuestion); } markAnswered(parentRow); } // Array-numbers (all dropdowns must have a value) else if($('.multiflexiselect', parentQuestion).length != 0) { if($('.multiflexiselect[value!=""]', parentQuestion).length == $('.multiflexiselect', parentQuestion).length) { markAnswered(parentQuestion); } else { markUnanswered(parentQuestion); } if($('.multiflexiselect[value!=""]', parentRow).length == $('.multiflexiselect', parentRow).length) { markAnswered(parentRow); } else { markUnanswered(parentRow); } } // Multiple options (at least one option checked) else if($(parentQuestion).hasClass('multiple-opt')) { if($('input:checkbox:checked', parentQuestion).length != 0) { markAnswered(parentQuestion); } else { markUnanswered(parentQuestion); } } } // Assign classes to "answered" questions function markAnswered(el) { $(el).removeClass('unanswered').addClass('answered'); } function markUnanswered(el) { $(el).removeClass('answered').addClass('unanswered'); }
Then, you can use a rule something like this in custom.css:
Code:
.question-container.answered { background: green; }
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 11 months ago by tpartner.
The topic has been locked.