title: simple quiz with jquery and keep tracking the correct answers
body: <p>this is my second attempt in creating a question.</p>
  
  <p>I want to create a quiz with jquery. Each question has two answers, one correct and one wrong. when a question is an aswered then i do not want to be able to be answered again. that is why i make the answers dissappear. they could just as well be unclickable.</p>
  
  <p>Nevertheless, what i really need is to be able to track the score of the correct answers.</p>
  
  <p>And I want the block "Total Results" to appear when all questions are answered.</p>
  
  <p>Anyone has any suggestions? </p>
  
  <p>data-type="1" means the answer is correct</p>
  
  <p>data-type="0" means the answer is wrong</p>
  
  <p>Any improvement of the code is welcome or suggestion for improvements.</p>
  
  <p>I have created the following code</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
   &lt;style type="text/css"&gt;
      .hide{
          display:none;       
      }
   &lt;/style&gt;    
  
  &lt;div id="Question1"&gt;Question 1
      &lt;div id="answers_q1"&gt;
          &lt;div id="answer1_q1" class="ans" data-type="1"&gt;answer 1&lt;/div&gt;
          &lt;div id="answer2_q1" class="ans" data-type="0"&gt;answer 2&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;br /&gt;
  &lt;div id="Question2"&gt;Question 2
      &lt;div id="answers_q2"&gt;
          &lt;div id="answer1_q2" class="ans" data-type="1"&gt;answer 1&lt;/div&gt;
          &lt;div id="answer2_q2" class="ans" data-type="0"&gt;answer 2&lt;/div&gt;   
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;br /&gt;
  &lt;div id="Question3"&gt;Question 3
      &lt;div id="answers_q3"&gt;
          &lt;div id="answer1_q3" class="ans" data-type="1"&gt;answer 1&lt;/div&gt;
          &lt;div id="answer2_q3" class="ans" data-type="0"&gt;answer 2&lt;/div&gt;   
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;br /&gt;
  &lt;div id="total"&gt;Total Results
      &lt;div id="answers_total"&gt;
          You have &lt;span id="count"&gt;&lt;/span&gt; correct answers out of total 3 Questions!!!
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script language="javascript" type="text/javascript"&gt;
  
      $(function() {
  
          $(".ans").click(function(e){
  
             var res = $(this).attr('data-type');                
             var clickCounter = $('#count').data('clickCounter');
             clickCounter = (clickCounter + res);
             $('#count').data('clickCounter', clickCounter);
             $('#count').html( clickCounter );
  
          });
  
          $("#answer1_q1").click(function() {
              $("#answers_q1").html('Correct');
          });
          $("#answer2_q1").click(function() {
              $("#answers_q1").html('Wrong');
          });
  
          $("#answer1_q2").click(function() {
              $("#answers_q2").html('Correct');
          });
          $("#answer2_q2").click(function() {
              $("#answers_q2").html('Wrong');
          });
  
          $("#answer1_q3").click(function() {
              $("#answers_q3").html('Correct');
          });
          $("#answer2_q3").click(function() {
              $("#answers_q3").html('Wrong');
          });
          /**/
  
      });         
  &lt;/script&gt;   
  </code></pre>