JSFiddle - React, Tailwind, and code Playground

by David Carter

HTML

<!-- Your First Project — A Dynamic Quiz Week 4 - Learn JS Properly -->
<body>
  <h1></h1>

  <form>
    <input type="radio" name="answer" value="0"> <span id="choice0"></span> </input>
               
    <input type="radio" name="answer" value="1"> <span id="choice1"></span> </input>
                
    <input type="radio" name="answer" value="2"> <span id="choice2"></span> </input>
    
      <br />

    <input type="button" name="next" value="Next Question" id="next" />

    </form>
</body>

CSS

/* Need to do:

— Add client-side data validation: make sure the user answers each question before proceeding to the next question.

— Add a “Back” button to allow the user to go back and change her answer. The user can go back up to the first question. For the questions that the user has answered already, be sure to show the radio button selected, so that the user is not forced to answer the questions again, which she has completed.

— Use jQuery to add animation (fade out the current question and fade in the next question).

— Test the quiz on IE 8 and 9, and fix any bugs. This will give you a good workout ;)

— Store the quiz questions in an external JSON file.

— Add user authentication: allow users log in, and save their login credentials to local storage (HTML5 browser storage).

— Use cookies to remember the user, and show a “Welcome, First Name” message when the user returns to the quiz.
*/

h1 {
    text-align:center;
}

form {
    text-align:center;
}

#next {
  margin-top:30px;
}

JavaScript

// Create an array to store all questions.
var allQuestions = [];
// Store each question in an object.
allQuestions[0] = {
    question: "Call me, maybe?",
    choices: ["Yes", "No", "Maybe"],
    correctAnswer: 2
};
allQuestions[1] = {
    question: "Who you gonna call?",
    choices: ["911", "Ghostbusters", "You"],
    correctAnswer: 1
};
allQuestions[2] = {
    question: "Who won Super Bowl 48 this year?",
    choices: ["Denver Broncos", "Seattle Seahawks", "Denver Broncos"],
    correctAnswer: 1
};

// Display first question
$("h1").text(allQuestions[0].question);
$("#choice0").text(allQuestions[0].choices[0]);
$("#choice1").text(allQuestions[0].choices[1]);
$("#choice2").text(allQuestions[0].choices[2]);

// Create a variable to store the user's score
var userScore = 0;

// Create a variable to store the index of the current question
var questionNum = 0;

// When button is clicked, the user's score is updated, the current question is hidden, and the next question is revealed.
// After the last question, the user's final score is shown instead of looking for the next question
  $("#next").click(function() {
   
  // Update user's score
  if($("form input[name=answer]:checked").val() == allQuestions[questionNum].correctAnswer) {
    userScore++;
  }
  
  // If last question, show user's score rather than next question
    if (questionNum == (allQuestions.length - 1)) {
    $("form").hide();
    $("h1").text("Your score is " + userScore + " out of 3.");
    }
  
  // Current question is not the last question, so increment the current question index
    questionNum++;
  
  // Replace current question with next question
    $("h1").text(allQuestions[questionNum].question);
    $("#choice0").text(allQuestions[questionNum].choices[0]);
    $("#choice1").text(allQuestions[questionNum].choices[1]);
    $("#choice2").text(allQuestions[questionNum].choices[2]);
    });