title: get value from radio button once checked to tally up final score
body: <p>i am making a multiple choice quiz with radio buttons and i want to get value form radio button once its checked and give final score at end. for example "1 out of 5 correct".</p>
  
  <blockquote>
    <blockquote>
      <p>Blockquote</p>
    </blockquote>
    
    <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&gt; 
  &gt;     $(document).ready(function() {
  &gt;       var counter = 0;
  &gt;       var score = 0;
  &gt; 
  &gt; 
  &gt;       var quizQuestions = [{
  &gt;         question: "In what year was America founded ?",
  &gt;         choices: ["1775", "1776", "1801", "1492"],
  &gt;         answer: 1
  &gt;       }, {
  &gt;         question: "Who did not sign the Declaration of Independence ?",
  &gt;         choices: ["George Wasington", "Ben Franklin", "John Hancock", "Thomas Jefferson"],
  &gt;         answer: 0
  &gt;       }, {
  &gt;         question: "Who was the only president to serve more than two terms?",
  &gt;         choices: ["George Washington", "Woodrow Wilson", "Franklin Delano Roosevelt", "James Madison"],
  &gt;         answer: 2
  &gt;       }, {
  &gt;         question: "In what year did America land on the moon ?",
  &gt;         choices: ["1969", "1965", "1970", "1968"],
  &gt;         answer: 0
  &gt;       }, {
  &gt;         question: "Which country did America buy the Louisiana Purchase from ?",
  &gt;         choices: ["England", "Spain", "Germany", "France"],
  &gt;         answer: 3
  &gt;       }]
  &gt; 
  &gt;       $("#start").click(function() {
  &gt;         $("#start").hide()
  &gt;         $("#next").show()
  &gt;       })
  &gt; 
  &gt;       $("#next").on("click", function() {
  &gt; 
  &gt;         $(".choices, .questions").empty();
  &gt; 
  &gt;         function incrementCounter() {
  &gt;           $("#count").text(counter);
  &gt;         };
  &gt; 
  &gt;         $(".questions").append("&lt;h2&gt;" + quizQuestions[counter].question + "&lt;/h2&gt;")
  &gt; 
  &gt;         for (var i = 0; i &lt; quizQuestions[counter].choices.length; i += 1) {
  &gt;           $(".choices").append("&lt;ul&gt;" + "&lt;input type='radio'/&gt;" + quizQuestions[counter].choices[i] + "&lt;/ul&gt;")
  &gt;         }
  &gt; 
  &gt;         incrementCounter();
  &gt;         counter++
  &gt; 
  &gt;       })
  &gt; 
  &gt; 
  &gt;     });
  &gt; 
  &gt; </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&gt; 
  &gt;     body {
  &gt;       background-image: url("../img/american-flag.jpg");
  &gt;       background-repeat: no-repeat;
  &gt;       background-size: 100% 100%;
  &gt;     }
  &gt;     html,
  &gt;     body {
  &gt;       min-height: 100%;
  &gt;     }
  &gt;     .quiz-app {
  &gt;       position: relative;
  &gt;       width: 400px;
  &gt;       height: 400px;
  &gt;       background-color: white;
  &gt;       border-style: solid;
  &gt;       margin: 0 auto;
  &gt;       top: 200px;
  &gt;       text-align: center;
  &gt;     }
  &gt;     h1 {
  &gt;       color: orange;
  &gt;     }
  &gt;     #start {
  &gt;       margin-top: 70px;
  &gt;       width: 70px;
  &gt;       border-radius: 5px;
  &gt;       bottom: 150px;
  &gt;     }
  &gt;     #next {
  &gt;       display: none;
  &gt;       margin-top: 70px;
  &gt;       width: 70px;
  &gt;       border-radius: 5px;
  &gt;       bottom: 150px;
  &gt;     }
  &gt;     .questions {
  &gt;       text-align: center;
  &gt;       margin-left: 25px;
  &gt;       margin: 0 auto;
  &gt;       bottom: 120px;
  &gt;       color: red;
  &gt;     }
  &gt;     .choices {
  &gt;       display: block;
  &gt;       bottom: 100px;
  &gt;     }
  &gt;     #count {
  &gt;       width: 50px;
  &gt;       height: 20px;
  &gt;       text-align: bottom;
  &gt;     }
  &gt; 
  &gt; </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&gt; 
  &gt;     &lt;!DOCTYPE html&gt;
  &gt;     &lt;html&gt;
  &gt; 
  &gt;     &lt;head&gt;
  &gt;       &lt;meta charset="UTF-8"&gt;
  &gt;       &lt;title&gt;Quiz Time&lt;/title&gt;
  &gt;       &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"
  &gt; charset="utf-8"&gt;&lt;/script&gt;
  &gt;       &lt;script src="js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &gt;       &lt;script src="js/jquery-1.11.3.js"&gt;&lt;/script&gt;
  &gt;       &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &gt;       &lt;link rel="stylesheet" href="css/app.css"&gt;
  &gt;     &lt;/head&gt;
  &gt; 
  &gt;     &lt;body&gt;
  &gt;       &lt;!--______________________________________________________BEGIN APP--&gt;
  &gt;       &lt;div class="quiz-app"&gt;
  &gt;         &lt;h1 class="title"&gt;History Quiz&lt;/h1&gt;
  &gt; 
  &gt;         &lt;div class="questions"&gt;&lt;/div&gt;
  &gt; 
  &gt;         &lt;div class="choices"&gt;
  &gt;         &lt;/div&gt;
  &gt; 
  &gt;         &lt;button id="start"&gt;Start&lt;/button&gt;
  &gt;         &lt;button id="next"&gt;Next&lt;/button&gt;
  &gt;         &lt;span id="count"&gt;&lt;/span&gt;
  &gt;       &lt;/div&gt;
  &gt; 
  &gt;     &lt;/body&gt;
  &gt;     &lt;!--______________________________________________________END APP--&gt;
  &gt; 
  &gt;     &lt;/html&gt;
  &gt; 
  &gt; </code></pre>
  </div>
  </div>
  </p>
  </blockquote>