如何在我的Trivia游戏中收集用户的正确选择？

时间：2017-06-06 16:42:19

标签： javascript jquery

按下单选按钮时，我尝试了多种方法来收集正确答案，但在游戏结束后，我仍然得到0中的0。 我不知道还能做些什么，并且已经坚持了一段时间。任何帮助将不胜感激！

$(document).ready(function() {


  $("#clickStart").click(function() {
    $('#questions').show(600);
    $('#clock').show(700);
    $('#hide').hide(500);


  });


  (function() {
    var questions = [{
        question: "The great Victoria Desert is located in?",
        choices: ['Canada', 'West Africa', 'Australia', 'North America'],
        correctAnswer: 'Australia'
      },
      {
        question: "The intersecting lines drawn on maps and globes are?",
        choices: ['lattitudes', 'longitudes', 'geographic grids', 'none of the above'],
        correctAnswer: 'geographic gird'
      },
      {
        question: "The landmass of which of the following continents is the least?",
        choices: ['Africa', 'Asia', 'Australia', 'Europe'],
        correctAnswer: 'Australia'
      },
      {
        question: "Without ____ the equator would be much hotter than it is while the poles would be much cooler",
        choices: ['Lattitude of redistribution of heat', 'Cycle of air circulation', 'Global wind pattern', 'All are similiar'],
        correctAnswer: 'All are simliar'
      },
      {
        question: "The habitats valuable for commercially harvested species are called?",
        choices: ['Coral reefs', 'Sea grass bed', 'hot spots', 'None of the above'],
        correctAnswer: 'Sea grass bed'
      }
    ];

    var questionCounter = 0; //Tracks question number
    var selections = []; //Array containing user choices
    var quiz = $("#quiz"); //Quiz div object

    // Display initial question
    displayNext();

    //  'next' button
    $("#next").on("click", function(e) {
      e.preventDefault();

      // Suspend click listener during fade animation
      if (quiz.is(":animated")) {
        return false;
      }
      choose();

      // If no user selection, progress is stopped
      if (isNaN(selections[questionCounter])) {
        alert("Please make a selection!");
      } else {
        questionCounter++;
        displayNext();
      }
    });

    // 'prev' button
    $("#prev").on("click", function(e) {
      e.preventDefault();

      if (quiz.is(":animated")) {
        return false;
      }
      choose();
      questionCounter--;
      displayNext();
    });

    // 'Start Over' button
    $("#start").on("click", function(e) {
      e.preventDefault();

      if (quiz.is(":animated")) {
        return false;
      }
      questionCounter = 0;
      selections = [];
      displayNext();
      $("#start").hide();
    });

    // Animates buttons on hover
    $(".button").on("mouseenter", function() {
      $(this).addClass("active");
    });
    $(".button").on("mouseleave", function() {
      $(this).removeClass("active");
    });

    // Creates and returns the div that contains the questions and
    // the answer selections
    function createQuestionElement(index) {
      var qElement = $("<div>", {
        id: "question"
      });

      var header = $("<h2>Question " + (index + 1) + ":</h2>");
      qElement.append(header);

      var question = $("<p>").append(questions[index].question);
      qElement.append(question);

      var radioButtons = createRadios(index);
      qElement.append(radioButtons);

      return qElement;
    }

    // Creates a list of the answer choices as radio inputs
    function createRadios(index) {
      var radioList = $("<ul>");
      var item;
      var input = "";
      for (var i = 0; i < questions[index].choices.length; i++) {
        item = $("<li>");
        input = '<input type="radio" name="answer" value=' + i + " />";
        input += questions[index].choices[i];
        item.append(input);
        radioList.append(item);
      }
      return radioList;
    }

    // Reads the user selection and pushes the value to an array
    function choose() {
      selections[questionCounter] = +$('input[name="answer"]:checked').val();
    }

    // Displays next requested element
    function displayNext() {
      quiz.fadeOut(function() {
        $("#question").remove();

        if (questionCounter < questions.length) {
          var nextQuestion = createQuestionElement(questionCounter);
          quiz.append(nextQuestion).fadeIn();
          if (!isNaN(selections[questionCounter])) {
            $("input[value=" + selections[questionCounter] + "]").prop(
              "checked",
              true
            );
          }

          // Controls display of 'prev' button
          if (questionCounter === 1) {
            $("#prev").show();
          } else if (questionCounter === 0) {
            $("#prev").hide();
            $("#next").show();
          }
        } else {
          var scoreElem = displayScore();
          quiz.append(scoreElem).fadeIn();
          $("#next").hide();
          $("#prev").hide();
          $("#start").show();
        }
      });
    }

    // Computes score and returns a paragraph element to be displayed
    function displayScore() {
      var score = $("<p>", {
        id: "question"
      });

      var numCorrect = 0;
      for (var i = 0; i < selections.length; i++) {
        if (selections[i] === questions[i].correctAnswer) {
          numCorrect++;
        }
      }

      score.append(
        "You got " +
        numCorrect +
        " questions out of " +
        questions.length +
        " right!!!"
      );
      return score;
    }
  })();
});
body {
  padding: 0;
  margin: 0;
  width: 100%;
  background: url(../images/background.png);
  height: 1vh;
  background-repeat: no-repeat;
}

