i creating quiz app 6 basic questions & 4 answers choose from. when run app, second question skipped 'what ranked number 1 favorite food in america?'(with choices). also, h3 id="final" not display @ end of game. believe storing userinput improperly.
main.js:
$(document).ready(function() { var numbercorrect = 0; var currentquestion = 0; var questions = [ { question: 'the average american lives in _ square foot house.', choices: [2500, 1500, 1800, 2200], rightanswer: 2 }, { question: 'what ranked number 1 favorite food in america?', choices: ["cheese", "steak", "chicken", "popcorn"], rightanswer: 1 }, { question: 'how many credit cards average american have?', choices: [2, 1, 3, 5], rightanswer: 0 }, { question: 'the average american worker stays @ each of jobs how long?', choices: ["4.4 years", "2 years", "5.6 years", "3.8 years"], rightanswer: 0 }, { question: 'what average american household carry in debt?', choices: ["$45,000", "$20,000", "$60,000", "$75,000"], rightanswer: 3 }, { question: 'the recommended sugar intake per day 22 grams. how average american intake?', choices: [30, 43, 77, 85], rightanswer: 2 } ]; function nextquestion() { $('.questioncontent h1').remove(); $('.choicebutton').remove(); if (currentquestion <= 6) { var htmlquestion = questions[currentquestion].question; var htmlchoices = questions[currentquestion].choices; (var = 0, len = htmlchoices.length; < len; i++) { $(".question").html(htmlquestion) var answerchoice = '<button class="choicebutton" type="submit" value="' + + '">' + htmlchoices[i] + '</button>'; $(".questioncontainer").append(answerchoice); } } else { $(".container h2").remove(); $(".questioncontainer").remove(); $(".submitbutton").remove(); $(".question").remove(); if (numbercorrect >= 1) { $(".questioncontainer").html('<h3 id="final">congratulations!</h3> <p>you correctly answered ' + numbercorrect + ' questions out of 6</p>'); } else { $(".questioncontainer").html('<h3 id="final">sorry.. answered no questions correctly</h3>'); } } } function answerquestion() { $(".questioncontainer").on('click', 'button', function(event) { var answer = questions[currentquestion].rightanswer; var userinput = $(this).val(); if (answer === userinput) { console.log($(this).val()) numbercorrect++; }; }); } $(".playbutton").one("click", function() { $(".playbutton").hide(); $(".submitbutton").show().css('display', 'block'); $(".container h2").css('display', 'inline-block'); nextquestion(); }); $(".submitbutton").on("click", function() { currentquestion++; nextquestion(); answerquestion(); if (currentquestion <= 6) { $(".questionnumber").text(currentquestion); } }); }); html:
<html> <head> <meta charset="utf-8" /> <title>the average american game</title> <link href='http://fonts.googleapis.com/css?family=questrial|maven+pro:400,500,700|pt+sans+caption:400,700|open+sans:400,600,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="main-container"> <header> <h1>the average american</h1> </header> <div class="container"> <div class="stars"> <li><img class="star1" src="https://cloud.githubusercontent.com/assets/12075685/8212453/d71b22c4-14e9-11e5-9207-69a5ad35f976.png" alt="star"/></li> <li><img class="star2" src="https://cloud.githubusercontent.com/assets/12075685/8212453/d71b22c4-14e9-11e5-9207-69a5ad35f976.png" alt="star"/></li> <li><img class="star3" src="https://cloud.githubusercontent.com/assets/12075685/8212453/d71b22c4-14e9-11e5-9207-69a5ad35f976.png" alt="star"/></li> <li><img class="star4" src="https://cloud.githubusercontent.com/assets/12075685/8212453/d71b22c4-14e9-11e5-9207-69a5ad35f976.png" alt="star"/></li> <li><img class="star5" src="https://cloud.githubusercontent.com/assets/12075685/8212453/d71b22c4-14e9-11e5-9207-69a5ad35f976.png" alt="star"/></li> <li><img class="star6" src="https://cloud.githubusercontent.com/assets/12075685/8212453/d71b22c4-14e9-11e5-9207-69a5ad35f976.png" alt="star"/></li> </div> <h2>question <span class="questionnumber">1</span></h2> <div class="questioncontent"> <h1>are ready play?</h1> <h3 class="question"></h3> <div class="questioncontainer"></div> <button class="playbutton">let's play!</button> <button class="submitbutton">submit</button> </div> </div> <footer> </footer> </div> </body> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="main.js"></script> </html>
i have done similar long time ago using basic javascript module pattern. know, different you've done in terms of code, better, cleaner , readable.
note i’ve declared global module named quiz, 1 public property: method named quiz.init. in addition, maintains private internal state using closure of anonymous function. also, can import needed globals, using pattern. take @ demo , see if can adapt suit needs.
var questions = [ { question: 'the average american lives in _ square foot house.', choices: [2500, 1500, 1800, 2200], rightanswer: 2 }, { question: 'what ranked number 1 favorite food in america?', choices: ["cheese", "steak", "chicken", "popcorn"], rightanswer: 1 }, { question: 'how many credit cards average american have?', choices: [2, 1, 3, 5], rightanswer: 0 }, { question: 'the average american worker stays @ each of jobs how long?', choices: ["4.4 years", "2 years", "5.6 years", "3.8 years"], rightanswer: 0 }, { question: 'what average american household carry in debt?', choices: ["$45,000", "$20,000", "$60,000", "$75,000"], rightanswer: 3 }, { question: 'the recommended sugar intake per day 22 grams. how average american intake?', choices: [30, 43, 77, 85], rightanswer: 2 } ]; var quiz = (function($) { var $context = $(".container"); var index = 0; var correctanswers = 0; var totalquestions = questions.length; function startquiz (btn) { $(btn).hide(); createquestion(); } function validateanswer (choice) { if (parseint($(choice).val(), 10) === questions[index]["rightanswer"]) { correctanswers++; console.log(correctanswers); } if (index === totalquestions - 1) { complete(); return; } index++; createquestion(); } function createquestion () { var $question = $("<h2/>", { text: questions[index]["question"] }); var $answers = $(); $.each(questions[index]["choices"], function(i, val) { $answers = $answers.add( $("<button/>", { 'class': "choicebutton", 'value': i, 'text': val }) ); }); $context.find(":not(.startquiz)").remove(); $context.append($question); $context.append($answers); } function complete () { var msg = correctanswers ? "you have " + correctanswers + " correct answers!": "you've got no correct asnwers!"; $context .find(":not(.startquiz)").remove().end() .prepend($("<h3/>", { id: "final", text: msg })) .end().find(".startquiz").text("restart quiz").show(); index = 0; correctanswers = 0; } function init () { $context.on("click", ".startquiz", function() { startquiz(this); }); $context.on("click", ".choicebutton", function() { validateanswer(this); }); } return { init: init }; }(jquery)).init();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <button class="startquiz">start quiz</button> </div>
Comments
Post a Comment