琐事游戏：数组的答案不正确或不正确。

Question

可以在此处找到代码的链接：Codepen link

从triviaPrompts数组中随机选择问题。但是，选择后答案会错误地显示出来。

例如：这个问题的正确答案是B：马拉卡纳体育场。但是，会出现提示错误答案并将选项C显示为正确答案  

HTML：

<div class="container" id="start">
  <div class = "question"></div>
  </br>
  <div id="answers">
  </br>
    <div class= "answer span" id= "A"></div>
    <div class= "answer span" id= "B"></div>
    <div class= "answer span" id= "C"></div>
  </div>
</div>
<div class="container">
  <div class="score"></div>
</div>

<div class="container2">
  <div class = "right-or-wrong" style = "display:none"></div>
  </br>
    <div class = "next" style = "display:none">Next question!</div>
      <div id="score again"></div>
        </div>

<div class="cd-popup" role="alert">
    <div class="cd-popup-container">
        <p> You got nothing right</p>
        <ul class="cd-buttons">
            <li id="reset"><a href="#start">Play Again</a></li>
        </ul>
    </div>
</div>
<div class="cd-popup1" role="alert">
    <div class="cd-popup1-container">
    <img src="css/bronze-short.png" />
    <p> You got 1 out of 3 correct. </br>Good job!</p>
        <ul class="cd-buttons">
            <li id="reset"><a href="#start">Play Again</a></li>
        </ul>
    </div>
</div>
<div class="cd-popup2" role="alert">
    <div class="cd-popup2-container">
    <img src="css/silver-short.png" />
    <p>You got 2 out of 3 correct.</br>Awesome job!</p>
        <ul class="cd-buttons">
            <li id="reset"><a href="#start">Play Again</a></li>
        </ul>
    </div>
</div>
<div class="cd-popup3" role="alert">
    <div class="cd-popup3-container">
    <img src="css/gold-short.png" />
            <p>You got 3 out of 3 correct.</br>Perfection!</p>
        <ul class="cd-buttons">
            <li id="reset"><a href="#start">Play Again</a></li>
        </ul>
    </div>
</div>

JS：

var clickCount = 0;
var questionCount = 0;
var score = 0;
var i = 0;
var reloading = document.getElementById('reload');
var setScore = function() {
  if (clickCount < 1) {
    $(".score").html("<p>Score:" + score + "</p>");
  }
};
function reset(){
  $('#reset').on('click', function (){
    addQAs();
    setScore();
    chooseAnswer();
  })
};

jQuery(document).ready(function($){
  //open popup
  $('.cd-popup-trigger').on('click', function(){
    // event.preventDefault();
    $('.cd-popup').addClass('is-visible');
  });

  //close popup
  $('#reset').on('click', function(){
    $('.cd-popup').removeClass('is-visible');
    reset()
  })

  $(document).keyup(function(event){
    if(event.which=='27'){
      $('.cd-popup').removeClass('is-visible');
    }
  });
});


var triviaPrompts = [
  [ "How many times have the Olympics been held in South America before 2016?", ["Once", "Twice", "Never"], "C", ["A", "B"] ],
  [ "Which events are included for the first time in decades?", ["Golf & Cycling-BMX", "Rugby & Golf", "Rugby & Cricket"], "B", ["A", "C"] ],
  [ "What is lit with a flame during the opening ceremony?", ["The Olympic Cauldron", "The Olympic Mascot", "The Olympic Torch"], "C", ["A", "B"] ],
  [ "The torch relay began on April 21st in which city?", ["Olympia", "Rio de Janeiro", "London"], "A", ["B", "C"] ],
  [ "Organizers prepare approximately how many meals per day to feed athletes?", ["5,000", "60,000", "30,000"], "B", ["A", "C"] ],
  [ "Which is one of the venues for the Rio Olympics?", ["The Olympic Golf Course", "The Olympic Village", "The Olympic Parade"], "A", ["B", "C"] ],
  [ "The first refugee team to ever compete at the Olympic Games competes under which flag?", ["Olympic", "Greece", "Brazil"], "A", ["B", "C"] ],
  [ "Which two types of martial arts are represented in the Summer Olympics?", ["Kung Fu & Tai Chi Chuan", "Karate & Ninjitsu", "Taekwondo & Judo"], "C", ["A", "B"] ],
  [ "The beach volleyball tournament is held at?", ["Fort Copacabana", "Copacabana Beach", "The Copacabana Club"], "B", ["A", "C"] ],
  [ "Where are the opening and closing ceremonies held?", ["Joao Havelange Olympic Stadium", "Maracana Stadium", "Maracanazinho Arena"], "B", ["A", "C"] ],
  ["How many gold medals will be handed out during at the 2016 Summer Olympics?",
  ["306", "256", "400"], "A", ["B", "C"] ],
  ["What is the motto for the 2016 Summer Olympics?", ["One World. One Dream.", "Light the Fire Within", "Live your passion"], "C", ["A", "B"] ],
  ["What is the estimated cost in U.S. dollars of the 2016 Summer Olympics?", ["$6.25 billion", "$11.25 billion", "$22.25 billion"], "B", ["A", "C"] ],
  ["When will the 2016 Summer Games end?", ["October 15th", "September 2nd", "August 21st"], "C", ["A", "B"] ],
  ["Rio's taxi drivers, or 'taxistas', were given the chance to sign up for free online English lessons provided by the Rio 2016 Organizing Committee?", ["True", "False", " "], "A", ["B", "C"] ],
  ["There will be a total of 28 sports in the 2016 Summer Olympics?", ["True", "False", " "], "A", ["B", "C"] ],
  ["The official mascots of the 2016 Summer Olympics are Vinicius and Tom?", ["True", "False", " "], "A", ["B", "C"] ],
  ["There will be less than 10,000 athletes participating in the 2016 Summer Olympics?", ["True", "False", " "], "B", ["A", "C"] ]
];