h1 {
  font-family: sans-serif;
  font-size: 3em;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

#title {
  text-decoration: underline;
}

#header {
  text-align: center;
  font-size: 30px;
  font-weight: 700px;
  color: #fff;
  width: 100%;
  height: 200px;
  padding: 7%;
}

.start-button {
  background-color: rgba(0, 0, 0, .7);
  margin-top: 5%;
  width: 300px;
  height: 100px;
}

.start-button:hover {
  background-color: #0246e2;
  color: #f5684f;
  font-size: 50px;
}

button {
  text-align: center;
}

#clock {
  display: none;
  color: #fff;
  font-size: 100px;
  z-index: 1000;
}

#quiz {
  text-indent: 10px;
}

.button {
  border: 4px solid;
  border-radius: 5px;
  width: 40px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: right;
  background-color: #DCDCDC;
  color: black;
  margin: 0 2px 0 2px;
}

.button.active {
  background-color: #F8F8FF;
  color: #525252;
}

#questions {
  display: none;
  padding-top: 10%;
  width: 100%;
  height: auto;
}

.button a {
  text-decoration: none;
  color: black;
}

#content {
  width: 100%;
  margin: auto;
  padding: 0 25px 40px 10px;
  background-color: rgba(0, 0, 0, .7);
  border: 4px solid #B0E0E6;
  border-radius: 5px;
  color: #FFFFFF;
  font-weight: bold;
  box-shadow: 5px 5px 5px #888;
  height: 500px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#prev {
  display: none;
}

#start {
  display: none;
  width: 90px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Trivia Game</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./assets/css/style.css">
</head>

<body>

  <body>
    <div class="container">
      <div id="hide" class="row">
        <div id="header" class="text-center col-12-lg">
          <h1>How Well Do You Know Your Geography?</h1>
          <p>You have 2 min to guess all the questions...Good Luck!</p>
          <button id="clickStart" class="start-button">Start!</button>
        </div>
      </div>
      <div id="clock" class="row">
        <div class="col-12-lg text-center" id="display">
          <h3>00:00</h3>
        </div>
      </div>
      <div id="questions" class="row">
        <div class="col-12-lg">
          <div id='content'>
            <br/>
            <div id='quiz'></div>
            <div class='button' id='next'><a href='#'>Next</a></div>
            <div class='button' id='prev'><a href='#'>Prev</a></div>
            <div class='button' id='start'> <a href='#'>Start Over</a></div>
          </div>
        </div>
      </div>
    </div>





    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="./assets/js/app.js"></script>
  </body>

</html>

3 个答案:

答案 0 :(得分：0)

selections[questionCounter] = +$('input[name="answer"]:checked').val();

你的意思是+ =，而不是= +？

答案 1 :(得分：0)

问题在于：

function choose() {
  selections[questionCounter] = +$('input[name="answer"]:checked').val();
}

