title: Removing a .click but still attaching a function to an input - Quiz fade out on input
body: <p>The code is working!!</p>
  
  <p>I now have a quiz that does the following:  A user picks one the radio buttons.  On submit the selected answer fades in. Thanks to everyone who contributed to the answer.</p>
  
  <p>** The submit button does not submit to a database or other scripting language</p>
  
  <pre><code>// **************  Quiz 2 (right side) ********************//
  var selectAnswer = function(){  
  var answer = $("input[name='radio2']:checked").val();
      console.log(answer);
           if(answer=='correct2') {
              $("#quiz2").fadeOut(function(){
                   $("#correct2").fadeIn();             
                });
            $("#wrong1a").hide();
            }
      if(answer=='wrong1a') {
           $("#quiz2").fadeOut(function(){
               $("#wrong1a").fadeIn(); }
           )};
  
      if(answer=='wrong2a') {
           $("#quiz2").fadeOut(function(){
               $("#wrong2a").fadeIn(); }
               )};
  
      if(answer=='wrong4a') {
           $("#quiz2").fadeOut(function(){
               $("#wrong4a").fadeIn(); 
           }); 
  
          $("#correct2").hide();
  
          }
          //end of of selectAnswer\
  
  // end of of selectAnswer
  };
  $(document).ready(function(){  // when the submit button is pressed, run selectAnswer function
      $("#submitButton2").click(selectAnswer);
  
   $("#correct2").hide();
  $("#wrong1a").hide();
  
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="inputs_bg4"&gt;&lt;input name="radio2" type="radio" value="wrong1a"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;div class="inputs_bg4"&gt;&lt;input name="radio2" type="radio" value="wrong2a"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;div class="inputs_bg3"&gt;&lt;input name="radio2" type="radio" value="correct2"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;div class="inputs_bg4"&gt;&lt;input name="radio2" type="radio" value="wrong4a"&gt;&lt;/div&gt;&lt;/td&gt;
  </code></pre>