javascript - get value from radio button once checked to tally up final score -
i making multiple choice quiz radio buttons , want value form radio button once checked , give final score @ end. example "1 out of 5 correct".
blockquote
> > $(document).ready(function() { > var counter = 0; > var score = 0; > > > var quizquestions = [{ > question: "in year america founded ?", > choices: ["1775", "1776", "1801", "1492"], > answer: 1 > }, { > question: "who did not sign declaration of independence ?", > choices: ["george wasington", "ben franklin", "john hancock", "thomas jefferson"], > answer: 0 > }, { > question: "who president serve more 2 terms?", > choices: ["george washington", "woodrow wilson", "franklin delano roosevelt", "james madison"], > answer: 2 > }, { > question: "in year did america land on moon ?", > choices: ["1969", "1965", "1970", "1968"], > answer: 0 > }, { > question: "which country did america buy louisiana purchase ?", > choices: ["england", "spain", "germany", "france"], > answer: 3 > }] > > $("#start").click(function() { > $("#start").hide() > $("#next").show() > }) > > $("#next").on("click", function() { > > $(".choices, .questions").empty(); > > function incrementcounter() { > $("#count").text(counter); > }; > > $(".questions").append("<h2>" + quizquestions[counter].question + "</h2>") > > (var = 0; < quizquestions[counter].choices.length; += 1) { > $(".choices").append("<ul>" + "<input type='radio'/>" + quizquestions[counter].choices[i] + "</ul>") > } > > incrementcounter(); > counter++ > > }) > > > }); > >> > body { > background-image: url("../img/american-flag.jpg"); > background-repeat: no-repeat; > background-size: 100% 100%; > } > html, > body { > min-height: 100%; > } > .quiz-app { > position: relative; > width: 400px; > height: 400px; > background-color: white; > border-style: solid; > margin: 0 auto; > top: 200px; > text-align: center; > } > h1 { > color: orange; > } > #start { > margin-top: 70px; > width: 70px; > border-radius: 5px; > bottom: 150px; > } > #next { > display: none; > margin-top: 70px; > width: 70px; > border-radius: 5px; > bottom: 150px; > } > .questions { > text-align: center; > margin-left: 25px; > margin: 0 auto; > bottom: 120px; > color: red; > } > .choices { > display: block; > bottom: 100px; > } > #count { > width: 50px; > height: 20px; > text-align: bottom; > } > >> > <!doctype html> > <html> > > <head> > <meta charset="utf-8"> > <title>quiz time</title> > <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js" > charset="utf-8"></script> > <script src="js/jquery-1.11.3.min.js"></script> > <script src="js/jquery-1.11.3.js"></script> > <script src="js/app.js"></script> > <link rel="stylesheet" href="css/app.css"> > </head> > > <body> > <!--______________________________________________________begin app--> > <div class="quiz-app"> > <h1 class="title">history quiz</h1> > > <div class="questions"></div> > > <div class="choices"> > </div> > > <button id="start">start</button> > <button id="next">next</button> > <span id="count"></span> > </div> > > </body> > <!--______________________________________________________end app--> > > </html> > >
is looking for?
$(".choices input:radio").on("click", function () { alert('test'); }); 
Comments
Post a Comment