输入的值是其索引。所以索引=== correctAnswer将失败。 你要么：

if (questions[i].choices[selections[i]] === questions[i].correctAnswer) {
          numCorrect++;
}

或将索引存储在correctAnswer ...

中 

$(document).ready(function() {


  $("#clickStart").click(function() {
    $('#questions').show(600);
    $('#clock').show(700);
    $('#hide').hide(500);


  });


  (function() {
    var questions = [{
        question: "The great Victoria Desert is located in?",
        choices: ['Canada', 'West Africa', 'Australia', 'North America'],
        correctAnswer: 'Australia'
      },
      {
        question: "The intersecting lines drawn on maps and globes are?",
        choices: ['lattitudes', 'longitudes', 'geographic grids', 'none of the above'],
        correctAnswer: 'geographic gird'
      },
      {
        question: "The landmass of which of the following continents is the least?",
        choices: ['Africa', 'Asia', 'Australia', 'Europe'],
        correctAnswer: 'Australia'
      },
      {
        question: "Without ____ the equator would be much hotter than it is while the poles would be much cooler",
        choices: ['Lattitude of redistribution of heat', 'Cycle of air circulation', 'Global wind pattern', 'All are similiar'],
        correctAnswer: 'All are simliar'
      },
      {
        question: "The habitats valuable for commercially harvested species are called?",
        choices: ['Coral reefs', 'Sea grass bed', 'hot spots', 'None of the above'],
        correctAnswer: 'Sea grass bed'
      }
    ];

    var questionCounter = 0; //Tracks question number
    var selections = []; //Array containing user choices
    var quiz = $("#quiz"); //Quiz div object

    // Display initial question
    displayNext();

    //  'next' button
    $("#next").on("click", function(e) {
      e.preventDefault();

      // Suspend click listener during fade animation
      if (quiz.is(":animated")) {
        return false;
      }
      choose();

      // If no user selection, progress is stopped
      if (isNaN(selections[questionCounter])) {
        alert("Please make a selection!");
      } else {
        questionCounter++;
        displayNext();
      }
    });

    // 'prev' button
    $("#prev").on("click", function(e) {
      e.preventDefault();

      if (quiz.is(":animated")) {
        return false;
      }
      choose();
      questionCounter--;
      displayNext();
    });

    // 'Start Over' button
    $("#start").on("click", function(e) {
      e.preventDefault();

      if (quiz.is(":animated")) {
        return false;
      }
      questionCounter = 0;
      selections = [];
      displayNext();
      $("#start").hide();
    });

    // Animates buttons on hover
    $(".button").on("mouseenter", function() {
      $(this).addClass("active");
    });
    $(".button").on("mouseleave", function() {
      $(this).removeClass("active");
    });

    // Creates and returns the div that contains the questions and
    // the answer selections
    function createQuestionElement(index) {
      var qElement = $("<div>", {
        id: "question"
      });

      var header = $("<h2>Question " + (index + 1) + ":</h2>");
      qElement.append(header);

      var question = $("<p>").append(questions[index].question);
      qElement.append(question);

      var radioButtons = createRadios(index);
      qElement.append(radioButtons);

      return qElement;
    }

    // Creates a list of the answer choices as radio inputs
    function createRadios(index) {
      var radioList = $("<ul>");
      var item;
      var input = "";
      for (var i = 0; i < questions[index].choices.length; i++) {
        item = $("<li>");
        input = '<input type="radio" name="answer" value=' + i + " />";
        input += questions[index].choices[i];
        item.append(input);
        radioList.append(item);
      }
      return radioList;
    }

    // Reads the user selection and pushes the value to an array
    function choose() {
      selections[questionCounter] = +$('input[name="answer"]:checked').val();
    }

    // Displays next requested element
    function displayNext() {
      quiz.fadeOut(function() {
        $("#question").remove();

        if (questionCounter < questions.length) {
          var nextQuestion = createQuestionElement(questionCounter);
          quiz.append(nextQuestion).fadeIn();
          if (!isNaN(selections[questionCounter])) {
            $("input[value=" + selections[questionCounter] + "]").prop(
              "checked",
              true
            );
          }

          // Controls display of 'prev' button
          if (questionCounter === 1) {
            $("#prev").show();
          } else if (questionCounter === 0) {
            $("#prev").hide();
            $("#next").show();
          }
        } else {
          var scoreElem = displayScore();
          quiz.append(scoreElem).fadeIn();
          $("#next").hide();
          $("#prev").hide();
          $("#start").show();
        }
      });
    }

    // Computes score and returns a paragraph element to be displayed
    function displayScore() {
      var score = $("<p>", {
        id: "question"
      });

      var numCorrect = 0;
      console.log(selections.map((el,i)=>questions[i].choices[el]),questions.map(e=>e.correctAnswer));
      for (var i = 0; i < selections.length; i++) {
        if (questions[i].choices[selections[i]] === questions[i].correctAnswer) {
          numCorrect++;
        }
      }

      score.append(
        "You got " +
        numCorrect +
        " questions out of " +
        questions.length +
        " right!!!"
      );
      return score;
    }
  })();
});
body {
  padding: 0;
  margin: 0;
  width: 100%;
  background: url(../images/background.png);
  height: 1vh;
  background-repeat: no-repeat;
}

