JS测验，Var测验多项选择选项不起作用

Question

每当我加载第一个测验页面时，我的多项选择答案均不起作用，它们显示为普通框，并且似乎不可单击。弹出时，应将它们更改为红色以获取正确答案，或将绿色更改为正确的答案，然后移至下一页。如果需要截图，我可以提供。

$(document).ready(function() {

  // --------------------------- Intro Page -------------------------------------
  $('.introdiv-button').click(function() {
    transition(".page-menu", "push-left");
  });

  // --------------------------- Menu Page -------------------------------------

  $('.menu1-button').click(function() {
    transition(".page-yourPageID1", "fade");
  });


  $('.menu2-button').click(function() {
    transition(".page-yourPageID2", "fade");
  });

  $('.menu3-button').click(function() {
    transition(".page-yourPageID3", "fade");
  });

  /*
        	$('.answer3-button3').click(function(){
        		$(".wrong6") .addClass("show");
        	}); 
        	*/

  // --------------------------- Other Pages -------------------------------------

  $('.p1-button').click(function() {
    transition(".page-yourPageID2", "push-left");
  });

  $('.p2-button').click(function() {
    transition(".page-yourPageID3", "push-left");
  });

  $('.p-menu-button').click(function() {
    transition(".page-menu", "fade");
  });

});

$('.introdiv-button').click(function() {
  transition(".page-menu", "push-left");
});



$('#answer1').click(function() {
  $(this).addClass("selected");
  setTimeout(function() {
    checkAnswer(1);
  }, 1000);
});
$('#answer2').click(function() {
  $(this).addClass("selected")
  setTimeout(function() {
    checkAnswer(2);
  }, 1000);
});
$('#answer3').click(function() {
  $(this).addClass("selected")
  setTimeout(function() {
    checkAnswer(3);
  }, 1000);
});

$('#next-btn').click(function() {
  nextQuestion();
});


// set up variables here

var quizData = [{
    question: "",
    answers: ["A new species", "A new food source", "A new disease"],
    correctAnswer: 2,
    feedback: "It will become a red giant. A red dwarf forms from stars smaller than our Sun. A red titaness is not a category. Click to next page find out more."
  },
  {
    question: "Granite is an example of which type of rock?",
    answers: ["Igneous", "Metamorphic", "Sedimentary"],
    correctAnswer: 1,
    feedback: "It's igneous. It is made up of interlocking crystals and forms when molten rock cools slowly below ground. Click to next page find out more."
  },
  {
    question: "Sodium hydroxide solution is made during the electrolysis of concentrated sodium chloride solution. What is it used to make?",
    answers: ["Soap", "Margarine", "Sterilised drinking water"],
    correctAnswer: 1,
    feedback: "Sodium hydroxide is used to make soap."
  },
  {
    question: "Why do plants need nitrate ions?",
    answers: ["To produce proteins", "To make starch for storage", "To make fatty acids"],
    correctAnswer: 1,
    feedback: "Plants need nitrate ions to produce proteins. They need protein for growth and repair."
  },
  {
    question: "What is the mass number of an atom?",
    answers: ["The number of particles it contains", "The number of protons it contains", "The number of protons and neutrons it contains"],
    correctAnswer: 3,
    feedback: "The number of protons and neutrons it contains. Atoms are the basic building blocks of ordinary matter."
  },
  {
    question: "What does the epithelial tissue in the stomach do?",
    answers: ["Produces digestive juices", "Churns the food", "Covers the inner surface of the stomach"],
    correctAnswer: 3,
    feedback: "Epithelial tissue covers the inner surface of the stomach. It protects the stomach wall, acting as a barrier. Muscular tissue churns the food in the stomach."
  },
  {
    question: "What is the official voltage of the mains supply in the UK?",
    answers: ["430V", "230V", "240V"],
    correctAnswer: 2,
    feedback: "It's 230V officially. It used to be 240V but was reduced to harmonise with Europe."
  },
];


var currentQuestion = 0;
var totalQuestions = quizData.length;
var score = 0;

function showQuestion() {
  $("#question").html(quizData[currentQuestion - 1].question);
  $("#answer1").html(quizData[currentQuestion - 1].answers[0]);
  $("#answer2").html(quizData[currentQuestion - 1].answers[1]);
  $("#answer3").html(quizData[currentQuestion - 1].answers[2]);
  $("#feedback").html(quizData[currentQuestion - 1].feedback);
}

function nextQuestion() {
  currentQuestion++;

  // ** You should add something that checks to see if are any more 
  // ** questions left here

  showQuestion();

  // hide feedback and next button
  $("#next-btn").addClass("hidden");
  $("#feedback").addClass("hidden");
  // remove all incorrect, correct classes on answer buttons
  $('.answer-box').removeClass("correct incorrect");
}

