I cannot get the Twig/EM variable to update dynamically either.
Here is a JavaScript solution that could be placed in
question_text_content.twig.
Note that this is only for mandatory list-radio, list-dropdown, multiple-choice, short-text and long-text questions. It would have to be extended to work in arrays, multiple-short-text, multiple-numeric, ranking, etc.
Code:
<script type="text/javascript" charset="utf-8">
function checkAnswered(thisQuestion) {
$('.answered-tip', thisQuestion).hide();
var answered = false;
if($('input:radio:visible:checked, input:checkbox:visible:checked', thisQuestion).length > 0) {
answered = true;
}
if($('select:visible, input:text:visible, textarea:visible', thisQuestion).filter(function() { return $.trim($(this).val()) != ''; }).length > 0) {
answered = true;
}
if(answered == true) {
$('.answered-tip.answered', thisQuestion).show();
}
else {
$('.answered-tip.unanswered', thisQuestion).show();
}
}
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{{ aQuestion.qid }}');
// Initial state
checkAnswered(thisQuestion);
// Listener on the inputs
$('input:visible, select:visible, textarea:visible', thisQuestion).on('click change keyup', function(e) {
checkAnswered(thisQuestion);
});
});
</script>
{# If the question is mandatory, the asterisk will be shown #}
{% if aQuestion.mandatory != '' %}
<span class="answered-tip answered">Mandatory question answered</span>
<span class="answered-tip unanswered">Question not answered</span>
<!-- Add a visual information + just Mandatory string for aria : can be improved -->
<div class="{{ aSurveyInfo.class.questionasterix }} pull-left" {{ aSurveyInfo.attr.questionasterix }} >
<small class="{{ aSurveyInfo.class.questionasterixsmall }} text-danger fa fa-asterisk small" {{ aSurveyInfo.attr.questionasterixsmall }}></small>
<span class="{{ aSurveyInfo.class.questionasterixspan }} sr-only text-danger" {{ aSurveyInfo.attr.questionasterixspan }} >
{{ gT("(This question is mandatory)") }}
</span>
</div>
{% endif %}
