title: Using jQuery to Create True and False Questionnaire
body: <p>I'm trying to figure out the best way to build a questionnaire. See below.</p>
  
  <p><a href="http://cl.ly/image/1W2M3J2z2q2E" rel="nofollow">http://cl.ly/image/1W2M3J2z2q2E</a></p>
  
  <p><a href="http://cl.ly/image/2m461g200b0X" rel="nofollow">http://cl.ly/image/2m461g200b0X</a></p>
  
  <p>This is what I've got in my code, and it works just fine but as you can see, it gets incredibly long after just two questions. What is the best way to condense this code, so that I do not repeat myself so many times.</p>
  
  <pre><code>// find all anchor tag and prevent default behavior
  $('.questions').find('a').on('click', function(e){
      e.preventDefault();
  });
  
  var ques1 = $('#question1'),
      q1 = $('.question1'),
      q1True = $('.question1-true').hide(),
      q1False = $('.question1-false').hide();
  
  var ques2 = $('#question2'),
      q2 = $('.question2').hide(),
      q2True = $('.question2-true').hide(),
      q2False = $('.question2-false').hide();
  
  (function () {
      // click button false
      $('#question1 .btn-false').on('click', function(){
          q1.hide();
          q1True.fadeIn();
      });
      // click button true
      $('#question1 .btn-true').on('click', function(){
          q1.hide();
          q1False.fadeIn();
      });
      // click previous button
      $('#question1 .prev').on('click', function(){
          q1True.hide();
          q1False.hide();
          q1.show();
      });
      // click next button
      $('#question1 .next').on('click', function(){       
          ques1.hide();
          q2.show();
      }); //end question1
  
      // begin question 2
      $('#question2 .btn-false').on('click', function(){
          ques2.show();
          q2.hide();
          q2True.show();
      });
  
      $('#question2 .btn-true').on('click', function(){
          ques2.show();
          q2.hide();
          q2False.show();
      });
  })();
  </code></pre>