function checkAnswer(selectedAnswer) {
  var theCorrectAnswer = quizData[currentQuestion - 1].correctAnswer;
  // remove the grey selected class
  $('.answer-box').removeClass("selected");

  // turn the boxes red or green depending on if they are the correct answer
  $(".answer-box").each(function(quiz) {
    if ((quiz + 1) == theCorrectAnswer) {
      $(this).addClass("correct");
    } else {
      $(this).addClass("incorrect");
    }
  });

  if (selectedAnswer == theCorrectAnswer) {
    // got it correct
    score += 10;
    $(".score").html(score);
  } else {
    // got it wrong so do nothing
  }
  // show feedback and next button
  $("#next-btn").removeClass("hidden");
  $("#feedback").removeClass("hidden");
}

// --------------------------- Transition Pages -------------------------------------

/* use by:  transition(".page-menu","fade");
        
   pass in id of page to show next.  Type can be either "push-left", "push-right"
   or "fade" depending on the type of animation you want to happen.
   Classes are added to incoming and outgoing page that adds a CSS animation
   which moves them into position.  Listener is added for when animation
   is over to tidy up and remove the "current" class from the old page
        
   This code modified from Sitepoint book "Build Mobile websites and apps
   for Smart Devices", Castledine, Eftos, Wheeler (2011) */

function transition(toPage, type) {
  var toPage = $(toPage),
    fromPage = $(".pages .current"); // store the page that is currently showing

  toPage
    .addClass("current " + type + " in")
    .one("msAnimationEnd animationend oAnimationEnd", function() { // listens for when the animation has finished
      fromPage.removeClass("current " + type + " out");
      toPage.removeClass(type + " in");
    });
  fromPage.addClass(type + " out ");
}

body {
  background-color: #333;
  color: white;
  font-family: 'PT Sans', cursive;
}


/**
         * main-container is the main page wrap.  It is a good place to put
         * any content that you want to stay on screen at all times (ie sit
         * above the pages and not animate with them)
         */

#main-container {
  width: 1024px;
  height: 768px;
  margin: 0 auto;
  overflow: hidden;
  /* stops content sat outside the bounds of the container being visible */
  position: relative;
}


/**
         * pages is the container that holds all the individual pages
         */

.pages {
  width: 1024px;
  height: 768px;
}


/**
         * the > symbol means apply this style to TOP-LEVEL (first-child) div's of
         * the container .pages i.e. all the individual pages.  Div's INSIDE of those
         * individual pages don't get passed this rule because of the >
         */

.pages>div {
  display: none;
  /* hide the page */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  /* helps items animate without error in mobile webkit browsers */
}

.pages>div.current {
  display: block;
  /* turn the page visible if this is the current page */
}


/* ========================================================================================
         *
         *   Some quick general styles for the purpose of this example.  You can overwrite
         *   these with styles of your own
         */

.button {
  cursor: pointer;
  background-color: #7ac943;
  display: inline-block;
  color: black;
  padding: 10px;
  font-size: 30px;
  font-family: helvetica;
  font-weight: bolder;
}

.button:hover {
  background-color: white;
}

h1 {
  font-size: 3em;
  margin: 1em;
  text-align: center;
}

h2 {
  text-align: center;
  font-weight: bold;
}

p {
  text-align: center;
  font-weight: bold;
  color: white;
  font-size: 0.6em;
}

h4 {
  text-align: center;
  font-weight: bold;
  color: white;
  font-size: 15px;
  text-align: center;
}


/**
         *  Below this point is where you would add your own css style rules for each of your pages.  The example has
         *  been set up with 5 pages - an intro, menu page and 3 content pages.  You should alter this to fit your interactive, for
         *  instance, you might decide not to have a menu page.
         */


/* ================================================================================================================*\
        
        	
        
        \* ================================================================================================================*/

.correct {
  background-color: #7ac943;
  color: white;
}

.incorrect {
  background-color: red;
  color: white;
}

.show {
  opacity: 1;
}

.hidden {
  opacity: 0;
}

#next-btn {
  background-color: orange;
  position: absolute;
  top: 650px;
  right: 100px;
  padding: 20px;
  cursor: pointer;
}

.selected {
  background-color: #666;
  color: white;
}

.show {
  opacity: 1;
}

.page-intro {
  height: 768px;
  background-color: black;
}

.intro-title {
  position: absolute;
}

.introdiv-button {
  top: 50px;
  left: 219px;
  width: 400px;
  height: 80px;
  background-color: black;
  position: relative;
  border: 0;
  padding: 0;
}

