JSFiddle - React, Tailwind, and code Playground

by ds345

HTML

<div id="QuestionTBDiv1" >
                                        <label>Question</label><br/>
    <input type="text" name="quiztxtBox[]" size="57" id="quiztxtBox[]" placeholder="Question #1"/><br/>
                                        <label>Answer</label><br/>
                                            <input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice A"/>&nbsp;<input type="radio" class = "choiceA" name="correct_answer1" value="A"/>&nbsp;
                                            <input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice B"/>&nbsp;<input type="radio" class = "choiceB" name="correct_answer1" value="B"/><br/>
                                            <input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice C"/>&nbsp;<input type="radio" class = "choiceC" name="correct_answer1" value="C"/>&nbsp;
    <input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice D"/>&nbsp;<input type="radio" class = "choiceD" name="correct_answer1" value="D"/><br/>
                                        <span name="errMchoice" class="errorMsg"></span>
                                            <button value="submit" id="mchoice">submit</button>  
                                        </div>

JavaScript

$("#mchoice").click(function () {
        var direction =  $('#direction').val();

        var quiztxtBox =  document.getElementsByName('quiztxtBox[]');

        var isSubmit;
        var names = [];
        var err = document.getElementsByName('errMchoice[]');
        var mflag = false;

                    // For radio button answers.        
       $('input[type="radio"]').each(function(){
          names[$(this).attr('name')] = true; 
          });      

          if (!direction) 
          {
            $('#direction').focus();
            $('#direction').css({"background-color":"#f6d9d4"});
            $('#direction').nextAll('span').html('Type in direction.');
            event.preventDefault();
          }
          else
          {
            $('#direction').css({"background-color":"#fff"});
            $('#direction').nextAll('span').html("");
          }


        for(correct_answer in names)
        {
            var radio_buttons = $("input[name='" + correct_answer + "']");
            if( radio_buttons.filter(':checked').length == 0)
            {
                radio_buttons.nextAll('span').html('Select the answer.');
                mflag = true;
                event.preventDefault();
            }
           else
            {
                radio_buttons.nextAll('span').html('');
            }
        }

        // Choices fields

        $("[name='quiztxtBox[]']").each(function(){


         if (!this.value.length) 
          {
            $(this).css({"background-color":"#f6d9d4"}).siblings('span.errorMsg').text('Please type in question/answer!');

            event.preventDefault();
          }
          else if(!mflag)
          {
            $(this).css({"background-color":"#fff"}).siblings('span.errorMsg').text("");

          }


        });   
});