function addQAs (){
  var questionCount = Math.floor(Math.random() * triviaPrompts.length);
  $(".question").text(triviaPrompts[questionCount][0]);
  $("#A").text( triviaPrompts[questionCount][1][0] );
  $("#B").text( triviaPrompts[questionCount][1][1] );
  $("#C").text( triviaPrompts[questionCount][1][2] );
};


var chooseAnswer = function(){

  var rightAnswer = function() {
    if (clickCount < 1) {
      $(this).css("color", "green"); // (1)
      $("#" + triviaPrompts[questionCount][3][0]).css("color", "grey");
      $("#" + triviaPrompts[questionCount][3][1]).css("color", "grey");
      $(".right-or-wrong").show();
      $(".right-or-wrong").text("You are correct!");
      score = score + 1;
    }
    setScore();
    clickCount++;
    $(".next").show();
  };

  var wrongAnswer = function () {
    if (clickCount < 1) {
      $(".answer").css("color", "grey");
      $(this).css("color", "red");
      $(".right-or-wrong").show();
      $(".right-or-wrong").text("That is wrong! The correct Answer is " +  $("#" + triviaPrompts[questionCount][2]).text() + ".");
      clickCount++;
      $(".next").show();
    }
  };

  var answerChoices = function() {
    $(".answer").off("click");
    $("#" + triviaPrompts[questionCount][2]).on("click", rightAnswer);
    $("#" + triviaPrompts[questionCount][3][0]).on("click", wrongAnswer);
    $("#" + triviaPrompts[questionCount][3][1]).on("click", wrongAnswer);
  };
  answerChoices();
};


var onNext = function(){
  var random = Math.floor(Math.random() * (triviaPrompts.length));
  questionCount++;
  if ( questionCount <= (triviaPrompts.length-1)) {
    addQAs();
    $(".right-or-wrong").hide();
    $(".next").hide();
    $(".answer").css("color", "white");
    clickCount = 0;
    chooseAnswer();
  }

  if ( questionCount == 3 ) {
    $(document).ready(function () {
      if (score=== 3){
        $('.cd-popup3').addClass('is-visible');
      } else if ( score === 2) {
        $('.cd-popup2').addClass('is-visible');
      } else if  (score ===1){
        $('.cd-popup1').addClass('is-visible');
      } else {
        $('.cd-popup').addClass('is-visible');
      }
    })
  }
}

$(".next").on("click", onNext);
$("html").on("keydown", function(e){
  if ($(".next").css("display") !== "none"){
    if (e.keyCode == 13) {
      onNext();
    }
  }
});

addQAs();
setScore();
chooseAnswer();
reset();

Answer 1

要达到预期效果，请按以下更新rightanswer功能

var rightAnswer = function() {
    if (clickCount < 1) {
      $("#" + triviaPrompts[questionCount][2]).css("color", "green"); // replace this code
      $("#" + triviaPrompts[questionCount][3][0]).css("color", "grey");
      $("#" + triviaPrompts[questionCount][3][1]).css("color", "grey");
      $(".right-or-wrong").show();
      $(".right-or-wrong").text("You are correct!");
      score = score + 1;
    }
    setScore();
    clickCount++;
    $(".next").show();
  };

Codepen- http://codepen.io/nagasai/pen/xOybEo

Answer 2

通过从addQAs函数中取出var，我能够得到正确的答案：旧代码

function addQAs (){
  var questionCount = Math.floor(Math.random() * triviaPrompts.length);
  $(".question").text(triviaPrompts[questionCount][0]);
  $("#A").text( triviaPrompts[questionCount][1][0] );
  $("#B").text( triviaPrompts[questionCount][1][1] );
  $("#C").text( triviaPrompts[questionCount][1][2] );
};

新的和有效的代码：

function addQAs (){
  questionCount = Math.floor(Math.random() * triviaPrompts.length);
  $(".question").text(triviaPrompts[questionCount][0]);
  $("#A").text( triviaPrompts[questionCount][1][0] );
  $("#B").text( triviaPrompts[questionCount][1][1] );
  $("#C").text( triviaPrompts[questionCount][1][2] );
};