.introgame2 {
  position: absolute;
  top: 350px;
  left: 219px;
  width: 400px;
  height: 80px;
}


/* ================================================================================================================*\
        
        	INTRO PAGE
        
        \* ================================================================================================================*/

.page-menu {
  height: 768px;
  background-color: black;
}

.earthtitle {
  position: absolute;
  left: 225px;
  width: 500px;
  height: 175px;
  margin: 30px;
  animation: wiggle 0.9s infinite;
}

@-webkit-keyframes wiggle {
  0% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}

.menu1-button {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.menu2-button {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.menu3-button {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.instructions {
  position: absolute;
  bottom: 375px;
  right: 250px;
  width: 600px;
  height: 100px;
}

.dinostart {
  position: absolute;
  bottom: 150px;
  right: 100px;
}

.pressready {
  position: absolute;
  bottom: 200px;
  right: 375px;
}


/* ================================================================================================================*\
        
        	PAGE ONE
        
        \* ================================================================================================================*/

.page-yourPageID1 {
  height: 768px;
  background-color: black;
}

.p-menu-button {
  position: absolute;
  bottom: 30px;
  left: 30px;
}

.p1-button {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.question-title {
  position: absolute;
  top: 260px;
  right: 150px;
}

#answersAndFeedback {
  position: absolute;
  left: 210px;
  top: 405px
}

.answer-box {
  width: 600px;
  height: 50px;
  padding: 10px;
  border-color: white;
  border-style: dashed;
  margin: 10px 0;
  font-size: 0.7em;
}

.answer2-button {
  cursor: pointer;
  position: absolute;
  top: 525px;
  right: 200px;
  width: 600px;
  height: 50px;
  padding: 0;
  border-color: white;
  border-style: dashed;
  background-color: black;
}

.answer2-button2 {
  cursor: pointer;
  position: absolute;
  top: 525px;
  right: 200px;
  width: 600px;
  height: 50px;
  padding: 0;
  border-color: white;
  border-style: dashed;
  background-color: black;
}

.answer2-button3 {
  cursor: pointer;
  position: absolute;
  top: 525px;
  right: 200px;
  width: 600px;
  height: 50px;
  padding: 0;
  border-color: white;
  border-style: dashed;
  background-color: black;
}

.answer3-button {
  cursor: pointer;
  position: absolute;
  top: 600px;
  right: 200px;
  width: 600px;
  height: 50px;
  padding: 0;
  border-color: white;
  border-style: dashed;
  background-color: black;
}

.answer3-button2 {
  cursor: pointer;
  position: absolute;
  top: 600px;
  right: 200px;
  width: 600px;
  height: 50px;
  padding: 0;
  border-color: white;
  border-style: dashed;
  background-color: black;
}

.answer3-button3 {
  cursor: pointer;
  position: absolute;
  top: 600px;
  right: 200px;
  width: 600px;
  height: 50px;
  padding: 0;
  border-color: white;
  border-style: dashed;
  background-color: black;
}

.answer1-button:hover {
  background-color: #7ac943;
}

.answer2-button:hover {
  background-color: #7ac943;
}

.answer3-button:hover {
  background-color: #7ac943;
}

.answer1-button2:hover {
  background-color: #7ac943;
}

.answer2-button2:hover {
  background-color: #7ac943;
}

.answer3-button2:hover {
  background-color: #7ac943;
}

.answer1-button3:hover {
  background-color: #7ac943;
}

.answer2-button3:hover {
  background-color: #7ac943;
}

.answer3-button3:hover {
  background-color: #7ac943;
}

.page-yourPageID2 {
  height: 768px;
  background-color: black;
}

.p2-button {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.page-yourPageID3 {
  height: 768px;
  background-color: black;
}

.p3-button {
  position: absolute;
  top: 650px;
  left: 800px;
}


/* ================================================================================================================*\
        
        	PERSISTENT CONTAINERS
        
        \* ================================================================================================================*/

.persistent-stuff {
  position: absolute;
  top: 670px;
  left: 20px;
  width: 400px;
  color: white;
}


/* ================================================================================================================*\
        
        	TRANSITION CODE
        
        	Leave this alone if you are happy with either fade or push transitions between pages.  If you want faster
        	transitions you could alter the 1s timing in the .in, .out class rules below
        
        \* ================================================================================================================*/


/**
         * The transition function in script.js adds the following classes dynamically to the
         * incoming and outgoing pages.  Adding the in, .out classes to the pages is what sets
         * up the animation. A further class is added (e.g. .push-left) depending on the type
         * of animation chosen.  It is this class addition that starts the animation running
         */

.in,
.out {
  animation-timing-function: ease-in-out;
  animation-duration: 1s;
}

.push-left.out {
  animation-name: outToLeft;
}

.push-left.in {
  animation-name: inFromRight;
}

.push-right.out {
  animation-name: outToRight;
}

.push-right.in {
  animation-name: inFromLeft;
}

.fade.out {
  animation-name: fadeOut;
}

.fade.in {
  animation-name: fadeIn;
}

@keyframes outToLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes outToRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes inFromRight {
  from {
    transform: translateX(1024px);
  }
  to {
    transform: translateX(0px);
  }
}

@keyframes inFromLeft {
  from {
    transform: translateX(-1024px);
  }
  to {
    transform: translateX(0px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Earthbound Evolution</title>

  <!-- makes browsers render all elements more consistently. Similar to a CSS reset file -->
  <link rel="stylesheet" href="css/normalize.css">

  <!-- the main style sheet you should edit -->
  <link rel="stylesheet" href="css/style.css">

  <!-- link to PT-Sans font from google fonts -->
  <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

  <!-- link to local version of jQuery 
  <script src="js/jquery-1.11.0.min.js"></script>-->

  <!-- Link to your own javascript file  
  <script src="js/script.js"></script> -->

  <meta name="apple-mobile-web-app-capable" content="yes">
</head>

<body>
  <!-- main page wrap for the interactive -->
  <div id="main-container">

    <!-- container for all the individual pages -->
    <div class="pages">
      <!-- ========================= INTRO =========================== -->

      <div class="page-intro current">
        <h1>Welcome, Choose a game.</h1>
        <div class="introdiv-button button">
          <img src="img/intropage.png">
        </div>
        <div class="introgame2">
          <img src="img/comingsoon.jpg">
        </div>
      </div>
      <!-- intro page -->

      <!-- ========================= MENU =========================== -->

      <div class="page-menu">
        <div class="earthtitle">
          <img src="img/title.png">
        </div>
        <div class="menu1-button button">
          Im Ready
        </div>
        <div class="instructions">
          <h2>This interactive game is a basic questionaire/quiz. Its simple, when you see the correct answer, click on it and select the next button in the bottom corner. Answer every question and find out if your a true science brainiac at the end.</h2>
        </div>
        <div class="pressready">
          <h2> What are you wating for? Press ready.</h2>
        </div>
        <div class="dinostart">
          <img src="img/dino.png">
        </div>
      </div>
      <!-- menu page -->

      <!-- ========================= OTHER PAGES =========================== -->

      <div class="page-yourPageID1">
        <div class="earthtitle">
          <img src="img/title.png">
        </div>
        <div class="question-title">
          <img src="img/question.png">
        </div>

        <div id="wrapper">
          <div id="answersAndFeedback">
            <div id="answer1" class="answer-box">Answer 1</div>
            <div id="answer2" class="answer-box">Answer 2</div>
            <div id="answer3" class="answer-box">Answer 3</div>
            <div id="feedback" class="hidden">Feedback goes here</div>
          </div>
          <div class="score">0</div>
          <div id="next-btn" class="hidden">next</div>
          <div id="game-over" class="hidden">Game over text here</div>
        </div>

        <div class="p1-button button">
          Next
        </div>
        <div class="p-menu-button button">
          Exit to menu
        </div>
      </div>




      <div class="page-yourPageID2">
        <div class="earthtitle">
          <img src="img/title.png">
        </div>
        <div class="question-title">
          <img src="img/question2.png">
        </div>
        <div class="answer1-button2 button">
          <p> A) 4.5 Billon years ago</p>
        </div>
        <div class="answer2-button2 button">
          <p> B) 3 Billion years ago</p>
        </div>
        <div class="answer3-button2 button">
          <p> C) 10 Billion years ago</p>
        </div>
        <div class="p2-button button">
          Next
        </div>
        <div class="p-menu-button button">
          Exit to menu
        </div>
      </div>


      <div class="page-yourPageID3">
        <div class="earthtitle">
          <img src="img/title.png">
        </div>
        <div class="question-title">
          <img src="img/question3.png">
        </div>
        <div class="answer1-button3 button">
          <p> A) Fossils</p>
        </div>
        <div class="answer2-button3 button">
          <p> B) Embroyology</p>
        </div>
        <div class="answer3-button3 button">
          <p> C) Molecular genetics</p>
        </div>
      </div>

      <div class="p-menu-button button">
        Exit to menu
      </div>


    </div>
    <!-- end of pages -->

    <!-- add any containers here that you don't want to animate when pages transition -->
    <div class="persistent-stuff">

    </div>
  </div>
  <!-- end of main container -->
</body>

</html>

谢谢。