h1 {
  font-family: sans-serif;
  font-size: 3em;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

#title {
  text-decoration: underline;
}

#header {
  text-align: center;
  font-size: 30px;
  font-weight: 700px;
  color: #fff;
  width: 100%;
  height: 200px;
  padding: 7%;
}

.start-button {
  background-color: rgba(0, 0, 0, .7);
  margin-top: 5%;
  width: 300px;
  height: 100px;
}

.start-button:hover {
  background-color: #0246e2;
  color: #f5684f;
  font-size: 50px;
}

button {
  text-align: center;
}

#clock {
  display: none;
  color: #fff;
  font-size: 100px;
  z-index: 1000;
}

#quiz {
  text-indent: 10px;
}

.button {
  border: 4px solid;
  border-radius: 5px;
  width: 40px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: right;
  background-color: #DCDCDC;
  color: black;
  margin: 0 2px 0 2px;
}

.button.active {
  background-color: #F8F8FF;
  color: #525252;
}

#questions {
  display: none;
  padding-top: 10%;
  width: 100%;
  height: auto;
}

.button a {
  text-decoration: none;
  color: black;
}

#content {
  width: 100%;
  margin: auto;
  padding: 0 25px 40px 10px;
  background-color: rgba(0, 0, 0, .7);
  border: 4px solid #B0E0E6;
  border-radius: 5px;
  color: #FFFFFF;
  font-weight: bold;
  box-shadow: 5px 5px 5px #888;
  height: 500px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#prev {
  display: none;
}

#start {
  display: none;
  width: 90px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Trivia Game</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./assets/css/style.css">
</head>

<body>

  <body>
    <div class="container">
      <div id="hide" class="row">
        <div id="header" class="text-center col-12-lg">
          <h1>How Well Do You Know Your Geography?</h1>
          <p>You have 2 min to guess all the questions...Good Luck!</p>
          <button id="clickStart" class="start-button">Start!</button>
        </div>
      </div>
      <div id="clock" class="row">
        <div class="col-12-lg text-center" id="display">
          <h3>00:00</h3>
        </div>
      </div>
      <div id="questions" class="row">
        <div class="col-12-lg">
          <div id='content'>
            <br/>
            <div id='quiz'></div>
            <div class='button' id='next'><a href='#'>Next</a></div>
            <div class='button' id='prev'><a href='#'>Prev</a></div>
            <div class='button' id='start'> <a href='#'>Start Over</a></div>
          </div>
        </div>
      </div>
    </div>





    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="./assets/js/app.js"></script>
  </body>

</html>

答案 2 :(得分：0)

不，我只是愚蠢而且调用数组的字符串而不是数字。因此，没有正确的答案是'Austrailia'，它将是2.当我发布这个问题，当然，我想出来大声笑。不过，谢谢你的帮助。

相关问题
最新问题