var questions = [{ question: "5x5", choices: ["24", "25", "26", "30"], correctAnswer: 1 }, { question: "6x7", choices: ["32", "45", "42", "50"], correctAnswer: 2 }, { question: "8x9", choices: ["70", "72", "71", "75"], correctAnswer: 1 }, { question: "6x9", choices: ["54", "56", "60", "58"], correctAnswer: 0 }, { question: "4x9", choices: ["36", "40", "35", "33"], correctAnswer: 0 }]; var currentQuestion = 0; var correctAnswers = 0; var quizOver = false; $(document).ready(function () { // Display the first question displayCurrentQuestion(); $(this).find(".quizMessage").hide(); // On clicking next, display the next question $(this).find(".nextButton").on("click", function () { if (!quizOver) { value = $("input[type='radio']:checked").val(); if (value == undefined) { $(document).find(".quizMessage").text("Please select an answer"); $(document).find(".quizMessage").show(); } else { // TODO: Remove any message $(document).find(".quizMessage").hide(); if (value == questions[currentQuestion].correctAnswer) { correctAnswers++; } currentQuestion++; // Since we have already displayed the first question on DOM ready if (currentQuestion < questions.length) { displayCurrentQuestion(); } else { displayScore(); // $(document).find(".nextButton").toggle(); // $(document).find(".playAgainButton").toggle(); // Change the text in the next button to ask if user wants to play again $(document).find(".nextButton").text("Play Again?"); quizOver = true; } } } else { // quiz is over and clicked the next button (which now displays 'Play Again?' quizOver = false; $(document).find(".nextButton").text("Next Question"); resetQuiz(); displayCurrentQuestion(); hideScore(); } }); }); // This displays the current question AND the choices function displayCurrentQuestion() { console.log("In display current Question"); var question = questions[currentQuestion].question; var questionClass = $(document).find(".quizContainer > .question"); var choiceList = $(document).find(".quizContainer > .choiceList"); var numChoices = questions[currentQuestion].choices.length; // Set the questionClass text to the current question $(questionClass).text(question); // Remove all current <li> elements (if any) $(choiceList).find("li").remove(); var choice; for (i = 0; i < numChoices; i++) { choice = questions[currentQuestion].choices[i]; $('<li><input type="radio" value=' + i + ' name="dynradio" />' + choice + '</li>').appendTo(choiceList); } } function resetQuiz() { currentQuestion = 0; correctAnswers = 0; hideScore(); } function displayScore() { $(document).find(".quizContainer > .result").text("You scored: " + correctAnswers + " out of: " + questions.length); $(document).find(".quizContainer > .result").show(); } function hideScore() { $(document).find(".result").hide(); }
<body> <div class="quizContainer"> <h1>Multiplication Quiz</h1> <div class="question"> </div> <ul class="choiceList"></ul> <div class="quizMessage"></div> <div class="result"></div> <div class="nextButton">Next Question</div> <br> </div> </body>