Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Change background color when question validation is unmet

KompetenzZ
Topic Author
Offline
Premium Member

More

5 years 3 months ago #179224 by KompetenzZ

Change background color when question validation is unmet was created by KompetenzZ

Hi,

is there a reason why this little script does not work? I try to change the background color of a class when the question validation tip changes from success (.ls-question-message.ls-em-tip.em_q_fn_validation.ls-em-success) to error (.ls-question-message.ls-em-tip.em_q_fn_validation.ls-em-error.text-danger). I also tried it with the id of the question validation tip, but I don't find the error. Here is the javascript:

Code:

<script type="text/javascript" charset="utf-8"> 
  $(document).ready(function(){
 
if($('#question{QID} .ls-question-message.ls-em-tip.em_q_fn_validation') .hasClass('ls-em-error')) {
          $('.ls-answers.checkbox-list.answers-list.row').css( "background-color", "red" );
        }
  });

I also tried it if the error tip is visible, no success:

Code:

 
<script type="text/javascript" charset="utf-8"> 
  $(document).ready(function(){
 
if($('#question{QID} div.ls-question-message.ls-em-tip.em_q_fn_validation.ls-em-error.text-danger').is(":visible")) {
          $('.ls-answers.checkbox-list.answers-list.row').css( "background-color", "red" );
        }
  });
 
 
</script>

The background is also red, if the question validation tip shows no error message.

Cheers kompetenzz

Attachments:

Unbenannt.jpg

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

5 years 3 months ago #179245 by tpartner

Replied by tpartner on topic Change background color when question validation is unmet

You would need to add a listener on the check-boxes to detect the class change.

Having said that, I don't see the need for a script. As far as I know, the question is already assigned a class "input-error" when the validation requirements are not met.

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

The topic has been locked.

KompetenzZ
Topic Author
Offline
Premium Member

More

5 years 2 months ago - 5 years 2 months ago #179444 by KompetenzZ

Replied by KompetenzZ on topic Change background color when question validation is unmet

Hi,

sorry for the late answer, the example I brought was a too simplistic. I thought there might be a way that I can use a script for all questions/question types to fire JavaScript when the question validation tip is not met. Because this would make it easier to apply nearly the same code to style different questions, when question validation is not met.
But since this doesn’t seem to be realistic, thanks for the tip with the listener. I tried that out and it works:

My original problem was – I did not say it – that some respondents showed me that they did not check a secondary answer option when the secondary answer options pop up. They just do not see the secondary answer options popping up. Since the secondary answer options need approx. 0.6 sec to pop up, some respondents were already mentally at the next question (I think this delay is because of JavaScript combined with question validation). Because of this behavior of the respondents I styled the secondary answer options when none of these are checked. As far as I could investigate, adding a red border to the checkboxes of the unanswered secondary answer options is complicated, because the checkbox cannot be styled easily, so I just styled the text. Anyway, this is the code I used to highlight unanswered secondary answer options:

Code:

<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function() {
 
    $('body').on('change', '.secondary-item input:checkbox', function(i) {
      if($(this).is(':checked')) {
 
        $('.secondary-item').find('label.checkbox-label.control-label').css({
                          'border-bottom': 'initial',
                          'background-color' : 'initial'
                          });
      }
      else {
      $('.secondary-item').find('label.checkbox-label.control-label').css({
                          'border-bottom': '1px solid red',
                          'background-color' : '#ffeeee'
                          });
      }
    });
  });
</script>